@thienvu18/designable-core 2.0.0

package/esm/models/MoveHelper.js

@@ -0,0 +1,313 @@
+import { TreeNode } from './TreeNode';
+import { observable, define, action } from '@formily/reactive';
+import { calcDistanceOfPointToRect, calcDistancePointToEdge, isNearAfter, isPointInRect, } from '@thienvu18/designable-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 = {}));
+export class MoveHelper {
+    constructor(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();
+    }
+    get cursor() {
+        return this.operation.engine.cursor;
+    }
+    get viewport() {
+        return this.operation.workspace.viewport;
+    }
+    get outline() {
+        return this.operation.workspace.outline;
+    }
+    get hasDragNodes() {
+        return this.dragNodes.length > 0;
+    }
+    get closestDirection() {
+        if (this.activeViewport === this.outline) {
+            return this.outlineClosestDirection;
+        }
+        return this.viewportClosestDirection;
+    }
+    getClosestLayout(viewport) {
+        return viewport.getValidNodeLayout(this.closestNode);
+    }
+    calcClosestPosition(point, viewport) {
+        const closestNode = this.closestNode;
+        if (!closestNode || !viewport.isPointInViewport(point))
+            return ClosestPosition.Forbid;
+        const closestRect = viewport.getValidNodeRect(closestNode);
+        const isInline = this.getClosestLayout(viewport) === 'horizontal';
+        if (!closestRect) {
+            return;
+        }
+        const isAfter = isNearAfter(point, closestRect, viewport.moveInsertionType === 'block' ? false : isInline);
+        const getValidParent = (node) => {
+            if (!node)
+                return;
+            if (node.parent?.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)) {
+                    const 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(...this.dragNodes)) {
+                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)) {
+                const 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;
+            }
+        }
+    }
+    calcClosestNode(point, viewport) {
+        if (this.touchNode) {
+            const touchNodeRect = viewport.getValidNodeRect(this.touchNode);
+            if (!touchNodeRect)
+                return;
+            if (this.touchNode?.children?.length) {
+                const touchDistance = calcDistancePointToEdge(point, touchNodeRect);
+                let minDistance = touchDistance;
+                let minDistanceNode = this.touchNode;
+                this.touchNode.eachChildren((node) => {
+                    const rect = viewport.getElementRectById(node.id);
+                    if (!rect)
+                        return;
+                    const distance = isPointInRect(point, rect, viewport.moveSensitive)
+                        ? 0
+                        : calcDistanceOfPointToRect(point, rect);
+                    if (distance <= minDistance) {
+                        minDistance = distance;
+                        minDistanceNode = node;
+                    }
+                });
+                return minDistanceNode;
+            }
+            else {
+                return this.touchNode;
+            }
+        }
+        return this.operation.tree;
+    }
+    calcClosestRect(viewport, closestDirection) {
+        const closestNode = this.closestNode;
+        if (!closestNode || !closestDirection)
+            return;
+        const closestRect = viewport.getValidNodeRect(closestNode);
+        if (closestDirection === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.InnerBefore) {
+            return viewport.getChildrenRect(closestNode);
+        }
+        else {
+            return closestRect;
+        }
+    }
+    calcClosestOffsetRect(viewport, closestDirection) {
+        const closestNode = this.closestNode;
+        if (!closestNode || !closestDirection)
+            return;
+        const closestRect = viewport.getValidNodeOffsetRect(closestNode);
+        if (closestDirection === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.InnerBefore) {
+            return viewport.getChildrenOffsetRect(closestNode);
+        }
+        else {
+            return closestRect;
+        }
+    }
+    dragStart(props) {
+        const nodes = TreeNode.filterDraggable(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;
+        }
+    }
+    dragMove(props) {
+        const { point, touchNode } = props;
+        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);
+        }
+    }
+    dragDrop(props) {
+        this.trigger(new DropNodeEvent({
+            target: this.operation.tree,
+            source: props?.dropNode,
+        }));
+    }
+    dragEnd() {
+        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();
+    }
+    trigger(event) {
+        if (this.operation) {
+            return this.operation.dispatch(event);
+        }
+    }
+    makeObservable() {
+        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,
+        });
+    }
+}

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 '@thienvu18/designable-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 = any>(event: ICustomEvent, callback?: () => T): T;
+    snapshot(type?: string): void;
+    from(operation?: IOperation): void;
+    serialize(): IOperation;
+}

package/esm/models/Operation.js

@@ -0,0 +1,66 @@
+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 '@thienvu18/designable-shared';
+export class Operation {
+    constructor(workspace) {
+        this.requests = {
+            snapshot: null,
+        };
+        this.engine = workspace.engine;
+        this.workspace = workspace;
+        this.tree = new TreeNode({
+            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);
+    }
+    dispatch(event, callback) {
+        if (this.workspace.dispatch(event) === false)
+            return undefined;
+        if (isFn(callback))
+            return callback();
+        return undefined;
+    }
+    snapshot(type) {
+        cancelIdle(this.requests.snapshot);
+        if (!this.workspace ||
+            !this.workspace.history ||
+            this.workspace.history.locking)
+            return;
+        this.requests.snapshot = requestIdle(() => {
+            this.workspace.history.push(type);
+        });
+    }
+    from(operation) {
+        if (!operation)
+            return;
+        if (operation.tree) {
+            this.tree.from(operation.tree);
+        }
+        if (operation.selected) {
+            this.selection.selected = operation.selected;
+        }
+    }
+    serialize() {
+        return {
+            tree: this.tree.serialize(),
+            selected: [this.tree.id],
+        };
+    }
+}

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,71 @@
+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 = {}));
+export 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() {
+        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,
+        });
+    }
+    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;
+    }
+}

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): 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/esm/models/Selection.js

@@ -0,0 +1,155 @@
+import { observable, define, action } from '@formily/reactive';
+import { SelectNodeEvent, UnSelectNodeEvent } from '../events';
+import { isStr, isArr } from '@thienvu18/designable-shared';
+export 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() {
+        define(this, {
+            selected: observable,
+            select: action,
+            batchSelect: action,
+            add: action,
+            remove: action,
+            clear: action,
+            crossAddTo: action,
+        });
+    }
+    trigger(type = SelectNodeEvent) {
+        return this.operation.dispatch(new type({
+            target: this.operation.tree,
+            source: this.selectedNodes,
+        }));
+    }
+    select(id) {
+        if (isStr(id)) {
+            if (this.selected.length === 1 && this.selected.includes(id)) {
+                this.trigger(SelectNodeEvent);
+                return;
+            }
+            this.selected = [id];
+            this.indexes = { [id]: true };
+            this.trigger(SelectNodeEvent);
+        }
+        else {
+            this.select(id?.id);
+        }
+    }
+    safeSelect(id) {
+        if (!id)
+            return;
+        this.select(id);
+    }
+    mapIds(ids) {
+        return isArr(ids)
+            ? ids.map((node) => (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(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 (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 (isStr(id)) {
+                this.selected = this.selected.filter((item) => item !== id);
+                delete this.indexes[id];
+            }
+            else {
+                this.remove(id?.id);
+            }
+        });
+        this.trigger(UnSelectNodeEvent);
+    }
+    has(...ids) {
+        return this.mapIds(ids).some((id) => {
+            if (isStr(id)) {
+                return this.indexes[id];
+            }
+            else {
+                if (!id?.id)
+                    return false;
+                return this.has(id?.id);
+            }
+        });
+    }
+    clear() {
+        this.selected = [];
+        this.indexes = {};
+        this.trigger(UnSelectNodeEvent);
+    }
+}