feat: chord editing

src/lib/ConfirmDialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import {createEventDispatcher} from "svelte"
+
+  export let title: string
+  export let message: string | undefined
+  export let abortTitle: string
+  export let confirmTitle: string
+
+  const dispatch = createEventDispatcher()
+
+  export function show() {
+    modal.showModal()
+  }
+
+  let modal: HTMLDialogElement
+</script>
+
+<dialog bind:this={modal}>
+  <h1>{@html title}</h1>
+  {#if message}
+    <p>{@html message}</p>
+  {/if}
+  <div class="buttons">
+    <button on:click={() => dispatch("abort")}>{abortTitle}</button>
+    <button class="primary" on:click={() => dispatch("confirm")}>{confirmTitle}</button>
+  </div>
+</dialog>
+
+<style lang="scss">
+  h1 {
+    font-size: 2em;
+    text-align: center;
+  }
+
+  dialog {
+    min-width: 300px;
+    max-width: 512px;
+
+    color: var(--md-sys-color-on-background);
+
+    background: var(--md-sys-color-background);
+    border: none;
+    border-radius: 38px;
+    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  dialog::backdrop {
+    opacity: 0.5;
+    background: black;
+  }
+</style>

src/lib/confirm-dialog.ts

@@ -0,0 +1,32 @@
+import ConfirmDialog from "$lib/ConfirmDialog.svelte"
+
+export async function askForConfirmation(
+  title: string,
+  message: string,
+  confirmTitle: string,
+  abortTitle: string,
+): Promise<boolean> {
+  const dialog = new ConfirmDialog({
+    target: document.body,
+    props: {
+      title,
+      message,
+      confirmTitle,
+      abortTitle,
+    },
+  })
+  dialog.show()
+
+  let resolvePromise: (value: boolean) => void
+  const resultPromise = new Promise<boolean>(resolve => {
+    resolvePromise = resolve
+  })
+
+  dialog.$on("abort", () => resolvePromise(false))
+  dialog.$on("confirm", () => resolvePromise(true))
+
+  const result = await resultPromise
+  dialog.$destroy()
+
+  return result
+}

src/lib/serial/device.ts

@@ -197,7 +197,7 @@ export class CharaDevice {
    */
   async getChordPhrase(actions: number[]): Promise<number[] | undefined> {
     const [phrase] = await this.send(`CML C2 ${stringifyChordActions(actions)}`)
-    return phrase === "0" ? undefined : parsePhrase(phrase)
+    return phrase === "2" ? undefined : parsePhrase(phrase)
   }
 
   async setChord(chord: Chord) {
@@ -211,9 +211,9 @@ export class CharaDevice {
   }
 
   async deleteChord(chord: Pick<Chord, "actions">) {
-    console.log(`CML C4 ${stringifyChordActions(chord.actions)}`)
     const status = await this.send(`CML C4 ${stringifyChordActions(chord.actions)}`)
-    if (status.at(-1) !== "0") throw new Error(`Failed with status ${status}`)
+    console.log(status)
+    if (status.at(-1) !== "2") throw new Error(`Failed with status ${status}`)
   }
 
   /**

src/lib/undo-redo.ts

@@ -1,6 +1,5 @@
 import {persistentWritable} from "$lib/storage"
 import {derived} from "svelte/store"
-import {serializeActions} from "$lib/serial/chord"
 import type {Chord} from "$lib/serial/chord"
 import {deviceChords, deviceLayout, deviceSettings} from "$lib/serial/connection"
 
@@ -19,6 +18,7 @@ export interface LayoutChange {
 
 export interface ChordChange {
   type: ChangeType.Chord
+  id: number[]
   actions: number[]
   phrase: number[]
 }
@@ -40,7 +40,7 @@ export const changes = persistentWritable<Change[]>("changes", [])
 
 export interface Overlay {
   layout: [Map<number, number>, Map<number, number>, Map<number, number>]
-  chords: Map<bigint, number[]>
+  chords: Map<string, Chord>
   settings: Map<number, number>
 }
 
@@ -58,7 +58,7 @@ export const overlay = derived(changes, changes => {
         overlay.layout[change.layer].set(change.id, change.action)
         break
       case ChangeType.Chord:
-        overlay.chords.set(serializeActions(change.actions), change.phrase)
+        overlay.chords.set(JSON.stringify(change.id), {actions: change.actions, phrase: change.phrase})
         break
       case ChangeType.Setting:
         overlay.settings.set(change.id, change.setting)
@@ -88,24 +88,32 @@ export const layout = derived([overlay, deviceLayout], ([overlay, layout]) =>
   ),
 )
 
-export type ChordInfo = Chord & ChangeInfo
+export type ChordInfo = Chord &
+  ChangeInfo & {phraseChanged: boolean; actionsChanged: boolean} & {id: number[]}
 export const chords = derived([overlay, deviceChords], ([overlay, chords]) =>
   chords
     .map<ChordInfo>(chord => {
-      const key = serializeActions(chord.actions)
-      if (overlay.chords.has(key)) {
+      const id = JSON.stringify(chord.actions)
+      if (overlay.chords.has(id)) {
+        const changedChord = overlay.chords.get(id)!
         return {
-          actions: chord.actions,
-          phrase: overlay.chords.get(key)!,
+          id: chord.actions,
+          actions: changedChord.actions,
+          phrase: changedChord.phrase,
+          actionsChanged: id !== JSON.stringify(changedChord.actions),
+          phraseChanged: JSON.stringify(chord.phrase) !== JSON.stringify(changedChord.phrase),
           isApplied: false,
         }
       } else {
         return {
+          id: chord.actions,
           actions: chord.actions,
           phrase: chord.phrase,
+          phraseChanged: false,
+          actionsChanged: false,
           isApplied: true,
         }
       }
     })
-    .sort((a, b) => (a.actions.some((it, i) => it > b.actions[i]) ? 1 : -1)),
+    .sort((a, b) => a.phrase.map((it, i) => it - b.phrase[i]).find(it => it !== 0) ?? 0),
 )