feat(connection): add start and stop props closes #380

src/container/GraphView/index.tsx

@@ -22,6 +22,7 @@ import {
   Connection,
   ConnectionLineType,
   FlowTransform,
+  OnConnectStartFunc,
 } from '../../types';
 
 export interface GraphViewProps {
@@ -35,6 +36,8 @@ export interface GraphViewProps {
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   onConnect?: (connection: Connection | Edge) => void;
+  onConnectStart?: OnConnectStartFunc;
+  onConnectStop?: () => void;
   onLoad?: OnLoadFunc;
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
@@ -85,6 +88,8 @@ const GraphView = ({
   deleteKeyCode,
   elements,
   onConnect,
+  onConnectStart,
+  onConnectStop,
   snapToGrid,
   snapGrid,
   onlyRenderVisibleNodes,
@@ -112,6 +117,8 @@ const GraphView = ({
   const updateSize = useStoreActions((actions) => actions.updateSize);
   const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
   const setOnConnect = useStoreActions((a) => a.setOnConnect);
+  const setOnConnectStart = useStoreActions((a) => a.setOnConnectStart);
+  const setOnConnectStop = useStoreActions((a) => a.setOnConnectStop);
   const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
   const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
   const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
@@ -210,6 +217,18 @@ const GraphView = ({
     }
   }, [onConnect]);
 
+  useEffect(() => {
+    if (onConnectStart) {
+      setOnConnectStart(onConnectStart);
+    }
+  }, [onConnectStart]);
+
+  useEffect(() => {
+    if (onConnectStop) {
+      setOnConnectStop(onConnectStop);
+    }
+  }, [onConnectStop]);
+
   useEffect(() => {
     setSnapGrid({ snapToGrid, snapGrid });
   }, [snapToGrid]);

src/container/ReactFlow/index.tsx

@@ -27,6 +27,7 @@ import {
   Connection,
   ConnectionLineType,
   FlowTransform,
+  OnConnectStartFunc,
 } from '../../types';
 
 import '../../style.css';
@@ -42,6 +43,8 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
+  onConnectStart?: OnConnectStartFunc;
+  onConnectStop?: () => void;
   onLoad?: OnLoadFunc;
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
@@ -86,6 +89,8 @@ const ReactFlow = ({
   onMoveEnd,
   onElementsRemove,
   onConnect,
+  onConnectStart,
+  onConnectStop,
   onNodeMouseEnter,
   onNodeMouseMove,
   onNodeMouseLeave,
@@ -143,6 +148,8 @@ const ReactFlow = ({
           deleteKeyCode={deleteKeyCode}
           elements={elements}
           onConnect={onConnect}
+          onConnectStart={onConnectStart}
+          onConnectStop={onConnectStop}
           snapToGrid={snapToGrid}
           snapGrid={snapGrid}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}