Allow to pan the map with the mouse by moving the cursor to the edges of the screen

src/js/application.js

@@ -168,6 +168,9 @@ export class Application {
 
         if (!G_IS_MOBILE_APP && !IS_MOBILE) {
             window.addEventListener("mousemove", this.handleMousemove.bind(this));
+            window.addEventListener("mouseout", this.handleMousemove.bind(this));
+            window.addEventListener("mouseover", this.handleMousemove.bind(this));
+            window.addEventListener("mouseleave", this.handleMousemove.bind(this));
         }
 
         // Unload events

src/js/changelog.js

@@ -31,6 +31,7 @@ export const CHANGELOG = [
             "Show mouse and camera tile on debug overlay (F4) (by dengr)",
             "Added confirmation when deleting a savegame",
             "Fixed tunnels entrances connecting to exits sometimes when they shouldn't",
+            "You can now pan the map with your mouse by moving the cursor to the edges of the screen!",
             "Added setting to auto select the extractor when pipetting a resource patch (by Exund)",
             "The initial belt planner direction is now based on the cursor movement (by MizardX)",
             "Fix preferred variant not getting saved when clicking on the hud (by Danacus)",

src/js/game/camera.js

@@ -769,6 +769,7 @@ export class Camera extends BasicSerializableObject {
             this.cameraUpdateTimeBucket -= physicsStepSizeMs;
 
             this.internalUpdatePanning(now, physicsStepSizeMs);
+            this.internalUpdateMousePanning(now, physicsStepSizeMs);
             this.internalUpdateZooming(now, physicsStepSizeMs);
             this.internalUpdateCentering(now, physicsStepSizeMs);
             this.internalUpdateShake(now, physicsStepSizeMs);
@@ -855,6 +856,61 @@ export class Camera extends BasicSerializableObject {
         }
     }
 
+    /**
+     * Internal screen panning handler
+     * @param {number} now
+     * @param {number} dt
+     */
+    internalUpdateMousePanning(now, dt) {
+        if (!this.root.app.settings.getAllSettings().enableMousePan) {
+            // Not enabled
+            return;
+        }
+
+        const mousePos = this.root.app.mousePosition;
+        if (!mousePos) {
+            return;
+        }
+
+        if (this.desiredCenter || this.desiredZoom || this.currentlyMoving || this.currentlyPinching) {
+            // Performing another method of movement right now
+            return;
+        }
+
+        if (
+            mousePos.x < 0 ||
+            mousePos.y < 0 ||
+            mousePos.x > this.root.gameWidth ||
+            mousePos.y > this.root.gameHeight
+        ) {
+            // Out of screen
+            return;
+        }
+
+        const panAreaPixels = Math.min(this.root.gameWidth, this.root.gameHeight) * 0.015;
+
+        const panVelocity = new Vector();
+        if (mousePos.x < panAreaPixels) {
+            panVelocity.x -= 1;
+        }
+        if (mousePos.x > this.root.gameWidth - panAreaPixels) {
+            panVelocity.x += 1;
+        }
+
+        if (mousePos.y < panAreaPixels) {
+            panVelocity.y -= 1;
+        }
+        if (mousePos.y > this.root.gameHeight - panAreaPixels) {
+            panVelocity.y += 1;
+        }
+
+        this.center = this.center.add(
+            panVelocity.multiplyScalar(
+                ((0.5 * dt) / this.zoomLevel) * this.root.app.settings.getMovementSpeed()
+            )
+        );
+    }
+
     /**
      * Updates the non user interaction zooming
      * @param {number} now Time now in seconds

src/js/profile/application_settings.js

@@ -253,6 +253,7 @@ export const allApplicationSettings = [
         changeCb: (app, id) => {},
     }),
 
+    new BoolSetting("enableMousePan", enumCategories.advanced, (app, value) => {}),
     new BoolSetting("alwaysMultiplace", enumCategories.advanced, (app, value) => {}),
     new BoolSetting("clearCursorOnDeleteWhilePlacing", enumCategories.advanced, (app, value) => {}),
     new BoolSetting("enableTunnelSmartplace", enumCategories.advanced, (app, value) => {}),
@@ -308,6 +309,7 @@ class SettingsStorage {
         this.clearCursorOnDeleteWhilePlacing = true;
         this.displayChunkBorders = false;
         this.pickMinerOnPatch = true;
+        this.enableMousePan = true;
 
         this.enableColorBlindHelper = false;
 
@@ -525,7 +527,7 @@ export class ApplicationSettings extends ReadWriteProxy {
     }
 
     getCurrentVersion() {
-        return 27;
+        return 28;
     }
 
     /** @param {{settings: SettingsStorage, version: number}} data */
@@ -653,6 +655,11 @@ export class ApplicationSettings extends ReadWriteProxy {
             data.version = 27;
         }
 
+        if (data.version < 28) {
+            data.settings.enableMousePan = true;
+            data.version = 28;
+        }
+
         return ExplainedResult.good();
     }
 }

translations/base-en.yaml

@@ -785,7 +785,7 @@ settings:
         movementSpeed:
             title: Movement speed
             description: >-
-                Changes how fast the view moves when using the keyboard.
+                Changes how fast the view moves when using the keyboard or moving the mouse to the screen borders.
             speeds:
                 super_slow: Super slow
                 slow: Slow
@@ -840,7 +840,7 @@ settings:
         refreshRate:
             title: Tick Rate
             description: >-
-                The game will automatically adjust the tickrate to be between this target tickrate and half of it. For example, with a tickrate of 60hz, the game will try to stay at 60hz, and if your computer can't handle it it will go down until it eventually reaches 30hz.
+                This determines how many game ticks happen per second. In general, a higher tick rate means better precision but also worse performance. On lower tickrates, the throughput may not be exact.
 
         alwaysMultiplace:
             title: Multiplace
@@ -911,7 +911,12 @@ settings:
         simplifiedBelts:
             title: Simplified Belts (Ugly)
             description: >-
-                Does not render belt items except when hovering the belt, to save performance.
+                Does not render belt items except when hovering the belt to save performance. I do not recommend to play with this setting if you do not absolutely need the performance.
+
+        enableMousePan:
+            title: Enable Mouse Pan
+            description: >-
+                Allows to move the map by moving the cursor to the edges of the screen. The speed depends on the Movement Speed setting.
 
 keybindings:
     title: Keybindings