@leafer-ui/core 1.8.0 → 1.9.0

package/lib/core.esm.js

@@ -1,63 +1,46 @@
-import { Leafer, State, UI, Rect, Box, Text, Group, emptyData } from '@leafer-ui/draw';
-export * from '@leafer-ui/draw';
-import { registerUI, Creator, DataHelper, canvasSizeAttrs, LayoutEvent, RenderEvent, Event, EventCreator, registerUIEvent, LeafList, PointHelper, BoundsHelper, Debug, Platform, Bounds, ResizeEvent, LeaferEvent, CanvasManager, Leaf, Matrix, tempBounds, ImageManager, LeaferCanvasBase } from '@leafer/core';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+import { Leafer, State, UI, Rect, Box, Text, Group, emptyData } from "@leafer-ui/draw";
+
+export * from "@leafer-ui/draw";
+
+import { registerUI, Creator, isUndefined, DataHelper, canvasSizeAttrs, LayoutEvent, RenderEvent, Event, EventCreator, registerUIEvent, LeafList, PointHelper, BoundsHelper, LeafHelper, isNumber, Debug, Platform, Bounds, ResizeEvent, LeaferEvent, CanvasManager, Leaf, Matrix, tempBounds, ImageManager, LeaferCanvasBase } from "@leafer/core";
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
 let App = class App extends Leafer {
-    get __tag() { return 'App'; }
-    get isApp() { return true; }
+    get __tag() {
+        return "App";
+    }
+    get isApp() {
+        return true;
+    }
     constructor(userConfig, data) {
         super(userConfig, data);
     }
     init(userConfig, parentApp) {
         super.init(userConfig, parentApp);
         if (userConfig) {
-            const { ground, tree, sky, editor } = userConfig;
-            if (ground)
-                this.ground = this.addLeafer(ground);
-            if (tree || editor)
-                this.tree = this.addLeafer(tree || { type: userConfig.type || 'design' });
-            if (sky || editor)
-                this.sky = this.addLeafer(sky);
-            if (editor)
-                Creator.editor(editor, this);
+            const {ground: ground, tree: tree, sky: sky, editor: editor} = userConfig;
+            if (ground) this.ground = this.addLeafer(ground);
+            if (tree || editor) this.tree = this.addLeafer(tree || {
+                type: userConfig.type || "design"
+            });
+            if (sky || editor) this.sky = this.addLeafer(sky);
+            if (editor) Creator.editor(editor, this);
         }
     }
     __setApp() {
-        const { canvas } = this;
-        const { realCanvas, view } = this.config;
-        if (realCanvas || view === this.canvas.view || !canvas.parentView)
-            this.realCanvas = true;
-        else
-            canvas.unrealCanvas();
+        const {canvas: canvas} = this;
+        const {realCanvas: realCanvas, view: view} = this.config;
+        if (realCanvas || view === this.canvas.view || !canvas.parentView) this.realCanvas = true; else canvas.unrealCanvas();
         this.leafer = this;
         this.watcher.disable();
         this.layouter.disable();
@@ -99,8 +82,7 @@ let App = class App extends Leafer {
             leafer.init(this.__getChildConfig(leafer.userConfig), this);
         }
         super.add(leafer, index);
-        if (index !== undefined)
-            leafer.canvas.childIndex = index;
+        if (!isUndefined(index)) leafer.canvas.childIndex = index;
         this.__listenChildEvents(leafer);
     }
     forEach(fn) {
@@ -110,21 +92,17 @@ let App = class App extends Leafer {
         this.created = this.children.every(child => child.created);
     }
     __onReady() {
-        if (this.children.every(child => child.ready))
-            super.__onReady();
+        if (this.children.every(child => child.ready)) super.__onReady();
     }
     __onViewReady() {
-        if (this.children.every(child => child.viewReady))
-            super.__onViewReady();
+        if (this.children.every(child => child.viewReady)) super.__onViewReady();
     }
     __onChildRenderEnd(e) {
         this.renderer.addBlock(e.renderBounds);
-        if (this.viewReady)
-            this.renderer.update();
+        if (this.viewReady) this.renderer.update();
     }
     __render(canvas, options) {
-        if (canvas.context)
-            this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options && options.bounds));
+        if (canvas.context) this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options && options.bounds));
     }
     __onResize(event) {
         this.forEach(leafer => leafer.resize(event));
@@ -136,39 +114,34 @@ let App = class App extends Leafer {
     __getChildConfig(userConfig) {
         const config = Object.assign({}, this.config);
         config.hittable = config.realCanvas = undefined;
-        if (userConfig)
-            DataHelper.assign(config, userConfig);
-        if (this.autoLayout)
-            DataHelper.copyAttrs(config, this, canvasSizeAttrs);
+        if (userConfig) DataHelper.assign(config, userConfig);
+        if (this.autoLayout) DataHelper.copyAttrs(config, this, canvasSizeAttrs);
         config.view = this.realCanvas ? undefined : this.view;
         config.fill = undefined;
         return config;
     }
     __listenChildEvents(leafer) {
-        leafer.once([
-            [LayoutEvent.END, this.__onReady, this],
-            [RenderEvent.START, this.__onCreated, this],
-            [RenderEvent.END, this.__onViewReady, this]
-        ]);
-        if (this.realCanvas)
-            this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
+        leafer.once([ [ LayoutEvent.END, this.__onReady, this ], [ RenderEvent.START, this.__onCreated, this ], [ RenderEvent.END, this.__onViewReady, this ] ]);
+        if (this.realCanvas) this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
     }
 };
-App = __decorate([
-    registerUI()
-], App);
+
+App = __decorate([ registerUI() ], App);
 
 const downKeyMap = {};
+
 const Keyboard = {
     isHoldSpaceKey() {
-        return Keyboard.isHold('Space');
+        return Keyboard.isHold("Space");
     },
     isHold(code) {
         return downKeyMap[code];
     },
+    isHoldKeys(shortcutKeys, e) {
+        return e ? shortcutKeys(e) : undefined;
+    },
     setDownCode(code) {
-        if (!downKeyMap[code])
-            downKeyMap[code] = true;
+        if (!downKeyMap[code]) downKeyMap[code] = true;
     },
     setUpCode(code) {
         downKeyMap[code] = false;
@@ -179,23 +152,41 @@ const PointerButton = {
     LEFT: 1,
     RIGHT: 2,
     MIDDLE: 4,
-    defaultLeft(event) { if (!event.buttons)
-        event.buttons = 1; },
-    left(event) { return event.buttons === 1; },
-    right(event) { return event.buttons === 2; },
-    middle(event) { return event.buttons === 4; }
+    defaultLeft(event) {
+        if (!event.buttons) event.buttons = 1;
+    },
+    left(event) {
+        return event.buttons === 1;
+    },
+    right(event) {
+        return event.buttons === 2;
+    },
+    middle(event) {
+        return event.buttons === 4;
+    }
 };
 
 class UIEvent extends Event {
-    get spaceKey() { return Keyboard.isHoldSpaceKey(); }
-    get left() { return PointerButton.left(this); }
-    get right() { return PointerButton.right(this); }
-    get middle() { return PointerButton.middle(this); }
+    get spaceKey() {
+        return Keyboard.isHoldSpaceKey();
+    }
+    get left() {
+        return PointerButton.left(this);
+    }
+    get right() {
+        return PointerButton.right(this);
+    }
+    get middle() {
+        return PointerButton.middle(this);
+    }
     constructor(params) {
         super(params.type);
         this.bubbles = true;
         Object.assign(this, params);
     }
+    isHoldKeys(shortcutKeys) {
+        return Keyboard.isHoldKeys(shortcutKeys, this);
+    }
     getBoxPoint(relative) {
         return (relative || this.current).getBoxPoint(this);
     }
@@ -208,41 +199,66 @@ class UIEvent extends Event {
     getPagePoint() {
         return this.current.getPagePoint(this);
     }
-    getInner(relative) { return this.getInnerPoint(relative); }
-    getLocal(relative) { return this.getLocalPoint(relative); }
-    getPage() { return this.getPagePoint(); }
+    getInner(relative) {
+        return this.getInnerPoint(relative);
+    }
+    getLocal(relative) {
+        return this.getLocalPoint(relative);
+    }
+    getPage() {
+        return this.getPagePoint();
+    }
     static changeName(oldName, newName) {
         EventCreator.changeName(oldName, newName);
     }
 }
 
-let PointerEvent = class PointerEvent extends UIEvent {
-};
-PointerEvent.POINTER = 'pointer';
-PointerEvent.BEFORE_DOWN = 'pointer.before_down';
-PointerEvent.BEFORE_MOVE = 'pointer.before_move';
-PointerEvent.BEFORE_UP = 'pointer.before_up';
-PointerEvent.DOWN = 'pointer.down';
-PointerEvent.MOVE = 'pointer.move';
-PointerEvent.UP = 'pointer.up';
-PointerEvent.OVER = 'pointer.over';
-PointerEvent.OUT = 'pointer.out';
-PointerEvent.ENTER = 'pointer.enter';
-PointerEvent.LEAVE = 'pointer.leave';
-PointerEvent.TAP = 'tap';
-PointerEvent.DOUBLE_TAP = 'double_tap';
-PointerEvent.CLICK = 'click';
-PointerEvent.DOUBLE_CLICK = 'double_click';
-PointerEvent.LONG_PRESS = 'long_press';
-PointerEvent.LONG_TAP = 'long_tap';
-PointerEvent.MENU = 'pointer.menu';
-PointerEvent.MENU_TAP = 'pointer.menu_tap';
-PointerEvent = __decorate([
-    registerUIEvent()
-], PointerEvent);
+let PointerEvent = class PointerEvent extends UIEvent {};
+
+PointerEvent.POINTER = "pointer";
+
+PointerEvent.BEFORE_DOWN = "pointer.before_down";
+
+PointerEvent.BEFORE_MOVE = "pointer.before_move";
+
+PointerEvent.BEFORE_UP = "pointer.before_up";
+
+PointerEvent.DOWN = "pointer.down";
+
+PointerEvent.MOVE = "pointer.move";
+
+PointerEvent.UP = "pointer.up";
+
+PointerEvent.OVER = "pointer.over";
+
+PointerEvent.OUT = "pointer.out";
+
+PointerEvent.ENTER = "pointer.enter";
+
+PointerEvent.LEAVE = "pointer.leave";
+
+PointerEvent.TAP = "tap";
+
+PointerEvent.DOUBLE_TAP = "double_tap";
+
+PointerEvent.CLICK = "click";
+
+PointerEvent.DOUBLE_CLICK = "double_click";
+
+PointerEvent.LONG_PRESS = "long_press";
+
+PointerEvent.LONG_TAP = "long_tap";
+
+PointerEvent.MENU = "pointer.menu";
+
+PointerEvent.MENU_TAP = "pointer.menu_tap";
+
+PointerEvent = __decorate([ registerUIEvent() ], PointerEvent);
+
 const MyPointerEvent = PointerEvent;
 
 const tempMove = {};
+
 let DragEvent = class DragEvent extends PointerEvent {
     static setList(data) {
         this.list = data instanceof LeafList ? data : new LeafList(data);
@@ -250,41 +266,28 @@ let DragEvent = class DragEvent extends PointerEvent {
     static setData(data) {
         this.data = data;
     }
-    static getValidMove(leaf, start, total) {
-        const { draggable, dragBounds } = leaf, move = leaf.getLocalPoint(total, null, true);
+    static getValidMove(leaf, start, total, checkLimit = true) {
+        const move = leaf.getLocalPoint(total, null, true);
         PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
-        if (dragBounds)
-            this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
-        if (draggable === 'x')
-            move.y = 0;
-        if (draggable === 'y')
-            move.x = 0;
+        if (checkLimit) this.limitMove(leaf, move);
         return move;
     }
+    static limitMove(leaf, move) {
+        const {draggable: draggable, dragBounds: dragBounds} = leaf;
+        if (dragBounds) this.getMoveInDragBounds(leaf.__localBoxBounds, dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds, move, true);
+        if (draggable === "x") move.y = 0;
+        if (draggable === "y") move.x = 0;
+    }
     static getMoveInDragBounds(childBox, dragBounds, move, change) {
         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);
+        if (!change) move = Object.assign({}, move);
         if (BoundsHelper.includes(childBox, dragBounds)) {
-            if (x > dragBounds.x)
-                move.x += dragBounds.x - x;
-            else if (right < boundsRight)
-                move.x += boundsRight - right;
-            if (y > dragBounds.y)
-                move.y += dragBounds.y - y;
-            else if (bottom < boundsBottom)
-                move.y += boundsBottom - bottom;
-        }
-        else {
-            if (x < dragBounds.x)
-                move.x += dragBounds.x - x;
-            else if (right > boundsRight)
-                move.x += boundsRight - right;
-            if (y < dragBounds.y)
-                move.y += dragBounds.y - y;
-            else if (bottom > boundsBottom)
-                move.y += boundsBottom - bottom;
+            if (x > dragBounds.x) move.x += dragBounds.x - x; else if (right < boundsRight) move.x += boundsRight - right;
+            if (y > dragBounds.y) move.y += dragBounds.y - y; else if (bottom < boundsBottom) move.y += boundsBottom - bottom;
+        } else {
+            if (x < dragBounds.x) move.x += dragBounds.x - x; else if (right > boundsRight) move.x += boundsRight - right;
+            if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
         }
         return move;
     }
@@ -293,14 +296,12 @@ let DragEvent = class DragEvent extends PointerEvent {
         return this.current.getPagePoint(tempMove, null, true);
     }
     getInnerMove(relative, total) {
-        if (!relative)
-            relative = this.current;
+        if (!relative) relative = this.current;
         this.assignMove(total);
         return relative.getInnerPoint(tempMove, null, true);
     }
     getLocalMove(relative, total) {
-        if (!relative)
-            relative = this.current;
+        if (!relative) relative = this.current;
         this.assignMove(total);
         return relative.getLocalPoint(tempMove, null, true);
     }
@@ -324,17 +325,25 @@ let DragEvent = class DragEvent extends PointerEvent {
         tempMove.y = total ? this.totalY : this.moveY;
     }
 };
-DragEvent.BEFORE_DRAG = 'drag.before_drag';
-DragEvent.START = 'drag.start';
-DragEvent.DRAG = 'drag';
-DragEvent.END = 'drag.end';
-DragEvent.OVER = 'drag.over';
-DragEvent.OUT = 'drag.out';
-DragEvent.ENTER = 'drag.enter';
-DragEvent.LEAVE = 'drag.leave';
-DragEvent = __decorate([
-    registerUIEvent()
-], DragEvent);
+
+DragEvent.BEFORE_DRAG = "drag.before_drag";
+
+DragEvent.START = "drag.start";
+
+DragEvent.DRAG = "drag";
+
+DragEvent.END = "drag.end";
+
+DragEvent.OVER = "drag.over";
+
+DragEvent.OUT = "drag.out";
+
+DragEvent.ENTER = "drag.enter";
+
+DragEvent.LEAVE = "drag.leave";
+
+DragEvent = __decorate([ registerUIEvent() ], DragEvent);
+
 const MyDragEvent = DragEvent;
 
 let DropEvent = class DropEvent extends PointerEvent {
@@ -345,81 +354,103 @@ let DropEvent = class DropEvent extends PointerEvent {
         DragEvent.setData(data);
     }
 };
-DropEvent.DROP = 'drop';
-DropEvent = __decorate([
-    registerUIEvent()
-], DropEvent);
 
-let MoveEvent = class MoveEvent extends DragEvent {
-};
-MoveEvent.BEFORE_MOVE = 'move.before_move';
-MoveEvent.START = 'move.start';
-MoveEvent.MOVE = 'move';
-MoveEvent.END = 'move.end';
-MoveEvent = __decorate([
-    registerUIEvent()
-], MoveEvent);
-
-let RotateEvent = class RotateEvent extends PointerEvent {
-};
-RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
-RotateEvent.START = 'rotate.start';
-RotateEvent.ROTATE = 'rotate';
-RotateEvent.END = 'rotate.end';
-RotateEvent = __decorate([
-    registerUIEvent()
-], RotateEvent);
-
-let SwipeEvent = class SwipeEvent extends DragEvent {
-};
-SwipeEvent.SWIPE = 'swipe';
-SwipeEvent.LEFT = 'swipe.left';
-SwipeEvent.RIGHT = 'swipe.right';
-SwipeEvent.UP = 'swipe.up';
-SwipeEvent.DOWN = 'swipe.down';
-SwipeEvent = __decorate([
-    registerUIEvent()
-], SwipeEvent);
-
-let ZoomEvent = class ZoomEvent extends PointerEvent {
-};
-ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
-ZoomEvent.START = 'zoom.start';
-ZoomEvent.ZOOM = 'zoom';
-ZoomEvent.END = 'zoom.end';
-ZoomEvent = __decorate([
-    registerUIEvent()
-], ZoomEvent);
-
-let KeyEvent = class KeyEvent extends UIEvent {
-};
-KeyEvent.DOWN = 'key.down';
-KeyEvent.HOLD = 'key.hold';
-KeyEvent.UP = 'key.up';
-KeyEvent = __decorate([
-    registerUIEvent()
-], KeyEvent);
+DropEvent.DROP = "drop";
+
+DropEvent = __decorate([ registerUIEvent() ], DropEvent);
+
+let MoveEvent = class MoveEvent extends DragEvent {};
+
+MoveEvent.BEFORE_MOVE = "move.before_move";
+
+MoveEvent.START = "move.start";
+
+MoveEvent.MOVE = "move";
+
+MoveEvent.END = "move.end";
+
+MoveEvent = __decorate([ registerUIEvent() ], MoveEvent);
+
+let RotateEvent = class RotateEvent extends PointerEvent {};
+
+RotateEvent.BEFORE_ROTATE = "rotate.before_rotate";
+
+RotateEvent.START = "rotate.start";
+
+RotateEvent.ROTATE = "rotate";
+
+RotateEvent.END = "rotate.end";
+
+RotateEvent = __decorate([ registerUIEvent() ], RotateEvent);
+
+let SwipeEvent = class SwipeEvent extends DragEvent {};
+
+SwipeEvent.SWIPE = "swipe";
+
+SwipeEvent.LEFT = "swipe.left";
+
+SwipeEvent.RIGHT = "swipe.right";
+
+SwipeEvent.UP = "swipe.up";
+
+SwipeEvent.DOWN = "swipe.down";
+
+SwipeEvent = __decorate([ registerUIEvent() ], SwipeEvent);
+
+let ZoomEvent = class ZoomEvent extends PointerEvent {};
+
+ZoomEvent.BEFORE_ZOOM = "zoom.before_zoom";
+
+ZoomEvent.START = "zoom.start";
+
+ZoomEvent.ZOOM = "zoom";
+
+ZoomEvent.END = "zoom.end";
+
+ZoomEvent = __decorate([ registerUIEvent() ], ZoomEvent);
+
+let KeyEvent = class KeyEvent extends UIEvent {};
+
+KeyEvent.BEFORE_DOWN = "key.before_down";
+
+KeyEvent.BEFORE_UP = "key.before_up";
+
+KeyEvent.DOWN = "key.down";
+
+KeyEvent.HOLD = "key.hold";
+
+KeyEvent.UP = "key.up";
+
+KeyEvent = __decorate([ registerUIEvent() ], KeyEvent);
 
 const InteractionHelper = {
     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 });
+        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
+        });
     },
     getDropEventData(event, list, data) {
-        return Object.assign(Object.assign({}, event), { list,
-            data });
+        return Object.assign(Object.assign({}, event), {
+            list: list,
+            data: data
+        });
     },
     getSwipeDirection(angle) {
-        if (angle < -45 && angle > -135)
-            return SwipeEvent.UP;
-        else if (angle > 45 && angle < 135)
-            return SwipeEvent.DOWN;
-        else if (angle <= 45 && angle >= -45)
-            return SwipeEvent.RIGHT;
-        else
-            return SwipeEvent.LEFT;
+        if (angle < -45 && angle > -135) return SwipeEvent.UP; else if (angle > 45 && angle < 135) return SwipeEvent.DOWN; else if (angle <= 45 && angle >= -45) return SwipeEvent.RIGHT; 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)) });
+        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))
+        });
     },
     getBase(e) {
         const pointerUpButtons = e.button === 1 ? 4 : e.button;
@@ -428,56 +459,56 @@ const InteractionHelper = {
             ctrlKey: e.ctrlKey,
             shiftKey: e.shiftKey,
             metaKey: e.metaKey,
-            buttons: e.buttons === undefined ? 1 : (e.buttons === 0 ? pointerUpButtons : e.buttons),
+            buttons: isUndefined(e.buttons) ? 1 : e.buttons === 0 ? pointerUpButtons : e.buttons,
             origin: e
         };
     },
     pathHasEventType(path, type) {
-        const { list } = path;
+        const {list: list} = path;
         for (let i = 0, len = list.length; i < len; i++) {
-            if (list[i].hasEvent(type))
-                return true;
+            if (list[i].hasEvent(type)) return true;
         }
         return false;
     },
     filterPathByEventType(path, type) {
-        const find = new LeafList();
-        const { list } = path;
+        const find = new LeafList;
+        const {list: list} = path;
         for (let i = 0, len = list.length; i < len; i++) {
-            if (list[i].hasEvent(type))
-                find.add(list[i]);
+            if (list[i].hasEvent(type)) find.add(list[i]);
         }
         return find;
     },
     pathCanDrag(path) {
-        return path && path.list.some(item => item.draggable || item.editable || (!item.isLeafer && item.hasEvent(DragEvent.DRAG)));
+        return path && path.list.some(item => LeafHelper.draggable(item) || !item.isLeafer && item.hasEvent(DragEvent.DRAG));
     },
     pathHasOutside(path) {
         return path && path.list.some(item => item.isOutside);
-    },
+    }
 };
+
 const I = InteractionHelper;
 
-const emptyList = new LeafList();
-const { getDragEventData, getDropEventData, getSwipeEventData } = InteractionHelper;
+const emptyList = new LeafList;
+
+const {getDragEventData: getDragEventData, getDropEventData: getDropEventData, getSwipeEventData: getSwipeEventData} = InteractionHelper;
+
 class Dragger {
     constructor(interaction) {
         this.interaction = interaction;
     }
     setDragData(data) {
-        if (this.animateWait)
-            this.dragEndReal();
+        if (this.animateWait) this.dragEndReal();
         this.downData = this.interaction.downData;
         this.dragData = getDragEventData(data, data, data);
         this.canAnimate = this.canDragOut = true;
     }
     getList(realDraggable, hover) {
-        const { proxy } = this.interaction.selector;
+        const {proxy: proxy} = this.interaction.selector;
         const hasProxyList = proxy && proxy.list.length, dragList = DragEvent.list || this.draggableList || emptyList;
-        return this.dragging && (hasProxyList ? (realDraggable ? emptyList : new LeafList(hover ? [...proxy.list, ...proxy.dragHoverExclude] : proxy.list)) : dragList);
+        return this.dragging && (hasProxyList ? realDraggable ? emptyList : new LeafList(hover ? [ ...proxy.list, ...proxy.dragHoverExclude ] : proxy.list) : dragList);
     }
     checkDrag(data, canDrag) {
-        const { interaction } = this;
+        const {interaction: interaction} = this;
         if (this.moving && data.buttons < 1) {
             this.canAnimate = false;
             interaction.pointerCancel();
@@ -485,12 +516,11 @@ class Dragger {
         }
         if (!this.moving && canDrag) {
             if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty) {
-                this.dragData.moveType = 'drag';
+                this.dragData.moveType = "drag";
                 interaction.emit(MoveEvent.START, this.dragData);
             }
         }
-        if (!this.moving)
-            this.dragStart(data, canDrag);
+        if (!this.moving) this.dragStart(data, canDrag);
         this.drag(data);
     }
     dragStart(data, canDrag) {
@@ -505,100 +535,105 @@ class Dragger {
     }
     setDragStartPoints(list) {
         this.dragStartPoints = {};
-        list.forEach(leaf => this.dragStartPoints[leaf.innerId] = { x: leaf.x, y: leaf.y });
+        list.forEach(leaf => this.dragStartPoints[leaf.innerId] = {
+            x: leaf.x,
+            y: leaf.y
+        });
     }
     getDraggableList(path) {
         let leaf;
         for (let i = 0, len = path.length; i < len; i++) {
             leaf = path.list[i];
-            if ((leaf.draggable || leaf.editable) && leaf.hitSelf && !leaf.locked) {
+            if (LeafHelper.draggable(leaf)) {
                 this.draggableList = new LeafList(leaf);
                 break;
             }
         }
     }
     drag(data) {
-        const { interaction, dragData, downData } = this;
-        const { path, throughPath } = downData;
+        const {interaction: interaction, dragData: dragData, downData: downData} = this;
+        const {path: path, throughPath: throughPath} = downData;
         this.dragData = getDragEventData(downData, dragData, data);
-        if (throughPath)
-            this.dragData.throughPath = throughPath;
+        if (throughPath) this.dragData.throughPath = throughPath;
         this.dragData.path = path;
         if (this.moving) {
-            this.dragData.moveType = 'drag';
+            this.dragData.moveType = "drag";
             interaction.emit(MoveEvent.BEFORE_MOVE, this.dragData);
             interaction.emit(MoveEvent.MOVE, this.dragData);
-        }
-        else if (this.dragging) {
+        } else if (this.dragging) {
             this.dragReal();
             interaction.emit(DragEvent.BEFORE_DRAG, this.dragData);
             interaction.emit(DragEvent.DRAG, this.dragData);
         }
     }
-    dragReal() {
-        const { running } = this.interaction;
+    dragReal(isDragEnd) {
+        const {interaction: interaction} = this, {running: running} = interaction;
         const list = this.realDraggableList;
         if (list.length && running) {
-            const { totalX, totalY } = this.dragData;
-            list.forEach(leaf => leaf.draggable && leaf.move(DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
+            const {totalX: totalX, totalY: totalY} = this.dragData, {dragLimitAnimate: dragLimitAnimate} = interaction.p;
+            const checkLimitMove = !dragLimitAnimate || !!isDragEnd;
+            list.forEach(leaf => {
+                if (leaf.draggable) {
+                    const move = DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], {
+                        x: totalX,
+                        y: totalY
+                    }, checkLimitMove);
+                    if (dragLimitAnimate && isDragEnd) LeafHelper.animateMove(leaf, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : .3); else leaf.move(move);
+                }
+            });
         }
     }
     dragOverOrOut(data) {
-        const { interaction } = this;
-        const { dragOverPath } = this;
-        const { path } = data;
+        const {interaction: interaction} = this;
+        const {dragOverPath: dragOverPath} = this;
+        const {path: path} = data;
         this.dragOverPath = path;
         if (dragOverPath) {
             if (path.indexAt(0) !== dragOverPath.indexAt(0)) {
                 interaction.emit(DragEvent.OUT, data, dragOverPath);
                 interaction.emit(DragEvent.OVER, data, path);
             }
-        }
-        else
-            interaction.emit(DragEvent.OVER, data, path);
+        } else interaction.emit(DragEvent.OVER, data, path);
     }
     dragEnterOrLeave(data) {
-        const { interaction } = this;
-        const { dragEnterPath } = this;
-        const { path } = data;
+        const {interaction: interaction} = this;
+        const {dragEnterPath: dragEnterPath} = this;
+        const {path: path} = data;
         interaction.emit(DragEvent.LEAVE, data, dragEnterPath, path);
         interaction.emit(DragEvent.ENTER, data, path, dragEnterPath);
         this.dragEnterPath = path;
     }
     dragEnd(data, speed) {
-        if (!this.dragging && !this.moving)
-            return;
-        if (this.checkDragEndAnimate(data, speed))
-            return;
+        if (!this.dragging && !this.moving) return;
+        if (this.checkDragEndAnimate(data, speed)) return;
         this.dragEndReal(data);
     }
     dragEndReal(data) {
-        const { interaction, downData, dragData } = this;
-        if (!data)
-            data = dragData;
-        const { path, throughPath } = downData;
+        const {interaction: interaction, downData: downData, dragData: dragData} = this;
+        if (!data) data = dragData;
+        const {path: path, throughPath: throughPath} = downData;
         const endDragData = getDragEventData(downData, data, data);
-        if (throughPath)
-            endDragData.throughPath = throughPath;
+        if (throughPath) endDragData.throughPath = throughPath;
         endDragData.path = path;
         if (this.moving) {
             this.moving = false;
-            endDragData.moveType = 'drag';
+            endDragData.moveType = "drag";
             interaction.emit(MoveEvent.END, endDragData);
         }
         if (this.dragging) {
             const dropList = this.getList();
             this.dragging = false;
+            if (interaction.p.dragLimitAnimate) this.dragReal(true);
             interaction.emit(DragEvent.END, endDragData);
             this.swipe(data, downData, dragData, endDragData);
             this.drop(data, dropList, this.dragEnterPath);
         }
         this.autoMoveCancel();
         this.dragReset();
-        this.animate(null, 'off');
+        this.animate(null, "off");
     }
     swipe(data, downData, dragData, endDragData) {
-        const { interaction } = this;
+        const {interaction: interaction} = this;
         if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
             const swipeData = getSwipeEventData(downData, dragData, endDragData);
             this.interaction.emit(swipeData.type, swipeData);
@@ -613,89 +648,90 @@ class Dragger {
     dragReset() {
         DragEvent.list = DragEvent.data = this.draggableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
     }
-    checkDragEndAnimate(_data, _speed) { return false; }
-    animate(_func, _off) { }
-    checkDragOut(_data) { }
-    autoMoveOnDragOut(_data) { }
-    autoMoveCancel() { }
+    checkDragEndAnimate(_data, _speed) {
+        return false;
+    }
+    animate(_func, _off) {}
+    checkDragOut(_data) {}
+    autoMoveOnDragOut(_data) {}
+    autoMoveCancel() {}
     destroy() {
         this.dragReset();
     }
 }
 
-const debug = Debug.get('emit');
+const debug = Debug.get("emit");
+
 function emit(type, data, path, excludePath) {
-    if (!path && !data.path)
-        return;
+    if (!path && !data.path) return;
     let leaf;
     data.type = type;
     if (path) {
-        data = Object.assign(Object.assign({}, data), { path });
-    }
-    else {
+        data = Object.assign(Object.assign({}, data), {
+            path: path
+        });
+    } else {
         path = data.path;
     }
     data.target = path.indexAt(0);
     try {
         for (let i = path.length - 1; i > -1; i--) {
             leaf = path.list[i];
-            if (emitEvent(leaf, type, data, true, excludePath))
-                return;
-            if (leaf.isApp)
-                emitAppChildren(leaf, type, data, true, excludePath);
+            if (emitEvent(leaf, type, data, true, excludePath)) return;
+            if (leaf.isApp) emitAppChildren(leaf, type, data, true, excludePath);
         }
         for (let i = 0, len = path.length; i < len; i++) {
             leaf = path.list[i];
-            if (leaf.isApp)
-                emitAppChildren(leaf, type, data, false, excludePath);
-            if (emitEvent(leaf, type, data, false, excludePath))
-                return;
+            if (leaf.isApp) emitAppChildren(leaf, type, data, false, excludePath);
+            if (emitEvent(leaf, type, data, false, excludePath)) return;
         }
-    }
-    catch (e) {
+    } catch (e) {
         debug.error(e);
     }
 }
-const allowTypes = ['move', 'zoom', 'rotate', 'key'];
+
+const allowTypes = [ "move", "zoom", "rotate", "key" ];
+
 function emitAppChildren(leaf, type, data, capture, excludePath) {
     if (allowTypes.some(name => type.startsWith(name)) && leaf.__.hitChildren && !exclude(leaf, excludePath)) {
         let child;
         for (let i = 0, len = leaf.children.length; i < len; i++) {
             child = leaf.children[i];
-            if (!data.path.has(child) && child.__.hittable)
-                emitEvent(child, type, data, capture, excludePath);
+            if (!data.path.has(child) && child.__.hittable) emitEvent(child, type, data, capture, excludePath);
         }
     }
 }
+
 function emitEvent(leaf, type, data, capture, excludePath) {
-    if (leaf.destroyed)
-        return false;
+    if (leaf.destroyed) return false;
     if (leaf.__.hitSelf && !exclude(leaf, excludePath)) {
-        if (State.updateEventStyle && !capture)
-            State.updateEventStyle(leaf, type);
+        if (State.updateEventStyle && !capture) State.updateEventStyle(leaf, type);
         if (leaf.hasEvent(type, capture)) {
-            data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3);
+            data.phase = capture ? 1 : leaf === data.target ? 2 : 3;
             const event = EventCreator.get(type, data);
             leaf.emitEvent(event, capture);
-            if (event.isStop)
-                return true;
+            if (event.isStop) return true;
         }
     }
     return false;
 }
+
 function exclude(leaf, excludePath) {
     return excludePath && excludePath.has(leaf);
 }
 
 const config = {
     wheel: {
-        zoomSpeed: 0.5,
-        moveSpeed: 0.5,
-        rotateSpeed: 0.5,
-        delta: { x: 80 / 4, y: 8.0 },
+        zoomSpeed: .5,
+        moveSpeed: .5,
+        rotateSpeed: .5,
+        delta: {
+            x: 80 / 4,
+            y: 8
+        }
     },
     pointer: {
-        type: 'pointer',
+        type: "pointer",
         snap: true,
         hitRadius: 5,
         tapTime: 120,
@@ -704,32 +740,59 @@ const config = {
         hover: true,
         dragHover: true,
         dragDistance: 2,
-        swipeDistance: 20,
+        swipeDistance: 20
     },
     touch: {
-        preventDefault: 'auto'
+        preventDefault: "auto"
     },
     multiTouch: {},
-    move: { autoDistance: 2 },
+    move: {
+        autoDistance: 2
+    },
     zoom: {},
     cursor: true,
     keyEvent: true
 };
 
-const { pathHasEventType, pathCanDrag, pathHasOutside } = InteractionHelper;
+const {pathHasEventType: pathHasEventType, pathCanDrag: pathCanDrag, pathHasOutside: pathHasOutside} = InteractionHelper;
+
 class InteractionBase {
-    get dragging() { return this.dragger.dragging; }
-    get transforming() { return this.transformer.transforming; }
-    get moveMode() { return this.m.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
-    get canHover() { return this.p.hover && !this.config.mobile; }
-    get isDragEmpty() { return this.m.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
-    get isMobileDragEmpty() { return this.m.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
-    get isHoldMiddleKey() { return this.m.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
-    get isHoldRightKey() { return this.m.holdRightKey && this.downData && PointerButton.right(this.downData); }
-    get isHoldSpaceKey() { return this.m.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
-    get m() { return this.config.move; }
-    get p() { return this.config.pointer; }
-    get hitRadius() { return this.p.hitRadius; }
+    get dragging() {
+        return this.dragger.dragging;
+    }
+    get transforming() {
+        return this.transformer.transforming;
+    }
+    get moveMode() {
+        return this.m.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || this.isHoldRightKey && this.dragger.moving || this.isDragEmpty;
+    }
+    get canHover() {
+        return this.p.hover && !this.config.mobile;
+    }
+    get isDragEmpty() {
+        return this.m.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData));
+    }
+    get isMobileDragEmpty() {
+        return this.m.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData);
+    }
+    get isHoldMiddleKey() {
+        return this.m.holdMiddleKey && this.downData && PointerButton.middle(this.downData);
+    }
+    get isHoldRightKey() {
+        return this.m.holdRightKey && this.downData && PointerButton.right(this.downData);
+    }
+    get isHoldSpaceKey() {
+        return this.m.holdSpaceKey && Keyboard.isHoldSpaceKey();
+    }
+    get m() {
+        return this.config.move;
+    }
+    get p() {
+        return this.config.pointer;
+    }
+    get hitRadius() {
+        return this.p.hitRadius;
+    }
     constructor(target, canvas, selector, userConfig) {
         this.config = DataHelper.clone(config);
         this.tapCount = 0;
@@ -740,8 +803,7 @@ class InteractionBase {
         this.defaultPath = new LeafList(target);
         this.createTransformer();
         this.dragger = new Dragger(this);
-        if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config);
         this.__listenEvents();
     }
     start() {
@@ -750,12 +812,10 @@ class InteractionBase {
     stop() {
         this.running = false;
     }
-    receive(_event) { }
+    receive(_event) {}
     pointerDown(data, useDefaultPath) {
-        if (!data)
-            data = this.hoverData;
-        if (!data)
-            return;
+        if (!data) data = this.hoverData;
+        if (!data) return;
         PointerButton.defaultLeft(data);
         this.updateDownData(data);
         this.checkPath(data, useDefaultPath);
@@ -768,22 +828,17 @@ class InteractionBase {
         }
         this.waitRightTap = PointerButton.right(data);
         this.dragger.setDragData(data);
-        if (!this.isHoldRightKey)
-            this.updateCursor(data);
+        if (!this.isHoldRightKey) this.updateCursor(data);
     }
     pointerMove(data) {
-        if (!data)
-            data = this.hoverData;
-        if (!data)
-            return;
-        const { downData } = this;
-        if (downData)
-            PointerButton.defaultLeft(data);
+        if (!data) data = this.hoverData;
+        if (!data) return;
+        const {downData: downData} = this;
+        if (downData) PointerButton.defaultLeft(data);
         const hit = this.canvas.bounds.hitPoint(data);
         if (hit || downData) {
             this.pointerMoveReal(data);
-            if (downData)
-                this.dragger.checkDragOut(data);
+            if (downData) this.dragger.checkDragOut(data);
         }
     }
     pointerMoveReal(data) {
@@ -809,15 +864,15 @@ class InteractionBase {
         this.updateCursor(this.downData || data);
     }
     pointerUp(data) {
-        const { downData } = this;
-        if (!data)
-            data = downData;
-        if (!downData)
-            return;
+        const {downData: downData} = this;
+        if (!data) data = downData;
+        if (!downData) return;
         PointerButton.defaultLeft(data);
         data.multiTouch = downData.multiTouch;
         this.findPath(data);
-        const upData = Object.assign(Object.assign({}, data), { path: data.path.clone() });
+        const upData = Object.assign(Object.assign({}, data), {
+            path: data.path.clone()
+        });
         data.path.addList(downData.path.list);
         this.checkPath(data);
         this.downData = null;
@@ -840,8 +895,7 @@ class InteractionBase {
         this.findPath(data);
         this.emit(PointerEvent.MENU, data);
         this.waitMenuTap = true;
-        if (!this.downData && this.waitRightTap)
-            this.menuTap(data);
+        if (!this.downData && this.waitRightTap) this.menuTap(data);
     }
     menuTap(data) {
         if (this.waitRightTap && this.waitMenuTap) {
@@ -849,17 +903,17 @@ class InteractionBase {
             this.waitRightTap = this.waitMenuTap = false;
         }
     }
-    createTransformer() { }
-    move(_data) { }
-    zoom(_data) { }
-    rotate(_data) { }
-    transformEnd() { }
-    wheel(_data) { }
-    multiTouch(_data, _list) { }
+    createTransformer() {}
+    move(_data) {}
+    zoom(_data) {}
+    rotate(_data) {}
+    transformEnd() {}
+    wheel(_data) {}
+    multiTouch(_data, _list) {}
     keyDown(data) {
-        if (!this.config.keyEvent)
-            return;
-        const { code } = data;
+        if (!this.config.keyEvent) return;
+        this.emit(KeyEvent.BEFORE_DOWN, data, this.defaultPath);
+        const {code: code} = data;
         if (!this.downKeyMap[code]) {
             this.downKeyMap[code] = true;
             Keyboard.setDownCode(code);
@@ -872,74 +926,67 @@ class InteractionBase {
         this.emit(KeyEvent.DOWN, data, this.defaultPath);
     }
     keyUp(data) {
-        if (!this.config.keyEvent)
-            return;
-        const { code } = data;
+        if (!this.config.keyEvent) return;
+        this.emit(KeyEvent.BEFORE_UP, data, this.defaultPath);
+        const {code: code} = data;
         this.downKeyMap[code] = false;
         Keyboard.setUpCode(code);
         this.emit(KeyEvent.UP, data, this.defaultPath);
-        if (this.cursor === 'grab')
-            this.updateCursor();
+        if (this.cursor === "grab") this.updateCursor();
     }
     pointerHover(data) {
         if (this.canHover && !(this.dragging && !this.p.dragHover)) {
-            data.path || (data.path = new LeafList());
+            data.path || (data.path = new LeafList);
             this.pointerOverOrOut(data);
             this.pointerEnterOrLeave(data);
         }
     }
     pointerOverOrOut(data) {
-        const { path } = data;
-        const { overPath } = this;
+        const {path: path} = data;
+        const {overPath: overPath} = this;
         this.overPath = path;
         if (overPath) {
             if (path.indexAt(0) !== overPath.indexAt(0)) {
                 this.emit(PointerEvent.OUT, data, overPath);
                 this.emit(PointerEvent.OVER, data, path);
             }
-        }
-        else {
+        } else {
             this.emit(PointerEvent.OVER, data, path);
         }
     }
     pointerEnterOrLeave(data) {
-        let { path } = data;
+        let {path: path} = data;
         if (this.downData && !this.moveMode) {
             path = path.clone();
             this.downData.path.forEach(leaf => path.add(leaf));
         }
-        const { enterPath } = this;
+        const {enterPath: enterPath} = this;
         this.enterPath = path;
         this.emit(PointerEvent.LEAVE, data, enterPath, path);
         this.emit(PointerEvent.ENTER, data, path, enterPath);
     }
     touchLeave(data) {
-        if (data.pointerType === 'touch') {
+        if (data.pointerType === "touch") {
             if (this.enterPath) {
                 this.emit(PointerEvent.LEAVE, data);
-                if (this.dragger.dragging)
-                    this.emit(DropEvent.LEAVE, data);
+                if (this.dragger.dragging) this.emit(DropEvent.LEAVE, data);
             }
         }
     }
     tap(data) {
-        const { pointer } = this.config;
+        const {pointer: pointer} = this.config;
         const hasLong = this.longTap(data);
-        if (!pointer.tapMore && hasLong)
-            return;
-        if (!this.waitTap)
-            return;
-        if (pointer.tapMore)
-            this.emitTap(data);
+        if (!pointer.tapMore && hasLong) return;
+        if (!this.waitTap) return;
+        if (pointer.tapMore) this.emitTap(data);
         const useTime = Date.now() - this.downTime;
-        const hasDouble = [PointerEvent.DOUBLE_TAP, PointerEvent.DOUBLE_CLICK].some(type => pathHasEventType(data.path, type));
+        const hasDouble = [ PointerEvent.DOUBLE_TAP, PointerEvent.DOUBLE_CLICK ].some(type => pathHasEventType(data.path, type));
         if (useTime < pointer.tapTime + 50 && hasDouble) {
             this.tapCount++;
             if (this.tapCount === 2) {
                 this.tapWaitCancel();
                 this.emitDoubleTap(data);
-            }
-            else {
+            } else {
                 clearTimeout(this.tapTimer);
                 this.tapTimer = setTimeout(() => {
                     if (!pointer.tapMore) {
@@ -948,8 +995,7 @@ class InteractionBase {
                     }
                 }, pointer.tapTime);
             }
-        }
-        else {
+        } else {
             if (!pointer.tapMore) {
                 this.tapWaitCancel();
                 this.emitTap(data);
@@ -957,13 +1003,16 @@ class InteractionBase {
         }
     }
     findPath(data, options) {
-        const { hitRadius, through } = this.p;
-        const { bottomList, target } = this;
-        if (!Platform.backgrounder && !data.origin)
-            target && target.updateLayout();
-        const find = this.selector.getByPoint(data, hitRadius, Object.assign({ bottomList, name: data.type }, (options || { through })));
-        if (find.throughPath)
-            data.throughPath = find.throughPath;
+        const {hitRadius: hitRadius, through: through} = this.p;
+        const {bottomList: bottomList, target: target} = this;
+        if (!Platform.backgrounder && !data.origin) target && target.updateLayout();
+        const find = this.selector.getByPoint(data, hitRadius, Object.assign({
+            bottomList: bottomList,
+            name: data.type
+        }, options || {
+            through: through
+        }));
+        if (find.throughPath) data.throughPath = find.throughPath;
         data.path = find.path;
         return find.path;
     }
@@ -972,16 +1021,14 @@ class InteractionBase {
     }
     isTreePath(data) {
         const app = this.target.app;
-        if (!app || !app.isApp)
-            return false;
+        if (!app || !app.isApp) return false;
         return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree) && !data.target.syncEventer);
     }
     checkPath(data, useDefaultPath) {
-        if (useDefaultPath || (this.moveMode && !pathHasOutside(data.path)))
-            data.path = this.defaultPath;
+        if (useDefaultPath || this.moveMode && !pathHasOutside(data.path)) data.path = this.defaultPath;
     }
     canMove(data) {
-        return data && (this.moveMode || (this.m.drag === 'auto' && !pathCanDrag(data.path))) && !pathHasOutside(data.path);
+        return data && (this.moveMode || this.m.drag === "auto" && !pathCanDrag(data.path)) && !pathHasOutside(data.path);
     }
     isDrag(leaf) {
         return this.dragger.getList().has(leaf);
@@ -996,53 +1043,46 @@ class InteractionBase {
         return this.focusData === leaf;
     }
     cancelHover() {
-        const { hoverData } = this;
+        const {hoverData: hoverData} = this;
         if (hoverData) {
             hoverData.path = this.defaultPath;
             this.pointerHover(hoverData);
         }
     }
     updateDownData(data, options, merge) {
-        const { downData } = this;
-        if (!data && downData)
-            data = downData;
-        if (!data)
-            return;
+        const {downData: downData} = this;
+        if (!data && downData) data = downData;
+        if (!data) return;
         this.findPath(data, options);
-        if (merge && downData)
-            data.path.addList(downData.path.list);
+        if (merge && downData) data.path.addList(downData.path.list);
         this.downData = data;
     }
     updateHoverData(data) {
-        if (!data)
-            data = this.hoverData;
-        if (!data)
-            return;
-        this.findPath(data, { exclude: this.dragger.getList(false, true), name: PointerEvent.MOVE });
+        if (!data) data = this.hoverData;
+        if (!data) return;
+        this.findPath(data, {
+            exclude: this.dragger.getList(false, true),
+            name: PointerEvent.MOVE
+        });
         this.hoverData = data;
     }
     updateCursor(data) {
-        if (!this.config.cursor || !this.canHover)
-            return;
+        if (!this.config.cursor || !this.canHover) return;
         if (!data) {
             this.updateHoverData();
             data = this.downData || this.hoverData;
         }
         if (this.dragger.moving) {
-            return this.setCursor('grabbing');
-        }
-        else if (this.canMove(data)) {
-            return this.setCursor(this.downData ? 'grabbing' : 'grab');
-        }
-        else if (!data)
-            return;
+            return this.setCursor("grabbing");
+        } else if (this.canMove(data)) {
+            return this.setCursor(this.downData ? "grabbing" : "grab");
+        } else if (!data) return;
         let leaf, cursor;
-        const { path } = data;
+        const {path: path} = data;
         for (let i = 0, len = path.length; i < len; i++) {
             leaf = path.list[i];
-            cursor = (leaf.syncEventer && leaf.syncEventer.cursor) || leaf.cursor;
-            if (cursor)
-                break;
+            cursor = leaf.syncEventer && leaf.syncEventer.cursor || leaf.cursor;
+            if (cursor) break;
         }
         this.setCursor(cursor);
     }
@@ -1051,9 +1091,14 @@ class InteractionBase {
     }
     getLocal(clientPoint, updateClient) {
         const clientBounds = this.canvas.getClientBounds(updateClient);
-        const point = { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
-        if (this.p.snap)
-            PointHelper.round(point);
+        const point = {
+            x: clientPoint.clientX - clientBounds.x,
+            y: clientPoint.clientY - clientBounds.y
+        };
+        const {bounds: bounds} = this.canvas;
+        point.x *= bounds.width / clientBounds.width;
+        point.y *= bounds.height / clientBounds.height;
+        if (this.p.snap) PointHelper.round(point);
         return point;
     }
     emitTap(data) {
@@ -1090,8 +1135,7 @@ class InteractionBase {
         let hasLong;
         if (this.longPressed) {
             this.emit(PointerEvent.LONG_TAP, data);
-            if (pathHasEventType(data.path, PointerEvent.LONG_TAP) || pathHasEventType(data.path, PointerEvent.LONG_PRESS))
-                hasLong = true;
+            if (pathHasEventType(data.path, PointerEvent.LONG_TAP) || pathHasEventType(data.path, PointerEvent.LONG_PRESS)) hasLong = true;
         }
         this.longPressWaitCancel();
         return hasLong;
@@ -1103,13 +1147,13 @@ class InteractionBase {
         }
     }
     __onResize() {
-        const { dragOut } = this.m;
+        const {dragOut: dragOut} = this.m;
         this.shrinkCanvasBounds = new Bounds(this.canvas.bounds);
-        this.shrinkCanvasBounds.spread(-(typeof dragOut === 'number' ? dragOut : 2));
+        this.shrinkCanvasBounds.spread(-(isNumber(dragOut) ? dragOut : 2));
     }
     __listenEvents() {
-        const { target } = this;
-        this.__eventIds = [target.on_(ResizeEvent.RESIZE, this.__onResize, this)];
+        const {target: target} = this;
+        this.__eventIds = [ target.on_(ResizeEvent.RESIZE, this.__onResize, this) ];
         target.once(LeaferEvent.READY, () => this.__onResize());
     }
     __removeListenEvents() {
@@ -1117,16 +1161,14 @@ class InteractionBase {
         this.__eventIds.length = 0;
     }
     emit(type, data, path, excludePath) {
-        if (this.running)
-            emit(type, data, path, excludePath);
+        if (this.running) emit(type, data, path, excludePath);
     }
     destroy() {
         if (this.__eventIds.length) {
             this.stop();
             this.__removeListenEvents();
             this.dragger.destroy();
-            if (this.transformer)
-                this.transformer.destroy();
+            if (this.transformer) this.transformer.destroy();
             this.downData = this.overPath = this.enterPath = null;
         }
     }
@@ -1140,14 +1182,15 @@ class Cursor {
         return this.custom[name];
     }
 }
+
 Cursor.custom = {};
 
 class HitCanvasManager extends CanvasManager {
     constructor() {
         super(...arguments);
-        this.maxTotal = 1000;
-        this.pathList = new LeafList();
-        this.pixelList = new LeafList();
+        this.maxTotal = 1e3;
+        this.pathList = new LeafList;
+        this.pixelList = new LeafList;
     }
     getPixelType(leaf, config) {
         this.__autoClear();
@@ -1177,8 +1220,7 @@ class HitCanvasManager extends CanvasManager {
         }
     }
     __autoClear() {
-        if (this.pathList.length + this.pixelList.length > this.maxTotal)
-            this.clear();
+        if (this.pathList.length + this.pixelList.length > this.maxTotal) this.clear();
     }
     clear() {
         this.clearPathType();
@@ -1186,13 +1228,32 @@ class HitCanvasManager extends CanvasManager {
     }
 }
 
-const { toInnerRadiusPointOf, copy, setRadius } = PointHelper;
-const inner = {};
+Platform.getSelector = function(leaf) {
+    return leaf.leafer ? leaf.leafer.selector : Platform.selector || (Platform.selector = Creator.selector());
+};
+
+const {toInnerRadiusPointOf: toInnerRadiusPointOf, copy: copy, setRadius: setRadius} = PointHelper;
+
+const {hitRadiusPoint: hitRadiusPoint, hitPoint: hitPoint} = BoundsHelper;
+
+const inner = {}, worldRadiusPoint = {};
+
 const leaf = Leaf.prototype;
-leaf.__hitWorld = function (point) {
+
+leaf.hit = function(worldPoint, hitRadius = 0) {
+    this.updateLayout();
+    copy(worldRadiusPoint, worldPoint);
+    setRadius(worldRadiusPoint, hitRadius);
+    const world = this.__world;
+    if (hitRadius ? !hitRadiusPoint(world, worldRadiusPoint) : !hitPoint(world, worldRadiusPoint)) return false;
+    return this.isBranch ? Platform.getSelector(this).hitPoint(Object.assign({}, worldRadiusPoint), hitRadius, {
+        target: this
+    }) : this.__hitWorld(worldRadiusPoint);
+};
+
+leaf.__hitWorld = function(point) {
     const data = this.__;
-    if (!data.hitSelf)
-        return false;
+    if (!data.hitSelf) return false;
     const world = this.__world, layout = this.__layout;
     const isSmall = world.width < 10 && world.height < 10;
     if (data.hitRadius) {
@@ -1201,143 +1262,158 @@ leaf.__hitWorld = function (point) {
     }
     toInnerRadiusPointOf(point, world, inner);
     if (data.hitBox || isSmall) {
-        if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
-            return true;
-        if (isSmall)
-            return false;
+        if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner)) return true;
+        if (isSmall) return false;
     }
     if (layout.hitCanvasChanged || !this.__hitCanvas) {
         this.__updateHitCanvas();
-        if (!layout.boundsChanged)
-            layout.hitCanvasChanged = false;
+        if (!layout.boundsChanged) layout.hitCanvasChanged = false;
     }
     return this.__hit(inner);
 };
-leaf.__hitFill = function (inner) { const h = this.__hitCanvas; return h && h.hitFill(inner, this.__.windingRule); };
-leaf.__hitStroke = function (inner, strokeWidth) { const h = this.__hitCanvas; return h && h.hitStroke(inner, strokeWidth); };
-leaf.__hitPixel = function (inner) { const h = this.__hitCanvas; return h && h.hitPixel(inner, this.__layout.renderBounds, h.hitScale); };
-leaf.__drawHitPath = function (canvas) { canvas && this.__drawRenderPath(canvas); };
 
-const matrix = new Matrix();
+leaf.__hitFill = function(inner) {
+    const h = this.__hitCanvas;
+    return h && h.hitFill(inner, this.__.windingRule);
+};
+
+leaf.__hitStroke = function(inner, strokeWidth) {
+    const h = this.__hitCanvas;
+    return h && h.hitStroke(inner, strokeWidth);
+};
+
+leaf.__hitPixel = function(inner) {
+    const h = this.__hitCanvas;
+    return h && h.hitPixel(inner, this.__layout.renderBounds, h.hitScale);
+};
+
+leaf.__drawHitPath = function(canvas) {
+    canvas && this.__drawRenderPath(canvas);
+};
+
+const matrix = new Matrix;
+
 const ui$1 = UI.prototype;
-ui$1.__updateHitCanvas = function () {
-    if (this.__box)
-        this.__box.__updateHitCanvas();
-    const leafer = this.leafer || (this.parent && this.parent.leafer);
-    if (!leafer)
-        return;
-    const data = this.__, { hitCanvasManager } = leafer;
-    const isHitPixelFill = (data.__isAlphaPixelFill || data.__isCanvas) && data.hitFill === 'pixel';
-    const isHitPixelStroke = data.__isAlphaPixelStroke && data.hitStroke === 'pixel';
+
+ui$1.__updateHitCanvas = function() {
+    if (this.__box) this.__box.__updateHitCanvas();
+    const leafer = this.leafer || this.parent && this.parent.leafer;
+    if (!leafer) return;
+    const data = this.__, {hitCanvasManager: hitCanvasManager} = leafer;
+    const isHitPixelFill = (data.__isAlphaPixelFill || data.__isCanvas) && data.hitFill === "pixel";
+    const isHitPixelStroke = data.__isAlphaPixelStroke && data.hitStroke === "pixel";
     const isHitPixel = isHitPixelFill || isHitPixelStroke;
-    if (!this.__hitCanvas)
-        this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this);
+    if (!this.__hitCanvas) this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, {
+        contextSettings: {
+            willReadFrequently: true
+        }
+    }) : hitCanvasManager.getPathType(this);
     const h = this.__hitCanvas;
     if (isHitPixel) {
-        const { renderBounds } = this.__layout;
+        const {renderBounds: renderBounds} = this.__layout;
         const size = Platform.image.hitCanvasSize;
         const scale = h.hitScale = tempBounds.set(0, 0, size, size).getFitMatrix(renderBounds).a;
-        const { x, y, width, height } = tempBounds.set(renderBounds).scale(scale);
-        h.resize({ width, height, pixelRatio: 1 });
+        const {x: x, y: y, width: width, height: height} = tempBounds.set(renderBounds).scale(scale);
+        h.resize({
+            width: width,
+            height: height,
+            pixelRatio: 1
+        });
         h.clear();
         ImageManager.patternLocked = true;
-        this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y), ignoreFill: !isHitPixelFill, ignoreStroke: !isHitPixelStroke });
+        this.__renderShape(h, {
+            matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y),
+            ignoreFill: !isHitPixelFill,
+            ignoreStroke: !isHitPixelStroke
+        });
         ImageManager.patternLocked = false;
         h.resetTransform();
         data.__isHitPixel = true;
-    }
-    else {
+    } else {
         data.__isHitPixel && (data.__isHitPixel = false);
     }
     this.__drawHitPath(h);
     h.setStrokeOptions(data);
 };
-ui$1.__hit = function (inner) {
-    if (this.__box && this.__box.__hit(inner))
-        return true;
+
+ui$1.__hit = function(inner) {
+    if (this.__box && this.__box.__hit(inner)) return true;
     const data = this.__;
-    if (data.__isHitPixel && this.__hitPixel(inner))
-        return true;
-    const { hitFill } = data;
-    const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__isAlphaPixelFill || data.__isCanvas)))) || hitFill === 'all';
-    if (needHitFillPath && this.__hitFill(inner))
-        return true;
-    const { hitStroke, __maxStrokeWidth: strokeWidth } = data;
-    const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__isAlphaPixelStroke))) || hitStroke === 'all';
-    if (!needHitFillPath && !needHitStrokePath)
-        return false;
+    if (data.__isHitPixel && this.__hitPixel(inner)) return true;
+    const {hitFill: hitFill} = data;
+    const needHitFillPath = (data.fill || data.__isCanvas) && (hitFill === "path" || hitFill === "pixel" && !(data.__isAlphaPixelFill || data.__isCanvas)) || hitFill === "all";
+    if (needHitFillPath && this.__hitFill(inner)) return true;
+    const {hitStroke: hitStroke, __maxStrokeWidth: strokeWidth} = data;
+    const needHitStrokePath = data.stroke && (hitStroke === "path" || hitStroke === "pixel" && !data.__isAlphaPixelStroke) || hitStroke === "all";
+    if (!needHitFillPath && !needHitStrokePath) return false;
     const radiusWidth = inner.radiusX * 2;
     let hitWidth = radiusWidth;
     if (needHitStrokePath) {
         switch (data.strokeAlign) {
-            case 'inside':
-                hitWidth += strokeWidth * 2;
-                if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
-                    return true;
+          case "inside":
+            hitWidth += strokeWidth * 2;
+            if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true;
+            hitWidth = radiusWidth;
+            break;
+
+          case "center":
+            hitWidth += strokeWidth;
+            break;
+
+          case "outside":
+            hitWidth += strokeWidth * 2;
+            if (!needHitFillPath) {
+                if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true;
                 hitWidth = radiusWidth;
-                break;
-            case 'center':
-                hitWidth += strokeWidth;
-                break;
-            case 'outside':
-                hitWidth += strokeWidth * 2;
-                if (!needHitFillPath) {
-                    if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth))
-                        return true;
-                    hitWidth = radiusWidth;
-                }
-                break;
+            }
+            break;
         }
     }
     return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
 };
 
 const ui = UI.prototype, rect = Rect.prototype, box = Box.prototype;
-rect.__updateHitCanvas = box.__updateHitCanvas = function () {
-    if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
-        ui.__updateHitCanvas.call(this);
-    else if (this.__hitCanvas)
-        this.__hitCanvas = null;
+
+rect.__updateHitCanvas = box.__updateHitCanvas = function() {
+    if (this.stroke || this.cornerRadius || (this.fill || this.__.__isCanvas) && this.hitFill === "pixel" || this.hitStroke === "all") ui.__updateHitCanvas.call(this); else if (this.__hitCanvas) this.__hitCanvas = null;
 };
-rect.__hitFill = box.__hitFill = function (inner) {
+
+rect.__hitFill = box.__hitFill = function(inner) {
     return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
 };
 
-Text.prototype.__drawHitPath = function (canvas) {
-    const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
+Text.prototype.__drawHitPath = function(canvas) {
+    const {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: data} = this.__;
     canvas.beginPath();
-    if (__letterSpacing < 0)
-        this.__drawPathByBox(canvas);
-    else
-        data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
+    if (__letterSpacing < 0) this.__drawPathByBox(canvas); else data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
 };
 
-function getSelector(ui) {
-    return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
-}
-Group.prototype.pick = function (hitPoint, options) {
+Group.prototype.pick = function(hitPoint, options) {
     options || (options = emptyData);
     this.updateLayout();
-    return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
+    return Platform.getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), {
+        target: this
+    }));
 };
 
 const canvas = LeaferCanvasBase.prototype;
-canvas.hitFill = function (point, fillRule) {
+
+canvas.hitFill = function(point, fillRule) {
     return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
 };
-canvas.hitStroke = function (point, strokeWidth) {
+
+canvas.hitStroke = function(point, strokeWidth) {
     this.strokeWidth = strokeWidth;
     return this.context.isPointInStroke(point.x, point.y);
 };
-canvas.hitPixel = function (radiusPoint, offset, scale = 1) {
-    let { x, y, radiusX, radiusY } = radiusPoint;
-    if (offset)
-        x -= offset.x, y -= offset.y;
+
+canvas.hitPixel = function(radiusPoint, offset, scale = 1) {
+    let {x: x, y: y, radiusX: radiusX, radiusY: radiusY} = radiusPoint;
+    if (offset) x -= offset.x, y -= offset.y;
     tempBounds.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-    const { data } = this.context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width || 1, tempBounds.height || 1);
+    const {data: data} = this.context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width || 1, tempBounds.height || 1);
     for (let i = 0, len = data.length; i < len; i += 4) {
-        if (data[i + 3] > 0)
-            return true;
+        if (data[i + 3] > 0) return true;
     }
     return data[3] > 0;
 };