From 9ba39ae49f856a93366eb9b34d0fc6b6d0139cd7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 12 Dec 2022 17:43:33 +0100
Subject: [PATCH] fix(defaultViewport): clamp invalid zoom values

---
 examples/vite-app/cypress/e2e/figma.cy.ts      | 1 -
 examples/vite-app/src/examples/Figma/index.tsx | 2 +-
 packages/core/src/container/ZoomPane/index.tsx | 7 +++++--
 packages/core/src/styles/init.css              | 4 ----
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/examples/vite-app/cypress/e2e/figma.cy.ts b/examples/vite-app/cypress/e2e/figma.cy.ts
index 6d3ddfea..e3c8563f 100644
--- a/examples/vite-app/cypress/e2e/figma.cy.ts
+++ b/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');
diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx
index c92a45a8..0ac44198 100644
--- a/examples/vite-app/src/examples/Figma/index.tsx
+++ b/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'];
 
diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index 50d36458..9dcd946f 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/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],
diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css
index 2a6caed2..a621794f 100644
--- a/packages/core/src/styles/init.css
+++ b/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;
 }