Add new tile-loading settings

BlueMapWeb

@@ -1 +1 @@
-Subproject commit d9ffe6453fc17e8a623f4446aa164edc80949ff2
+Subproject commit bb4928c72f455710c186d7f5b5273e7861d1083c

public/lang/de.js

@@ -55,7 +55,9 @@ export default {
     renderDistance: {
         title: "Renderdistanz",
         hiresLayer: "Hires-Schicht",
-        lowersLayer: "Lowres-Schicht"
+        lowersLayer: "Lowres-Schicht",
+        loadHiresWhileMoving: "Lade Hires während Bewegung",
+        off: "Off"
     },
     theme: {
         title: "Farbmodus",

public/lang/en.js

@@ -55,7 +55,9 @@ export default {
     renderDistance: {
         title: "Render Distance",
         hiresLayer: "Hires layer",
-        lowersLayer: "Lowres layer"
+        lowersLayer: "Lowres layer",
+        loadHiresWhileMoving: "Load hires while moving",
+        off: "Off"
     },
     theme: {
         title: "Theme",

src/components/Menu/SettingsMenu.vue

@@ -21,10 +21,11 @@
     </Group>
 
     <Group :title="$t('renderDistance.title')">
-      <Slider :value="mapViewer.loadedHiresViewDistance" :min="settings.hiresSliderMin" :max="settings.hiresSliderMax" :step="10"
+      <Slider :value="mapViewer.loadedHiresViewDistance" :min="settings.hiresSliderMin" :max="settings.hiresSliderMax" :step="10" :formatter="renderDistanceFormatter"
               @update="mapViewer.loadedHiresViewDistance = $event; $bluemap.mapViewer.updateLoadedMapArea()" @lazy="$bluemap.saveUserSettings()">{{ $t("renderDistance.hiresLayer") }}</Slider>
       <Slider :value="mapViewer.loadedLowresViewDistance" :min="settings.lowresSliderMin" :max="settings.lowresSliderMax" :step="100"
               @update="mapViewer.loadedLowresViewDistance = $event; $bluemap.mapViewer.updateLoadedMapArea()" @lazy="$bluemap.saveUserSettings()">{{ $t("renderDistance.lowersLayer") }}</Slider>
+      <SwitchButton :on="!appState.controls.pauseTileLoading" @action="appState.controls.pauseTileLoading = !appState.controls.pauseTileLoading; $bluemap.saveUserSettings()">{{ $t("renderDistance.loadHiresWhileMoving") }}</SwitchButton>
     </Group>
 
     <Group :title="$t('freeFlightControls.title')">
@@ -96,6 +97,10 @@ name: "SettingsMenu",
   methods: {
     switchDebug() {
       this.$bluemap.setDebug(!this.appState.debug);
+    },
+    renderDistanceFormatter(value) {
+      let f = parseFloat(value);
+      return f === 0 ? this.$t("renderDistance.off") : f.toFixed(0);
     }
   }
 }

src/components/Menu/Slider.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="slider">
-  <div class="label"><slot />: <span class="value">{{formattedValue}}</span></div>
+  <div class="label"><slot />: <span class="value">{{formatter(value)}}</span></div>
   <label>
     <input type="range" :min="min" :max="max" :step="step" :value="value" @input="$emit('update', parseFloat($event.target.value))" @change="$emit('lazy', parseFloat($event.target.value))">
   </label>
@@ -21,10 +21,11 @@ export default {
     min: Number,
     max: Number,
     step: Number,
-  },
-  computed: {
-    formattedValue() {
-      return parseFloat(this.value).toFixed(countDecimals(this.step));
+    formatter: {
+      type: Function,
+      default: function(value) {
+        return parseFloat(value).toFixed(countDecimals(this.step));
+      }
     }
   }
 }

src/i18n/fallback.js

@@ -55,7 +55,9 @@ export default {
 	renderDistance: {
 		title: "Render Distance",
 		hiresLayer: "Hires layer",
-		lowersLayer: "Lowres layer"
+		lowersLayer: "Lowres layer",
+		loadHiresWhileMoving: "Load hires-tiles while moving",
+		off: "Off"
 	},
 	theme: {
 		title: "Theme",

src/js/BlueMapApp.js

@@ -78,6 +78,8 @@ export class BlueMapApp {
         /** @type Map<BlueMapMap> */
         this.mapsMap = new Map();
 
+        this.lastCameraMove = 0;
+
         this.dataUrl = "maps/";
 
         this.mainMenu = new MainMenu();
@@ -88,6 +90,7 @@ export class BlueMapApp {
                 mouseSensitivity: 1,
                 invertMouse: false,
                 enableFreeFlight: false,
+                pauseTileLoading: false
             },
             menu: this.mainMenu,
             maps: [],
@@ -258,7 +261,7 @@ export class BlueMapApp {
         // create maps
         if (settings.maps !== undefined){
             for (let mapId of settings.maps) {
-                let map = new BlueMapMap(mapId, this.dataUrl + mapId + "/", this.mapViewer.events);
+                let map = new BlueMapMap(mapId, this.dataUrl + mapId + "/", this.loadBlocker, this.mapViewer.events);
                 maps.push(map);
 
                 await map.loadSettings()
@@ -552,6 +555,7 @@ export class BlueMapApp {
         this.mapViewer.updateLoadedMapArea();
         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.updateControlsSettings();
         this.setTheme(this.loadUserSetting("theme", this.appState.theme));
         await i18n.setLanguage(this.loadUserSetting("lang", i18n.locale));
@@ -571,6 +575,7 @@ export class BlueMapApp {
         this.saveUserSetting("lowresViewDistance", this.mapViewer.data.loadedLowresViewDistance);
         this.saveUserSetting("mouseSensitivity", this.appState.controls.mouseSensitivity);
         this.saveUserSetting("invertMouse", this.appState.controls.invertMouse);
+        this.saveUserSetting("pauseTileLoading", this.appState.controls.pauseTileLoading);
         this.saveUserSetting("theme", this.appState.theme);
         this.saveUserSetting("lang", i18n.locale);
         this.saveUserSetting("debug", this.appState.debug);
@@ -595,6 +600,22 @@ export class BlueMapApp {
     cameraMoved = () => {
         if (this.hashUpdateTimeout) clearTimeout(this.hashUpdateTimeout);
         this.hashUpdateTimeout = setTimeout(this.updatePageAddress, 1500);
+        this.lastCameraMove = Date.now();
+    }
+
+    loadBlocker = async () => {
+        if (!this.appState.controls.pauseTileLoading) return;
+
+        let timeToWait;
+        do {
+            let timeSinceLastMove = Date.now() - this.lastCameraMove;
+            timeToWait = 250 - timeSinceLastMove;
+            if (timeToWait > 0) await this.sleep(timeToWait);
+        } while (timeToWait > 0);
+    }
+
+    sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
     }
 
     updatePageAddress = () => {