TDD REFACTOR: extract color conversion and add palette caching in usePixelBuffer

Author: matteosusca

client/src/composables/pixel-canvas/usePixelBuffer.test.ts

@@ -98,4 +98,31 @@ describe('usePixelBuffer', () => {
     updateBuffer();
     expect(onBufferUpdate).toHaveBeenCalled();
   });
+
+  it('updates correctly when palette changes', () => {
+    const props = ref<PixelBufferProps>({
+      width: 1,
+      height: 1,
+      pixels: new Uint8Array([0]),
+      palette: ['#ff0000']
+    });
+
+    const { updateBuffer } = usePixelBuffer(props);
+    updateBuffer();
+
+    let imageData = mockContext.putImageData.mock.calls[0][0];
+    let data32 = new Uint32Array(imageData.data.buffer);
+    expect(data32[0]).toBe(0xFF0000FF); // #ff0000
+
+    // Change palette (new reference)
+    props.value = {
+      ...props.value,
+      palette: ['#0000ff']
+    };
+    updateBuffer();
+
+    imageData = mockContext.putImageData.mock.calls[1][0];
+    data32 = new Uint32Array(imageData.data.buffer);
+    expect(data32[0]).toBe(0xFFFF0000); // #0000ff
+  });
 });

client/src/composables/pixel-canvas/usePixelBuffer.ts

@@ -7,6 +7,13 @@ export interface PixelBufferProps {
   palette: string[];
 }
 
+function hexToUint32(hex: string): number {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return (255 << 24) | (b << 16) | (g << 8) | r;
+}
+
 export function usePixelBuffer(
   props: Readonly<Ref<PixelBufferProps>>,
   onBufferUpdate?: () => void
@@ -15,6 +22,10 @@ export function usePixelBuffer(
   const pixelBuffer = document.createElement('canvas');
   const pixelCtx = pixelBuffer.getContext('2d')!;
 
+  // Cache for uint32Palette
+  let cachedPalette: string[] | null = null;
+  let uint32Palette = new Uint32Array(0);
+
   function updateBuffer() {
     const { width, height, pixels, palette } = props.value;
     if (width === 0 || height === 0) return;
@@ -25,13 +36,12 @@ export function usePixelBuffer(
     const imageData = pixelCtx.createImageData(width, height);
     const data32 = new Uint32Array(imageData.data.buffer);
 
-    const uint32Palette = new Uint32Array(palette.length);
-    for (let i = 0; i < palette.length; i++) {
-      const hex = palette[i];
-      const r = parseInt(hex.slice(1, 3), 16);
-      const g = parseInt(hex.slice(3, 5), 16);
-      const b = parseInt(hex.slice(5, 7), 16);
-      uint32Palette[i] = (255 << 24) | (b << 16) | (g << 8) | r;
+    if (palette !== cachedPalette) {
+      uint32Palette = new Uint32Array(palette.length);
+      for (let i = 0; i < palette.length; i++) {
+        uint32Palette[i] = hexToUint32(palette[i]);
+      }
+      cachedPalette = palette;
     }
 
     for (let i = 0; i < pixels.length; i++) {