bugfix: Paletteがmirrored=trueのとき正しく折り返されていなかったのを修正 (#61)

* 先に満たすべき仕様を明示したテストを書いておく

* 正しく折り返すように変更

src/color/color.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { BasePalette } from "./color";
+
+describe("getColorIndex", () => {
+  describe("mirroredがfalseの場合", () => {
+    it("lengthより小さいならそのまま返す", () => {
+      const palette = new BasePalette(12, false, 0);
+      const result = palette.getColorIndex(0);
+      expect(result).toBe(0);
+    });
+
+    it("lengthより大きいならmodを返す", () => {
+      const palette = new BasePalette(12, false, 0);
+      const result = palette.getColorIndex(12);
+      expect(result).toBe(0);
+    });
+  });
+
+  describe("mirroredがtrueの場合", () => {
+    it("長さは2倍して先頭と末尾を引いた数になる", () => {
+      // [0, 1, 2, 3, 4, 5] + [4, 3, 2, 1]
+      // 単純に2倍すると先頭と末尾が2つ同じ色になってしまう
+      const palette = new BasePalette(6, true, 0);
+      const result = palette.size();
+      expect(result).toBe(10);
+    });
+
+    it("lengthより小さいならそのまま返す", () => {
+      const palette = new BasePalette(12, true, 0);
+      const result = palette.getColorIndex(11);
+      expect(result).toBe(11);
+    });
+
+    it("lengthより1小さい値ならそのまま返す", () => {
+      const palette = new BasePalette(12, true, 0);
+      const result = palette.getColorIndex(11);
+      expect(result).toBe(11);
+    });
+
+    it("lengthと同値なら1つ折り返した値を返す", () => {
+      // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] length=12
+      //                                 ^ ← 1つ折り返しているのだから10を返す
+      // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] + [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] length=12+(12-2)=22
+      //                                            ^ つまりここ
+      const palette = new BasePalette(12, true, 0);
+      const result = palette.getColorIndex(12);
+      expect(result).toBe(10);
+    });
+
+    it("折り返した分より大きいなら元に戻る", () => {
+      // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] + [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] + [0, ...]
+      //                                                                             ^ =22
+      const palette = new BasePalette(12, true, 0);
+      const result = palette.getColorIndex(22);
+      expect(result).toBe(0);
+    });
+  });
+});

src/color/color.ts

@@ -87,23 +87,23 @@ export class BasePalette implements Palette {
   }
 
   public size(): number {
-    return this.mirrored ? this.colorLength * 2 : this.colorLength;
+    return this.mirrored ? this.colorLength * 2 - 2 : this.colorLength;
   }
 
   getColorIndex(index: number) {
+    const size = this.size();
     if (this.mirrored) {
       // 折り返す
-      const length = this.colorLength * 2;
-      const offsettedIndex = (index + this.offsetIndex) % length;
+      const offsettedIndex = (index + this.offsetIndex) % size;
 
       if (offsettedIndex < this.colorLength) {
         return offsettedIndex;
       } else {
-        return length - offsettedIndex - 1;
+        return size - offsettedIndex;
       }
     } else {
       // そのまま
-      const offsettedIndex = (index + this.offsetIndex) % this.colorLength;
+      const offsettedIndex = (index + this.offsetIndex) % size;
       return offsettedIndex;
     }
   }
@@ -113,7 +113,7 @@ export class BasePalette implements Palette {
   }
 
   public cycleOffset(step = 1): void {
-    this.offsetIndex = (this.offsetIndex + step) % (this.colorLength * 2);
+    this.offsetIndex = (this.offsetIndex + step) % this.size();
   }
 
   public setLength(length: number): void {

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

@@ -65,7 +65,7 @@ export const PaletteEditor = () => {
         <div className="mb-1 ml-2">Palette Offset: {paletteOffsetValue}</div>
         <Slider
           min={0}
-          max={paletteLengthValue * 2 - 1}
+          max={paletteLengthValue * 2 - 2 - 1} // mirroredの場合は2倍して先頭と末尾を引いた数になる
           value={[paletteOffsetValue]}
           onValueChange={([value]) => {
             setPaletteOffsetValue(value);