refactor(edges,store): emit connection events start and end with actions

docs/components/examples/validation/App.vue

@@ -18,7 +18,6 @@ const elements = ref([
 
 const onLoad = (flowInstance) => flowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType })
-const onConnectStop = (event) => console.log('on connect stop', event)
 const onConnectEnd = (event) => console.log('on connect end', event)
 
 const onConnect = (params) => {
@@ -34,7 +33,6 @@ const onConnect = (params) => {
     @connect="onConnect"
     @pane-ready="onLoad"
     @connect-start="onConnectStart"
-    @connect-stop="onConnectStop"
     @connect-end="onConnectEnd"
   >
     <template #node-custominput="props">

examples/vite/src/Validation/ValidationExample.vue

@@ -19,7 +19,6 @@ const { nodes, edges, addEdges } = useVueFlow({
 })
 const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
-const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
 const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
 
 const onConnect = (params: Connection) => {
@@ -35,7 +34,6 @@ const onConnect = (params: Connection) => {
     @connect="onConnect"
     @pane-ready="onLoad"
     @connect-start="onConnectStart"
-    @connect-stop="onConnectStop"
     @connect-end="onConnectEnd"
   >
     <template #node-custominput="props">

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

@@ -83,7 +83,6 @@ export default () => {
     startConnection,
     updateConnection,
     endConnection,
-    setState,
     getNode,
     vueFlowRef,
   } = $(useVueFlow())
@@ -133,10 +132,9 @@ export default () => {
         x: event.clientX - containerBounds.left,
         y: event.clientY - containerBounds.top,
       },
+      event,
     )
 
-    emits.connectStart({ event, nodeId, handleId, handleType })
-
     function onMouseMove(event: MouseEvent) {
       updateConnection({
         x: event.clientX - containerBounds.left,
@@ -179,8 +177,6 @@ export default () => {
         getNode,
       )
 
-      emits.connectStop(event)
-
       const isOwnHandle = connection.source === connection.target
 
       if (isValid && !isOwnHandle) {
@@ -188,13 +184,11 @@ export default () => {
         else onEdgeUpdate(connection)
       }
 
-      emits.connectEnd(event)
-
       if (elementEdgeUpdaterType) onEdgeUpdateEnd?.()
 
       resetRecentHandle(recentHoveredHandle)
 
-      endConnection()
+      endConnection(event)
 
       doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
       doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
@@ -213,8 +207,7 @@ export default () => {
   ) => {
     if (!connectOnClick) return
     if (!connectionStartHandle) {
-      emits.connectStart({ event, nodeId, handleId, handleType })
+      startConnection({ nodeId, type: handleType, handleId }, undefined, event)
-      setState({ connectionStartHandle: { nodeId, type: handleType, handleId } })
     } else {
       let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
 
@@ -242,13 +235,9 @@ export default () => {
 
       const isOwnHandle = connection.source === connection.target
 
-      emits.connectStop(event)
-
       if (isValid && !isOwnHandle) emits.connect(connection)
 
-      emits.connectEnd(event)
+      endConnection(event)
-
-      setState({ connectionStartHandle: null })
     }
   }
 

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

@@ -64,11 +64,10 @@ const emit = defineEmits<{
   (
     event: 'connectStart',
     connectionEvent: {
-      event: MouseEvent
+      event?: MouseEvent
     } & OnConnectStartParams,
   ): void
-  (event: 'connectStop', connectionEvent: MouseEvent): void
+  (event: 'connectEnd', connectionEvent?: MouseEvent): void
-  (event: 'connectEnd', connectionEvent: MouseEvent): void
   (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
   (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
   (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void

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

@@ -358,18 +358,27 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
   const applyEdgeChanges: Actions['applyEdgeChanges'] = (changes) => applyChanges(changes, state.edges)
 
-  const startConnection: Actions['startConnection'] = (startHandle, position) => {
+  const startConnection: Actions['startConnection'] = (startHandle, position, event) => {
     state.connectionStartHandle = startHandle
-    state.connectionPosition = position
+
+    if (position) state.connectionPosition = position
+
+    state.hooks.connectStart.trigger({
+      event,
+      nodeId: startHandle.nodeId,
+      handleId: startHandle.handleId,
+      handleType: startHandle.type,
+    })
   }
 
   const updateConnection: Actions['updateConnection'] = (position) => {
     state.connectionPosition = position
   }
 
-  const endConnection: Actions['endConnection'] = () => {
+  const endConnection: Actions['endConnection'] = (event) => {
     state.connectionPosition = { x: NaN, y: NaN }
     state.connectionStartHandle = null
+    state.hooks.connectEnd.trigger(event)
   }
 
   const setState: Actions['setState'] = (options) => {

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

@@ -21,7 +21,6 @@ export const createHooks = (): FlowHooks => ({
   miniMapNodeMouseLeave: createEventHook(),
   connect: createEventHook(),
   connectStart: createEventHook(),
-  connectStop: createEventHook(),
   connectEnd: createEventHook(),
   paneReady: createEventHook(),
   move: createEventHook(),

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

@@ -13,7 +13,7 @@ export interface HandleElement extends XYPosition, Dimensions {
 export interface StartHandle {
   nodeId: string
   type: HandleType
-  handleId?: string | null
+  handleId: string | null
 }
 
 /** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */

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

@@ -52,10 +52,9 @@ export interface FlowEvents {
   miniMapNodeMouseLeave: NodeMouseEvent
   connect: Connection
   connectStart: {
-    event: MouseEvent
+    event?: MouseEvent
   } & OnConnectStartParams
-  connectStop: MouseEvent
+  connectEnd: MouseEvent | undefined
-  connectEnd: MouseEvent
   paneReady: VueFlowStore
   move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }
   moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }
@@ -120,7 +119,6 @@ export interface Emits {
       event: MouseEvent
     } & OnConnectStartParams,
   ): void
-  (event: 'connectStop', connectionEvent: MouseEvent): void
   (event: 'connectEnd', connectionEvent: MouseEvent): void
   (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
   (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void

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

@@ -8,7 +8,7 @@ import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, Viewport, ViewportFunctions } from './zoom'
 import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
-import type { HandleType, StartHandle } from './handle'
+import type { StartHandle } from './handle'
 
 export interface UpdateNodeDimensionsParams {
   id: string
@@ -16,13 +16,6 @@ export interface UpdateNodeDimensionsParams {
   forceUpdate?: boolean
 }
 
-export interface StartConnectionParams {
-  connectionPosition: XYPosition
-  connectionNodeId: string
-  connectionHandleId: string | null
-  connectionHandleType: HandleType
-}
-
 export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** Vue flow element ref */
   vueFlowRef: HTMLDivElement | null
@@ -195,11 +188,11 @@ 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: (startHandle: StartHandle, position: XYPosition) => void
+  startConnection: (startHandle: StartHandle, position?: XYPosition, event?: MouseEvent) => void
   /** update connection position */
   updateConnection: (position: XYPosition) => void
   /** end (or cancel) a connection */
-  endConnection: () => void
+  endConnection: (event?: MouseEvent) => void
 
   /** internal position updater, you probably don't want to use this */
   updateNodePositions: UpdateNodePosition