From b6de63b5a764bd0edbefe0943e8e07bcf5dfa008 Mon Sep 17 00:00:00 2001
From: rei1024 <satopen1729@gmail.com>
Date: Sat, 2 Nov 2024 22:55:42 +0900
Subject: [PATCH] feat: optimize rendering

---
 src/app.ts           | 50 +++++++++++++++++++++++---------------------
 src/ui/colorTable.ts |  5 +++--
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/app.ts b/src/app.ts
index de9c476..a72b6ce 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -26,28 +26,30 @@ const frequencyList = [
   300, 400, 500,
 ];
 
-export function dataToColor(
+export function makeColorMap(
   list: number[],
-  data: number,
   style: "hue" | "heat"
-) {
-  const index = list.findIndex((t) => t === data) ?? 0;
-  // 80% 0.1
-  // return `oklch(92% 0.35 ${value * 360})`;
-  if (style === "hue") {
-    const value = index / list.length;
-    return `lch(70% 70 ${value * 360})`;
-  } else if (style === "heat") {
-    // make red
-    const value = (index + 1) / list.length;
-    // Heat map
-    const h = (1 - value) * 240;
-    return "hsl(" + h + " 100% 70%)";
-  } else {
-    throw new Error("unknown style");
-  }
+): Map<number, string> {
+  const len = list.length;
+  return new Map(
+    list.map((x, index) => {
+      let color: string;
+      if (style === "hue") {
+        const value = index / len;
+        color = `lch(70% 70 ${value * 360})`;
+      } else if (style === "heat") {
+        // make red
+        const value = (index + 1) / len;
+        // Heat map
+        const h = (1 - value) * 240;
+        color = "hsl(" + h + " 100% 70%)";
+      } else {
+        throw new Error("unknown style");
+      }
 
-  // return `hsl(${value * 360} 100% 70%)`;
+      return [x, color];
+    })
+  );
 }
 
 export class App {
@@ -111,15 +113,15 @@ export class App {
 
     const mapData = this.getMapData();
     const list = mapData.list;
+    const colorMap = makeColorMap(
+      list,
+      this.mapType === "heat" ? "heat" : "hue"
+    );
     for (const [y, row] of mapData.data.entries()) {
       for (const [x, p] of row.entries()) {
         if (p >= (this.mapType === "heat" ? 0 : 1)) {
           ctx.beginPath();
-          ctx.fillStyle = dataToColor(
-            list,
-            p,
-            this.mapType === "heat" ? "heat" : "hue"
-          );
+          ctx.fillStyle = colorMap.get(p) ?? "";
           ctx.rect(
             (x - dx + safeArea) * cellSize,
             (y - dy + safeArea) * cellSize,
diff --git a/src/ui/colorTable.ts b/src/ui/colorTable.ts
index a1b674b..65fee4c 100644
--- a/src/ui/colorTable.ts
+++ b/src/ui/colorTable.ts
@@ -1,4 +1,4 @@
-import { dataToColor } from "../app";
+import { makeColorMap } from "../app";
 import { $colorTable } from "../bind";
 import { displayMapTypeTitle, type MapType } from "./core";
 
@@ -29,9 +29,10 @@ export function setColorTable(
     $colorTable.append(trHead);
   }
 
+  const colorMap = makeColorMap(list, mapType === "heat" ? "heat" : "hue");
   for (const item of list) {
     const row = document.createElement("tr");
-    const color = dataToColor(list, item, mapType === "heat" ? "heat" : "hue");
+    const color = colorMap.get(item) ?? "";
     const $color = document.createElement("td");
     $color.style.backgroundColor = color;
     $color.style.width = "40px";