From 4d367d5232bcefdf44aee49aad89c1f24bde8915 Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Sat, 2 Apr 2022 23:48:26 +0200
Subject: [PATCH] fix right-shift historical view when time selected

---
 src/ui/ChunkLoader2D.js |  2 +-
 src/ui/ChunkRGB.js      | 43 +++++++++++++++++++++++++++--------------
 src/ui/Renderer2D.js    | 10 ++++++----
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/ui/ChunkLoader2D.js b/src/ui/ChunkLoader2D.js
index 52ef4ff..7c94456 100644
--- a/src/ui/ChunkLoader2D.js
+++ b/src/ui/ChunkLoader2D.js
@@ -110,7 +110,7 @@ class ChunkLoader {
       const incrementialChunkKey = `${historicalDate}${historicalTime}:${cx}:${cy}`;
       const incrementialChunk = this.chunks.get(incrementialChunkKey);
       if (incrementialChunk) {
-        const incrementialColor = incrementialChunk.getColorIndex(px);
+        const incrementialColor = incrementialChunk.getColorIndex(px, false);
         incrementialChunk.timestamp = curTime;
         if (incrementialColor !== null) {
           return incrementialColor;
diff --git a/src/ui/ChunkRGB.js b/src/ui/ChunkRGB.js
index 4810b66..20f25ba 100644
--- a/src/ui/ChunkRGB.js
+++ b/src/ui/ChunkRGB.js
@@ -2,12 +2,21 @@ import { TILE_SIZE } from '../core/constants';
 
 
 class ChunkRGB {
-  cell: Array;
-  image: HTMLCanvasElement;
-  ready: boolean;
-  timestamp: number;
+  // array of coords [zoom, cx, cy]
+  //  just an identifier, could be removed
+  cell;
+  // HTMLCanvasElement of chunk
+  image;
+  // boolean if chunk loeaded (request done)
+  ready;
+  // boolean if chunk is empty
+  isEmpty;
+  // number timestamp of last load for garbage collection
+  timestamp;
+  // palette of canvas
   palette;
-  isBasechunk: boolean;
+  // boolean if it is basechunk, rather than zoomtile
+  isBasechunk;
 
   constructor(palette, zoom = 0, cx = 0, cy = 0) {
     // isBasechunk gets set to true by RECEIVE_BIG_CHUNK
@@ -21,6 +30,7 @@ class ChunkRGB {
     this.image.height = TILE_SIZE;
     this.cell = [zoom, cx, cy];
     this.ready = false;
+    this.isEmpty = false;
     this.timestamp = Date.now();
   }
 
@@ -29,7 +39,8 @@ class ChunkRGB {
     return null;
   }
 
-  fromBuffer(chunkBuffer: Uint8Array) {
+  // from Uint8Array
+  fromBuffer(chunkBuffer) {
     const imageData = new ImageData(TILE_SIZE, TILE_SIZE);
     const imageView = new Uint32Array(imageData.data.buffer);
     const colors = this.palette.buffer2ABGR(chunkBuffer);
@@ -41,7 +52,7 @@ class ChunkRGB {
     this.ready = true;
   }
 
-  preLoad(img, zoomDiffAbs: number, sx: number, sy: number) {
+  preLoad(img, zoomDiffAbs, sx, sy) {
     if (this.ready) {
       return;
     }
@@ -57,14 +68,15 @@ class ChunkRGB {
     ctx.restore();
   }
 
-  fromImage(img: Image) {
+  fromImage(img) {
     this.ready = true;
     const ctx = this.image.getContext('2d');
     ctx.drawImage(img, 0, 0);
   }
 
-  empty(transparent: boolean = false) {
+  empty(transparent = false) {
     this.ready = true;
+    this.isEmpty = true;
     if (!transparent) {
       const { image, palette } = this;
       const ctx = image.getContext('2d');
@@ -74,19 +86,22 @@ class ChunkRGB {
     }
   }
 
-  static getIndexFromCell([x, y]): number {
+  static getIndexFromCell([x, y]) {
     return x + (TILE_SIZE * y);
   }
 
-  getColorIndex(cell) {
+  getColorIndex(cell, nearest = true) {
     const [x, y] = cell;
     const ctx = this.image.getContext('2d');
 
     const rgb = ctx.getImageData(x, y, 1, 1).data;
-    return this.palette.getClosestIndexOfColor(rgb[0], rgb[1], rgb[2]);
+    const ind = (nearest)
+      ? this.palette.getClosestIndexOfColor(rgb[0], rgb[1], rgb[2])
+      : this.palette.getIndexOfColor(rgb[0], rgb[1], rgb[2]);
+    return ind;
   }
 
-  hasColorIn(cell, color): boolean {
+  hasColorIn(cell, color) {
     const index = ChunkRGB.getIndexFromCell(cell);
 
     const ctx = this.image.getContext('2d');
@@ -96,7 +111,7 @@ class ChunkRGB {
     return (intView[index] === this.palette.abgr[color]);
   }
 
-  setColor(cell, color): boolean {
+  setColor(cell, color) {
     const [x, y] = cell;
     const ctx = this.image.getContext('2d');
     ctx.fillStyle = this.palette.colors[color];
diff --git a/src/ui/Renderer2D.js b/src/ui/Renderer2D.js
index d2411b3..cb918b8 100644
--- a/src/ui/Renderer2D.js
+++ b/src/ui/Renderer2D.js
@@ -632,9 +632,11 @@ class Renderer {
           chunk = this.chunkLoader
             .getHistoricalChunk(cx, cy, fetch, historicalDate, historicalTime);
           if (chunk) {
-            context.drawImage(chunk, x, y);
-            if (fetch) {
-              chunk.timestamp = curTime;
+            if (!chunk.isEmpty) {
+              context.drawImage(chunk, x, y);
+              if (fetch) {
+                chunk.timestamp = curTime;
+              }
             }
           } else if (oldHistoricalTime) {
             chunk = this.chunkLoader
@@ -645,7 +647,7 @@ class Renderer {
                 historicalDate,
                 oldHistoricalTime,
               );
-            if (chunk) {
+            if (chunk && !chunk.isEmpty) {
               context.drawImage(chunk, x, y);
               if (fetch) {
                 chunk.timestamp = curTime;