Merge pull request #2144 from hiyangguo/main

fix: fixed an issue where Handle component onMouseDown event could not be bind
xyflow · May 16, 2022 · aab0858 · aab0858
2 parents 415fc77 + a07f3dc
commit aab0858
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/example/src/CustomNode/ColorSelectorNode.tsx b/example/src/CustomNode/ColorSelectorNode.tsx
@@ -16,7 +16,16 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
       <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-      <Handle type="source" position={Position.Right} id="a" style={sourceHandleStyleA} isConnectable={isConnectable} />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="a"
+        style={sourceHandleStyleA}
+        isConnectable={isConnectable}
+        onMouseDown={(e) => {
+          console.log('You trigger mousedown event', e);
+        }}
+      />
       <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
     </>
   );

diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../store';
 import { Edge, EdgeProps, WrapEdgeProps, ReactFlowState, Connection } from '../../types';
-import { onMouseDown } from '../../components/Handle/handler';
+import { handleMouseDown } from '../../components/Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 
@@ -160,7 +160,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           }
         };
 
-        onMouseDown(
+        handleMouseDown(
           event,
           handleId,
           nodeId,

diff --git a/src/components/Handle/handler.ts b/src/components/Handle/handler.ts
@@ -82,7 +82,7 @@ function resetRecentHandle(hoveredHandle: Element): void {
   hoveredHandle?.classList.remove('react-flow__handle-connecting');
 }
 
-export function onMouseDown(
+export function handleMouseDown(
   event: ReactMouseEvent,
   handleId: string | null,
   nodeId: string,

diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
@@ -5,7 +5,7 @@ import shallow from 'zustand/shallow';
 import { useStore, useStoreApi } from '../../store';
 import NodeIdContext from '../../contexts/NodeIdContext';
 import { HandleProps, Connection, ReactFlowState, Position } from '../../types';
-import { checkElementBelowIsValid, onMouseDown } from './handler';
+import { checkElementBelowIsValid, handleMouseDown } from './handler';
 import { getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
 
@@ -35,6 +35,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       onConnect,
       children,
       className,
+      onMouseDown,
       ...rest
     },
     ref
@@ -75,9 +76,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     );
 
     const onMouseDownHandler = useCallback(
-      (event: React.MouseEvent) => {
+      (event: React.MouseEvent<HTMLDivElement>) => {
         if (event.button === 0) {
-          onMouseDown(
+          handleMouseDown(
             event,
             handleId,
             nodeId,
@@ -93,6 +94,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
             onConnectEnd
           );
         }
+        onMouseDown?.(event);
       },
       [
         handleId,