feat(props): add nodeExtent prop closes #854

src/container/GraphView/index.tsx

@@ -70,6 +70,7 @@ const GraphView = ({
   defaultZoom,
   defaultPosition,
   translateExtent,
+  nodeExtent,
   arrowHeadColor,
   markerEndId,
   zoomOnScroll,
@@ -97,6 +98,7 @@ const GraphView = ({
   const setMinZoom = useStoreActions((actions) => actions.setMinZoom);
   const setMaxZoom = useStoreActions((actions) => actions.setMaxZoom);
   const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent);
+  const setNodeExtent = useStoreActions((actions) => actions.setNodeExtent);
   const setConnectionMode = useStoreActions((actions) => actions.setConnectionMode);
   const currentStore = useStore();
   const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
@@ -192,6 +194,12 @@ const GraphView = ({
     }
   }, [translateExtent]);
 
+  useEffect(() => {
+    if (typeof nodeExtent !== 'undefined') {
+      setNodeExtent(nodeExtent);
+    }
+  }, [nodeExtent]);
+
   useEffect(() => {
     if (typeof connectionMode !== 'undefined') {
       setConnectionMode(connectionMode);

src/container/ReactFlow/index.tsx

@@ -30,6 +30,7 @@ import {
   KeyCode,
   PanOnScrollMode,
   OnEdgeUpdateFunc,
+  NodeExtent,
 } from '../../types';
 
 import '../../style.css';
@@ -97,6 +98,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   defaultZoom?: number;
   defaultPosition?: [number, number];
   translateExtent?: TranslateExtent;
+  nodeExtent?: NodeExtent;
   arrowHeadColor?: string;
   markerEndId?: string;
   zoomOnScroll?: boolean;
@@ -154,6 +156,7 @@ const ReactFlow = ({
   defaultZoom = 1,
   defaultPosition = [0, 0],
   translateExtent,
+  nodeExtent,
   arrowHeadColor = '#b1b1b7',
   markerEndId,
   zoomOnScroll = true,
@@ -216,6 +219,7 @@ const ReactFlow = ({
           defaultZoom={defaultZoom}
           defaultPosition={defaultPosition}
           translateExtent={translateExtent}
+          nodeExtent={nodeExtent}
           arrowHeadColor={arrowHeadColor}
           markerEndId={markerEndId}
           zoomOnScroll={zoomOnScroll}