ClippathManager.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import { __extends } from "tslib";
  2. import Definable from './Definable.js';
  3. import * as zrUtil from '../../core/util.js';
  4. import { isClipPathChanged } from '../../canvas/helper.js';
  5. function generateClipPathsKey(clipPaths) {
  6. var key = [];
  7. if (clipPaths) {
  8. for (var i = 0; i < clipPaths.length; i++) {
  9. var clipPath = clipPaths[i];
  10. key.push(clipPath.id);
  11. }
  12. }
  13. return key.join(',');
  14. }
  15. export function hasClipPath(displayable) {
  16. var clipPaths = displayable.__clipPaths;
  17. return clipPaths && clipPaths.length > 0;
  18. }
  19. var ClippathManager = (function (_super) {
  20. __extends(ClippathManager, _super);
  21. function ClippathManager(zrId, svgRoot) {
  22. var _this = _super.call(this, zrId, svgRoot, 'clipPath', '__clippath_in_use__') || this;
  23. _this._refGroups = {};
  24. _this._keyDuplicateCount = {};
  25. return _this;
  26. }
  27. ClippathManager.prototype.markAllUnused = function () {
  28. _super.prototype.markAllUnused.call(this);
  29. var refGroups = this._refGroups;
  30. for (var key in refGroups) {
  31. if (refGroups.hasOwnProperty(key)) {
  32. this.markDomUnused(refGroups[key]);
  33. }
  34. }
  35. this._keyDuplicateCount = {};
  36. };
  37. ClippathManager.prototype._getClipPathGroup = function (displayable, prevDisplayable) {
  38. if (!hasClipPath(displayable)) {
  39. return;
  40. }
  41. var clipPaths = displayable.__clipPaths;
  42. var keyDuplicateCount = this._keyDuplicateCount;
  43. var clipPathKey = generateClipPathsKey(clipPaths);
  44. if (isClipPathChanged(clipPaths, prevDisplayable && prevDisplayable.__clipPaths)) {
  45. keyDuplicateCount[clipPathKey] = keyDuplicateCount[clipPathKey] || 0;
  46. keyDuplicateCount[clipPathKey] && (clipPathKey += '-' + keyDuplicateCount[clipPathKey]);
  47. keyDuplicateCount[clipPathKey]++;
  48. }
  49. return this._refGroups[clipPathKey]
  50. || (this._refGroups[clipPathKey] = this.createElement('g'));
  51. };
  52. ClippathManager.prototype.update = function (displayable, prevDisplayable) {
  53. var clipGroup = this._getClipPathGroup(displayable, prevDisplayable);
  54. if (clipGroup) {
  55. this.markDomUsed(clipGroup);
  56. this.updateDom(clipGroup, displayable.__clipPaths);
  57. }
  58. return clipGroup;
  59. };
  60. ;
  61. ClippathManager.prototype.updateDom = function (parentEl, clipPaths) {
  62. if (clipPaths && clipPaths.length > 0) {
  63. var defs = this.getDefs(true);
  64. var clipPath = clipPaths[0];
  65. var clipPathEl = void 0;
  66. var id = void 0;
  67. if (clipPath._dom) {
  68. id = clipPath._dom.getAttribute('id');
  69. clipPathEl = clipPath._dom;
  70. if (!defs.contains(clipPathEl)) {
  71. defs.appendChild(clipPathEl);
  72. }
  73. }
  74. else {
  75. id = 'zr' + this._zrId + '-clip-' + this.nextId;
  76. ++this.nextId;
  77. clipPathEl = this.createElement('clipPath');
  78. clipPathEl.setAttribute('id', id);
  79. defs.appendChild(clipPathEl);
  80. clipPath._dom = clipPathEl;
  81. }
  82. var svgProxy = this.getSvgProxy(clipPath);
  83. svgProxy.brush(clipPath);
  84. var pathEl = this.getSvgElement(clipPath);
  85. clipPathEl.innerHTML = '';
  86. clipPathEl.appendChild(pathEl);
  87. parentEl.setAttribute('clip-path', 'url(#' + id + ')');
  88. if (clipPaths.length > 1) {
  89. this.updateDom(clipPathEl, clipPaths.slice(1));
  90. }
  91. }
  92. else {
  93. if (parentEl) {
  94. parentEl.setAttribute('clip-path', 'none');
  95. }
  96. }
  97. };
  98. ;
  99. ClippathManager.prototype.markUsed = function (displayable) {
  100. var _this = this;
  101. if (displayable.__clipPaths) {
  102. zrUtil.each(displayable.__clipPaths, function (clipPath) {
  103. if (clipPath._dom) {
  104. _super.prototype.markDomUsed.call(_this, clipPath._dom);
  105. }
  106. });
  107. }
  108. };
  109. ;
  110. ClippathManager.prototype.removeUnused = function () {
  111. _super.prototype.removeUnused.call(this);
  112. var newRefGroupsMap = {};
  113. var refGroups = this._refGroups;
  114. for (var key in refGroups) {
  115. if (refGroups.hasOwnProperty(key)) {
  116. var group = refGroups[key];
  117. if (!this.isDomUnused(group)) {
  118. newRefGroupsMap[key] = group;
  119. }
  120. else if (group.parentNode) {
  121. group.parentNode.removeChild(group);
  122. }
  123. }
  124. }
  125. this._refGroups = newRefGroupsMap;
  126. };
  127. return ClippathManager;
  128. }(Definable));
  129. export default ClippathManager;