Zoom outwards if detail expanded

The whole graph can be shown, when the detail is expanded. This is done
by managing the minimum zoom level in the map zoom handler.

It sets when the detail is expanded. The user is then able to zoom out.

When the detail is collapsed, the minimum zoom level is reset to the
default value 1, while shifting the graph along to be centered.

Contributes: #71

frontend/src/lib/main/ViaspDash.react.js

@@ -156,6 +156,10 @@ function MainWindow(props) {
     const {setAnimationState} = useAnimationUpdater();
     const setAnimationStateRef = React.useRef(setAnimationState);
     const [ctrlPressed, setCtrlPressed] = React.useState(false);
+    const [translationBounds, setTranslationBounds] = React.useState({
+        scale: 1,
+        translation: {xMin: 0, xMax: 0}
+    });
     const [mapShiftValue, setMapShiftValue] = React.useState({
         translation: {x: 0, y: 0},
         scale: 1,
@@ -210,48 +214,67 @@ function MainWindow(props) {
             window.removeEventListener('keyup', handleKeyUp);
         };
     }, []);
-
+    
     // Manage Graph Zoom
     const {shownDetail} = useShownDetail();
     const prevShownDetail = React.useRef(null);
-    const [translationBounds, setTranslationBounds] = React.useState({xMin: 0, xMax: 0});
     const detailOpenWidthRatio = parseFloat(
             getComputedStyle(document.documentElement).getPropertyValue(
                 '--detail-open-width'
                 )
                 ) / 100;
     const detailClosedShiftThreshold = 0.2;
     const detailOpenShiftThreshold = 0.05;
+
+
+    // React.useEffect(() => {
+    //     if (shownDetail !== null) {
+    //         setMapMinScale(1 - detailOpenWidthRatio);
+    //     } else {
+    //         setMapMinScale(1);
+    //     }
+    // }, [shownDetail, detailOpenWidthRatio]);
 
     const handleMapChange = ({translation, scale}) => {
         if (ctrlPressed) {
+            const newTranslation = {...translation};
+            let newScale = scale;
+            let translationBounds = {};
+
             const contentWidth = contentDivRef.current.clientWidth;
-            setTranslationBounds(() => {
-                if (shownDetail !== null) {
-                    const detailOpenElement = document.querySelector('.detail-open');
-                    const detailOpenWidth = detailOpenElement
-                        ? parseFloat(window.getComputedStyle(detailOpenElement).width)
-                        : 0;
-                    return {
+            if (shownDetail !== null) {
+                const detailOpenWidth = detailOpenWidthRatio * contentWidth;
+                translationBounds = {
+                    scale: 1 - detailOpenWidthRatio,
+                    translation: {
                         xMax: 0,
                         xMin: (1 - scale) * contentWidth - detailOpenWidth,
-                    };
-                }
-                return {
-                xMax: 0,
-                xMin: (1 - scale) * contentWidth,
-                }
-            });
+                    },
+                };
+            } else {
+                translationBounds = {
+                    scale: 1,
+                    translation: {
+                        xMax: 0,
+                        xMin: (1 - scale) * contentWidth,
+                    },
+                };
+            };
+            setTranslationBounds(translationBounds);
+
             setMapShiftValue(() => {
-                if (translation.x > translationBounds.xMax) {
-                    translation.x = translationBounds.xMax;
+                if (newTranslation.x < translationBounds.translation.xMin) {
+                    newTranslation.x = translationBounds.translation.xMin;
+                }
+                if (newTranslation.x > translationBounds.translation.xMax) {
+                    newTranslation.x = translationBounds.translation.xMax;
                 }
-                if (translation.x < translationBounds.xMin) {
-                    translation.x = translationBounds.xMin;
+                if (newScale < translationBounds.scale) {
+                    newScale = translationBounds.scale;
                 }
                 return {
-                    translation,
-                    scale,
+                    translation: newTranslation,
+                    scale: newScale,
                 };
             });
         }
@@ -274,6 +297,15 @@ function MainWindow(props) {
                 ) {
                     return {...oldShiftValue};
                 }
+                if (oldShiftValue.scale < 1) {
+                    return {
+                        scale: 1,
+                        translation: {
+                            ...oldShiftValue,
+                            x: 0,
+                        },
+                    };
+                }
                 return {
                     ...oldShiftValue,
                     translation: {
@@ -356,16 +388,6 @@ function MainWindow(props) {
     }, [shownDetail, detailOpenWidthRatio]);
     useResizeObserver(contentDivRef, animateResize);
 
-
-
-    // React.useEffect(() => {
-    //     console.log("Transform:", {
-    //         'x': mapShiftValue.translation.x,
-    //         'scale': mapShiftValue.scale, 
-    //         'xMin': translationBounds.xMin, 
-    //         'xMax': translationBounds.xMax});
-    // }, [mapShiftValue])
-
     React.useEffect(() => {
         setAnimationState((oldValue) => ({
             ...oldValue,
@@ -394,7 +416,7 @@ function MainWindow(props) {
                     }}
                 >
                     <MapInteraction
-                        minScale={1}
+                        minScale={translationBounds.scale}
                         value={mapShiftValue}
                         onChange={({translation, scale}) =>
                             handleMapChange({translation, scale})