@leafer-ui/core 1.0.0-beta.8 → 1.0.0-rc.10

package/lib/core.cjs

@@ -0,0 +1,1343 @@
+'use strict';
+
+var draw$1 = require('@leafer-ui/draw');
+var core = require('@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;
+};
+
+exports.App = class App extends draw$1.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 = core.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_(core.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 draw$1.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 (core.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) {
+        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)
+            core.DataHelper.assign(config, userConfig);
+        if (this.autoLayout)
+            core.DataHelper.copyAttrs(config, this, core.canvasSizeAttrs);
+        config.view = this.realCanvas ? undefined : this.view;
+        config.fill = undefined;
+        return config;
+    }
+    __listenChildEvents(leafer) {
+        leafer.once(core.LayoutEvent.END, () => this.__onReady());
+        leafer.once(core.RenderEvent.START, () => this.__onCreated());
+        leafer.once(core.RenderEvent.END, () => this.__onViewReady());
+        if (this.realCanvas)
+            this.__eventIds.push(leafer.on_(core.RenderEvent.END, this.__onChildRenderEnd, this));
+    }
+};
+exports.App = __decorate([
+    core.registerUI()
+], exports.App);
+
+function draw(leafer) {
+    const { config } = leafer;
+    config.move.dragOut = false;
+}
+
+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 core.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) {
+        core.EventCreator.changeName(oldName, newName);
+    }
+}
+
+exports.PointerEvent = class PointerEvent extends UIEvent {
+};
+exports.PointerEvent.POINTER = 'pointer';
+exports.PointerEvent.BEFORE_DOWN = 'pointer.before_down';
+exports.PointerEvent.BEFORE_MOVE = 'pointer.before_move';
+exports.PointerEvent.BEFORE_UP = 'pointer.before_up';
+exports.PointerEvent.DOWN = 'pointer.down';
+exports.PointerEvent.MOVE = 'pointer.move';
+exports.PointerEvent.UP = 'pointer.up';
+exports.PointerEvent.OVER = 'pointer.over';
+exports.PointerEvent.OUT = 'pointer.out';
+exports.PointerEvent.ENTER = 'pointer.enter';
+exports.PointerEvent.LEAVE = 'pointer.leave';
+exports.PointerEvent.TAP = 'tap';
+exports.PointerEvent.DOUBLE_TAP = 'double_tap';
+exports.PointerEvent.CLICK = 'click';
+exports.PointerEvent.DOUBLE_CLICK = 'double_click';
+exports.PointerEvent.LONG_PRESS = 'long_press';
+exports.PointerEvent.LONG_TAP = 'long_tap';
+exports.PointerEvent.MENU = 'pointer.menu';
+exports.PointerEvent.MENU_TAP = 'pointer.menu_tap';
+exports.PointerEvent = __decorate([
+    core.registerUIEvent()
+], exports.PointerEvent);
+
+const move = {};
+exports.DragEvent = class DragEvent extends exports.PointerEvent {
+    static setList(data) {
+        this.list = data instanceof core.LeafList ? data : new core.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;
+    }
+};
+exports.DragEvent.BEFORE_DRAG = 'drag.before_drag';
+exports.DragEvent.START = 'drag.start';
+exports.DragEvent.DRAG = 'drag';
+exports.DragEvent.END = 'drag.end';
+exports.DragEvent.OVER = 'drag.over';
+exports.DragEvent.OUT = 'drag.out';
+exports.DragEvent.ENTER = 'drag.enter';
+exports.DragEvent.LEAVE = 'drag.leave';
+exports.DragEvent = __decorate([
+    core.registerUIEvent()
+], exports.DragEvent);
+
+exports.DropEvent = class DropEvent extends exports.PointerEvent {
+    static setList(data) {
+        exports.DragEvent.setList(data);
+    }
+    static setData(data) {
+        exports.DragEvent.setData(data);
+    }
+};
+exports.DropEvent.DROP = 'drop';
+exports.DropEvent = __decorate([
+    core.registerUIEvent()
+], exports.DropEvent);
+
+exports.MoveEvent = class MoveEvent extends exports.DragEvent {
+};
+exports.MoveEvent.BEFORE_MOVE = 'move.before_move';
+exports.MoveEvent.START = 'move.start';
+exports.MoveEvent.MOVE = 'move';
+exports.MoveEvent.END = 'move.end';
+exports.MoveEvent = __decorate([
+    core.registerUIEvent()
+], exports.MoveEvent);
+
+exports.RotateEvent = class RotateEvent extends UIEvent {
+};
+exports.RotateEvent.BEFORE_ROTATE = 'rotate.before_rotate';
+exports.RotateEvent.START = 'rotate.start';
+exports.RotateEvent.ROTATE = 'rotate';
+exports.RotateEvent.END = 'rotate.end';
+exports.RotateEvent = __decorate([
+    core.registerUIEvent()
+], exports.RotateEvent);
+
+exports.SwipeEvent = class SwipeEvent extends exports.DragEvent {
+};
+exports.SwipeEvent.SWIPE = 'swipe';
+exports.SwipeEvent.LEFT = 'swipe.left';
+exports.SwipeEvent.RIGHT = 'swipe.right';
+exports.SwipeEvent.UP = 'swipe.up';
+exports.SwipeEvent.DOWN = 'swipe.down';
+exports.SwipeEvent = __decorate([
+    core.registerUIEvent()
+], exports.SwipeEvent);
+
+exports.ZoomEvent = class ZoomEvent extends UIEvent {
+};
+exports.ZoomEvent.BEFORE_ZOOM = 'zoom.before_zoom';
+exports.ZoomEvent.START = 'zoom.start';
+exports.ZoomEvent.ZOOM = 'zoom';
+exports.ZoomEvent.END = 'zoom.end';
+exports.ZoomEvent = __decorate([
+    core.registerUIEvent()
+], exports.ZoomEvent);
+
+exports.KeyEvent = class KeyEvent extends UIEvent {
+};
+exports.KeyEvent.DOWN = 'key.down';
+exports.KeyEvent.HOLD = 'key.hold';
+exports.KeyEvent.UP = 'key.up';
+exports.KeyEvent = __decorate([
+    core.registerUIEvent()
+], exports.KeyEvent);
+
+function design(leafer) {
+    if (leafer.isApp)
+        return;
+    leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => leafer.zoomLayer.move(e.moveX, e.moveY)), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
+        const { zoomLayer } = leafer;
+        const { scaleX } = zoomLayer.__, { min, max } = leafer.app.config.zoom;
+        let { scale } = e, absScale = Math.abs(scaleX * scale);
+        if (absScale < min)
+            scale = min / scaleX;
+        else if (absScale > max)
+            scale = max / scaleX;
+        if (scale !== 1) {
+            core.PointHelper.scaleOf(zoomLayer, e, scale);
+            zoomLayer.scale = scaleX * scale;
+        }
+    }));
+}
+
+const debug$1 = core.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', draw);
+register('design', design);
+
+draw$1.Leafer.prototype.initType = function (type) {
+    LeaferTypeCreator.run(type, this);
+};
+
+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.emit(exports.MoveEvent.START, this.moveData);
+        }
+        data.path = this.moveData.path;
+        interaction.emit(exports.MoveEvent.BEFORE_MOVE, data);
+        interaction.emit(exports.MoveEvent.MOVE, data);
+        this.transformEndWait();
+    }
+    zoom(data) {
+        const { interaction } = this;
+        if (!this.zoomData) {
+            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
+            data.path = path;
+            this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
+            interaction.emit(exports.ZoomEvent.START, this.zoomData);
+        }
+        data.path = this.zoomData.path;
+        interaction.emit(exports.ZoomEvent.BEFORE_ZOOM, data);
+        interaction.emit(exports.ZoomEvent.ZOOM, data);
+        this.transformEndWait();
+    }
+    rotate(data) {
+        const { interaction } = this;
+        if (!this.rotateData) {
+            const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
+            data.path = path;
+            this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
+            interaction.emit(exports.RotateEvent.START, this.rotateData);
+        }
+        data.path = this.rotateData.path;
+        interaction.emit(exports.RotateEvent.BEFORE_ROTATE, data);
+        interaction.emit(exports.RotateEvent.ROTATE, data);
+        this.transformEndWait();
+    }
+    transformEndWait() {
+        clearTimeout(this.transformTimer);
+        this.transformTimer = setTimeout(() => {
+            this.transformEnd();
+        }, this.interaction.config.pointer.transformTime);
+    }
+    transformEnd() {
+        this.moveEnd();
+        this.zoomEnd();
+        this.rotateEnd();
+    }
+    moveEnd() {
+        if (this.moveData) {
+            this.interaction.emit(exports.MoveEvent.END, this.moveData);
+            this.moveData = null;
+        }
+    }
+    zoomEnd() {
+        if (this.zoomData) {
+            this.interaction.emit(exports.ZoomEvent.END, this.zoomData);
+            this.zoomData = null;
+        }
+    }
+    rotateEnd() {
+        if (this.rotateData) {
+            this.interaction.emit(exports.RotateEvent.END, this.rotateData);
+            this.rotateData = null;
+        }
+    }
+    destroy() {
+        this.zoomData = this.moveData = this.rotateData = null;
+    }
+}
+
+const InteractionHelper = {
+    getMoveEventData(center, move, event) {
+        return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, moveX: move.x, moveY: move.y });
+    },
+    getRotateEventData(center, angle, event) {
+        return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, rotation: angle });
+    },
+    getZoomEventData(center, scale, event) {
+        return Object.assign(Object.assign({}, event), { x: center.x, y: center.y, scale });
+    },
+    getDragEventData(startPoint, lastPoint, event) {
+        return Object.assign(Object.assign({}, event), { x: event.x, y: event.y, moveX: event.x - lastPoint.x, moveY: event.y - lastPoint.y, totalX: event.x - startPoint.x, totalY: event.y - startPoint.y });
+    },
+    getDropEventData(event, list, data) {
+        return Object.assign(Object.assign({}, event), { list,
+            data });
+    },
+    getSwipeDirection(angle) {
+        if (angle < -45 && angle > -135) {
+            return exports.SwipeEvent.UP;
+        }
+        else if (angle > 45 && angle < 135) {
+            return exports.SwipeEvent.DOWN;
+        }
+        else if (angle <= 45 && angle >= -45) {
+            return exports.SwipeEvent.RIGHT;
+        }
+        else {
+            return exports.SwipeEvent.LEFT;
+        }
+    },
+    getSwipeEventData(startPoint, lastDragData, event) {
+        return Object.assign(Object.assign({}, event), { moveX: lastDragData.moveX, moveY: lastDragData.moveY, totalX: event.x - startPoint.x, totalY: event.y - startPoint.y, type: I.getSwipeDirection(core.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 core.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 core.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);
+    }
+    getList() {
+        const { proxy } = this.interaction.selector;
+        return this.dragging && (!proxy || !proxy.list.length) ? (exports.DragEvent.list || this.dragableList || emptyList) : emptyList;
+    }
+    checkDrag(data, canDrag) {
+        const { interaction } = this;
+        if (this.moving && data.buttons < 1) {
+            this.canAnimate = false;
+            interaction.pointerCancel();
+            return;
+        }
+        else {
+            this.canAnimate = true;
+        }
+        if (!this.moving && canDrag) {
+            if (this.moving = interaction.moveMode || interaction.isHoldRightKey)
+                interaction.emit(exports.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(exports.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 core.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(exports.MoveEvent.BEFORE_MOVE, this.dragData);
+            interaction.emit(exports.MoveEvent.MOVE, this.dragData);
+        }
+        else if (this.dragging) {
+            this.dragReal();
+            interaction.emit(exports.DragEvent.BEFORE_DRAG, this.dragData);
+            interaction.emit(exports.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 => core.LeafHelper.moveWorld(leaf, moveX, moveY));
+        }
+    }
+    dragOverOrOut(data) {
+        const { interaction } = this;
+        const { dragOverPath } = this;
+        const { path } = data;
+        if (dragOverPath) {
+            if (path.indexAt(0) !== dragOverPath.indexAt(0)) {
+                interaction.emit(exports.DragEvent.OUT, data, dragOverPath);
+                interaction.emit(exports.DragEvent.OVER, data, path);
+            }
+        }
+        else {
+            interaction.emit(exports.DragEvent.OVER, data, path);
+        }
+        this.dragOverPath = path;
+    }
+    dragEnterOrLeave(data) {
+        const { interaction } = this;
+        const { dragEnterPath } = this;
+        const { path } = data;
+        interaction.emit(exports.DragEvent.LEAVE, data, dragEnterPath, path);
+        interaction.emit(exports.DragEvent.ENTER, data, path, dragEnterPath);
+        this.dragEnterPath = path;
+    }
+    dragEnd(data, speed) {
+        if (!this.dragData)
+            return;
+        const { moveX, moveY } = this.dragData;
+        if (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;
+            core.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)
+            interaction.emit(exports.MoveEvent.END, endDragData);
+        if (this.dragging) {
+            interaction.emit(exports.DragEvent.END, endDragData);
+            this.swipe(data, endDragData);
+            this.drop(data);
+        }
+        this.autoMoveCancel();
+        this.dragReset();
+        this.animate(null, 'off');
+    }
+    animate(func, off) {
+        const animateWait = func || this.animateWait;
+        if (animateWait)
+            this.interaction.target.nextRender(animateWait, off);
+        this.animateWait = func;
+    }
+    swipe(data, endDragData) {
+        const { interaction } = this;
+        const { downData } = interaction;
+        if (core.PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
+            const swipeData = getSwipeEventData(downData, this.dragData, endDragData);
+            this.interaction.emit(swipeData.type, swipeData);
+        }
+    }
+    drop(data) {
+        const dropData = getDropEventData(data, this.getList(), exports.DragEvent.data);
+        dropData.path = this.dragEnterPath;
+        this.interaction.emit(exports.DropEvent.DROP, dropData);
+        this.interaction.emit(exports.DragEvent.LEAVE, data, this.dragEnterPath);
+    }
+    dragReset() {
+        exports.DragEvent.list = exports.DragEvent.data = this.dragableList = this.dragData = this.downData = this.dragOverPath = this.dragEnterPath = null;
+        this.dragging = this.moving = false;
+    }
+    checkDragOut(data) {
+        const { interaction } = this;
+        this.autoMoveCancel();
+        if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data))
+            this.autoMoveOnDragOut(data);
+    }
+    autoMoveOnDragOut(data) {
+        const { interaction, downData } = this;
+        const { autoDistance, dragOut } = interaction.config.move;
+        if (!dragOut || !autoDistance)
+            return;
+        const bounds = interaction.shrinkCanvasBounds;
+        const { x, y } = bounds;
+        const right = core.BoundsHelper.maxX(bounds);
+        const bottom = core.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;
+            core.PointHelper.move(downData, moveX, moveY);
+            core.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 = core.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 && leaf.hasEvent(type, capture) && !exclude(leaf, excludePath)) {
+        data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3);
+        const event = core.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 = core.PointHelper.getCenter(a.from, b.from);
+        const center = core.PointHelper.getCenter(a.to, b.to);
+        const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y };
+        const lastDistance = core.PointHelper.getDistance(a.from, b.from);
+        const distance = core.PointHelper.getDistance(a.to, b.to);
+        const scale = distance / lastDistance;
+        const angle = core.PointHelper.getRotation(a.from, b.from, a.to, b.to);
+        return { move, scale, angle, center };
+    }
+};
+
+const config = {
+    wheel: {
+        zoomMode: false,
+        zoomSpeed: 0.5,
+        moveSpeed: 0.5,
+        rotateSpeed: 0.5,
+        delta: { x: 80 / 4, y: 8.0 },
+        preventDefault: true
+    },
+    pointer: {
+        hitRadius: 5,
+        through: false,
+        tapTime: 120,
+        longPressTime: 800,
+        transformTime: 500,
+        dragHover: true,
+        dragDistance: 2,
+        swipeDistance: 20,
+        ignoreMove: false,
+        preventDefaultMenu: true
+    },
+    cursor: {}
+};
+
+const { pathHasEventType, getMoveEventData, getZoomEventData, getRotateEventData } = InteractionHelper;
+class InteractionBase {
+    get dragging() { return this.dragger.dragging; }
+    get isDragEmpty() { return this.config.move.dragEmpty && (this.hoverData && this.hoverData.path.list[0].isLeafer) && (!this.downData || this.downData.path.list[0].isLeafer); }
+    get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
+    get moveMode() { return this.config.move.drag || (this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey()) || (this.downData && ((this.config.move.holdMiddleKey && PointerButton.middle(this.downData)) || (this.isHoldRightKey && this.dragger.moving))) || this.isDragEmpty; }
+    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 core.LeafList(target);
+        this.transformer = new Transformer(this);
+        this.dragger = new Dragger(this);
+        if (userConfig)
+            this.config = core.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);
+        if (useDefaultPath)
+            data.path = this.defaultPath;
+        this.emit(exports.PointerEvent.BEFORE_DOWN, data);
+        this.emit(exports.PointerEvent.DOWN, data);
+        this.downTime = Date.now();
+        this.dragger.setDragData(data);
+        if (PointerButton.left(data)) {
+            this.tapWait();
+            this.longPressWait(data);
+        }
+        else if (PointerButton.right(data)) {
+            this.waitMenuTap = true;
+        }
+        this.updateCursor(data);
+    }
+    pointerMove(data) {
+        if (!data)
+            data = this.hoverData;
+        if (!data)
+            return;
+        if (this.downData)
+            PointerButton.defaultLeft(data);
+        const hit = this.canvas.bounds.hitPoint(data);
+        if (hit || this.downData) {
+            if (hit && !this.downData && PointerButton.left(data))
+                this.pointerDown(data, true);
+            this.pointerMoveReal(data);
+            this.dragger.checkDragOut(data);
+        }
+    }
+    pointerMoveReal(data) {
+        this.emit(exports.PointerEvent.BEFORE_MOVE, data, this.defaultPath);
+        if (this.downData) {
+            const canDrag = core.PointHelper.getDistance(this.downData, data) > this.config.pointer.dragDistance;
+            if (canDrag) {
+                if (this.waitTap)
+                    this.pointerWaitCancel();
+                this.waitMenuTap = false;
+            }
+            this.dragger.checkDrag(data, canDrag);
+        }
+        if (!this.dragger.moving) {
+            this.updateHoverData(data);
+            this.emit(exports.PointerEvent.MOVE, data);
+            this.pointerOverOrOut(data);
+            this.pointerEnterOrLeave(data);
+            if (this.dragger.dragging) {
+                this.dragger.dragOverOrOut(data);
+                this.dragger.dragEnterOrLeave(data);
+            }
+        }
+        this.updateCursor(this.downData || data);
+    }
+    pointerUp(data) {
+        if (!data)
+            data = this.downData;
+        if (!this.downData)
+            return;
+        PointerButton.defaultLeft(data);
+        this.findPath(data);
+        this.emit(exports.PointerEvent.BEFORE_UP, data);
+        this.emit(exports.PointerEvent.UP, data);
+        if (this.oldDownData)
+            this.emit(exports.PointerEvent.UP, this.oldDownData, undefined, data.path);
+        this.emit(exports.PointerEvent.UP, this.downData, undefined, data.path);
+        this.touchLeave(data);
+        this.tap(data);
+        this.menuTap(data);
+        this.dragger.dragEnd(data);
+        this.downData = this.oldDownData = null;
+        this.updateCursor(data);
+    }
+    pointerCancel() {
+        this.pointerUp(this.dragger.dragData);
+    }
+    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(exports.PointerEvent.MENU, data);
+    }
+    menuTap(data) {
+        if (this.waitMenuTap)
+            this.emit(exports.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(exports.KeyEvent.HOLD, data, this.defaultPath);
+            if (this.moveMode)
+                this.updateCursor();
+        }
+        this.emit(exports.KeyEvent.DOWN, data, this.defaultPath);
+    }
+    keyUp(data) {
+        const { code } = data;
+        this.downKeyMap[code] = false;
+        Keyboard.setUpCode(code);
+        this.emit(exports.KeyEvent.UP, data, this.defaultPath);
+        if (this.cursor === 'grab')
+            this.updateCursor();
+    }
+    pointerOverOrOut(data) {
+        if (this.dragger.moving)
+            return;
+        if (this.dragging && !this.config.pointer.dragHover)
+            return;
+        const { path } = data;
+        if (this.overPath) {
+            if (path.indexAt(0) !== this.overPath.indexAt(0)) {
+                this.emit(exports.PointerEvent.OUT, data, this.overPath);
+                this.emit(exports.PointerEvent.OVER, data, path);
+            }
+        }
+        else {
+            this.emit(exports.PointerEvent.OVER, data, path);
+        }
+        this.overPath = path;
+    }
+    pointerEnterOrLeave(data) {
+        if (this.dragger.moving)
+            return;
+        if (this.dragging && !this.config.pointer.dragHover)
+            return;
+        const { path } = data;
+        this.emit(exports.PointerEvent.LEAVE, data, this.enterPath, path);
+        this.emit(exports.PointerEvent.ENTER, data, path, this.enterPath);
+        this.enterPath = path;
+    }
+    touchLeave(data) {
+        if (data.pointerType === 'touch') {
+            if (this.enterPath) {
+                this.emit(exports.PointerEvent.LEAVE, data);
+                if (this.dragger.dragging)
+                    this.emit(exports.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 = [exports.PointerEvent.DOUBLE_TAP, exports.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;
+    }
+    isDrag(leaf) {
+        return this.dragger.getList().has(leaf);
+    }
+    updateDownData(data, options) {
+        const { downData } = this;
+        if (!data && downData)
+            data = Object.assign({}, downData);
+        if (!data)
+            return;
+        this.oldDownData = downData;
+        this.findPath(data, options);
+        this.downData = data;
+    }
+    updateHoverData(data) {
+        if (!data)
+            data = this.hoverData;
+        if (!data)
+            return;
+        this.findPath(data, { exclude: this.dragger.getList(), name: exports.PointerEvent.MOVE });
+        this.hoverData = data;
+    }
+    updateCursor(data) {
+        if (this.config.cursor.stop)
+            return;
+        if (!data) {
+            this.updateHoverData();
+            data = this.downData || this.hoverData;
+        }
+        if (this.dragger.moving) {
+            return this.setCursor('grabbing');
+        }
+        else if (this.moveMode) {
+            return this.setCursor(this.downData ? 'grabbing' : 'grab');
+        }
+        else if (!data)
+            return;
+        let leaf;
+        let 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(exports.PointerEvent.TAP, data);
+        this.emit(exports.PointerEvent.CLICK, data);
+    }
+    emitDoubleTap(data) {
+        this.emit(exports.PointerEvent.DOUBLE_TAP, data);
+        this.emit(exports.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(exports.PointerEvent.LONG_PRESS, data);
+        }, this.config.pointer.longPressTime);
+    }
+    longTap(data) {
+        let longTap;
+        if (this.longPressed) {
+            this.emit(exports.PointerEvent.LONG_TAP, data);
+            if (pathHasEventType(data.path, exports.PointerEvent.LONG_TAP))
+                longTap = true;
+        }
+        this.longPressWaitCancel();
+        return longTap;
+    }
+    longPressWaitCancel() {
+        clearTimeout(this.longPressTimer);
+        this.longPressed = false;
+    }
+    __onResize() {
+        this.shrinkCanvasBounds = new core.Bounds(this.canvas.bounds);
+        this.shrinkCanvasBounds.spread(-2);
+    }
+    __listenEvents() {
+        const { target } = this;
+        this.__eventIds = [target.on_(core.ResizeEvent.RESIZE, this.__onResize, this)];
+        target.once(core.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 core.CanvasManager {
+    constructor() {
+        super(...arguments);
+        this.pathTypeList = new core.LeafList();
+        this.imageTypeList = new core.LeafList();
+    }
+    getImageType(leaf, size) {
+        this.imageTypeList.add(leaf);
+        return core.Creator.hitCanvas(size);
+    }
+    getPathType(leaf) {
+        this.pathTypeList.add(leaf);
+        return core.Creator.hitCanvas();
+    }
+    clearImageType() {
+        this.__clearLeafList(this.imageTypeList);
+    }
+    clearPathType() {
+        this.__clearLeafList(this.pathTypeList);
+    }
+    __clearLeafList(leafList) {
+        if (leafList.length) {
+            leafList.forEach(leaf => {
+                if (leaf.__hitCanvas) {
+                    leaf.__hitCanvas.destroy();
+                    leaf.__hitCanvas = null;
+                }
+            });
+            leafList.reset();
+        }
+    }
+    clear() {
+        this.clearPathType();
+        this.clearImageType();
+    }
+}
+
+const { toInnerRadiusPointOf, copy, setRadius } = draw$1.PointHelper;
+const inner = {};
+draw$1.Leaf.prototype.__hitWorld = function (point) {
+    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
+        this.__updateHitCanvas();
+        this.__layout.hitCanvasChanged = false;
+    }
+    if (this.__.hitRadius) {
+        copy(inner, point), point = inner;
+        setRadius(point, this.__.hitRadius);
+    }
+    toInnerRadiusPointOf(point, this.__world, inner);
+    if (this.__.hitBox) {
+        if (draw$1.BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner))
+            return true;
+    }
+    return this.__hit(inner);
+};
+
+draw$1.UI.prototype.__updateHitCanvas = function () {
+    if (!this.__hitCanvas)
+        this.__hitCanvas = this.leafer.hitCanvasManager.getPathType(this);
+    const h = this.__hitCanvas;
+    this.__drawHitPath(h);
+    h.setStrokeOptions(this.__);
+};
+draw$1.UI.prototype.__hit = function (inner) {
+    if (draw$1.Platform.name === 'miniapp')
+        this.__drawHitPath(this.__hitCanvas);
+    const { fill, hitFill, windingRule } = this.__;
+    const needHitFill = (fill && hitFill === 'path') || hitFill === 'all';
+    const isHitFill = this.__hitFill(inner, windingRule);
+    if (needHitFill && isHitFill)
+        return true;
+    const { stroke, hitStroke, __strokeWidth, strokeAlign } = this.__;
+    const needHitStroke = (stroke && hitStroke === 'path') || hitStroke === 'all';
+    const radiusWidth = inner.radiusX * 2;
+    let hitWidth = radiusWidth;
+    if (needHitStroke) {
+        switch (strokeAlign) {
+            case 'inside':
+                hitWidth += __strokeWidth * 2;
+                if (!needHitFill && (isHitFill && this.__hitStroke(inner, hitWidth)))
+                    return true;
+                hitWidth = radiusWidth;
+                break;
+            case 'center':
+                hitWidth += __strokeWidth;
+                break;
+            case 'outside':
+                hitWidth += __strokeWidth * 2;
+                if (!needHitFill) {
+                    if (!isHitFill && this.__hitStroke(inner, hitWidth))
+                        return true;
+                    hitWidth = radiusWidth;
+                }
+                break;
+        }
+    }
+    return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
+};
+
+const ui = new draw$1.UI();
+draw$1.Rect.prototype.__updateHitCanvas = function () {
+    if (this.stroke || this.cornerRadius)
+        ui.__updateHitCanvas.call(this);
+};
+draw$1.Rect.prototype.__hitFill = function (inner, windingRule) {
+    return this.__hitCanvas ? ui.__hitFill.call(this, inner, windingRule) : draw$1.BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+};
+
+draw$1.UI.prototype.find = function (condition, options) {
+    return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
+};
+draw$1.UI.prototype.findOne = function (condition, options) {
+    return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
+};
+draw$1.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;
+};
+
+exports.Cursor = Cursor;
+exports.HitCanvasManager = HitCanvasManager;
+exports.InteractionBase = InteractionBase;
+exports.InteractionHelper = InteractionHelper;
+exports.Keyboard = Keyboard;
+exports.LeaferTypeCreator = LeaferTypeCreator;
+exports.MultiTouchHelper = MultiTouchHelper;
+exports.PointerButton = PointerButton;
+exports.UIEvent = UIEvent;
+Object.keys(draw$1).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return draw$1[k]; }
+    });
+});