fix(core,nodes): apply initial extent on nodes

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -30,6 +30,8 @@ const {
   onUpdateNodeInternals,
   getIntersectingNodes,
   getNodeTypes,
+  nodeExtent,
+  onNodesInitialized,
 } = $(useVueFlow())
 
 const node = $(useVModel(props, 'node'))
@@ -40,6 +42,8 @@ const connectedEdges = $computed(() => getConnectedEdges([node], edges))
 
 const nodeElement = ref()
 
+const initialized = ref(false)
+
 provide(NodeRef, nodeElement)
 
 const { emit, on } = useNodeHooks(node, emits)
@@ -80,15 +84,6 @@ onUpdateNodeInternals((updateIds) => {
   }
 })
 
-updatePosition(
-  {
-    x: node.position.x,
-    y: node.position.y,
-    z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
-  },
-  parentNode ? { ...parentNode.computedPosition } : undefined,
-)
-
 onMounted(() => {
   props.resizeObserver.observe(nodeElement.value)
 })
@@ -113,8 +108,6 @@ watch(
     () => parentNode?.computedPosition.y,
     () => parentNode?.computedPosition.z,
     () => node.selected,
-    () => node.dimensions,
-    () => parentNode?.dimensions,
   ],
   ([newX, newY, parentX, parentY, parentZ]) => {
     const xyzPos = {
@@ -126,17 +119,38 @@ watch(
 
     updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ || 0 } : undefined)
   },
-  { flush: 'post' },
+  { flush: 'post', immediate: true },
 )
 
 function updatePosition(nodePos: XYZPosition, parentPos?: XYZPosition) {
+  let nextPos = { ...nodePos }
   if (parentPos) {
-    node.computedPosition = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
+    nextPos = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
-  } else {
-    node.computedPosition = nodePos
   }
+
+  node.computedPosition = nextPos
 }
 
+onNodesInitialized(() => {
+  initialized.value = true
+})
+
+onMounted(() => {
+  until(initialized)
+    .toBe(true)
+    .then(() => {
+      const extent = applyExtent(node, nodeExtent, parentNode)
+
+      const clampedPos = clampPosition(node.computedPosition, extent)
+
+      node.computedPosition = { ...node.computedPosition, ...clampedPos }
+      node.position = {
+        x: node.computedPosition.x - (parentNode?.computedPosition.x || 0),
+        y: node.computedPosition.y - (parentNode?.computedPosition.y || 0),
+      }
+    })
+})
+
 function updateInternals() {
   if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
 

packages/core/src/utils/drag.ts

@@ -77,8 +77,6 @@ export function updatePosition(
 
   dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition
 
-  if (dragItem.extent === 'parent') console.log(dragItem.position)
-
   return dragItem
 }
 
@@ -87,15 +85,13 @@ export function applyExtent<T extends NodeDragItem | GraphNode>(item: T, extent?
   let nextExtent = currentExtent
 
   if (currentExtent === 'parent' && parent) {
-    if (item.dimensions.width && item.dimensions.height) {
+    nextExtent = [
-      nextExtent = [
+      [parent.computedPosition.x, parent.computedPosition.y],
-        [parent.computedPosition.x, parent.computedPosition.y],
+      [
-        [
+        parent.computedPosition.x + parent.dimensions.width - item.dimensions.width,
-          parent.computedPosition.x + parent.dimensions.width - item.dimensions.width,
+        parent.computedPosition.y + parent.dimensions.height - item.dimensions.height,
-          parent.computedPosition.y + parent.dimensions.height - item.dimensions.height,
+      ],
-        ],
+    ]
-      ]
-    }
   } else if (currentExtent !== 'parent' && currentExtent && parent) {
     const itemExtent = currentExtent
     const parentX = parent.computedPosition.x