Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(core): rename useNodeConnections params #1743

Merged
merged 1 commit into from
Jan 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/examples/custom-node/OutputNode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/layout/ProcessNode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/math/ResultNode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})

Expand Down
6 changes: 3 additions & 3 deletions docs/src/guide/composables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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
},
Expand Down
4 changes: 2 additions & 2 deletions examples/vite/src/Layouting/ProcessNode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import type { ProcessNodeData } from './types'
const props = defineProps<NodeProps<ProcessNodeData>>()

const sourceConnections = useNodeConnections({
type: 'target',
handleType: 'target',
})

const targetConnections = useNodeConnections({
type: 'source',
handleType: 'source',
})

const isSender = toRef(() => sourceConnections.value.length <= 0)
Expand Down
4 changes: 2 additions & 2 deletions examples/vite/src/Math/ResultNode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})

Expand Down
12 changes: 7 additions & 5 deletions packages/core/src/composables/useNodeConnections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useNodeId } from './useNodeId'
import { useVueFlow } from './useVueFlow'

export interface UseNodeConnectionsParams {
type?: MaybeRefOrGetter<HandleType>
handleType?: MaybeRefOrGetter<HandleType>
handleId?: MaybeRefOrGetter<string | null>
nodeId?: MaybeRefOrGetter<string | null>
onConnect?: (connections: NodeConnection[]) => void
Expand All @@ -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
Expand All @@ -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()

Expand All @@ -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(
Expand Down
Loading