refactor(nodes): remove node and parent node props from wrapper

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

@@ -5,10 +5,8 @@ import { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getConnectedEdges, getHandleBounds, getXYZPos } from '../../utils'
 
-const { id, type, name, node, parentNode, draggable, selectable, connectable, snapGrid } = defineProps<{
+const { id, type, name, draggable, selectable, connectable, snapGrid } = defineProps<{
   id: string
-  node: GraphNode
-  parentNode?: GraphNode
   draggable: boolean
   selectable: boolean
   connectable: boolean
@@ -35,6 +33,9 @@ const {
   resetSelectedElements,
 } = $(useVueFlow())
 
+const node = $computed(() => getNode(id)!)
+const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
+
 const nodeElement = ref()
 
 let dragging = $ref(false)
@@ -69,38 +70,35 @@ useDrag({
   },
   onDrag(event, { dx, dy }) {
     dragging = true
-    updateNodePosition({ id: node.id, diff: { x: dx, y: dy } })
+    updateNodePosition({ id, diff: { x: dx, y: dy } })
     emits.nodeDrag({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) })
   },
   onStop(event) {
     dragging = false
-
-    updateNodePosition({ id: node.id })
-
     emits.nodeDragStop({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) })
   },
 })
 
 onBeforeMount(() => {
-  updateNodePosition({ id: node.id, diff: { x: 0, y: 0 } })
+  updateNodePosition({ id, diff: { x: 0, y: 0 } })
 })
 
 onMounted(() => {
   const observer = useResizeObserver(nodeElement, () =>
-    updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }]),
+    updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }]),
   )
 
   watch(
     [() => node.type, () => node.sourcePosition, () => node.targetPosition],
     () => {
-      updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value }])
+      updateNodeDimensions([{ id, nodeElement: nodeElement.value }])
     },
     { flush: 'post' },
   )
 
   onBeforeUnmount(() => observer.stop())
 
-  updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }])
+  updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
 
   watch(
     [() => node.position, () => parentNode?.computedPosition, () => node.selected, () => parentNode?.selected],
@@ -233,7 +231,7 @@ export default {
       :is-valid-target-pos="node.isValidTargetPos"
       :is-valid-source-pos="node.isValidSourcePos"
       :parent-node="node.parentNode"
-      :dragging="!!node.dragging"
+      :dragging="dragging"
       :z-index="node.computedPosition.z"
       :target-position="node.targetPosition"
       :source-position="node.sourcePosition"

packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue

@@ -61,9 +61,7 @@ export default {
       :id="node.id"
       :key="node.id"
       :type="getType(node)"
-      :name="getType(node) ? node.type ?? 'default' : 'default'"
-      :node="node"
-      :parent-node="node.parentNode ? getNode(node.parentNode) : undefined"
+      :name="node.type || 'default'"
       :draggable="draggable(node.draggable)"
       :selectable="selectable(node.selectable)"
       :connectable="connectable(node.connectable)"