From 9fb551569d827237cb1a5766ffb2af862e1349c2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 7 Mar 2023 21:48:20 +0100
Subject: [PATCH] feat(core): store handle validation in store state

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useHandle.ts |  1 +
 packages/core/src/store/actions.ts         | 11 ++++++++---
 packages/core/src/types/handle.ts          |  7 +++++++
 packages/core/src/types/store.ts           |  4 ++--
 packages/core/src/utils/handle.ts          |  9 ++-------
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index cf18ed54..75636831 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -156,6 +156,7 @@ export default function useHandle({
                 viewport.value,
               )
             : connectionPosition,
+          result,
           getConnectionStatus(!!prevClosestHandle, isValid),
         )
 
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 64e3edf8..12ba98b4 100644
--- a/packages/core/src/store/actions.ts
+++ b/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) => {
-    state.connectionPosition = position
-    state.connectionStatus = status
+  const updateConnection: Actions['updateConnection'] = (position, result, status = null) => {
+    if (state.connectionStartHandle) {
+      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) => {
diff --git a/packages/core/src/types/handle.ts b/packages/core/src/types/handle.ts
index 1c8f18e9..b0462961 100644
--- a/packages/core/src/types/handle.ts
+++ b/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 */
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index eac536a6..4577870b 100644
--- a/packages/core/src/types/store.ts
+++ b/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
 
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index be05ebc0..1a7272e7 100644
--- a/packages/core/src/utils/handle.ts
+++ b/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 },