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

src/container/EdgeRenderer/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo, CSSProperties } from 'react';
 
-import { useStoreState } from '../../store/hooks';
+import { useStoreState, useStoreActions } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
 import MarkerDefinitions from './MarkerDefinitions';
@@ -14,7 +14,10 @@ import {
   Elements,
   ConnectionLineType,
   ConnectionLineComponent,
+  Connection,
+  OnEdgeUpdateFunc
 } from '../../types';
+import { onMouseDown, SetSourceIdFunc } from '../../components/Handle/BaseHandle';
 
 interface EdgeRendererProps {
   edgeTypes: any;
@@ -24,6 +27,7 @@ interface EdgeRendererProps {
   arrowHeadColor: string;
   markerEndId?: string;
   connectionLineComponent?: ConnectionLineComponent;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
 }
 
 interface EdgePositions {
@@ -134,7 +138,9 @@ function renderEdge(
   props: EdgeRendererProps,
   nodes: Node[],
   selectedElements: Elements | null,
-  elementsSelectable: boolean
+  elementsSelectable: boolean,
+  setConnectionNodeId: SetSourceIdFunc,
+  setPosition: (pos: XYPosition) => void,
 ) {
   const sourceId = edge.source;
   const sourceHandleId = edge.sourceHandle || null;
@@ -186,6 +192,30 @@ function renderEdge(
 
   const isSelected = selectedElements ? selectedElements.some((elm) => isEdge(elm) && elm.id === edge.id) : false;
 
+  const onConnect = (connection: Connection) => {
+    const { onEdgeUpdate } = props;
+    if (onEdgeUpdate) {
+      onEdgeUpdate(edge, connection);
+    }
+  }
+
+  const handleEitherEndOfEdgePress = (event: React.MouseEvent, edge: Edge, isEdgeHeader = false) => {
+    const { source, target } = edge;
+    const nodeId = isEdgeHeader ? source : target;
+    const isValidConnection = () => true;
+    const isTarget = !isEdgeHeader;
+
+    onMouseDown(
+      event,
+      nodeId,
+      setConnectionNodeId,
+      setPosition,
+      onConnect,
+      isTarget,
+      isValidConnection,
+    )
+  }
+
   return (
     <EdgeComponent
       key={edge.id}
@@ -217,6 +247,7 @@ function renderEdge(
       elementsSelectable={elementsSelectable}
       markerEndId={props.markerEndId}
       isHidden={edge.isHidden}
+      onEitherEndOfEdgePress={handleEitherEndOfEdgePress}
     />
   );
 }
@@ -234,6 +265,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const elementsSelectable = useStoreState((state) => state.elementsSelectable);
   const width = useStoreState((state) => state.width);
   const height = useStoreState((state) => state.height);
+  const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
+  const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
 
   const { connectionLineType, arrowHeadColor, connectionLineStyle, connectionLineComponent } = props;
 
@@ -248,7 +281,16 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     <svg width={width} height={height} className="react-flow__edges">
       <MarkerDefinitions color={arrowHeadColor} />
       <g transform={transformStyle}>
-        {edges.map((edge: Edge) => renderEdge(edge, props, nodes, selectedElements, elementsSelectable))}
+        {edges.map((edge: Edge) =>
+          renderEdge(
+            edge,
+            props,
+            nodes,
+            selectedElements,
+            elementsSelectable,
+            setConnectionNodeId,
+            setPosition,
+          ))}
         {renderConnectionLine && (
           <ConnectionLine
             nodes={nodes}

src/container/FlowRenderer/index.tsx

@@ -11,15 +11,15 @@ import NodesSelection from '../../components/NodesSelection';
 
 interface FlowRendererProps
   extends Omit<
-    GraphViewProps,
-    | 'elements'
-    | 'snapToGrid'
-    | 'nodeTypes'
-    | 'edgeTypes'
-    | 'snapGrid'
-    | 'connectionLineType'
-    | 'arrowHeadColor'
-    | 'onlyRenderVisibleNodes'
+  GraphViewProps,
+  | 'elements'
+  | 'snapToGrid'
+  | 'nodeTypes'
+  | 'edgeTypes'
+  | 'snapGrid'
+  | 'connectionLineType'
+  | 'arrowHeadColor'
+  | 'onlyRenderVisibleNodes'
   > {
   children: ReactNode;
 }

src/container/GraphView/index.tsx

@@ -20,7 +20,8 @@ import {
   OnConnectStartFunc,
   OnConnectStopFunc,
   OnConnectEndFunc,
-  TranslateExtent,
+  TranslateExtent, 
+  OnEdgeUpdateFunc,
 } from '../../types';
 
 export interface GraphViewProps {
@@ -75,6 +76,7 @@ export interface GraphViewProps {
   panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
+  onEdgeUpdate?: OnEdgeUpdateFunc; 
 }
 
 const GraphView = ({
@@ -129,6 +131,7 @@ const GraphView = ({
   onPaneClick,
   onPaneScroll,
   onPaneContextMenu,
+  onEdgeUpdate,
 }: GraphViewProps) => {
   const isInitialised = useRef<boolean>(false);
   const d3Initialised = useStoreState((state) => state.d3Initialised);
@@ -291,6 +294,7 @@ const GraphView = ({
         arrowHeadColor={arrowHeadColor}
         markerEndId={markerEndId}
         connectionLineComponent={connectionLineComponent}
+        onEdgeUpdate={onEdgeUpdate}
       />
     </FlowRenderer>
   );

src/container/ReactFlow/index.tsx

@@ -32,6 +32,7 @@ import {
   OnConnectStopFunc,
   OnConnectEndFunc,
   TranslateExtent,
+  OnEdgeUpdateFunc,
 } from '../../types';
 
 import '../../style.css';
@@ -102,6 +103,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   panOnScroll?: boolean;
   panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
 }
 
 const ReactFlow = ({
@@ -159,6 +161,7 @@ const ReactFlow = ({
   onPaneScroll,
   onPaneContextMenu,
   children,
+  onEdgeUpdate,
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
@@ -220,6 +223,7 @@ const ReactFlow = ({
           onSelectionDrag={onSelectionDrag}
           onSelectionDragStop={onSelectionDragStop}
           onSelectionContextMenu={onSelectionContextMenu}
+          onEdgeUpdate={onEdgeUpdate}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}