refactor(core): rename useNodeConnections params (#1743)

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

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)

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)

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,
 })
 

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
   },

examples/vite/src/Layouting/ProcessNode.vue

@@ -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)

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,
 })
 

packages/core/src/composables/useNodeConnections.ts

@@ -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
@@ -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(