Refactor zoomControls

Author: tschumpr

src/client/src/components/buttons/mapControls.jsx

@@ -0,0 +1,43 @@
+import { Button, ButtonGroup, Stack } from "@mui/material";
+import { Minus, Plus, RotateCwSquare } from "lucide-react";
+import Circle from "../../assets/icons/circle.svg?react";
+import { theme } from "../../AppTheme";
+
+const MapControls = ({ onZoomIn, onZoomOut, onFitToExtent, onRotate }) => {
+  return (
+    <Stack
+      sx={{
+        position: "absolute",
+        top: theme.spacing(2),
+        right: theme.spacing(2),
+        zIndex: "500",
+        gap: 1,
+      }}>
+      <ButtonGroup variant="contained" orientation="vertical">
+        <Button data-cy="zoom-in-button" variant="text" color="secondary" onClick={onZoomIn}>
+          <Plus />
+        </Button>
+        <Button data-cy="fit-to-extent-button" variant="text" color="secondary" onClick={onFitToExtent}>
+          <Circle />
+        </Button>
+        <Button data-cy="zoom-out-button" variant="text" color="secondary" onClick={onZoomOut}>
+          <Minus />
+        </Button>
+      </ButtonGroup>
+      {!!onRotate && (
+        <Button
+          variant="text"
+          onClick={onRotate}
+          sx={{
+            height: "44px",
+            boxShadow:
+              "0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)",
+          }}>
+          <RotateCwSquare />
+        </Button>
+      )}
+    </Stack>
+  );
+};
+
+export default MapControls;

src/client/src/components/buttons/zoomControls.jsx

@@ -20,7 +20,7 @@ import { register } from "ol/proj/proj4";
 import proj4 from "proj4";
 import { getGeojson } from "../../api-lib";
 import { Box } from "@mui/material";
-import ZoomControls from "../buttons/zoomControls.jsx";
+import MapControls from "../buttons/mapControls.jsx";
 import NamePopup from "./namePopup.jsx";
 import { BasemapSelector } from "../basemapSelector/basemapSelector.tsx";
 import { swissExtent, updateBasemap } from "../basemapSelector/basemaps.ts";
@@ -653,7 +653,7 @@ class MapComponent extends React.Component {
         />
         <NamePopup state={this.state}></NamePopup>
         <BasemapSelector marginBottom={"30px"} />
-        <ZoomControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
+        <MapControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
       </Box>
     );
   }

src/client/src/components/map/mapComponent.jsx

@@ -16,7 +16,7 @@ import { Button, Icon, Label } from "semantic-ui-react";
 import { Box, Card } from "@mui/material";
 import { getHeight } from "../../api-lib";
 import { fetchApiV2 } from "../../api/fetchApiV2.js";
-import ZoomControls from "../buttons/zoomControls.jsx";
+import MapControls from "../buttons/mapControls.jsx";
 import { BasemapSelector } from "../basemapSelector/basemapSelector.tsx";
 import { attributions, crossOrigin, swissExtent, updateBasemap } from "../basemapSelector/basemaps.ts";
 import { BasemapContext } from "../basemapSelector/basemapContext.tsx";
@@ -312,7 +312,7 @@ class PointComponent extends React.Component {
             height: 670,
           }}
         />
-        <ZoomControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
+        <MapControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
         <Box sx={{ position: "absolute", right: 0, top: 645 }}>
           <BasemapSelector marginBottom="0px" />
         </Box>

src/client/src/components/map/pointComponent.jsx

@@ -1,6 +1,6 @@
 import { Box, Button, ButtonGroup, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
 import { labelingFileFormat, PanelPosition, useLabelingContext } from "./labelingInterfaces.tsx";
-import { ChevronLeft, ChevronRight, FileIcon, PanelBottom, PanelRight, Plus, RotateCwSquare } from "lucide-react";
+import { ChevronLeft, ChevronRight, FileIcon, PanelBottom, PanelRight, Plus } from "lucide-react";
 import { FC, MouseEvent, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { theme } from "../../../AppTheme.ts";
 import { File as FileInterface, FileResponse, maxFileSizeKB } from "../../../api/file/fileInterfaces.ts";
@@ -13,7 +13,7 @@ import Map from "ol/Map.js";
 import Projection from "ol/proj/Projection.js";
 import Static from "ol/source/ImageStatic.js";
 import { getCenter } from "ol/extent.js";
-import ZoomControls from "../../../components/buttons/zoomControls";
+import MapControls from "../../../components/buttons/mapControls";
 import { ButtonSelect } from "../../../components/buttons/buttonSelect.tsx";
 import { defaults as defaultControls } from "ol/control/defaults";
 import { View } from "ol";
@@ -260,26 +260,7 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
               }}
             />
           </Stack>
-          <Stack
-            sx={{
-              position: "absolute",
-              top: theme.spacing(2),
-              right: theme.spacing(2),
-              zIndex: "500",
-              gap: 1,
-            }}>
-            <ZoomControls onZoomIn={zoomIn} onZoomOut={zoomOut} onFitToExtent={fitToExtent} applyBaseStyling={false} />
-            <Button
-              variant="text"
-              onClick={rotateImage}
-              sx={{
-                height: "44px",
-                boxShadow:
-                  "0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)",
-              }}>
-              <RotateCwSquare />
-            </Button>
-          </Stack>
+          <MapControls onZoomIn={zoomIn} onZoomOut={zoomOut} onFitToExtent={fitToExtent} onRotate={rotateImage} />
           <ButtonGroup
             variant="contained"
             sx={{