GradientManager.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import { __extends } from "tslib";
  2. import Definable from './Definable.js';
  3. import * as zrUtil from '../../core/util.js';
  4. import { getIdURL, isGradient, isLinearGradient, isRadialGradient, normalizeColor, round4 } from '../../svg/helper.js';
  5. import { createElement } from '../../svg/core.js';
  6. var GradientManager = (function (_super) {
  7. __extends(GradientManager, _super);
  8. function GradientManager(zrId, svgRoot) {
  9. return _super.call(this, zrId, svgRoot, ['linearGradient', 'radialGradient'], '__gradient_in_use__') || this;
  10. }
  11. GradientManager.prototype.addWithoutUpdate = function (svgElement, displayable) {
  12. if (displayable && displayable.style) {
  13. var that_1 = this;
  14. zrUtil.each(['fill', 'stroke'], function (fillOrStroke) {
  15. var value = displayable.style[fillOrStroke];
  16. if (isGradient(value)) {
  17. var gradient = value;
  18. var defs = that_1.getDefs(true);
  19. var dom = void 0;
  20. if (gradient.__dom) {
  21. dom = gradient.__dom;
  22. if (!defs.contains(gradient.__dom)) {
  23. that_1.addDom(dom);
  24. }
  25. }
  26. else {
  27. dom = that_1.add(gradient);
  28. }
  29. that_1.markUsed(displayable);
  30. svgElement.setAttribute(fillOrStroke, getIdURL(dom.getAttribute('id')));
  31. }
  32. });
  33. }
  34. };
  35. GradientManager.prototype.add = function (gradient) {
  36. var dom;
  37. if (isLinearGradient(gradient)) {
  38. dom = createElement('linearGradient');
  39. }
  40. else if (isRadialGradient(gradient)) {
  41. dom = createElement('radialGradient');
  42. }
  43. else {
  44. if (process.env.NODE_ENV !== 'production') {
  45. zrUtil.logError('Illegal gradient type.');
  46. }
  47. return null;
  48. }
  49. gradient.id = gradient.id || this.nextId++;
  50. dom.setAttribute('id', 'zr' + this._zrId
  51. + '-gradient-' + gradient.id);
  52. this.updateDom(gradient, dom);
  53. this.addDom(dom);
  54. return dom;
  55. };
  56. GradientManager.prototype.update = function (gradient) {
  57. if (!isGradient(gradient)) {
  58. return;
  59. }
  60. var that = this;
  61. this.doUpdate(gradient, function () {
  62. var dom = gradient.__dom;
  63. if (!dom) {
  64. return;
  65. }
  66. var tagName = dom.tagName;
  67. var type = gradient.type;
  68. if (type === 'linear' && tagName === 'linearGradient'
  69. || type === 'radial' && tagName === 'radialGradient') {
  70. that.updateDom(gradient, gradient.__dom);
  71. }
  72. else {
  73. that.removeDom(gradient);
  74. that.add(gradient);
  75. }
  76. });
  77. };
  78. GradientManager.prototype.updateDom = function (gradient, dom) {
  79. if (isLinearGradient(gradient)) {
  80. dom.setAttribute('x1', gradient.x);
  81. dom.setAttribute('y1', gradient.y);
  82. dom.setAttribute('x2', gradient.x2);
  83. dom.setAttribute('y2', gradient.y2);
  84. }
  85. else if (isRadialGradient(gradient)) {
  86. dom.setAttribute('cx', gradient.x);
  87. dom.setAttribute('cy', gradient.y);
  88. dom.setAttribute('r', gradient.r);
  89. }
  90. else {
  91. if (process.env.NODE_ENV !== 'production') {
  92. zrUtil.logError('Illegal gradient type.');
  93. }
  94. return;
  95. }
  96. dom.setAttribute('gradientUnits', gradient.global
  97. ? 'userSpaceOnUse'
  98. : 'objectBoundingBox');
  99. dom.innerHTML = '';
  100. var colors = gradient.colorStops;
  101. for (var i = 0, len = colors.length; i < len; ++i) {
  102. var stop_1 = createElement('stop');
  103. stop_1.setAttribute('offset', round4(colors[i].offset) * 100 + '%');
  104. var stopColor = colors[i].color;
  105. var _a = normalizeColor(stopColor), color = _a.color, opacity = _a.opacity;
  106. stop_1.setAttribute('stop-color', color);
  107. if (opacity < 1) {
  108. stop_1.setAttribute('stop-opacity', opacity);
  109. }
  110. dom.appendChild(stop_1);
  111. }
  112. gradient.__dom = dom;
  113. };
  114. GradientManager.prototype.markUsed = function (displayable) {
  115. if (displayable.style) {
  116. var gradient = displayable.style.fill;
  117. if (gradient && gradient.__dom) {
  118. _super.prototype.markDomUsed.call(this, gradient.__dom);
  119. }
  120. gradient = displayable.style.stroke;
  121. if (gradient && gradient.__dom) {
  122. _super.prototype.markDomUsed.call(this, gradient.__dom);
  123. }
  124. }
  125. };
  126. return GradientManager;
  127. }(Definable));
  128. export default GradientManager;