Add rotate option (#1528)

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,15 +20,15 @@ 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";
 import { BasemapContext } from "../basemapSelector/basemapContext.tsx";
 import { clusterStyleFunction, drawStyle, styleFunction } from "./mapStyleFunctions.js";
 import { projections } from "./mapProjections.js";
 import { theme } from "../../AppTheme.ts";
-import Draw from "ol/interaction/Draw.js";
+import Draw from "ol/interaction/Draw";
 import { withTranslation } from "react-i18next";
 
 class MapComponent extends React.Component {
@@ -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,14 +16,14 @@ 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";
 import { projections } from "./mapProjections.js";
 import { detailMapStyleFunction } from "./mapStyleFunctions.js";
-import TileLayer from "ol/layer/Tile.js";
-import XYZ from "ol/source/XYZ.js";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
 
 class PointComponent extends React.Component {
   static contextType = BasemapContext;
@@ -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

@@ -13,10 +13,11 @@ 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";
+import { DragRotate, PinchRotate } from "ol/interaction";
 
 interface LabelingPanelProps {
   boreholeId: number;
@@ -98,6 +99,14 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
     }
   };
 
+  const rotateImage = () => {
+    if (map) {
+      const view = map.getView();
+      const rotation = view.getRotation();
+      view.setRotation(rotation + Math.PI / 2);
+    }
+  };
+
   useEffect(() => {
     if (files === undefined) {
       loadFiles();
@@ -112,8 +121,17 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
         controls: defaultControls({
           attribution: false,
           zoom: false,
+          rotate: false,
         }),
       });
+      map
+        .getInteractions()
+        .getArray()
+        .forEach(interaction => {
+          if (interaction instanceof DragRotate || interaction instanceof PinchRotate) {
+            map.removeInteraction(interaction);
+          }
+        });
       setMap(map);
     } else if (map && selectedFile) {
       getDataExtractionFileInfo(selectedFile.id, activePage).then(response => {
@@ -197,8 +215,8 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
         exclusive
         sx={{
           position: "absolute",
-          bottom: "16px",
-          right: "16px",
+          bottom: theme.spacing(2),
+          right: theme.spacing(2),
           zIndex: "500",
         }}>
         <ToggleButton value="bottom" data-cy="labeling-panel-position-bottom">
@@ -214,8 +232,8 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
             direction="row"
             sx={{
               position: "absolute",
-              top: "16px",
-              left: "16px",
+              top: theme.spacing(2),
+              left: theme.spacing(2),
               zIndex: "500",
               gap: 1,
             }}>
@@ -235,16 +253,20 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
                   setSelectedFile(files?.find(file => file.id === item.key));
                 }
               }}
-              sx={{ height: "44px" }}
+              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)",
+              }}
             />
           </Stack>
-          <ZoomControls onZoomIn={zoomIn} onZoomOut={zoomOut} onFitToExtent={fitToExtent} />
+          <MapControls onZoomIn={zoomIn} onZoomOut={zoomOut} onFitToExtent={fitToExtent} onRotate={rotateImage} />
           <ButtonGroup
             variant="contained"
             sx={{
               position: "absolute",
-              bottom: "16px",
-              left: "16px",
+              bottom: theme.spacing(2),
+              left: theme.spacing(2),
               zIndex: "500",
               height: "44px",
             }}>