push the uni-demo project

2022-06-21 10:55:37 +08:00
parent 37ca848bb6
commit 333705f703
8034 changed files with 1388875 additions and 0 deletions
@@ -0,0 +1,221 @@
+/**
+ * @file Manages SVG pattern elements.
+ * @author Zhang Wenli
+ */
+
+import Definable from './Definable';
+import * as zrUtil from '../../core/util';
+import Displayable from '../../graphic/Displayable';
+import {PatternObject} from '../../graphic/Pattern';
+import {createOrUpdateImage} from '../../graphic/helper/image';
+import WeakMap from '../../core/WeakMap';
+import { getIdURL, isPattern, isSVGPattern } from '../../svg/helper';
+import { createElement } from '../../svg/core';
+
+const patternDomMap = new WeakMap<PatternObject, SVGElement>();
+
+/**
+ * Manages SVG pattern elements.
+ *
+ * @param   zrId    zrender instance id
+ * @param   svgRoot root of SVG document
+ */
+export default class PatternManager extends Definable {
+
+    constructor(zrId: number, svgRoot: SVGElement) {
+        super(zrId, svgRoot, ['pattern'], '__pattern_in_use__');
+    }
+
+
+    /**
+     * Create new pattern DOM for fill or stroke if not exist,
+     * but will not update pattern if exists.
+     *
+     * @param svgElement   SVG element to paint
+     * @param displayable  zrender displayable element
+     */
+    addWithoutUpdate(
+        svgElement: SVGElement,
+        displayable: Displayable
+    ) {
+        if (displayable && displayable.style) {
+            const that = this;
+            zrUtil.each(['fill', 'stroke'], function (fillOrStroke: 'fill' | 'stroke') {
+                const pattern = displayable.style[fillOrStroke] as PatternObject;
+                if (isPattern(pattern)) {
+                    const defs = that.getDefs(true);
+
+                    // Create dom in <defs> if not exists
+                    let dom = patternDomMap.get(pattern);
+                    if (dom) {
+                        // Pattern exists
+                        if (!defs.contains(dom)) {
+                            // __dom is no longer in defs, recreate
+                            that.addDom(dom);
+                        }
+                    }
+                    else {
+                        // New dom
+                        dom = that.add(pattern);
+                    }
+
+                    that.markUsed(displayable);
+
+                    svgElement.setAttribute(fillOrStroke, getIdURL(dom.getAttribute('id')));
+                }
+            });
+        }
+    }
+
+
+    /**
+     * Add a new pattern tag in <defs>
+     *
+     * @param   pattern zr pattern instance
+     */
+    add(pattern: PatternObject): SVGElement {
+        if (!isPattern(pattern)) {
+            return;
+        }
+
+        let dom = createElement('pattern');
+
+        pattern.id = pattern.id == null ? this.nextId++ : pattern.id;
+        dom.setAttribute('id', 'zr' + this._zrId
+            + '-pattern-' + pattern.id);
+
+        dom.setAttribute('patternUnits', 'userSpaceOnUse');
+
+        this.updateDom(pattern, dom);
+        this.addDom(dom);
+
+        return dom;
+    }
+
+
+    /**
+     * Update pattern.
+     *
+     * @param pattern zr pattern instance or color string
+     */
+    update(pattern: PatternObject | string) {
+        if (!isPattern(pattern)) {
+            return;
+        }
+
+        const that = this;
+        this.doUpdate(pattern, function () {
+            const dom = patternDomMap.get(pattern);
+            that.updateDom(pattern, dom);
+        });
+    }
+
+
+    /**
+     * Update pattern dom
+     *
+     * @param pattern zr pattern instance
+     * @param patternDom DOM to update
+     */
+    updateDom(pattern: PatternObject, patternDom: SVGElement) {
+        if (isSVGPattern(pattern)) {
+            // New SVGPattern will not been supported in the legacy SVG renderer.
+            // svg-legacy will been removed soon.
+
+            // const svgElement = pattern.svgElement;
+            // const isStringSVG = typeof svgElement === 'string';
+            // if (isStringSVG || svgElement.parentNode !== patternDom) {
+            //     if (isStringSVG) {
+            //         patternDom.innerHTML = svgElement;
+            //     }
+            //     else {
+            //         patternDom.innerHTML = '';
+            //         patternDom.appendChild(svgElement);
+            //     }
+
+            //     patternDom.setAttribute('width', pattern.svgWidth as any);
+            //     patternDom.setAttribute('height', pattern.svgHeight as any);
+            // }
+        }
+        else {
+            let img: SVGElement;
+            const prevImage = patternDom.getElementsByTagName('image');
+            if (prevImage.length) {
+                if (pattern.image) {
+                    // Update
+                    img = prevImage[0];
+                }
+                else {
+                    // Remove
+                    patternDom.removeChild(prevImage[0]);
+                    return;
+                }
+            }
+            else if (pattern.image) {
+                // Create
+                img = createElement('image');
+            }
+
+            if (img) {
+                let imageSrc;
+                const patternImage = pattern.image;
+                if (typeof patternImage === 'string') {
+                    imageSrc = patternImage;
+                }
+                else if (patternImage instanceof HTMLImageElement) {
+                    imageSrc = patternImage.src;
+                }
+                else if (patternImage instanceof HTMLCanvasElement) {
+                    imageSrc = patternImage.toDataURL();
+                }
+
+                if (imageSrc) {
+                    img.setAttribute('href', imageSrc);
+
+                    // No need to re-render so dirty is empty
+                    const hostEl = {
+                        dirty: () => {}
+                    };
+                    const updateSize = (img: HTMLImageElement) => {
+                        patternDom.setAttribute('width', img.width as any);
+                        patternDom.setAttribute('height', img.height as any);
+                    };
+
+                    const createdImage = createOrUpdateImage(imageSrc, img as any, hostEl, updateSize);
+                    if (createdImage && createdImage.width && createdImage.height) {
+                        // Loaded before
+                        updateSize(createdImage as HTMLImageElement);
+                    }
+
+                    patternDom.appendChild(img);
+                }
+            }
+        }
+
+        const x = pattern.x || 0;
+        const y = pattern.y || 0;
+        const rotation = (pattern.rotation || 0) / Math.PI * 180;
+        const scaleX = pattern.scaleX || 1;
+        const scaleY = pattern.scaleY || 1;
+        const transform = `translate(${x}, ${y}) rotate(${rotation}) scale(${scaleX}, ${scaleY})`;
+        patternDom.setAttribute('patternTransform', transform);
+        patternDomMap.set(pattern, patternDom);
+    }
+
+    /**
+     * Mark a single pattern to be used
+     *
+     * @param displayable displayable element
+     */
+    markUsed(displayable: Displayable) {
+        if (displayable.style) {
+            if (isPattern(displayable.style.fill)) {
+                super.markDomUsed(patternDomMap.get(displayable.style.fill));
+            }
+            if (isPattern(displayable.style.stroke)) {
+                super.markDomUsed(patternDomMap.get(displayable.style.stroke));
+            }
+        }
+    }
+
+}