@thienvu18/designable-core 2.0.0

package/lib/models/Workspace.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Workspace = void 0;
+const Viewport_1 = require("./Viewport");
+const Operation_1 = require("./Operation");
+const History_1 = require("./History");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const events_1 = require("../events");
+//工作区模型
+class Workspace {
+    constructor(engine, props) {
+        this.engine = engine;
+        this.props = props;
+        this.id = props.id || (0, designable_shared_1.uid)();
+        this.title = props.title;
+        this.description = props.description;
+        this.viewport = new Viewport_1.Viewport({
+            engine: this.engine,
+            workspace: this,
+            viewportElement: props.viewportElement,
+            contentWindow: props.contentWindow,
+            nodeIdAttrName: this.engine.props.nodeIdAttrName,
+            moveSensitive: true,
+            moveInsertionType: 'all',
+        });
+        this.outline = new Viewport_1.Viewport({
+            engine: this.engine,
+            workspace: this,
+            viewportElement: props.viewportElement,
+            contentWindow: props.contentWindow,
+            nodeIdAttrName: this.engine.props.outlineNodeIdAttrName,
+            moveSensitive: false,
+            moveInsertionType: 'block',
+        });
+        this.operation = new Operation_1.Operation(this);
+        this.history = new History_1.History(this, {
+            onPush: (item) => {
+                this.operation.dispatch(new events_1.HistoryPushEvent(item));
+            },
+            onRedo: (item) => {
+                this.operation.hover.clear();
+                this.operation.dispatch(new events_1.HistoryRedoEvent(item));
+            },
+            onUndo: (item) => {
+                this.operation.hover.clear();
+                this.operation.dispatch(new events_1.HistoryUndoEvent(item));
+            },
+            onGoto: (item) => {
+                this.operation.hover.clear();
+                this.operation.dispatch(new events_1.HistoryGotoEvent(item));
+            },
+        });
+    }
+    getEventContext() {
+        return {
+            workbench: this.engine.workbench,
+            workspace: this,
+            engine: this.engine,
+            viewport: this.viewport,
+        };
+    }
+    attachEvents(container, contentWindow) {
+        this.engine.attachEvents(container, contentWindow, this.getEventContext());
+    }
+    detachEvents(container) {
+        this.engine.detachEvents(container);
+    }
+    dispatch(event) {
+        return this.engine.dispatch(event, this.getEventContext());
+    }
+    serialize() {
+        return {
+            id: this.id,
+            title: this.title,
+            description: this.description,
+            operation: this.operation.serialize(),
+        };
+    }
+    from(workspace) {
+        if (!workspace)
+            return;
+        if (workspace.operation) {
+            this.operation.from(workspace.operation);
+        }
+        if (workspace.id) {
+            this.id = workspace.id;
+        }
+        if (workspace.title) {
+            this.title = workspace.title;
+        }
+        if (workspace.description) {
+            this.description = workspace.description;
+        }
+    }
+}
+exports.Workspace = Workspace;

package/lib/models/index.d.ts

@@ -0,0 +1,13 @@
+export * from './Engine';
+export * from './Screen';
+export * from './Cursor';
+export * from './Operation';
+export * from './Viewport';
+export * from './TreeNode';
+export * from './Workbench';
+export * from './Workspace';
+export * from './Selection';
+export * from './MoveHelper';
+export * from './Keyboard';
+export * from './Shortcut';
+export * from './History';

package/lib/models/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Engine"), exports);
+__exportStar(require("./Screen"), exports);
+__exportStar(require("./Cursor"), exports);
+__exportStar(require("./Operation"), exports);
+__exportStar(require("./Viewport"), exports);
+__exportStar(require("./TreeNode"), exports);
+__exportStar(require("./Workbench"), exports);
+__exportStar(require("./Workspace"), exports);
+__exportStar(require("./Selection"), exports);
+__exportStar(require("./MoveHelper"), exports);
+__exportStar(require("./Keyboard"), exports);
+__exportStar(require("./Shortcut"), exports);
+__exportStar(require("./History"), exports);

package/lib/presets.d.ts

@@ -0,0 +1,4 @@
+import { DragDropDriver, MouseClickDriver, MouseMoveDriver, ViewportResizeDriver, ViewportScrollDriver, KeyboardDriver } from './drivers';
+export declare const DEFAULT_EFFECTS: ((engine: import("./models").Engine) => void)[];
+export declare const DEFAULT_DRIVERS: (typeof DragDropDriver | typeof MouseClickDriver | typeof MouseMoveDriver | typeof ViewportResizeDriver | typeof ViewportScrollDriver | typeof KeyboardDriver)[];
+export declare const DEFAULT_SHORTCUTS: import("./models").Shortcut[];

package/lib/presets.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SHORTCUTS = exports.DEFAULT_DRIVERS = exports.DEFAULT_EFFECTS = void 0;
+const drivers_1 = require("./drivers");
+const effects_1 = require("./effects");
+const shortcuts_1 = require("./shortcuts");
+exports.DEFAULT_EFFECTS = [
+    effects_1.useFreeSelectionEffect,
+    effects_1.useCursorEffect,
+    effects_1.useViewportEffect,
+    effects_1.useDragDropEffect,
+    effects_1.useSelectionEffect,
+    effects_1.useKeyboardEffect,
+    effects_1.useAutoScrollEffect,
+    effects_1.useWorkspaceEffect,
+    effects_1.useContentEditableEffect,
+    effects_1.useTranslateEffect,
+    effects_1.useResizeEffect,
+];
+exports.DEFAULT_DRIVERS = [
+    drivers_1.MouseMoveDriver,
+    drivers_1.DragDropDriver,
+    drivers_1.MouseClickDriver,
+    drivers_1.ViewportResizeDriver,
+    drivers_1.ViewportScrollDriver,
+    drivers_1.KeyboardDriver,
+];
+exports.DEFAULT_SHORTCUTS = [
+    shortcuts_1.PreventCommandX,
+    shortcuts_1.SelectNodes,
+    shortcuts_1.SelectAllNodes,
+    shortcuts_1.SelectSameTypeNodes,
+    shortcuts_1.DeleteNodes,
+    shortcuts_1.CopyNodes,
+    shortcuts_1.PasteNodes,
+    shortcuts_1.SelectPrevNode,
+    shortcuts_1.SelectNextNode,
+    shortcuts_1.UndoMutation,
+    shortcuts_1.RedoMutation,
+    shortcuts_1.CursorSwitchSelection,
+];

package/lib/registry.d.ts

@@ -0,0 +1,16 @@
+import { IDesignerBehaviors, IDesignerLocales, IDesignerIcons, IBehaviorLike, IBehavior } from './types';
+import { TreeNode } from './models';
+declare const DESIGNER_GlobalRegistry: {
+    setDesignerLanguage: (lang: string) => void;
+    setDesignerBehaviors: (behaviors: IBehaviorLike[]) => void;
+    getDesignerBehaviors: (node: TreeNode) => IBehavior[];
+    getDesignerIcon: (name: string) => any;
+    getDesignerLanguage: () => string;
+    getDesignerMessage: (token: string, locales?: IDesignerLocales) => any;
+    registerDesignerIcons: (map: IDesignerIcons) => void;
+    registerDesignerLocales: (...packages: IDesignerLocales[]) => void;
+    registerDesignerBehaviors: (...packages: IDesignerBehaviors[]) => void;
+};
+export type IDesignerRegistry = typeof DESIGNER_GlobalRegistry;
+export declare const GlobalRegistry: IDesignerRegistry;
+export {};

package/lib/registry.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalRegistry = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const path_1 = require("@formily/path");
+const reactive_1 = require("@formily/reactive");
+const internals_1 = require("./internals");
+const externals_1 = require("./externals");
+const externals_2 = require("./externals");
+const getISOCode = (language) => {
+    let isoCode = DESIGNER_LANGUAGE_STORE.value;
+    let lang = (0, internals_1.lowerSnake)(language);
+    if (DESIGNER_LOCALES_STORE.value[lang]) {
+        return lang;
+    }
+    (0, designable_shared_1.each)(DESIGNER_LOCALES_STORE.value, (_, key) => {
+        if (key.indexOf(lang) > -1 || String(lang).indexOf(key) > -1) {
+            isoCode = key;
+            return false;
+        }
+    });
+    return isoCode;
+};
+const reSortBehaviors = (target, sources) => {
+    const findTargetBehavior = (behavior) => target.includes(behavior);
+    const findSourceBehavior = (name) => {
+        for (let key in sources) {
+            const { Behavior } = sources[key];
+            for (let i = 0; i < Behavior.length; i++) {
+                if (Behavior[i].name === name)
+                    return Behavior[i];
+            }
+        }
+    };
+    (0, designable_shared_1.each)(sources, (item) => {
+        if (!item)
+            return;
+        if (!(0, externals_1.isBehaviorHost)(item))
+            return;
+        const { Behavior } = item;
+        (0, designable_shared_1.each)(Behavior, (behavior) => {
+            if (findTargetBehavior(behavior))
+                return;
+            const name = behavior.name;
+            (0, designable_shared_1.each)(behavior.extends, (dep) => {
+                const behavior = findSourceBehavior(dep);
+                if (!behavior)
+                    throw new Error(`No ${dep} behavior that ${name} depends on`);
+                if (!findTargetBehavior(behavior)) {
+                    target.unshift(behavior);
+                }
+            });
+            target.push(behavior);
+        });
+    });
+};
+const DESIGNER_BEHAVIORS_STORE = reactive_1.observable.ref([]);
+const DESIGNER_ICONS_STORE = reactive_1.observable.ref({});
+const DESIGNER_LOCALES_STORE = reactive_1.observable.ref({});
+const DESIGNER_LANGUAGE_STORE = reactive_1.observable.ref((0, internals_1.getBrowserLanguage)());
+const DESIGNER_GlobalRegistry = {
+    setDesignerLanguage: (lang) => {
+        DESIGNER_LANGUAGE_STORE.value = lang;
+    },
+    setDesignerBehaviors: (behaviors) => {
+        DESIGNER_BEHAVIORS_STORE.value = behaviors.reduce((buf, behavior) => {
+            if ((0, externals_1.isBehaviorHost)(behavior)) {
+                return buf.concat(behavior.Behavior);
+            }
+            else if ((0, externals_2.isBehaviorList)(behavior)) {
+                return buf.concat(behavior);
+            }
+            return buf;
+        }, []);
+    },
+    getDesignerBehaviors: (node) => {
+        return DESIGNER_BEHAVIORS_STORE.value.filter((pattern) => pattern.selector(node));
+    },
+    getDesignerIcon: (name) => {
+        return DESIGNER_ICONS_STORE[name];
+    },
+    getDesignerLanguage: () => {
+        return getISOCode(DESIGNER_LANGUAGE_STORE.value);
+    },
+    getDesignerMessage: (token, locales) => {
+        const lang = getISOCode(DESIGNER_LANGUAGE_STORE.value);
+        const locale = locales ? locales[lang] : DESIGNER_LOCALES_STORE.value[lang];
+        if (!locale) {
+            for (let key in DESIGNER_LOCALES_STORE.value) {
+                const message = path_1.Path.getIn(DESIGNER_LOCALES_STORE.value[key], (0, internals_1.lowerSnake)(token));
+                if (message)
+                    return message;
+            }
+            return;
+        }
+        return path_1.Path.getIn(locale, (0, internals_1.lowerSnake)(token));
+    },
+    registerDesignerIcons: (map) => {
+        Object.assign(DESIGNER_ICONS_STORE, map);
+    },
+    registerDesignerLocales: (...packages) => {
+        packages.forEach((locales) => {
+            (0, internals_1.mergeLocales)(DESIGNER_LOCALES_STORE.value, locales);
+        });
+    },
+    registerDesignerBehaviors: (...packages) => {
+        const results = [];
+        packages.forEach((sources) => {
+            reSortBehaviors(results, sources);
+        });
+        if (results.length) {
+            DESIGNER_BEHAVIORS_STORE.value = results;
+        }
+    },
+};
+exports.GlobalRegistry = DESIGNER_GlobalRegistry;

package/lib/shortcuts/CursorSwitch.d.ts

@@ -0,0 +1,2 @@
+import { Shortcut } from '../models';
+export declare const CursorSwitchSelection: Shortcut;

package/lib/shortcuts/CursorSwitch.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CursorSwitchSelection = void 0;
+const models_1 = require("../models");
+exports.CursorSwitchSelection = new models_1.Shortcut({
+    codes: [models_1.KeyCode.Shift, models_1.KeyCode.S],
+    handler(context) {
+        const engine = context?.engine;
+        if (engine) {
+            engine.cursor.setType(models_1.CursorType.Selection);
+        }
+    },
+});

package/lib/shortcuts/MultiSelection.d.ts

@@ -0,0 +1,5 @@
+import { Shortcut } from '../models';
+export declare const SelectNodes: Shortcut;
+export declare const SelectSameTypeNodes: Shortcut;
+export declare const PreventCommandX: Shortcut;
+export declare const SelectAllNodes: Shortcut;

package/lib/shortcuts/MultiSelection.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectAllNodes = exports.PreventCommandX = exports.SelectSameTypeNodes = exports.SelectNodes = void 0;
+const models_1 = require("../models");
+exports.SelectNodes = new models_1.Shortcut({
+    codes: [[models_1.KeyCode.Meta], [models_1.KeyCode.Control]],
+});
+exports.SelectSameTypeNodes = new models_1.Shortcut({
+    codes: [models_1.KeyCode.Shift],
+});
+exports.PreventCommandX = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Meta, models_1.KeyCode.X],
+        [models_1.KeyCode.Control, models_1.KeyCode.X],
+    ],
+});
+exports.SelectAllNodes = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Meta, models_1.KeyCode.A],
+        [models_1.KeyCode.Control, models_1.KeyCode.A],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            const tree = operation.tree;
+            const selection = operation.selection;
+            selection.batchSelect(tree.descendants);
+        }
+    },
+});

package/lib/shortcuts/NodeMutation.d.ts

@@ -0,0 +1,7 @@
+import { Shortcut } from '../models';
+/**
+ * 快捷删除，快捷复制粘贴
+ */
+export declare const DeleteNodes: Shortcut;
+export declare const CopyNodes: Shortcut;
+export declare const PasteNodes: Shortcut;

package/lib/shortcuts/NodeMutation.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasteNodes = exports.CopyNodes = exports.DeleteNodes = void 0;
+const models_1 = require("../models");
+/**
+ * 快捷删除，快捷复制粘贴
+ */
+exports.DeleteNodes = new models_1.Shortcut({
+    codes: [[models_1.KeyCode.Backspace], [models_1.KeyCode.Delete]],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            models_1.TreeNode.remove(operation.selection.selectedNodes);
+        }
+    },
+});
+const Clipboard = {
+    nodes: [],
+};
+exports.CopyNodes = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Meta, models_1.KeyCode.C],
+        [models_1.KeyCode.Control, models_1.KeyCode.C],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            Clipboard.nodes = operation.selection.selectedNodes;
+        }
+    },
+});
+exports.PasteNodes = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Meta, models_1.KeyCode.V],
+        [models_1.KeyCode.Control, models_1.KeyCode.V],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            models_1.TreeNode.clone(Clipboard.nodes);
+        }
+    },
+});

package/lib/shortcuts/QuickSelection.d.ts

@@ -0,0 +1,3 @@
+import { Shortcut } from '../models';
+export declare const SelectPrevNode: Shortcut;
+export declare const SelectNextNode: Shortcut;

package/lib/shortcuts/QuickSelection.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectNextNode = exports.SelectPrevNode = void 0;
+const models_1 = require("../models");
+const findBottomLastChild = (node) => {
+    if (!node)
+        return node;
+    if (node.lastChild) {
+        return findBottomLastChild(node.lastChild);
+    }
+    return node;
+};
+const findTopParentNext = (node) => {
+    if (!node.parent)
+        return node;
+    if (node.parent?.next)
+        return node.parent.next;
+    return findTopParentNext(node.parent);
+};
+exports.SelectPrevNode = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Up],
+        [models_1.KeyCode.PageUp],
+        [models_1.KeyCode.ArrowUp],
+        [models_1.KeyCode.Left],
+        [models_1.KeyCode.LeftWindowKey],
+        [models_1.KeyCode.ArrowLeft],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            const tree = operation.tree;
+            const selection = operation.selection;
+            const selectedNode = tree.findById(selection.last);
+            if (selectedNode) {
+                const previousNode = selectedNode.previous;
+                if (previousNode) {
+                    const bottom = findBottomLastChild(previousNode);
+                    if (bottom) {
+                        selection.select(bottom);
+                    }
+                    else {
+                        selection.select(previousNode);
+                    }
+                }
+                else if (selectedNode.parent) {
+                    selection.select(selectedNode.parent);
+                }
+                else {
+                    const bottom = findBottomLastChild(selectedNode.lastChild);
+                    if (bottom) {
+                        selection.select(bottom);
+                    }
+                }
+            }
+        }
+    },
+});
+exports.SelectNextNode = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Down],
+        [models_1.KeyCode.PageDown],
+        [models_1.KeyCode.ArrowDown],
+        [models_1.KeyCode.Right],
+        [models_1.KeyCode.RightWindowKey],
+        [models_1.KeyCode.ArrowRight],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            const tree = operation.tree;
+            const selection = operation.selection;
+            const selectedNode = tree.findById(selection.last);
+            if (selectedNode) {
+                const nextNode = selectedNode.firstChild
+                    ? selectedNode.firstChild
+                    : selectedNode.next;
+                if (nextNode) {
+                    selection.select(nextNode);
+                }
+                else {
+                    selection.select(findTopParentNext(selectedNode));
+                }
+            }
+        }
+    },
+});

package/lib/shortcuts/UndoRedo.d.ts

@@ -0,0 +1,3 @@
+import { Shortcut } from '../models';
+export declare const UndoMutation: Shortcut;
+export declare const RedoMutation: Shortcut;

package/lib/shortcuts/UndoRedo.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedoMutation = exports.UndoMutation = void 0;
+const models_1 = require("../models");
+exports.UndoMutation = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Meta, models_1.KeyCode.Z],
+        [models_1.KeyCode.Control, models_1.KeyCode.Z],
+    ],
+    handler(context) {
+        const workspace = context?.workspace;
+        if (workspace) {
+            workspace.history.undo();
+        }
+        workspace.operation.hover.clear();
+    },
+});
+exports.RedoMutation = new models_1.Shortcut({
+    codes: [
+        [models_1.KeyCode.Meta, models_1.KeyCode.Shift, models_1.KeyCode.Z],
+        [models_1.KeyCode.Control, models_1.KeyCode.Shift, models_1.KeyCode.Z],
+    ],
+    handler(context) {
+        const workspace = context?.workspace;
+        if (workspace) {
+            workspace.history.redo();
+        }
+        workspace.operation.hover.clear();
+    },
+});

package/lib/shortcuts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MultiSelection';
+export * from './NodeMutation';
+export * from './UndoRedo';
+export * from './CursorSwitch';
+export * from './QuickSelection';

package/lib/shortcuts/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MultiSelection"), exports);
+__exportStar(require("./NodeMutation"), exports);
+__exportStar(require("./UndoRedo"), exports);
+__exportStar(require("./CursorSwitch"), exports);
+__exportStar(require("./QuickSelection"), exports);