leafer-draw 1.0.10 → 1.1.1

package/dist/web.module.js

@@ -108,7 +108,7 @@ const MathHelper = {
         return rotation - oldRotation;
     },
     float(num, maxLength) {
-        const a = maxLength ? pow$1(10, maxLength) : 1000000000000;
+        const a = maxLength !== undefined ? pow$1(10, maxLength) : 1000000000000;
         num = round(num * a) / a;
         return num === -0 ? 0 : num;
     },
@@ -1374,7 +1374,7 @@ function getNameList(name) {
 }
 const D$4 = Debug;
 
-const debug$e = Debug.get('RunTime');
+const debug$f = Debug.get('RunTime');
 const Run = {
     currentId: 0,
     currentName: '',
@@ -1392,7 +1392,7 @@ const Run = {
         const time = R.idMap[id], name = R.nameMap[id];
         const duration = microsecond ? (performance.now() - time) / 1000 : Date.now() - time;
         R.idMap[id] = R.nameMap[id] = R.nameToIdMap[name] = undefined;
-        debug$e.log(name, duration, 'ms');
+        debug$f.log(name, duration, 'ms');
     },
     endOfName(name, microsecond) {
         const id = R.nameToIdMap[name];
@@ -1406,18 +1406,18 @@ function needPlugin(name) {
     console.error('need plugin: @leafer-in/' + name);
 }
 
-const debug$d = Debug.get('UICreator');
+const debug$e = Debug.get('UICreator');
 const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
         if (list$1[tag])
-            debug$d.repeat(tag);
+            debug$e.repeat(tag);
         list$1[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
         if (!list$1[tag])
-            debug$d.error('not register ' + tag);
+            debug$e.error('not register ' + tag);
         const ui = new list$1[tag](data);
         if (x !== undefined) {
             ui.x = x;
@@ -1433,7 +1433,7 @@ const UICreator = {
 };
 const { list: list$1 } = UICreator;
 
-const debug$c = Debug.get('EventCreator');
+const debug$d = Debug.get('EventCreator');
 const EventCreator = {
     nameList: {},
     register(Event) {
@@ -1441,7 +1441,7 @@ const EventCreator = {
         Object.keys(Event).forEach(key => {
             name = Event[key];
             if (typeof name === 'string')
-                nameList[name] && debug$c.repeat(name), nameList[name] = Event;
+                nameList[name] && debug$d.repeat(name), nameList[name] = Event;
         });
     },
     changeName(oldName, newName) {
@@ -1513,17 +1513,19 @@ const DataHelper = {
         assign(t, defaultData);
         return t;
     },
-    assign(t, merge) {
+    assign(t, merge, exclude) {
         let value;
         Object.keys(merge).forEach(key => {
-            var _a;
+            var _a, _b;
             value = merge[key];
-            if ((value === null || value === void 0 ? void 0 : value.constructor) === Object) {
-                (((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object) ? assign(t[key], merge[key]) : t[key] = merge[key];
-            }
-            else {
-                t[key] = merge[key];
+            if ((value === null || value === void 0 ? void 0 : value.constructor) === Object && ((_a = t[key]) === null || _a === void 0 ? void 0 : _a.constructor) === Object)
+                return assign(t[key], merge[key], exclude && exclude[key]);
+            if (exclude && (key in exclude)) {
+                if (((_b = exclude[key]) === null || _b === void 0 ? void 0 : _b.constructor) === Object)
+                    assign(t[key] = {}, merge[key], exclude[key]);
+                return;
             }
+            t[key] = merge[key];
         });
     },
     copyAttrs(t, from, include) {
@@ -2595,7 +2597,7 @@ const EllipseHelper = {
 const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
 const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
 const { ellipticalArc } = EllipseHelper;
-const debug$b = Debug.get('PathConvert');
+const debug$c = Debug.get('PathConvert');
 const setEndPoint$1 = {};
 const PathConvert = {
     current: { dot: 0 },
@@ -2836,7 +2838,7 @@ const PathConvert = {
                     i += 6;
                     break;
                 default:
-                    debug$b.error(`command: ${command} [index:${i}]`, old);
+                    debug$c.error(`command: ${command} [index:${i}]`, old);
                     return data;
             }
             lastCommand = command;
@@ -3061,7 +3063,7 @@ class PathCreator {
 }
 
 const { M: M$2, L: L$3, C: C$2, Q: Q$1, Z: Z$2, N: N$1, D: D$1, X: X$1, G: G$1, F: F$2, O: O$1, P: P$1, U: U$1 } = PathCommandMap;
-const debug$a = Debug.get('PathDrawer');
+const debug$b = Debug.get('PathDrawer');
 const PathDrawer = {
     drawPathByData(drawer, data) {
         if (!data)
@@ -3124,7 +3126,7 @@ const PathDrawer = {
                     i += 6;
                     break;
                 default:
-                    debug$a.error(`command: ${command} [index:${i}]`, data);
+                    debug$b.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3134,7 +3136,7 @@ const PathDrawer = {
 const { M: M$1, L: L$2, C: C$1, Q, Z: Z$1, N, D, X, G, F: F$1, O, P, U } = PathCommandMap;
 const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc, ellipse: ellipse$1 } = BezierHelper;
 const { addPointBounds, copy: copy$7, addPoint: addPoint$1, setPoint: setPoint$1, addBounds, toBounds: toBounds$3 } = TwoPointBoundsHelper;
-const debug$9 = Debug.get('PathBounds');
+const debug$a = Debug.get('PathBounds');
 let radius, radiusX, radiusY;
 const tempPointBounds = {};
 const setPointBounds = {};
@@ -3242,7 +3244,7 @@ const PathBounds = {
                     i += 6;
                     break;
                 default:
-                    debug$9.error(`command: ${command} [index:${i}]`, data);
+                    debug$a.error(`command: ${command} [index:${i}]`, data);
                     return;
             }
         }
@@ -3358,7 +3360,7 @@ const FileHelper = {
 const F = FileHelper;
 F.opacityTypes.forEach(type => F.upperCaseTypeMap[type] = type.toUpperCase());
 
-const debug$8 = Debug.get('TaskProcessor');
+const debug$9 = Debug.get('TaskProcessor');
 class TaskItem {
     constructor(task) {
         this.parallel = true;
@@ -3373,7 +3375,7 @@ class TaskItem {
                     yield this.task();
             }
             catch (error) {
-                debug$8.error(error);
+                debug$9.error(error);
             }
         });
     }
@@ -3891,6 +3893,8 @@ function opacityType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
             this.__setAttr(key, value) && (this.__layout.opacityChanged || this.__layout.opacityChange());
+            if (this.mask)
+                checkMask(this);
         }
     }));
 }
@@ -3907,9 +3911,20 @@ function visibleType(defaultValue) {
                     this.__runAnimation('in');
             }
             doVisible(this, key, value, oldValue);
+            if (this.mask)
+                checkMask(this);
         }
     }));
 }
+function checkMask(leaf) {
+    const { parent } = leaf;
+    if (parent) {
+        const { __hasMask } = parent;
+        parent.__updateMask();
+        if (__hasMask !== parent.__hasMask)
+            parent.forceUpdate();
+    }
+}
 function doVisible(leaf, key, value, oldValue) {
     if (leaf.__setAttr(key, value)) {
         leaf.__layout.opacityChanged || leaf.__layout.opacityChange();
@@ -4047,7 +4062,7 @@ function defineDataProcessor(target, key, defaultValue) {
     defineKey(data, key, property);
 }
 
-const debug$7 = new Debug('rewrite');
+const debug$8 = new Debug('rewrite');
 const list = [];
 const excludeNames = ['destroy', 'constructor'];
 function rewrite(method) {
@@ -4064,7 +4079,7 @@ function doRewrite(error) {
     if (list.length) {
         list.forEach(item => {
             if (error)
-                debug$7.error(item.name, '需在Class上装饰@rewriteAble()');
+                debug$8.error(item.name, '需在Class上装饰@rewriteAble()');
             item.run();
         });
         list.length = 0;
@@ -4165,20 +4180,17 @@ const LeafHelper = {
         }
         return true;
     },
-    moveWorld(t, x, y = 0, isInnerPoint) {
+    moveWorld(t, x, y = 0, isInnerPoint, transition) {
         const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
         isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
-        L.moveLocal(t, local.x, local.y);
+        L.moveLocal(t, local.x, local.y, transition);
     },
-    moveLocal(t, x, y = 0) {
-        if (typeof x === 'object') {
-            t.x += x.x;
-            t.y += x.y;
-        }
-        else {
-            t.x += x;
-            t.y += y;
-        }
+    moveLocal(t, x, y = 0, transition) {
+        if (typeof x === 'object')
+            y = x.y, x = x.x;
+        x += t.x;
+        y += t.y;
+        transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
     },
     zoomOfWorld(t, origin, scaleX, scaleY, resize) {
         L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
@@ -4975,13 +4987,13 @@ const { on, on_, off, off_, once, emit: emit$1, emitEvent, hasEvent, destroy } =
 const LeafEventer = { on, on_, off, off_, once, emit: emit$1, emitEvent, hasEvent, destroyEventer: destroy };
 
 const { isFinite } = Number;
-const debug$6 = Debug.get('setAttr');
+const debug$7 = Debug.get('setAttr');
 const LeafDataProxy = {
     __setAttr(name, newValue, checkFiniteNumber) {
         if (this.leaferIsCreated) {
             const oldValue = this.__.__getInput(name);
             if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) {
-                debug$6.warn(this.innerName, name, newValue);
+                debug$7.warn(this.innerName, name, newValue);
                 newValue = undefined;
             }
             if (typeof newValue === 'object' || oldValue !== newValue) {
@@ -5437,8 +5449,8 @@ let Leaf = class Leaf {
         canvas.clearRect(r.x, r.y, r.width, r.height);
         canvas.restore();
     }
-    __updateMask(value) {
-        this.__hasMask = value ? true : this.children.some(item => item.__.mask);
+    __updateMask(_value) {
+        this.__hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
     }
     __renderMask(_canvas, _options) { }
     __getNowWorld(options) {
@@ -5558,11 +5570,11 @@ let Leaf = class Leaf {
     transform(matrix, resize) {
         transform(this, matrix, resize);
     }
-    move(x, y) {
-        moveLocal(this, x, y);
+    move(x, y, transition) {
+        moveLocal(this, x, y, transition);
     }
-    moveInner(x, y) {
-        moveWorld(this, x, y, true);
+    moveInner(x, y, transition) {
+        moveWorld(this, x, y, true, transition);
     }
     scaleOf(origin, scaleX, scaleY, resize) {
         zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
@@ -5576,8 +5588,8 @@ let Leaf = class Leaf {
     transformWorld(worldTransform, resize) {
         transformWorld(this, worldTransform, resize);
     }
-    moveWorld(x, y) {
-        moveWorld(this, x, y);
+    moveWorld(x, y, transition) {
+        moveWorld(this, x, y, false, transition);
     }
     scaleOfWorld(worldOrigin, scaleX, scaleY, resize) {
         zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize);
@@ -5681,6 +5693,7 @@ Leaf = __decorate([
 const { setListWithFn } = BoundsHelper;
 const { sort } = BranchHelper;
 const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
+const debug$6 = new Debug('Branch');
 let Branch = class Branch extends Leaf {
     __updateStrokeSpread() {
         const { children } = this;
@@ -5721,8 +5734,8 @@ let Branch = class Branch extends Leaf {
         }
     }
     add(child, index) {
-        if (child === this)
-            return;
+        if (child === this || child.destroyed)
+            return debug$6.warn('add self or destroyed');
         const noIndex = index === undefined;
         if (!child.__) {
             if (child instanceof Array)
@@ -5736,8 +5749,9 @@ let Branch = class Branch extends Leaf {
         noIndex ? this.children.push(child) : this.children.splice(index, 0, child);
         if (child.isBranch)
             this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
-        child.__layout.boxChanged || child.__layout.boxChange();
-        child.__layout.matrixChanged || child.__layout.matrixChange();
+        const childLayout = child.__layout;
+        childLayout.boxChanged || childLayout.boxChange();
+        childLayout.matrixChanged || childLayout.matrixChange();
         if (child.__bubbleMap)
             child.__emitLifeEvent(ChildEvent.ADD);
         if (this.leafer) {
@@ -5975,7 +5989,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.10";
+const version = "1.1.1";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6593,25 +6607,25 @@ class Renderer {
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
         this.__listenEvents();
-        this.__requestRender();
     }
     start() {
         this.running = true;
+        this.update(false);
     }
     stop() {
         this.running = false;
     }
-    update() {
-        this.changed = true;
+    update(change = true) {
+        if (!this.changed)
+            this.changed = change;
+        this.__requestRender();
     }
     requestLayout() {
         this.target.emit(LayoutEvent.REQUEST);
     }
     render(callback) {
-        if (!(this.running && this.canvas.view)) {
-            this.changed = true;
-            return;
-        }
+        if (!(this.running && this.canvas.view))
+            return this.update();
         const { target } = this;
         this.times = 0;
         this.totalBounds = new Bounds();
@@ -6745,16 +6759,17 @@ class Renderer {
         }
     }
     __requestRender() {
-        const startTime = Date.now();
+        if (this.requestTime)
+            return;
+        const requestTime = this.requestTime = Date.now();
         Platform.requestRender(() => {
-            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
+            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
+            this.requestTime = 0;
             if (this.running) {
                 if (this.changed && this.canvas.view)
                     this.render();
                 this.target.emit(RenderEvent.NEXT);
             }
-            if (this.target)
-                this.__requestRender();
         });
     }
     __onResize(e) {
@@ -6770,7 +6785,7 @@ class Renderer {
             }
         }
         this.addBlock(new Bounds(0, 0, 1, 1));
-        this.changed = true;
+        this.update();
     }
     __onLayoutEnd(event) {
         if (event.data)
@@ -6905,7 +6920,7 @@ class UIData extends LeafData {
             return true;
         return t.fill && this.__hasStroke;
     }
-    get __clipAfterFill() { return (this.cornerRadius || this.__pathInputed); }
+    get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
     get __autoWidth() { return !this._width; }
     get __autoHeight() { return !this._height; }
     get __autoSide() { return !this._width || !this._height; }
@@ -7019,7 +7034,7 @@ class GroupData extends UIData {
 
 class BoxData extends GroupData {
     get __boxStroke() { return !this.__pathInputed; }
-    get __drawAfterFill() { return this.overflow === 'hide' && this.__clipAfterFill && this.__leaf.children.length; }
+    get __drawAfterFill() { const t = this; return (t.overflow === 'hide' && (t.__clipAfterFill || t.innerShadow) && t.__leaf.children.length); }
     get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
 }
 
@@ -7305,11 +7320,15 @@ let UI = UI_1 = class UI extends Leaf {
         super(data);
     }
     reset(_data) { }
-    set(data, isTemp) {
-        if (isTemp) {
-            this.lockNormalStyle = true;
-            Object.assign(this, data);
-            this.lockNormalStyle = false;
+    set(data, transition) {
+        if (transition) {
+            if (transition === 'temp') {
+                this.lockNormalStyle = true;
+                Object.assign(this, data);
+                this.lockNormalStyle = false;
+            }
+            else
+                this.animate(data, transition);
         }
         else
             Object.assign(this, data);
@@ -7619,17 +7638,17 @@ let Group = class Group extends UI {
         if (!this.children)
             this.children = [];
     }
-    set(data, isTemp) {
+    set(data, transition) {
         if (data.children) {
             const { children } = data;
             delete data.children;
             this.children ? this.clear() : this.__setBranch();
-            super.set(data, isTemp);
+            super.set(data, transition);
             children.forEach(child => this.add(child));
             data.children = children;
         }
         else
-            super.set(data, isTemp);
+            super.set(data, transition);
     }
     toJSON(options) {
         const data = super.toJSON(options);
@@ -7675,20 +7694,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     constructor(userConfig, data) {
         super(data);
         this.config = {
-            type: 'design',
             start: true,
             hittable: true,
             smooth: true,
-            lazySpeard: 100,
-            zoom: {
-                min: 0.01,
-                max: 256
-            },
-            move: {
-                holdSpaceKey: true,
-                holdMiddleKey: true,
-                autoDistance: 2
-            }
+            lazySpeard: 100
         };
         this.leafs = 0;
         this.__eventIds = [];
@@ -7705,23 +7714,27 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     init(userConfig, parentApp) {
         if (this.canvas)
             return;
-        this.__setLeafer(this);
-        if (userConfig)
-            DataHelper.assign(this.config, userConfig);
         let start;
         const { config } = this;
-        this.initType(config.type);
+        this.__setLeafer(this);
+        if (parentApp) {
+            this.parentApp = parentApp;
+            this.__bindApp(parentApp);
+            start = parentApp.running;
+        }
+        if (userConfig) {
+            this.parent = parentApp;
+            this.initType(userConfig.type);
+            this.parent = undefined;
+            DataHelper.assign(config, userConfig);
+        }
         const canvas = this.canvas = Creator.canvas(config);
         this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
         if (this.isApp)
             this.__setApp();
         this.__checkAutoLayout(config, parentApp);
         this.view = canvas.view;
-        if (parentApp) {
-            this.__bindApp(parentApp);
-            start = parentApp.running;
-        }
-        else {
+        if (!parentApp) {
             this.selector = Creator.selector(this);
             this.interaction = Creator.interaction(this, canvas, this.selector, config);
             if (this.interaction) {
@@ -7742,8 +7755,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     }
     onInit() { }
     initType(_type) { }
-    set(data) {
-        this.waitInit(() => { super.set(data); });
+    set(data, transition) {
+        this.waitInit(() => { super.set(data, transition); });
     }
     start() {
         clearTimeout(this.__startTimer);
@@ -7778,7 +7791,11 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     forceRender(bounds) {
         this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds);
         if (this.viewReady)
-            this.renderer.update();
+            this.renderer.render();
+    }
+    requestRender(change = false) {
+        if (this.renderer)
+            this.renderer.update(change);
     }
     updateCursor(cursor) {
         const i = this.interaction;
@@ -7886,8 +7903,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             const { imageReady } = this;
             if (imageReady && !this.viewCompleted)
                 this.__checkViewCompleted();
-            if (!imageReady)
+            if (!imageReady) {
                 this.viewCompleted = false;
+                this.requestRender();
+            }
         }
     }
     __checkViewCompleted(emit = true) {
@@ -7945,6 +7964,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         }
         else
             list.push(item);
+        this.requestRender();
     }
     zoom(_zoomType, _padding, _fixedScale) {
         return needPlugin('view');
@@ -7998,7 +8018,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                         this.canvasManager.destroy();
                     }
                     this.canvas.destroy();
-                    this.config.view = this.view = null;
+                    this.config.view = this.view = this.parentApp = null;
                     if (this.userConfig)
                         this.userConfig.view = null;
                     super.destroy();
@@ -8838,6 +8858,8 @@ function stroke(stroke, ui, canvas) {
             case 'center':
                 canvas.setStroke(stroke, __strokeWidth, options);
                 canvas.stroke();
+                if (options.__useArrow)
+                    strokeArrow(ui, canvas);
                 break;
             case 'inside':
                 canvas.save();
@@ -8875,6 +8897,8 @@ function strokes(strokes, ui, canvas) {
             case 'center':
                 canvas.setStroke(undefined, __strokeWidth, options);
                 drawStrokesStyle(strokes, false, ui, canvas);
+                if (options.__useArrow)
+                    strokeArrow(ui, canvas);
                 break;
             case 'inside':
                 canvas.save();
@@ -8900,6 +8924,14 @@ function strokes(strokes, ui, canvas) {
         }
     }
 }
+function strokeArrow(ui, canvas) {
+    if (ui.__.dashPattern) {
+        canvas.beginPath();
+        ui.__drawPathByData(canvas, ui.__.__pathForArrow);
+        canvas.dashPattern = null;
+        canvas.stroke();
+    }
+}
 
 const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper;
 function shape(ui, current, options) {