diff --git a/src/hooks/useDrag/index.ts b/src/hooks/useDrag/index.ts index 1902b675..127f41d2 100644 --- a/src/hooks/useDrag/index.ts +++ b/src/hooks/useDrag/index.ts @@ -5,13 +5,7 @@ import { select } from 'd3-selection'; import { useStoreApi } from '../../store'; import { pointToRendererPoint } from '../../utils/graph'; import { NodeDragItem, NodeDragHandler, XYPosition } from '../../types'; -import { - getDragItems, - getEventHandlerParams, - getParentNodePosition, - selectorExistsTargetToNode, - updatePosition, -} from './utils'; +import { getDragItems, getEventHandlerParams, getParentNodePosition, hasSelector, updatePosition } from './utils'; import { handleNodeClick } from '../../components/Nodes/utils'; export type UseDragEvent = D3DragEvent; @@ -136,11 +130,13 @@ function useDrag({ }) .filter((event: MouseEvent) => { const target = event.target as HTMLDivElement; - const filter = - !event.ctrlKey && !event.button && (!noDragClassName || !target.classList?.contains?.(noDragClassName)); - return handleSelector - ? selectorExistsTargetToNode(target as HTMLDivElement, handleSelector, nodeRef) && filter - : filter; + const isDraggable = + !event.ctrlKey && + !event.button && + (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, nodeRef)) && + (!handleSelector || hasSelector(target, handleSelector, nodeRef)); + + return isDraggable; }); selection.call(dragHandler); diff --git a/src/hooks/useDrag/utils.ts b/src/hooks/useDrag/utils.ts index ec674581..8e5fb117 100644 --- a/src/hooks/useDrag/utils.ts +++ b/src/hooks/useDrag/utils.ts @@ -31,7 +31,7 @@ export function getParentNodePosition(nodeInternals: NodeInternals, nodeId?: str }; } -export function selectorExistsTargetToNode(target: Element, selector: string, nodeRef: RefObject): boolean { +export function hasSelector(target: Element, selector: string, nodeRef: RefObject): boolean { let current = target; do {