Implemented handleSelector functionality

src/components/Nodes/wrapNode.tsx

@@ -171,6 +171,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           dragging: false,
         });
 
+        // @TODO: Fix the bug "onNodeDragStop not getting called on first render"
         if (onNodeDragStop && node) {
           onNodeDragStop(event.sourceEvent as MouseEvent, { ...node, dragging: false });
         }

src/hooks/useDrag.ts

@@ -16,7 +16,6 @@ type UseDragParams = {
   nodeRef: RefObject<Element>;
   disabled?: boolean;
   noDragClassName?: string;
-  // @TODO: implement handleSelector functionality
   handleSelector?: string;
   nodeId?: string;
 };
@@ -42,7 +41,27 @@ function getParentNodePosition(nodeInternals: NodeInternals, nodeId?: string): X
   };
 }
 
-function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragClassName, nodeId }: UseDragParams) {
+export function selectorExistsTargetToNode(target: Element, selector: string, nodeRef: RefObject<Element>): boolean {
+  let current = target;
+  do {
+    if (current?.matches(selector)) return true;
+    if (current === nodeRef.current) return false;
+    current = current.parentElement as Element;
+  } while (current);
+
+  return false;
+}
+
+function useDrag({
+  onStart,
+  onDrag,
+  onStop,
+  nodeRef,
+  disabled = false,
+  noDragClassName,
+  handleSelector,
+  nodeId,
+}: UseDragParams) {
   const store = useStoreApi();
   const startPos = useRef<XYPosition>({ x: 0, y: 0 });
   const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
@@ -52,11 +71,16 @@ function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragCla
     if (nodeRef?.current) {
       const selection = select(nodeRef.current);
 
+      let isDragAllowedBySelector = true;
       if (disabled) {
         selection.on('.drag', null);
       } else {
         const dragHandler = drag()
           .on('start', (event: UseDragEvent) => {
+            if (handleSelector) {
+              isDragAllowedBySelector = selectorExistsTargetToNode(event.sourceEvent.target, handleSelector, nodeRef);
+            }
+            if (isDragAllowedBySelector) {
               const { transform, nodeInternals } = store.getState();
               const offset = getOffset(event, nodeRef);
               parentPos.current = getParentNodePosition(nodeInternals, nodeId);
@@ -67,8 +91,10 @@ function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragCla
               };
 
               onStart(event);
+            }
           })
           .on('drag', (event: UseDragEvent) => {
+            if (isDragAllowedBySelector) {
               const { transform, snapGrid, snapToGrid } = store.getState();
               const pos = pointToRendererPoint(
                 {
@@ -92,8 +118,13 @@ function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragCla
                   dy: pos.y,
                 });
               }
+            }
+          })
+          .on('end', (event) => {
+            if (isDragAllowedBySelector) {
+              onStop(event);
+            }
           })
-          .on('end', onStop)
           .filter((event: any) => !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName));
 
         selection.call(dragHandler);