@thienvu18/designable-core 2.0.0

package/lib/externals.d.ts

@@ -0,0 +1,12 @@
+import { Engine } from './models';
+import { IEngineProps, IResourceCreator, IBehaviorCreator, IDesignerLocales, IResource, IBehavior, IBehaviorHost, IResourceHost } from './types';
+export declare const isBehaviorHost: (val: any) => val is IBehaviorHost;
+export declare const isBehaviorList: (val: any) => val is IBehavior[];
+export declare const isBehavior: (val: any) => val is IBehavior;
+export declare const isResourceHost: (val: any) => val is IResourceHost;
+export declare const isResourceList: (val: any) => val is IResource[];
+export declare const isResource: (val: any) => val is IResource;
+export declare const createLocales: (...packages: IDesignerLocales[]) => {};
+export declare const createBehavior: (...behaviors: Array<IBehaviorCreator | IBehaviorCreator[]>) => IBehavior[];
+export declare const createResource: (...sources: IResourceCreator[]) => IResource[];
+export declare const createDesigner: (props?: IEngineProps<Engine>) => Engine;

package/lib/externals.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDesigner = exports.createResource = exports.createBehavior = exports.createLocales = exports.isResource = exports.isResourceList = exports.isResourceHost = exports.isBehavior = exports.isBehaviorList = exports.isBehaviorHost = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const reactive_1 = require("@formily/reactive");
+const presets_1 = require("./presets");
+const models_1 = require("./models");
+const internals_1 = require("./internals");
+const isBehaviorHost = (val) => val?.Behavior && (0, exports.isBehaviorList)(val.Behavior);
+exports.isBehaviorHost = isBehaviorHost;
+const isBehaviorList = (val) => Array.isArray(val) && val.every(exports.isBehavior);
+exports.isBehaviorList = isBehaviorList;
+const isBehavior = (val) => val?.name ||
+    val?.selector ||
+    val?.extends ||
+    val?.designerProps ||
+    val?.designerLocales;
+exports.isBehavior = isBehavior;
+const isResourceHost = (val) => val?.Resource && (0, exports.isResourceList)(val.Resource);
+exports.isResourceHost = isResourceHost;
+const isResourceList = (val) => Array.isArray(val) && val.every(exports.isResource);
+exports.isResourceList = isResourceList;
+const isResource = (val) => val?.node && !!val.node.isSourceNode && val.node instanceof models_1.TreeNode;
+exports.isResource = isResource;
+const createLocales = (...packages) => {
+    const results = {};
+    packages.forEach((locales) => {
+        (0, internals_1.mergeLocales)(results, locales);
+    });
+    return results;
+};
+exports.createLocales = createLocales;
+const createBehavior = (...behaviors) => {
+    return behaviors.reduce((buf, behavior) => {
+        if ((0, designable_shared_1.isArr)(behavior))
+            return buf.concat((0, exports.createBehavior)(...behavior));
+        const { selector } = behavior || {};
+        if (!selector)
+            return buf;
+        if (typeof selector === 'string') {
+            behavior.selector = (node) => node.componentName === selector;
+        }
+        return buf.concat(behavior);
+    }, []);
+};
+exports.createBehavior = createBehavior;
+const createResource = (...sources) => {
+    return sources.reduce((buf, source) => {
+        return buf.concat({
+            ...source,
+            node: new models_1.TreeNode({
+                componentName: '$$ResourceNode$$',
+                isSourceNode: true,
+                children: source.elements || [],
+            }),
+        });
+    }, []);
+};
+exports.createResource = createResource;
+const createDesigner = (props = {}) => {
+    const drivers = props.drivers || [];
+    const effects = props.effects || [];
+    const shortcuts = props.shortcuts || [];
+    return (0, reactive_1.untracked)(() => new models_1.Engine({
+        ...props,
+        effects: [...effects, ...presets_1.DEFAULT_EFFECTS],
+        drivers: [...drivers, ...presets_1.DEFAULT_DRIVERS],
+        shortcuts: [...shortcuts, ...presets_1.DEFAULT_SHORTCUTS],
+    }));
+};
+exports.createDesigner = createDesigner;

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './exports';

package/lib/index.js

@@ -0,0 +1,43 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 });
+const Core = __importStar(require("./exports"));
+__exportStar(require("./exports"), exports);
+const designable_shared_1 = require("@thienvu18/designable-shared");
+if (designable_shared_1.globalThisPolyfill?.['Designable']?.['Core']) {
+    if (module.exports) {
+        module.exports = {
+            __esModule: true,
+            ...designable_shared_1.globalThisPolyfill['Designable']['Core'],
+        };
+    }
+}
+else {
+    designable_shared_1.globalThisPolyfill['Designable'] = designable_shared_1.globalThisPolyfill['Designable'] || {};
+    designable_shared_1.globalThisPolyfill['Designable'].Core = Core;
+}

package/lib/internals.d.ts

@@ -0,0 +1,3 @@
+export declare const lowerSnake: (str: string) => string;
+export declare const mergeLocales: (target: any, source: any) => any;
+export declare const getBrowserLanguage: () => any;

package/lib/internals.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBrowserLanguage = exports.mergeLocales = exports.lowerSnake = void 0;
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const designable_shared_2 = require("@thienvu18/designable-shared");
+const lowerSnake = (str) => {
+    return String(str).replace(/\s+/g, '_').toLocaleLowerCase();
+};
+exports.lowerSnake = lowerSnake;
+const mergeLocales = (target, source) => {
+    if ((0, designable_shared_1.isPlainObj)(target) && (0, designable_shared_1.isPlainObj)(source)) {
+        (0, designable_shared_1.each)(source, function (value, key) {
+            const token = (0, exports.lowerSnake)(key);
+            const messages = (0, exports.mergeLocales)(target[key] || target[token], value);
+            target[token] = messages;
+        });
+        return target;
+    }
+    else if ((0, designable_shared_1.isPlainObj)(source)) {
+        const result = Array.isArray(source) ? [] : {};
+        (0, designable_shared_1.each)(source, function (value, key) {
+            const messages = (0, exports.mergeLocales)(undefined, value);
+            result[(0, exports.lowerSnake)(key)] = messages;
+        });
+        return result;
+    }
+    return source;
+};
+exports.mergeLocales = mergeLocales;
+const getBrowserLanguage = () => {
+    /* istanbul ignore next */
+    if (!designable_shared_2.globalThisPolyfill.navigator) {
+        return 'en';
+    }
+    return (designable_shared_2.globalThisPolyfill.navigator['browserlanguage'] ||
+        designable_shared_2.globalThisPolyfill.navigator?.language ||
+        'en');
+};
+exports.getBrowserLanguage = getBrowserLanguage;

package/lib/models/Cursor.d.ts

@@ -0,0 +1,60 @@
+import { Engine } from './Engine';
+export declare enum CursorStatus {
+    Normal = "NORMAL",
+    DragStart = "DRAG_START",
+    Dragging = "DRAGGING",
+    DragStop = "DRAG_STOP"
+}
+export declare enum CursorDragType {
+    Move = "MOVE",
+    Resize = "RESIZE",
+    Rotate = "ROTATE",
+    Scale = "SCALE",
+    Translate = "TRANSLATE",
+    Round = "ROUND"
+}
+export declare enum CursorType {
+    Normal = "NORMAL",
+    Selection = "SELECTION",
+    Sketch = "SKETCH"
+}
+export interface ICursorPosition {
+    pageX?: number;
+    pageY?: number;
+    clientX?: number;
+    clientY?: number;
+    topPageX?: number;
+    topPageY?: number;
+    topClientX?: number;
+    topClientY?: number;
+}
+export interface ICursor {
+    status?: CursorStatus;
+    position?: ICursorPosition;
+    dragStartPosition?: ICursorPosition;
+    dragEndPosition?: ICursorPosition;
+    view?: Window;
+}
+export declare class Cursor {
+    engine: Engine;
+    type: CursorType | string;
+    dragType: CursorDragType | string;
+    status: CursorStatus;
+    position: ICursorPosition;
+    dragStartPosition: ICursorPosition;
+    dragEndPosition: ICursorPosition;
+    dragAtomDelta: ICursorPosition;
+    dragStartToCurrentDelta: ICursorPosition;
+    dragStartToEndDelta: ICursorPosition;
+    view: Window;
+    constructor(engine: Engine);
+    makeObservable(): void;
+    get speed(): number;
+    setStatus(status: CursorStatus): void;
+    setType(type: CursorType | string): void;
+    setDragType(type: CursorDragType | string): void;
+    setStyle(style: string): void;
+    setPosition(position?: ICursorPosition): void;
+    setDragStartPosition(position?: ICursorPosition): void;
+    setDragEndPosition(position?: ICursorPosition): void;
+}

package/lib/models/Cursor.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cursor = exports.CursorType = exports.CursorDragType = exports.CursorStatus = void 0;
+const reactive_1 = require("@formily/reactive");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+var CursorStatus;
+(function (CursorStatus) {
+    CursorStatus["Normal"] = "NORMAL";
+    CursorStatus["DragStart"] = "DRAG_START";
+    CursorStatus["Dragging"] = "DRAGGING";
+    CursorStatus["DragStop"] = "DRAG_STOP";
+})(CursorStatus || (exports.CursorStatus = CursorStatus = {}));
+var CursorDragType;
+(function (CursorDragType) {
+    CursorDragType["Move"] = "MOVE";
+    CursorDragType["Resize"] = "RESIZE";
+    CursorDragType["Rotate"] = "ROTATE";
+    CursorDragType["Scale"] = "SCALE";
+    CursorDragType["Translate"] = "TRANSLATE";
+    CursorDragType["Round"] = "ROUND";
+})(CursorDragType || (exports.CursorDragType = CursorDragType = {}));
+var CursorType;
+(function (CursorType) {
+    CursorType["Normal"] = "NORMAL";
+    CursorType["Selection"] = "SELECTION";
+    CursorType["Sketch"] = "SKETCH";
+})(CursorType || (exports.CursorType = CursorType = {}));
+const DEFAULT_POSITION = {
+    pageX: 0,
+    pageY: 0,
+    clientX: 0,
+    clientY: 0,
+    topPageX: 0,
+    topPageY: 0,
+    topClientX: 0,
+    topClientY: 0,
+};
+const setCursorStyle = (contentWindow, style) => {
+    const currentRoot = document?.getElementsByTagName?.('html')?.[0];
+    const root = contentWindow?.document?.getElementsByTagName('html')?.[0];
+    if (root && root.style.cursor !== style) {
+        root.style.cursor = style;
+    }
+    if (currentRoot && currentRoot.style.cursor !== style) {
+        currentRoot.style.cursor = style;
+    }
+};
+const calcPositionDelta = (end, start) => {
+    return Object.keys(end || {}).reduce((buf, key) => {
+        if ((0, designable_shared_1.isValidNumber)(end?.[key]) && (0, designable_shared_1.isValidNumber)(start?.[key])) {
+            buf[key] = end[key] - start[key];
+        }
+        else {
+            buf[key] = end[key];
+        }
+        return buf;
+    }, {});
+};
+class Cursor {
+    constructor(engine) {
+        this.type = CursorType.Normal;
+        this.dragType = CursorDragType.Move;
+        this.status = CursorStatus.Normal;
+        this.position = DEFAULT_POSITION;
+        this.dragAtomDelta = DEFAULT_POSITION;
+        this.dragStartToCurrentDelta = DEFAULT_POSITION;
+        this.dragStartToEndDelta = DEFAULT_POSITION;
+        this.view = designable_shared_1.globalThisPolyfill;
+        this.engine = engine;
+        this.makeObservable();
+    }
+    makeObservable() {
+        (0, reactive_1.define)(this, {
+            type: reactive_1.observable.ref,
+            dragType: reactive_1.observable.ref,
+            status: reactive_1.observable.ref,
+            position: reactive_1.observable.ref,
+            dragStartPosition: reactive_1.observable.ref,
+            dragEndPosition: reactive_1.observable.ref,
+            dragAtomDelta: reactive_1.observable.ref,
+            dragStartToCurrentDelta: reactive_1.observable.ref,
+            dragStartToEndDelta: reactive_1.observable.ref,
+            view: reactive_1.observable.ref,
+            setStyle: reactive_1.action,
+            setPosition: reactive_1.action,
+            setStatus: reactive_1.action,
+            setType: reactive_1.action,
+        });
+    }
+    get speed() {
+        return Math.sqrt(Math.pow(this.dragAtomDelta.clientX, 2) +
+            Math.pow(this.dragAtomDelta.clientY, 2));
+    }
+    setStatus(status) {
+        this.status = status;
+    }
+    setType(type) {
+        this.type = type;
+    }
+    setDragType(type) {
+        this.dragType = type;
+    }
+    setStyle(style) {
+        this.engine.workbench.eachWorkspace((workspace) => {
+            setCursorStyle(workspace.viewport.contentWindow, style);
+        });
+    }
+    setPosition(position) {
+        this.dragAtomDelta = calcPositionDelta(this.position, position);
+        this.position = { ...position };
+        if (this.status === CursorStatus.Dragging) {
+            this.dragStartToCurrentDelta = calcPositionDelta(this.position, this.dragStartPosition);
+        }
+    }
+    setDragStartPosition(position) {
+        if (position) {
+            this.dragStartPosition = { ...position };
+        }
+        else {
+            this.dragStartPosition = null;
+            this.dragStartToCurrentDelta = DEFAULT_POSITION;
+        }
+    }
+    setDragEndPosition(position) {
+        if (!this.dragStartPosition)
+            return;
+        if (position) {
+            this.dragEndPosition = { ...position };
+            this.dragStartToEndDelta = calcPositionDelta(this.dragStartPosition, this.dragEndPosition);
+        }
+        else {
+            this.dragEndPosition = null;
+            this.dragStartToEndDelta = DEFAULT_POSITION;
+        }
+    }
+}
+exports.Cursor = Cursor;

package/lib/models/Engine.d.ts

@@ -0,0 +1,29 @@
+import { IEngineProps } from '../types';
+import { ITreeNode, TreeNode } from './TreeNode';
+import { Workbench } from './Workbench';
+import { Cursor } from './Cursor';
+import { Keyboard } from './Keyboard';
+import { Screen } from './Screen';
+import { Event } from '@thienvu18/designable-shared';
+/**
+ * 设计器引擎
+ */
+export declare class Engine extends Event {
+    id: string;
+    props: IEngineProps<Engine>;
+    cursor: Cursor;
+    workbench: Workbench;
+    keyboard: Keyboard;
+    screen: Screen;
+    constructor(props: IEngineProps<Engine>);
+    init(): void;
+    setCurrentTree(tree?: ITreeNode): void;
+    getCurrentTree(): TreeNode;
+    getAllSelectedNodes(): TreeNode[];
+    findNodeById(id: string): TreeNode;
+    findMovingNodes(): TreeNode[];
+    createNode(node: ITreeNode, parent?: TreeNode): TreeNode;
+    mount(): void;
+    unmount(): void;
+    static defaultProps: IEngineProps<Engine>;
+}

package/lib/models/Engine.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Engine = void 0;
+const TreeNode_1 = require("./TreeNode");
+const Workbench_1 = require("./Workbench");
+const Cursor_1 = require("./Cursor");
+const Keyboard_1 = require("./Keyboard");
+const Screen_1 = require("./Screen");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+/**
+ * 设计器引擎
+ */
+class Engine extends designable_shared_1.Event {
+    constructor(props) {
+        super(props);
+        this.props = {
+            ...Engine.defaultProps,
+            ...props,
+        };
+        this.init();
+        this.id = (0, designable_shared_1.uid)();
+    }
+    init() {
+        this.workbench = new Workbench_1.Workbench(this);
+        this.screen = new Screen_1.Screen(this);
+        this.cursor = new Cursor_1.Cursor(this);
+        this.keyboard = new Keyboard_1.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_1.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_1.TreeNode(node, parent);
+    }
+    mount() {
+        this.attachEvents(designable_shared_1.globalThisPolyfill);
+    }
+    unmount() {
+        this.detachEvents();
+    }
+}
+exports.Engine = Engine;
+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: Screen_1.ScreenType.PC,
+};

package/lib/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/lib/models/History.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.History = void 0;
+const reactive_1 = require("@formily/reactive");
+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() {
+        (0, reactive_1.define)(this, {
+            current: reactive_1.observable.ref,
+            history: reactive_1.observable.shallow,
+            push: reactive_1.action,
+            undo: reactive_1.action,
+            redo: reactive_1.action,
+            goTo: reactive_1.action,
+            clear: reactive_1.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;
+    }
+}
+exports.History = History;

package/lib/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/lib/models/Hover.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hover = void 0;
+const reactive_1 = require("@formily/reactive");
+const events_1 = require("../events");
+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 events_1.HoverNodeEvent({
+                target: this.operation.tree,
+                source: this.node,
+            }));
+        }
+    }
+    makeObservable() {
+        (0, reactive_1.define)(this, {
+            node: reactive_1.observable.ref,
+            setHover: reactive_1.action,
+            clear: reactive_1.action,
+        });
+    }
+}
+exports.Hover = Hover;