PatternManager.js 5.0 KB

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