@thienvu18/designable-core 2.0.0

package/lib/models/Screen.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Screen = exports.ScreenStatus = exports.ScreenType = void 0;
+const reactive_1 = require("@formily/reactive");
+var ScreenType;
+(function (ScreenType) {
+    ScreenType["PC"] = "PC";
+    ScreenType["Responsive"] = "Responsive";
+    ScreenType["Mobile"] = "Mobile";
+    ScreenType["Sketch"] = "Sketch";
+})(ScreenType || (exports.ScreenType = ScreenType = {}));
+var ScreenStatus;
+(function (ScreenStatus) {
+    ScreenStatus["Normal"] = "Normal";
+    ScreenStatus["Resizing"] = "Resizing";
+    ScreenStatus["Zooming"] = "Zooming";
+})(ScreenStatus || (exports.ScreenStatus = ScreenStatus = {}));
+class Screen {
+    constructor(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();
+    }
+    makeObservable() {
+        (0, reactive_1.define)(this, {
+            type: reactive_1.observable.ref,
+            scale: reactive_1.observable.ref,
+            width: reactive_1.observable.ref,
+            height: reactive_1.observable.ref,
+            status: reactive_1.observable.ref,
+            flip: reactive_1.observable.ref,
+            background: reactive_1.observable.ref,
+            setType: reactive_1.action,
+            setScale: reactive_1.action,
+            setSize: reactive_1.action,
+            resetSize: reactive_1.action,
+            setBackground: reactive_1.action,
+            setFlip: reactive_1.action,
+        });
+    }
+    setStatus(status) {
+        this.status = status;
+    }
+    setType(type) {
+        this.type = type;
+    }
+    setScale(scale) {
+        this.scale = scale;
+    }
+    setSize(width, height) {
+        if (width) {
+            this.width = width;
+        }
+        if (height) {
+            this.height = height;
+        }
+    }
+    resetSize() {
+        this.width = '100%';
+        this.height = '100%';
+    }
+    setBackground(background) {
+        this.background = background;
+    }
+    setFlip(flip) {
+        this.flip = flip;
+    }
+}
+exports.Screen = Screen;

package/lib/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): any;
+    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/lib/models/Selection.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = void 0;
+const reactive_1 = require("@formily/reactive");
+const events_1 = require("../events");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+class Selection {
+    constructor(props) {
+        this.selected = [];
+        this.indexes = {};
+        if (props.selected) {
+            this.selected = props.selected;
+        }
+        if (props.operation) {
+            this.operation = props.operation;
+        }
+        this.makeObservable();
+    }
+    makeObservable() {
+        (0, reactive_1.define)(this, {
+            selected: reactive_1.observable,
+            select: reactive_1.action,
+            batchSelect: reactive_1.action,
+            add: reactive_1.action,
+            remove: reactive_1.action,
+            clear: reactive_1.action,
+            crossAddTo: reactive_1.action,
+        });
+    }
+    trigger(type = events_1.SelectNodeEvent) {
+        return this.operation.dispatch(new type({
+            target: this.operation.tree,
+            source: this.selectedNodes,
+        }));
+    }
+    select(id) {
+        if ((0, designable_shared_1.isStr)(id)) {
+            if (this.selected.length === 1 && this.selected.includes(id)) {
+                this.trigger(events_1.SelectNodeEvent);
+                return;
+            }
+            this.selected = [id];
+            this.indexes = { [id]: true };
+            this.trigger(events_1.SelectNodeEvent);
+        }
+        else {
+            this.select(id?.id);
+        }
+    }
+    safeSelect(id) {
+        if (!id)
+            return;
+        this.select(id);
+    }
+    mapIds(ids) {
+        return (0, designable_shared_1.isArr)(ids)
+            ? ids.map((node) => ((0, designable_shared_1.isStr)(node) ? node : node?.id))
+            : [];
+    }
+    batchSelect(ids) {
+        this.selected = this.mapIds(ids);
+        this.indexes = this.selected.reduce((buf, id) => {
+            buf[id] = true;
+            return buf;
+        }, {});
+        this.trigger(events_1.SelectNodeEvent);
+    }
+    batchSafeSelect(ids) {
+        if (!ids?.length)
+            return;
+        this.batchSelect(ids);
+    }
+    get selectedNodes() {
+        return this.selected.map((id) => this.operation.tree.findById(id));
+    }
+    get first() {
+        if (this.selected && this.selected.length)
+            return this.selected[0];
+    }
+    get last() {
+        if (this.selected && this.selected.length)
+            return this.selected[this.selected.length - 1];
+    }
+    get length() {
+        return this.selected.length;
+    }
+    add(...ids) {
+        this.mapIds(ids).forEach((id) => {
+            if ((0, designable_shared_1.isStr)(id)) {
+                if (!this.selected.includes(id)) {
+                    this.selected.push(id);
+                    this.indexes[id] = true;
+                }
+            }
+            else {
+                this.add(id?.id);
+            }
+        });
+        this.trigger();
+    }
+    crossAddTo(node) {
+        if (node.parent) {
+            const selectedNodes = this.selectedNodes;
+            if (this.has(node)) {
+                this.remove(node);
+            }
+            else {
+                const minDistanceNode = selectedNodes.reduce((minDistanceNode, item) => {
+                    return item.distanceTo(node) < minDistanceNode.distanceTo(node)
+                        ? item
+                        : minDistanceNode;
+                }, selectedNodes[0]);
+                if (minDistanceNode) {
+                    const crossNodes = node.crossSiblings(minDistanceNode);
+                    crossNodes.forEach((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;
+                }
+            }
+        }
+    }
+    remove(...ids) {
+        this.mapIds(ids).forEach((id) => {
+            if ((0, designable_shared_1.isStr)(id)) {
+                this.selected = this.selected.filter((item) => item !== id);
+                delete this.indexes[id];
+            }
+            else {
+                this.remove(id?.id);
+            }
+        });
+        this.trigger(events_1.UnSelectNodeEvent);
+    }
+    has(...ids) {
+        return this.mapIds(ids).some((id) => {
+            if ((0, designable_shared_1.isStr)(id)) {
+                return this.indexes[id];
+            }
+            else {
+                if (!id?.id)
+                    return false;
+                return this.has(id?.id);
+            }
+        });
+    }
+    clear() {
+        this.selected = [];
+        this.indexes = {};
+        this.trigger(events_1.UnSelectNodeEvent);
+    }
+}
+exports.Selection = Selection;

package/lib/models/Shortcut.d.ts

@@ -0,0 +1,20 @@
+import { KeyCode } from '@thienvu18/designable-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/lib/models/Shortcut.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shortcut = exports.KeyCode = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+Object.defineProperty(exports, "KeyCode", { enumerable: true, get: function () { return designable_shared_1.KeyCode; } });
+class Shortcut {
+    constructor(props) {
+        this.codes = this.parseCodes(props.codes);
+        this.handler = props.handler;
+        this.matcher = props.matcher;
+    }
+    parseCodes(codes) {
+        const results = [];
+        codes.forEach((code) => {
+            if (Array.isArray(code)) {
+                results.push(code);
+            }
+            else {
+                results.push([code]);
+            }
+        });
+        return results;
+    }
+    preventCodes(codes) {
+        if (this.codes.length) {
+            for (let i = 0; i < codes.length; i++) {
+                const sequence = this.codes[i] ?? [];
+                for (let j = 0; j < sequence.length; j++) {
+                    if (!Shortcut.matchCode(codes[j], sequence[j])) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    matched(matched, context) {
+        if ((0, designable_shared_1.isFn)(this.handler) && matched) {
+            this.handler(context);
+        }
+        return matched;
+    }
+    match(codes, context) {
+        return this.codes.some((sequence) => {
+            const sortedSelf = Shortcut.sortCodes(sequence);
+            const sortedTarget = Shortcut.sortCodes(codes);
+            if ((0, designable_shared_1.isFn)(this.matcher)) {
+                return this.matched(this.matcher(sortedTarget), context);
+            }
+            if (sortedTarget.length !== sortedSelf.length)
+                return this.matched(false, context);
+            for (let i = 0; i < sortedSelf.length; i++) {
+                if (!Shortcut.matchCode(sortedTarget[i], sortedSelf[i])) {
+                    return this.matched(false, context);
+                }
+            }
+            return this.matched(true, context);
+        });
+    }
+}
+exports.Shortcut = Shortcut;
+Shortcut.matchCode = (code1, code2) => {
+    return code1?.toLocaleLowerCase?.() === code2?.toLocaleLowerCase?.();
+};
+Shortcut.sortCodes = (codes) => {
+    return codes.map((code) => code.toLocaleLowerCase()).sort();
+};

package/lib/models/SnapLine.d.ts

@@ -0,0 +1,27 @@
+import { ILineSegment, IPoint, Rect } from '@thienvu18/designable-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/lib/models/SnapLine.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnapLine = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const TransformHelper_1 = require("./TransformHelper");
+class SnapLine {
+    constructor(helper, line) {
+        this.helper = helper;
+        this.type = line.type || 'normal';
+        this._id = line.id;
+        this.refer = line.refer;
+        this.start = { ...line.start };
+        this.end = { ...line.end };
+        this.distance = line.distance;
+    }
+    get id() {
+        return (this._id ?? `${this.start.x}-${this.start.y}-${this.end.x}-${this.end.y}`);
+    }
+    get direction() {
+        if (this.start?.x === this.end?.x)
+            return 'v';
+        return 'h';
+    }
+    get closest() {
+        return this.distance < TransformHelper_1.TransformHelper.threshold;
+    }
+    get rect() {
+        return (0, designable_shared_1.calcRectOfAxisLineSegment)(this);
+    }
+    translate(node, translate) {
+        if (!node || !node?.parent)
+            return;
+        const parent = node.parent;
+        const dragNodeRect = node.getValidElementOffsetRect();
+        const parentRect = parent.getValidElementOffsetRect();
+        const edgeOffset = (0, designable_shared_1.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;
+        }
+    }
+    resize(node, rect) {
+        if (!node || !node?.parent)
+            return;
+        const parent = node.parent;
+        const dragNodeRect = node.getValidElementOffsetRect();
+        const parentRect = parent.getValidElementOffsetRect();
+        const edgeOffset = (0, designable_shared_1.calcOffsetOfSnapLineSegmentToEdge)(this, dragNodeRect);
+        const cursorRect = this.helper.cursorDragNodesRect;
+        const snapEdge = this.snapEdge(rect);
+        if (this.direction === 'h') {
+            const 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 {
+            const 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;
+            }
+        }
+    }
+    snapEdge(rect) {
+        const threshold = TransformHelper_1.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';
+        }
+    }
+}
+exports.SnapLine = SnapLine;

package/lib/models/SpaceBlock.d.ts

@@ -0,0 +1,40 @@
+import { Rect } from '@thienvu18/designable-shared';
+import { SnapLine } from './SnapLine';
+import { TransformHelper } from './TransformHelper';
+import { TreeNode } from './TreeNode';
+export type ISpaceBlockType = 'top' | 'right' | 'bottom' | 'left' | (string & {});
+export interface ISpaceBlock {
+    id?: string;
+    refer?: TreeNode;
+    rect?: Rect;
+    distance?: number;
+    type?: ISpaceBlockType;
+}
+export type AroundSpaceBlock = Record<ISpaceBlockType, SpaceBlock>;
+export declare class SpaceBlock {
+    _id: string;
+    distance: number;
+    refer: TreeNode;
+    helper: TransformHelper;
+    rect: Rect;
+    type: ISpaceBlockType;
+    constructor(helper: TransformHelper, box: ISpaceBlock);
+    get referRect(): Rect;
+    get id(): string;
+    get next(): SpaceBlock;
+    get extendsLine(): {
+        start: {
+            x: number;
+            y: number;
+        };
+        end: {
+            x: number;
+            y: number;
+        };
+    };
+    get needExtendsLine(): boolean;
+    get crossReferRect(): Rect;
+    get crossDragNodesRect(): Rect;
+    get isometrics(): SpaceBlock[];
+    get snapLine(): SnapLine;
+}

package/lib/models/SpaceBlock.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpaceBlock = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const SnapLine_1 = require("./SnapLine");
+const TransformHelper_1 = require("./TransformHelper");
+class SpaceBlock {
+    constructor(helper, box) {
+        this.helper = helper;
+        this.distance = box.distance;
+        this.refer = box.refer;
+        this.rect = box.rect;
+        this.type = box.type;
+    }
+    get referRect() {
+        if (!this.refer)
+            return;
+        return this.helper.getNodeRect(this.refer);
+    }
+    get id() {
+        return (this._id ??
+            `${this.rect.x}-${this.rect.y}-${this.rect.width}-${this.rect.height}`);
+    }
+    get next() {
+        const spaceBlock = this.helper.calcAroundSpaceBlocks(this.referRect);
+        return spaceBlock[this.type];
+    }
+    get extendsLine() {
+        if (!this.needExtendsLine)
+            return;
+        const dragNodesRect = this.helper.dragNodesRect;
+        return (0, designable_shared_1.calcExtendsLineSegmentOfRect)(dragNodesRect, this.referRect);
+    }
+    get needExtendsLine() {
+        const targetRect = this.crossDragNodesRect;
+        const referRect = this.crossReferRect;
+        if (this.type === 'top' || this.type === 'bottom') {
+            const rightDelta = referRect.right - targetRect.left;
+            const leftDelta = targetRect.right - referRect.left;
+            return (rightDelta < targetRect.width / 2 || leftDelta < targetRect.width / 2);
+        }
+        else {
+            const topDelta = targetRect.bottom - referRect.top;
+            const bottomDelta = referRect.bottom - targetRect.top;
+            return (topDelta < targetRect.height / 2 || bottomDelta < targetRect.height / 2);
+        }
+        return true;
+    }
+    get crossReferRect() {
+        const referRect = this.referRect;
+        if (this.type === 'top' || this.type === 'bottom') {
+            return new designable_shared_1.Rect(referRect.x, this.rect.y, referRect.width, this.rect.height);
+        }
+        else {
+            return new designable_shared_1.Rect(this.rect.x, referRect.y, this.rect.width, referRect.height);
+        }
+    }
+    get crossDragNodesRect() {
+        const dragNodesRect = this.helper.dragNodesRect;
+        if (this.type === 'top' || this.type === 'bottom') {
+            return new designable_shared_1.Rect(dragNodesRect.x, this.rect.y, dragNodesRect.width, this.rect.height);
+        }
+        else {
+            return new designable_shared_1.Rect(this.rect.x, dragNodesRect.y, this.rect.width, dragNodesRect.height);
+        }
+    }
+    get isometrics() {
+        const results = [];
+        let spaceBlock = this;
+        while ((spaceBlock = spaceBlock.next)) {
+            if (Math.abs(spaceBlock.distance - this.distance) <
+                TransformHelper_1.TransformHelper.threshold) {
+                if (results.some((box) => box.distance !== spaceBlock.distance))
+                    continue;
+                results.push(spaceBlock);
+            }
+        }
+        return results;
+    }
+    get snapLine() {
+        if (!this.isometrics.length)
+            return;
+        const nextRect = this.next.rect;
+        const referRect = this.referRect;
+        let line;
+        if (this.type === 'top') {
+            line = new designable_shared_1.LineSegment({
+                x: nextRect.left,
+                y: referRect.bottom + nextRect.height,
+            }, {
+                x: nextRect.right,
+                y: referRect.bottom + nextRect.height,
+            });
+        }
+        else if (this.type === 'bottom') {
+            line = new designable_shared_1.LineSegment({
+                x: nextRect.left,
+                y: referRect.top - nextRect.height,
+            }, {
+                x: nextRect.right,
+                y: referRect.top - nextRect.height,
+            });
+        }
+        else if (this.type === 'left') {
+            line = new designable_shared_1.LineSegment({
+                x: referRect.right + nextRect.width,
+                y: nextRect.top,
+            }, {
+                x: referRect.right + nextRect.width,
+                y: nextRect.bottom,
+            });
+        }
+        else {
+            line = new designable_shared_1.LineSegment({
+                x: referRect.left - nextRect.width,
+                y: nextRect.top,
+            }, {
+                x: referRect.left - nextRect.width,
+                y: nextRect.bottom,
+            });
+        }
+        const distance = (0, designable_shared_1.calcDistanceOfSnapLineToEdges)(line, this.helper.dragNodesEdgeLines);
+        return new SnapLine_1.SnapLine(this.helper, {
+            ...line,
+            distance,
+            type: 'space-block',
+        });
+    }
+}
+exports.SpaceBlock = SpaceBlock;