@mdesignable/core 1.0.0-beta.64

package/esm/models/Hover.d.ts

@@ -0,0 +1,14 @@
+import { Operation } from './Operation';
+import { TreeNode } from './TreeNode';
+export interface IHoverProps {
+    operation: Operation;
+}
+export declare class Hover {
+    node: TreeNode;
+    operation: Operation;
+    constructor(props?: IHoverProps);
+    setHover(node?: TreeNode): void;
+    clear(): void;
+    trigger(): unknown;
+    makeObservable(): void;
+}

package/esm/models/Hover.js

@@ -0,0 +1,38 @@
+import { observable, define, action } from '@formily/reactive';
+import { HoverNodeEvent } from '../events';
+var Hover = /** @class */ (function () {
+    function Hover(props) {
+        this.node = null;
+        this.operation = props === null || props === void 0 ? void 0 : props.operation;
+        this.makeObservable();
+    }
+    Hover.prototype.setHover = function (node) {
+        if (node) {
+            this.node = node;
+        }
+        else {
+            this.node = null;
+        }
+        this.trigger();
+    };
+    Hover.prototype.clear = function () {
+        this.node = null;
+    };
+    Hover.prototype.trigger = function () {
+        if (this.operation) {
+            return this.operation.dispatch(new HoverNodeEvent({
+                target: this.operation.tree,
+                source: this.node,
+            }));
+        }
+    };
+    Hover.prototype.makeObservable = function () {
+        define(this, {
+            node: observable.ref,
+            setHover: action,
+            clear: action,
+        });
+    };
+    return Hover;
+}());
+export { Hover };

package/esm/models/Keyboard.d.ts

@@ -0,0 +1,29 @@
+import { KeyCode } from '@mdesignable/shared';
+import { Engine } from './Engine';
+import { Shortcut } from './Shortcut';
+import { AbstractKeyboardEvent } from '../events/keyboard/AbstractKeyboardEvent';
+import { IEngineContext } from '../types';
+export interface IKeyboard {
+    engine: Engine;
+}
+export declare class Keyboard {
+    engine: Engine;
+    shortcuts: Shortcut[];
+    sequence: KeyCode[];
+    keyDown: KeyCode;
+    modifiers: {};
+    requestTimer: any;
+    constructor(engine?: Engine);
+    matchCodes(context: IEngineContext): boolean;
+    preventCodes(): boolean;
+    includes(key: KeyCode): boolean;
+    excludes(key: KeyCode): void;
+    addKeyCode(key: KeyCode): void;
+    removeKeyCode(key: KeyCode): void;
+    isModifier(code: KeyCode): boolean;
+    handleModifiers(event: AbstractKeyboardEvent): void;
+    handleKeyboard(event: AbstractKeyboardEvent, context: IEngineContext): void;
+    isKeyDown(code: KeyCode): boolean;
+    requestClean(duration?: number): void;
+    makeObservable(): void;
+}

package/esm/models/Keyboard.js

@@ -0,0 +1,126 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { observable, define, action } from '@formily/reactive';
+import { KeyCode } from '@mdesignable/shared';
+import { Shortcut } from './Shortcut';
+var Modifiers = [
+    ['metaKey', KeyCode.Meta],
+    ['shiftKey', KeyCode.Shift],
+    ['ctrlKey', KeyCode.Control],
+    ['altKey', KeyCode.Alt],
+];
+var Keyboard = /** @class */ (function () {
+    function Keyboard(engine) {
+        var _a;
+        this.shortcuts = [];
+        this.sequence = [];
+        this.keyDown = null;
+        this.modifiers = {};
+        this.requestTimer = null;
+        this.engine = engine;
+        this.shortcuts = ((_a = engine.props) === null || _a === void 0 ? void 0 : _a.shortcuts) || [];
+        this.makeObservable();
+    }
+    Keyboard.prototype.matchCodes = function (context) {
+        for (var i = 0; i < this.shortcuts.length; i++) {
+            var shortcut = this.shortcuts[i];
+            if (shortcut.match(this.sequence, context)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    Keyboard.prototype.preventCodes = function () {
+        var _this = this;
+        return this.shortcuts.some(function (shortcut) {
+            return shortcut.preventCodes(_this.sequence);
+        });
+    };
+    Keyboard.prototype.includes = function (key) {
+        return this.sequence.some(function (code) { return Shortcut.matchCode(code, key); });
+    };
+    Keyboard.prototype.excludes = function (key) {
+        this.sequence = this.sequence.filter(function (code) { return !Shortcut.matchCode(key, code); });
+    };
+    Keyboard.prototype.addKeyCode = function (key) {
+        if (!this.includes(key)) {
+            this.sequence.push(key);
+        }
+    };
+    Keyboard.prototype.removeKeyCode = function (key) {
+        if (this.includes(key)) {
+            this.excludes(key);
+        }
+    };
+    Keyboard.prototype.isModifier = function (code) {
+        return Modifiers.some(function (modifier) { return Shortcut.matchCode(modifier[1], code); });
+    };
+    Keyboard.prototype.handleModifiers = function (event) {
+        var _this = this;
+        Modifiers.forEach(function (_a) {
+            var _b = __read(_a, 2), key = _b[0], code = _b[1];
+            if (event[key]) {
+                if (!_this.includes(code)) {
+                    _this.sequence = [code].concat(_this.sequence);
+                }
+            }
+        });
+    };
+    Keyboard.prototype.handleKeyboard = function (event, context) {
+        if (event.eventType === 'keydown') {
+            this.keyDown = event.data;
+            this.addKeyCode(this.keyDown);
+            this.handleModifiers(event);
+            if (this.matchCodes(context)) {
+                this.sequence = [];
+            }
+            this.requestClean(4000);
+            if (this.preventCodes()) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+        else {
+            if (this.isModifier(event.data)) {
+                this.sequence = [];
+            }
+            this.keyDown = null;
+        }
+    };
+    Keyboard.prototype.isKeyDown = function (code) {
+        return this.keyDown === code;
+    };
+    Keyboard.prototype.requestClean = function (duration) {
+        var _this = this;
+        if (duration === void 0) { duration = 320; }
+        clearTimeout(this.requestTimer);
+        this.requestTimer = setTimeout(function () {
+            _this.keyDown = null;
+            _this.sequence = [];
+            clearTimeout(_this.requestTimer);
+        }, duration);
+    };
+    Keyboard.prototype.makeObservable = function () {
+        define(this, {
+            sequence: observable.shallow,
+            keyDown: observable.ref,
+            handleKeyboard: action,
+        });
+    };
+    return Keyboard;
+}());
+export { Keyboard };

package/esm/models/MoveHelper.d.ts

@@ -0,0 +1,66 @@
+import { Operation } from './Operation';
+import { TreeNode } from './TreeNode';
+import { IPoint, Rect } from '@mdesignable/shared';
+import { Viewport } from './Viewport';
+export declare enum ClosestPosition {
+    Before = "BEFORE",
+    ForbidBefore = "FORBID_BEFORE",
+    After = "After",
+    ForbidAfter = "FORBID_AFTER",
+    Upper = "UPPER",
+    ForbidUpper = "FORBID_UPPER",
+    Under = "UNDER",
+    ForbidUnder = "FORBID_UNDER",
+    Inner = "INNER",
+    ForbidInner = "FORBID_INNER",
+    InnerAfter = "INNER_AFTER",
+    ForbidInnerAfter = "FORBID_INNER_AFTER",
+    InnerBefore = "INNER_BEFORE",
+    ForbidInnerBefore = "FORBID_INNER_BEFORE",
+    Forbid = "FORBID"
+}
+export interface IMoveHelperProps {
+    operation: Operation;
+}
+export interface IMoveHelperDragStartProps {
+    dragNodes: TreeNode[];
+}
+export interface IMoveHelperDragDropProps {
+    dropNode: TreeNode;
+}
+export interface IMoveHelperDragMoveProps {
+    touchNode: TreeNode;
+    point: IPoint;
+}
+export declare class MoveHelper {
+    operation: Operation;
+    rootNode: TreeNode;
+    dragNodes: TreeNode[];
+    touchNode: TreeNode;
+    closestNode: TreeNode;
+    activeViewport: Viewport;
+    viewportClosestRect: Rect;
+    outlineClosestRect: Rect;
+    viewportClosestOffsetRect: Rect;
+    outlineClosestOffsetRect: Rect;
+    viewportClosestDirection: ClosestPosition;
+    outlineClosestDirection: ClosestPosition;
+    dragging: boolean;
+    constructor(props: IMoveHelperProps);
+    get cursor(): import("./Cursor").Cursor;
+    get viewport(): Viewport;
+    get outline(): Viewport;
+    get hasDragNodes(): boolean;
+    get closestDirection(): ClosestPosition;
+    getClosestLayout(viewport: Viewport): "vertical" | "horizontal";
+    calcClosestPosition(point: IPoint, viewport: Viewport): ClosestPosition;
+    calcClosestNode(point: IPoint, viewport: Viewport): TreeNode;
+    calcClosestRect(viewport: Viewport, closestDirection: ClosestPosition): Rect;
+    calcClosestOffsetRect(viewport: Viewport, closestDirection: ClosestPosition): Rect;
+    dragStart(props: IMoveHelperDragStartProps): void;
+    dragMove(props: IMoveHelperDragMoveProps): void;
+    dragDrop(props: IMoveHelperDragDropProps): void;
+    dragEnd(): void;
+    trigger(event: any): unknown;
+    makeObservable(): void;
+}

package/esm/models/MoveHelper.js

@@ -0,0 +1,363 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { TreeNode } from './TreeNode';
+import { observable, define, action } from '@formily/reactive';
+import { calcDistanceOfPointToRect, calcDistancePointToEdge, isNearAfter, isPointInRect, } from '@mdesignable/shared';
+import { DragNodeEvent, DropNodeEvent } from '../events';
+import { CursorDragType } from './Cursor';
+export var ClosestPosition;
+(function (ClosestPosition) {
+    ClosestPosition["Before"] = "BEFORE";
+    ClosestPosition["ForbidBefore"] = "FORBID_BEFORE";
+    ClosestPosition["After"] = "After";
+    ClosestPosition["ForbidAfter"] = "FORBID_AFTER";
+    ClosestPosition["Upper"] = "UPPER";
+    ClosestPosition["ForbidUpper"] = "FORBID_UPPER";
+    ClosestPosition["Under"] = "UNDER";
+    ClosestPosition["ForbidUnder"] = "FORBID_UNDER";
+    ClosestPosition["Inner"] = "INNER";
+    ClosestPosition["ForbidInner"] = "FORBID_INNER";
+    ClosestPosition["InnerAfter"] = "INNER_AFTER";
+    ClosestPosition["ForbidInnerAfter"] = "FORBID_INNER_AFTER";
+    ClosestPosition["InnerBefore"] = "INNER_BEFORE";
+    ClosestPosition["ForbidInnerBefore"] = "FORBID_INNER_BEFORE";
+    ClosestPosition["Forbid"] = "FORBID";
+})(ClosestPosition || (ClosestPosition = {}));
+var MoveHelper = /** @class */ (function () {
+    function MoveHelper(props) {
+        this.dragNodes = [];
+        this.touchNode = null;
+        this.closestNode = null;
+        this.activeViewport = null;
+        this.viewportClosestRect = null;
+        this.outlineClosestRect = null;
+        this.viewportClosestOffsetRect = null;
+        this.outlineClosestOffsetRect = null;
+        this.viewportClosestDirection = null;
+        this.outlineClosestDirection = null;
+        this.dragging = false;
+        this.operation = props.operation;
+        this.rootNode = this.operation.tree;
+        this.makeObservable();
+    }
+    Object.defineProperty(MoveHelper.prototype, "cursor", {
+        get: function () {
+            return this.operation.engine.cursor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MoveHelper.prototype, "viewport", {
+        get: function () {
+            return this.operation.workspace.viewport;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MoveHelper.prototype, "outline", {
+        get: function () {
+            return this.operation.workspace.outline;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MoveHelper.prototype, "hasDragNodes", {
+        get: function () {
+            return this.dragNodes.length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MoveHelper.prototype, "closestDirection", {
+        get: function () {
+            if (this.activeViewport === this.outline) {
+                return this.outlineClosestDirection;
+            }
+            return this.viewportClosestDirection;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MoveHelper.prototype.getClosestLayout = function (viewport) {
+        return viewport.getValidNodeLayout(this.closestNode);
+    };
+    MoveHelper.prototype.calcClosestPosition = function (point, viewport) {
+        var _this = this;
+        var closestNode = this.closestNode;
+        if (!closestNode || !viewport.isPointInViewport(point))
+            return ClosestPosition.Forbid;
+        var closestRect = viewport.getValidNodeRect(closestNode);
+        var isInline = this.getClosestLayout(viewport) === 'horizontal';
+        if (!closestRect) {
+            return;
+        }
+        var isAfter = isNearAfter(point, closestRect, viewport.moveInsertionType === 'block' ? false : isInline);
+        var getValidParent = function (node) {
+            var _a;
+            if (!node)
+                return;
+            if ((_a = node.parent) === null || _a === void 0 ? void 0 : _a.allowSibling(_this.dragNodes))
+                return node.parent;
+            return getValidParent(node.parent);
+        };
+        if (isPointInRect(point, closestRect, viewport.moveSensitive)) {
+            if (!closestNode.allowAppend(this.dragNodes)) {
+                if (!closestNode.allowSibling(this.dragNodes)) {
+                    var parentClosestNode = getValidParent(closestNode);
+                    if (parentClosestNode) {
+                        this.closestNode = parentClosestNode;
+                    }
+                    if (isInline) {
+                        if (parentClosestNode) {
+                            if (isAfter) {
+                                return ClosestPosition.After;
+                            }
+                            return ClosestPosition.Before;
+                        }
+                        if (isAfter) {
+                            return ClosestPosition.ForbidAfter;
+                        }
+                        return ClosestPosition.ForbidBefore;
+                    }
+                    else {
+                        if (parentClosestNode) {
+                            if (isAfter) {
+                                return ClosestPosition.Under;
+                            }
+                            return ClosestPosition.Upper;
+                        }
+                        if (isAfter) {
+                            return ClosestPosition.ForbidUnder;
+                        }
+                        return ClosestPosition.ForbidUpper;
+                    }
+                }
+                else {
+                    if (isInline) {
+                        return isAfter ? ClosestPosition.After : ClosestPosition.Before;
+                    }
+                    else {
+                        return isAfter ? ClosestPosition.Under : ClosestPosition.Upper;
+                    }
+                }
+            }
+            if (closestNode.contains.apply(closestNode, __spreadArray([], __read(this.dragNodes), false))) {
+                if (isAfter) {
+                    return ClosestPosition.InnerAfter;
+                }
+                return ClosestPosition.InnerBefore;
+            }
+            else {
+                return ClosestPosition.Inner;
+            }
+        }
+        else if (closestNode === closestNode.root) {
+            return isAfter ? ClosestPosition.InnerAfter : ClosestPosition.InnerBefore;
+        }
+        else {
+            if (!closestNode.allowSibling(this.dragNodes)) {
+                var parentClosestNode = getValidParent(closestNode);
+                if (parentClosestNode) {
+                    this.closestNode = parentClosestNode;
+                }
+                if (isInline) {
+                    if (parentClosestNode) {
+                        if (isAfter) {
+                            return ClosestPosition.After;
+                        }
+                        return ClosestPosition.Before;
+                    }
+                    return isAfter
+                        ? ClosestPosition.ForbidAfter
+                        : ClosestPosition.ForbidBefore;
+                }
+                else {
+                    if (parentClosestNode) {
+                        if (isAfter) {
+                            return ClosestPosition.Under;
+                        }
+                        return ClosestPosition.Upper;
+                    }
+                    return isAfter
+                        ? ClosestPosition.ForbidUnder
+                        : ClosestPosition.ForbidUpper;
+                }
+            }
+            if (isInline) {
+                return isAfter ? ClosestPosition.After : ClosestPosition.Before;
+            }
+            else {
+                return isAfter ? ClosestPosition.Under : ClosestPosition.Upper;
+            }
+        }
+    };
+    MoveHelper.prototype.calcClosestNode = function (point, viewport) {
+        var _a, _b;
+        if (this.touchNode) {
+            var touchNodeRect = viewport.getValidNodeRect(this.touchNode);
+            if (!touchNodeRect)
+                return;
+            if ((_b = (_a = this.touchNode) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) {
+                var touchDistance = calcDistancePointToEdge(point, touchNodeRect);
+                var minDistance_1 = touchDistance;
+                var minDistanceNode_1 = this.touchNode;
+                this.touchNode.eachChildren(function (node) {
+                    var rect = viewport.getElementRectById(node.id);
+                    if (!rect)
+                        return;
+                    var distance = isPointInRect(point, rect, viewport.moveSensitive)
+                        ? 0
+                        : calcDistanceOfPointToRect(point, rect);
+                    if (distance <= minDistance_1) {
+                        minDistance_1 = distance;
+                        minDistanceNode_1 = node;
+                    }
+                });
+                return minDistanceNode_1;
+            }
+            else {
+                return this.touchNode;
+            }
+        }
+        return this.operation.tree;
+    };
+    MoveHelper.prototype.calcClosestRect = function (viewport, closestDirection) {
+        var closestNode = this.closestNode;
+        if (!closestNode || !closestDirection)
+            return;
+        var closestRect = viewport.getValidNodeRect(closestNode);
+        if (closestDirection === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.InnerBefore) {
+            return viewport.getChildrenRect(closestNode);
+        }
+        else {
+            return closestRect;
+        }
+    };
+    MoveHelper.prototype.calcClosestOffsetRect = function (viewport, closestDirection) {
+        var closestNode = this.closestNode;
+        if (!closestNode || !closestDirection)
+            return;
+        var closestRect = viewport.getValidNodeOffsetRect(closestNode);
+        if (closestDirection === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.InnerBefore) {
+            return viewport.getChildrenOffsetRect(closestNode);
+        }
+        else {
+            return closestRect;
+        }
+    };
+    MoveHelper.prototype.dragStart = function (props) {
+        var nodes = TreeNode.filterDraggable(props === null || props === void 0 ? void 0 : props.dragNodes);
+        if (nodes.length) {
+            this.dragNodes = nodes;
+            this.trigger(new DragNodeEvent({
+                target: this.operation.tree,
+                source: this.dragNodes,
+            }));
+            this.viewport.cacheElements();
+            this.cursor.setDragType(CursorDragType.Move);
+            this.dragging = true;
+        }
+    };
+    MoveHelper.prototype.dragMove = function (props) {
+        var point = props.point, touchNode = props.touchNode;
+        if (!this.dragging)
+            return;
+        if (this.outline.isPointInViewport(point, false)) {
+            this.activeViewport = this.outline;
+            this.touchNode = touchNode;
+            this.closestNode = this.calcClosestNode(point, this.outline);
+        }
+        else if (this.viewport.isPointInViewport(point, false)) {
+            this.activeViewport = this.viewport;
+            this.touchNode = touchNode;
+            this.closestNode = this.calcClosestNode(point, this.viewport);
+        }
+        if (!this.activeViewport)
+            return;
+        if (this.activeViewport === this.outline) {
+            this.outlineClosestDirection = this.calcClosestPosition(point, this.outline);
+            this.viewportClosestDirection = this.outlineClosestDirection;
+        }
+        else {
+            this.viewportClosestDirection = this.calcClosestPosition(point, this.viewport);
+            this.outlineClosestDirection = this.viewportClosestDirection;
+        }
+        if (this.outline.mounted) {
+            this.outlineClosestRect = this.calcClosestRect(this.outline, this.outlineClosestDirection);
+            this.outlineClosestOffsetRect = this.calcClosestOffsetRect(this.outline, this.outlineClosestDirection);
+        }
+        if (this.viewport.mounted) {
+            this.viewportClosestRect = this.calcClosestRect(this.viewport, this.viewportClosestDirection);
+            this.viewportClosestOffsetRect = this.calcClosestOffsetRect(this.viewport, this.viewportClosestDirection);
+        }
+    };
+    MoveHelper.prototype.dragDrop = function (props) {
+        this.trigger(new DropNodeEvent({
+            target: this.operation.tree,
+            source: props === null || props === void 0 ? void 0 : props.dropNode,
+        }));
+    };
+    MoveHelper.prototype.dragEnd = function () {
+        this.dragging = false;
+        this.dragNodes = [];
+        this.touchNode = null;
+        this.closestNode = null;
+        this.activeViewport = null;
+        this.outlineClosestDirection = null;
+        this.outlineClosestOffsetRect = null;
+        this.outlineClosestRect = null;
+        this.viewportClosestDirection = null;
+        this.viewportClosestOffsetRect = null;
+        this.viewportClosestRect = null;
+        this.viewport.clearCache();
+    };
+    MoveHelper.prototype.trigger = function (event) {
+        if (this.operation) {
+            return this.operation.dispatch(event);
+        }
+    };
+    MoveHelper.prototype.makeObservable = function () {
+        define(this, {
+            dragging: observable.ref,
+            dragNodes: observable.ref,
+            touchNode: observable.ref,
+            closestNode: observable.ref,
+            outlineClosestDirection: observable.ref,
+            outlineClosestOffsetRect: observable.ref,
+            outlineClosestRect: observable.ref,
+            viewportClosestDirection: observable.ref,
+            viewportClosestOffsetRect: observable.ref,
+            viewportClosestRect: observable.ref,
+            dragStart: action,
+            dragMove: action,
+            dragEnd: action,
+        });
+    };
+    return MoveHelper;
+}());
+export { MoveHelper };

package/esm/models/Operation.d.ts

@@ -0,0 +1,29 @@
+import { Workspace } from './Workspace';
+import { Engine } from './Engine';
+import { TreeNode, ITreeNode } from './TreeNode';
+import { Selection } from './Selection';
+import { Hover } from './Hover';
+import { TransformHelper } from './TransformHelper';
+import { MoveHelper } from './MoveHelper';
+import { ICustomEvent } from '@mdesignable/shared';
+export interface IOperation {
+    tree?: ITreeNode;
+    selected?: string[];
+}
+export declare class Operation {
+    workspace: Workspace;
+    engine: Engine;
+    tree: TreeNode;
+    selection: Selection;
+    hover: Hover;
+    transformHelper: TransformHelper;
+    moveHelper: MoveHelper;
+    requests: {
+        snapshot: any;
+    };
+    constructor(workspace: Workspace);
+    dispatch<T>(event: ICustomEvent, callback?: () => T): T;
+    snapshot(type?: string): void;
+    from(operation?: IOperation): void;
+    serialize(): IOperation;
+}