feat: chord editing

src/i18n/de/index.ts

@@ -80,6 +80,13 @@ const de = {
       search: {
         PLACEHOLDER: "{0} Akkord{{|e}} durchsuchen",
       },
+      conflict: {
+        TITLE: "Akkordkonflikt",
+        DESCRIPTION:
+          "Der Akkord {0} würde einen bereits existierenden Akkord überschreiben. Wirklich fortfahren?",
+        CONFIRM: "Überschreiben",
+        ABORT: "Überspringen",
+      },
     },
     layout: {
       TITLE: "Layout",

src/i18n/en/index.ts

@@ -78,6 +78,13 @@ const en = {
       search: {
         PLACEHOLDER: "Search {0} chord{{|s}}",
       },
+      conflict: {
+        TITLE: "Chord conflict",
+        DESCRIPTION:
+          "Your chord {0} conflicts with an existing chord. Are you sure you want to overwrite this chord?",
+        CONFIRM: "Overwrite",
+        ABORT: "Skip",
+      },
     },
     layout: {
       TITLE: "Layout",

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),
 )

src/routes/EditActions.svelte

@@ -5,7 +5,8 @@
   import {fly} from "svelte/transition"
   import {action} from "$lib/title"
   import {deviceChords, deviceLayout, deviceSettings, serialPort, syncStatus} from "$lib/serial/connection"
-  import {deserializeActions} from "$lib/serial/chord"
+  import {askForConfirmation} from "$lib/confirm-dialog"
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
 
   function undo(event: MouseEvent) {
     if (event.shiftKey) {
@@ -32,9 +33,29 @@
 
     $syncStatus = "uploading"
 
-    for (const [id, phrase] of $overlay.chords) {
-      const actions = deserializeActions(id)
-      if (actions.length > 0) {
+    for (const [id, {actions, phrase}] of $overlay.chords) {
+      if (phrase.length > 0) {
+        if (id !== JSON.stringify(actions)) {
+          const existingChord = await port.getChordPhrase(actions)
+          if (
+            existingChord !== undefined &&
+            !(await askForConfirmation(
+              $LL.configure.chords.conflict.TITLE(),
+              $LL.configure.chords.conflict.DESCRIPTION(
+                actions.map(it => `<kbd>${KEYMAP_CODES[it].id}</kbd>`).join(" "),
+              ),
+              $LL.configure.chords.conflict.CONFIRM(),
+              $LL.configure.chords.conflict.ABORT(),
+            ))
+          ) {
+            changes.update(changes =>
+              changes.filter(it => !(it.type === ChangeType.Chord && JSON.stringify(it.id) === id)),
+            )
+            continue
+          }
+
+          await port.deleteChord({actions: JSON.parse(id)})
+        }
         await port.setChord({actions, phrase})
       } else {
         await port.deleteChord({actions})
@@ -56,7 +77,9 @@
       number[],
       number[],
     ]
-    $deviceChords = $chords.map(({actions, phrase}) => ({actions, phrase}))
+    $deviceChords = $chords
+      .map(({actions, phrase}) => ({actions, phrase}))
+      .filter(({phrase}) => phrase.length > 1)
     $deviceSettings = $settings.map(({value}) => value)
     $changes = []
     $syncStatus = "done"

src/routes/config/chords/+page.svelte

@@ -92,8 +92,10 @@
 <section bind:this={results}>
   <table>
     {#if $lastPage !== -1}
-      {#each $items.slice(page * $pageSize, (page + 1) * $pageSize) as [chord], i (`${page}:${i}`)}
-        <ChordEdit {chord} isApplied={chord.isApplied} />
+      {#each $items.slice(page * $pageSize, (page + 1) * $pageSize) as [chord] (chord.id)}
+        <tr>
+          <ChordEdit {chord} />
+        </tr>
       {/each}
     {:else}
       <caption> No Results </caption>

src/routes/config/chords/ChordActionEdit.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type {Chord} from "$lib/serial/chord"
   import {KEYMAP_CODES, KEYMAP_IDS} from "$lib/serial/keymap-codes"
+  import type {ChordInfo} from "$lib/undo-redo"
+  import {changes, ChangeType} from "$lib/undo-redo"
 
-  export let chord: Chord
+  export let chord: ChordInfo
 
   let pressedKeys = new Set<number>()
   let editing = false
@@ -13,18 +14,35 @@
   }
 
   function keydown(event: KeyboardEvent) {
-    // TODO...
+    if (!editing) return
+    event.preventDefault()
     pressedKeys.add(KEYMAP_IDS.get(event.key)!.code)
     pressedKeys = pressedKeys
   }
 
   function keyup() {
+    if (!editing) return
     editing = false
-    // TODO: apply
+    if (pressedKeys.size < 2) return
+    changes.update(changes => {
+      changes.push({
+        type: ChangeType.Chord,
+        id: chord.id,
+        actions: [...pressedKeys],
+        phrase: chord.phrase,
+      })
+      return changes
+    })
   }
 </script>
 
-<button class:deleted={chord.phrase.length === 0} on:click={edit} on:keydown={keydown} on:keyup={keyup}>
+<button
+  class:deleted={chord.phrase.length === 0}
+  class:edited={chord.actionsChanged}
+  on:click={edit}
+  on:keydown={keydown}
+  on:keyup={keyup}
+>
   {#if editing && pressedKeys.size === 0}
     <span>Press keys</span>
   {/if}
@@ -34,6 +52,7 @@
       {icon ?? id ?? `0x${code.toString(16)}`}
     </kbd>
   {/each}
+  <sup>•</sup>
 </button>
 
 <style lang="scss">
@@ -41,10 +60,19 @@
     opacity: 0.5;
   }
 
+  sup {
+    translate: 0 -60%;
+    opacity: 0;
+    transition: opacity 250ms ease;
+  }
+
   button {
     position: relative;
+
     display: inline-flex;
     gap: 4px;
+
+    height: 32px;
     margin-inline: 4px;
 
     &:focus-within {
@@ -53,6 +81,8 @@
   }
 
   kbd {
+    height: 24px;
+    padding-block: auto;
     transition: color 250ms ease;
   }
 
@@ -74,6 +104,14 @@
       color 250ms ease;
   }
 
+  .edited {
+    color: var(--md-sys-color-primary);
+
+    & > sup {
+      opacity: 1;
+    }
+  }
+
   .deleted {
     color: var(--md-sys-color-error);
 

src/routes/config/chords/ChordEdit.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import {changes, ChangeType} from "$lib/undo-redo.js"
+  import type {ChordInfo} from "$lib/undo-redo.js"
   import ChordPhraseEdit from "./ChordPhraseEdit.svelte"
   import ChordActionEdit from "./ChordActionEdit.svelte"
   import type {Chord} from "$lib/serial/chord"
   import {slide} from "svelte/transition"
 
-  export let chord: Chord
-  export let isApplied: boolean
+  export let chord: ChordInfo
 
   function remove() {
     changes.update(changes => {
-      changes.push({type: ChangeType.Chord, actions: chord.actions, phrase: []})
+      changes.push({type: ChangeType.Chord, id: chord.id, actions: chord.actions, phrase: []})
       return changes
     })
   }
@@ -24,12 +24,11 @@
   }
 </script>
 
-<tr>
 <th>
   <ChordActionEdit {chord} />
 </th>
 <td>
-    <ChordPhraseEdit {chord} edited={!isApplied} />
+  <ChordPhraseEdit {chord} />
 </td>
 <td class="table-buttons">
   {#if chord.phrase.length === 0}
@@ -37,11 +36,10 @@
   {:else}
     <button transition:slide class="icon compact" on:click={remove}>delete</button>
   {/if}
-    <button class="icon compact" class:disabled={isApplied} on:click={restore}>undo</button>
+  <button class="icon compact" class:disabled={chord.isApplied} on:click={restore}>undo</button>
   <div class="separator" />
   <button class="icon compact">share</button>
 </td>
-</tr>
 
 <style lang="scss">
   .separator {
@@ -63,8 +61,8 @@
     transition: opacity 75ms ease;
   }
 
-  tr:focus-within > .table-buttons,
-  tr:hover > .table-buttons {
+  :global(tr):focus-within > .table-buttons,
+  :global(tr):hover > .table-buttons {
     opacity: 1;
   }
 </style>

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -2,12 +2,11 @@
   import {KEYMAP_CODES, KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
   import {tick} from "svelte"
   import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
-  import type {Chord} from "$lib/serial/chord"
   import {changes, ChangeType} from "$lib/undo-redo"
+  import type {ChordInfo} from "$lib/undo-redo"
   import {scale} from "svelte/transition"
 
-  export let chord: Chord
-  export let edited: boolean
+  export let chord: ChordInfo
 
   function keypress(event: KeyboardEvent) {
     if (event.key === "ArrowUp") {
@@ -37,9 +36,11 @@
   }
 
   function deleteAction(at: number, count = 1) {
+    if (!(at in chord.phrase)) return
     changes.update(changes => {
       changes.push({
         type: ChangeType.Chord,
+        id: chord.id,
         actions: chord.actions,
         phrase: chord.phrase.toSpliced(at, count),
       })
@@ -51,6 +52,7 @@
     changes.update(changes => {
       changes.push({
         type: ChangeType.Chord,
+        id: chord.id,
         actions: chord.actions,
         phrase: chord.phrase.toSpliced(at, 0, action),
       })
@@ -132,7 +134,7 @@
   role="textbox"
   tabindex="0"
   bind:this={box}
-  class:edited
+  class:edited={chord.phraseChanged}
   on:focusin={() => (hasFocus = true)}
   on:focusout={() => (hasFocus = false)}
 >