ClippathManager.js 4.6 KB

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