123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- 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;
|