Feature Request: Option for "Mouse moves Viewport" panning with Mouse Lock

[NutchapolSal]

I've played OpenTTD, and I have found that I prefer "Mouse moves Viewport" panning much more than "Mouse moves Canvas" panning because your mouse can move in one motion, instead of going back and forth. Additionally, Mouse Lock keeps the cursor within bounds of the window, so there's no problem with your mouse leaving the window.

Basically, have an option to invert panning direction and/or activate pointer lock while panning.

(IMO the terms I used here, which are adapted from OpenTTD, explains it much more nicely than "Normal" and "Inverted")

[NutchapolSal]

Previously I made a minor mod to my litegraph.core.js back in June 2024 to shove this feature in, so I don't know what changes are needed for current version, but here's what I've done back then:

All changes are in LGraphCanvas class. use canvas.requestPointerLock() and document.exitPointerLock() to lock and unlock pointer when dragging_canvas became true or false. did this in processMouseMove:

   } else if (this.dragging_canvas) {
         	////console.log("pointerevents: processMouseMove is dragging_canvas");
-            this.ds.offset[0] += delta[0] / this.ds.scale;
-            this.ds.offset[1] += delta[1] / this.ds.scale;
+            this.ds.offset[0] -= delta[0] / this.ds.scale;
+            this.ds.offset[1] -= delta[1] / this.ds.scale;
+            this.ds.offset[0] -= e.movementX / this.ds.scale;
+            this.ds.offset[1] -= e.movementY / this.ds.scale;
            this.dirty_canvas = true;
            this.dirty_bgcanvas = true;
        } else if ...

the reason both delta and e.movementX/Y is needed is to improve responsiveness, as pointer lock takes a bit of time to activate.
and because pointer lock hides the cursor, I made the canvas draw a small cross shaped cursor in drawFrontCanvas.

         if (this.onDrawOverlay) {
             this.onDrawOverlay(ctx);
         }

+        if (this.dragging_canvas) {
+            ctx.save()
+            ctx.strokeStyle = "#FFF"
+            ctx.fillStyle = "#000"
+            ctx.strokeRect(this.mouse[0], this.mouse[1] - 5, 1, 11)
+            ctx.strokeRect(this.mouse[0] - 5, this.mouse[1], 11, 1)
+            ctx.fillRect(this.mouse[0], this.mouse[1] - 5, 1, 11)
+            ctx.fillRect(this.mouse[0] - 5, this.mouse[1], 11, 1)
+            ctx.restore()
+        }

         if (area){
             ctx.restore();
         }