Merge branch 'drag-edge' of https://github.com/zcmgyu/react-flow into zcmgyu-drag-edge

src/components/Edges/wrapEdge.tsx

@@ -32,6 +32,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     elementsSelectable,
     markerEndId,
     isHidden,
+    onEitherEndOfEdgePress,
   }: WrapEdgeProps) => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
 
@@ -62,12 +63,53 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       [elementsSelectable, id, source, target, type, data, onClick]
     );
 
+    const handleEitherEndOfEdgePress = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>, isEdgeHeader?: boolean): void => {
+        if (elementsSelectable) {
+          setSelectedElements({ id, source, target });
+        }
+
+        const edgeElement: Edge = { id, source, target, type };
+
+        if (typeof data !== 'undefined') {
+          edgeElement.data = data;
+        }
+
+        onEitherEndOfEdgePress(event, edgeElement, isEdgeHeader);
+      },
+      [elementsSelectable, id, source, target, type, data, onEitherEndOfEdgePress]
+    );
+
+    const handleEdgeHeaderPress = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        handleEitherEndOfEdgePress(event, true);
+      },
+      [handleEitherEndOfEdgePress],
+    );
+
+    const handleEdgeFooterPress = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        handleEitherEndOfEdgePress(event);
+      },
+      [handleEitherEndOfEdgePress],
+    );
+
     if (isHidden) {
       return null;
     }
 
     return (
       <g className={edgeClasses} onClick={onEdgeClick}>
+        <g onMouseDown={handleEdgeFooterPress}>
+          <circle
+            className="move-handler"
+            cx={sourceX}
+            cy={sourceY}
+            r="12"
+            stroke="transparent"
+            fill="transparent"
+          />
+        </g>
         <EdgeComponent
           id={id}
           source={source}
@@ -91,6 +133,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           targetPosition={targetPosition}
           markerEndId={markerEndId}
         />
+        <g onMouseDown={handleEdgeHeaderPress}>
+          <circle
+            className="move-handler"
+            cx={targetX}
+            cy={targetY}
+            r="12"
+            stroke="transparent"
+            fill="transparent"
+          />
+        </g>
       </g>
     );
   };

src/components/Handle/BaseHandle.tsx

@@ -15,7 +15,7 @@ import {
 } from '../../types';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
-type SetSourceIdFunc = (params: SetConnectionId) => void;
+export type SetSourceIdFunc = (params: SetConnectionId) => void;
 
 interface BaseHandleProps {
   type: HandleType;
@@ -40,7 +40,7 @@ type Result = {
   isHoveringHandle: boolean;
 };
 
-function onMouseDown(
+export function onMouseDown(
   event: ReactMouseEvent,
   handleId: ElementId | null,
   nodeId: ElementId,
@@ -67,6 +67,7 @@ function onMouseDown(
     x: event.clientX - containerBounds.left,
     y: event.clientY - containerBounds.top,
   });
+
   setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
 
   if (onConnectStart) {
@@ -144,7 +145,7 @@ function onMouseDown(
 
   function onMouseUp(event: MouseEvent) {
     const { connection, isValid } = checkElementBelowIsValid(event);
-
+    
     if (onConnectStop) {
       onConnectStop(event);
     }