GradientManager.js 5.1 KB

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