import { __extends } from "tslib";
|
import Definable from './Definable.js';
|
import * as zrUtil from '../../core/util.js';
|
import { getIdURL, isGradient, isLinearGradient, isRadialGradient, normalizeColor, round4 } from '../../svg/helper.js';
|
import { createElement } from '../../svg/core.js';
|
var GradientManager = (function (_super) {
|
__extends(GradientManager, _super);
|
function GradientManager(zrId, svgRoot) {
|
return _super.call(this, zrId, svgRoot, ['linearGradient', 'radialGradient'], '__gradient_in_use__') || this;
|
}
|
GradientManager.prototype.addWithoutUpdate = function (svgElement, displayable) {
|
if (displayable && displayable.style) {
|
var that_1 = this;
|
zrUtil.each(['fill', 'stroke'], function (fillOrStroke) {
|
var value = displayable.style[fillOrStroke];
|
if (isGradient(value)) {
|
var gradient = value;
|
var defs = that_1.getDefs(true);
|
var dom = void 0;
|
if (gradient.__dom) {
|
dom = gradient.__dom;
|
if (!defs.contains(gradient.__dom)) {
|
that_1.addDom(dom);
|
}
|
}
|
else {
|
dom = that_1.add(gradient);
|
}
|
that_1.markUsed(displayable);
|
svgElement.setAttribute(fillOrStroke, getIdURL(dom.getAttribute('id')));
|
}
|
});
|
}
|
};
|
GradientManager.prototype.add = function (gradient) {
|
var dom;
|
if (isLinearGradient(gradient)) {
|
dom = createElement('linearGradient');
|
}
|
else if (isRadialGradient(gradient)) {
|
dom = createElement('radialGradient');
|
}
|
else {
|
if (process.env.NODE_ENV !== 'production') {
|
zrUtil.logError('Illegal gradient type.');
|
}
|
return null;
|
}
|
gradient.id = gradient.id || this.nextId++;
|
dom.setAttribute('id', 'zr' + this._zrId
|
+ '-gradient-' + gradient.id);
|
this.updateDom(gradient, dom);
|
this.addDom(dom);
|
return dom;
|
};
|
GradientManager.prototype.update = function (gradient) {
|
if (!isGradient(gradient)) {
|
return;
|
}
|
var that = this;
|
this.doUpdate(gradient, function () {
|
var dom = gradient.__dom;
|
if (!dom) {
|
return;
|
}
|
var tagName = dom.tagName;
|
var type = gradient.type;
|
if (type === 'linear' && tagName === 'linearGradient'
|
|| type === 'radial' && tagName === 'radialGradient') {
|
that.updateDom(gradient, gradient.__dom);
|
}
|
else {
|
that.removeDom(gradient);
|
that.add(gradient);
|
}
|
});
|
};
|
GradientManager.prototype.updateDom = function (gradient, dom) {
|
if (isLinearGradient(gradient)) {
|
dom.setAttribute('x1', gradient.x);
|
dom.setAttribute('y1', gradient.y);
|
dom.setAttribute('x2', gradient.x2);
|
dom.setAttribute('y2', gradient.y2);
|
}
|
else if (isRadialGradient(gradient)) {
|
dom.setAttribute('cx', gradient.x);
|
dom.setAttribute('cy', gradient.y);
|
dom.setAttribute('r', gradient.r);
|
}
|
else {
|
if (process.env.NODE_ENV !== 'production') {
|
zrUtil.logError('Illegal gradient type.');
|
}
|
return;
|
}
|
dom.setAttribute('gradientUnits', gradient.global
|
? 'userSpaceOnUse'
|
: 'objectBoundingBox');
|
dom.innerHTML = '';
|
var colors = gradient.colorStops;
|
for (var i = 0, len = colors.length; i < len; ++i) {
|
var stop_1 = createElement('stop');
|
stop_1.setAttribute('offset', round4(colors[i].offset) * 100 + '%');
|
var stopColor = colors[i].color;
|
var _a = normalizeColor(stopColor), color = _a.color, opacity = _a.opacity;
|
stop_1.setAttribute('stop-color', color);
|
if (opacity < 1) {
|
stop_1.setAttribute('stop-opacity', opacity);
|
}
|
dom.appendChild(stop_1);
|
}
|
gradient.__dom = dom;
|
};
|
GradientManager.prototype.markUsed = function (displayable) {
|
if (displayable.style) {
|
var gradient = displayable.style.fill;
|
if (gradient && gradient.__dom) {
|
_super.prototype.markDomUsed.call(this, gradient.__dom);
|
}
|
gradient = displayable.style.stroke;
|
if (gradient && gradient.__dom) {
|
_super.prototype.markDomUsed.call(this, gradient.__dom);
|
}
|
}
|
};
|
return GradientManager;
|
}(Definable));
|
export default GradientManager;
|
