refactor(react): separate user nodes and indernal nodes

packages/system/src/xydrag/utils.ts

@@ -1,15 +1,15 @@
-import { type NodeDragItem, type XYPosition, NodeBase } from '../types';
+import { type NodeDragItem, type XYPosition, InternalNodeBase, NodeBase, NodeLookup } from '../types';
 
 export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: NodeBase[]) => void) {
   return (event: MouseEvent, _: NodeBase, nodes: NodeBase[]) => selectionFunc?.(event, nodes);
 }
 
-export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodes: NodeType[]): boolean {
+export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodeLookup: NodeLookup): boolean {
   if (!node.parentNode) {
     return false;
   }
 
-  const parentNode = nodes.find((node) => node.id === node.parentNode);
+  const parentNode = nodeLookup.get(node.parentNode);
 
   if (!parentNode) {
     return false;
@@ -19,7 +19,7 @@ export function isParentSelected<NodeType extends NodeBase>(node: NodeType, node
     return true;
   }
 
-  return isParentSelected(parentNode, nodes);
+  return isParentSelected(parentNode, nodeLookup);
 }
 
 export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
@@ -36,39 +36,43 @@ export function hasSelector(target: Element, selector: string, domNode: Element)
 
 // looks for all selected nodes and created a NodeDragItem for each of them
 export function getDragItems<NodeType extends NodeBase>(
-  nodes: NodeType[],
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
   nodesDraggable: boolean,
   mousePos: XYPosition,
   nodeId?: string
 ): NodeDragItem[] {
-  return nodes
-    .filter(
-      (n) =>
-        (n.selected || n.id === nodeId) &&
-        (!n.parentNode || !isParentSelected(n, nodes)) &&
-        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
-    )
-    .map((n) => ({
-      id: n.id,
-      position: n.position || { x: 0, y: 0 },
-      distance: {
-        x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
-        y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
-      },
-      delta: {
-        x: 0,
-        y: 0,
-      },
-      extent: n.extent,
-      parentNode: n.parentNode,
-      origin: n.origin,
-      expandParent: n.expandParent,
-      computed: {
-        positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
-        width: n.computed?.width || 0,
-        height: n.computed?.height || 0,
-      },
-    }));
+  const dragItems: NodeDragItem[] = [];
+
+  for (const [id, node] of nodeLookup) {
+    if (
+      (node.selected || node.id === nodeId) &&
+      (!node.parentNode || !isParentSelected(node, nodeLookup)) &&
+      (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))
+    ) {
+      const internalNode = nodeLookup.get(id)!;
+
+      dragItems.push({
+        id: internalNode.id,
+        position: internalNode.position || { x: 0, y: 0 },
+        distance: {
+          x: mousePos.x - (internalNode.internals.positionAbsolute?.x ?? 0),
+          y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0),
+        },
+        extent: internalNode.extent,
+        parentNode: internalNode.parentNode,
+        origin: internalNode.origin,
+        expandParent: internalNode.expandParent,
+        internals: {
+          positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
+        },
+        computed: {
+          width: internalNode.computed.width || 0,
+          height: internalNode.computed.height || 0,
+        },
+      });
+    }
+  }
+  return dragItems;
 }
 
 // returns two params:
@@ -91,7 +95,6 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
       position: n.position,
       computed: {
         ...n.computed,
-        positionAbsolute: n.computed.positionAbsolute,
       },
     };
   });