Improve render consistency

ShortestPathLab · Oct 27, 2023 · b3c1972 · b3c1972
1 parent 825d449
commit b3c1972
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/internal-renderers/src/d2-renderer/D2Renderer.ts b/internal-renderers/src/d2-renderer/D2Renderer.ts
@@ -2,9 +2,9 @@ import {
   ceil,
   clamp,
   debounce,
-  delay,
   find,
   floor,
+  forEach,
   isEqual,
   isNaN,
   map,
@@ -352,16 +352,19 @@ class D2Renderer
         ?.addChild(tile)
         .setTransform(bounds.left, bounds.top, scale.x, scale.y);
       this.#getUpdateGridQueue()();
-      await this.#animate(tile);
-      for (const c of this.#world!.children) {
+      await this.#show(tile);
+      forEach(this.#world?.children, async (c) => {
         if (intersect(c.bounds!, bounds) && c.age < tile.age) {
-          c.destroy({ texture: true, baseTexture: true });
+          await this.#hide(c);
+          if (!c.destroyed) {
+            c.destroy({ texture: true, baseTexture: true });
+          }
         }
-      }
+      });
     }
   }
 
-  #animate(tile: Tile) {
+  #show(tile: Tile) {
     const ticker = this.#app!.ticker;
     return new Promise<void>((res) => {
       const f = (dt: number) => {
@@ -373,7 +376,23 @@ class D2Renderer
         }
       };
       tile.alpha = 0;
-      delay(() => ticker.add(f), this.#options.animationDuration);
+      ticker.add(f);
+    });
+  }
+
+  #hide(tile: Tile) {
+    const ticker = this.#app!.ticker;
+    return new Promise<void>((res) => {
+      const f = (dt: number) => {
+        tile.alpha -=
+          dt / PIXI.Ticker.targetFPMS / this.#options.animationDuration;
+        if (tile.alpha < 0) {
+          ticker.remove(f);
+          res();
+        }
+      };
+      tile.alpha = 1;
+      ticker.add(f);
     });
   }
 }

diff --git a/internal-renderers/src/d2-renderer/D2RendererWorker.ts b/internal-renderers/src/d2-renderer/D2RendererWorker.ts
@@ -201,10 +201,10 @@ export class D2RendererWorker extends EventEmitter<
       y: tile.height / (bottom - top),
     };
     const g = new OffscreenCanvas(tile.width, tile.height);
-    const ctx = g.getContext("2d", { alpha: false })!;
+    const ctx = g.getContext("2d")!;
     ctx.imageSmoothingEnabled = false;
-    ctx.fillStyle = this.#options.backgroundColor;
-    ctx.fillRect(0, 0, tile.width, tile.height);
+    // ctx.fillStyle = this.#options.backgroundColor;
+    // ctx.fillRect(0, 0, tile.width, tile.height);
 
     const length = tile.width * 0.05;
     const thickness = 1;

diff --git a/resources/traces/v1.0.5/tile.trace.json b/resources/traces/v1.0.5/tile.trace.json
@@ -10,9 +10,9 @@
           "text": "{{$.event[`${$.tile_x}${$.tile_y}`] === 0 ? '' : $.event[`${$.tile_x}${$.tile_y}`]}}",
           "textX": 0.27,
           "textY": 0.75,
-          "fill": "{{$.event[`${$.tile_x}${$.tile_y}`] ? $.themeTextPrimary : $.themeAccent}}",
           "fontSize": 0.75,
-          "fontColor": "{{$.event.themeBackground}}",
+          "fontColor": "{{$.themeBackground}}",
+          "fill": "{{$.event[`${$.tile_x}${$.tile_y}`] ? $.themeTextPrimary : $.themeAccent}}",
           "x": "{{$.tile_x}}",
           "y": "{{$.tile_y}}",
           "display": "persistent"
@@ -37,13 +37,6 @@
       }
     }
   },
-  "path": {
-    "pivot": {
-      "x": "{{'x' in $.event ? $.event.x : 0}}",
-      "y": "{{'y' in $.event ? $.event.y : 0}}"
-    },
-    "scale": 1
-  },
   "events": [
     {
       "11": 1,