@leafer-ui/worker 1.0.10 → 1.1.1

package/dist/worker.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;
         },
@@ -1414,14 +1414,14 @@ var LeaferUI = (function (exports) {
         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)
@@ -1434,7 +1434,7 @@ var LeaferUI = (function (exports) {
             return ui;
         }
     };
-    const { list: list$2 } = UICreator;
+    const { list: list$1 } = UICreator;
 
     const debug$d = Debug.get('EventCreator');
     const EventCreator = {
@@ -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) {
@@ -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();
@@ -4051,11 +4066,11 @@ var LeaferUI = (function (exports) {
     }
 
     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() {
@@ -4064,13 +4079,13 @@ var LeaferUI = (function (exports) {
         };
     }
     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));
@@ -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);
@@ -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";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6252,7 +6266,7 @@ var LeaferUI = (function (exports) {
     }
 
     const { updateAllMatrix, updateAllChange } = LeafHelper;
-    const debug$6 = Debug.get('Layouter');
+    const debug$5 = Debug.get('Layouter');
     class Layouter {
         constructor(target, userConfig) {
             this.totalTimes = 0;
@@ -6287,7 +6301,7 @@ var LeaferUI = (function (exports) {
                 target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times));
             }
             catch (e) {
-                debug$6.error(e);
+                debug$5.error(e);
             }
             this.layoutedBlocks = null;
         }
@@ -6301,9 +6315,9 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -6407,7 +6421,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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) {
@@ -6423,29 +6437,29 @@ 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();
-            debug$5.log(target.innerName, '--->');
+            debug$4.log(target.innerName, '--->');
             try {
                 if (!target.isApp)
                     target.app.emit(RenderEvent.CHILD_START, target);
@@ -6456,9 +6470,9 @@ var LeaferUI = (function (exports) {
             }
             catch (e) {
                 this.rendering = false;
-                debug$5.error(e);
+                debug$4.error(e);
             }
-            debug$5.log('-------------|');
+            debug$4.log('-------------|');
         }
         renderAgain() {
             if (this.rendering) {
@@ -6470,9 +6484,9 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -6509,7 +6523,7 @@ var LeaferUI = (function (exports) {
         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); });
@@ -6575,16 +6589,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) {
@@ -6600,7 +6615,7 @@ var LeaferUI = (function (exports) {
                 }
             }
             this.addBlock(new Bounds(0, 0, 1, 1));
-            this.changed = true;
+            this.update();
         }
         __onLayoutEnd(event) {
             if (event.data)
@@ -6611,7 +6626,7 @@ var LeaferUI = (function (exports) {
                             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;
@@ -6986,7 +7001,7 @@ var LeaferUI = (function (exports) {
 
     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() {
@@ -7008,7 +7023,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; }
@@ -7023,7 +7038,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -7032,7 +7047,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -7122,7 +7137,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; }
     }
 
@@ -7408,11 +7423,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);
@@ -7722,17 +7741,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);
@@ -7764,7 +7783,7 @@ var LeaferUI = (function (exports) {
     ], exports.Group);
 
     var Leafer_1;
-    const debug$3 = Debug.get('Leafer');
+    const debug$2 = Debug.get('Leafer');
     exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
@@ -7778,20 +7797,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 = [];
@@ -7808,23 +7817,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) {
@@ -7845,8 +7858,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);
@@ -7881,7 +7894,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;
@@ -7928,7 +7945,7 @@ var LeaferUI = (function (exports) {
             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') {
@@ -7989,8 +8006,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) {
@@ -8048,6 +8067,7 @@ var LeaferUI = (function (exports) {
             }
             else
                 list.push(item);
+            this.requestRender();
         }
         zoom(_zoomType, _padding, _fixedScale) {
             return needPlugin('view');
@@ -8101,14 +8121,14 @@ 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();
                         setTimeout(() => { ImageManager.clearRecycled(); }, 100);
                     }
                     catch (e) {
-                        debug$3.error(e);
+                        debug$2.error(e);
                     }
                 }
             };
@@ -8828,9 +8848,9 @@ var LeaferUI = (function (exports) {
                 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));
             }
@@ -9035,10 +9055,8 @@ var LeaferUI = (function (exports) {
             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')
@@ -9048,8 +9066,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -9101,9 +9118,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -9189,184 +9204,7 @@ var LeaferUI = (function (exports) {
         registerUIEvent()
     ], exports.KeyEvent);
 
-    function addInteractionWindow(leafer) {
-        if (leafer.isApp)
-            return;
-        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => {
-            leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
-        }), leafer.on_(exports.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 = exports.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(exports.MoveEvent.START, this.moveData);
-            }
-            data.path = this.moveData.path;
-            interaction.emit(exports.MoveEvent.BEFORE_MOVE, data);
-            interaction.emit(exports.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(exports.ZoomEvent.START, this.zoomData);
-            }
-            data.path = this.zoomData.path;
-            interaction.emit(exports.ZoomEvent.BEFORE_ZOOM, data);
-            interaction.emit(exports.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(exports.RotateEvent.START, this.rotateData);
-            }
-            data.path = this.rotateData.path;
-            interaction.emit(exports.RotateEvent.BEFORE_ROTATE, data);
-            interaction.emit(exports.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(exports.MoveEvent.END, this.moveData);
-                this.moveData = null;
-            }
-        }
-        zoomEnd() {
-            if (this.zoomData) {
-                this.interaction.emit(exports.ZoomEvent.END, this.zoomData);
-                this.zoomData = null;
-            }
-        }
-        rotateEnd() {
-            if (this.rotateData) {
-                this.interaction.emit(exports.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 });
         },
@@ -9375,18 +9213,14 @@ var LeaferUI = (function (exports) {
                 data });
         },
         getSwipeDirection(angle) {
-            if (angle < -45 && angle > -135) {
+            if (angle < -45 && angle > -135)
                 return exports.SwipeEvent.UP;
-            }
-            else if (angle > 45 && angle < 135) {
+            else if (angle > 45 && angle < 135)
                 return exports.SwipeEvent.DOWN;
-            }
-            else if (angle <= 45 && angle >= -45) {
+            else if (angle <= 45 && angle >= -45)
                 return exports.SwipeEvent.RIGHT;
-            }
-            else {
+            else
                 return exports.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)) });
@@ -9459,9 +9293,8 @@ var LeaferUI = (function (exports) {
                     interaction.emit(exports.MoveEvent.START, this.dragData);
                 }
             }
-            if (!this.moving) {
+            if (!this.moving)
                 this.dragStart(data, canDrag);
-            }
             this.drag(data);
         }
         dragStart(data, canDrag) {
@@ -9539,16 +9372,9 @@ var LeaferUI = (function (exports) {
         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;
@@ -9575,12 +9401,6 @@ var LeaferUI = (function (exports) {
             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) {
@@ -9597,39 +9417,11 @@ var LeaferUI = (function (exports) {
         dragReset() {
             exports.DragEvent.list = exports.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();
         }
@@ -9699,28 +9491,12 @@ var LeaferUI = (function (exports) {
         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,
@@ -9731,17 +9507,18 @@ var LeaferUI = (function (exports) {
             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; }
@@ -9763,7 +9540,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -9864,14 +9641,6 @@ var LeaferUI = (function (exports) {
             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(exports.PointerEvent.MENU, data);
@@ -9885,18 +9654,13 @@ var LeaferUI = (function (exports) {
                 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;
@@ -10134,8 +9898,9 @@ var LeaferUI = (function (exports) {
             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;
@@ -10155,7 +9920,8 @@ var LeaferUI = (function (exports) {
                 this.stop();
                 this.__removeListenEvents();
                 this.dragger.destroy();
-                this.transformer.destroy();
+                if (this.transformer)
+                    this.transformer.destroy();
                 this.downData = this.overPath = this.enterPath = null;
             }
         }
@@ -10491,6 +10257,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();
@@ -10528,6 +10296,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();
@@ -10553,6 +10323,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) {
@@ -12048,6 +11826,7 @@ var LeaferUI = (function (exports) {
     exports.Cursor = Cursor;
     exports.DataHelper = DataHelper;
     exports.Debug = Debug;
+    exports.Dragger = Dragger;
     exports.Effect = Effect;
     exports.EllipseData = EllipseData;
     exports.EllipseHelper = EllipseHelper;
@@ -12084,12 +11863,10 @@ var LeaferUI = (function (exports) {
     exports.LeaferData = LeaferData;
     exports.LeaferEvent = LeaferEvent;
     exports.LeaferImage = LeaferImage;
-    exports.LeaferTypeCreator = LeaferTypeCreator;
     exports.LineData = LineData;
     exports.MathHelper = MathHelper;
     exports.Matrix = Matrix;
     exports.MatrixHelper = MatrixHelper;
-    exports.MultiTouchHelper = MultiTouchHelper;
     exports.MyDragEvent = MyDragEvent;
     exports.MyImage = MyImage;
     exports.MyPointerEvent = MyPointerEvent;
@@ -12145,7 +11922,6 @@ var LeaferUI = (function (exports) {
     exports.WaitHelper = WaitHelper;
     exports.WatchEvent = WatchEvent;
     exports.Watcher = Watcher;
-    exports.addInteractionWindow = addInteractionWindow;
     exports.affectRenderBoundsType = affectRenderBoundsType;
     exports.affectStrokeBoundsType = affectStrokeBoundsType;
     exports.attr = attr;