feat(core): store handle validation in store state

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/composables/useHandle.ts

@@ -156,6 +156,7 @@ export default function useHandle({
                 viewport.value,
               )
             : connectionPosition,
+          result,
           getConnectionStatus(!!prevClosestHandle, isValid),
         )
 

packages/core/src/store/actions.ts

@@ -443,9 +443,14 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
     if (position) state.connectionPosition = position
   }
 
-  const updateConnection: Actions['updateConnection'] = (position, status = null) => {
+  const updateConnection: Actions['updateConnection'] = (position, result, status = null) => {
-    state.connectionPosition = position
+    if (state.connectionStartHandle) {
-    state.connectionStatus = status
+      state.connectionPosition = position
+      state.connectionStartHandle.result = result
+      state.connectionStatus = status
+    } else {
+      warn('Cannot update connection as it has not been started')
+    }
   }
 
   const endConnection: Actions['endConnection'] = (event, isClick) => {

packages/core/src/types/handle.ts

@@ -18,10 +18,17 @@ export interface ConnectionHandle {
   y: number
 }
 
+export interface ValidHandleResult {
+  handleDomNode: Element | null
+  isValid: boolean
+  connection: Connection
+}
+
 export interface StartHandle {
   nodeId: string
   type: HandleType
   handleId: string | null
+  result?: ValidHandleResult
 }
 
 /** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */

packages/core/src/types/store.ts

@@ -27,7 +27,7 @@ import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportFunctions, ViewportTransform } from './zoom'
 import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
-import type { StartHandle } from './handle'
+import type { StartHandle, ValidHandleResult } from './handle'
 
 export interface UpdateNodeDimensionsParams {
   id: string
@@ -248,7 +248,7 @@ export interface Actions extends ViewportFunctions {
   /** start a connection */
   startConnection: (startHandle: StartHandle, position?: XYPosition, event?: MouseEvent | TouchEvent, isClick?: boolean) => void
   /** update connection position */
-  updateConnection: (position: XYPosition, status?: ConnectionStatus | null) => void
+  updateConnection: (position: XYPosition, result?: ValidHandleResult, status?: ConnectionStatus | null) => void
   /** end (or cancel) a connection */
   endConnection: (event?: MouseEvent | TouchEvent, isClick?: boolean) => void
 

packages/core/src/utils/handle.ts

@@ -8,6 +8,7 @@ import type {
   HandleType,
   NodeHandleBounds,
   ValidConnectionFunc,
+  ValidHandleResult,
   XYPosition,
 } from '~/types'
 
@@ -64,12 +65,6 @@ export function getClosestHandle(
   return closestHandle
 }
 
-interface Result {
-  handleDomNode: Element | null
-  isValid: boolean
-  connection: Connection
-}
-
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
 export function isValidHandle(
   event: MouseEvent | TouchEvent,
@@ -90,7 +85,7 @@ export function isValidHandle(
   const handleBelow = doc.elementFromPoint(x, y)
   const handleToCheck = handleBelow?.classList.contains('vue-flow__handle') ? handleBelow : handleDomNode
 
-  const result: Result = {
+  const result: ValidHandleResult = {
     handleDomNode: handleToCheck,
     isValid: false,
     connection: { source: '', target: '', sourceHandle: null, targetHandle: null },