@thienvu18/designable-core 2.0.0 → 2.0.2

package/esm/effects/useDragDropEffect.js

@@ -1,155 +1,180 @@
-import { ClosestPosition, CursorType, CursorDragType, TreeNode, } from '../models';
-import { DragStartEvent, DragMoveEvent, DragStopEvent, ViewportScrollEvent, } from '../events';
-import { Point } from '@thienvu18/designable-shared';
+import { Point } from '@thienvu18/designable-shared'
+import {
+  DragMoveEvent,
+  DragStartEvent,
+  DragStopEvent,
+  ViewportScrollEvent,
+} from '../events'
+import {
+  ClosestPosition,
+  CursorDragType,
+  CursorType,
+  TreeNode,
+} from '../models'
 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.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(`
+      `)
+    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(`
+    `)
+    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(`
+    `)
+    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('');
-    });
-};
+  `)
+    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

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

package/esm/effects/useFreeSelectionEffect.js

@@ -1,39 +1,61 @@
-import { DragStopEvent } from '../events';
-import { CursorType, CursorDragType } from '../models';
-import { calcRectByStartEndPoint, isCrossRectInRect, isRectInRect, Point, } from '@thienvu18/designable-shared';
+import {
+  Point,
+  calcRectByStartEndPoint,
+  isCrossRectInRect,
+  isRectInRect,
+} from '@thienvu18/designable-shared'
+import { DragStopEvent } from '../events'
+import { CursorDragType, CursorType } from '../models'
 export const useFreeSelectionEffect = (engine) => {
-    engine.subscribeTo(DragStopEvent, (event) => {
-        if (engine.cursor.dragType !== CursorDragType.Move) {
-            return;
+  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])
         }
-        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);
+      })
+      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

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

package/esm/effects/useKeyboardEffect.js

@@ -1,17 +1,17 @@
-import { KeyDownEvent, KeyUpEvent } from '../events';
+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());
-    });
-};
+  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

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

package/esm/effects/useResizeEffect.js

@@ -1,77 +1,88 @@
-import { CursorDragType } from '../models';
-import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events';
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events'
+import { CursorDragType } from '../models'
 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 };
-                        }
-                    }
-                }
+  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();
+      }
+    }
+    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()
+    }
+  })
+}