diff --git a/src/components/Edges/EdgeWrapper.vue b/src/components/Edges/EdgeWrapper.vue index 19ba0e2a..f7b99d78 100644 --- a/src/components/Edges/EdgeWrapper.vue +++ b/src/components/Edges/EdgeWrapper.vue @@ -65,8 +65,8 @@ const sourceHandle = controlledComputed( () => getHandle(edge.value.sourceNode.handleBounds.source, edge.value.sourceHandle), ) const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle)) -const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom)) -const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top)) +const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom)) +const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top)) const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius) onMounted(() => { diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue index 68df28ab..c41385ad 100644 --- a/src/components/Nodes/NodeWrapper.vue +++ b/src/components/Nodes/NodeWrapper.vue @@ -90,27 +90,23 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) store.hooks.nodeDragStop.trigger({ event, node: node.value }) } +const updatePosition = (width: number, height: number) => { + const handleBounds = getHandleBounds(nodeElement.value, scale.value, id) + node.value.dimensions = { + width, + height, + } + node.value.handleBounds = handleBounds +} + store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } }) onMounted(() => { const dimensions = ref(getDimensions(nodeElement.value)) useResizeObserver(nodeElement, () => (dimensions.value = getDimensions(nodeElement.value))) - watch( - dimensions, - ({ width: w, height: h }) => { - nextTick(() => { - if (w > 0 && h > 0) { - const handleBounds = getHandleBounds(nodeElement.value, scale.value, id) - - node.value.dimensions = { - width: w, - height: h, - } - node.value.handleBounds = handleBounds - } - }) - }, - { immediate: true }, + watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () => + nextTick(() => updatePosition(dimensions.value.width, dimensions.value.height)), ) + watch(dimensions, ({ width: w, height: h }) => nextTick(() => w > 0 && h > 0 && updatePosition(w, h)), { immediate: true }) })