fix(nodes): apply initial node extent

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

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { useDrag, useNodeHooks, useVueFlow } from '../../composables'
-import type { GraphNode, NodeComponent, SnapGrid, XYZPosition } from '../../types'
+import type { CoordinateExtent, GraphNode, NodeComponent, SnapGrid, XYZPosition } from '../../types'
 import { NodeId } from '../../context'
-import { getConnectedEdges, getHandleBounds, getXYZPos, handleNodeClick } from '../../utils'
+import { clampPosition, getConnectedEdges, getHandleBounds, getXYZPos, handleNodeClick } from '../../utils'
+import { applyExtent } from '../../utils/drag'
 
 const { id, type, name, draggable, selectable, connectable, snapGrid, ...props } = defineProps<{
   id: string
@@ -19,6 +20,7 @@ const { id, type, name, draggable, selectable, connectable, snapGrid, ...props }
 provide(NodeId, id)
 
 const {
+  nodeExtent,
   edges,
   viewport,
   noPanClassName,
@@ -77,10 +79,16 @@ const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
 const updateInternals = () => {
   if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
 
+  const currentExtent = applyExtent(node, nodeExtent, parentNode)
+
+  const nextPos =
+    currentExtent && typeof currentExtent !== 'string'
+      ? clampPosition(node.position, currentExtent as CoordinateExtent)
+      : node.position
+
   updatePosition(
     {
-      x: node.position.x,
+      ...nextPos,
-      y: node.position.y,
       z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
     },
     parentNode ? { ...parentNode.computedPosition } : undefined,
@@ -94,6 +102,8 @@ onUpdateNodeInternals((updateIds) => {
 })
 
 onMounted(() => {
+  updateInternals()
+
   if (!scope) scope = effectScope()
 
   scope.run(() => {
@@ -102,7 +112,7 @@ onMounted(() => {
       () => {
         updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
       },
-      { flush: 'post', immediate: true },
+      { flush: 'post' },
     )
 
     watch(
@@ -117,9 +127,14 @@ onMounted(() => {
         () => parentNode?.dimensions,
       ],
       ([newX, newY, parentX, parentY, parentZ]) => {
+        const currentExtent = applyExtent(node, nodeExtent, parentNode)
+        const nextPos =
+          currentExtent && typeof currentExtent !== 'string'
+            ? clampPosition({ x: newX, y: newY }, currentExtent as CoordinateExtent)
+            : { x: newX, y: newY }
+
         const xyzPos = {
-          x: newX,
+          ...nextPos,
-          y: newY,
           z: node.selected ? 1000 : 0,
         }
 
@@ -130,7 +145,7 @@ onMounted(() => {
           target: getHandleBounds('.target', nodeElement.value, viewport.zoom),
         }
       },
-      { immediate: true, flush: 'post' },
+      { flush: 'post' },
     )
   })
 })

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

@@ -62,33 +62,41 @@ export function updatePosition(
   parent?: GraphNode,
   nodeExtent?: CoordinateExtent,
 ): NodeDragItem {
-  let currentExtent = dragItem.extent || nodeExtent
   const nextPosition = { x: mousePos.x - dragItem.distance.x, y: mousePos.y - dragItem.distance.y }
 
-  if (dragItem.extent === 'parent' && parent) {
+  const currentExtent = applyExtent(dragItem, nodeExtent, parent)
-    if (dragItem.parentNode && dragItem.dimensions.width && dragItem.dimensions.height) {
-      currentExtent =
-        parent.computedPosition && parent.dimensions.width && parent.dimensions.height
-          ? [
-              [parent.computedPosition.x, parent.computedPosition.y],
-              [
-                parent.computedPosition.x + parent.dimensions.width - dragItem.dimensions.width,
-                parent.computedPosition.y + parent.dimensions.height - dragItem.dimensions.height,
-              ],
-            ]
-          : currentExtent
-    }
-  } else if (dragItem.extent && dragItem.parentNode) {
-    const dragItemExtent = dragItem.extent as CoordinateExtent
-    const parentX = parent?.computedPosition?.x ?? 0
-    const parentY = parent?.computedPosition?.y ?? 0
-    currentExtent = [
-      [dragItemExtent[0][0] + parentX, dragItemExtent[0][1] + parentY],
-      [dragItemExtent[1][0] + parentX, dragItemExtent[1][1] + parentY],
-    ]
-  }
 
   dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition
 
   return dragItem
 }
+
+export function applyExtent<T extends NodeDragItem | GraphNode>(item: T, extent?: CoordinateExtent, parent?: GraphNode) {
+  let currentExtent = item.extent || extent
+
+  if (item.extent === 'parent' && parent) {
+    if (item.parentNode && item.dimensions.width && item.dimensions.height) {
+      currentExtent =
+        parent.computedPosition && parent.dimensions.width && parent.dimensions.height
+          ? [
+              [parent.computedPosition.x, parent.computedPosition.y],
+              [
+                parent.computedPosition.x + parent.dimensions.width - item.dimensions.width,
+                parent.computedPosition.y + parent.dimensions.height - item.dimensions.height,
+              ],
+            ]
+          : currentExtent
+    }
+  } else if (item.extent && item.parentNode) {
+    const itemExtent = item.extent as CoordinateExtent
+    const parentX = parent?.computedPosition?.x ?? 0
+    const parentY = parent?.computedPosition?.y ?? 0
+
+    currentExtent = [
+      [itemExtent[0][0] + parentX, itemExtent[0][1] + parentY],
+      [itemExtent[1][0] + parentX, itemExtent[1][1] + parentY],
+    ]
+  }
+
+  return currentExtent
+}