@leafer-ui/miniapp 1.0.10 → 1.1.1

package/dist/miniapp.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;
     },
@@ -1411,14 +1411,14 @@ const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
-        if (list$2[tag])
+        if (list$1[tag])
             debug$e.repeat(tag);
-        list$2[tag] = UI;
+        list$1[tag] = UI;
     },
     get(tag, data, x, y, width, height) {
-        if (!list$2[tag])
+        if (!list$1[tag])
             debug$e.error('not register ' + tag);
-        const ui = new list$2[tag](data);
+        const ui = new list$1[tag](data);
         if (x !== undefined) {
             ui.x = x;
             if (y)
@@ -1431,7 +1431,7 @@ const UICreator = {
         return ui;
     }
 };
-const { list: list$2 } = UICreator;
+const { list: list$1 } = UICreator;
 
 const debug$d = Debug.get('EventCreator');
 const EventCreator = {
@@ -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) {
@@ -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();
@@ -4048,11 +4063,11 @@ function defineDataProcessor(target, key, defaultValue) {
 }
 
 const debug$8 = new Debug('rewrite');
-const list$1 = [];
+const list = [];
 const excludeNames = ['destroy', 'constructor'];
 function rewrite(method) {
     return (target, key) => {
-        list$1.push({ name: target.constructor.name + '.' + key, run: () => { target[key] = method; } });
+        list.push({ name: target.constructor.name + '.' + key, run: () => { target[key] = method; } });
     };
 }
 function rewriteAble() {
@@ -4061,13 +4076,13 @@ function rewriteAble() {
     };
 }
 function doRewrite(error) {
-    if (list$1.length) {
-        list$1.forEach(item => {
+    if (list.length) {
+        list.forEach(item => {
             if (error)
                 debug$8.error(item.name, '需在Class上装饰@rewriteAble()');
             item.run();
         });
-        list$1.length = 0;
+        list.length = 0;
     }
 }
 setTimeout(() => doRewrite(true));
@@ -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);
@@ -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";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return false; }
@@ -6389,7 +6403,7 @@ class LayoutBlockData {
 }
 
 const { updateAllMatrix, updateAllChange } = LeafHelper;
-const debug$6 = Debug.get('Layouter');
+const debug$5 = Debug.get('Layouter');
 class Layouter {
     constructor(target, userConfig) {
         this.totalTimes = 0;
@@ -6424,7 +6438,7 @@ class Layouter {
             target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
         }
         catch (e) {
-            debug$6.error(e);
+            debug$5.error(e);
         }
         this.layoutedBlocks = null;
     }
@@ -6438,9 +6452,9 @@ class Layouter {
     }
     layoutOnce() {
         if (this.layouting)
-            return debug$6.warn('layouting');
+            return debug$5.warn('layouting');
         if (this.times > 3)
-            return debug$6.warn('layout max times');
+            return debug$5.warn('layout max times');
         this.times++;
         this.totalTimes++;
         this.layouting = true;
@@ -6544,7 +6558,7 @@ class Layouter {
     }
 }
 
-const debug$5 = Debug.get('Renderer');
+const debug$4 = Debug.get('Renderer');
 class Renderer {
     get needFill() { return !!(!this.canvas.allowBackgroundColor && this.config.fill); }
     constructor(target, canvas, userConfig) {
@@ -6560,29 +6574,29 @@ 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();
-        debug$5.log(target.innerName, '--->');
+        debug$4.log(target.innerName, '--->');
         try {
             if (!target.isApp)
                 target.app.emit(RenderEvent.CHILD_START, target);
@@ -6593,9 +6607,9 @@ class Renderer {
         }
         catch (e) {
             this.rendering = false;
-            debug$5.error(e);
+            debug$4.error(e);
         }
-        debug$5.log('-------------|');
+        debug$4.log('-------------|');
     }
     renderAgain() {
         if (this.rendering) {
@@ -6607,9 +6621,9 @@ class Renderer {
     }
     renderOnce(callback) {
         if (this.rendering)
-            return debug$5.warn('rendering');
+            return debug$4.warn('rendering');
         if (this.times > 3)
-            return debug$5.warn('render max times');
+            return debug$4.warn('render max times');
         this.times++;
         this.totalTimes++;
         this.rendering = true;
@@ -6646,7 +6660,7 @@ class Renderer {
     partRender() {
         const { canvas, updateBlocks: list } = this;
         if (!list)
-            return debug$5.warn('PartRender: need update attr');
+            return debug$4.warn('PartRender: need update attr');
         this.mergeBlocks();
         list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
             this.clipRender(block); });
@@ -6712,16 +6726,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) {
@@ -6737,7 +6752,7 @@ class Renderer {
             }
         }
         this.addBlock(new Bounds(0, 0, 1, 1));
-        this.changed = true;
+        this.update();
     }
     __onLayoutEnd(event) {
         if (event.data)
@@ -6748,7 +6763,7 @@ class Renderer {
                         empty = (!leaf.__world.width || !leaf.__world.height);
                         if (empty) {
                             if (!leaf.isLeafer)
-                                debug$5.tip(leaf.innerName, ': empty');
+                                debug$4.tip(leaf.innerName, ': empty');
                             empty = (!leaf.isBranch || leaf.isBranchLeaf);
                         }
                         return empty;
@@ -7123,7 +7138,7 @@ const Transition = {
 
 const { parse, objectToCanvasData } = PathConvert;
 const emptyPaint = {};
-const debug$4 = Debug.get('UIData');
+const debug$3 = Debug.get('UIData');
 class UIData extends LeafData {
     get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
     get __strokeWidth() {
@@ -7145,7 +7160,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; }
@@ -7160,7 +7175,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._width = -value;
             this.__leaf.scaleX *= -1;
-            debug$4.warn('width < 0, instead -scaleX ', this);
+            debug$3.warn('width < 0, instead -scaleX ', this);
         }
         else
             this._width = value;
@@ -7169,7 +7184,7 @@ class UIData extends LeafData {
         if (value < 0) {
             this._height = -value;
             this.__leaf.scaleY *= -1;
-            debug$4.warn('height < 0, instead -scaleY', this);
+            debug$3.warn('height < 0, instead -scaleY', this);
         }
         else
             this._height = value;
@@ -7259,7 +7274,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; }
 }
 
@@ -7545,11 +7560,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);
@@ -7859,17 +7878,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);
@@ -7901,7 +7920,7 @@ Group = __decorate([
 ], Group);
 
 var Leafer_1;
-const debug$3 = Debug.get('Leafer');
+const debug$2 = Debug.get('Leafer');
 let Leafer = Leafer_1 = class Leafer extends Group {
     get __tag() { return 'Leafer'; }
     get isApp() { return false; }
@@ -7915,20 +7934,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 = [];
@@ -7945,23 +7954,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) {
@@ -7982,8 +7995,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);
@@ -8018,7 +8031,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;
@@ -8065,7 +8082,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         if (this.canvas) {
             if (canvasSizeAttrs.includes(attrName)) {
                 if (!newValue)
-                    debug$3.warn(attrName + ' is 0');
+                    debug$2.warn(attrName + ' is 0');
                 this.__changeCanvasSize(attrName, newValue);
             }
             else if (attrName === 'fill') {
@@ -8126,8 +8143,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) {
@@ -8185,6 +8204,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         }
         else
             list.push(item);
+        this.requestRender();
     }
     zoom(_zoomType, _padding, _fixedScale) {
         return needPlugin('view');
@@ -8238,14 +8258,14 @@ 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();
                     setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                 }
                 catch (e) {
-                    debug$3.error(e);
+                    debug$2.error(e);
                 }
             }
         };
@@ -8965,9 +8985,9 @@ let App = class App extends Leafer {
             if (ground)
                 this.ground = this.addLeafer(ground);
             if (tree || editor)
-                this.tree = this.addLeafer(tree);
+                this.tree = this.addLeafer(tree || { type: userConfig.type || 'design' });
             if (sky || editor)
-                this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
+                this.sky = this.addLeafer(sky);
             if (editor)
                 this.sky.add(this.editor = Creator.editor(editor));
         }
@@ -9172,10 +9192,8 @@ let DragEvent = class DragEvent extends PointerEvent {
         this.data = data;
     }
     static getValidMove(leaf, start, total) {
-        const { draggable, dragBounds, x, y } = leaf;
-        const move = leaf.getLocalPoint(total, null, true);
-        move.x += start.x - x;
-        move.y += start.y - y;
+        const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
+        PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
         if (dragBounds)
             this.getMoveInDragBounds(leaf.__local, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
         if (draggable === 'x')
@@ -9185,8 +9203,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         return move;
     }
     static getMoveInDragBounds(childBox, dragBounds, move, change) {
-        const x = childBox.x + move.x, y = childBox.y + move.y;
-        const right = x + childBox.width, bottom = y + childBox.height;
+        const x = childBox.x + move.x, y = childBox.y + move.y, right = x + childBox.width, bottom = y + childBox.height;
         const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
         if (!change)
             move = Object.assign({}, move);
@@ -9238,9 +9255,7 @@ let DragEvent = class DragEvent extends PointerEvent {
         return this.getLocalMove(relative, true);
     }
     getPageBounds() {
-        const total = this.getPageTotal();
-        const start = this.getPagePoint();
-        const bounds = {};
+        const total = this.getPageTotal(), start = this.getPagePoint(), bounds = {};
         BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
         BoundsHelper.unsign(bounds);
         return bounds;
@@ -9326,184 +9341,7 @@ KeyEvent = __decorate([
     registerUIEvent()
 ], KeyEvent);
 
-function addInteractionWindow(leafer) {
-    if (leafer.isApp)
-        return;
-    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => {
-        leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
-    }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
-        const { zoomLayer } = leafer;
-        const changeScale = leafer.getValidScale(e.scale);
-        if (changeScale !== 1) {
-            PointHelper.scaleOf(zoomLayer, e, changeScale);
-            zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
-        }
-    }));
-}
-
-function document(leafer) {
-    addInteractionWindow(leafer);
-    const { move, zoom } = leafer.config;
-    move.scroll = 'limit';
-    zoom.min = 1;
-}
-
-function block(leafer) {
-    const { config } = leafer;
-    (config.wheel || (config.wheel = {})).preventDefault = false;
-    (config.touch || (config.touch = {})).preventDefault = 'auto';
-}
-
-const debug$2 = Debug.get('LeaferTypeCreator');
-const LeaferTypeCreator = {
-    list: {},
-    register(name, fn) {
-        list[name] && debug$2.repeat(name);
-        list[name] = fn;
-    },
-    run(name, leafer) {
-        const fn = list[name];
-        fn && fn(leafer);
-    }
-};
-const { list, register } = LeaferTypeCreator;
-register('design', addInteractionWindow);
-register('document', document);
-register('block', block);
-
-const leafer = Leafer.prototype;
-leafer.initType = function (type) {
-    LeaferTypeCreator.run(type, this);
-};
-leafer.getValidMove = function (moveX, moveY) {
-    const { scroll, disabled } = this.app.config.move;
-    if (scroll) {
-        Math.abs(moveX) > Math.abs(moveY) ? moveY = 0 : moveX = 0;
-        if (scroll === 'limit') {
-            const { x, y, width, height } = new Bounds(this.__world).addPoint(this.zoomLayer);
-            const right = x + width - this.width, bottom = y + height - this.height;
-            if (x >= 0 && right <= 0)
-                moveX = 0;
-            else if (moveX > 0) {
-                if (x + moveX > 0)
-                    moveX = -x;
-            }
-            else if (moveX < 0 && right + moveX < 0)
-                moveX = -right;
-            if (y >= 0 && bottom <= 0)
-                moveY = 0;
-            else if (moveY > 0) {
-                if (y + moveY > 0)
-                    moveY = -y;
-            }
-            else if (moveY < 0 && bottom + moveY < 0)
-                moveY = -bottom;
-        }
-    }
-    return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
-};
-leafer.getValidScale = function (changeScale) {
-    const { scaleX } = this.zoomLayer.__, { min, max, disabled } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
-    if (absScale < min)
-        changeScale = min / scaleX;
-    else if (absScale > max)
-        changeScale = max / scaleX;
-    return disabled ? 1 : changeScale;
-};
-
-class Transformer {
-    get transforming() { return !!(this.moveData || this.zoomData || this.rotateData); }
-    constructor(interaction) {
-        this.interaction = interaction;
-    }
-    move(data) {
-        const { interaction } = this;
-        if (!data.moveType)
-            data.moveType = 'move';
-        if (!this.moveData) {
-            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
-            data.path = path;
-            this.moveData = Object.assign(Object.assign({}, data), { moveX: 0, moveY: 0 });
-            interaction.cancelHover();
-            interaction.emit(MoveEvent.START, this.moveData);
-        }
-        data.path = this.moveData.path;
-        interaction.emit(MoveEvent.BEFORE_MOVE, data);
-        interaction.emit(MoveEvent.MOVE, data);
-        this.transformEndWait();
-    }
-    zoom(data) {
-        const { interaction } = this;
-        if (!this.zoomData) {
-            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
-            data.path = path;
-            this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
-            interaction.cancelHover();
-            interaction.emit(ZoomEvent.START, this.zoomData);
-        }
-        data.path = this.zoomData.path;
-        interaction.emit(ZoomEvent.BEFORE_ZOOM, data);
-        interaction.emit(ZoomEvent.ZOOM, data);
-        this.transformEndWait();
-    }
-    rotate(data) {
-        const { interaction } = this;
-        if (!this.rotateData) {
-            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
-            data.path = path;
-            this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
-            interaction.cancelHover();
-            interaction.emit(RotateEvent.START, this.rotateData);
-        }
-        data.path = this.rotateData.path;
-        interaction.emit(RotateEvent.BEFORE_ROTATE, data);
-        interaction.emit(RotateEvent.ROTATE, data);
-        this.transformEndWait();
-    }
-    transformEndWait() {
-        clearTimeout(this.transformTimer);
-        this.transformTimer = setTimeout(() => {
-            this.transformEnd();
-        }, this.interaction.config.pointer.transformTime);
-    }
-    transformEnd() {
-        this.moveEnd();
-        this.zoomEnd();
-        this.rotateEnd();
-    }
-    moveEnd() {
-        if (this.moveData) {
-            this.interaction.emit(MoveEvent.END, this.moveData);
-            this.moveData = null;
-        }
-    }
-    zoomEnd() {
-        if (this.zoomData) {
-            this.interaction.emit(ZoomEvent.END, this.zoomData);
-            this.zoomData = null;
-        }
-    }
-    rotateEnd() {
-        if (this.rotateData) {
-            this.interaction.emit(RotateEvent.END, this.rotateData);
-            this.rotateData = null;
-        }
-    }
-    destroy() {
-        this.zoomData = this.moveData = this.rotateData = null;
-    }
-}
-
 const InteractionHelper = {
-    getMoveEventData(center, move, event) {
-        return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, moveX: move.x, moveY: move.y });
-    },
-    getRotateEventData(center, angle, event) {
-        return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, rotation: angle });
-    },
-    getZoomEventData(center, scale, event) {
-        return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, scale });
-    },
     getDragEventData(startPoint, lastPoint, event) {
         return Object.assign(Object.assign({}, event), { x: event.x, y: event.y, moveX: event.x - lastPoint.x, moveY: event.y - lastPoint.y, totalX: event.x - startPoint.x, totalY: event.y - startPoint.y });
     },
@@ -9512,18 +9350,14 @@ const InteractionHelper = {
             data });
     },
     getSwipeDirection(angle) {
-        if (angle < -45 && angle > -135) {
+        if (angle < -45 && angle > -135)
             return SwipeEvent.UP;
-        }
-        else if (angle > 45 && angle < 135) {
+        else if (angle > 45 && angle < 135)
             return SwipeEvent.DOWN;
-        }
-        else if (angle <= 45 && angle >= -45) {
+        else if (angle <= 45 && angle >= -45)
             return SwipeEvent.RIGHT;
-        }
-        else {
+        else
             return SwipeEvent.LEFT;
-        }
     },
     getSwipeEventData(startPoint, lastDragData, event) {
         return Object.assign(Object.assign({}, event), { moveX: lastDragData.moveX, moveY: lastDragData.moveY, totalX: event.x - startPoint.x, totalY: event.y - startPoint.y, type: I.getSwipeDirection(PointHelper.getAngle(startPoint, event)) });
@@ -9596,9 +9430,8 @@ class Dragger {
                 interaction.emit(MoveEvent.START, this.dragData);
             }
         }
-        if (!this.moving) {
+        if (!this.moving)
             this.dragStart(data, canDrag);
-        }
         this.drag(data);
     }
     dragStart(data, canDrag) {
@@ -9676,16 +9509,9 @@ class Dragger {
     dragEnd(data, speed) {
         if (!this.dragging && !this.moving)
             return;
-        const { moveX, moveY } = this.dragData;
-        if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
-            data = Object.assign({}, data);
-            speed = (speed || (data.pointerType === 'touch' ? 2 : 1)) * 0.9;
-            PointHelper.move(data, moveX * speed, moveY * speed);
-            this.drag(data);
-            this.animate(() => { this.dragEnd(data, 1); });
-        }
-        else
-            this.dragEndReal(data);
+        if (this.checkDragEndAnimate(data, speed))
+            return;
+        this.dragEndReal(data);
     }
     dragEndReal(data) {
         const { interaction, downData, dragData } = this;
@@ -9712,12 +9538,6 @@ class Dragger {
         this.dragReset();
         this.animate(null, 'off');
     }
-    animate(func, off) {
-        const animateWait = func || this.animateWait;
-        if (animateWait)
-            this.interaction.target.nextRender(animateWait, null, off);
-        this.animateWait = func;
-    }
     swipe(data, downData, dragData, endDragData) {
         const { interaction } = this;
         if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
@@ -9734,39 +9554,11 @@ class Dragger {
     dragReset() {
         DragEvent.list = DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
     }
-    checkDragOut(data) {
-        const { interaction } = this;
-        this.autoMoveCancel();
-        if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
-            this.autoMoveOnDragOut(data);
-    }
-    autoMoveOnDragOut(data) {
-        const { interaction, downData, canDragOut } = this;
-        const { autoDistance, dragOut } = interaction.config.move;
-        if (!dragOut || !canDragOut || !autoDistance)
-            return;
-        const bounds = interaction.shrinkCanvasBounds;
-        const { x, y } = bounds;
-        const right = BoundsHelper.maxX(bounds);
-        const bottom = BoundsHelper.maxY(bounds);
-        const moveX = data.x < x ? autoDistance : (right < data.x ? -autoDistance : 0);
-        const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0);
-        let totalX = 0, totalY = 0;
-        this.autoMoveTimer = setInterval(() => {
-            totalX += moveX;
-            totalY += moveY;
-            PointHelper.move(downData, moveX, moveY);
-            PointHelper.move(this.dragData, moveX, moveY);
-            interaction.move(Object.assign(Object.assign({}, data), { moveX, moveY, totalX, totalY, moveType: 'drag' }));
-            interaction.pointerMoveReal(data);
-        }, 10);
-    }
-    autoMoveCancel() {
-        if (this.autoMoveTimer) {
-            clearInterval(this.autoMoveTimer);
-            this.autoMoveTimer = 0;
-        }
-    }
+    checkDragEndAnimate(_data, _speed) { return false; }
+    animate(_func, _off) { }
+    checkDragOut(_data) { }
+    autoMoveOnDragOut(_data) { }
+    autoMoveCancel() { }
     destroy() {
         this.dragReset();
     }
@@ -9836,28 +9628,12 @@ function exclude(leaf, excludePath) {
     return excludePath && excludePath.has(leaf);
 }
 
-const MultiTouchHelper = {
-    getData(list) {
-        const a = list[0];
-        const b = list[1];
-        const lastCenter = PointHelper.getCenter(a.from, b.from);
-        const center = PointHelper.getCenter(a.to, b.to);
-        const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y };
-        const lastDistance = PointHelper.getDistance(a.from, b.from);
-        const distance = PointHelper.getDistance(a.to, b.to);
-        const scale = distance / lastDistance;
-        const angle = PointHelper.getRotation(a.from, b.from, a.to, b.to);
-        return { move, scale, angle, center };
-    }
-};
-
 const config = {
     wheel: {
         zoomSpeed: 0.5,
         moveSpeed: 0.5,
         rotateSpeed: 0.5,
         delta: { x: 80 / 4, y: 8.0 },
-        preventDefault: true
     },
     pointer: {
         hitRadius: 5,
@@ -9868,17 +9644,18 @@ const config = {
         dragHover: true,
         dragDistance: 2,
         swipeDistance: 20,
-        preventDefaultMenu: true
     },
     touch: {
-        preventDefault: true
+        preventDefault: 'auto'
     },
     multiTouch: {},
+    move: { autoDistance: 2 },
+    zoom: {},
     cursor: true,
     keyEvent: true
 };
 
-const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag, pathHasOutside } = InteractionHelper;
+const { pathHasEventType, pathCanDrag, pathHasOutside } = InteractionHelper;
 class InteractionBase {
     get dragging() { return this.dragger.dragging; }
     get transforming() { return this.transformer.transforming; }
@@ -9900,7 +9677,7 @@ class InteractionBase {
         this.canvas = canvas;
         this.selector = selector;
         this.defaultPath = new LeafList(target);
-        this.transformer = new Transformer(this);
+        this.createTransformer();
         this.dragger = new Dragger(this);
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
@@ -10001,14 +9778,6 @@ class InteractionBase {
         data.isCancel = true;
         this.pointerUp(data);
     }
-    multiTouch(data, list) {
-        if (this.config.multiTouch.disabled)
-            return;
-        const { move, angle, scale, center } = MultiTouchHelper.getData(list);
-        this.rotate(getRotateEventData(center, angle, data));
-        this.zoom(getZoomEventData(center, scale, data));
-        this.move(getMoveEventData(center, move, data));
-    }
     menu(data) {
         this.findPath(data);
         this.emit(PointerEvent.MENU, data);
@@ -10022,18 +9791,13 @@ class InteractionBase {
             this.waitRightTap = this.waitMenuTap = false;
         }
     }
-    move(data) {
-        this.transformer.move(data);
-    }
-    zoom(data) {
-        this.transformer.zoom(data);
-    }
-    rotate(data) {
-        this.transformer.rotate(data);
-    }
-    transformEnd() {
-        this.transformer.transformEnd();
-    }
+    createTransformer() { }
+    move(_data) { }
+    zoom(_data) { }
+    rotate(_data) { }
+    transformEnd() { }
+    wheel(_data) { }
+    multiTouch(_data, _list) { }
     keyDown(data) {
         if (!this.config.keyEvent)
             return;
@@ -10271,8 +10035,9 @@ class InteractionBase {
         this.longPressed = false;
     }
     __onResize() {
+        const { dragOut } = this.m;
         this.shrinkCanvasBounds = new Bounds(this.canvas.bounds);
-        this.shrinkCanvasBounds.spread(-2);
+        this.shrinkCanvasBounds.spread(-(typeof dragOut === 'number' ? dragOut : 2));
     }
     __listenEvents() {
         const { target } = this;
@@ -10292,7 +10057,8 @@ class InteractionBase {
             this.stop();
             this.__removeListenEvents();
             this.dragger.destroy();
-            this.transformer.destroy();
+            if (this.transformer)
+                this.transformer.destroy();
             this.downData = this.overPath = this.enterPath = null;
         }
     }
@@ -10733,6 +10499,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();
@@ -10770,6 +10538,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();
@@ -10795,6 +10565,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) {
@@ -12304,4 +12082,4 @@ if (platform === 'ios') {
     };
 }
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, needPlugin, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isNull, layoutProcessor, maskType, naturalBoundsType, needPlugin, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };