diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue index b3644168..4542cbbf 100644 --- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue +++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue @@ -5,10 +5,8 @@ import { GraphNode, NodeComponent, SnapGrid } from '../../types' import { NodeId } from '../../context' import { getConnectedEdges, getHandleBounds, getXYZPos } from '../../utils' -const { id, type, name, node, parentNode, draggable, selectable, connectable, snapGrid } = defineProps<{ +const { id, type, name, draggable, selectable, connectable, snapGrid } = defineProps<{ id: string - node: GraphNode - parentNode?: GraphNode draggable: boolean selectable: boolean connectable: boolean @@ -35,6 +33,9 @@ const { resetSelectedElements, } = $(useVueFlow()) +const node = $computed(() => getNode(id)!) +const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined)) + const nodeElement = ref() let dragging = $ref(false) @@ -69,38 +70,35 @@ useDrag({ }, onDrag(event, { dx, dy }) { dragging = true - updateNodePosition({ id: node.id, diff: { x: dx, y: dy } }) + updateNodePosition({ id, diff: { x: dx, y: dy } }) emits.nodeDrag({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) }) }, onStop(event) { dragging = false - - updateNodePosition({ id: node.id }) - emits.nodeDragStop({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) }) }, }) onBeforeMount(() => { - updateNodePosition({ id: node.id, diff: { x: 0, y: 0 } }) + updateNodePosition({ id, diff: { x: 0, y: 0 } }) }) onMounted(() => { const observer = useResizeObserver(nodeElement, () => - updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }]), + updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }]), ) watch( [() => node.type, () => node.sourcePosition, () => node.targetPosition], () => { - updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value }]) + updateNodeDimensions([{ id, nodeElement: nodeElement.value }]) }, { flush: 'post' }, ) onBeforeUnmount(() => observer.stop()) - updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }]) + updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }]) watch( [() => node.position, () => parentNode?.computedPosition, () => node.selected, () => parentNode?.selected], @@ -233,7 +231,7 @@ export default { :is-valid-target-pos="node.isValidTargetPos" :is-valid-source-pos="node.isValidSourcePos" :parent-node="node.parentNode" - :dragging="!!node.dragging" + :dragging="dragging" :z-index="node.computedPosition.z" :target-position="node.targetPosition" :source-position="node.sourcePosition" diff --git a/packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue b/packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue index 7ab7adca..4501b49c 100644 --- a/packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue +++ b/packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue @@ -61,9 +61,7 @@ export default { :id="node.id" :key="node.id" :type="getType(node)" - :name="getType(node) ? node.type ?? 'default' : 'default'" - :node="node" - :parent-node="node.parentNode ? getNode(node.parentNode) : undefined" + :name="node.type || 'default'" :draggable="draggable(node.draggable)" :selectable="selectable(node.selectable)" :connectable="connectable(node.connectable)"