feat(general): add defaultNodes, defaultEdges and defaultEdgeOptions

src/components/Handle/index.tsx

@@ -7,6 +7,7 @@ import NodeIdContext from '../../contexts/NodeIdContext';
 import { HandleProps, Connection, ReactFlowState, Position } from '../../types';
 import { checkElementBelowIsValid, onMouseDown } from './handler';
 import { getHostForElement } from '../../utils';
+import { addEdge } from '../../utils/graph';
 
 const alwaysValid = () => true;
 
@@ -20,6 +21,7 @@ const selector = (s: ReactFlowState) => ({
   connectionMode: s.connectionMode,
   connectionStartHandle: s.connectionStartHandle,
   connectOnClick: s.connectOnClick,
+  isControlled: s.isControlled,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -47,6 +49,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       connectionMode,
       connectionStartHandle,
       connectOnClick,
+      isControlled,
     } = useStore(selector, shallow);
 
     const handleId = id || null;
@@ -54,10 +57,21 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
 
     const onConnectExtended = useCallback(
       (params: Connection) => {
-        onConnectAction?.(params);
-        onConnect?.(params);
+        const { defaultEdgeOptions } = store.getState();
+
+        const edgeParams = {
+          ...defaultEdgeOptions,
+          ...params,
+        };
+        if (isControlled) {
+          const { edges } = store.getState();
+          store.setState({ edges: addEdge(edgeParams, edges) });
+        } else {
+          onConnectAction?.(edgeParams);
+        }
+        onConnect?.(edgeParams);
       },
-      [onConnectAction, onConnect]
+      [isControlled, onConnectAction, onConnect]
     );
 
     const onMouseDownHandler = useCallback(

src/components/StoreUpdater/index.tsx

@@ -16,11 +16,14 @@ import {
   OnEdgesChange,
   ConnectionMode,
   SnapGrid,
+  DefaultEdgeOptions,
 } from '../../types';
 
 interface StoreUpdaterProps {
-  nodes: Node[];
-  edges: Edge[];
+  nodes?: Node[];
+  edges?: Edge[];
+  defaultNodes?: Node[];
+  defaultEdges?: Edge[];
   onConnect?: OnConnect;
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;
@@ -39,11 +42,13 @@ interface StoreUpdaterProps {
   translateExtent?: CoordinateExtent;
   fitViewOnInit: boolean;
   connectOnClick: boolean;
+  defaultEdgeOptions?: DefaultEdgeOptions;
 }
 
 const selector = (s: ReactFlowState) => ({
   setNodes: s.setNodes,
   setEdges: s.setEdges,
+  setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
   setMinZoom: s.setMinZoom,
   setMaxZoom: s.setMaxZoom,
   setTranslateExtent: s.setTranslateExtent,
@@ -71,6 +76,8 @@ function useDirectStoreUpdater(key: keyof ReactFlowState, value: any, setState:
 const StoreUpdater = ({
   nodes,
   edges,
+  defaultNodes,
+  defaultEdges,
   onConnect,
   onConnectStart,
   onConnectStop,
@@ -89,26 +96,31 @@ const StoreUpdater = ({
   translateExtent,
   fitViewOnInit,
   connectOnClick,
+  defaultEdgeOptions,
 }: StoreUpdaterProps) => {
-  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset } = useStore(
-    selector,
-    shallow
-  );
+  const {
+    setNodes,
+    setEdges,
+    setDefaultNodesAndEdges,
+    setMinZoom,
+    setMaxZoom,
+    setTranslateExtent,
+    setNodeExtent,
+    reset,
+  } = useStore(selector, shallow);
   const store = useStoreApi();
 
   useEffect(() => {
+    if (defaultNodes) {
+      setDefaultNodesAndEdges(defaultNodes, defaultEdges);
+    }
+
     return () => {
       reset();
     };
   }, []);
 
-  useStoreUpdater<Node[]>(nodes, setNodes);
-  useStoreUpdater<Edge[]>(edges, setEdges);
-  useStoreUpdater<number>(minZoom, setMinZoom);
-  useStoreUpdater<number>(maxZoom, setMaxZoom);
-  useStoreUpdater<CoordinateExtent>(translateExtent, setTranslateExtent);
-  useStoreUpdater<CoordinateExtent>(nodeExtent, setNodeExtent);
-
+  useDirectStoreUpdater('defaultEdgeOptions', defaultEdgeOptions, store.setState);
   useDirectStoreUpdater('connectionMode', connectionMode, store.setState);
   useDirectStoreUpdater('onConnect', onConnect, store.setState);
   useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
@@ -124,6 +136,15 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
   useDirectStoreUpdater('connectOnClick', connectOnClick, store.setState);
 
+  useStoreUpdater<Node[]>(nodes, setNodes);
+  useStoreUpdater<Edge[]>(edges, setEdges);
+  useStoreUpdater<Node[]>(defaultNodes, setNodes);
+  useStoreUpdater<Edge[]>(defaultEdges, setEdges);
+  useStoreUpdater<number>(minZoom, setMinZoom);
+  useStoreUpdater<number>(maxZoom, setMaxZoom);
+  useStoreUpdater<CoordinateExtent>(translateExtent, setTranslateExtent);
+  useStoreUpdater<CoordinateExtent>(nodeExtent, setNodeExtent);
+
   return null;
 };