Show brush as cursor

frontend/src/sections/Editor2D.svelte

@@ -3,7 +3,7 @@
 
   import type { data } from '../../wailsjs/go/models.ts'
   import type { LoadedFile } from '../types/file'
-  import type { PixelPosition } from '../types/shapes'
+  import { FilledCircle, FilledSquare, type PixelPosition } from '../types/shapes'
   import { BrushTool, EraserTool, FillTool, PickerTool, type BrushType, type Tool } from '../types/tools'
   import { Button, NumberInput, OverflowMenu, OverflowMenuItem, Slider } from 'carbon-components-svelte';
   import { ZoomIn, ZoomOut } from 'carbon-icons-svelte';
@@ -162,8 +162,25 @@
       ctx.beginPath()
       ctx.strokeStyle = '#ff0000'
       ctx.lineWidth = 1
-
+      
       if (zoom > 1) {
+        let shape: PixelPosition[]
+        if (brushType === 'square' || brushSize <= 2) {
+          // FIXME: This is daft to adjust +1,+1 for size 2 -- without this, the rect preview draws one pixel offset to the top-left, which is not the same as when the filled rect is placed.
+          if (brushSize === 2) {
+            shape = FilledSquare(1, 1, brushSize, 1)
+          } else {
+            shape = FilledSquare(0, 0, brushSize, 1)
+          }
+        } else if (brushType === 'circle') {
+          shape = FilledCircle(0, 0, brushSize-2, 1)
+        }
+        let {r, g, b, a }= file.canvas.getPaletteAsRGBA(primaryColorIndex)
+        ctx.fillStyle = `rgba(${r},${g},${b},${a})`
+        for (let i = 0; i < shape.length; i++) {
+          ctx.fillRect(offsetX*zoom+(mousePixelX+shape[i].x)*zoom, offsetY*zoom+(mousePixelY+shape[i].y)*zoom, zoom, zoom)
+        }
+
         ctx.rect(offsetX*zoom+mousePixelX*zoom, offsetY*zoom+mousePixelY*zoom, 1*zoom, 1*zoom)
       }
       if (zoom <= 1 || zoom > 4) {

frontend/src/types/canvas.ts

@@ -29,6 +29,18 @@ export class Canvas {
   setPalette(palette: Uint32Array) {
     this.palette = palette
   }
+  getPaletteAsRGBA(index: number): { r: number, g: number, b: number, a: number } {
+    if (index < 0 || index >= this.palette.length) {
+      return { r: 0, g: 0, b: 0, a: 0 }
+    }
+    let color = this.palette[index]
+    return {
+      r: color & 0xFF,
+      g: (color >> 8) & 0xFF,
+      b: (color >> 16) & 0xFF,
+      a: (color >> 24) & 0xFF
+    }
+  }
   setPaletteFromUint8Array(palette: Uint8Array) {
     this.palette = new Uint32Array(palette.length / 4)
     for (let i = 0; i < palette.length; i += 4) {