@thienvu18/designable-core 2.0.0

package/esm/effects/useContentEditableEffect.js

@@ -0,0 +1,163 @@
+import { Path } from '@formily/path';
+import { requestIdle, globalThisPolyfill } from '@thienvu18/designable-shared';
+import { MouseDoubleClickEvent, MouseClickEvent } from '../events';
+function getAllRanges(sel) {
+    const ranges = [];
+    for (let i = 0; i < sel.rangeCount; i++) {
+        const range = sel.getRangeAt(i);
+        ranges[i] = {
+            collapsed: range.collapsed,
+            startOffset: range.startOffset,
+            endOffset: range.endOffset,
+        };
+    }
+    return ranges;
+}
+function setEndOfContenteditable(contentEditableElement) {
+    const range = document.createRange();
+    range.selectNodeContents(contentEditableElement);
+    range.collapse(false);
+    const selection = globalThisPolyfill.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function createCaretCache(el) {
+    const currentSelection = globalThisPolyfill.getSelection();
+    if (currentSelection.containsNode(el))
+        return;
+    const ranges = getAllRanges(currentSelection);
+    return (offset = 0) => {
+        const sel = globalThisPolyfill.getSelection();
+        const firstNode = el.childNodes[0];
+        if (!firstNode)
+            return;
+        sel.removeAllRanges();
+        ranges.forEach((item) => {
+            const range = document.createRange();
+            range.collapse(item.collapsed);
+            range.setStart(firstNode, item.startOffset + offset);
+            range.setEnd(firstNode, item.endOffset + offset);
+            sel.addRange(range);
+        });
+    };
+}
+export const useContentEditableEffect = (engine) => {
+    const globalState = {
+        activeElements: new Map(),
+        queue: [],
+        requestTimer: null,
+        isComposition: false,
+    };
+    function onKeyDownHandler(event) {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    function onInputHandler(event) {
+        const node = globalState.activeElements.get(this);
+        event.stopPropagation();
+        event.preventDefault();
+        if (node) {
+            const target = event.target;
+            const handler = () => {
+                globalState.queue.length = 0;
+                if (globalState.isComposition)
+                    return;
+                const restore = createCaretCache(target);
+                Path.setIn(node.props, this.getAttribute(engine.props.contentEditableAttrName), target?.textContent);
+                requestIdle(() => {
+                    node.takeSnapshot('update:node:props');
+                    restore();
+                });
+            };
+            globalState.queue.push(handler);
+            clearTimeout(globalState.requestTimer);
+            globalState.requestTimer = setTimeout(handler, 600);
+        }
+    }
+    function onSelectionChangeHandler() {
+        clearTimeout(globalState.requestTimer);
+        globalState.requestTimer = setTimeout(globalState.queue[globalState.queue.length - 1], 600);
+    }
+    function onCompositionHandler(event) {
+        if (event.type === 'compositionend') {
+            globalState.isComposition = false;
+            onInputHandler(event);
+        }
+        else {
+            clearTimeout(globalState.requestTimer);
+            globalState.isComposition = true;
+        }
+    }
+    function onPastHandler(event) {
+        event.preventDefault();
+        const node = globalState.activeElements.get(this);
+        const text = event.clipboardData.getData('text');
+        const selObj = globalThisPolyfill.getSelection();
+        const target = event.target;
+        const selRange = selObj.getRangeAt(0);
+        const restore = createCaretCache(target);
+        selRange.deleteContents();
+        selRange.insertNode(document.createTextNode(text));
+        Path.setIn(node.props, this.getAttribute(engine.props.contentEditableAttrName), target.textContent);
+        restore(text.length);
+    }
+    function findTargetNodeId(element) {
+        if (!element)
+            return;
+        const nodeId = element.getAttribute(engine.props.contentEditableNodeIdAttrName);
+        if (nodeId)
+            return nodeId;
+        const parent = element.closest(`*[${engine.props.nodeIdAttrName}]`);
+        if (parent)
+            return parent.getAttribute(engine.props.nodeIdAttrName);
+    }
+    engine.subscribeTo(MouseClickEvent, (event) => {
+        const target = event.data.target;
+        const editableElement = target?.closest?.(`*[${engine.props.contentEditableAttrName}]`);
+        if (editableElement &&
+            editableElement.getAttribute('contenteditable') === 'true')
+            return;
+        globalState.activeElements.forEach((node, element) => {
+            globalState.activeElements.delete(element);
+            element.removeAttribute('contenteditable');
+            element.removeAttribute('spellcheck');
+            element.removeEventListener('input', onInputHandler);
+            element.removeEventListener('compositionstart', onCompositionHandler);
+            element.removeEventListener('compositionupdate', onCompositionHandler);
+            element.removeEventListener('compositionend', onCompositionHandler);
+            element.removeEventListener('past', onPastHandler);
+            document.removeEventListener('selectionchange', onSelectionChangeHandler);
+        });
+    });
+    engine.subscribeTo(MouseDoubleClickEvent, (event) => {
+        const target = event.data.target;
+        const editableElement = target?.closest?.(`*[${engine.props.contentEditableAttrName}]`);
+        const workspace = engine.workbench.activeWorkspace;
+        const tree = workspace.operation.tree;
+        if (editableElement) {
+            const editable = editableElement.getAttribute('contenteditable');
+            if (editable === 'false' || !editable) {
+                const nodeId = findTargetNodeId(editableElement);
+                if (nodeId) {
+                    const targetNode = tree.findById(nodeId);
+                    if (targetNode) {
+                        globalState.activeElements.set(editableElement, targetNode);
+                        editableElement.setAttribute('spellcheck', 'false');
+                        editableElement.setAttribute('contenteditable', 'true');
+                        editableElement.focus();
+                        editableElement.addEventListener('input', onInputHandler);
+                        editableElement.addEventListener('compositionstart', onCompositionHandler);
+                        editableElement.addEventListener('compositionupdate', onCompositionHandler);
+                        editableElement.addEventListener('compositionend', onCompositionHandler);
+                        editableElement.addEventListener('keydown', onKeyDownHandler);
+                        editableElement.addEventListener('paste', onPastHandler);
+                        document.addEventListener('selectionchange', onSelectionChangeHandler);
+                        setEndOfContenteditable(editableElement);
+                    }
+                }
+            }
+        }
+    });
+};

package/esm/effects/useCursorEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useCursorEffect: (engine: Engine) => void;

package/esm/effects/useCursorEffect.js

@@ -0,0 +1,57 @@
+import { CursorStatus } from '../models';
+import { MouseMoveEvent, DragStartEvent, DragMoveEvent, DragStopEvent, } from '../events';
+import { requestIdle } from '@thienvu18/designable-shared';
+export const useCursorEffect = (engine) => {
+    engine.subscribeTo(MouseMoveEvent, (event) => {
+        engine.cursor.setStatus(engine.cursor.status === CursorStatus.Dragging ||
+            engine.cursor.status === CursorStatus.DragStart
+            ? engine.cursor.status
+            : CursorStatus.Normal);
+        if (engine.cursor.status === CursorStatus.Dragging)
+            return;
+        engine.cursor.setPosition(event.data);
+    });
+    engine.subscribeTo(DragStartEvent, (event) => {
+        engine.cursor.setStatus(CursorStatus.DragStart);
+        engine.cursor.setDragStartPosition(event.data);
+    });
+    engine.subscribeTo(DragMoveEvent, (event) => {
+        engine.cursor.setStatus(CursorStatus.Dragging);
+        engine.cursor.setPosition(event.data);
+    });
+    engine.subscribeTo(DragStopEvent, (event) => {
+        engine.cursor.setStatus(CursorStatus.DragStop);
+        engine.cursor.setDragEndPosition(event.data);
+        engine.cursor.setDragStartPosition(null);
+        requestIdle(() => {
+            engine.cursor.setStatus(CursorStatus.Normal);
+        });
+    });
+    engine.subscribeTo(MouseMoveEvent, (event) => {
+        const currentWorkspace = event?.context?.workspace;
+        if (!currentWorkspace)
+            return;
+        const operation = currentWorkspace.operation;
+        if (engine.cursor.status !== CursorStatus.Normal) {
+            operation.hover.clear();
+            return;
+        }
+        const target = event.data.target;
+        const el = target?.closest?.(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `);
+        if (!el?.getAttribute) {
+            return;
+        }
+        const nodeId = el.getAttribute(engine.props.nodeIdAttrName);
+        const outlineNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName);
+        const node = operation.tree.findById(nodeId || outlineNodeId);
+        if (node) {
+            operation.hover.setHover(node);
+        }
+        else {
+            operation.hover.clear();
+        }
+    });
+};

package/esm/effects/useDragDropEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useDragDropEffect: (engine: Engine) => void;

package/esm/effects/useDragDropEffect.js

@@ -0,0 +1,155 @@
+import { ClosestPosition, CursorType, CursorDragType, TreeNode, } from '../models';
+import { DragStartEvent, DragMoveEvent, DragStopEvent, ViewportScrollEvent, } from '../events';
+import { Point } from '@thienvu18/designable-shared';
+export const useDragDropEffect = (engine) => {
+    engine.subscribeTo(DragStartEvent, (event) => {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        const target = event.data.target;
+        const el = target?.closest(`
+       *[${engine.props.nodeIdAttrName}],
+       *[${engine.props.sourceIdAttrName}],
+       *[${engine.props.outlineNodeIdAttrName}]
+      `);
+        const handler = target?.closest(`*[${engine.props.nodeDragHandlerAttrName}]`);
+        const helper = handler?.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
+        if (!el?.getAttribute && !handler)
+            return;
+        const sourceId = el?.getAttribute(engine.props.sourceIdAttrName);
+        const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName);
+        const handlerId = helper?.getAttribute(engine.props.nodeSelectionIdAttrName);
+        const nodeId = el?.getAttribute(engine.props.nodeIdAttrName);
+        engine.workbench.eachWorkspace((currentWorkspace) => {
+            const operation = currentWorkspace.operation;
+            const moveHelper = operation.moveHelper;
+            if (nodeId || outlineId || handlerId) {
+                const node = engine.findNodeById(outlineId || nodeId || handlerId);
+                if (node) {
+                    if (!node.allowDrag())
+                        return;
+                    if (node === node.root)
+                        return;
+                    const validSelected = engine
+                        .getAllSelectedNodes()
+                        .filter((node) => node.allowDrag());
+                    if (validSelected.some((selectNode) => selectNode === node)) {
+                        moveHelper.dragStart({ dragNodes: TreeNode.sort(validSelected) });
+                    }
+                    else {
+                        moveHelper.dragStart({ dragNodes: [node] });
+                    }
+                }
+            }
+            else if (sourceId) {
+                const sourceNode = engine.findNodeById(sourceId);
+                if (sourceNode) {
+                    moveHelper.dragStart({ dragNodes: [sourceNode] });
+                }
+            }
+        });
+        engine.cursor.setStyle('move');
+    });
+    engine.subscribeTo(DragMoveEvent, (event) => {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        if (engine.cursor.dragType !== CursorDragType.Move)
+            return;
+        const target = event.data.target;
+        const el = target?.closest(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `);
+        const point = new Point(event.data.topClientX, event.data.topClientY);
+        const nodeId = el?.getAttribute(engine.props.nodeIdAttrName);
+        const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName);
+        engine.workbench.eachWorkspace((currentWorkspace) => {
+            const operation = currentWorkspace.operation;
+            const moveHelper = operation.moveHelper;
+            const dragNodes = moveHelper.dragNodes;
+            const tree = operation.tree;
+            if (!dragNodes.length)
+                return;
+            const touchNode = tree.findById(outlineId || nodeId);
+            moveHelper.dragMove({
+                point,
+                touchNode,
+            });
+        });
+    });
+    engine.subscribeTo(ViewportScrollEvent, (event) => {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        if (engine.cursor.dragType !== CursorDragType.Move)
+            return;
+        const point = new Point(engine.cursor.position.topClientX, engine.cursor.position.topClientY);
+        const currentWorkspace = event?.context?.workspace ?? engine.workbench.activeWorkspace;
+        if (!currentWorkspace)
+            return;
+        const operation = currentWorkspace.operation;
+        const moveHelper = operation.moveHelper;
+        if (!moveHelper.dragNodes.length)
+            return;
+        const tree = operation.tree;
+        const viewport = currentWorkspace.viewport;
+        const outline = currentWorkspace.outline;
+        const viewportTarget = viewport.elementFromPoint(point);
+        const outlineTarget = outline.elementFromPoint(point);
+        const viewportNodeElement = viewportTarget?.closest(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `);
+        const outlineNodeElement = outlineTarget?.closest(`
+    *[${engine.props.nodeIdAttrName}],
+    *[${engine.props.outlineNodeIdAttrName}]
+  `);
+        const nodeId = viewportNodeElement?.getAttribute(engine.props.nodeIdAttrName);
+        const outlineNodeId = outlineNodeElement?.getAttribute(engine.props.outlineNodeIdAttrName);
+        const touchNode = tree.findById(outlineNodeId || nodeId);
+        moveHelper.dragMove({ point, touchNode });
+    });
+    engine.subscribeTo(DragStopEvent, () => {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        if (engine.cursor.dragType !== CursorDragType.Move)
+            return;
+        engine.workbench.eachWorkspace((currentWorkspace) => {
+            const operation = currentWorkspace.operation;
+            const moveHelper = operation.moveHelper;
+            const dragNodes = moveHelper.dragNodes;
+            const closestNode = moveHelper.closestNode;
+            const closestDirection = moveHelper.closestDirection;
+            const selection = operation.selection;
+            if (!dragNodes.length)
+                return;
+            if (dragNodes.length && closestNode && closestDirection) {
+                if (closestDirection === ClosestPosition.After ||
+                    closestDirection === ClosestPosition.Under) {
+                    if (closestNode.allowSibling(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.insertAfter(...TreeNode.filterDroppable(dragNodes, closestNode.parent)));
+                    }
+                }
+                else if (closestDirection === ClosestPosition.Before ||
+                    closestDirection === ClosestPosition.Upper) {
+                    if (closestNode.allowSibling(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.insertBefore(...TreeNode.filterDroppable(dragNodes, closestNode.parent)));
+                    }
+                }
+                else if (closestDirection === ClosestPosition.Inner ||
+                    closestDirection === ClosestPosition.InnerAfter) {
+                    if (closestNode.allowAppend(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.append(...TreeNode.filterDroppable(dragNodes, closestNode)));
+                        moveHelper.dragDrop({ dropNode: closestNode });
+                    }
+                }
+                else if (closestDirection === ClosestPosition.InnerBefore) {
+                    if (closestNode.allowAppend(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.prepend(...TreeNode.filterDroppable(dragNodes, closestNode)));
+                        moveHelper.dragDrop({ dropNode: closestNode });
+                    }
+                }
+            }
+            moveHelper.dragEnd();
+        });
+        engine.cursor.setStyle('');
+    });
+};

package/esm/effects/useFreeSelectionEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useFreeSelectionEffect: (engine: Engine) => void;

package/esm/effects/useFreeSelectionEffect.js

@@ -0,0 +1,39 @@
+import { DragStopEvent } from '../events';
+import { CursorType, CursorDragType } from '../models';
+import { calcRectByStartEndPoint, isCrossRectInRect, isRectInRect, Point, } from '@thienvu18/designable-shared';
+export const useFreeSelectionEffect = (engine) => {
+    engine.subscribeTo(DragStopEvent, (event) => {
+        if (engine.cursor.dragType !== CursorDragType.Move) {
+            return;
+        }
+        engine.workbench.eachWorkspace((workspace) => {
+            const viewport = workspace.viewport;
+            const dragEndPoint = new Point(event.data.topClientX, event.data.topClientY);
+            const dragStartOffsetPoint = viewport.getOffsetPoint(new Point(engine.cursor.dragStartPosition.topClientX, engine.cursor.dragStartPosition.topClientY));
+            const dragEndOffsetPoint = viewport.getOffsetPoint(new Point(engine.cursor.position.topClientX, engine.cursor.position.topClientY));
+            if (!viewport.isPointInViewport(dragEndPoint, false))
+                return;
+            const tree = workspace.operation.tree;
+            const selectionRect = calcRectByStartEndPoint(dragStartOffsetPoint, dragEndOffsetPoint, viewport.dragScrollXDelta, viewport.dragScrollYDelta);
+            const selected = [];
+            tree.eachChildren((node) => {
+                const nodeRect = viewport.getValidNodeOffsetRect(node);
+                if (nodeRect && isCrossRectInRect(selectionRect, nodeRect)) {
+                    selected.push([node, nodeRect]);
+                }
+            });
+            const selectedNodes = selected.reduce((buf, [node, nodeRect]) => {
+                if (isRectInRect(nodeRect, selectionRect)) {
+                    if (selected.some(([selectNode]) => selectNode.isMyParents(node))) {
+                        return buf;
+                    }
+                }
+                return buf.concat(node);
+            }, []);
+            workspace.operation.selection.batchSafeSelect(selectedNodes);
+        });
+        if (engine.cursor.type === CursorType.Selection) {
+            engine.cursor.setType(CursorType.Normal);
+        }
+    });
+};

package/esm/effects/useKeyboardEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useKeyboardEffect: (engine: Engine) => void;

package/esm/effects/useKeyboardEffect.js

@@ -0,0 +1,17 @@
+import { KeyDownEvent, KeyUpEvent } from '../events';
+export const useKeyboardEffect = (engine) => {
+    engine.subscribeTo(KeyDownEvent, (event) => {
+        const keyboard = engine.keyboard;
+        if (!keyboard)
+            return;
+        const workspace = engine.workbench.activeWorkspace || engine.workbench.currentWorkspace;
+        keyboard.handleKeyboard(event, workspace.getEventContext());
+    });
+    engine.subscribeTo(KeyUpEvent, (event) => {
+        const keyboard = engine.keyboard;
+        if (!keyboard)
+            return;
+        const workspace = engine.workbench.activeWorkspace || engine.workbench.currentWorkspace;
+        keyboard.handleKeyboard(event, workspace.getEventContext());
+    });
+};

package/esm/effects/useResizeEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useResizeEffect: (engine: Engine) => void;

package/esm/effects/useResizeEffect.js

@@ -0,0 +1,77 @@
+import { CursorDragType } from '../models';
+import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events';
+export const useResizeEffect = (engine) => {
+    const findStartNodeHandler = (target) => {
+        const handler = target?.closest(`*[${engine.props.nodeResizeHandlerAttrName}]`);
+        if (handler) {
+            const direction = handler.getAttribute(engine.props.nodeResizeHandlerAttrName);
+            if (direction) {
+                const element = handler.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
+                if (element) {
+                    const nodeId = element.getAttribute(engine.props.nodeSelectionIdAttrName);
+                    if (nodeId) {
+                        const node = engine.findNodeById(nodeId);
+                        if (node) {
+                            return { direction, node, element };
+                        }
+                    }
+                }
+            }
+        }
+        return;
+    };
+    engine.subscribeTo(DragStartEvent, (event) => {
+        const target = event.data.target;
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        if (!currentWorkspace)
+            return;
+        const handler = findStartNodeHandler(target);
+        const helper = currentWorkspace.operation.transformHelper;
+        if (handler) {
+            const selectionElement = handler.element.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
+            if (selectionElement) {
+                const nodeId = selectionElement.getAttribute(engine.props.nodeSelectionIdAttrName);
+                if (nodeId) {
+                    const node = engine.findNodeById(nodeId);
+                    if (node) {
+                        helper.dragStart({
+                            dragNodes: [node],
+                            type: 'resize',
+                            direction: handler.direction,
+                        });
+                    }
+                }
+            }
+        }
+    });
+    engine.subscribeTo(DragMoveEvent, (event) => {
+        if (engine.cursor.dragType !== CursorDragType.Resize)
+            return;
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        const helper = currentWorkspace?.operation.transformHelper;
+        const dragNodes = helper.dragNodes;
+        if (!dragNodes.length)
+            return;
+        helper.dragMove();
+        dragNodes.forEach((node) => {
+            const element = node.getElement();
+            helper.resize(node, (rect) => {
+                element.style.width = rect.width + 'px';
+                element.style.height = rect.height + 'px';
+                element.style.position = 'absolute';
+                element.style.left = '0px';
+                element.style.top = '0px';
+                element.style.transform = `translate3d(${rect.x}px,${rect.y}px,0)`;
+            });
+        });
+    });
+    engine.subscribeTo(DragStopEvent, (event) => {
+        if (engine.cursor.dragType !== CursorDragType.Resize)
+            return;
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        const helper = currentWorkspace?.operation.transformHelper;
+        if (helper) {
+            helper.dragEnd();
+        }
+    });
+};

package/esm/effects/useSelectionEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useSelectionEffect: (engine: Engine) => void;

package/esm/effects/useSelectionEffect.js

@@ -0,0 +1,70 @@
+import { CursorStatus } from '../models';
+import { MouseClickEvent } from '../events';
+import { KeyCode, Point } from '@thienvu18/designable-shared';
+export const useSelectionEffect = (engine) => {
+    engine.subscribeTo(MouseClickEvent, (event) => {
+        if (engine.cursor.status !== CursorStatus.Normal)
+            return;
+        const target = event.data.target;
+        const el = target?.closest?.(`
+      *[${engine.props.nodeIdAttrName}],
+      *[${engine.props.outlineNodeIdAttrName}]
+    `);
+        const isHelpers = target?.closest?.(`*[${engine.props.nodeSelectionIdAttrName}]`);
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        if (!currentWorkspace)
+            return;
+        if (!el?.getAttribute) {
+            const point = new Point(event.data.topClientX, event.data.topClientY);
+            const operation = currentWorkspace.operation;
+            const viewport = currentWorkspace.viewport;
+            const outline = currentWorkspace.outline;
+            const isInViewport = viewport.isPointInViewport(point, false);
+            const isInOutline = outline.isPointInViewport(point, false);
+            if (isHelpers)
+                return;
+            if (isInViewport || isInOutline) {
+                const selection = operation.selection;
+                const tree = operation.tree;
+                selection.select(tree);
+            }
+            return;
+        }
+        const nodeId = el.getAttribute(engine.props.nodeIdAttrName);
+        const structNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName);
+        const operation = currentWorkspace.operation;
+        const selection = operation.selection;
+        const tree = operation.tree;
+        const node = tree.findById(nodeId || structNodeId);
+        if (node) {
+            engine.keyboard.requestClean();
+            if (engine.keyboard.isKeyDown(KeyCode.Meta) ||
+                engine.keyboard.isKeyDown(KeyCode.Control)) {
+                if (selection.has(node)) {
+                    if (selection.selected.length > 1) {
+                        selection.remove(node);
+                    }
+                }
+                else {
+                    selection.add(node);
+                }
+            }
+            else if (engine.keyboard.isKeyDown(KeyCode.Shift)) {
+                if (selection.has(node)) {
+                    if (selection.selected.length > 1) {
+                        selection.remove(node);
+                    }
+                }
+                else {
+                    selection.crossAddTo(node);
+                }
+            }
+            else {
+                selection.select(node);
+            }
+        }
+        else {
+            selection.select(tree);
+        }
+    });
+};

package/esm/effects/useTranslateEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useTranslateEffect: (engine: Engine) => void;

package/esm/effects/useTranslateEffect.js

@@ -0,0 +1,55 @@
+import { CursorDragType } from '../models';
+import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events';
+export const useTranslateEffect = (engine) => {
+    engine.subscribeTo(DragStartEvent, (event) => {
+        const target = event.data.target;
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        const handler = target?.closest(`*[${engine.props.nodeTranslateAttrName}]`);
+        if (!currentWorkspace)
+            return;
+        const helper = currentWorkspace.operation.transformHelper;
+        if (handler) {
+            const type = handler.getAttribute(engine.props.nodeTranslateAttrName);
+            if (type) {
+                const selectionElement = handler.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
+                if (selectionElement) {
+                    const nodeId = selectionElement.getAttribute(engine.props.nodeSelectionIdAttrName);
+                    if (nodeId) {
+                        const node = engine.findNodeById(nodeId);
+                        if (node) {
+                            helper.dragStart({ dragNodes: [node], type: 'translate' });
+                        }
+                    }
+                }
+            }
+        }
+    });
+    engine.subscribeTo(DragMoveEvent, (event) => {
+        if (engine.cursor.dragType !== CursorDragType.Translate)
+            return;
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        const helper = currentWorkspace?.operation.transformHelper;
+        const dragNodes = helper.dragNodes;
+        if (!dragNodes.length)
+            return;
+        helper.dragMove();
+        dragNodes.forEach((node) => {
+            const element = node.getElement();
+            helper.translate(node, (translate) => {
+                element.style.position = 'absolute';
+                element.style.left = '0px';
+                element.style.top = '0px';
+                element.style.transform = `translate3d(${translate.x}px,${translate.y}px,0)`;
+            });
+        });
+    });
+    engine.subscribeTo(DragStopEvent, (event) => {
+        if (engine.cursor.dragType !== CursorDragType.Translate)
+            return;
+        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
+        const helper = currentWorkspace?.operation.transformHelper;
+        if (helper) {
+            helper.dragEnd();
+        }
+    });
+};

package/esm/effects/useViewportEffect.d.ts

@@ -0,0 +1,2 @@
+import { Engine } from '../models';
+export declare const useViewportEffect: (engine: Engine) => void;