Add zoom-buttons to the webapp

This commit is contained in:
Lukas Rieger (Blue) 2022-12-29 20:03:03 +01:00
parent eeabc2135c
commit e06ff81195
No known key found for this signature in database
GPG Key ID: 2D09EC5ED2687FF2
6 changed files with 73 additions and 1 deletions

View File

@ -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"

View File

@ -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"

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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);