@thienvu18/designable-core 2.0.0

package/esm/models/Engine.js

@@ -0,0 +1,83 @@
+import { TreeNode } from './TreeNode';
+import { Workbench } from './Workbench';
+import { Cursor } from './Cursor';
+import { Keyboard } from './Keyboard';
+import { Screen, ScreenType } from './Screen';
+import { Event, uid, globalThisPolyfill } from '@thienvu18/designable-shared';
+/**
+ * 设计器引擎
+ */
+export class Engine extends Event {
+    constructor(props) {
+        super(props);
+        this.props = {
+            ...Engine.defaultProps,
+            ...props,
+        };
+        this.init();
+        this.id = uid();
+    }
+    init() {
+        this.workbench = new Workbench(this);
+        this.screen = new Screen(this);
+        this.cursor = new Cursor(this);
+        this.keyboard = new Keyboard(this);
+    }
+    setCurrentTree(tree) {
+        if (this.workbench.currentWorkspace) {
+            this.workbench.currentWorkspace.operation.tree.from(tree);
+        }
+    }
+    getCurrentTree() {
+        return this.workbench?.currentWorkspace?.operation?.tree;
+    }
+    getAllSelectedNodes() {
+        let results = [];
+        for (let i = 0; i < this.workbench.workspaces.length; i++) {
+            const workspace = this.workbench.workspaces[i];
+            results = results.concat(workspace.operation.selection.selectedNodes);
+        }
+        return results;
+    }
+    findNodeById(id) {
+        return TreeNode.findById(id);
+    }
+    findMovingNodes() {
+        const results = [];
+        this.workbench.eachWorkspace((workspace) => {
+            workspace.operation.moveHelper.dragNodes?.forEach((node) => {
+                if (!results.includes(node)) {
+                    results.push(node);
+                }
+            });
+        });
+        return results;
+    }
+    createNode(node, parent) {
+        return new TreeNode(node, parent);
+    }
+    mount() {
+        this.attachEvents(globalThisPolyfill);
+    }
+    unmount() {
+        this.detachEvents();
+    }
+}
+Engine.defaultProps = {
+    shortcuts: [],
+    effects: [],
+    drivers: [],
+    rootComponentName: 'Root',
+    sourceIdAttrName: 'data-designer-source-id',
+    nodeIdAttrName: 'data-designer-node-id',
+    contentEditableAttrName: 'data-content-editable',
+    contentEditableNodeIdAttrName: 'data-content-editable-node-id',
+    clickStopPropagationAttrName: 'data-click-stop-propagation',
+    nodeSelectionIdAttrName: 'data-designer-node-helpers-id',
+    nodeDragHandlerAttrName: 'data-designer-node-drag-handler',
+    screenResizeHandlerAttrName: 'data-designer-screen-resize-handler',
+    nodeResizeHandlerAttrName: 'data-designer-node-resize-handler',
+    outlineNodeIdAttrName: 'data-designer-outline-node-id',
+    nodeTranslateAttrName: 'data-designer-node-translate-handler',
+    defaultScreenType: ScreenType.PC,
+};

package/esm/models/History.d.ts

@@ -0,0 +1,34 @@
+export interface IHistoryProps<T> {
+    onPush?: (item: T) => void;
+    onRedo?: (item: T) => void;
+    onUndo?: (item: T) => void;
+    onGoto?: (item: T) => void;
+}
+export interface HistoryItem<T> {
+    data: T;
+    type?: string;
+    timestamp: number;
+}
+export interface ISerializable {
+    from(json: any): void;
+    serialize(): any;
+}
+export declare class History<T extends ISerializable = any> {
+    context: ISerializable;
+    props: IHistoryProps<HistoryItem<T>>;
+    current: number;
+    history: HistoryItem<T>[];
+    updateTimer: any;
+    maxSize: number;
+    locking: boolean;
+    constructor(context: T, props?: IHistoryProps<HistoryItem<T>>);
+    makeObservable(): void;
+    list(): HistoryItem<T>[];
+    push(type?: string): void;
+    get allowUndo(): boolean;
+    get allowRedo(): boolean;
+    redo(): void;
+    undo(): void;
+    goTo(index: number): void;
+    clear(): void;
+}

package/esm/models/History.js

@@ -0,0 +1,96 @@
+import { define, observable, action } from '@formily/reactive';
+export class History {
+    constructor(context, props) {
+        this.current = 0;
+        this.history = [];
+        this.updateTimer = null;
+        this.maxSize = 100;
+        this.locking = false;
+        this.context = context;
+        this.props = props;
+        this.push();
+        this.makeObservable();
+    }
+    makeObservable() {
+        define(this, {
+            current: observable.ref,
+            history: observable.shallow,
+            push: action,
+            undo: action,
+            redo: action,
+            goTo: action,
+            clear: action,
+        });
+    }
+    list() {
+        return this.history;
+    }
+    push(type) {
+        if (this.locking)
+            return;
+        if (this.current < this.history.length - 1) {
+            this.history = this.history.slice(0, this.current + 1);
+        }
+        const item = {
+            data: this.context.serialize(),
+            timestamp: Date.now(),
+            type,
+        };
+        this.current = this.history.length;
+        this.history.push(item);
+        const overSizeCount = this.history.length - this.maxSize;
+        if (overSizeCount > 0) {
+            this.history.splice(0, overSizeCount);
+            this.current = this.history.length - 1;
+        }
+        if (this.props?.onPush) {
+            this.props.onPush(item);
+        }
+    }
+    get allowUndo() {
+        return this.history.length > 0 && this.current - 1 >= 0;
+    }
+    get allowRedo() {
+        return this.history.length > this.current + 1;
+    }
+    redo() {
+        if (this.allowRedo) {
+            const item = this.history[this.current + 1];
+            this.locking = true;
+            this.context.from(item.data);
+            this.locking = false;
+            this.current++;
+            if (this.props?.onRedo) {
+                this.props.onRedo(item);
+            }
+        }
+    }
+    undo() {
+        if (this.allowUndo) {
+            const item = this.history[this.current - 1];
+            this.locking = true;
+            this.context.from(item.data);
+            this.locking = false;
+            this.current--;
+            if (this.props?.onUndo) {
+                this.props.onUndo(item);
+            }
+        }
+    }
+    goTo(index) {
+        const item = this.history[index];
+        if (item) {
+            this.locking = true;
+            this.context.from(item.data);
+            this.locking = false;
+            this.current = index;
+            if (this.props?.onGoto) {
+                this.props.onGoto(item);
+            }
+        }
+    }
+    clear() {
+        this.history = [];
+        this.current = 0;
+    }
+}

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(): any;
+    makeObservable(): void;
+}

package/esm/models/Hover.js

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

package/esm/models/Keyboard.d.ts

@@ -0,0 +1,29 @@
+import { KeyCode } from '@thienvu18/designable-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,102 @@
+import { observable, define, action } from '@formily/reactive';
+import { KeyCode } from '@thienvu18/designable-shared';
+import { Shortcut } from './Shortcut';
+const Modifiers = [
+    ['metaKey', KeyCode.Meta],
+    ['shiftKey', KeyCode.Shift],
+    ['ctrlKey', KeyCode.Control],
+    ['altKey', KeyCode.Alt],
+];
+export class Keyboard {
+    constructor(engine) {
+        this.shortcuts = [];
+        this.sequence = [];
+        this.keyDown = null;
+        this.modifiers = {};
+        this.requestTimer = null;
+        this.engine = engine;
+        this.shortcuts = engine.props?.shortcuts || [];
+        this.makeObservable();
+    }
+    matchCodes(context) {
+        for (let i = 0; i < this.shortcuts.length; i++) {
+            const shortcut = this.shortcuts[i];
+            if (shortcut.match(this.sequence, context)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    preventCodes() {
+        return this.shortcuts.some((shortcut) => {
+            return shortcut.preventCodes(this.sequence);
+        });
+    }
+    includes(key) {
+        return this.sequence.some((code) => Shortcut.matchCode(code, key));
+    }
+    excludes(key) {
+        this.sequence = this.sequence.filter((code) => !Shortcut.matchCode(key, code));
+    }
+    addKeyCode(key) {
+        if (!this.includes(key)) {
+            this.sequence.push(key);
+        }
+    }
+    removeKeyCode(key) {
+        if (this.includes(key)) {
+            this.excludes(key);
+        }
+    }
+    isModifier(code) {
+        return Modifiers.some((modifier) => Shortcut.matchCode(modifier[1], code));
+    }
+    handleModifiers(event) {
+        Modifiers.forEach(([key, code]) => {
+            if (event[key]) {
+                if (!this.includes(code)) {
+                    this.sequence = [code].concat(this.sequence);
+                }
+            }
+        });
+    }
+    handleKeyboard(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;
+        }
+    }
+    isKeyDown(code) {
+        return this.keyDown === code;
+    }
+    requestClean(duration = 320) {
+        clearTimeout(this.requestTimer);
+        this.requestTimer = setTimeout(() => {
+            this.keyDown = null;
+            this.sequence = [];
+            clearTimeout(this.requestTimer);
+        }, duration);
+    }
+    makeObservable() {
+        define(this, {
+            sequence: observable.shallow,
+            keyDown: observable.ref,
+            handleKeyboard: action,
+        });
+    }
+}

package/esm/models/MoveHelper.d.ts

@@ -0,0 +1,66 @@
+import { Operation } from './Operation';
+import { TreeNode } from './TreeNode';
+import { IPoint, Rect } from '@thienvu18/designable-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): any;
+    makeObservable(): void;
+}