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>
     );
   };