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
@@ -1,15 +1,15 @@
 import type { Ref } from 'vue'
 import { nextTick } from 'vue'
-import type { Actions, GraphNode, HandleElement, Position } from '../types'
+import type { Actions, GraphNode, HandleElement, HandleType, Position } from '../types'
 import { getDimensions } from '.'

 export function getHandleBounds(
-  selector: string,
+  type: HandleType,
  nodeElement: HTMLDivElement,
  nodeBounds: DOMRect,
  zoom: number,
 ): HandleElement[] {
-  const handles = nodeElement.querySelectorAll(`.vue-flow__handle${selector}`)
+  const handles = nodeElement.querySelectorAll(`.vue-flow__handle.${type}`)

  const handlesArray = Array.from(handles) as HTMLDivElement[]

@@ -19,6 +19,8 @@ export function getHandleBounds(
    return {
      id: handle.getAttribute('data-handleid'),
      position: handle.getAttribute('data-handlepos') as unknown as Position,
+      nodeId: handle.getAttribute('data-nodeid') as string,
+      type,
      x: (handleBounds.left - nodeBounds.left) / zoom,
      y: (handleBounds.top - nodeBounds.top) / zoom,
      ...getDimensions(handle),