feat: limit zoom by translateCanvas

src/components/App.tsx

@@ -2249,7 +2249,8 @@ class App extends React.Component<AppProps, AppState> {
     /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */
     value: number,
   ) => {
-    this.setState({
+    this.setState(
+      this.constrainScroll({
         ...getStateForZoom(
           {
             viewportX: this.state.width / 2 + this.state.offsetLeft,
@@ -2258,7 +2259,8 @@ class App extends React.Component<AppProps, AppState> {
           },
           this.state,
         ),
-    });
+      }),
+    );
   };
 
   private cancelInProgresAnimation: (() => void) | null = null;
@@ -7663,9 +7665,13 @@ class App extends React.Component<AppProps, AppState> {
     const scaledWidth = width / zoom.value;
     const scaledHeight = height / zoom.value;
 
+    const maxZoomX = width / scrollConstraints.width;
+    const maxZoomY = height / scrollConstraints.height;
+
     // Set default constrainedScrollX and constrainedScrollY values
     let constrainedScrollX = scrollX;
     let constrainedScrollY = scrollY;
+    let constrainedZoom = zoom;
 
     // If scrollX is part of the nextState, constrain it within the scroll constraints
     if ("scrollX" in nextState) {
@@ -7689,10 +7695,19 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
+    // If zoom is part of the nextState, constrain it within the scroll constraints
+    if ("zoom" in nextState) {
+      const zoomLimit = Math.min(maxZoomX, maxZoomY);
+      constrainedZoom = {
+        value: getNormalizedZoom(Math.max(nextState.zoom.value, zoomLimit)),
+      };
+    }
+
     return {
       ...nextState,
       scrollX: constrainedScrollX,
       scrollY: constrainedScrollY,
+      zoom: constrainedZoom,
     };
   };
 }