leafer-draw 1.0.10 → 1.1.1

package/dist/web.js

@@ -111,7 +111,7 @@ var LeaferUI = (function (exports) {
             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;
         },
@@ -1377,7 +1377,7 @@ var LeaferUI = (function (exports) {
     }
     const D$4 = Debug;
 
-    const debug$e = Debug.get('RunTime');
+    const debug$f = Debug.get('RunTime');
     const Run = {
         currentId: 0,
         currentName: '',
@@ -1395,7 +1395,7 @@ var LeaferUI = (function (exports) {
             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];
@@ -1409,18 +1409,18 @@ var LeaferUI = (function (exports) {
         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;
@@ -1436,7 +1436,7 @@ var LeaferUI = (function (exports) {
     };
     const { list: list$1 } = UICreator;
 
-    const debug$c = Debug.get('EventCreator');
+    const debug$d = Debug.get('EventCreator');
     const EventCreator = {
         nameList: {},
         register(Event) {
@@ -1444,7 +1444,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -1516,17 +1516,19 @@ var LeaferUI = (function (exports) {
             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) {
@@ -2598,7 +2600,7 @@ var LeaferUI = (function (exports) {
     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 },
@@ -2839,7 +2841,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$b.error(`command: ${command} [index:${i}]`, old);
+                        debug$c.error(`command: ${command} [index:${i}]`, old);
                         return data;
                 }
                 lastCommand = command;
@@ -3064,7 +3066,7 @@ var LeaferUI = (function (exports) {
     }
 
     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)
@@ -3127,7 +3129,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$a.error(`command: ${command} [index:${i}]`, data);
+                        debug$b.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3137,7 +3139,7 @@ var LeaferUI = (function (exports) {
     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 = {};
@@ -3245,7 +3247,7 @@ var LeaferUI = (function (exports) {
                         i += 6;
                         break;
                     default:
-                        debug$9.error(`command: ${command} [index:${i}]`, data);
+                        debug$a.error(`command: ${command} [index:${i}]`, data);
                         return;
                 }
             }
@@ -3361,7 +3363,7 @@ var LeaferUI = (function (exports) {
     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;
@@ -3376,7 +3378,7 @@ var LeaferUI = (function (exports) {
                         yield this.task();
                 }
                 catch (error) {
-                    debug$8.error(error);
+                    debug$9.error(error);
                 }
             });
         }
@@ -3894,6 +3896,8 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 this.__setAttr(key, value) && (this.__layout.opacityChanged || this.__layout.opacityChange());
+                if (this.mask)
+                    checkMask(this);
             }
         }));
     }
@@ -3910,9 +3914,20 @@ var LeaferUI = (function (exports) {
                         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();
@@ -4050,7 +4065,7 @@ var LeaferUI = (function (exports) {
         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) {
@@ -4067,7 +4082,7 @@ var LeaferUI = (function (exports) {
         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;
@@ -4168,20 +4183,17 @@ var LeaferUI = (function (exports) {
             }
             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);
@@ -4978,13 +4990,13 @@ var LeaferUI = (function (exports) {
     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) {
@@ -5440,8 +5452,8 @@ var LeaferUI = (function (exports) {
             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) {
@@ -5561,11 +5573,11 @@ var LeaferUI = (function (exports) {
         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);
@@ -5579,8 +5591,8 @@ var LeaferUI = (function (exports) {
         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);
@@ -5684,6 +5696,7 @@ var LeaferUI = (function (exports) {
     const { setListWithFn } = BoundsHelper;
     const { sort } = BranchHelper;
     const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
+    const debug$6 = new Debug('Branch');
     exports.Branch = class Branch extends exports.Leaf {
         __updateStrokeSpread() {
             const { children } = this;
@@ -5724,8 +5737,8 @@ var LeaferUI = (function (exports) {
             }
         }
         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)
@@ -5739,8 +5752,9 @@ var LeaferUI = (function (exports) {
             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) {
@@ -5978,7 +5992,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.10";
+    const version = "1.1.1";
 
     const debug$5 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6596,25 +6610,25 @@ var LeaferUI = (function (exports) {
             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();
@@ -6748,16 +6762,17 @@ var LeaferUI = (function (exports) {
             }
         }
         __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) {
@@ -6773,7 +6788,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             this.addBlock(new Bounds(0, 0, 1, 1));
-            this.changed = true;
+            this.update();
         }
         __onLayoutEnd(event) {
             if (event.data)
@@ -6908,7 +6923,7 @@ var LeaferUI = (function (exports) {
                 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; }
@@ -7022,7 +7037,7 @@ var LeaferUI = (function (exports) {
 
     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; }
     }
 
@@ -7308,11 +7323,15 @@ var LeaferUI = (function (exports) {
             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);
@@ -7622,17 +7641,17 @@ var LeaferUI = (function (exports) {
             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);
@@ -7678,20 +7697,10 @@ var LeaferUI = (function (exports) {
         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 = [];
@@ -7708,23 +7717,27 @@ var LeaferUI = (function (exports) {
         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) {
@@ -7745,8 +7758,8 @@ var LeaferUI = (function (exports) {
         }
         onInit() { }
         initType(_type) { }
-        set(data) {
-            this.waitInit(() => { super.set(data); });
+        set(data, transition) {
+            this.waitInit(() => { super.set(data, transition); });
         }
         start() {
             clearTimeout(this.__startTimer);
@@ -7781,7 +7794,11 @@ var LeaferUI = (function (exports) {
         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;
@@ -7889,8 +7906,10 @@ var LeaferUI = (function (exports) {
                 const { imageReady } = this;
                 if (imageReady && !this.viewCompleted)
                     this.__checkViewCompleted();
-                if (!imageReady)
+                if (!imageReady) {
                     this.viewCompleted = false;
+                    this.requestRender();
+                }
             }
         }
         __checkViewCompleted(emit = true) {
@@ -7948,6 +7967,7 @@ var LeaferUI = (function (exports) {
             }
             else
                 list.push(item);
+            this.requestRender();
         }
         zoom(_zoomType, _padding, _fixedScale) {
             return needPlugin('view');
@@ -8001,7 +8021,7 @@ var LeaferUI = (function (exports) {
                             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();
@@ -8841,6 +8861,8 @@ var LeaferUI = (function (exports) {
                 case 'center':
                     canvas.setStroke(stroke, __strokeWidth, options);
                     canvas.stroke();
+                    if (options.__useArrow)
+                        strokeArrow(ui, canvas);
                     break;
                 case 'inside':
                     canvas.save();
@@ -8878,6 +8900,8 @@ var LeaferUI = (function (exports) {
                 case 'center':
                     canvas.setStroke(undefined, __strokeWidth, options);
                     drawStrokesStyle(strokes, false, ui, canvas);
+                    if (options.__useArrow)
+                        strokeArrow(ui, canvas);
                     break;
                 case 'inside':
                     canvas.save();
@@ -8903,6 +8927,14 @@ var LeaferUI = (function (exports) {
             }
         }
     }
+    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) {