Get clicked handle element from event.currentTarget

packages/react/src/components/Handle/index.tsx

@@ -120,6 +120,7 @@ function HandleComponent(
       return;
     }
 
+    const handleElement = event.currentTarget
     const isMouseTriggered = isMouseEvent(event.nativeEvent);
 
     if (
@@ -128,7 +129,7 @@ function HandleComponent(
     ) {
       const currentStore = store.getState();
 
-      XYHandle.onPointerDown(event.nativeEvent, {
+      XYHandle.onPointerDown(event.nativeEvent, handleElement, {
         autoPanOnConnect: currentStore.autoPanOnConnect,
         connectionMode: currentStore.connectionMode,
         connectionRadius: currentStore.connectionRadius,

packages/system/src/xyhandle/XYHandle.ts

@@ -22,6 +22,7 @@ const alwaysValid = () => true;
 
 function onPointerDown(
   event: MouseEvent | TouchEvent,
+  handleElement: Element,
   {
     connectionMode,
     connectionRadius,
@@ -54,8 +55,7 @@ function onPointerDown(
   let closestHandle: Handle | null;
 
   const { x, y } = getEventPosition(event);
-  const clickedHandle = doc?.elementFromPoint(x, y);
-  const handleType = getHandleType(edgeUpdaterType, clickedHandle);
+  const handleType = getHandleType(edgeUpdaterType, handleElement);
   const containerBounds = domNode?.getBoundingClientRect();
   let connectionStarted = false;
 

packages/system/src/xyhandle/types.ts

@@ -54,7 +54,7 @@ export type IsValidParams = {
 };
 
 export type XYHandleInstance = {
-  onPointerDown: (event: MouseEvent | TouchEvent, params: OnPointerDownParams) => void;
+  onPointerDown: (event: MouseEvent | TouchEvent, handleElement: Element, params: OnPointerDownParams) => void;
   isValid: (event: MouseEvent | TouchEvent, params: IsValidParams) => Result;
 };