streamlined connections

packages/system/src/utils/dom.ts

@@ -1,4 +1,4 @@
-import type { Transform, XYPosition, SnapGrid, Dimensions, NodeOrigin, HandleElement, Position } from '../types';
+import type { Transform, XYPosition, SnapGrid, Dimensions, NodeOrigin, Handle, Position } from '../types';
 import { snapPosition, pointToRendererPoint } from './general';
 
 export type GetPointerPositionParams = {
@@ -59,13 +59,14 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
 // We store them in the internals object of the node in order to avoid
 // unnecessary recalculations.
 export const getHandleBounds = (
-  selector: string,
+  type: 'source' | 'target',
   nodeElement: HTMLDivElement,
   nodeBounds: DOMRect,
   zoom: number,
+  nodeId: string,
   nodeOrigin: NodeOrigin = [0, 0]
-): HandleElement[] | null => {
-  const handles = nodeElement.querySelectorAll(selector);
+): Handle[] | null => {
+  const handles = nodeElement.querySelectorAll(`.${type}`);
 
   if (!handles || !handles.length) {
     return null;
@@ -78,11 +79,13 @@ export const getHandleBounds = (
     y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
   };
 
-  return handlesArray.map((handle): HandleElement => {
+  return handlesArray.map((handle): Handle => {
     const handleBounds = handle.getBoundingClientRect();
 
     return {
       id: handle.getAttribute('data-handleid'),
+      type,
+      nodeId,
       position: handle.getAttribute('data-handlepos') as unknown as Position,
       x: (handleBounds.left - nodeOffset.x) / zoom,
       y: (handleBounds.top - nodeOffset.y) / zoom,