chore(core): cleanup handle

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

packages/core/src/components/Handle/Handle.vue

@@ -58,10 +58,10 @@ const isConnectable = computed(() => {
 
 const isConnecting = computed(
   () =>
-    connectionStartHandle &&
+    connectionStartHandle.value &&
-    connectionStartHandle.nodeId === nodeId &&
+    connectionStartHandle.value.nodeId === nodeId &&
-    connectionStartHandle.handleId === handleId &&
+    connectionStartHandle.value.handleId === handleId.value &&
-    connectionStartHandle.type === type.value,
+    connectionStartHandle.value.type === type.value,
 )
 
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)

packages/core/src/composables/useHandle.ts

@@ -24,10 +24,10 @@ export default function useHandle({
   onEdgeUpdate,
   onEdgeUpdateEnd,
 }: UseHandleProps) {
-  const isTarget = $computed(() => unref(type) === 'target')
+  const isTarget = computed(() => unref(type) === 'target')
-  const nodeId = $computed(() => unref(_nodeId))
+  const nodeId = computed(() => unref(_nodeId))
-  const handleId = $computed(() => unref(_handleId))
+  const handleId = computed(() => unref(_handleId))
-  const edgeUpdaterType = $computed(() => unref(_edgeUpdaterType))
+  const edgeUpdaterType = computed(() => unref(_edgeUpdaterType))
 
   const {
     vueFlowRef,
@@ -56,10 +56,10 @@ export default function useHandle({
   function handlePointerDown(event: MouseTouchEvent) {
     const isMouseTriggered = isMouseEvent(event)
 
-    if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+    // when vue-flow is used inside a shadow root we can't use document
-      // when vue-flow is used inside a shadow root we can't use document
+    const doc = getHostForElement(event.target as HTMLElement)
-      const doc = getHostForElement(event.target as HTMLElement)
 
+    if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
       const node = findNode(unref(nodeId))
 
       let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
@@ -87,8 +87,8 @@ export default function useHandle({
 
       const handleLookup = getHandleLookup({
         nodes: getNodes.value,
-        nodeId,
+        nodeId: nodeId.value,
-        handleId,
+        handleId: handleId.value,
         handleType,
       })
 
@@ -106,9 +106,9 @@ export default function useHandle({
 
       startConnection(
         {
-          nodeId: unref(nodeId),
+          nodeId: nodeId.value,
-          handleId: unref(handleId),
+          handleId: handleId.value,
-          type: unref(handleType),
+          type: handleType,
         },
         {
           x: x - containerBounds.left,
@@ -117,7 +117,7 @@ export default function useHandle({
         event,
       )
 
-      emits.connectStart({ event, nodeId, handleId, handleType })
+      emits.connectStart({ event, nodeId: nodeId.value, handleId: handleId.value, handleType })
 
       function onPointerMove(event: MouseTouchEvent) {
         connectionPosition = getEventPosition(event, containerBounds)
@@ -137,9 +137,9 @@ export default function useHandle({
           event,
           prevClosestHandle,
           connectionMode.value,
-          nodeId,
+          nodeId.value,
-          handleId,
+          handleId.value,
-          isTarget ? 'target' : 'source',
+          isTarget.value ? 'target' : 'source',
           isValidConnectionHandler,
           doc,
           edges.value,
@@ -184,10 +184,9 @@ export default function useHandle({
       function onPointerUp(event: MouseTouchEvent) {
         if ((prevClosestHandle || handleDomNode) && connection && isValid) {
           if (!onEdgeUpdate) {
-              emits.connect(connection)
+            emits.connect(connection)
-            } else {
+          } else {
-              onEdgeUpdate(event, connection)
+            onEdgeUpdate(event, connection)
-            }
           }
         }
 
@@ -222,13 +221,13 @@ export default function useHandle({
     }
   }
 
-  const handleClick = (event: MouseEvent) => {
+  function handleClick(event: MouseEvent) {
     if (!connectOnClick.value) {
       return
     }
 
     if (!connectionClickStartHandle.value) {
-      emits.clickConnectStart({ event, nodeId, handleId })
+      emits.clickConnectStart({ event, nodeId: nodeId.value, handleId: handleId.value })
 
       startConnection({ nodeId: unref(nodeId), type: unref(type), handleId: unref(handleId) }, undefined, event, true)
     } else {
@@ -249,8 +248,8 @@ export default function useHandle({
       const { connection, isValid } = isValidHandle(
         event,
         {
-          nodeId,
+          nodeId: nodeId.value,
-          id: handleId,
+          id: handleId.value,
           type: unref(type),
         },
         connectionMode.value,