fix(core): use center position of handle as snapping point for connection lines (#1625)

* fix(core): calculate handle positions correctly Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * fix(core): remove handleId check Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(core): cleanup Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(core): cleanup click connect handlers Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * fix(core): add flow id to handle ids Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * tests: correct updateEdge test Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * fix(core): use center position of handle Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(examples): cleanup easy connect example Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * refactor(tests): run actions on chrome Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(workflows): correctly hash lock file Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2025-01-04 16:56:00 +01:00
parent 041fd871a1
commit b33da47a3a
16 changed files with 385 additions and 312 deletions
@@ -19,6 +19,7 @@ const type = toRef(() => props.type ?? 'source')
 const isValidConnection = toRef(() => props.isValidConnection ?? null)

 const {
+  id: flowId,
  connectionStartHandle,
  connectionClickStartHandle,
  connectionEndHandle,
@@ -39,17 +40,17 @@ const isConnectableEnd = toRef(() => (typeof connectableEnd !== 'undefined' ? co
 const isConnecting = toRef(
  () =>
    (connectionStartHandle.value?.nodeId === nodeId &&
-      connectionStartHandle.value?.handleId === handleId &&
+      connectionStartHandle.value?.id === handleId &&
      connectionStartHandle.value?.type === type.value) ||
    (connectionEndHandle.value?.nodeId === nodeId &&
-      connectionEndHandle.value?.handleId === handleId &&
+      connectionEndHandle.value?.id === handleId &&
      connectionEndHandle.value?.type === type.value),
 )

 const isClickConnecting = toRef(
  () =>
    connectionClickStartHandle.value?.nodeId === nodeId &&
-    connectionClickStartHandle.value?.handleId === handleId &&
+    connectionClickStartHandle.value?.id === handleId &&
    connectionClickStartHandle.value?.type === type.value,
 )

@@ -127,6 +128,8 @@ onMounted(() => {
    position,
    x: (handleBounds.left - nodeBounds.left) / zoom,
    y: (handleBounds.top - nodeBounds.top) / zoom,
+    type: type.value,
+    nodeId,
    ...getDimensions(handle.value),
  }

@@ -177,7 +180,7 @@ export default {
 <template>
  <div
    ref="handle"
-    :data-id="`${nodeId}-${handleId}-${type}`"
+    :data-id="`${flowId}-${nodeId}-${handleId}-${type}`"
    :data-handleid="handleId"
    :data-nodeid="nodeId"
    :data-handlepos="position"