bugfix: パレット周りのバグをいろいろ修正 (#58)

* Palette編集UIから長さを変更したときfillCacheしてなかったので色がおかしくなるバグがまだ起きていたのを修正

* presetから選んだ場合もupdateStoreしておくべきだった

* deps漏れてた

* 数値キーでpreset変えたとき、タブ変えないと値が反映されてなかったのを修正

* mouseXとmouseYとprogressが毎フレーム更新されてしまっていたのを修正

* fill cacheだけだと意味が分からんのでpaletteのserializeしたのを一緒に出力しておく

src/camera/palette.ts

@@ -53,12 +53,13 @@ export const getCurrentPalette = () => currentPalette;
  * presetに登録してあるPaletteを選択する
  */
 export const changePaletteFromPresets = (index: number) => {
+  let newPalette = currentPalette;
+
   if (palettePresets[index]) {
-    currentPalette = palettePresets[index];
-  } else {
-    currentPalette = palettePresets[0];
+    newPalette = palettePresets[index];
   }
-  markNeedsRerender();
+
+  setPalette(newPalette);
 };
 
 /**

src/color/color-chromajs.ts

@@ -26,7 +26,6 @@ export class ChromaJsPalette extends BasePalette {
     }
 
     this.buildColors();
-    this.fillCache();
   }
 
   getRGBFromColorIndex(index: number): RGB {
@@ -37,6 +36,7 @@ export class ChromaJsPalette extends BasePalette {
     this.colors = chroma
       .scale(this.colorConstructor)
       .colors(this.colorLength, null);
+    this.fillCache();
   }
 
   serialize(): string {

src/color/color-d3-chromatic.ts

@@ -59,7 +59,6 @@ export class D3ChromaticPalette extends BasePalette {
     this.interpolator = interpolator;
 
     this.buildColors();
-    this.fillCache();
   }
 
   getRGBFromColorIndex(index: number): RGB {
@@ -70,6 +69,7 @@ export class D3ChromaticPalette extends BasePalette {
     this.colors = samples(this.colorLength)
       .map((t) => color(this.interpolator(t)))
       .filter((v): v is NonNullable<typeof v> => v != null);
+    this.fillCache();
   }
 
   serialize(): string {

src/color/color-others.ts

@@ -55,13 +55,13 @@ export class OthersPalette extends BasePalette {
     this.interpolator = interpolator;
 
     this.buildColors();
-    this.fillCache();
   }
 
   buildColors(): void {
     this.colors = samples(this.colorLength)
       .map((t) => this.interpolator(t))
       .filter((v): v is NonNullable<typeof v> => v != null);
+    this.fillCache();
   }
 
   getRGBFromColorIndex(index: number): RGB {

src/color/color.ts

@@ -22,7 +22,11 @@ export class BasePalette implements Palette {
   }
 
   fillCache(): void {
-    console.log("Fill cache: ", this.colorLength);
+    console.log(
+      "Fill palette cache:",
+      this.colorLength,
+      `(${this.serialize()})`,
+    );
 
     for (let i = 0; i < this.colorLength; i++) {
       const rgb = this.getRGBFromColorIndex(i);

src/store/store.ts

@@ -1,3 +1,4 @@
+import BigNumber from "bignumber.js";
 import { eventmit } from "eventmit";
 import { useEffect, useState } from "react";
 import {
@@ -20,6 +21,11 @@ export const getStore = (key: string) => store[key];
 
 export const updateStore = (key: string, value: any) => {
   if (store[key] === value) return;
+  // BigNumberはeqで比較
+  if (value instanceof BigNumber && value.eq(store[key])) return;
+  // progressがobjectなので、totalが同じなら更新しない
+  if (value != null && value.total != null && value.total === store[key].total)
+    return;
 
   store[key] = value;
 
@@ -55,7 +61,7 @@ export const useStoreValue = <T = any>(key: string) => {
     return () => {
       event.off(handler);
     };
-  }, []);
+  }, [key]);
 
   return value as T;
 };

src/view/right-sidebar/palette-editor.tsx

@@ -4,8 +4,8 @@ import {
 } from "@/camera/palette";
 import { ValueSlider } from "@/components/slider-wrapper";
 import { Slider } from "@/components/ui/slider";
-import { getStore, updateStore } from "@/store/store";
-import { useState } from "react";
+import { getStore, updateStore, useStoreValue } from "@/store/store";
+import { useEffect, useState } from "react";
 
 const paletteLengthValues = [
   "4",
@@ -31,6 +31,16 @@ export const PaletteEditor = () => {
     getStore("paletteOffset"),
   );
 
+  // subscribe
+  const paletteLength = useStoreValue("paletteLength");
+  useEffect(() => {
+    setPaletteLengthValue(paletteLength);
+  }, [paletteLength]);
+  const paletteOffset = useStoreValue("paletteOffset");
+  useEffect(() => {
+    setPaletteOffsetValue(paletteOffset);
+  }, [paletteOffset]);
+
   return (
     <div className="flex max-w-80 flex-col gap-6">
       <div>