PatternManager.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. import { __extends } from "tslib";
  2. import Definable from './Definable.js';
  3. import * as zrUtil from '../../core/util.js';
  4. import { createOrUpdateImage } from '../../graphic/helper/image.js';
  5. import WeakMap from '../../core/WeakMap.js';
  6. function isPattern(value) {
  7. return value && (!!value.image || !!value.svgElement);
  8. }
  9. var patternDomMap = new WeakMap();
  10. var PatternManager = (function (_super) {
  11. __extends(PatternManager, _super);
  12. function PatternManager(zrId, svgRoot) {
  13. return _super.call(this, zrId, svgRoot, ['pattern'], '__pattern_in_use__') || this;
  14. }
  15. PatternManager.prototype.addWithoutUpdate = function (svgElement, displayable) {
  16. if (displayable && displayable.style) {
  17. var that_1 = this;
  18. zrUtil.each(['fill', 'stroke'], function (fillOrStroke) {
  19. var pattern = displayable.style[fillOrStroke];
  20. if (isPattern(pattern)) {
  21. var defs = that_1.getDefs(true);
  22. var dom = patternDomMap.get(pattern);
  23. if (dom) {
  24. if (!defs.contains(dom)) {
  25. that_1.addDom(dom);
  26. }
  27. }
  28. else {
  29. dom = that_1.add(pattern);
  30. }
  31. that_1.markUsed(displayable);
  32. var id = dom.getAttribute('id');
  33. svgElement.setAttribute(fillOrStroke, 'url(#' + id + ')');
  34. }
  35. });
  36. }
  37. };
  38. PatternManager.prototype.add = function (pattern) {
  39. if (!isPattern(pattern)) {
  40. return;
  41. }
  42. var dom = this.createElement('pattern');
  43. pattern.id = pattern.id == null ? this.nextId++ : pattern.id;
  44. dom.setAttribute('id', 'zr' + this._zrId
  45. + '-pattern-' + pattern.id);
  46. dom.setAttribute('x', '0');
  47. dom.setAttribute('y', '0');
  48. dom.setAttribute('patternUnits', 'userSpaceOnUse');
  49. this.updateDom(pattern, dom);
  50. this.addDom(dom);
  51. return dom;
  52. };
  53. PatternManager.prototype.update = function (pattern) {
  54. if (!isPattern(pattern)) {
  55. return;
  56. }
  57. var that = this;
  58. this.doUpdate(pattern, function () {
  59. var dom = patternDomMap.get(pattern);
  60. that.updateDom(pattern, dom);
  61. });
  62. };
  63. PatternManager.prototype.updateDom = function (pattern, patternDom) {
  64. var svgElement = pattern.svgElement;
  65. if (svgElement instanceof SVGElement) {
  66. if (svgElement.parentNode !== patternDom) {
  67. patternDom.innerHTML = '';
  68. patternDom.appendChild(svgElement);
  69. patternDom.setAttribute('width', pattern.svgWidth + '');
  70. patternDom.setAttribute('height', pattern.svgHeight + '');
  71. }
  72. }
  73. else {
  74. var img = void 0;
  75. var prevImage = patternDom.getElementsByTagName('image');
  76. if (prevImage.length) {
  77. if (pattern.image) {
  78. img = prevImage[0];
  79. }
  80. else {
  81. patternDom.removeChild(prevImage[0]);
  82. return;
  83. }
  84. }
  85. else if (pattern.image) {
  86. img = this.createElement('image');
  87. }
  88. if (img) {
  89. var imageSrc = void 0;
  90. var patternImage = pattern.image;
  91. if (typeof patternImage === 'string') {
  92. imageSrc = patternImage;
  93. }
  94. else if (patternImage instanceof HTMLImageElement) {
  95. imageSrc = patternImage.src;
  96. }
  97. else if (patternImage instanceof HTMLCanvasElement) {
  98. imageSrc = patternImage.toDataURL();
  99. }
  100. if (imageSrc) {
  101. img.setAttribute('href', imageSrc);
  102. img.setAttribute('x', '0');
  103. img.setAttribute('y', '0');
  104. var hostEl = {
  105. dirty: function () { }
  106. };
  107. var createdImage = createOrUpdateImage(imageSrc, img, hostEl, function (img) {
  108. patternDom.setAttribute('width', img.width + '');
  109. patternDom.setAttribute('height', img.height + '');
  110. });
  111. if (createdImage && createdImage.width && createdImage.height) {
  112. patternDom.setAttribute('width', createdImage.width + '');
  113. patternDom.setAttribute('height', createdImage.height + '');
  114. }
  115. patternDom.appendChild(img);
  116. }
  117. }
  118. }
  119. var x = pattern.x || 0;
  120. var y = pattern.y || 0;
  121. var rotation = (pattern.rotation || 0) / Math.PI * 180;
  122. var scaleX = pattern.scaleX || 1;
  123. var scaleY = pattern.scaleY || 1;
  124. var transform = "translate(" + x + ", " + y + ") rotate(" + rotation + ") scale(" + scaleX + ", " + scaleY + ")";
  125. patternDom.setAttribute('patternTransform', transform);
  126. patternDomMap.set(pattern, patternDom);
  127. };
  128. PatternManager.prototype.markUsed = function (displayable) {
  129. if (displayable.style) {
  130. if (isPattern(displayable.style.fill)) {
  131. _super.prototype.markDomUsed.call(this, patternDomMap.get(displayable.style.fill));
  132. }
  133. if (isPattern(displayable.style.stroke)) {
  134. _super.prototype.markDomUsed.call(this, patternDomMap.get(displayable.style.stroke));
  135. }
  136. }
  137. };
  138. return PatternManager;
  139. }(Definable));
  140. export default PatternManager;