From 8f6ce132266e8857f2dee6fbfd1947f2848704f9 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 15 Dec 2021 10:07:41 +0100 Subject: [PATCH] update(nodes, edges): watch source/target pos to update position so edges get properly re-rendered * use standard computed for source/target pos in edges Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- src/components/Edges/EdgeWrapper.vue | 4 ++-- src/components/Nodes/NodeWrapper.vue | 28 ++++++++++++---------------- 2 files changed, 14 insertions(+), 18 deletions(-) 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 }) })