chore(core): cleanup drag handler

packages/core/src/store/actions.ts

@@ -43,6 +43,21 @@ export default (state: State, getters: ComputedGetters): Actions => {
     })
   }
 
+  const nodeIds = $computed(() => state.nodes.map((n) => n.id))
+  const edgeIds = $computed(() => state.edges.map((e) => e.id))
+
+  const findNode: Actions['findNode'] = (id) => {
+    if (state.nodes && !nodeIds.length) return state.nodes.find((node) => node.id === id)
+
+    return state.nodes[nodeIds.indexOf(id)]
+  }
+
+  const findEdge: Actions['findEdge'] = (id) => {
+    if (state.edges && !edgeIds.length) return state.edges.find((edge) => edge.id === id)
+
+    return state.edges[edgeIds.indexOf(id)]
+  }
+
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
     const changes: NodePositionChange[] = []
 
@@ -55,11 +70,10 @@ export default (state: State, getters: ComputedGetters): Actions => {
       }
 
       if (changed) {
-        change.computedPosition = node.position
         change.position = node.position
 
         if (node.parentNode) {
-          const parentNode = getters.getNode.value(node.parentNode)
+          const parentNode = findNode(node.parentNode)
 
           change.position = {
             x: change.position.x - (parentNode?.computedPosition?.x ?? 0),
@@ -368,21 +382,6 @@ export default (state: State, getters: ComputedGetters): Actions => {
     state.hooks.edgesChange.trigger(changes)
   }
 
-  const nodeIds = $computed(() => state.nodes.map((n) => n.id))
-  const edgeIds = $computed(() => state.edges.map((e) => e.id))
-
-  const findNode: Actions['findNode'] = (id) => {
-    if (state.nodes && !nodeIds.length) return state.nodes.find((node) => node.id === id)
-
-    return state.nodes[nodeIds.indexOf(id)]
-  }
-
-  const findEdge: Actions['findEdge'] = (id) => {
-    if (state.edges && !edgeIds.length) return state.edges.find((edge) => edge.id === id)
-
-    return state.edges[edgeIds.indexOf(id)]
-  }
-
   const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) => updateEdgeAction(oldEdge, newConnection, state.edges)
 
   const applyNodeChanges: Actions['applyNodeChanges'] = (changes) => applyChanges(changes, state.nodes)

packages/core/src/utils/drag.ts

@@ -1,5 +1,4 @@
 import type { Ref } from 'vue'
-import { clampPosition, isParentSelected } from './graph'
 import type { ComputedGetters, CoordinateExtent, Getters, GraphNode, NodeDragItem, SnapGrid, XYPosition } from '~/types'
 
 export function hasSelector(target: Element, selector: string, node: Ref<Element>): boolean {
@@ -78,35 +77,35 @@ export function updatePosition(
 
   dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition
 
+  if (dragItem.extent === 'parent') console.log(dragItem.position)
+
   return dragItem
 }
 
 export function applyExtent<T extends NodeDragItem | GraphNode>(item: T, extent?: CoordinateExtent, parent?: GraphNode) {
-  let currentExtent = item.extent || extent
+  const currentExtent = item.extent ?? extent
+  let nextExtent = currentExtent
 
-  if (item.extent === 'parent' && parent) {
-    if (item.parentNode && item.dimensions.width && item.dimensions.height) {
-      currentExtent =
-        parent.computedPosition && parent.dimensions.width && parent.dimensions.height
-          ? [
-              [parent.computedPosition.x, parent.computedPosition.y],
-              [
-                parent.computedPosition.x + parent.dimensions.width - item.dimensions.width,
-                parent.computedPosition.y + parent.dimensions.height - item.dimensions.height,
-              ],
-            ]
-          : currentExtent
+  if (currentExtent === 'parent' && parent) {
+    if (item.dimensions.width && item.dimensions.height) {
+      nextExtent = [
+        [parent.computedPosition.x, parent.computedPosition.y],
+        [
+          parent.computedPosition.x + parent.dimensions.width - item.dimensions.width,
+          parent.computedPosition.y + parent.dimensions.height - item.dimensions.height,
+        ],
+      ]
     }
-  } else if (item.extent && item.parentNode) {
-    const itemExtent = item.extent as CoordinateExtent
-    const parentX = parent?.computedPosition?.x ?? 0
-    const parentY = parent?.computedPosition?.y ?? 0
+  } else if (currentExtent !== 'parent' && currentExtent && parent) {
+    const itemExtent = currentExtent
+    const parentX = parent.computedPosition.x
+    const parentY = parent.computedPosition.y
 
-    currentExtent = [
+    nextExtent = [
       [itemExtent[0][0] + parentX, itemExtent[0][1] + parentY],
       [itemExtent[1][0] + parentX, itemExtent[1][1] + parentY],
     ]
   }
 
-  return currentExtent
+  return nextExtent as CoordinateExtent
 }

packages/core/src/utils/store.ts

@@ -1,4 +1,4 @@
-import { connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from './graph'
+import { clampPosition, connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from './graph'
 import { warn } from './log'
 import type { Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types'
 
@@ -66,6 +66,7 @@ export const createGraphNodes = (
         parentNode: node.parentNode,
       }),
     )
+
     if (node.parentNode) {
       parentNodes[node.parentNode] = true
     }