diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue index f44f5631..412f4660 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.vue +++ b/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) - } else { - node.computedPosition = nodePos + nextPos = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, 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 }]) diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts index a114ad34..8d815afe 100644 --- a/packages/core/src/utils/drag.ts +++ b/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(item: T, extent? let nextExtent = currentExtent if (currentExtent === 'parent' && parent) { - if (item.dimensions.width && item.dimensions.height) { - nextExtent = [ - [parent.computedPosition.x, parent.computedPosition.y], - [ - parent.computedPosition.x + parent.dimensions.width - item.dimensions.width, - parent.computedPosition.y + parent.dimensions.height - item.dimensions.height, - ], - ] - } + nextExtent = [ + [parent.computedPosition.x, parent.computedPosition.y], + [ + parent.computedPosition.x + parent.dimensions.width - item.dimensions.width, + parent.computedPosition.y + parent.dimensions.height - item.dimensions.height, + ], + ] } else if (currentExtent !== 'parent' && currentExtent && parent) { const itemExtent = currentExtent const parentX = parent.computedPosition.x