@mdesignable/core 1.0.0-beta.64

package/esm/models/Operation.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { TreeNode } from './TreeNode';
+import { Selection } from './Selection';
+import { Hover } from './Hover';
+import { TransformHelper } from './TransformHelper';
+import { MoveHelper } from './MoveHelper';
+import { cancelIdle, isFn, requestIdle, } from '@mdesignable/shared';
+var Operation = /** @class */ (function () {
+    function Operation(workspace) {
+        this.requests = {
+            snapshot: null,
+        };
+        this.engine = workspace.engine;
+        this.workspace = workspace;
+        this.tree = new TreeNode(__assign(__assign({ componentName: this.engine.props.rootComponentName }, this.engine.props.defaultComponentTree), { operation: this }));
+        this.hover = new Hover({
+            operation: this,
+        });
+        this.selection = new Selection({
+            operation: this,
+        });
+        this.moveHelper = new MoveHelper({
+            operation: this,
+        });
+        this.transformHelper = new TransformHelper({
+            operation: this,
+        });
+        this.selection.select(this.tree);
+    }
+    Operation.prototype.dispatch = function (event, callback) {
+        if (this.workspace.dispatch(event) === false)
+            return;
+        if (isFn(callback))
+            return callback();
+    };
+    Operation.prototype.snapshot = function (type) {
+        var _this = this;
+        cancelIdle(this.requests.snapshot);
+        if (!this.workspace ||
+            !this.workspace.history ||
+            this.workspace.history.locking)
+            return;
+        this.requests.snapshot = requestIdle(function () {
+            _this.workspace.history.push(type);
+        });
+    };
+    Operation.prototype.from = function (operation) {
+        if (!operation)
+            return;
+        if (operation.tree) {
+            this.tree.from(operation.tree);
+        }
+        if (operation.selected) {
+            this.selection.selected = operation.selected;
+        }
+    };
+    Operation.prototype.serialize = function () {
+        return {
+            tree: this.tree.serialize(),
+            selected: [this.tree.id],
+        };
+    };
+    return Operation;
+}());
+export { Operation };

package/esm/models/Screen.d.ts

@@ -0,0 +1,31 @@
+import { Engine } from './Engine';
+export declare enum ScreenType {
+    PC = "PC",
+    Responsive = "Responsive",
+    Mobile = "Mobile",
+    Sketch = "Sketch"
+}
+export declare enum ScreenStatus {
+    Normal = "Normal",
+    Resizing = "Resizing",
+    Zooming = "Zooming"
+}
+export declare class Screen {
+    type: ScreenType;
+    scale: number;
+    width: number | string;
+    height: number | string;
+    engine: Engine;
+    background: string;
+    flip: boolean;
+    status: ScreenStatus;
+    constructor(engine: Engine);
+    makeObservable(): void;
+    setStatus(status: ScreenStatus): void;
+    setType(type: ScreenType): void;
+    setScale(scale: number): void;
+    setSize(width?: number | string, height?: number | string): void;
+    resetSize(): void;
+    setBackground(background: string): void;
+    setFlip(flip: boolean): void;
+}

package/esm/models/Screen.js

@@ -0,0 +1,73 @@
+import { action, define, observable } from '@formily/reactive';
+export var ScreenType;
+(function (ScreenType) {
+    ScreenType["PC"] = "PC";
+    ScreenType["Responsive"] = "Responsive";
+    ScreenType["Mobile"] = "Mobile";
+    ScreenType["Sketch"] = "Sketch";
+})(ScreenType || (ScreenType = {}));
+export var ScreenStatus;
+(function (ScreenStatus) {
+    ScreenStatus["Normal"] = "Normal";
+    ScreenStatus["Resizing"] = "Resizing";
+    ScreenStatus["Zooming"] = "Zooming";
+})(ScreenStatus || (ScreenStatus = {}));
+var Screen = /** @class */ (function () {
+    function Screen(engine) {
+        this.scale = 1;
+        this.width = '100%';
+        this.height = '100%';
+        this.background = '';
+        this.flip = false;
+        this.status = ScreenStatus.Normal;
+        this.engine = engine;
+        this.type = engine.props.defaultScreenType;
+        this.makeObservable();
+    }
+    Screen.prototype.makeObservable = function () {
+        define(this, {
+            type: observable.ref,
+            scale: observable.ref,
+            width: observable.ref,
+            height: observable.ref,
+            status: observable.ref,
+            flip: observable.ref,
+            background: observable.ref,
+            setType: action,
+            setScale: action,
+            setSize: action,
+            resetSize: action,
+            setBackground: action,
+            setFlip: action,
+        });
+    };
+    Screen.prototype.setStatus = function (status) {
+        this.status = status;
+    };
+    Screen.prototype.setType = function (type) {
+        this.type = type;
+    };
+    Screen.prototype.setScale = function (scale) {
+        this.scale = scale;
+    };
+    Screen.prototype.setSize = function (width, height) {
+        if (width) {
+            this.width = width;
+        }
+        if (height) {
+            this.height = height;
+        }
+    };
+    Screen.prototype.resetSize = function () {
+        this.width = '100%';
+        this.height = '100%';
+    };
+    Screen.prototype.setBackground = function (background) {
+        this.background = background;
+    };
+    Screen.prototype.setFlip = function (flip) {
+        this.flip = flip;
+    };
+    return Screen;
+}());
+export { Screen };

package/esm/models/Selection.d.ts

@@ -0,0 +1,29 @@
+import { Operation } from './Operation';
+import { SelectNodeEvent } from '../events';
+import { TreeNode } from './TreeNode';
+export interface ISelection {
+    selected?: string[];
+    operation?: Operation;
+}
+export declare class Selection {
+    operation: Operation;
+    selected: string[];
+    indexes: Record<string, boolean>;
+    constructor(props?: ISelection);
+    makeObservable(): void;
+    trigger(type?: typeof SelectNodeEvent): unknown;
+    select(id: string | TreeNode): void;
+    safeSelect(id: string | TreeNode): void;
+    mapIds(ids: any): any[];
+    batchSelect(ids: string[] | TreeNode[]): void;
+    batchSafeSelect(ids: string[] | TreeNode[]): void;
+    get selectedNodes(): TreeNode[];
+    get first(): string;
+    get last(): string;
+    get length(): number;
+    add(...ids: string[] | TreeNode[]): void;
+    crossAddTo(node: TreeNode): void;
+    remove(...ids: string[] | TreeNode[]): void;
+    has(...ids: string[] | TreeNode[]): any;
+    clear(): void;
+}

package/esm/models/Selection.js

@@ -0,0 +1,192 @@
+import { observable, define, action } from '@formily/reactive';
+import { SelectNodeEvent, UnSelectNodeEvent } from '../events';
+import { isStr, isArr } from '@mdesignable/shared';
+var Selection = /** @class */ (function () {
+    function Selection(props) {
+        this.selected = [];
+        this.indexes = {};
+        if (props.selected) {
+            this.selected = props.selected;
+        }
+        if (props.operation) {
+            this.operation = props.operation;
+        }
+        this.makeObservable();
+    }
+    Selection.prototype.makeObservable = function () {
+        define(this, {
+            selected: observable,
+            select: action,
+            batchSelect: action,
+            add: action,
+            remove: action,
+            clear: action,
+            crossAddTo: action,
+        });
+    };
+    Selection.prototype.trigger = function (type) {
+        if (type === void 0) { type = SelectNodeEvent; }
+        return this.operation.dispatch(new type({
+            target: this.operation.tree,
+            source: this.selectedNodes,
+        }));
+    };
+    Selection.prototype.select = function (id) {
+        var _a;
+        if (isStr(id)) {
+            if (this.selected.length === 1 && this.selected.includes(id)) {
+                this.trigger(SelectNodeEvent);
+                return;
+            }
+            this.selected = [id];
+            this.indexes = (_a = {}, _a[id] = true, _a);
+            this.trigger(SelectNodeEvent);
+        }
+        else {
+            this.select(id === null || id === void 0 ? void 0 : id.id);
+        }
+    };
+    Selection.prototype.safeSelect = function (id) {
+        if (!id)
+            return;
+        this.select(id);
+    };
+    Selection.prototype.mapIds = function (ids) {
+        return isArr(ids)
+            ? ids.map(function (node) { return (isStr(node) ? node : node === null || node === void 0 ? void 0 : node.id); })
+            : [];
+    };
+    Selection.prototype.batchSelect = function (ids) {
+        this.selected = this.mapIds(ids);
+        this.indexes = this.selected.reduce(function (buf, id) {
+            buf[id] = true;
+            return buf;
+        }, {});
+        this.trigger(SelectNodeEvent);
+    };
+    Selection.prototype.batchSafeSelect = function (ids) {
+        if (!(ids === null || ids === void 0 ? void 0 : ids.length))
+            return;
+        this.batchSelect(ids);
+    };
+    Object.defineProperty(Selection.prototype, "selectedNodes", {
+        get: function () {
+            var _this = this;
+            return this.selected.map(function (id) { return _this.operation.tree.findById(id); });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Selection.prototype, "first", {
+        get: function () {
+            if (this.selected && this.selected.length)
+                return this.selected[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Selection.prototype, "last", {
+        get: function () {
+            if (this.selected && this.selected.length)
+                return this.selected[this.selected.length - 1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Selection.prototype, "length", {
+        get: function () {
+            return this.selected.length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Selection.prototype.add = function () {
+        var _this = this;
+        var ids = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            ids[_i] = arguments[_i];
+        }
+        this.mapIds(ids).forEach(function (id) {
+            if (isStr(id)) {
+                if (!_this.selected.includes(id)) {
+                    _this.selected.push(id);
+                    _this.indexes[id] = true;
+                }
+            }
+            else {
+                _this.add(id === null || id === void 0 ? void 0 : id.id);
+            }
+        });
+        this.trigger();
+    };
+    Selection.prototype.crossAddTo = function (node) {
+        var _this = this;
+        if (node.parent) {
+            var selectedNodes = this.selectedNodes;
+            if (this.has(node)) {
+                this.remove(node);
+            }
+            else {
+                var minDistanceNode = selectedNodes.reduce(function (minDistanceNode, item) {
+                    return item.distanceTo(node) < minDistanceNode.distanceTo(node)
+                        ? item
+                        : minDistanceNode;
+                }, selectedNodes[0]);
+                if (minDistanceNode) {
+                    var crossNodes = node.crossSiblings(minDistanceNode);
+                    crossNodes.forEach(function (node) {
+                        if (!_this.has(node.id)) {
+                            _this.selected.push(node.id);
+                            _this.indexes[node.id] = true;
+                        }
+                    });
+                }
+                if (!this.has(node.id)) {
+                    this.selected.push(node.id);
+                    this.indexes[node.id] = true;
+                }
+            }
+        }
+    };
+    Selection.prototype.remove = function () {
+        var _this = this;
+        var ids = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            ids[_i] = arguments[_i];
+        }
+        this.mapIds(ids).forEach(function (id) {
+            if (isStr(id)) {
+                _this.selected = _this.selected.filter(function (item) { return item !== id; });
+                delete _this.indexes[id];
+            }
+            else {
+                _this.remove(id === null || id === void 0 ? void 0 : id.id);
+            }
+        });
+        this.trigger(UnSelectNodeEvent);
+    };
+    Selection.prototype.has = function () {
+        var _this = this;
+        var ids = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            ids[_i] = arguments[_i];
+        }
+        return this.mapIds(ids).some(function (id) {
+            if (isStr(id)) {
+                return _this.indexes[id];
+            }
+            else {
+                if (!(id === null || id === void 0 ? void 0 : id.id))
+                    return false;
+                return _this.has(id === null || id === void 0 ? void 0 : id.id);
+            }
+        });
+    };
+    Selection.prototype.clear = function () {
+        this.selected = [];
+        this.indexes = {};
+        this.trigger(UnSelectNodeEvent);
+    };
+    return Selection;
+}());
+export { Selection };

package/esm/models/Shortcut.d.ts

@@ -0,0 +1,20 @@
+import { KeyCode } from '@mdesignable/shared';
+import { IEngineContext } from '../types';
+export { KeyCode };
+export interface IShortcutProps {
+    codes?: KeyCode[] | KeyCode[][];
+    matcher?: (codes: KeyCode[]) => boolean;
+    handler?: (context: IEngineContext) => void;
+}
+export declare class Shortcut {
+    codes: KeyCode[][];
+    handler: (context: IEngineContext) => void;
+    matcher: (codes: KeyCode[]) => boolean;
+    constructor(props: IShortcutProps);
+    parseCodes(codes: Array<KeyCode | KeyCode[]>): KeyCode[][];
+    preventCodes(codes: KeyCode[]): boolean;
+    matched(matched: boolean, context: IEngineContext): boolean;
+    match(codes: KeyCode[], context: IEngineContext): boolean;
+    static matchCode: (code1: KeyCode, code2: KeyCode) => boolean;
+    static sortCodes: (codes: KeyCode[]) => KeyCode[];
+}

package/esm/models/Shortcut.js

@@ -0,0 +1,69 @@
+import { isFn, KeyCode } from '@mdesignable/shared';
+export { KeyCode };
+var Shortcut = /** @class */ (function () {
+    function Shortcut(props) {
+        this.codes = this.parseCodes(props.codes);
+        this.handler = props.handler;
+        this.matcher = props.matcher;
+    }
+    Shortcut.prototype.parseCodes = function (codes) {
+        var results = [];
+        codes.forEach(function (code) {
+            if (Array.isArray(code)) {
+                results.push(code);
+            }
+            else {
+                results.push([code]);
+            }
+        });
+        return results;
+    };
+    Shortcut.prototype.preventCodes = function (codes) {
+        var _a;
+        if (this.codes.length) {
+            for (var i = 0; i < codes.length; i++) {
+                var sequence = (_a = this.codes[i]) !== null && _a !== void 0 ? _a : [];
+                for (var j = 0; j < sequence.length; j++) {
+                    if (!Shortcut.matchCode(codes[j], sequence[j])) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        return false;
+    };
+    Shortcut.prototype.matched = function (matched, context) {
+        if (isFn(this.handler) && matched) {
+            this.handler(context);
+        }
+        return matched;
+    };
+    Shortcut.prototype.match = function (codes, context) {
+        var _this = this;
+        return this.codes.some(function (sequence) {
+            var sortedSelf = Shortcut.sortCodes(sequence);
+            var sortedTarget = Shortcut.sortCodes(codes);
+            if (isFn(_this.matcher)) {
+                return _this.matched(_this.matcher(sortedTarget), context);
+            }
+            if (sortedTarget.length !== sortedSelf.length)
+                return _this.matched(false, context);
+            for (var i = 0; i < sortedSelf.length; i++) {
+                if (!Shortcut.matchCode(sortedTarget[i], sortedSelf[i])) {
+                    return _this.matched(false, context);
+                }
+            }
+            return _this.matched(true, context);
+        });
+    };
+    Shortcut.matchCode = function (code1, code2) {
+        var _a, _b;
+        return ((_a = code1 === null || code1 === void 0 ? void 0 : code1.toLocaleLowerCase) === null || _a === void 0 ? void 0 : _a.call(code1)) === ((_b = code2 === null || code2 === void 0 ? void 0 : code2.toLocaleLowerCase) === null || _b === void 0 ? void 0 : _b.call(code2));
+    };
+    Shortcut.sortCodes = function (codes) {
+        return codes.map(function (code) { return code.toLocaleLowerCase(); }).sort();
+    };
+    return Shortcut;
+}());
+export { Shortcut };

package/esm/models/SnapLine.d.ts

@@ -0,0 +1,27 @@
+import { ILineSegment, IPoint, Rect } from '@mdesignable/shared';
+import { TreeNode } from './TreeNode';
+import { TransformHelper } from './TransformHelper';
+export type ISnapLineType = 'ruler' | 'space-block' | 'normal';
+export type ISnapLine = ILineSegment & {
+    type?: ISnapLineType;
+    distance?: number;
+    id?: string;
+    refer?: TreeNode;
+};
+export declare class SnapLine {
+    _id: string;
+    type: ISnapLineType;
+    distance: number;
+    refer: TreeNode;
+    start: IPoint;
+    end: IPoint;
+    helper: TransformHelper;
+    constructor(helper: TransformHelper, line: ISnapLine);
+    get id(): string;
+    get direction(): "v" | "h";
+    get closest(): boolean;
+    get rect(): Rect;
+    translate(node: TreeNode, translate: IPoint): void;
+    resize(node: TreeNode, rect: Rect): void;
+    snapEdge(rect: Rect): "ht" | "hc" | "hb" | "vl" | "vc" | "vr";
+}

package/esm/models/SnapLine.js

@@ -0,0 +1,141 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { calcRectOfAxisLineSegment, calcOffsetOfSnapLineSegmentToEdge, } from '@mdesignable/shared';
+import { TransformHelper } from './TransformHelper';
+var SnapLine = /** @class */ (function () {
+    function SnapLine(helper, line) {
+        this.helper = helper;
+        this.type = line.type || 'normal';
+        this._id = line.id;
+        this.refer = line.refer;
+        this.start = __assign({}, line.start);
+        this.end = __assign({}, line.end);
+        this.distance = line.distance;
+    }
+    Object.defineProperty(SnapLine.prototype, "id", {
+        get: function () {
+            var _a;
+            return ((_a = this._id) !== null && _a !== void 0 ? _a : "".concat(this.start.x, "-").concat(this.start.y, "-").concat(this.end.x, "-").concat(this.end.y));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SnapLine.prototype, "direction", {
+        get: function () {
+            var _a, _b;
+            if (((_a = this.start) === null || _a === void 0 ? void 0 : _a.x) === ((_b = this.end) === null || _b === void 0 ? void 0 : _b.x))
+                return 'v';
+            return 'h';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SnapLine.prototype, "closest", {
+        get: function () {
+            return this.distance < TransformHelper.threshold;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SnapLine.prototype, "rect", {
+        get: function () {
+            return calcRectOfAxisLineSegment(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SnapLine.prototype.translate = function (node, translate) {
+        if (!node || !(node === null || node === void 0 ? void 0 : node.parent))
+            return;
+        var parent = node.parent;
+        var dragNodeRect = node.getValidElementOffsetRect();
+        var parentRect = parent.getValidElementOffsetRect();
+        var edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect);
+        if (this.direction === 'h') {
+            translate.y = this.start.y - parentRect.y - edgeOffset.y;
+        }
+        else {
+            translate.x = this.start.x - parentRect.x - edgeOffset.x;
+        }
+    };
+    SnapLine.prototype.resize = function (node, rect) {
+        if (!node || !(node === null || node === void 0 ? void 0 : node.parent))
+            return;
+        var parent = node.parent;
+        var dragNodeRect = node.getValidElementOffsetRect();
+        var parentRect = parent.getValidElementOffsetRect();
+        var edgeOffset = calcOffsetOfSnapLineSegmentToEdge(this, dragNodeRect);
+        var cursorRect = this.helper.cursorDragNodesRect;
+        var snapEdge = this.snapEdge(rect);
+        if (this.direction === 'h') {
+            var y = this.start.y - parentRect.y - edgeOffset.y;
+            switch (this.helper.direction) {
+                case 'left-top':
+                case 'center-top':
+                case 'right-top':
+                    if (snapEdge !== 'ht')
+                        return;
+                    rect.y = y;
+                    rect.height = cursorRect.bottom - y;
+                    break;
+                case 'left-bottom':
+                case 'center-bottom':
+                case 'right-bottom':
+                    if (snapEdge !== 'hb')
+                        return;
+                    rect.height = this.start.y - cursorRect.top;
+                    break;
+            }
+        }
+        else {
+            var x = this.start.x - parentRect.x - edgeOffset.x;
+            switch (this.helper.direction) {
+                case 'left-top':
+                case 'left-bottom':
+                case 'left-center':
+                    if (snapEdge !== 'vl')
+                        return;
+                    rect.x = x;
+                    rect.width = cursorRect.right - x;
+                    break;
+                case 'right-center':
+                case 'right-top':
+                case 'right-bottom':
+                    if (snapEdge !== 'vr')
+                        return;
+                    rect.width = this.start.x - cursorRect.left;
+                    break;
+            }
+        }
+    };
+    SnapLine.prototype.snapEdge = function (rect) {
+        var threshold = TransformHelper.threshold;
+        if (this.direction === 'h') {
+            if (Math.abs(this.start.y - rect.top) < threshold)
+                return 'ht';
+            if (Math.abs(this.start.y - (rect.top + rect.height / 2)) < threshold)
+                return 'hc';
+            if (Math.abs(this.start.y - rect.bottom) < threshold)
+                return 'hb';
+        }
+        else {
+            if (Math.abs(this.start.x - rect.left) < threshold)
+                return 'vl';
+            if (Math.abs(this.start.x - (rect.left + rect.width / 2)) < threshold)
+                return 'vc';
+            if (Math.abs(this.start.x - rect.right) < threshold)
+                return 'vr';
+        }
+    };
+    return SnapLine;
+}());
+export { SnapLine };