Enable minimap zoom via scroll wheel

Author: malte-hansen

app/modifiers/interaction-modifier.ts

@@ -69,6 +69,7 @@ function cleanup(instance: InteractionModifierModifier) {
   canvas.removeEventListener('pointercancel', instance.onPointerCancel);
   canvas.removeEventListener('pointermove', instance.onPointerMove);
   canvas.removeEventListener('pointerstop', instance.onPointerStop);
+  canvas.removeEventListener('wheel', instance.onWheel);
   document.removeEventListener('keydown', instance.keyDown);
   document.removeEventListener('keyup', instance.keyUp);
 }
@@ -138,6 +139,7 @@ export default class InteractionModifierModifier extends Modifier<InteractionMod
       this.canvas.addEventListener('pointerout', this.onPointerOut);
       this.canvas.addEventListener('pointercancel', this.onPointerCancel);
       this.canvas.addEventListener('pointermove', this.onPointerMove);
+      this.canvas.addEventListener('wheel', this.onWheel);
 
       document.addEventListener('keydown', this.keyDown);
       document.addEventListener('keyup', this.keyUp);
@@ -243,6 +245,13 @@ export default class InteractionModifierModifier extends Modifier<InteractionMod
     }
   }
 
+  @action
+  onWheel(event: WheelEvent) {
+    if (this.minimapService.isMouseInsideMinimap(event)) {
+      this.minimapService.addZoomDelta(-event.deltaY / 1000);
+    }
+  }
+
   @action
   onPointerStop(customEvent: CustomEvent<MouseStopEvent>) {
     if (this.pointers.length > 0) {
@@ -309,7 +318,7 @@ export default class InteractionModifierModifier extends Modifier<InteractionMod
   ) {
     // check for click on Minimap
     let intersectedViewObjectCopy = intersectedViewObj;
-    const isOnMinimap = this.minimapService.isClickInsideMinimap(event);
+    const isOnMinimap = this.minimapService.isMouseInsideMinimap(event);
     const rayMarkers = this.minimapService.raycastForMarkers(event);
     // if rayMarkers are present, it means that the click was on a marker
     if (rayMarkers) {
@@ -378,7 +387,7 @@ export default class InteractionModifierModifier extends Modifier<InteractionMod
    * @returns The object that was hit by the ray
    */
   private handleMinimapDoubleClick(event: MouseEvent) {
-    if (this.minimapService.isClickInsideMinimap(event)) {
+    if (this.minimapService.isMouseInsideMinimap(event)) {
       return this.minimapService.raycastForObjects(
         event,
         this.localUser.minimapCamera,

app/services/minimap-service.ts

@@ -233,7 +233,9 @@ export default class MinimapService extends Service {
    * @param event MouseEvent of the click
    * @returns true if the click is inside the minimap
    */
-  isClickInsideMinimap(event: MouseEvent) {
+  isMouseInsideMinimap(event: MouseEvent) {
+    if (!this.minimapEnabled) return false;
+
     const minimap = this.minimap();
     const minimapHeight = minimap[0];
     const minimapWidth = minimap[1];
@@ -382,6 +384,18 @@ export default class MinimapService extends Service {
     this.localUser.minimapCamera.updateProjectionMatrix();
   }
 
+  addZoomDelta(zoomDelta: number) {
+    const zoomSetting = this.userSettings.visualizationSettings.zoom;
+    const newZoom = zoomSetting.value + zoomDelta;
+    if (newZoom < zoomSetting.range.min) {
+      this.userSettings.updateSetting('zoom', zoomSetting.range.min);
+    } else if (newZoom > zoomSetting.range.max) {
+      this.userSettings.updateSetting('zoom', zoomSetting.range.max);
+    } else {
+      this.userSettings.updateSetting('zoom', newZoom);
+    }
+  }
+
   calculateDistanceFactor(): number {
     return 0.2 / this.settings.visualizationSettings.zoom.value;
   }

app/utils/settings/default-settings.ts

@@ -664,9 +664,9 @@ export const defaultVizSettings: VisualizationSettings = {
   zoom: {
     value: 1,
     range: {
-      min: 0.5,
-      max: 3.0,
-      step: 0.1,
+      min: 0.1,
+      max: 5,
+      step: 0.05,
     },
     group: 'Minimap',
     displayName: 'Zoom of Minimap',