feat(options): add minZoom, maxZoom, defaultZoom closes #273

src/container/GraphView/index.tsx

@@ -43,6 +43,9 @@ export interface GraphViewProps {
   onlyRenderVisibleNodes: boolean;
   isInteractive: boolean;
   selectNodesOnDrag: boolean;
+  minZoom: number;
+  maxZoom: number;
+  defaultZoom: number;
 }
 
 const GraphView = memo(
@@ -66,6 +69,9 @@ const GraphView = memo(
     onlyRenderVisibleNodes,
     isInteractive,
     selectNodesOnDrag,
+    minZoom,
+    maxZoom,
+    defaultZoom,
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -79,6 +85,9 @@ const GraphView = memo(
     const setOnConnect = useStoreActions((a) => a.setOnConnect);
     const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
     const setInteractive = useStoreActions((actions) => actions.setInteractive);
+    const updateTransform = useStoreActions((actions) => actions.updateTransform);
+    const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
+
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
 
@@ -106,6 +115,10 @@ const GraphView = memo(
         setOnConnect(onConnect);
       }
 
+      if (defaultZoom !== 1) {
+        updateTransform({ x: 0, y: 0, k: defaultZoom });
+      }
+
       return () => {
         window.onresize = null;
       };
@@ -132,6 +145,10 @@ const GraphView = memo(
       setInteractive(isInteractive);
     }, [isInteractive]);
 
+    useEffect(() => {
+      setMinMaxZoom({ minZoom, maxZoom });
+    }, [minZoom, maxZoom]);
+
     useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
     useElementUpdater(elements);
 

src/container/ReactFlow/index.tsx

@@ -54,6 +54,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onlyRenderVisibleNodes: boolean;
   isInteractive: boolean;
   selectNodesOnDrag: boolean;
+  minZoom: number;
+  maxZoom: number;
+  defaultZoom: number;
 }
 
 const ReactFlow = ({
@@ -80,6 +83,9 @@ const ReactFlow = ({
   onlyRenderVisibleNodes,
   isInteractive,
   selectNodesOnDrag,
+  minZoom,
+  maxZoom,
+  defaultZoom,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -107,6 +113,9 @@ const ReactFlow = ({
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
           isInteractive={isInteractive}
           selectNodesOnDrag={selectNodesOnDrag}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          defaultZoom={defaultZoom}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
@@ -136,6 +145,9 @@ ReactFlow.defaultProps = {
   onlyRenderVisibleNodes: true,
   isInteractive: true,
   selectNodesOnDrag: true,
+  minZoom: 0.5,
+  maxZoom: 2,
+  defaultZoom: 1,
 };
 
 export default ReactFlow;