Implement color picker

sadly not universal

frontend/src/App.svelte

@@ -14,10 +14,10 @@
   
   import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte"
 
-  import { Close, Erase, PaintBrushAlt, RainDrop, Redo, Select_01, Undo, Scale } from "carbon-icons-svelte"
+  import { Close, Erase, PaintBrushAlt, RainDrop, Redo, Select_01, Undo, Scale, Eyedropper } from "carbon-icons-svelte"
   import StackPreview from './sections/StackPreview.svelte'
   import type { Canvas } from './types/canvas'
-  import { BrushTool, EraserTool, FillTool, type Tool } from './types/tools';
+  import { BrushTool, EraserTool, FillTool, PickerTool, type Tool } from './types/tools';
   import BrushSize from './components/BrushSize.svelte';
   
   let theme: 'white'|'g10'|'g80'|'g90'|'g100' = 'g90'
@@ -38,6 +38,7 @@
   let toolFill = new FillTool()
   let toolErase = new EraserTool()
   let toolBrush = new BrushTool()
+  let toolPicker = new PickerTool()
   let currentTool: Tool = toolBrush
   let brushSize: number = 1
   
@@ -103,6 +104,7 @@
       <Button disabled kind="ghost" size="small" icon={Select_01} iconDescription="selection" tooltipPosition="right"></Button>
       <Button isSelected={currentTool === toolFill} kind="ghost" size="small" icon={RainDrop} iconDescription="fill" tooltipPosition="right" on:click={()=>swapTool(toolFill)}></Button>
       <Button isSelected={currentTool === toolBrush} kind="ghost" size="small" icon={PaintBrushAlt} iconDescription="paint" tooltipPosition="right" on:click={()=>swapTool(toolBrush)}></Button>
+      <Button isSelected={currentTool === toolPicker} kind="ghost" size="small" icon={Eyedropper} iconDescription="pick" tooltipPosition="right" on:click={()=>swapTool(toolPicker)}></Button>
       <Button isSelected={currentTool === toolErase} kind="ghost" size="small" icon={Erase} iconDescription="erase" tooltipPosition="right" on:click={()=>swapTool(toolErase)}></Button>
     </menu>
     <section class='middle'>
@@ -124,7 +126,7 @@
         <svelte:fragment slot="content">
           {#each files as file}
             <TabContent>
-              <Editor2D bind:file={file} refresh={refresh} primaryColorIndex={primaryColorIndex} secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} />
+              <Editor2D bind:file={file} refresh={refresh} bind:primaryColorIndex={primaryColorIndex} bind:secondaryColorIndex={secondaryColorIndex} bind:currentTool={currentTool} brushSize={brushSize} />
             </TabContent>
           {/each}
         </svelte:fragment>

frontend/src/sections/Editor2D.svelte

@@ -4,7 +4,7 @@
   import type { data } from '../../wailsjs/go/models.ts'
   import type { LoadedFile } from '../types/file'
   import type { PixelPosition } from '../types/shapes'
-  import { BrushTool, EraserTool, FillTool, type Tool } from '../types/tools'
+  import { BrushTool, EraserTool, FillTool, PickerTool, type Tool } from '../types/tools'
   import { Button, NumberInput, OverflowMenu, OverflowMenuItem, Slider } from 'carbon-components-svelte';
   import { ZoomIn, ZoomOut } from 'carbon-icons-svelte';
 
@@ -214,6 +214,8 @@
           currentTool.pointerDown({file, brushSize}, {x: mousePixelX, y: mousePixelY, id: e.button })
         } else if (currentTool instanceof FillTool) {
           currentTool.pointerDown({file, colorIndex: primaryColorIndex}, {x: mousePixelX, y: mousePixelY, id: e.button })
+        } else if (currentTool instanceof PickerTool) {
+          currentTool.pointerDown({file, setColorIndex: index=>primaryColorIndex=index}, {x: mousePixelX, y: mousePixelY, id: e.button })
         } else {
           currentTool.pointerDown({file}, {x: mousePixelX, y: mousePixelY, id: e.button })
         }
@@ -274,6 +276,8 @@
             currentTool.pointerMove({file, brushSize}, {x: mousePixelX, y: mousePixelY, id: 0 })
           } else if (currentTool instanceof FillTool) {
             currentTool.pointerMove({file, colorIndex: primaryColorIndex}, {x: mousePixelX, y: mousePixelY, id: 0 })
+          } else if (currentTool instanceof PickerTool) {
+            currentTool.pointerMove({file, setColorIndex: index=>primaryColorIndex=index}, {x: mousePixelX, y: mousePixelY, id: e.button })
           } else {
             currentTool.pointerMove({file}, {x: mousePixelX, y: mousePixelY, id: 0 })
           }

frontend/src/types/tools.ts

@@ -31,6 +31,10 @@ export interface FloodToolContext {
   colorIndex: number
 }
 
+export interface PickerToolContext {
+  setColorIndex(index: number): void
+}
+
 export class BrushTool implements Tool {
   private active: boolean
   isActive(): boolean {
@@ -136,3 +140,27 @@ export class FillTool implements Tool {
     this.active = false
   }
 }
+
+export class PickerTool implements Tool {
+  private active: boolean
+  isActive(): boolean {
+    return this.active
+  }
+
+  pointerDown(ctx: ToolContext & PickerToolContext, ptr: Pointer) {
+    this.active = true
+    let p = ctx.file.canvas.getPixel(ptr.x, ptr.y)
+    if (p !== -1) {
+      ctx.setColorIndex(p)
+    }
+  }
+  pointerMove(ctx: ToolContext & PickerToolContext, ptr: Pointer) {
+    let p = ctx.file.canvas.getPixel(ptr.x, ptr.y)
+    if (p !== -1) {
+      ctx.setColorIndex(p)
+    }
+  }
+  pointerUp(ctx: ToolContext & PickerToolContext, ptr: Pointer) {
+    this.active = false
+  }
+}