@leafer-ui/core 1.0.0-rc.2 → 1.0.0-rc.20

package/lib/core.esm.js

@@ -0,0 +1,1486 @@
+import { Leafer, State, UI, ImageManager, Rect, Group } from '@leafer-ui/draw';
+export * from '@leafer-ui/draw';
+import { registerUI, Creator, PropertyEvent, Debug, DataHelper, canvasSizeAttrs, LayoutEvent, RenderEvent, Event, EventCreator, registerUIEvent, LeafList, PointHelper, Bounds, BoundsHelper, ResizeEvent, LeaferEvent, CanvasManager, LeaferCanvasBase, tempBounds, Leaf, Matrix, Platform } 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 */
+
+
+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; }
+    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);
+            if (sky || editor)
+                this.sky = this.addLeafer(sky || { type: 'draw', usePartRender: false });
+            if (editor) {
+                this.editor = Creator.editor(editor);
+                this.sky.add(this.editor);
+            }
+        }
+    }
+    __setApp() {
+        const { canvas } = this;
+        const { realCanvas, 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();
+        this.__eventIds.push(this.on_(PropertyEvent.CHANGE, this.__onPropertyChange, this));
+    }
+    start() {
+        super.start();
+        this.children.forEach(leafer => leafer.start());
+    }
+    stop() {
+        this.children.forEach(leafer => leafer.stop());
+        super.stop();
+    }
+    unlockLayout() {
+        super.unlockLayout();
+        this.children.forEach(leafer => leafer.unlockLayout());
+    }
+    lockLayout() {
+        super.lockLayout();
+        this.children.forEach(leafer => leafer.lockLayout());
+    }
+    forceRender(bounds) {
+        this.children.forEach(leafer => leafer.forceRender(bounds));
+    }
+    addLeafer(merge) {
+        const leafer = new Leafer(merge);
+        this.add(leafer);
+        return leafer;
+    }
+    add(leafer) {
+        if (!leafer.view) {
+            if (this.realCanvas && !this.canvas.bounds) {
+                setTimeout(() => this.add(leafer), 10);
+                return;
+            }
+            leafer.init(this.__getChildConfig(leafer.userConfig), this);
+        }
+        super.add(leafer);
+        this.__listenChildEvents(leafer);
+    }
+    __onPropertyChange() {
+        if (Debug.showHitView)
+            this.children.forEach(leafer => leafer.forceUpdate('surface'));
+    }
+    __onCreated() {
+        this.created = this.children.every(child => child.created);
+    }
+    __onReady() {
+        if (this.children.every(child => child.ready))
+            super.__onReady();
+    }
+    __onViewReady() {
+        if (this.children.every(child => child.viewReady))
+            super.__onViewReady();
+    }
+    __onChildRenderEnd(e) {
+        this.renderer.addBlock(e.renderBounds);
+        if (this.viewReady)
+            this.renderer.update();
+    }
+    __render(canvas, options) {
+        canvas.setWorld(options.matrix || this.__world);
+        this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
+    }
+    __onResize(event) {
+        this.children.forEach(leafer => leafer.resize(event));
+        super.__onResize(event);
+    }
+    __checkUpdateLayout() {
+        this.children.forEach(leafer => leafer.__layout.update());
+    }
+    __getChildConfig(userConfig) {
+        let config = Object.assign({}, this.config);
+        config.hittable = config.realCanvas = undefined;
+        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());
+        leafer.once(RenderEvent.START, () => this.__onCreated());
+        leafer.once(RenderEvent.END, () => this.__onViewReady());
+        if (this.realCanvas)
+            this.__eventIds.push(leafer.on_(RenderEvent.END, this.__onChildRenderEnd, this));
+    }
+};
+App = __decorate([
+    registerUI()
+], App);
+
+const downKeyMap = {};
+const Keyboard = {
+    isHoldSpaceKey() {
+        return Keyboard.isHold('Space');
+    },
+    isHold(code) {
+        return downKeyMap[code];
+    },
+    setDownCode(code) {
+        if (!downKeyMap[code])
+            downKeyMap[code] = true;
+    },
+    setUpCode(code) {
+        downKeyMap[code] = false;
+    }
+};
+
+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; }
+};
+
+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); }
+    constructor(params) {
+        super(params.type);
+        this.bubbles = true;
+        Object.assign(this, params);
+    }
+    getPage() {
+        return this.current.getPagePoint(this);
+    }
+    getInner(relative) {
+        if (!relative)
+            relative = this.current;
+        return relative.getInnerPoint(this);
+    }
+    getLocal(relative) {
+        if (!relative)
+            relative = this.current;
+        return relative.getLocalPoint(this);
+    }
+    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);
+
+const move = {};
+let DragEvent = class DragEvent extends PointerEvent {
+    static setList(data) {
+        this.list = data instanceof LeafList ? data : new LeafList(data);
+    }
+    static setData(data) {
+        this.data = data;
+    }
+    getPageMove(total) {
+        this.assignMove(total);
+        return this.current.getPagePoint(move, null, true);
+    }
+    getInnerMove(relative, total) {
+        if (!relative)
+            relative = this.current;
+        this.assignMove(total);
+        return relative.getInnerPoint(move, null, true);
+    }
+    getLocalMove(relative, total) {
+        if (!relative)
+            relative = this.current;
+        this.assignMove(total);
+        return relative.getLocalPoint(move, null, true);
+    }
+    getPageTotal() {
+        return this.getPageMove(true);
+    }
+    getInnerTotal(relative) {
+        return this.getInnerMove(relative, true);
+    }
+    getLocalTotal(relative) {
+        return this.getLocalMove(relative, true);
+    }
+    assignMove(total) {
+        move.x = total ? this.totalX : this.moveX;
+        move.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);
+
+let DropEvent = class DropEvent extends PointerEvent {
+    static setList(data) {
+        DragEvent.setList(data);
+    }
+    static setData(data) {
+        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 UIEvent {
+};
+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 UIEvent {
+};
+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);
+
+function addInteractionWindow(leafer) {
+    if (leafer.isApp)
+        return;
+    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => {
+        const { x, y } = leafer.getValidMove(e.moveX, e.moveY);
+        if (x || y)
+            leafer.zoomLayer.move(x, y);
+    }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
+        const { zoomLayer } = leafer;
+        const changeScale = leafer.getValidScale(e.scale);
+        if (changeScale !== 1) {
+            PointHelper.scaleOf(zoomLayer, e, changeScale);
+            zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
+        }
+    }));
+}
+
+function document(leafer) {
+    addInteractionWindow(leafer);
+    leafer.config.move.scroll = 'limit';
+    leafer.config.zoom.min = 1;
+}
+
+const debug$1 = Debug.get('LeaferTypeCreator');
+const LeaferTypeCreator = {
+    list: {},
+    register(name, fn) {
+        if (list[name]) {
+            debug$1.repeat(name);
+        }
+        else {
+            list[name] = fn;
+        }
+    },
+    run(name, leafer) {
+        const fn = list[name];
+        if (fn) {
+            fn(leafer);
+        }
+        else {
+            debug$1.error('no', name);
+        }
+    }
+};
+const { list, register } = LeaferTypeCreator;
+register('draw', () => { });
+register('design', addInteractionWindow);
+register('document', document);
+
+Leafer.prototype.initType = function (type) {
+    LeaferTypeCreator.run(type, this);
+};
+Leafer.prototype.getValidMove = function (moveX, moveY) {
+    const { scroll, disabled } = this.app.config.move;
+    if (scroll) {
+        if (Math.abs(moveX) > Math.abs(moveY))
+            moveY = 0;
+        else
+            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.prototype.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 {
+    constructor(interaction) {
+        this.interaction = interaction;
+    }
+    move(data) {
+        const { interaction } = this;
+        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 });
+    },
+    getDropEventData(event, list, data) {
+        return Object.assign(Object.assign({}, event), { list,
+            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;
+        }
+    },
+    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)) });
+    },
+    getBase(e) {
+        const pointerUpButtons = e.button === 1 ? 4 : e.button;
+        return {
+            altKey: e.altKey,
+            ctrlKey: e.ctrlKey,
+            shiftKey: e.shiftKey,
+            metaKey: e.metaKey,
+            buttons: e.buttons === undefined ? 1 : (e.buttons === 0 ? pointerUpButtons : e.buttons),
+            origin: e
+        };
+    },
+    pathHasEventType(path, type) {
+        const { list } = path;
+        for (let i = 0, len = list.length; i < len; i++) {
+            if (list[i].hasEvent(type))
+                return true;
+        }
+        return false;
+    },
+    filterPathByEventType(path, type) {
+        const find = new LeafList();
+        const { list } = path;
+        for (let i = 0, len = list.length; i < len; i++) {
+            if (list[i].hasEvent(type))
+                find.add(list[i]);
+        }
+        return find;
+    }
+};
+const I = InteractionHelper;
+
+const emptyList = new LeafList();
+const { getDragEventData, getDropEventData, getSwipeEventData } = InteractionHelper;
+class Dragger {
+    constructor(interaction) {
+        this.interaction = interaction;
+    }
+    setDragData(data) {
+        if (this.animateWait)
+            this.dragEndReal();
+        this.downData = this.interaction.downData;
+        this.dragData = getDragEventData(data, data, data);
+        this.canAnimate = this.canDragOut = true;
+    }
+    getList() {
+        const { proxy } = this.interaction.selector;
+        return this.dragging && (!proxy || !proxy.list.length) ? (DragEvent.list || this.dragableList || emptyList) : emptyList;
+    }
+    checkDrag(data, canDrag) {
+        const { interaction } = this;
+        if (this.moving && data.buttons < 1) {
+            this.canAnimate = false;
+            interaction.pointerCancel();
+            return;
+        }
+        if (!this.moving && canDrag) {
+            if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey || interaction.isMobileDragEmpty)
+                interaction.emit(MoveEvent.START, this.dragData);
+        }
+        if (!this.moving) {
+            this.dragStart(data, canDrag);
+        }
+        this.drag(data);
+    }
+    dragStart(data, canDrag) {
+        if (!this.dragging) {
+            this.dragging = canDrag && PointerButton.left(data);
+            if (this.dragging) {
+                this.interaction.emit(DragEvent.START, this.dragData);
+                this.getDragableList(this.dragData.path);
+            }
+        }
+    }
+    getDragableList(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) {
+                this.dragableList = new LeafList(leaf);
+                break;
+            }
+        }
+    }
+    drag(data) {
+        const { interaction, dragData, downData } = this;
+        const { path, throughPath } = downData;
+        this.dragData = getDragEventData(downData, dragData, data);
+        if (throughPath)
+            this.dragData.throughPath = throughPath;
+        this.dragData.path = path;
+        if (this.moving) {
+            interaction.emit(MoveEvent.BEFORE_MOVE, this.dragData);
+            interaction.emit(MoveEvent.MOVE, this.dragData);
+        }
+        else if (this.dragging) {
+            this.dragReal();
+            interaction.emit(DragEvent.BEFORE_DRAG, this.dragData);
+            interaction.emit(DragEvent.DRAG, this.dragData);
+        }
+    }
+    dragReal() {
+        const { running } = this.interaction;
+        const list = this.getList();
+        if (list.length && running) {
+            const { moveX, moveY } = this.dragData;
+            list.forEach(leaf => leaf.draggable && leaf.moveWorld(moveX, moveY));
+        }
+    }
+    dragOverOrOut(data) {
+        const { interaction } = this;
+        const { dragOverPath } = this;
+        const { 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);
+        }
+    }
+    dragEnterOrLeave(data) {
+        const { interaction } = this;
+        const { dragEnterPath } = this;
+        const { 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;
+        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);
+        }
+    }
+    dragEndReal(data) {
+        const { interaction, downData, dragData } = this;
+        if (!data)
+            data = dragData;
+        const { path, throughPath } = downData;
+        const endDragData = getDragEventData(downData, data, data);
+        if (throughPath)
+            endDragData.throughPath = throughPath;
+        endDragData.path = path;
+        if (this.moving) {
+            this.moving = false;
+            interaction.emit(MoveEvent.END, endDragData);
+        }
+        if (this.dragging) {
+            const dropList = this.getList();
+            this.dragging = false;
+            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');
+    }
+    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) {
+            const swipeData = getSwipeEventData(downData, dragData, endDragData);
+            this.interaction.emit(swipeData.type, swipeData);
+        }
+    }
+    drop(data, dropList, dragEnterPath) {
+        const dropData = getDropEventData(data, dropList, DragEvent.data);
+        dropData.path = dragEnterPath;
+        this.interaction.emit(DropEvent.DROP, dropData);
+        this.interaction.emit(DragEvent.LEAVE, data, dragEnterPath);
+    }
+    dragReset() {
+        DragEvent.list = DragEvent.data = this.dragableList = 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 }));
+            interaction.pointerMoveReal(data);
+        }, 10);
+    }
+    autoMoveCancel() {
+        if (this.autoMoveTimer) {
+            clearInterval(this.autoMoveTimer);
+            this.autoMoveTimer = 0;
+        }
+    }
+    destroy() {
+        this.dragReset();
+    }
+}
+
+const debug = Debug.get('emit');
+function emit(type, data, path, excludePath) {
+    if (!path && !data.path)
+        return;
+    let leaf;
+    data.type = type;
+    if (path) {
+        data = Object.assign(Object.assign({}, data), { 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);
+        }
+        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;
+        }
+    }
+    catch (e) {
+        debug.error(e);
+    }
+}
+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);
+        }
+    }
+}
+function emitEvent(leaf, type, data, capture, excludePath) {
+    if (leaf.destroyed)
+        return true;
+    if (leaf.__.hitSelf && !exclude(leaf, excludePath)) {
+        if (State.updateEventStyle)
+            State.updateEventStyle(leaf, type);
+        if (leaf.hasEvent(type, capture)) {
+            data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3);
+            const event = EventCreator.get(type, data);
+            leaf.emitEvent(event, capture);
+            if (event.isStop)
+                return true;
+        }
+    }
+    return false;
+}
+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,
+        tapTime: 120,
+        longPressTime: 800,
+        transformTime: 500,
+        hover: true,
+        dragHover: true,
+        dragDistance: 2,
+        swipeDistance: 20,
+        preventDefaultMenu: true
+    },
+    cursor: {}
+};
+
+const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
+class InteractionBase {
+    get dragging() { return this.dragger.dragging; }
+    get moveMode() { return this.config.move.drag || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+    get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
+    get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.config.pointer.hover && this.downData && this.isTreePath(this.downData); }
+    get isHoldMiddleKey() { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
+    get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
+    get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
+    get hitRadius() { return this.config.pointer.hitRadius; }
+    constructor(target, canvas, selector, userConfig) {
+        this.config = config;
+        this.tapCount = 0;
+        this.downKeyMap = {};
+        this.target = target;
+        this.canvas = canvas;
+        this.selector = selector;
+        this.defaultPath = new LeafList(target);
+        this.transformer = new Transformer(this);
+        this.dragger = new Dragger(this);
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.__listenEvents();
+    }
+    start() {
+        this.running = true;
+    }
+    stop() {
+        this.running = false;
+    }
+    receive(_event) { }
+    pointerDown(data, useDefaultPath) {
+        if (!data)
+            data = this.hoverData;
+        if (!data)
+            return;
+        PointerButton.defaultLeft(data);
+        this.updateDownData(data);
+        this.checkPath(data, useDefaultPath);
+        this.downTime = Date.now();
+        this.emit(PointerEvent.BEFORE_DOWN, data);
+        this.emit(PointerEvent.DOWN, data);
+        if (PointerButton.left(data)) {
+            this.tapWait();
+            this.longPressWait(data);
+        }
+        else if (PointerButton.right(data)) {
+            this.waitMenuTap = true;
+        }
+        this.dragger.setDragData(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);
+        const hit = this.canvas.bounds.hitPoint(data);
+        if (hit || downData) {
+            this.pointerMoveReal(data);
+            if (downData)
+                this.dragger.checkDragOut(data);
+        }
+    }
+    pointerMoveReal(data) {
+        const { dragHover, dragDistance } = this.config.pointer;
+        this.emit(PointerEvent.BEFORE_MOVE, data, this.defaultPath);
+        if (this.downData) {
+            const canDrag = PointHelper.getDistance(this.downData, data) > dragDistance;
+            if (canDrag) {
+                if (this.waitTap)
+                    this.pointerWaitCancel();
+                this.waitMenuTap = false;
+            }
+            this.dragger.checkDrag(data, canDrag);
+        }
+        if (!this.dragger.moving) {
+            this.updateHoverData(data);
+            this.checkPath(data);
+            this.emit(PointerEvent.MOVE, data);
+            if (!(this.dragging && !dragHover))
+                this.pointerHover(data);
+            if (this.dragger.dragging) {
+                this.dragger.dragOverOrOut(data);
+                this.dragger.dragEnterOrLeave(data);
+            }
+        }
+        this.updateCursor(this.downData || data);
+    }
+    pointerUp(data) {
+        const { downData } = this;
+        if (!data)
+            data = downData;
+        if (!downData)
+            return;
+        PointerButton.defaultLeft(data);
+        this.findPath(data);
+        const upData = Object.assign(Object.assign({}, data), { path: data.path.clone() });
+        data.path.addList(downData.path.list);
+        this.checkPath(data);
+        this.downData = null;
+        this.emit(PointerEvent.BEFORE_UP, data);
+        this.emit(PointerEvent.UP, data);
+        this.touchLeave(data);
+        if (!data.isCancel) {
+            this.tap(data);
+            this.menuTap(data);
+        }
+        this.dragger.dragEnd(data);
+        this.updateCursor(upData);
+    }
+    pointerCancel() {
+        const data = Object.assign({}, this.dragger.dragData);
+        data.isCancel = true;
+        this.pointerUp(data);
+    }
+    multiTouch(data, list) {
+        const { move, angle, scale, center } = MultiTouchHelper.getData(list);
+        this.rotate(getRotateEventData(center, angle, data));
+        this.zoom(getZoomEventData(center, scale, data));
+        this.move(getMoveEventData(center, move, data));
+    }
+    menu(data) {
+        this.findPath(data);
+        this.emit(PointerEvent.MENU, data);
+    }
+    menuTap(data) {
+        if (this.waitMenuTap)
+            this.emit(PointerEvent.MENU_TAP, data);
+    }
+    move(data) {
+        this.transformer.move(data);
+    }
+    zoom(data) {
+        this.transformer.zoom(data);
+    }
+    rotate(data) {
+        this.transformer.rotate(data);
+    }
+    transformEnd() {
+        this.transformer.transformEnd();
+    }
+    keyDown(data) {
+        const { code } = data;
+        if (!this.downKeyMap[code]) {
+            this.downKeyMap[code] = true;
+            Keyboard.setDownCode(code);
+            this.emit(KeyEvent.HOLD, data, this.defaultPath);
+            if (this.moveMode) {
+                this.cancelHover();
+                this.updateCursor();
+            }
+        }
+        this.emit(KeyEvent.DOWN, data, this.defaultPath);
+    }
+    keyUp(data) {
+        const { code } = data;
+        this.downKeyMap[code] = false;
+        Keyboard.setUpCode(code);
+        this.emit(KeyEvent.UP, data, this.defaultPath);
+        if (this.cursor === 'grab')
+            this.updateCursor();
+    }
+    pointerHover(data) {
+        if (this.config.pointer.hover) {
+            this.pointerOverOrOut(data);
+            this.pointerEnterOrLeave(data);
+        }
+    }
+    pointerOverOrOut(data) {
+        const { path } = data;
+        const { 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 {
+            this.emit(PointerEvent.OVER, data, path);
+        }
+    }
+    pointerEnterOrLeave(data) {
+        let { path } = data;
+        if (this.downData && !this.moveMode) {
+            path = path.clone();
+            this.downData.path.forEach(leaf => path.add(leaf));
+        }
+        const { 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 (this.enterPath) {
+                this.emit(PointerEvent.LEAVE, data);
+                if (this.dragger.dragging)
+                    this.emit(DropEvent.LEAVE, data);
+            }
+        }
+    }
+    tap(data) {
+        const { pointer } = this.config;
+        const longTap = this.longTap(data);
+        if (!pointer.tapMore && longTap)
+            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));
+        if (useTime < pointer.tapTime + 50 && hasDouble) {
+            this.tapCount++;
+            if (this.tapCount === 2) {
+                this.tapWaitCancel();
+                this.emitDoubleTap(data);
+            }
+            else {
+                clearTimeout(this.tapTimer);
+                this.tapTimer = setTimeout(() => {
+                    if (!pointer.tapMore) {
+                        this.tapWaitCancel();
+                        this.emitTap(data);
+                    }
+                }, pointer.tapTime);
+            }
+        }
+        else {
+            if (!pointer.tapMore) {
+                this.tapWaitCancel();
+                this.emitTap(data);
+            }
+        }
+    }
+    findPath(data, options) {
+        const { hitRadius, through } = this.config.pointer;
+        const find = this.selector.getByPoint(data, hitRadius, options || { through });
+        if (find.throughPath)
+            data.throughPath = find.throughPath;
+        data.path = find.path;
+        return find.path;
+    }
+    isRootPath(data) {
+        return data && data.path.list[0].isLeafer;
+    }
+    isTreePath(data) {
+        const app = this.target.app;
+        if (!app || !app.isApp)
+            return false;
+        return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree));
+    }
+    checkPath(data, useDefaultPath) {
+        if (useDefaultPath || this.canMove(data))
+            data.path = this.defaultPath;
+    }
+    canMove(data) {
+        return this.moveMode && data && data.path.list.every(item => !item.isOutside);
+    }
+    isDrag(leaf) {
+        return this.dragger.getList().has(leaf);
+    }
+    isPress(leaf) {
+        return this.downData && this.downData.path.has(leaf);
+    }
+    isHover(leaf) {
+        return this.enterPath && this.enterPath.has(leaf);
+    }
+    isFocus(leaf) {
+        return this.focusData === leaf;
+    }
+    cancelHover() {
+        const { 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;
+        this.findPath(data, options);
+        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(), name: PointerEvent.MOVE });
+        this.hoverData = data;
+    }
+    updateCursor(data) {
+        if (this.config.cursor.stop || !this.config.pointer.hover)
+            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;
+        let leaf, cursor;
+        const { path } = data;
+        for (let i = 0, len = path.length; i < len; i++) {
+            leaf = path.list[i];
+            cursor = leaf.cursor;
+            if (cursor)
+                break;
+        }
+        this.setCursor(cursor);
+    }
+    setCursor(cursor) {
+        this.cursor = cursor;
+    }
+    emitTap(data) {
+        this.emit(PointerEvent.TAP, data);
+        this.emit(PointerEvent.CLICK, data);
+    }
+    emitDoubleTap(data) {
+        this.emit(PointerEvent.DOUBLE_TAP, data);
+        this.emit(PointerEvent.DOUBLE_CLICK, data);
+    }
+    pointerWaitCancel() {
+        this.tapWaitCancel();
+        this.longPressWaitCancel();
+    }
+    tapWait() {
+        clearTimeout(this.tapTimer);
+        this.waitTap = true;
+    }
+    tapWaitCancel() {
+        clearTimeout(this.tapTimer);
+        this.waitTap = false;
+        this.tapCount = 0;
+    }
+    longPressWait(data) {
+        clearTimeout(this.longPressTimer);
+        this.longPressTimer = setTimeout(() => {
+            this.longPressed = true;
+            this.emit(PointerEvent.LONG_PRESS, data);
+        }, this.config.pointer.longPressTime);
+    }
+    longTap(data) {
+        let longTap;
+        if (this.longPressed) {
+            this.emit(PointerEvent.LONG_TAP, data);
+            if (pathHasEventType(data.path, PointerEvent.LONG_TAP))
+                longTap = true;
+        }
+        this.longPressWaitCancel();
+        return longTap;
+    }
+    longPressWaitCancel() {
+        clearTimeout(this.longPressTimer);
+        this.longPressed = false;
+    }
+    __onResize() {
+        this.shrinkCanvasBounds = new Bounds(this.canvas.bounds);
+        this.shrinkCanvasBounds.spread(-2);
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [target.on_(ResizeEvent.RESIZE, this.__onResize, this)];
+        target.once(LeaferEvent.READY, () => this.__onResize());
+    }
+    __removeListenEvents() {
+        this.target.off_(this.__eventIds);
+        this.__eventIds.length = 0;
+    }
+    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();
+            this.transformer.destroy();
+            this.downData = this.overPath = this.enterPath = null;
+        }
+    }
+}
+
+class Cursor {
+    static set(name, value) {
+        this.custom[name] = value;
+    }
+    static get(name) {
+        return this.custom[name];
+    }
+}
+Cursor.custom = {};
+
+class HitCanvasManager extends CanvasManager {
+    constructor() {
+        super(...arguments);
+        this.maxTotal = 1000;
+        this.pathList = new LeafList();
+        this.pixelList = new LeafList();
+    }
+    getPixelType(leaf, config) {
+        this.__autoClear();
+        this.pixelList.add(leaf);
+        return Creator.hitCanvas(config);
+    }
+    getPathType(leaf) {
+        this.__autoClear();
+        this.pathList.add(leaf);
+        return Creator.hitCanvas();
+    }
+    clearImageType() {
+        this.__clearLeafList(this.pixelList);
+    }
+    clearPathType() {
+        this.__clearLeafList(this.pathList);
+    }
+    __clearLeafList(leafList) {
+        if (leafList.length) {
+            leafList.forEach(leaf => {
+                if (leaf.__hitCanvas) {
+                    leaf.__hitCanvas.destroy();
+                    leaf.__hitCanvas = null;
+                }
+            });
+            leafList.reset();
+        }
+    }
+    __autoClear() {
+        if (this.pathList.length + this.pixelList.length > this.maxTotal)
+            this.clear();
+    }
+    clear() {
+        this.clearPathType();
+        this.clearImageType();
+    }
+}
+
+const canvas = LeaferCanvasBase.prototype;
+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) {
+    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;
+    tempBounds.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+    const { data } = this.context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height);
+    for (let i = 0, len = data.length; i < len; i += 4) {
+        if (data[i + 3] > 0)
+            return true;
+    }
+    return data[3] > 0;
+};
+
+const { toInnerRadiusPointOf, copy, setRadius } = PointHelper;
+const inner = {};
+const leaf = Leaf.prototype;
+leaf.__hitWorld = function (point) {
+    if (this.__.hitRadius) {
+        copy(inner, point), point = inner;
+        setRadius(point, this.__.hitRadius);
+    }
+    toInnerRadiusPointOf(point, this.__world, inner);
+    const { width, height } = this.__world;
+    const isSmall = width < 10 && height < 10;
+    if (this.__.hitBox || isSmall) {
+        if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner))
+            return true;
+        if (isSmall)
+            return false;
+    }
+    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
+        this.__updateHitCanvas();
+        if (!this.__layout.boundsChanged)
+            this.__layout.hitCanvasChanged = false;
+    }
+    return this.__hit(inner);
+};
+leaf.__hitFill = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitFill(inner, this.__.windingRule); };
+leaf.__hitStroke = function (inner, strokeWidth) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitStroke(inner, strokeWidth); };
+leaf.__hitPixel = function (inner) { var _a; return (_a = this.__hitCanvas) === null || _a === void 0 ? void 0 : _a.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale); };
+leaf.__drawHitPath = function (canvas) { if (canvas)
+    this.__drawRenderPath(canvas); };
+
+const matrix = new Matrix();
+const ui$1 = UI.prototype;
+ui$1.__updateHitCanvas = function () {
+    const data = this.__, { hitCanvasManager } = this.leafer;
+    const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel';
+    const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
+    const isHitPixel = isHitPixelFill || isHitPixelStroke;
+    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 size = Platform.image.hitCanvasSize;
+        const scale = h.hitScale = tempBounds.set(0, 0, size, size).getFitMatrix(renderBounds, 0.5).a;
+        const { x, y, width, height } = tempBounds.set(renderBounds).scale(scale);
+        h.resize({ width, height, pixelRatio: 1 });
+        h.clear();
+        ImageManager.patternLocked = true;
+        this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+        ImageManager.patternLocked = false;
+        h.resetTransform();
+        data.__isHitPixel = true;
+    }
+    else {
+        data.__isHitPixel && (data.__isHitPixel = false);
+    }
+    this.__drawHitPath(h);
+    h.setStrokeOptions(data);
+};
+ui$1.__hit = function (inner) {
+    if (Platform.name === 'miniapp')
+        this.__drawHitPath(this.__hitCanvas);
+    const data = this.__;
+    if (data.__isHitPixel && this.__hitPixel(inner))
+        return true;
+    const { hitFill } = data;
+    const needHitFillPath = ((data.fill && hitFill == 'path') || hitFill === 'all');
+    if (needHitFillPath && this.__hitFill(inner))
+        return true;
+    const { hitStroke, __strokeWidth } = data;
+    const needHitStrokePath = ((data.stroke && hitStroke == 'path') || 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;
+                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;
+        }
+    }
+    return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
+};
+
+const ui = new UI();
+Rect.prototype.__updateHitCanvas = function () {
+    if (this.stroke || this.cornerRadius)
+        ui.__updateHitCanvas.call(this);
+};
+Rect.prototype.__hitFill = function (inner) {
+    return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+};
+
+UI.prototype.find = function (condition, options) {
+    return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
+};
+UI.prototype.findOne = function (condition, options) {
+    return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
+};
+Group.prototype.pick = function (hitPoint, options) {
+    this.__layout.update();
+    if (!options)
+        options = {};
+    return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
+};
+
+export { App, Cursor, DragEvent, DropEvent, HitCanvasManager, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LeaferTypeCreator, MoveEvent, MultiTouchHelper, PointerButton, PointerEvent, RotateEvent, SwipeEvent, UIEvent, ZoomEvent };