Merge pull request #1843 from wbkd/v10-default-nodes-edges

feat(general): add defaultNodes, defaultEdges and defaultEdgeOptions

example/src/DefaultNodes/index.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import ReactFlow, {
+  Background,
+  BackgroundVariant,
+  Node,
+  Edge,
+  ReactFlowInstance,
+  ReactFlowProvider,
+  useUpdateNodes,
+  useUpdateEdges,
+} from 'react-flow-renderer';
+
+const defaultNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const defaultEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const defaultEdgeOptions = {
+  animated: true,
+};
+
+const DefaultNodes = () => {
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+  const updateNodes = useUpdateNodes();
+  const updateEdges = useUpdateEdges();
+
+  const logToObject = () => console.log(rfInstance?.toObject());
+  const resetTransform = () => rfInstance?.setTransform({ x: 0, y: 0, zoom: 1 });
+
+  const updateNodePositions = () => {
+    updateNodes((nodes, setNodes) => {
+      setNodes(
+        nodes.map((node) => {
+          node.position = {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          };
+
+          return node;
+        })
+      );
+    });
+  };
+
+  const updateEdgeColors = () => {
+    updateEdges((edges, setEdges) => {
+      setEdges(
+        edges.map((edge) => {
+          edge.style = {
+            stroke: '#ff5050',
+          };
+
+          return edge;
+        })
+      );
+    });
+  };
+
+  return (
+    <ReactFlow
+      defaultNodes={defaultNodes}
+      defaultEdges={defaultEdges}
+      defaultEdgeOptions={defaultEdgeOptions}
+      onPaneReady={setRfInstance}
+      fitViewOnInit
+    >
+      <Background variant={BackgroundVariant.Lines} />
+
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+          reset transform
+        </button>
+        <button onClick={updateNodePositions} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={updateEdgeColors} style={{ marginRight: 5 }}>
+          red edges
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <DefaultNodes />
+    </ReactFlowProvider>
+  );
+}

example/src/index.tsx

@@ -31,6 +31,7 @@ import NodeTypesObjectChange from './NodeTypesObjectChange';
 import SaveRestore from './SaveRestore';
 import SwitchFlow from './Switch';
 import Validation from './Validation';
+import DefaultNodes from './DefaultNodes';
 
 import './index.css';
 
@@ -43,6 +44,10 @@ const routes = [
     path: '/basic',
     component: Basic,
   },
+  {
+    path: '/default-nodes',
+    component: DefaultNodes,
+  },
   {
     path: '/custom-connectionline',
     component: CustomConnectionLine,

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

src/container/ReactFlow/index.tsx

@@ -43,6 +43,7 @@ import {
   OnPaneReady,
   ProOptions,
   AttributionPosition,
+  DefaultEdgeOptions,
 } from '../../types';
 
 import '../../style.css';
@@ -62,8 +63,11 @@ const defaultEdgeTypes = {
 };
 
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onPaneReady'> {
-  nodes: Node[];
-  edges: Edge[];
+  nodes?: Node[];
+  edges?: Edge[];
+  defaultNodes?: Node[];
+  defaultEdges?: Edge[];
+  defaultEdgeOptions?: DefaultEdgeOptions;
   onNodesChange?: (nodeChanges: NodeChange[]) => void;
   onEdgesChange?: (edgeChanges: EdgeChange[]) => void;
   onNodeClick?: (event: React.MouseEvent, node: Node) => void;
@@ -150,8 +154,10 @@ const initDefaultPosition: [number, number] = [0, 0];
 const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType, ReactFlowProps>(
   (
     {
-      nodes = [],
-      edges = [],
+      nodes,
+      edges,
+      defaultNodes,
+      defaultEdges,
       className,
       nodeTypes = defaultNodeTypes,
       edgeTypes = defaultEdgeTypes,
@@ -230,6 +236,7 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
       connectOnClick = true,
       attributionPosition,
       pro,
+      defaultEdgeOptions,
       ...rest
     },
     ref
@@ -301,6 +308,8 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
           <StoreUpdater
             nodes={nodes}
             edges={edges}
+            defaultNodes={defaultNodes}
+            defaultEdges={defaultEdges}
             onConnect={onConnect}
             onConnectStart={onConnectStart}
             onConnectStop={onConnectStop}
@@ -319,6 +328,7 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
             translateExtent={translateExtent}
             fitViewOnInit={fitViewOnInit}
             connectOnClick={connectOnClick}
+            defaultEdgeOptions={defaultEdgeOptions}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}

src/hooks/useGlobalKeyHandler.ts

@@ -25,7 +25,7 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
 
   useEffect(() => {
-    const { nodeInternals, edges } = store.getState();
+    const { nodeInternals, edges, isControlled } = store.getState();
     // @TODO: work with nodeInternals instead of converting it to an array
     const nodes = Array.from(nodeInternals).map(([_, node]) => node);
     const selectedNodes = nodes.filter((n) => n.selected);
@@ -33,15 +33,27 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
 
     if (deleteKeyPressed && (selectedNodes || selectedEdges)) {
       const connectedEdges = getConnectedEdges(selectedNodes, edges);
+      const edgeIdsToRemove = [...selectedEdges, ...connectedEdges].map((e) => e.id);
 
-      const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }));
-      const edgeChanges: EdgeChange[] = [...selectedEdges, ...connectedEdges].map((e) => ({
-        id: e.id,
-        type: 'remove',
-      }));
+      if (isControlled) {
+        selectedNodes.forEach((node) => {
+          nodeInternals.delete(node.id);
+        });
 
-      onNodesChange?.(nodeChanges);
-      onEdgesChange?.(edgeChanges);
+        store.setState({
+          nodeInternals: new Map(nodeInternals),
+          edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
+        });
+      } else {
+        const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }));
+        const edgeChanges: EdgeChange[] = edgeIdsToRemove.map((id) => ({
+          id,
+          type: 'remove',
+        }));
+
+        onNodesChange?.(nodeChanges);
+        onEdgesChange?.(edgeChanges);
+      }
 
       store.setState({ nodesSelectionActive: false });
 

src/hooks/useUpdateEdges.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useStoreApi } from '../store';
+import { Edge } from '../types';
+
+type FunctionParams<T> = (nodes: Edge<T>[], setEdges: (nodes: Edge<T>[]) => void) => void;
+
+function useUpdateEdges<T>() {
+  const store = useStoreApi();
+
+  const update = useMemo(() => {
+    return (action: FunctionParams<T>): void => {
+      const { edges, setEdges } = store.getState();
+
+      if (typeof action === 'function') {
+        action(edges, setEdges);
+      }
+    };
+  }, []);
+
+  return update;
+}
+
+export default useUpdateEdges;

src/hooks/useUpdateNodes.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { useStoreApi } from '../store';
+import { Node } from '../types';
+
+type FunctionParams<T> = (nodes: Node<T>[], setNodes: (nodes: Node<T>[]) => void) => void;
+
+function useUpdateNodes<T>() {
+  const store = useStoreApi();
+
+  const update = useMemo(() => {
+    return (action: FunctionParams<T>): void => {
+      const { nodeInternals, setNodes } = store.getState();
+      const nodes = Array.from(nodeInternals.values()) as Node<T>[];
+
+      if (typeof action === 'function') {
+        action(nodes, setNodes);
+      }
+    };
+  }, []);
+
+  return update;
+}
+
+export default useUpdateNodes;

src/index.ts

@@ -26,6 +26,8 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { default as useZoomPanHelper } from './hooks/useZoomPanHelper';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
 export { default as useNodeBounds } from './hooks/useNodeBounds';
+export { default as useUpdateNodes } from './hooks/useUpdateNodes';
+export { default as useUpdateEdges } from './hooks/useUpdateEdges';
 export * from './hooks/useNodesEdgesState';
 
 export * from './additional-components';

src/store/index.ts

@@ -2,6 +2,7 @@ import create from 'zustand';
 import createContext from 'zustand/context';
 
 import { clampPosition, getDimensions } from '../utils';
+import { applyNodeChanges } from '../utils/changes';
 import {
   ReactFlowState,
   Node,
@@ -9,13 +10,20 @@ import {
   NodeDimensionUpdate,
   NodeDiffUpdate,
   CoordinateExtent,
-  NodeChange,
-  EdgeChange,
   NodeDimensionChange,
+  EdgeSelectionChange,
+  NodeSelectionChange,
 } from '../types';
 import { getHandleBounds } from '../components/Nodes/utils';
 import { createSelectionChange, getSelectionChanges } from '../utils/changes';
-import { createNodeInternals, createPositionChange, fitView, isParentSelected } from './utils';
+import {
+  createNodeInternals,
+  createPositionChange,
+  fitView,
+  handleControlledEdgeSelectionChange,
+  handleControlledNodeSelectionChange,
+  isParentSelected,
+} from './utils';
 import initialState from './initialState';
 
 const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
@@ -24,17 +32,25 @@ const createStore = () =>
   create<ReactFlowState>((set, get) => ({
     ...initialState,
     setNodes: (nodes: Node[]) => {
-      const nodeInternals = createNodeInternals(nodes, get().nodeInternals);
-
-      set({ nodeInternals });
+      set({ nodeInternals: createNodeInternals(nodes, get().nodeInternals) });
     },
     setEdges: (edges: Edge[]) => {
-      set({ edges });
+      const { defaultEdgeOptions } = get();
+
+      if (defaultEdgeOptions) {
+        set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
+      } else {
+        set({ edges });
+      }
+    },
+    setDefaultNodesAndEdges: (nodes: Node[], edges: Edge[] = []) => {
+      const nodeInternals = createNodeInternals(nodes, get().nodeInternals);
+      set({ nodeInternals, edges, isControlled: true });
     },
     updateNodeDimensions: (updates: NodeDimensionUpdate[]) => {
       const { onNodesChange, transform, nodeInternals, fitViewOnInit } = get();
 
-      const changes: NodeChange[] = updates.reduce<NodeChange[]>((res, update) => {
+      const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
         const node = nodeInternals.get(update.id);
 
         if (node) {
@@ -57,7 +73,7 @@ const createStore = () =>
               id: node.id,
               type: 'dimensions',
               dimensions,
-            } as NodeChange);
+            });
           }
         }
 
@@ -65,7 +81,6 @@ const createStore = () =>
       }, []);
 
       const fitViewOnInitDone = fitViewOnInit && fitView(get);
-
       set({ nodeInternals: new Map(nodeInternals), fitViewOnInitDone });
 
       if (changes?.length > 0) {
@@ -73,9 +88,9 @@ const createStore = () =>
       }
     },
     updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => {
-      const { onNodesChange, nodeExtent, nodeInternals } = get();
+      const { onNodesChange, nodeExtent, nodeInternals, isControlled } = get();
 
-      if (onNodesChange) {
+      if (isControlled || onNodesChange) {
         const changes: NodeDimensionChange[] = [];
 
         nodeInternals.forEach((node) => {
@@ -89,57 +104,83 @@ const createStore = () =>
         });
 
         if (changes?.length) {
-          onNodesChange(changes);
+          if (isControlled) {
+            const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
+            const nextNodeInternals = createNodeInternals(nodes, nodeInternals);
+            set({ nodeInternals: nextNodeInternals });
+          } else {
+            onNodesChange?.(changes);
+          }
         }
       }
     },
     addSelectedNodes: (selectedNodeIds: string[]) => {
-      const { multiSelectionActive, onNodesChange, nodeInternals } = get();
+      const { multiSelectionActive, onNodesChange, nodeInternals, isControlled } = get();
       // @TODO: work with nodeInternals instead of converting it to an array
       const nodes = Array.from(nodeInternals).map(([_, node]) => node);
-      let changedNodes;
+      let changedNodes: NodeSelectionChange[];
 
       if (multiSelectionActive) {
-        changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+        changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[];
       } else {
         changedNodes = getSelectionChanges(nodes, selectedNodeIds);
       }
 
       if (changedNodes.length) {
-        onNodesChange?.(changedNodes as NodeChange[]);
+        if (isControlled) {
+          set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
+        } else if (onNodesChange) {
+          onNodesChange(changedNodes);
+        }
       }
     },
     addSelectedEdges: (selectedEdgeIds: string[]) => {
-      const { multiSelectionActive, onEdgesChange, edges } = get();
+      const { multiSelectionActive, onEdgesChange, edges, isControlled } = get();
 
-      let changedEdges;
+      let changedEdges: EdgeSelectionChange[];
 
       if (multiSelectionActive) {
-        changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+        changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[];
       } else {
         changedEdges = getSelectionChanges(edges, selectedEdgeIds);
       }
 
       if (changedEdges.length) {
-        onEdgesChange?.(changedEdges as EdgeChange[]);
+        if (isControlled) {
+          set({
+            edges: handleControlledEdgeSelectionChange(changedEdges, edges),
+          });
+        } else if (onEdgesChange) {
+          onEdgesChange(changedEdges);
+        }
       }
     },
     unselectNodesAndEdges: () => {
-      const { nodeInternals, edges, onNodesChange, onEdgesChange } = get();
+      const { nodeInternals, edges, onNodesChange, onEdgesChange, isControlled } = get();
       // @TODO: work with nodeInternals instead of converting it to an array
       const nodes = Array.from(nodeInternals).map(([_, node]) => node);
 
       const nodesToUnselect = nodes.map((n) => {
         n.selected = false;
         return createSelectionChange(n.id, false);
-      }) as NodeChange[];
-      const edgesToUnselect = edges.map((edge) => createSelectionChange(edge.id, false)) as EdgeChange[];
+      }) as NodeSelectionChange[];
+      const edgesToUnselect = edges.map((edge) => createSelectionChange(edge.id, false)) as EdgeSelectionChange[];
 
       if (nodesToUnselect.length) {
-        onNodesChange?.(nodesToUnselect);
+        if (isControlled) {
+          set({ nodeInternals: handleControlledNodeSelectionChange(nodesToUnselect, nodeInternals) });
+        } else if (onNodesChange) {
+          onNodesChange(nodesToUnselect);
+        }
       }
       if (edgesToUnselect.length) {
-        onEdgesChange?.(edgesToUnselect);
+        if (isControlled) {
+          set({
+            edges: handleControlledEdgeSelectionChange(edgesToUnselect, edges),
+          });
+        } else if (onEdgesChange) {
+          onEdgesChange(edgesToUnselect);
+        }
       }
     },
     setMinZoom: (minZoom: number) => {
@@ -161,17 +202,34 @@ const createStore = () =>
       set({ translateExtent });
     },
     resetSelectedElements: () => {
-      const { nodeInternals, edges, onNodesChange, onEdgesChange } = get();
+      const { nodeInternals, edges, onNodesChange, onEdgesChange, isControlled } = get();
       // @TODO: work with nodeInternals instead of converting it to an array
-      const nodes = Array.from(nodeInternals).map(([_, node]) => node);
-      const nodesToUnselect = nodes.filter((e) => e.selected).map((n) => createSelectionChange(n.id, false));
-      const edgesToUnselect = edges.filter((e) => e.selected).map((e) => createSelectionChange(e.id, false));
+      const nodes = Array.from(nodeInternals.values());
+
+      const nodesToUnselect = nodes
+        .filter((e) => e.selected)
+        .map((n) => createSelectionChange(n.id, false)) as NodeSelectionChange[];
+      const edgesToUnselect = edges
+        .filter((e) => e.selected)
+        .map((e) => createSelectionChange(e.id, false)) as EdgeSelectionChange[];
 
       if (nodesToUnselect.length) {
-        onNodesChange?.(nodesToUnselect as NodeChange[]);
+        if (isControlled) {
+          set({
+            nodeInternals: handleControlledNodeSelectionChange(nodesToUnselect, nodeInternals),
+          });
+        } else if (onNodesChange) {
+          onNodesChange(nodesToUnselect);
+        }
       }
       if (edgesToUnselect.length) {
-        onEdgesChange?.(edgesToUnselect as EdgeChange[]);
+        if (isControlled) {
+          set({
+            edges: handleControlledEdgeSelectionChange(edgesToUnselect, edges),
+          });
+        } else if (onEdgesChange) {
+          onEdgesChange(edgesToUnselect);
+        }
       }
     },
     setNodeExtent: (nodeExtent: CoordinateExtent) => {

src/store/initialState.ts

@@ -13,6 +13,7 @@ const initialState: ReactFlowStore = {
   edges: [],
   onNodesChange: null,
   onEdgesChange: null,
+  isControlled: false,
   selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
   d3Zoom: null,
   d3Selection: null,

src/store/utils.ts

@@ -2,10 +2,13 @@ import { zoomIdentity } from 'd3-zoom';
 import { GetState } from 'zustand';
 import {
   CoordinateExtent,
+  Edge,
+  EdgeSelectionChange,
   Node,
   NodeDimensionChange,
   NodeInternals,
   NodeInternalsItem,
+  NodeSelectionChange,
   ReactFlowState,
   XYPosition,
   XYZPosition,
@@ -163,3 +166,27 @@ export function fitView(get: GetState<ReactFlowState>) {
 
   return fitViewOnInitDone;
 }
+
+export function handleControlledNodeSelectionChange(nodeChanges: NodeSelectionChange[], nodeInternals: NodeInternals) {
+  nodeChanges.forEach((change) => {
+    const node = nodeInternals.get(change.id);
+    if (node) {
+      nodeInternals.set(node.id, {
+        ...node,
+        selected: change.selected,
+      });
+    }
+  });
+
+  return new Map(nodeInternals);
+}
+
+export function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionChange[], edges: Edge[]) {
+  return edges.map((e) => {
+    const change = edgeChanges.find((change) => change.id === e.id);
+    if (change) {
+      e.selected = change.selected;
+    }
+    return e;
+  });
+}

src/types/edges.ts

@@ -32,6 +32,11 @@ export interface Edge<T = any> {
   zIndex?: number;
 }
 
+export type DefaultEdgeOptions = Omit<
+  Edge,
+  'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
+>;
+
 // props that get passed to a custom edge
 export interface EdgeProps<T = any> {
   id: string;

src/types/general.ts

@@ -6,6 +6,7 @@ import { NodeChange, EdgeChange } from './changes';
 import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate } from './nodes';
 import { Edge } from './edges';
 import { HandleType, StartHandle } from './handles';
+import { DefaultEdgeOptions } from '.';
 
 export type NodeTypesType = { [key: string]: ReactNode };
 export type EdgeTypesType = NodeTypesType;
@@ -142,6 +143,7 @@ export type ReactFlowStore = {
   selectedNodesBbox: Rect;
   onNodesChange: OnNodesChange | null;
   onEdgesChange: OnEdgesChange | null;
+  isControlled: boolean;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;
@@ -182,11 +184,13 @@ export type ReactFlowStore = {
   onConnectEnd?: OnConnectEnd;
 
   connectOnClick: boolean;
+  defaultEdgeOptions?: DefaultEdgeOptions;
 };
 
 export type ReactFlowActions = {
   setNodes: (nodes: Node[]) => void;
   setEdges: (edges: Edge[]) => void;
+  setDefaultNodesAndEdges: (nodes: Node[], edges?: Edge[]) => void;
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
   updateNodePosition: (update: NodeDiffUpdate) => void;
   resetSelectedElements: () => void;