leafer-ui 1.1.0 → 1.1.1

package/dist/web.module.js

@@ -1411,14 +1411,14 @@ const UICreator = {
     list: {},
     register(UI) {
         const { __tag: tag } = UI.prototype;
-        if (list$2[tag])
+        if (list$1[tag])
             debug$f.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$f.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$e = 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$9 = 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$9.error(item.name, '需在Class上装饰@rewriteAble()');
             item.run();
         });
-        list$1.length = 0;
+        list.length = 0;
     }
 }
 setTimeout(() => doRewrite(true));
@@ -5434,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) {
@@ -5678,6 +5693,7 @@ Leaf = __decorate([
 const { setListWithFn } = BoundsHelper;
 const { sort } = BranchHelper;
 const { localBoxBounds, localStrokeBounds, localRenderBounds, maskLocalBoxBounds, maskLocalStrokeBounds, maskLocalRenderBounds } = LeafBoundsHelper;
+const debug$7 = new Debug('Branch');
 let Branch = class Branch extends Leaf {
     __updateStrokeSpread() {
         const { children } = this;
@@ -5718,8 +5734,8 @@ let Branch = class Branch extends Leaf {
         }
     }
     add(child, index) {
-        if (child === this)
-            return;
+        if (child === this || child.destroyed)
+            return debug$7.warn('add self or destroyed');
         const noIndex = index === undefined;
         if (!child.__) {
             if (child instanceof Array)
@@ -5733,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) {
@@ -5972,9 +5989,9 @@ class LeafLevelList {
     }
 }
 
-const version = "1.1.0";
+const version = "1.1.1";
 
-const debug$7 = Debug.get('LeaferCanvas');
+const debug$6 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
     set zIndex(zIndex) {
         const { style } = this.view;
@@ -6046,7 +6063,7 @@ class LeaferCanvas extends LeaferCanvasBase {
             }
         }
         else {
-            debug$7.error(`no id: ${inputView}`);
+            debug$6.error(`no id: ${inputView}`);
             this.__createView();
         }
     }
@@ -6083,7 +6100,7 @@ class LeaferCanvas extends LeaferCanvasBase {
                 }
                 else {
                     this.checkAutoBounds(this.view);
-                    debug$7.warn('no parent');
+                    debug$6.warn('no parent');
                 }
             }
             catch (_a) {
@@ -6419,7 +6436,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;
@@ -6454,7 +6471,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;
     }
@@ -6468,9 +6485,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;
@@ -6574,7 +6591,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) {
@@ -6590,29 +6607,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);
@@ -6623,9 +6640,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) {
@@ -6637,9 +6654,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;
@@ -6676,7 +6693,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); });
@@ -6742,16 +6759,17 @@ class Renderer {
         }
     }
     __requestRender() {
-        const startTime = Date.now();
+        if (this.requestTime)
+            return;
+        const requestTime = this.requestTime = Date.now();
         Platform.requestRender(() => {
-            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - startTime)));
+            this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
+            this.requestTime = 0;
             if (this.running) {
                 if (this.changed && this.canvas.view)
                     this.render();
                 this.target.emit(RenderEvent.NEXT);
             }
-            if (this.target)
-                this.__requestRender();
         });
     }
     __onResize(e) {
@@ -6767,7 +6785,7 @@ class Renderer {
             }
         }
         this.addBlock(new Bounds(0, 0, 1, 1));
-        this.changed = true;
+        this.update();
     }
     __onLayoutEnd(event) {
         if (event.data)
@@ -6778,7 +6796,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;
@@ -7153,7 +7171,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() {
@@ -7175,7 +7193,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; }
@@ -7190,7 +7208,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;
@@ -7199,7 +7217,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;
@@ -7289,7 +7307,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; }
 }
 
@@ -7935,7 +7953,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; }
@@ -7949,20 +7967,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 = [];
@@ -7979,23 +7987,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) {
@@ -8052,7 +8064,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;
@@ -8099,7 +8115,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') {
@@ -8160,8 +8176,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) {
@@ -8219,6 +8237,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         }
         else
             list.push(item);
+        this.requestRender();
     }
     zoom(_zoomType, _padding, _fixedScale) {
         return needPlugin('view');
@@ -8272,14 +8291,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);
                 }
             }
         };
@@ -8999,9 +9018,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));
         }
@@ -9355,184 +9374,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$1(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$1);
-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 });
     },
@@ -9541,18 +9383,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)) });
@@ -9625,9 +9463,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) {
@@ -9705,16 +9542,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;
@@ -9741,12 +9571,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) {
@@ -9763,39 +9587,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();
     }
@@ -9865,28 +9661,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,
@@ -9897,17 +9677,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: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1, pathCanDrag: pathCanDrag$1, pathHasOutside } = InteractionHelper;
+const { pathHasEventType, pathCanDrag: pathCanDrag$1, pathHasOutside } = InteractionHelper;
 class InteractionBase {
     get dragging() { return this.dragger.dragging; }
     get transforming() { return this.transformer.transforming; }
@@ -9929,7 +9710,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);
@@ -10030,14 +9811,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$1(center, angle, data));
-        this.zoom(getZoomEventData$1(center, scale, data));
-        this.move(getMoveEventData$1(center, move, data));
-    }
     menu(data) {
         this.findPath(data);
         this.emit(PointerEvent.MENU, data);
@@ -10051,18 +9824,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;
@@ -10300,8 +10068,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;
@@ -10321,7 +10090,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;
         }
     }
@@ -10557,46 +10327,6 @@ const PointerEventHelper = {
     }
 };
 
-const WheelEventHelper = {
-    getMove(e, config) {
-        let { moveSpeed } = config;
-        let { deltaX, deltaY } = e;
-        if (e.shiftKey && !deltaX) {
-            deltaX = deltaY;
-            deltaY = 0;
-        }
-        if (deltaX > 50)
-            deltaX = Math.max(50, deltaX / 3);
-        if (deltaY > 50)
-            deltaY = Math.max(50, deltaY / 3);
-        return { x: -deltaX * moveSpeed * 2, y: -deltaY * moveSpeed * 2 };
-    },
-    getScale(e, config) {
-        let zoom;
-        let scale = 1;
-        let { zoomMode, zoomSpeed } = config;
-        const delta = e.deltaY || e.deltaX;
-        if (zoomMode) {
-            zoom = (zoomMode === 'mouse') ? true : (!e.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta));
-            if (e.shiftKey || e.metaKey || e.ctrlKey)
-                zoom = true;
-        }
-        else {
-            zoom = !e.shiftKey && (e.metaKey || e.ctrlKey);
-        }
-        if (zoom) {
-            zoomSpeed = MathHelper.within(zoomSpeed, 0, 1);
-            const min = e.deltaY ? config.delta.y : config.delta.x;
-            scale = 1 - delta / (min * 4) * zoomSpeed;
-            if (scale < 0.5)
-                scale = 0.5;
-            if (scale >= 1.5)
-                scale = 1.5;
-        }
-        return scale;
-    }
-};
-
 const KeyEventHelper = {
     convert(e) {
         const base = InteractionHelper.getBase(e);
@@ -10605,7 +10335,7 @@ const KeyEventHelper = {
     }
 };
 
-const { getMoveEventData, getZoomEventData, getRotateEventData, pathCanDrag } = InteractionHelper;
+const { pathCanDrag } = InteractionHelper;
 class Interaction extends InteractionBase {
     __listenEvents() {
         super.__listenEvents();
@@ -10815,13 +10545,7 @@ class Interaction extends InteractionBase {
     }
     onWheel(e) {
         this.preventDefaultWheel(e);
-        const { wheel } = this.config;
-        if (wheel.disabled)
-            return;
-        const scale = wheel.getScale ? wheel.getScale(e, wheel) : WheelEventHelper.getScale(e, wheel);
-        const local = this.getLocal(e);
-        const eventBase = InteractionHelper.getBase(e);
-        scale !== 1 ? this.zoom(getZoomEventData(local, scale, eventBase)) : this.move(getMoveEventData(local, wheel.getMove ? wheel.getMove(e, wheel) : WheelEventHelper.getMove(e, wheel), eventBase));
+        this.wheel(Object.assign(Object.assign(Object.assign({}, InteractionHelper.getBase(e)), this.getLocal(e)), { deltaX: e.deltaX, deltaY: e.deltaY }));
     }
     onGesturestart(e) {
         if (this.useMultiTouch)
@@ -10834,14 +10558,12 @@ class Interaction extends InteractionBase {
         if (this.useMultiTouch)
             return;
         this.preventDefaultWheel(e);
-        const local = this.getLocal(e);
         const eventBase = InteractionHelper.getBase(e);
-        const changeScale = e.scale / this.lastGestureScale;
-        const changeAngle = e.rotation - this.lastGestureRotation;
-        let { rotateSpeed } = this.config.wheel;
-        rotateSpeed = MathHelper.within(rotateSpeed, 0, 1);
-        this.zoom(getZoomEventData(local, changeScale * changeScale, eventBase));
-        this.rotate(getRotateEventData(local, changeAngle / Math.PI * 180 * (rotateSpeed / 4 + 0.1), eventBase));
+        Object.assign(eventBase, this.getLocal(e));
+        const scale = (e.scale / this.lastGestureScale);
+        const rotation = (e.rotation - this.lastGestureRotation) / Math.PI * 180 * (MathHelper.within(this.config.wheel.rotateSpeed, 0, 1) / 4 + 0.1);
+        this.zoom(Object.assign(Object.assign({}, eventBase), { scale: scale * scale }));
+        this.rotate(Object.assign(Object.assign({}, eventBase), { rotation }));
         this.lastGestureScale = e.scale;
         this.lastGestureRotation = e.rotation;
     }
@@ -12561,4 +12283,4 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-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$1 as 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$1 as 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 };