mirror of
https://github.com/BlueMap-Minecraft/BlueMap.git
synced 2025-02-05 15:11:21 +01:00
Add zoom-buttons to the webapp
This commit is contained in:
parent
eeabc2135c
commit
e06ff81195
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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 {
|
||||
|
54
BlueMapCommon/webapp/src/components/Controls/ZoomButtons.vue
Normal file
54
BlueMapCommon/webapp/src/components/Controls/ZoomButtons.vue
Normal 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>
|
@ -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>
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user