diff --git a/docs/examples/custom-node/OutputNode.vue b/docs/examples/custom-node/OutputNode.vue index 84045efaa..8712d7204 100644 --- a/docs/examples/custom-node/OutputNode.vue +++ b/docs/examples/custom-node/OutputNode.vue @@ -2,7 +2,7 @@ import { Handle, Position, useNodeConnections, useNodesData } from '@vue-flow/core' const connections = useNodeConnections({ - type: 'target', + handleType: 'target', }) const nodesData = useNodesData(() => connections.value[0]?.source) diff --git a/docs/examples/layout/ProcessNode.vue b/docs/examples/layout/ProcessNode.vue index ec2c0f2ce..97b43efc1 100644 --- a/docs/examples/layout/ProcessNode.vue +++ b/docs/examples/layout/ProcessNode.vue @@ -16,11 +16,11 @@ const props = defineProps({ }) const sourceConnections = useNodeConnections({ - type: 'target', + handleType: 'target', }) const targetConnections = useNodeConnections({ - type: 'source', + handleType: 'source', }) const isSender = toRef(() => sourceConnections.value.length <= 0) diff --git a/docs/examples/math/ResultNode.vue b/docs/examples/math/ResultNode.vue index c9cc27f54..c26e9af52 100644 --- a/docs/examples/math/ResultNode.vue +++ b/docs/examples/math/ResultNode.vue @@ -15,12 +15,12 @@ const mathFunctions = { const sourceConnections = useNodeConnections({ // type target means all connections where *this* node is the target // that means we go backwards in the graph to find the source of the connection(s) - type: 'target', + handleType: 'target', }) // Get the source connections of the operator node const operatorSourceConnections = useNodeConnections({ - type: 'target', + handleType: 'target', nodeId: () => sourceConnections.value[0]?.source, }) diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md index 336a90586..0652db2a3 100644 --- a/docs/src/guide/composables.md +++ b/docs/src/guide/composables.md @@ -110,12 +110,12 @@ import { type HandleConnection, useNodeConnections } from '@vue-flow/core' // get all connections where this node is the target (incoming connections) const targetConnections = useNodeConnections({ // type is required - type: 'target', + handleType: 'target', }) // get all connections where this node is the source (outgoing connections) const sourceConnections = useNodeConnections({ - type: 'source', + handleType: 'source', }) const handleConnections = useNodeConnections({ @@ -124,7 +124,7 @@ const handleConnections = useNodeConnections({ const connections = useNodeConnections({ nodeId: '1', // you can explicitly pass a node id, otherwise it's used from the `NodeId injection - type: 'target', + handleType: 'target', onConnect: (connections: HandleConnection[]) => { // do something with the connections }, diff --git a/examples/vite/src/Layouting/ProcessNode.vue b/examples/vite/src/Layouting/ProcessNode.vue index 3e590fe55..68be91a4e 100644 --- a/examples/vite/src/Layouting/ProcessNode.vue +++ b/examples/vite/src/Layouting/ProcessNode.vue @@ -6,11 +6,11 @@ import type { ProcessNodeData } from './types' const props = defineProps>() const sourceConnections = useNodeConnections({ - type: 'target', + handleType: 'target', }) const targetConnections = useNodeConnections({ - type: 'source', + handleType: 'source', }) const isSender = toRef(() => sourceConnections.value.length <= 0) diff --git a/examples/vite/src/Math/ResultNode.vue b/examples/vite/src/Math/ResultNode.vue index 1e28fa356..1a0cde6ba 100644 --- a/examples/vite/src/Math/ResultNode.vue +++ b/examples/vite/src/Math/ResultNode.vue @@ -10,12 +10,12 @@ defineProps<{ id: string }>() const sourceConnections = useNodeConnections({ // type target means all connections where *this* node is the target // that means we go backwards in the graph to find the source of the connection(s) - type: 'target', + handleType: 'target', }) // Get the source connections of the operator node const operatorSourceConnections = useNodeConnections({ - type: 'target', + handleType: 'target', nodeId: () => sourceConnections.value[0]?.source, }) diff --git a/packages/core/src/composables/useNodeConnections.ts b/packages/core/src/composables/useNodeConnections.ts index 125953f1f..1f1bffbe9 100644 --- a/packages/core/src/composables/useNodeConnections.ts +++ b/packages/core/src/composables/useNodeConnections.ts @@ -6,7 +6,7 @@ import { useNodeId } from './useNodeId' import { useVueFlow } from './useVueFlow' export interface UseNodeConnectionsParams { - type?: MaybeRefOrGetter + handleType?: MaybeRefOrGetter handleId?: MaybeRefOrGetter nodeId?: MaybeRefOrGetter onConnect?: (connections: NodeConnection[]) => void @@ -18,7 +18,7 @@ export interface UseNodeConnectionsParams { * * @public * @param params - * @param params.type - handle type `source` or `target` + * @param params.handleType - handle type `source` or `target` * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used * @param params.handleId - the handle id (this is required if the node has multiple handles of the same type) * @param params.onConnect - gets called when a connection is created @@ -27,7 +27,7 @@ export interface UseNodeConnectionsParams { * @returns An array of connections */ export function useNodeConnections(params: UseNodeConnectionsParams = {}) { - const { type, handleId, nodeId, onConnect, onDisconnect } = params + const { handleType, handleId, nodeId, onConnect, onDisconnect } = params const { connectionLookup } = useVueFlow() @@ -39,10 +39,12 @@ export function useNodeConnections(params: UseNodeConnectionsParams = {}) { const lookupKey = computed(() => { const currNodeId = toValue(nodeId) ?? _nodeId - const handleType = toValue(type) + const currentHandleType = toValue(handleType) const currHandleId = toValue(handleId) - return `${currNodeId}${handleType ? (currHandleId ? `-${handleType}-${currHandleId}` : `-${handleType}`) : ''}` + return `${currNodeId}${ + currentHandleType ? (currHandleId ? `-${currentHandleType}-${currHandleId}` : `-${currentHandleType}`) : '' + }` }) watch(