refactor(edges,store): use connection start handle and remove other props from store

packages/vue-flow/src/components/ConnectionLine/ConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import type { GraphNode, HandleElement, HandleType } from '../../types'
+import type { GraphNode, HandleElement } from '../../types'
 import { ConnectionLineType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
@@ -12,12 +12,10 @@ const { sourceNode } = defineProps<{
 
 const {
   getNodes,
-  connectionHandleId,
+  connectionStartHandle,
-  connectionHandleType,
   connectionPosition,
   connectionLineType,
   connectionLineStyle,
-  connectionNodeId,
   connectionLineOptions,
   viewport,
 } = $(useVueFlow())
@@ -26,10 +24,14 @@ const slots = inject(Slots)?.['connection-line']
 
 const hasSlot = slots?.({})
 
+const handleId = connectionStartHandle!.handleId
+const nodeId = connectionStartHandle!.nodeId
+const type = connectionStartHandle!.type
+
 const sourceHandle =
-  connectionHandleId && connectionHandleType
+  handleId && type
-    ? sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
+    ? sourceNode.handleBounds[type]?.find((d: HandleElement) => d.id === handleId)
-    : connectionHandleType && sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
+    : type && sourceNode.handleBounds[type ?? 'source']?.[0]
 
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height

packages/vue-flow/src/composables/useHandle.ts

@@ -123,15 +123,17 @@ export default () => {
 
     const containerBounds = vueFlowRef.getBoundingClientRect()
 
-    startConnection({
+    startConnection(
-      connectionPosition: {
+      {
+        nodeId,
+        handleId,
+        type: handleType,
+      },
+      {
         x: event.clientX - containerBounds.left,
         y: event.clientY - containerBounds.top,
       },
-      connectionNodeId: nodeId,
+    )
-      connectionHandleId: handleId,
-      connectionHandleType: handleType,
-    })
 
     emits.connectStart({ event, nodeId, handleId, handleType })
 

packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -15,9 +15,8 @@ const {
   connectionMode,
   edgeUpdaterRadius,
   onPaneReady,
-  connectionNodeId,
+  connectionStartHandle,
   nodesConnectable,
-  connectionHandleType,
   edgesUpdatable,
   elementsSelectable,
   getSelectedNodes,
@@ -38,21 +37,24 @@ const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdata
 const updating = ref<string>()
 
 const sourceNode = $(
-  controlledComputed($$(connectionNodeId), () => {
+  controlledComputed(
-    if (connectionNodeId) return getNode(connectionNodeId)
+    () => connectionStartHandle?.nodeId,
-    return false
+    () => {
-  }),
+      if (connectionStartHandle?.nodeId) return getNode(connectionStartHandle.nodeId)
+      return false
+    },
+  ),
 )
 
 const connectionLineVisible = $(
   controlledComputed(
-    $$(connectionNodeId),
+    () => connectionStartHandle?.nodeId,
     () =>
       !!(
         sourceNode &&
         (typeof sourceNode.connectable === 'undefined' ? nodesConnectable : sourceNode.connectable) &&
-        connectionNodeId &&
+        connectionStartHandle?.nodeId &&
-        connectionHandleType
+        connectionStartHandle?.type
       ),
   ),
 )

packages/vue-flow/src/store/actions.ts

@@ -358,11 +358,9 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
   const applyEdgeChanges: Actions['applyEdgeChanges'] = (changes) => applyChanges(changes, state.edges)
 
-  const startConnection: Actions['startConnection'] = (params) => {
+  const startConnection: Actions['startConnection'] = (startHandle, position) => {
-    state.connectionPosition = params.connectionPosition
+    state.connectionStartHandle = startHandle
-    state.connectionNodeId = params.connectionNodeId
+    state.connectionPosition = position
-    state.connectionHandleId = params.connectionHandleId
-    state.connectionHandleType = params.connectionHandleType
   }
 
   const updateConnection: Actions['updateConnection'] = (position) => {
@@ -371,9 +369,7 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
   const endConnection: Actions['endConnection'] = () => {
     state.connectionPosition = { x: NaN, y: NaN }
-    state.connectionNodeId = null
+    state.connectionStartHandle = null
-    state.connectionHandleId = null
-    state.connectionHandleType = null
   }
 
   const setState: Actions['setState'] = (options) => {

packages/vue-flow/src/store/state.ts

@@ -82,12 +82,9 @@ const defaultState = (): State => ({
     type: ConnectionLineType.Bezier,
     style: {},
   },
-  connectionNodeId: null,
-  connectionHandleId: null,
-  connectionHandleType: null,
-  connectionPosition: { x: NaN, y: NaN },
   connectionMode: ConnectionMode.Loose,
   connectionStartHandle: null,
+  connectionPosition: { x: NaN, y: NaN },
   connectOnClick: true,
 
   snapGrid: [15, 15],

packages/vue-flow/src/types/store.ts

@@ -67,11 +67,6 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   multiSelectionKeyCode: KeyFilter
   zoomActivationKeyCode: KeyFilter
 
-  // todo: remove these and just use connection start handle
-  connectionNodeId: string | null
-  connectionHandleId: string | null
-  connectionHandleType: HandleType | null
-  connectionPosition: XYPosition
   connectionMode: ConnectionMode
   connectionLineOptions: ConnectionLineOptions
   /** @deprecated use {@link ConnectionLineOptions.type} */
@@ -79,6 +74,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** @deprecated use {@link ConnectionLineOptions.style} */
   connectionLineStyle: CSSProperties | null
   connectionStartHandle: StartHandle | null
+  connectionPosition: XYPosition
 
   connectOnClick: boolean
   edgeUpdaterRadius: number
@@ -199,7 +195,7 @@ export interface Actions extends ViewportFunctions {
   /** force update node internal data, if handle bounds are incorrect, you might want to use this */
   updateNodeInternals: UpdateNodeInternals
   /** start a connection */
-  startConnection: (params: StartConnectionParams) => void
+  startConnection: (startHandle: StartHandle, position: XYPosition) => void
   /** update connection position */
   updateConnection: (position: XYPosition) => void
   /** end (or cancel) a connection */