ClippathManager.js 4.6 KB

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