fix(defaultViewport): clamp invalid zoom values

examples/vite-app/cypress/e2e/figma.cy.ts

@@ -5,7 +5,6 @@ describe('Figma Flow UI', () => {
 
   it('renders a flow with three nodes', () => {
     cy.get('.react-flow__renderer');
-    cy.get('.react-flow-basic-example'); // check if className prop works
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
     cy.get('.react-flow__node').children('.react-flow__handle');

examples/vite-app/src/examples/Figma/index.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow';
+import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode, Viewport } from 'reactflow';
 
 const MULTI_SELECT_KEY = ['Meta', 'Shift'];
 

packages/core/src/container/ZoomPane/index.tsx

@@ -9,8 +9,9 @@ import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { containerStyle } from '../../styles';
-import type { FlowRendererProps } from '../FlowRenderer';
+import { clamp } from '../../utils';
 import { CoordinateExtent, PanOnScrollMode } from '../../types';
+import type { FlowRendererProps } from '../FlowRenderer';
 import type { Viewport, ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
@@ -80,7 +81,9 @@ const ZoomPane = ({
       const bbox = zoomPane.current.getBoundingClientRect();
       const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
       const selection = select(zoomPane.current as Element).call(d3ZoomInstance);
-      const updatedTransform = zoomIdentity.translate(defaultViewport.x, defaultViewport.y).scale(defaultViewport.zoom);
+      const updatedTransform = zoomIdentity
+        .translate(defaultViewport.x, defaultViewport.y)
+        .scale(clamp(defaultViewport.zoom, minZoom, maxZoom));
       const extent: CoordinateExtent = [
         [0, 0],
         [bbox.width, bbox.height],

packages/core/src/styles/init.css

@@ -30,10 +30,6 @@
   z-index: 4;
 }
 
-.react-flow__pane {
-  z-index: 5;
-}
-
 .react-flow__selection {
   z-index: 6;
 }