refactor(nodes): use single resize observer for nodes

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

@@ -14,6 +14,7 @@ const { id, type, name, draggable, selectable, connectable, snapGrid, ...props }
   type: NodeComponent | Function | Object | false
   name: string
   node: GraphNode
+  resizeObserver: ResizeObserver
 }>()
 
 provide(NodeId, id)
@@ -59,10 +60,6 @@ const dragging = useDrag({
   },
 })
 
-const observer = useResizeObserver(nodeElement, (ev) => {
-  updateNodeDimensions([{ id, nodeElement: ev[0].target as HTMLDivElement, forceUpdate: true }])
-})
-
 const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
   if (parentPos) {
     node.computedPosition = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
@@ -100,6 +97,8 @@ updatePosition(
 )
 
 onMounted(() => {
+  props.resizeObserver.observe(nodeElement.value)
+
   if (!scope) scope = effectScope()
 
   scope.run(() => {
@@ -138,7 +137,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  observer.stop()
+  props.resizeObserver.unobserve(nodeElement.value)
   scope?.stop()
   scope = undefined
 })

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

@@ -16,12 +16,29 @@ const {
   getNode,
   getNodes,
   getNodeTypes,
+  updateNodeDimensions,
 } = $(useVueFlow())
 
 const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
 const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
 const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
 
+const resizeObserver = new ResizeObserver((entries) => {
+  const updates = entries.map((entry: ResizeObserverEntry) => ({
+    id: entry.target.getAttribute('data-id') as string,
+    nodeElement: entry.target as HTMLDivElement,
+    forceUpdate: true,
+  }))
+
+  updates.forEach((u) => console.log(u.nodeElement.getBoundingClientRect().left))
+
+  updateNodeDimensions(updates)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver.disconnect()
+})
+
 const getType = (type?: string, template?: GraphNode['template']) => {
   const name = type || 'default'
   let nodeType = template ?? getNodeTypes[name]
@@ -59,6 +76,7 @@ export default {
       v-for="node of getNodes"
       :id="node.id"
       :key="node.id"
+      :resize-observer="resizeObserver"
       :type="getType(node.type, node.template)"
       :name="node.type || 'default'"
       :draggable="draggable(node.draggable)"