arrow nav fix

src/client/canvas.ts

@@ -55,6 +55,7 @@ export class ViewCanvas {
 
     this._posx = offsetWidth / 2;
     this._posy = offsetHeight / 2;
+
     this.moveCanvas();
     this.moveCursor();
   }
@@ -83,9 +84,9 @@ export class ViewCanvas {
     this._screencursorx = this._relcursorx * this._zoom + screenX;
     this._screencursory = this._relcursory * this._zoom + screenY;
 
-    this._cursor.style.top = `${this._screencursory + this._zoom / 2}px`;
+    this._cursor.style.transform = `translate(${this._screencursorx}px, ${this._screencursory}px)`;
-    this._cursor.style.left = `${this._screencursorx + this._zoom / 2}px`;
+    this._cursor.style.width = `${this._zoom}px`;
-    this._cursor.style.transform = `scale(${this._zoom})`;
+    this._cursor.style.height = `${this._zoom}px`;
 
     this._coods.innerText = `(${this._relcursorx}, ${
       this._relcursory
@@ -161,13 +162,13 @@ export class ViewCanvas {
       ev.preventDefault();
 
       if (ev.touches.length === 2 && this._pinching) {
-        const pinchScale = Math.hypot(
+        const pinchLength = Math.hypot(
           ev.touches[0].pageX - ev.touches[1].pageX,
           ev.touches[0].pageY - ev.touches[1].pageY,
         );
 
         if (this._previousPinchLength) {
-          const delta = pinchScale / this._previousPinchLength;
+          const delta = pinchLength / this._previousPinchLength;
           const scaleX = (ev.touches[0].clientX - this._posx) / this._zoom;
           const scaleY = (ev.touches[0].clientY - this._posy) / this._zoom;
 
@@ -177,7 +178,7 @@ export class ViewCanvas {
           this._posx = ev.touches[0].clientX - scaleX * this._zoom;
           this._posy = ev.touches[0].clientY - scaleY * this._zoom;
         }
-        this._previousPinchLength = pinchScale;
+        this._previousPinchLength = pinchLength;
       }
 
       dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
@@ -242,7 +243,8 @@ export class ViewCanvas {
       ) {
         return;
       }
-      const pixelSize = this._size / this._zoom;
+
+      const pixelSize = this._zoom;
       if (ev.key === 'ArrowLeft') {
         this._posx += pixelSize;
       } else if (ev.key === 'ArrowRight') {
@@ -268,7 +270,7 @@ export class ViewCanvas {
   public setView() {
     this._viewWidth = document.body.clientWidth;
     this._viewHeight = document.body.clientHeight;
-    this._fromURL();
+    this._resetPositionOrCenter();
   }
 
   public fill(size: number, canvas: number[]) {
@@ -288,8 +290,8 @@ export class ViewCanvas {
         data.data[4 * index + 3] = 255;
       }
     }
-    this._ctx!.putImageData(data, 0, 0);
 
+    this._ctx!.putImageData(data, 0, 0);
     this.setView();
   }
 
@@ -314,6 +316,7 @@ export class ViewCanvas {
       py: this._relcursory.toString(),
       z: this._zoom.toFixed(2),
     });
+
     window.history.replaceState(
       null,
       document.title,
@@ -321,7 +324,7 @@ export class ViewCanvas {
     );
   }, 500);
 
-  private _fromURL(): void {
+  private _resetPositionOrCenter(): void {
     const search = window.location.search.substring(1);
     if (!search?.length) {
       this.center();

src/server/index.ts

@@ -130,6 +130,7 @@ io.on('connection', (socket) => {
     process.env.SKIP_LOGIN === 'true'
       ? dummyUser
       : (session?.passport?.user as IcyNetUser);
+
   connections.push(socket);
 
   socket.emit(
@@ -173,6 +174,7 @@ setInterval(() => {
 }, 1000);
 
 ///
+
 canvas.initialize().then(() =>
   server.listen(config.server.port, config.server.bind, () => {
     console.log(`Listening at http://localhost:${config.server.port}/`);