fix(nodes,drag): update xyz on select

packages/vue-flow/src/components/Nodes/NodeWrapper.vue

@@ -78,6 +78,7 @@ onMounted(() => {
       () => parentNode?.computedPosition.x,
       () => parentNode?.computedPosition.y,
       () => parentNode?.computedPosition.z,
+      () => node.selected,
     ],
     ([newX, newY, parentX, parentY, parentZ]) => {
       const xyzPos = {

packages/vue-flow/src/composables/useDrag.ts

@@ -100,8 +100,6 @@ function useDrag(params: UseDragParams) {
             .on('drag', (event: UseDragEvent) => {
               const mousePos = getMousePosition(event)
 
-              console.log(node?.label)
-
               // skip events without movement
               if ((lastPos.x !== mousePos.x || lastPos.y !== mousePos.y) && dragItems) {
                 lastPos = mousePos

packages/vue-flow/src/types/changes.ts

@@ -1,5 +1,5 @@
 import type { Dimensions, ElementData, XYPosition } from './flow'
-import type { GraphNode, NodeHandleBounds } from './node'
+import type { GraphNode, Node, NodeHandleBounds } from './node'
 import type { GraphEdge } from './edge'
 
 export interface NodeDragItem {

packages/vue-flow/src/utils/changes.ts

@@ -7,7 +7,6 @@ import type {
   ElementChange,
   FlowElement,
   FlowElements,
-  Getters,
   GraphEdge,
   GraphNode,
   Node,
@@ -16,8 +15,7 @@ import type {
   NodeSelectionChange,
 } from '~/types'
 
-function handleParentExpand(updateItem: GraphNode, curr: GraphNode[]) {
+function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
-  const parent = updateItem.parentNode ? curr.find((el) => el.id === updateItem.parentNode) : undefined
   if (parent) {
     const extendWidth = updateItem.position.x + updateItem.dimensions.width - parent.dimensions.width
     const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
@@ -92,50 +90,48 @@ export const applyChanges = <
 ): T[] => {
   let elementIds = elements.map((el) => el.id)
   changes.forEach((change) => {
-    nextTick(() => {
+    if (change.type === 'add') {
-      if (change.type === 'add') {
+      const item = <T>change.item
-        const item = <T>change.item
+      return elements.push(item)
-        return elements.push(item)
+    }
-      }
 
-      const i = elementIds.indexOf((<any>change).id)
+    const i = elementIds.indexOf((<any>change).id)
-      const el = elements[i]
+    const el = elements[i]
-      switch (change.type) {
+    switch (change.type) {
-        case 'select':
+      case 'select':
-          if (isGraphNode(el) || isGraphEdge(el)) el.selected = change.selected
+        if (isGraphNode(el) || isGraphEdge(el)) el.selected = change.selected
-          break
+        break
-        case 'position':
+      case 'position':
-          if (isGraphNode(el)) {
+        if (isGraphNode(el)) {
-            if (typeof change.position !== 'undefined') el.position = change.position
+          if (typeof change.position !== 'undefined') el.position = change.position
-            if (el.expandParent && el.parentNode) {
+          if (el.expandParent && el.parentNode) {
-              const parent = elements.find((parent) => parent.id === el.parentNode)
+            const parent = elements.find((parent) => parent.id === el.parentNode)
 
-              if (parent && isGraphNode(parent)) {
+            if (parent && isGraphNode(parent)) {
-                handleParentExpand(el, parent)
+              handleParentExpand(el, parent)
-              }
             }
           }
-          break
+        }
-        case 'dimensions':
+        break
-          if (isGraphNode(el)) {
+      case 'dimensions':
-            if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
+        if (isGraphNode(el)) {
-            if (el.expandParent && el.parentNode) {
+          if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
-              const parent = elements.find((parent) => parent.id === el.parentNode)
+          if (el.expandParent && el.parentNode) {
+            const parent = elements.find((parent) => parent.id === el.parentNode)
 
-              if (parent && isGraphNode(parent)) {
+            if (parent && isGraphNode(parent)) {
-                handleParentExpand(el, parent)
+              handleParentExpand(el, parent)
-              }
             }
           }
-          break
+        }
-        case 'remove':
+        break
-          if (elementIds.includes(change.id)) {
+      case 'remove':
-            elements.splice(i, 1)
+        if (elementIds.includes(change.id)) {
-            elementIds = elements.map((el) => el.id)
+          elements.splice(i, 1)
-          }
+          elementIds = elements.map((el) => el.id)
-          break
+        }
-      }
+        break
-    })
+    }
   })
 
   return elements
@@ -153,7 +149,7 @@ export const createSelectionChange = (id: string, selected: boolean): NodeSelect
 export const createAdditionChange = <
   T extends GraphNode | GraphEdge = GraphNode,
   C extends NodeAddChange | EdgeAddChange = T extends GraphNode ? NodeAddChange : EdgeAddChange,
-  >(
+>(
   item: T,
 ): C =>
   <C>{
@@ -161,21 +157,15 @@ export const createAdditionChange = <
     type: 'add',
   }
 
-const isParentSelected = (node: GraphNode, selectedIds: string[], getNode: Getters['getNode']): boolean => {
+export const getSelectionChanges = (items: FlowElements, selectedIds: string[]) => {
-  const parent = node.parentNode ? getNode(node.parentNode) : undefined
-  if (!node.parentNode || !parent) return false
-  if (selectedIds.includes(node.parentNode)) return true
-  return isParentSelected(parent, selectedIds, getNode)
-}
-
-export const getSelectionChanges = (items: FlowElements, selectedIds: string[], getNode: Getters['getNode']) => {
   return items.reduce((res, item) => {
-    const willBeSelected =
+    const willBeSelected = selectedIds.includes(item.id)
-      selectedIds.includes(item.id) || !!(isGraphNode(item) && item.parentNode && isParentSelected(item, selectedIds, getNode))
 
     if (!item.selected && willBeSelected) {
+      item.selected = true
       res.push(createSelectionChange(item.id, true))
     } else if (item.selected && !willBeSelected) {
+      item.selected = false
       res.push(createSelectionChange(item.id, false))
     }