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,7 +90,6 @@ export const applyChanges = <
 ): T[] => {
   let elementIds = elements.map((el) => el.id)
   changes.forEach((change) => {
-    nextTick(() => {
     if (change.type === 'add') {
       const item = <T>change.item
       return elements.push(item)
@@ -136,7 +133,6 @@ export const applyChanges = <
         break
     }
   })
-  })
 
   return elements
 }
@@ -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))
     }