@mdesignable/core 1.0.0-beta.64

package/esm/effects/index.d.ts

@@ -0,0 +1,11 @@
+export * from './useCursorEffect';
+export * from './useViewportEffect';
+export * from './useDragDropEffect';
+export * from './useResizeEffect';
+export * from './useSelectionEffect';
+export * from './useFreeSelectionEffect';
+export * from './useKeyboardEffect';
+export * from './useAutoScrollEffect';
+export * from './useWorkspaceEffect';
+export * from './useContentEditableEffect';
+export * from './useTranslateEffect';

package/esm/effects/index.js

@@ -0,0 +1,11 @@
+export * from './useCursorEffect';
+export * from './useViewportEffect';
+export * from './useDragDropEffect';
+export * from './useResizeEffect';
+export * from './useSelectionEffect';
+export * from './useFreeSelectionEffect';
+export * from './useKeyboardEffect';
+export * from './useAutoScrollEffect';
+export * from './useWorkspaceEffect';
+export * from './useContentEditableEffect';
+export * from './useTranslateEffect';

package/esm/effects/useAutoScrollEffect.d.ts

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

package/esm/effects/useAutoScrollEffect.js

@@ -0,0 +1,65 @@
+import { CursorStatus } from '../models';
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events';
+import { calcAutoScrollBasicInfo, scrollAnimate, Point, } from '@mdesignable/shared';
+export var useAutoScrollEffect = function (engine) {
+    var xScroller = null;
+    var yScroller = null;
+    var xScrollerAnimationStop = null;
+    var yScrollerAnimationStop = null;
+    var scrolling = function (point, viewport) {
+        if (engine.cursor.status === CursorStatus.Dragging) {
+            xScroller = calcAutoScrollBasicInfo(point, 'x', viewport.rect);
+            yScroller = calcAutoScrollBasicInfo(point, 'y', viewport.rect);
+            if (xScroller) {
+                if (xScrollerAnimationStop) {
+                    xScrollerAnimationStop();
+                }
+                xScrollerAnimationStop = scrollAnimate(viewport.scrollContainer, 'x', xScroller.direction, xScroller.speed);
+            }
+            else {
+                if (xScrollerAnimationStop) {
+                    xScrollerAnimationStop();
+                }
+            }
+            if (yScroller) {
+                if (yScrollerAnimationStop) {
+                    yScrollerAnimationStop();
+                }
+                yScrollerAnimationStop = scrollAnimate(viewport.scrollContainer, 'y', yScroller.direction, yScroller.speed);
+            }
+            else {
+                if (yScrollerAnimationStop) {
+                    yScrollerAnimationStop();
+                }
+            }
+        }
+    };
+    engine.subscribeTo(DragStartEvent, function () {
+        engine.workbench.eachWorkspace(function (workspace) {
+            workspace.viewport.takeDragStartSnapshot();
+        });
+    });
+    engine.subscribeTo(DragMoveEvent, function (event) {
+        engine.workbench.eachWorkspace(function (workspace) {
+            var viewport = workspace.viewport;
+            var outline = workspace.outline;
+            var point = new Point(event.data.topClientX, event.data.topClientY);
+            if (outline.isPointInViewport(point)) {
+                scrolling(point, outline);
+            }
+            else if (viewport.isPointInViewport(point)) {
+                scrolling(point, viewport);
+            }
+        });
+    });
+    engine.subscribeTo(DragStopEvent, function () {
+        xScroller = null;
+        yScroller = null;
+        if (xScrollerAnimationStop) {
+            xScrollerAnimationStop();
+        }
+        if (yScrollerAnimationStop) {
+            yScrollerAnimationStop();
+        }
+    });
+};

package/esm/effects/useContentEditableEffect.d.ts

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

package/esm/effects/useContentEditableEffect.js

@@ -0,0 +1,167 @@
+import { Path } from '@formily/path';
+import { requestIdle, globalThisPolyfill } from '@mdesignable/shared';
+import { MouseDoubleClickEvent, MouseClickEvent } from '../events';
+function getAllRanges(sel) {
+    var ranges = [];
+    for (var i = 0; i < sel.rangeCount; i++) {
+        var range = sel.getRangeAt(i);
+        ranges[i] = {
+            collapsed: range.collapsed,
+            startOffset: range.startOffset,
+            endOffset: range.endOffset,
+        };
+    }
+    return ranges;
+}
+function setEndOfContenteditable(contentEditableElement) {
+    var range = document.createRange();
+    range.selectNodeContents(contentEditableElement);
+    range.collapse(false);
+    var selection = globalThisPolyfill.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function createCaretCache(el) {
+    var currentSelection = globalThisPolyfill.getSelection();
+    if (currentSelection.containsNode(el))
+        return;
+    var ranges = getAllRanges(currentSelection);
+    return function (offset) {
+        if (offset === void 0) { offset = 0; }
+        var sel = globalThisPolyfill.getSelection();
+        var firstNode = el.childNodes[0];
+        if (!firstNode)
+            return;
+        sel.removeAllRanges();
+        ranges.forEach(function (item) {
+            var range = document.createRange();
+            range.collapse(item.collapsed);
+            range.setStart(firstNode, item.startOffset + offset);
+            range.setEnd(firstNode, item.endOffset + offset);
+            sel.addRange(range);
+        });
+    };
+}
+export var useContentEditableEffect = function (engine) {
+    var globalState = {
+        activeElements: new Map(),
+        queue: [],
+        requestTimer: null,
+        isComposition: false,
+    };
+    function onKeyDownHandler(event) {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    function onInputHandler(event) {
+        var _this = this;
+        var node = globalState.activeElements.get(this);
+        event.stopPropagation();
+        event.preventDefault();
+        if (node) {
+            var target_1 = event.target;
+            var handler = function () {
+                globalState.queue.length = 0;
+                if (globalState.isComposition)
+                    return;
+                var restore = createCaretCache(target_1);
+                Path.setIn(node.props, _this.getAttribute(engine.props.contentEditableAttrName), target_1 === null || target_1 === void 0 ? void 0 : target_1.textContent);
+                requestIdle(function () {
+                    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();
+        var node = globalState.activeElements.get(this);
+        var text = event.clipboardData.getData('text');
+        var selObj = globalThisPolyfill.getSelection();
+        var target = event.target;
+        var selRange = selObj.getRangeAt(0);
+        var 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;
+        var nodeId = element.getAttribute(engine.props.contentEditableNodeIdAttrName);
+        if (nodeId)
+            return nodeId;
+        var parent = element.closest("*[".concat(engine.props.nodeIdAttrName, "]"));
+        if (parent)
+            return parent.getAttribute(engine.props.nodeIdAttrName);
+    }
+    engine.subscribeTo(MouseClickEvent, function (event) {
+        var _a;
+        var target = event.data.target;
+        var editableElement = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, "*[".concat(engine.props.contentEditableAttrName, "]"));
+        if (editableElement &&
+            editableElement.getAttribute('contenteditable') === 'true')
+            return;
+        globalState.activeElements.forEach(function (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, function (event) {
+        var _a;
+        var target = event.data.target;
+        var editableElement = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, "*[".concat(engine.props.contentEditableAttrName, "]"));
+        var workspace = engine.workbench.activeWorkspace;
+        var tree = workspace.operation.tree;
+        if (editableElement) {
+            var editable = editableElement.getAttribute('contenteditable');
+            if (editable === 'false' || !editable) {
+                var nodeId = findTargetNodeId(editableElement);
+                if (nodeId) {
+                    var 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,55 @@
+import { CursorStatus } from '../models';
+import { MouseMoveEvent, DragStartEvent, DragMoveEvent, DragStopEvent, } from '../events';
+import { requestIdle } from '@mdesignable/shared';
+export var useCursorEffect = function (engine) {
+    engine.subscribeTo(MouseMoveEvent, function (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, function (event) {
+        engine.cursor.setStatus(CursorStatus.DragStart);
+        engine.cursor.setDragStartPosition(event.data);
+    });
+    engine.subscribeTo(DragMoveEvent, function (event) {
+        engine.cursor.setStatus(CursorStatus.Dragging);
+        engine.cursor.setPosition(event.data);
+    });
+    engine.subscribeTo(DragStopEvent, function (event) {
+        engine.cursor.setStatus(CursorStatus.DragStop);
+        engine.cursor.setDragEndPosition(event.data);
+        engine.cursor.setDragStartPosition(null);
+        requestIdle(function () {
+            engine.cursor.setStatus(CursorStatus.Normal);
+        });
+    });
+    engine.subscribeTo(MouseMoveEvent, function (event) {
+        var _a, _b;
+        var currentWorkspace = (_a = event === null || event === void 0 ? void 0 : event.context) === null || _a === void 0 ? void 0 : _a.workspace;
+        if (!currentWorkspace)
+            return;
+        var operation = currentWorkspace.operation;
+        if (engine.cursor.status !== CursorStatus.Normal) {
+            operation.hover.clear();
+            return;
+        }
+        var target = event.data.target;
+        var el = (_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, "\n      *[".concat(engine.props.nodeIdAttrName, "],\n      *[").concat(engine.props.outlineNodeIdAttrName, "]\n    "));
+        if (!(el === null || el === void 0 ? void 0 : el.getAttribute)) {
+            return;
+        }
+        var nodeId = el.getAttribute(engine.props.nodeIdAttrName);
+        var outlineNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName);
+        var 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,168 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { ClosestPosition, CursorType, CursorDragType, TreeNode, } from '../models';
+import { DragStartEvent, DragMoveEvent, DragStopEvent, ViewportScrollEvent, } from '../events';
+import { Point } from '@mdesignable/shared';
+export var useDragDropEffect = function (engine) {
+    engine.subscribeTo(DragStartEvent, function (event) {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        var target = event.data.target;
+        var el = target === null || target === void 0 ? void 0 : target.closest("\n       *[".concat(engine.props.nodeIdAttrName, "],\n       *[").concat(engine.props.sourceIdAttrName, "],\n       *[").concat(engine.props.outlineNodeIdAttrName, "]\n      "));
+        var handler = target === null || target === void 0 ? void 0 : target.closest("*[".concat(engine.props.nodeDragHandlerAttrName, "]"));
+        var helper = handler === null || handler === void 0 ? void 0 : handler.closest("*[".concat(engine.props.nodeSelectionIdAttrName, "]"));
+        if (!(el === null || el === void 0 ? void 0 : el.getAttribute) && !handler)
+            return;
+        var sourceId = el === null || el === void 0 ? void 0 : el.getAttribute(engine.props.sourceIdAttrName);
+        var outlineId = el === null || el === void 0 ? void 0 : el.getAttribute(engine.props.outlineNodeIdAttrName);
+        var handlerId = helper === null || helper === void 0 ? void 0 : helper.getAttribute(engine.props.nodeSelectionIdAttrName);
+        var nodeId = el === null || el === void 0 ? void 0 : el.getAttribute(engine.props.nodeIdAttrName);
+        engine.workbench.eachWorkspace(function (currentWorkspace) {
+            var operation = currentWorkspace.operation;
+            var moveHelper = operation.moveHelper;
+            if (nodeId || outlineId || handlerId) {
+                var node_1 = engine.findNodeById(outlineId || nodeId || handlerId);
+                if (node_1) {
+                    if (!node_1.allowDrag())
+                        return;
+                    if (node_1 === node_1.root)
+                        return;
+                    var validSelected = engine
+                        .getAllSelectedNodes()
+                        .filter(function (node) { return node.allowDrag(); });
+                    if (validSelected.some(function (selectNode) { return selectNode === node_1; })) {
+                        moveHelper.dragStart({ dragNodes: TreeNode.sort(validSelected) });
+                    }
+                    else {
+                        moveHelper.dragStart({ dragNodes: [node_1] });
+                    }
+                }
+            }
+            else if (sourceId) {
+                var sourceNode = engine.findNodeById(sourceId);
+                if (sourceNode) {
+                    moveHelper.dragStart({ dragNodes: [sourceNode] });
+                }
+            }
+        });
+        engine.cursor.setStyle('move');
+    });
+    engine.subscribeTo(DragMoveEvent, function (event) {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        if (engine.cursor.dragType !== CursorDragType.Move)
+            return;
+        var target = event.data.target;
+        var el = target === null || target === void 0 ? void 0 : target.closest("\n      *[".concat(engine.props.nodeIdAttrName, "],\n      *[").concat(engine.props.outlineNodeIdAttrName, "]\n    "));
+        var point = new Point(event.data.topClientX, event.data.topClientY);
+        var nodeId = el === null || el === void 0 ? void 0 : el.getAttribute(engine.props.nodeIdAttrName);
+        var outlineId = el === null || el === void 0 ? void 0 : el.getAttribute(engine.props.outlineNodeIdAttrName);
+        engine.workbench.eachWorkspace(function (currentWorkspace) {
+            var operation = currentWorkspace.operation;
+            var moveHelper = operation.moveHelper;
+            var dragNodes = moveHelper.dragNodes;
+            var tree = operation.tree;
+            if (!dragNodes.length)
+                return;
+            var touchNode = tree.findById(outlineId || nodeId);
+            moveHelper.dragMove({
+                point: point,
+                touchNode: touchNode,
+            });
+        });
+    });
+    engine.subscribeTo(ViewportScrollEvent, function (event) {
+        var _a, _b;
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        if (engine.cursor.dragType !== CursorDragType.Move)
+            return;
+        var point = new Point(engine.cursor.position.topClientX, engine.cursor.position.topClientY);
+        var currentWorkspace = (_b = (_a = event === null || event === void 0 ? void 0 : event.context) === null || _a === void 0 ? void 0 : _a.workspace) !== null && _b !== void 0 ? _b : engine.workbench.activeWorkspace;
+        if (!currentWorkspace)
+            return;
+        var operation = currentWorkspace.operation;
+        var moveHelper = operation.moveHelper;
+        if (!moveHelper.dragNodes.length)
+            return;
+        var tree = operation.tree;
+        var viewport = currentWorkspace.viewport;
+        var outline = currentWorkspace.outline;
+        var viewportTarget = viewport.elementFromPoint(point);
+        var outlineTarget = outline.elementFromPoint(point);
+        var viewportNodeElement = viewportTarget === null || viewportTarget === void 0 ? void 0 : viewportTarget.closest("\n      *[".concat(engine.props.nodeIdAttrName, "],\n      *[").concat(engine.props.outlineNodeIdAttrName, "]\n    "));
+        var outlineNodeElement = outlineTarget === null || outlineTarget === void 0 ? void 0 : outlineTarget.closest("\n    *[".concat(engine.props.nodeIdAttrName, "],\n    *[").concat(engine.props.outlineNodeIdAttrName, "]\n  "));
+        var nodeId = viewportNodeElement === null || viewportNodeElement === void 0 ? void 0 : viewportNodeElement.getAttribute(engine.props.nodeIdAttrName);
+        var outlineNodeId = outlineNodeElement === null || outlineNodeElement === void 0 ? void 0 : outlineNodeElement.getAttribute(engine.props.outlineNodeIdAttrName);
+        var touchNode = tree.findById(outlineNodeId || nodeId);
+        moveHelper.dragMove({ point: point, touchNode: touchNode });
+    });
+    engine.subscribeTo(DragStopEvent, function () {
+        if (engine.cursor.type !== CursorType.Normal)
+            return;
+        if (engine.cursor.dragType !== CursorDragType.Move)
+            return;
+        engine.workbench.eachWorkspace(function (currentWorkspace) {
+            var operation = currentWorkspace.operation;
+            var moveHelper = operation.moveHelper;
+            var dragNodes = moveHelper.dragNodes;
+            var closestNode = moveHelper.closestNode;
+            var closestDirection = moveHelper.closestDirection;
+            var 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.apply(closestNode, __spreadArray([], __read(TreeNode.filterDroppable(dragNodes, closestNode.parent)), false)));
+                    }
+                }
+                else if (closestDirection === ClosestPosition.Before ||
+                    closestDirection === ClosestPosition.Upper) {
+                    if (closestNode.allowSibling(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.insertBefore.apply(closestNode, __spreadArray([], __read(TreeNode.filterDroppable(dragNodes, closestNode.parent)), false)));
+                    }
+                }
+                else if (closestDirection === ClosestPosition.Inner ||
+                    closestDirection === ClosestPosition.InnerAfter) {
+                    if (closestNode.allowAppend(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.append.apply(closestNode, __spreadArray([], __read(TreeNode.filterDroppable(dragNodes, closestNode)), false)));
+                        moveHelper.dragDrop({ dropNode: closestNode });
+                    }
+                }
+                else if (closestDirection === ClosestPosition.InnerBefore) {
+                    if (closestNode.allowAppend(dragNodes)) {
+                        selection.batchSafeSelect(closestNode.prepend.apply(closestNode, __spreadArray([], __read(TreeNode.filterDroppable(dragNodes, closestNode)), false)));
+                        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,59 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { DragStopEvent } from '../events';
+import { CursorType, CursorDragType } from '../models';
+import { calcRectByStartEndPoint, isCrossRectInRect, isRectInRect, Point, } from '@mdesignable/shared';
+export var useFreeSelectionEffect = function (engine) {
+    engine.subscribeTo(DragStopEvent, function (event) {
+        if (engine.cursor.dragType !== CursorDragType.Move) {
+            return;
+        }
+        engine.workbench.eachWorkspace(function (workspace) {
+            var viewport = workspace.viewport;
+            var dragEndPoint = new Point(event.data.topClientX, event.data.topClientY);
+            var dragStartOffsetPoint = viewport.getOffsetPoint(new Point(engine.cursor.dragStartPosition.topClientX, engine.cursor.dragStartPosition.topClientY));
+            var dragEndOffsetPoint = viewport.getOffsetPoint(new Point(engine.cursor.position.topClientX, engine.cursor.position.topClientY));
+            if (!viewport.isPointInViewport(dragEndPoint, false))
+                return;
+            var tree = workspace.operation.tree;
+            var selectionRect = calcRectByStartEndPoint(dragStartOffsetPoint, dragEndOffsetPoint, viewport.dragScrollXDelta, viewport.dragScrollYDelta);
+            var selected = [];
+            tree.eachChildren(function (node) {
+                var nodeRect = viewport.getValidNodeOffsetRect(node);
+                if (nodeRect && isCrossRectInRect(selectionRect, nodeRect)) {
+                    selected.push([node, nodeRect]);
+                }
+            });
+            var selectedNodes = selected.reduce(function (buf, _a) {
+                var _b = __read(_a, 2), node = _b[0], nodeRect = _b[1];
+                if (isRectInRect(nodeRect, selectionRect)) {
+                    if (selected.some(function (_a) {
+                        var _b = __read(_a, 1), selectNode = _b[0];
+                        return 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 var useKeyboardEffect = function (engine) {
+    engine.subscribeTo(KeyDownEvent, function (event) {
+        var keyboard = engine.keyboard;
+        if (!keyboard)
+            return;
+        var workspace = engine.workbench.activeWorkspace || engine.workbench.currentWorkspace;
+        keyboard.handleKeyboard(event, workspace.getEventContext());
+    });
+    engine.subscribeTo(KeyUpEvent, function (event) {
+        var keyboard = engine.keyboard;
+        if (!keyboard)
+            return;
+        var 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;