Add zoom-buttons to the webapp

BlueMapCommon/webapp/public/lang/de.conf

@@ -47,6 +47,10 @@
     normal: "Normal (Nativ x1)"
     low: "Niedrig (Hochskalieren x0.5)"
   }
+  mapControls: {
+    title: "Steuerung"
+    showZoomButtons: "Zoom-Buttons"
+  }
   freeFlightControls: {
     title: "Freie Kamera"
     mouseSensitivity: "Maus-Sensitivität"

BlueMapCommon/webapp/public/lang/en.conf

@@ -47,6 +47,10 @@
     normal: "Normal (Native x1)"
     low: "Low (Upscaling x0.5)"
   }
+  mapControls: {
+    title: "Map Controls"
+    showZoomButtons: "Show Zoom Buttons"
+  }
   freeFlightControls: {
     title: "Free-Flight Controls"
     mouseSensitivity: "Mouse-Sensitivity"

BlueMapCommon/webapp/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app" :class="{'theme-light': appState.theme === 'light', 'theme-dark': appState.theme === 'dark', 'theme-contrast': appState.theme === 'contrast'}">
     <FreeFlightMobileControls v-if="appState.controls.state === 'free'" />
+    <ZoomButtons v-if="appState.controls.showZoomButtons && appState.controls.state !== 'free'" />
     <ControlBar />
     <MainMenu :menu="appState.menu" />
   </div>
@@ -10,13 +11,15 @@
 import ControlBar from "./components/ControlBar/ControlBar.vue";
 import MainMenu from "./components/Menu/MainMenu.vue";
 import FreeFlightMobileControls from "./components/Controls/FreeFlightMobileControls.vue";
+import ZoomButtons from "./components/Controls/ZoomButtons.vue";
 
 export default {
   name: 'App',
   components: {
     FreeFlightMobileControls,
     MainMenu,
-    ControlBar
+    ControlBar,
+    ZoomButtons
   },
   data() {
     return {

BlueMapCommon/webapp/src/components/Controls/ZoomButtons.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="zoom-buttons">
+    <SvgButton @action="zoom(-3)">
+      <svg viewBox="0 0 30 30">
+        <path d="M22.471,12.95H17.05V7.527c0-1.297-0.917-2.348-2.05-2.348c-1.132,0-2.05,1.051-2.05,2.348v5.423H7.527
+	c-1.297,0-2.348,0.917-2.348,2.05c0,1.132,1.051,2.05,2.348,2.05h5.423v5.421c0,1.299,0.918,2.351,2.05,2.351
+	c1.133,0,2.05-1.052,2.05-2.351V17.05h5.421c1.299,0,2.351-0.918,2.351-2.05C24.821,13.867,23.77,12.95,22.471,12.95z"/>
+      </svg>
+    </SvgButton>
+    <SvgButton @action="zoom(3)">
+      <svg viewBox="0 0 30 30">
+        <g>
+          <path d="M24.821,15c0,1.132-1.052,2.05-2.351,2.05H7.527c-1.297,0-2.348-0.918-2.348-2.05l0,0c0-1.133,1.051-2.05,2.348-2.05
+		h14.944C23.77,12.95,24.821,13.867,24.821,15L24.821,15z"/>
+        </g>
+      </svg>
+    </SvgButton>
+  </div>
+</template>
+
+<script>
+import SvgButton from "../ControlBar/SvgButton.vue";
+
+export default {
+  name: "ZoomButtons",
+  components: {
+    SvgButton
+  },
+  methods: {
+    zoom(delta) {
+      let mouseZoom = this.$bluemap.mapViewer.controlsManager.controls?.mouseZoom;
+      if (mouseZoom) {
+        mouseZoom.deltaZoom += delta;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  #zoom-buttons {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.53));
+    width: 2em;
+
+    margin: 0.5em;
+  }
+</style>

BlueMapCommon/webapp/src/components/Menu/SettingsMenu.vue

@@ -28,6 +28,10 @@
       <SwitchButton :on="!appState.controls.pauseTileLoading" @action="appState.controls.pauseTileLoading = !appState.controls.pauseTileLoading; $bluemap.saveUserSettings()">{{ $t("renderDistance.loadHiresWhileMoving") }}</SwitchButton>
     </Group>
 
+    <Group :title="$t('mapControls.title')">
+      <SwitchButton :on="appState.controls.showZoomButtons" @action="appState.controls.showZoomButtons = !appState.controls.showZoomButtons; $bluemap.saveUserSettings()">{{ $t("mapControls.showZoomButtons") }}</SwitchButton>
+    </Group>
+
     <Group :title="$t('freeFlightControls.title')">
       <Slider :value="appState.controls.mouseSensitivity" :min="0.1" :max="5" :step="0.05"
               @update="appState.controls.mouseSensitivity = $event; $bluemap.updateControlsSettings();" @lazy="$bluemap.saveUserSettings()">{{ $t("freeFlightControls.mouseSensitivity") }}</Slider>

BlueMapCommon/webapp/src/js/BlueMapApp.js

@@ -93,6 +93,7 @@ export class BlueMapApp {
             controls: {
                 state: "perspective",
                 mouseSensitivity: 1,
+                showZoomButtons: true,
                 invertMouse: false,
                 enableFreeFlight: false,
                 pauseTileLoading: false
@@ -592,6 +593,7 @@ export class BlueMapApp {
         this.appState.controls.mouseSensitivity = this.loadUserSetting("mouseSensitivity", this.appState.controls.mouseSensitivity);
         this.appState.controls.invertMouse = this.loadUserSetting("invertMouse", this.appState.controls.invertMouse);
         this.appState.controls.pauseTileLoading = this.loadUserSetting("pauseTileLoading", this.appState.controls.pauseTileLoading);
+        this.appState.controls.showZoomButtons = this.loadUserSetting("showZoomButtons", this.appState.controls.showZoomButtons);
         this.updateControlsSettings();
         this.setTheme(this.loadUserSetting("theme", this.appState.theme));
         this.setScreenshotClipboard(this.loadUserSetting("screenshotClipboard", this.appState.screenshot.clipboard));
@@ -613,6 +615,7 @@ export class BlueMapApp {
         this.saveUserSetting("mouseSensitivity", this.appState.controls.mouseSensitivity);
         this.saveUserSetting("invertMouse", this.appState.controls.invertMouse);
         this.saveUserSetting("pauseTileLoading", this.appState.controls.pauseTileLoading);
+        this.saveUserSetting("showZoomButtons", this.appState.controls.showZoomButtons);
         this.saveUserSetting("theme", this.appState.theme);
         this.saveUserSetting("screenshotClipboard", this.appState.screenshot.clipboard);
         this.saveUserSetting("lang", i18n.locale.value);