| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 | 
							- /**
 
-  * @file Manages SVG clipPath elements.
 
-  * @author Zhang Wenli
 
-  */
 
- import Definable from './Definable';
 
- import * as zrUtil from '../../core/util';
 
- import Displayable from '../../graphic/Displayable';
 
- import Path from '../../graphic/Path';
 
- import {path} from '../graphic';
 
- import { Dictionary } from '../../core/types';
 
- import { isClipPathChanged } from '../../canvas/helper';
 
- import { getClipPathsKey, getIdURL } from '../../svg/helper';
 
- import { createElement } from '../../svg/core';
 
- type PathExtended = Path & {
 
-     _dom: SVGElement
 
- }
 
- export function hasClipPath(displayable: Displayable) {
 
-     const clipPaths = displayable.__clipPaths;
 
-     return clipPaths && clipPaths.length > 0;
 
- }
 
- /**
 
-  * Manages SVG clipPath elements.
 
-  */
 
- export default class ClippathManager extends Definable {
 
-     private _refGroups: Dictionary<SVGElement> = {};
 
-     private _keyDuplicateCount: Dictionary<number> = {};
 
-     constructor(zrId: number, svgRoot: SVGElement) {
 
-         super(zrId, svgRoot, 'clipPath', '__clippath_in_use__');
 
-     }
 
-     markAllUnused() {
 
-         super.markAllUnused();
 
-         const refGroups = this._refGroups;
 
-         for (let key in refGroups) {
 
-             if (refGroups.hasOwnProperty(key)) {
 
-                 this.markDomUnused(refGroups[key]);
 
-             }
 
-         }
 
-         this._keyDuplicateCount = {};
 
-     }
 
-     private _getClipPathGroup(displayable: Displayable, prevDisplayable: Displayable) {
 
-         if (!hasClipPath(displayable)) {
 
-             return;
 
-         }
 
-         const clipPaths = displayable.__clipPaths;
 
-         const keyDuplicateCount = this._keyDuplicateCount;
 
-         let clipPathKey = getClipPathsKey(clipPaths);
 
-         if (isClipPathChanged(clipPaths, prevDisplayable && prevDisplayable.__clipPaths)) {
 
-             keyDuplicateCount[clipPathKey] = keyDuplicateCount[clipPathKey] || 0;
 
-             keyDuplicateCount[clipPathKey] && (clipPathKey += '-' + keyDuplicateCount[clipPathKey]);
 
-             keyDuplicateCount[clipPathKey]++;
 
-         }
 
-         return this._refGroups[clipPathKey]
 
-             || (this._refGroups[clipPathKey] = createElement('g'));
 
-     }
 
-     /**
 
-      * Update clipPath.
 
-      *
 
-      * @param displayable displayable element
 
-      */
 
-     update(displayable: Displayable, prevDisplayable: Displayable) {
 
-         const clipGroup = this._getClipPathGroup(displayable, prevDisplayable);
 
-         if (clipGroup) {
 
-             this.markDomUsed(clipGroup);
 
-             this.updateDom(clipGroup, displayable.__clipPaths);
 
-         }
 
-         return clipGroup;
 
-     };
 
-     /**
 
-      * Create an SVGElement of displayable and create a <clipPath> of its
 
-      * clipPath
 
-      */
 
-     updateDom(parentEl: SVGElement, clipPaths: Path[]) {
 
-         if (clipPaths && clipPaths.length > 0) {
 
-             // Has clipPath, create <clipPath> with the first clipPath
 
-             const defs = this.getDefs(true);
 
-             const clipPath = clipPaths[0] as PathExtended;
 
-             let clipPathEl;
 
-             let id;
 
-             if (clipPath._dom) {
 
-                 // Use a dom that is already in <defs>
 
-                 id = clipPath._dom.getAttribute('id');
 
-                 clipPathEl = clipPath._dom;
 
-                 // Use a dom that is already in <defs>
 
-                 if (!defs.contains(clipPathEl)) {
 
-                     // This happens when set old clipPath that has
 
-                     // been previously removed
 
-                     defs.appendChild(clipPathEl);
 
-                 }
 
-             }
 
-             else {
 
-                 // New <clipPath>
 
-                 id = 'zr' + this._zrId + '-clip-' + this.nextId;
 
-                 ++this.nextId;
 
-                 clipPathEl = createElement('clipPath');
 
-                 clipPathEl.setAttribute('id', id);
 
-                 defs.appendChild(clipPathEl);
 
-                 clipPath._dom = clipPathEl;
 
-             }
 
-             // Build path and add to <clipPath>
 
-             path.brush(clipPath);
 
-             const pathEl = this.getSvgElement(clipPath);
 
-             clipPathEl.innerHTML = '';
 
-             clipPathEl.appendChild(pathEl);
 
-             parentEl.setAttribute('clip-path', getIdURL(id));
 
-             if (clipPaths.length > 1) {
 
-                 // Make the other clipPaths recursively
 
-                 this.updateDom(clipPathEl, clipPaths.slice(1));
 
-             }
 
-         }
 
-         else {
 
-             // No clipPath
 
-             if (parentEl) {
 
-                 parentEl.setAttribute('clip-path', 'none');
 
-             }
 
-         }
 
-     };
 
-     /**
 
-      * Mark a single clipPath to be used
 
-      *
 
-      * @param displayable displayable element
 
-      */
 
-     markUsed(displayable: Displayable) {
 
-         // displayable.__clipPaths can only be `null`/`undefined` or an non-empty array.
 
-         if (displayable.__clipPaths) {
 
-             zrUtil.each(displayable.__clipPaths, (clipPath: PathExtended) => {
 
-                 if (clipPath._dom) {
 
-                     super.markDomUsed(clipPath._dom);
 
-                 }
 
-             });
 
-         }
 
-     };
 
-     removeUnused() {
 
-         super.removeUnused();
 
-         const newRefGroupsMap: Dictionary<SVGElement> = {};
 
-         const refGroups = this._refGroups;
 
-         for (let key in refGroups) {
 
-             if (refGroups.hasOwnProperty(key)) {
 
-                 const group = refGroups[key];
 
-                 if (!this.isDomUnused(group)) {
 
-                     newRefGroupsMap[key] = group;
 
-                 }
 
-                 else if (group.parentNode) {
 
-                     group.parentNode.removeChild(group);
 
-                 }
 
-             }
 
-         }
 
-         this._refGroups = newRefGroupsMap;
 
-     }
 
- }
 
 
  |