Add WIP remove swatch

frontend/src/components/DeletePaletteEntryModal.svelte

@@ -0,0 +1,33 @@
+<script lang='ts'>
+  import { Checkbox, Column, Dropdown, Grid, Modal, NumberInput, Row, TextInput } from "carbon-components-svelte";
+  import type { LoadedFile } from "../types/file"
+  
+  export let file: LoadedFile
+
+  export let open: boolean = false
+  export let paletteIndex: number = 0
+  
+  let replaceWithSwatch: boolean = false
+  let replaceIndex: number = 0
+</script>
+
+<Modal
+  hasScrollingContent
+  bind:open
+  modalHeading="Delete Palette Entry"
+  primaryButtonText="Apply"
+  secondaryButtonText="Cancel"
+  on:close={() => open = false}
+  on:click:button--secondary={() => open = false}
+  on:submit={() => {
+    open = false
+    // TODO
+    //file.push(new RemoveSwatchUndoable(paletteIndex, replaceWithSwatch ? replaceIndex : -1))
+  }}
+>
+  <Checkbox labelText="Replace occurrences other swatch" bind:checked={replaceWithSwatch} />
+  {#if replaceWithSwatch}
+    <NumberInput id="replaceWith" label="Replace with" min={0} step={1} bind:value={replaceIndex} />
+    <!-- TODO: Replace with a colorered drop -->
+  {/if}
+</Modal>

frontend/src/sections/Palette.svelte

@@ -3,6 +3,8 @@
   import { ReplaceSwatchUndoable, type LoadedFile, AddSwatchUndoable, MoveSwatchUndoable } from '../types/file'
   import { createEventDispatcher } from 'svelte'
   import type { Undoable } from '../types/undo'
+  import { ContextMenu, ContextMenuOption, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
+  import DeletePaletteEntryModal from '../components/DeletePaletteEntryModal.svelte'
 
   export let file: LoadedFile
   let lastFile: LoadedFile
@@ -47,6 +49,9 @@
   }
   
   function paletteClick(event: MouseEvent) {
+    if (event.button === 2) {
+      return
+    }
     const target = event.target as HTMLSpanElement
     const index = parseInt(target.getAttribute('x-index') || '0')
     if (event.shiftKey) {
@@ -124,6 +129,19 @@
       }
     }
   }
+  
+  let showDeleteDialog: boolean = false
+  let targetIndex: number = -1
+  function onContextMenu(e: CustomEvent) {
+    targetIndex = parseInt((e.detail as HTMLSpanElement).getAttribute('x-index') || '-1')
+  }
+  function showDeleteSwatchDialog(e: CustomEvent) {
+    showDeleteDialog = true
+  }
+  
+  // These are entry refs for sharing the ContextMenu.
+  let _refs = []
+  $: refs = _refs.filter(Boolean)
 </script>
 
 <main on:wheel={handleWheel}>
@@ -136,13 +154,17 @@
       </span>
     {/if}
     {#if swatchIndex !== draggingIndex}
-      <span on:click={paletteClick} x-index={swatchIndex} class='entry{swatchIndex===primaryColorIndex?' primary':''}{swatchIndex===secondaryColorIndex?' secondary':''}{swatchIndex===draggingIndex?' hide':''}' use:swatchDrag>
+      <span bind:this={_refs[swatchIndex]} on:click={paletteClick} x-index={swatchIndex} class='entry{swatchIndex===primaryColorIndex?' primary':''}{swatchIndex===secondaryColorIndex?' secondary':''}{swatchIndex===draggingIndex?' hide':''}' use:swatchDrag on:contextmenu|preventDefault>
         <span class="checkerboard"></span>
         <span style="background-color: rgba({swatch&0xFF},{(swatch>>8)&0xFF},{(swatch>>16)&0xFF},{((swatch>>24)&0xFF)/255})" class="color"></span>
         <span class='label'>{swatchIndex}</span>
       </span>
     {/if}
   {/each}
+  <ContextMenu target={_refs} on:open={onContextMenu}>
+    <ContextMenuOption labelText="Delete..." on:click={showDeleteSwatchDialog} kind='danger' />
+  </ContextMenu>
+  <DeletePaletteEntryModal bind:open={showDeleteDialog} paletteIndex={targetIndex} file={file}/>
 </main>
 
 <style>

frontend/src/types/canvas.ts

@@ -151,7 +151,18 @@ export class Canvas {
   addNewPaletteColor(r: number, g: number, b: number, a: number) {
     this.palette = new Uint32Array([...this.palette, new Uint32Array([(a << 24) | (b << 16) | (g << 8) | r])[0]])
   }
-  removePaletteColor(index: number) {
+  insertPaletteColor(index: number, r: number, g: number, b: number, a: number) {
+    let newPalette = new Uint32Array(this.palette.length + 1)
+    for (let i = 0; i < index; i++) {
+      newPalette[i] = this.palette[i]
+    }
+    newPalette[index] = new Uint32Array([(a << 24) | (b << 16) | (g << 8) | r])[0]
+    for (let i = index; i < this.palette.length; i++) {
+      newPalette[i + 1] = this.palette[i]
+    }
+    this.palette = newPalette
+  }
+  removePaletteIndex(index: number) {
     if (index < 0) {
       index = this.palette.length - index
     }

frontend/src/types/file.ts

@@ -237,10 +237,41 @@ export class AddSwatchUndoable implements Undoable<LoadedFile> {
     file.canvas.addNewPaletteColor(this.red, this.green, this.blue, this.alpha)
   }
   unapply(file: LoadedFile) {
-    file.canvas.removePaletteColor(-1)
+   file.canvas.removePaletteIndex(-1)
   }
 }
 
+// TODO
+/*export class RemoveSwatchUndoable implements Undoable<LoadedFile> {
+  private index: number
+  private replaceIndex: number
+  
+  private oldRed: number
+  private oldGreen: number
+  private oldBlue: number
+  private oldAlpha: number
+
+  constructor(index: number, replaceIndex: number) {
+    this.index = index
+    this.replaceIndex = replaceIndex
+  }
+  apply(file: LoadedFile) {
+    let r = file.canvas.palette[this.index] & 0xFF
+    let g = (file.canvas.palette[this.index] >> 8) & 0xFF
+    let b = (file.canvas.palette[this.index] >> 16) & 0xFF
+    let a = (file.canvas.palette[this.index] >> 24) & 0xFF
+    this.oldRed = r
+    this.oldGreen = g
+    this.oldBlue = b
+    this.oldAlpha = a
+
+    file.canvas.removePaletteIndex(this.index, this.replaceIndex)
+  }
+  unapply(file: LoadedFile) {
+    file.canvas.insertPaletteColor(this.index, this.oldRed, this.oldGreen, this.oldBlue, this.oldAlpha)
+  }
+}*/
+
 export class SwapSwatchUndoable implements Undoable<LoadedFile> {
   private index1: number
   private index2: number