chore(core): remove reactivity transform from handle

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

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

@@ -3,17 +3,17 @@ import { isFunction, isString } from '@vueuse/core'
 import type { Position } from '../../types'
 import type { HandleProps } from '../../types/handle'
 
-const { position = 'top' as Position, connectable = true, id, isValidConnection, ...props } = defineProps<HandleProps>()
+const { position = 'top' as Position, connectable, id, isValidConnection, ...props } = defineProps<HandleProps>()
 
 const type = toRef(props, 'type', 'source')
 
-const { connectionStartHandle, vueFlowRef, nodesConnectable } = $(useVueFlow())
+const { connectionStartHandle, vueFlowRef, nodesConnectable, noDragClassName } = useVueFlow()
 
 const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
 
 const handle = ref<HTMLDivElement>()
 
-const handleId = $computed(() => id ?? `${nodeId}__handle-${position}`)
+const handleId = computed(() => id ?? `${nodeId}__handle-${position}`)
 
 const { handlePointerDown, handleClick } = useHandle({
   nodeId,
@@ -25,50 +25,52 @@ const { handlePointerDown, handleClick } = useHandle({
 const isConnectable = computed(() => {
   if (isString(connectable) && connectable === 'single') {
     return !connectedEdges.value.some((edge) => {
-      const handle = edge[`${type.value}Handle`]
+      const id = edge[`${type.value}Handle`]
 
-      if (edge[type.value] !== nodeId) return false
+      if (edge[type.value] !== nodeId) {
+        return false
+      }
 
-      return handle ? handle === handleId : true
+      return id ? id === handleId.value : true
     })
-  } else if (isFunction(connectable)) {
+  }
+
+  if (isFunction(connectable)) {
     return connectable(node, connectedEdges.value)
   }
 
-  return isDef(connectable) ? connectable : nodesConnectable
+  return isDef(connectable) ? connectable : nodesConnectable.value
 })
 
-onMounted(() => {
+// 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)
-  // 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)
+until(() => node.initialized)
-  until(() => node.initialized)
+  .toBe(true, { flush: 'post' })
-    .toBe(true)
+  .then(() => {
-    .then(() => {
+    const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId.value)
-      const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
 
-      if (!vueFlowRef || existingBounds) return
+    if (!vueFlowRef.value || existingBounds) return
 
-      const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
+    const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
 
-      if (!nodeEl || !handle.value || !viewportNode || !handleId) return
+    if (!nodeEl || !handle.value || !viewportNode || !handleId.value) return
 
-      const nodeBounds = nodeEl.value.getBoundingClientRect()
+    const nodeBounds = nodeEl.value.getBoundingClientRect()
 
-      const handleBounds = handle.value.getBoundingClientRect()
+    const handleBounds = handle.value.getBoundingClientRect()
 
-      const style = window.getComputedStyle(viewportNode)
+    const style = window.getComputedStyle(viewportNode)
-      const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+    const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
 
-      const nextBounds = {
+    const nextBounds = {
-        id: handleId,
+      id: handleId.value,
-        position,
+      position,
-        x: (handleBounds.left - nodeBounds.left) / zoom,
+      x: (handleBounds.left - nodeBounds.left) / zoom,
-        y: (handleBounds.top - nodeBounds.top) / zoom,
+      y: (handleBounds.top - nodeBounds.top) / zoom,
-        ...getDimensions(handle.value),
+      ...getDimensions(handle.value),
-      }
+    }
 
-      node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
+    node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
-    })
+  })
-})
 </script>
 
 <script lang="ts">
@@ -85,13 +87,13 @@ export default {
     :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="position"
-    class="vue-flow__handle nodrag"
+    class="vue-flow__handle"
     :class="[
       `vue-flow__handle-${position}`,
       `vue-flow__handle-${handleId}`,
+      noDragClassName,
+      type,
       {
-        source: type !== 'target',
-        target: type === 'target',
         connectable: isConnectable,
         connecting:
           connectionStartHandle &&