@thienvu18/designable-core 2.0.0

package/esm/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/esm/models/Shortcut.js

@@ -0,0 +1,64 @@
+import { isFn, KeyCode } from '@thienvu18/designable-shared';
+export { KeyCode };
+export 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 (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 (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);
+        });
+    }
+}
+Shortcut.matchCode = (code1, code2) => {
+    return code1?.toLocaleLowerCase?.() === code2?.toLocaleLowerCase?.();
+};
+Shortcut.sortCodes = (codes) => {
+    return codes.map((code) => code.toLocaleLowerCase()).sort();
+};

package/esm/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/esm/models/SnapLine.js

@@ -0,0 +1,110 @@
+import { calcRectOfAxisLineSegment, calcOffsetOfSnapLineSegmentToEdge, } from '@thienvu18/designable-shared';
+import { TransformHelper } from './TransformHelper';
+export 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.threshold;
+    }
+    get rect() {
+        return calcRectOfAxisLineSegment(this);
+    }
+    translate(node, translate) {
+        if (!node || !node?.parent)
+            return;
+        const parent = node.parent;
+        const dragNodeRect = node.getValidElementOffsetRect();
+        const parentRect = parent.getValidElementOffsetRect();
+        const 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;
+        }
+    }
+    resize(node, rect) {
+        if (!node || !node?.parent)
+            return;
+        const parent = node.parent;
+        const dragNodeRect = node.getValidElementOffsetRect();
+        const parentRect = parent.getValidElementOffsetRect();
+        const edgeOffset = 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.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';
+        }
+    }
+}

package/esm/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/esm/models/SpaceBlock.js

@@ -0,0 +1,126 @@
+import { calcExtendsLineSegmentOfRect, calcDistanceOfSnapLineToEdges, LineSegment, Rect, } from '@thienvu18/designable-shared';
+import { SnapLine } from './SnapLine';
+import { TransformHelper } from './TransformHelper';
+export 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 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 Rect(referRect.x, this.rect.y, referRect.width, this.rect.height);
+        }
+        else {
+            return new 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 Rect(dragNodesRect.x, this.rect.y, dragNodesRect.width, this.rect.height);
+        }
+        else {
+            return new 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.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 LineSegment({
+                x: nextRect.left,
+                y: referRect.bottom + nextRect.height,
+            }, {
+                x: nextRect.right,
+                y: referRect.bottom + nextRect.height,
+            });
+        }
+        else if (this.type === 'bottom') {
+            line = new LineSegment({
+                x: nextRect.left,
+                y: referRect.top - nextRect.height,
+            }, {
+                x: nextRect.right,
+                y: referRect.top - nextRect.height,
+            });
+        }
+        else if (this.type === 'left') {
+            line = new LineSegment({
+                x: referRect.right + nextRect.width,
+                y: nextRect.top,
+            }, {
+                x: referRect.right + nextRect.width,
+                y: nextRect.bottom,
+            });
+        }
+        else {
+            line = new LineSegment({
+                x: referRect.left - nextRect.width,
+                y: nextRect.top,
+            }, {
+                x: referRect.left - nextRect.width,
+                y: nextRect.bottom,
+            });
+        }
+        const distance = calcDistanceOfSnapLineToEdges(line, this.helper.dragNodesEdgeLines);
+        return new SnapLine(this.helper, {
+            ...line,
+            distance,
+            type: 'space-block',
+        });
+    }
+}

package/esm/models/TransformHelper.d.ts

@@ -0,0 +1,80 @@
+import { Point, IPoint, ISize, IRect, Rect } from '@thienvu18/designable-shared';
+import { SpaceBlock, AroundSpaceBlock } from './SpaceBlock';
+import { Operation } from './Operation';
+import { TreeNode } from './TreeNode';
+import { SnapLine, ISnapLine } from './SnapLine';
+export interface ITransformHelperProps {
+    operation: Operation;
+}
+export type TransformHelperType = 'translate' | 'resize' | 'rotate' | 'scale' | 'round';
+export type ResizeDirection = 'left-top' | 'left-center' | 'left-bottom' | 'center-top' | 'center-bottom' | 'right-top' | 'right-bottom' | 'right-center' | (string & {});
+export interface ITransformHelperDragStartProps {
+    type: TransformHelperType;
+    direction?: ResizeDirection;
+    dragNodes: TreeNode[];
+}
+export declare class TransformHelper {
+    operation: Operation;
+    type: TransformHelperType;
+    direction: ResizeDirection;
+    dragNodes: TreeNode[];
+    rulerSnapLines: SnapLine[];
+    aroundSnapLines: SnapLine[];
+    aroundSpaceBlocks: AroundSpaceBlock;
+    viewportRectsStore: Record<string, Rect>;
+    dragStartTranslateStore: Record<string, IPoint>;
+    dragStartSizeStore: Record<string, ISize>;
+    draggingNodesRect: Rect;
+    cacheDragNodesReact: Rect;
+    dragStartNodesRect: IRect;
+    snapping: boolean;
+    dragging: boolean;
+    snapped: boolean;
+    constructor(props: ITransformHelperProps);
+    get tree(): TreeNode;
+    get cursor(): import("./Cursor").Cursor;
+    get viewport(): import("./Viewport").Viewport;
+    get deltaX(): number;
+    get deltaY(): number;
+    get cursorPosition(): {
+        x: number;
+        y: number;
+    };
+    get cursorDragNodesRect(): Rect;
+    get cursorDragNodesEdgeLines(): import("@thienvu18/designable-shared").IRectEdgeLines;
+    get dragNodesRect(): Rect;
+    get dragNodesEdgeLines(): import("@thienvu18/designable-shared").IRectEdgeLines;
+    get cursorOffset(): Point;
+    get dragStartCursor(): {
+        x: number;
+        y: number;
+    };
+    get dragStartCursorOffset(): Point;
+    get closestSnapLines(): SnapLine[];
+    get closestSpaceBlocks(): SpaceBlock[];
+    get thresholdSnapLines(): SnapLine[];
+    get thresholdSpaceBlocks(): SpaceBlock[];
+    get measurerSpaceBlocks(): SpaceBlock[];
+    calcBaseTranslate(node: TreeNode): {
+        x: number;
+        y: number;
+    };
+    calcBaseResize(node: TreeNode): Rect;
+    calcDragStartStore(nodes?: TreeNode[]): void;
+    calcRulerSnapLines(dragNodesRect: IRect): SnapLine[];
+    calcAroundSnapLines(dragNodesRect: Rect): SnapLine[];
+    calcAroundSpaceBlocks(dragNodesRect: IRect): AroundSpaceBlock;
+    calcViewportNodes(): void;
+    getNodeRect(node: TreeNode): Rect;
+    eachViewportNodes(visitor: (node: TreeNode, rect: Rect) => void): void;
+    translate(node: TreeNode, handler: (translate: IPoint) => void): void;
+    resize(node: TreeNode, handler: (resize: IRect) => void): void;
+    findRulerSnapLine(id: string): SnapLine;
+    addRulerSnapLine(line: ISnapLine): void;
+    removeRulerSnapLine(id: string): void;
+    dragStart(props: ITransformHelperDragStartProps): void;
+    dragMove(): void;
+    dragEnd(): void;
+    makeObservable(): void;
+    static threshold: number;
+}