keep the placer tag visible when moved only a little

src/client/canvas.ts

@@ -12,14 +12,18 @@ export class ViewCanvas {
   private _placeFn?: (placement: Placement) => void;
   private _getPlacerFn?: (x: number, y: number) => Promise<CanvasRecord>;
   private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
-  private _ctx = this._canvas.getContext('2d');
   private _wrapper = $('<div class="canvas__wrapper">');
   private _zoomWrapper = $('<div class="canvas__zoom">');
   private _eventWrapper = $('<div class="canvas__container">');
   private _cursor = $('<div class="canvas__cursor">');
   private _coods = $('<div class="canvas__coordinates">');
   private _userInfo = $('<a class="canvas__user">');
+
+  private _ctx = this._canvas.getContext('2d');
+
   private _size = 1000;
+  private _minZoom = 1;
+  private _maxZoom = 100;
 
   private _viewWidth = 0;
   private _viewHeight = 0;
@@ -31,13 +35,12 @@ export class ViewCanvas {
   private _mousex = 0;
   private _mousey = 0;
 
-  private _relmousex = 0;
-  private _relmousey = 0;
-
   private _cursorx = 0;
   private _cursory = 0;
-  private _relcursorx = 0;
-  private _relcursory = 0;
+  private _highlightedTileX = 0;
+  private _highlightedTileY = 0;
+  private _previousTileX = 0;
+  private _previousTileY = 0;
   private _screencursorx = 0;
   private _screencursory = 0;
 
@@ -67,8 +70,6 @@ export class ViewCanvas {
   }
 
   public moveCursor(): void {
-    this._resetPlacerTag();
-
     // Apparent size of the canvas after scaling it
     const realSize = this._zoom * this._size;
     // The difference between the real canvas size and apparent size
@@ -84,33 +85,43 @@ export class ViewCanvas {
       clamp(this._viewHeight / 2, screenY, screenY + realSize),
     );
 
+    // Store previous canvas position
+    this._previousTileX = this._highlightedTileX;
+    this._previousTileY = this._highlightedTileY;
+
     // Position of the cursor on the canvas
-    this._relcursorx = clamp(
+    this._highlightedTileX = clamp(
       Math.floor((this._cursorx - screenX) / this._zoom),
       0,
       this._size - 1,
     );
-    this._relcursory = clamp(
+    this._highlightedTileY = clamp(
       Math.floor((this._cursory - screenY) / this._zoom),
       0,
       this._size - 1,
     );
 
-    this._screencursorx = this._relcursorx * this._zoom + screenX;
-    this._screencursory = this._relcursory * this._zoom + screenY;
+    // Remove placer tag if the highlighted tile position has changed
+    const skipRequest = this._resetPlacerTag();
+
+    // Position the cursor on the screen so that it is snapped to the current tile
+    this._screencursorx = this._highlightedTileX * this._zoom + screenX;
+    this._screencursory = this._highlightedTileY * this._zoom + screenY;
 
     this._cursor.style.transform = `translate(${this._screencursorx}px, ${this._screencursory}px)`;
     this._cursor.style.width = `${this._zoom}px`;
     this._cursor.style.height = `${this._zoom}px`;
 
-    this._coods.innerText = `(${this._relcursorx}, ${
-      this._relcursory
+    // Update coordinate display
+    this._coods.innerText = `(${this._highlightedTileX}, ${
+      this._highlightedTileY
     }) ${this._zoom.toFixed(2)}x`;
 
     this._updateURL();
 
-    if (this._zoom > 20) {
-      this._getPlacerAt(this._relcursorx, this._relcursory);
+    // Get placer tag and tile color info for picker button
+    if (this._zoom > 20 && !skipRequest) {
+      this._getPlacerAt(this._highlightedTileX, this._highlightedTileY);
     }
   }
 
@@ -232,7 +243,7 @@ export class ViewCanvas {
       const scaleY = (ev.clientY - this._posy) / this._zoom;
 
       ev.deltaY < 0 ? (this._zoom *= 1.2) : (this._zoom /= 1.2);
-      this._zoom = clamp(this._zoom, 1, 100);
+      this._zoom = clamp(this._zoom, this._minZoom, this._maxZoom);
 
       this._posx = ev.clientX - scaleX * this._zoom;
       this._posy = ev.clientY - scaleY * this._zoom;
@@ -248,8 +259,8 @@ export class ViewCanvas {
     this.picker.registerOnPlace((color) => {
       if (this._placeFn) {
         this._placeFn({
-          x: this._relcursorx,
-          y: this._relcursory,
+          x: this._highlightedTileX,
+          y: this._highlightedTileY,
           c: color,
           t: Date.now(),
         });
@@ -351,8 +362,8 @@ export class ViewCanvas {
 
   private _updateURL = debounce(() => {
     const urlelements = new URLSearchParams({
-      px: this._relcursorx.toString(),
-      py: this._relcursory.toString(),
+      px: this._highlightedTileX.toString(),
+      py: this._highlightedTileY.toString(),
       z: this._zoom.toFixed(2),
     });
 
@@ -374,7 +385,7 @@ export class ViewCanvas {
         });
       }
     },
-    1000,
+    500,
   );
 
   private _getPlacerAt(x: number, y: number) {
@@ -391,17 +402,36 @@ export class ViewCanvas {
     this._placerTag = $('<div class="canvas__cursor-placer">');
     this._placerTag.innerText = placer.user;
     this._placerTag.style.setProperty('--base-size', `${this._zoom / 2}px`);
-    this._placerTag.style.setProperty('--base-scale', `${this._zoom / 100}`);
+    this._placerTag.style.setProperty(
+      '--base-scale',
+      `${this._zoom / this._maxZoom}`,
+    );
     this._cursor.append(this._placerTag);
   }
 
-  private _resetPlacerTag(): void {
+  private _resetPlacerTag(): boolean {
+    if (
+      this._previousTileX === this._highlightedTileX &&
+      this._previousTileY === this._highlightedTileY &&
+      this._placerTag
+    ) {
+      this._placerTag.style.setProperty('--base-size', `${this._zoom / 2}px`);
+      this._placerTag.style.setProperty(
+        '--base-scale',
+        `${this._zoom / this._maxZoom}`,
+      );
+
+      return true;
+    }
+
     this._placerRequestTime = 0;
     this.picker.setPickColor(null);
     if (this._placerTag) {
       this._cursor.removeChild(this._placerTag);
       this._placerTag = null;
     }
+
+    return false;
   }
 
   private _resetPositionOrCenter(): void {
@@ -419,22 +449,37 @@ export class ViewCanvas {
     }
 
     if (obj.get('z')) {
-      this._zoom = clamp(parseFloat(obj.get('z')), 1, 100);
+      this._zoom = clamp(
+        parseFloat(obj.get('z')),
+        this._minZoom,
+        this._maxZoom,
+      );
     }
 
     if (obj.get('px')) {
-      this._relcursorx = clamp(parseInt(obj.get('px'), 10), 0, this._size - 1);
+      this._highlightedTileX = clamp(
+        parseInt(obj.get('px'), 10),
+        0,
+        this._size - 1,
+      );
     }
 
     if (obj.get('py')) {
-      this._relcursory = clamp(parseInt(obj.get('py'), 10), 0, this._size - 1);
+      this._highlightedTileY = clamp(
+        parseInt(obj.get('py'), 10),
+        0,
+        this._size - 1,
+      );
     }
 
     this._cursorx = this._viewWidth / 2;
     this._cursory = this._viewHeight / 2;
 
-    this._posx = -Math.ceil(this._relcursorx * this._zoom - this._cursorx) - 1;
-    this._posy = -Math.ceil(this._relcursory * this._zoom - this._cursory);
+    this._posx =
+      -Math.ceil(this._highlightedTileX * this._zoom - this._cursorx) - 1;
+    this._posy = -Math.ceil(
+      this._highlightedTileY * this._zoom - this._cursory,
+    );
 
     this.moveCanvas();
     this.moveCursor();