feat: new chord button, fixes #9

feat: improved backups

src/i18n/de/index.ts

@@ -77,6 +77,8 @@ const de = {
   configure: {
     chords: {
       TITLE: "Akkorde",
+      HOLD_KEYS: "Akkord halten",
+      NEW_CHORD: "Neuer Akkord",
       search: {
         PLACEHOLDER: "{0} Akkord{{|e}} durchsuchen",
       },

src/i18n/en/index.ts

@@ -75,6 +75,8 @@ const en = {
   configure: {
     chords: {
       TITLE: "Chords",
+      HOLD_KEYS: "Hold chord",
+      NEW_CHORD: "New chord",
       search: {
         PLACEHOLDER: "Search {0} chord{{|s}}",
       },

src/lib/share/chara-file.ts

@@ -4,7 +4,7 @@ export interface CharaFile<T extends string> {
 }
 
 export interface CharaLayoutFile extends CharaFile<"layout"> {
-  device: "one" | "lite" | string
+  device?: "ONE" | "LITE" | string
   layout: [number[], number[], number[]]
 }
 
@@ -12,8 +12,12 @@ export interface CharaChordFile extends CharaFile<"chords"> {
   chords: [number[], number[]][]
 }
 
-export interface CharaChordSettings extends CharaFile<"settings"> {
+export interface CharaSettingsFile extends CharaFile<"settings"> {
   settings: number[]
 }
 
+export interface CharaBackupFile extends CharaFile<"backup"> {
+  history: [CharaChordFile, CharaLayoutFile, CharaSettingsFile][]
+}
+
 export type CharaFiles = CharaLayoutFile | CharaChordFile

src/lib/undo-redo.ts

@@ -46,7 +46,6 @@ export interface Overlay {
 }
 
 export const overlay = derived(changes, changes => {
-  console.time("overlay building")
   const overlay: Overlay = {
     layout: [new Map(), new Map(), new Map()],
     chords: new Map(),
@@ -66,7 +65,6 @@ export const overlay = derived(changes, changes => {
         break
     }
   }
-  console.timeEnd("overlay building")
 
   return overlay
 })
@@ -91,33 +89,48 @@ export const layout = derived([overlay, deviceLayout], ([overlay, layout]) =>
 
 export type ChordInfo = Chord &
   ChangeInfo & {phraseChanged: boolean; actionsChanged: boolean; sortBy: string} & {id: number[]}
-export const chords = derived([overlay, deviceChords], ([overlay, chords]) =>
-  chords
-    .map<ChordInfo>(chord => {
-      const id = JSON.stringify(chord.actions)
-      if (overlay.chords.has(id)) {
-        const changedChord = overlay.chords.get(id)!
-        return {
-          id: chord.actions,
-          // use the old phrase for stable editing
-          sortBy: chord.phrase.map(it => KEYMAP_CODES[it].id || it).join(),
-          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,
-          sortBy: chord.phrase.map(it => KEYMAP_CODES[it].id || it).join(),
-          actions: chord.actions,
-          phrase: chord.phrase,
-          phraseChanged: false,
-          actionsChanged: false,
-          isApplied: true,
-        }
+export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
+  const newChords = new Set(overlay.chords.keys())
+
+  const changedChords = chords.map<ChordInfo>(chord => {
+    const id = JSON.stringify(chord.actions)
+    if (overlay.chords.has(id)) {
+      newChords.delete(id)
+      const changedChord = overlay.chords.get(id)!
+      return {
+        id: chord.actions,
+        // use the old phrase for stable editing
+        sortBy: chord.phrase.map(it => KEYMAP_CODES[it].id || it).join(),
+        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,
+        sortBy: chord.phrase.map(it => KEYMAP_CODES[it].id || it).join(),
+        actions: chord.actions,
+        phrase: chord.phrase,
+        phraseChanged: false,
+        actionsChanged: false,
+        isApplied: true,
+      }
+    }
+  })
+  for (const id of newChords) {
+    const chord = overlay.chords.get(id)!
+    changedChords.push({
+      sortBy: "",
+      isApplied: false,
+      actionsChanged: true,
+      phraseChanged: false,
+      id: JSON.parse(id),
+      phrase: chord.phrase,
+      actions: chord.actions,
     })
-    .sort(({sortBy: a}, {sortBy: b}) => a.localeCompare(b)),
-)
+  }
+
+  return changedChords.sort(({sortBy: a}, {sortBy: b}) => a.localeCompare(b))
+})

src/routes/BackupPopup.svelte

@@ -1,27 +1,42 @@
 <script lang="ts">
-  import {parseCompressed, stringifyCompressed} from "$lib/serial/serialization"
-  import {deviceChords, deviceLayout} from "$lib/serial/connection"
+  import {serialPort} from "$lib/serial/connection"
   import {preference} from "$lib/preferences"
-  import type {Chord} from "$lib/serial/chord"
-  import type {CharaLayout} from "$lib/serialization/layout"
   import LL from "../i18n/i18n-svelte"
-
-  interface Backup {
-    isCharaBackup: string
-    chords: Chord[]
-    layout: CharaLayout
-  }
+  import type {
+    CharaBackupFile,
+    CharaChordFile,
+    CharaSettingsFile,
+    CharaLayoutFile,
+  } from "$lib/share/chara-file.js"
+  import {changes, ChangeType, chords, layout, settings} from "$lib/undo-redo.js"
+  import type {Change} from "$lib/undo-redo.js"
 
   async function downloadBackup() {
     const downloadUrl = URL.createObjectURL(
-      await stringifyCompressed({
-        isCharaBackup: "v1.0",
-        chords: $deviceChords,
-        layout: $deviceLayout,
-      }),
+      new Blob(
+        [
+          JSON.stringify({
+            charaVersion: 1,
+            type: "backup",
+            history: [
+              [
+                {charaVersion: 1, type: "chords", chords: $chords.map(it => [it.actions, it.phrase])},
+                {
+                  charaVersion: 1,
+                  type: "layout",
+                  device: $serialPort?.device,
+                  layout: $layout.map(it => it.map(it => it.action)) as [number[], number[], number[]],
+                },
+                {charaVersion: 1, type: "settings", settings: $settings.map(it => it.value)},
+              ],
+            ],
+          } satisfies CharaBackupFile),
+        ],
+        {type: "application/json"},
+      ),
     )
     const element = document.createElement("a")
-    element.setAttribute("download", "chords.chb")
+    element.setAttribute("download", "backup.json")
     element.href = downloadUrl
     element.setAttribute("target", "_blank")
     element.click()
@@ -31,14 +46,57 @@
   async function restoreBackup(event: Event) {
     const input = (event.target as HTMLInputElement).files![0]
     if (!input) return
-    const backup = await parseCompressed<Backup>(input)
-    if (backup.isCharaBackup !== "v1.0") throw new Error("Invalid Backup")
-    if (backup.chords) {
-      $deviceChords = backup.chords
+    const backup: CharaBackupFile = JSON.parse(await input.text())
+    if (backup.charaVersion !== 1 || backup.type !== "backup") throw new Error("Invalid Backup")
+
+    const recent = backup.history[0]
+    if (recent[1].device !== $serialPort?.device) throw new Error("Backup is incompatible with this device")
+
+    changes.update(changes => {
+      changes.push(
+        ...getChangesFromChordFile(recent[0]),
+        ...getChangesFromLayoutFile(recent[1]),
+        ...getChangesFromSettingsFile(recent[2]),
+      )
+      return changes
+    })
+  }
+
+  function getChangesFromChordFile(file: CharaChordFile) {
+    const changes: Change[] = []
+    // TODO...
+    return changes
+  }
+
+  function getChangesFromSettingsFile(file: CharaSettingsFile) {
+    const changes: Change[] = []
+    for (const [id, value] of file.settings.entries()) {
+      if ($settings[id].value !== value) {
+        changes.push({
+          type: ChangeType.Setting,
+          id,
+          setting: value,
+        })
+      }
     }
-    if (backup.layout) {
-      $deviceLayout = backup.layout
+    return changes
+  }
+
+  function getChangesFromLayoutFile(file: CharaLayoutFile) {
+    const changes: Change[] = []
+    for (const [layer, keys] of file.layout.entries()) {
+      for (const [id, action] of keys.entries()) {
+        if ($layout[layer][id].action !== action) {
+          changes.push({
+            type: ChangeType.Layout,
+            layer,
+            id,
+            action,
+          })
+        }
+      }
     }
+    return changes
   }
 </script>
 

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

@@ -4,11 +4,12 @@
   import LL from "../../../i18n/i18n-svelte"
   import {action} from "$lib/title"
   import {onDestroy, onMount, setContext} from "svelte"
-  import {chords} from "$lib/undo-redo"
+  import {changes, ChangeType, chords} from "$lib/undo-redo"
   import type {ChordInfo} from "$lib/undo-redo"
   import {derived, writable} from "svelte/store"
   import ChordEdit from "./ChordEdit.svelte"
   import {crossfade} from "svelte/transition"
+  import ChordActionEdit from "./ChordActionEdit.svelte"
 
   const resultSize = 38
   let results: HTMLElement
@@ -46,12 +47,27 @@
     searchFilter.set(query && searchIndex ? searchIndex.search(query) : undefined)
   }
 
+  function insertChord(actions: number[]) {
+    changes.update(changes => {
+      changes.push({
+        type: ChangeType.Chord,
+        id: actions,
+        actions,
+        phrase: [],
+      })
+      return changes
+    })
+  }
+
   const items = derived(
     [searchFilter, chords],
     ([filter, chords]) =>
       filter?.map(it => [chords[it], it] as const) ?? chords.map((it, i) => [it, i] as const),
   )
-  const lastPage = derived([items, pageSize], ([items, pageSize]) => Math.ceil(items.length / pageSize) - 1)
+  const lastPage = derived(
+    [items, pageSize],
+    ([items, pageSize]) => Math.ceil((items.length + 1) / pageSize) - 1,
+  )
 
   setContext("cursor-crossfade", crossfade({}))
 
@@ -91,8 +107,11 @@
 
 <section bind:this={results}>
   <table>
+    {#if page === 0}
+      <tr><th><ChordActionEdit on:submit={({detail}) => insertChord(detail)} /></th><td /><td /></tr>
+    {/if}
     {#if $lastPage !== -1}
-      {#each $items.slice(page * $pageSize, (page + 1) * $pageSize) as [chord] (chord.id)}
+      {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord.id))}
         <tr>
           <ChordEdit {chord} />
         </tr>

src/routes/config/chords/ChordActionEdit.svelte

@@ -2,8 +2,12 @@
   import {KEYMAP_CODES, KEYMAP_IDS} from "$lib/serial/keymap-codes"
   import type {ChordInfo} from "$lib/undo-redo"
   import {changes, ChangeType} from "$lib/undo-redo"
+  import {createEventDispatcher} from "svelte"
+  import LL from "../../../i18n/i18n-svelte"
 
-  export let chord: ChordInfo
+  export let chord: ChordInfo | undefined = undefined
+
+  const dispatch = createEventDispatcher()
 
   let pressedKeys = new Set<number>()
   let editing = false
@@ -24,12 +28,13 @@
     if (!editing) return
     editing = false
     if (pressedKeys.size < 2) return
+    if (!chord) return dispatch("submit", [...pressedKeys])
     changes.update(changes => {
       changes.push({
         type: ChangeType.Chord,
-        id: chord.id,
+        id: chord!.id,
         actions: [...pressedKeys],
-        phrase: chord.phrase,
+        phrase: chord!.phrase,
       })
       return changes
     })
@@ -37,16 +42,18 @@
 </script>
 
 <button
-  class:deleted={chord.phrase.length === 0}
-  class:edited={chord.actionsChanged}
+  class:deleted={chord && chord.phrase.length === 0}
+  class:edited={chord && chord.actionsChanged}
   on:click={edit}
   on:keydown={keydown}
   on:keyup={keyup}
 >
   {#if editing && pressedKeys.size === 0}
-    <span>Press keys</span>
+    <span>{$LL.configure.chords.HOLD_KEYS()}</span>
+  {:else if !editing && !chord}
+    <span>{$LL.configure.chords.NEW_CHORD()}</span>
   {/if}
-  {#each editing ? [...pressedKeys].sort() : chord.actions as actionId}
+  {#each editing ? [...pressedKeys].sort() : chord?.actions ?? [] as actionId}
     {@const {icon, id, code} = KEYMAP_CODES[actionId] ?? {code: actionId}}
     <kbd class:icon={!!icon}>
       {icon ?? id ?? `0x${code.toString(16)}`}
@@ -92,9 +99,10 @@
     position: absolute;
     top: 50%;
     transform-origin: center left;
+    translate: -6px 0;
     scale: 0 1;
 
-    width: calc(100% - 16px);
+    width: calc(100% - 32px);
     height: 1px;
 
     background: currentcolor;

src/routes/config/chords/ChordEdit.svelte

@@ -31,10 +31,10 @@
   <ChordPhraseEdit {chord} />
 </td>
 <td class="table-buttons">
-  {#if chord.phrase.length === 0}
-    <button transition:slide class="icon compact" on:click={restore}>restore_from_trash</button>
-  {:else}
+  {#if chord.phrase.length !== 0}
     <button transition:slide class="icon compact" on:click={remove}>delete</button>
+  {:else if chord.phraseChanged}
+    <button transition:slide class="icon compact" on:click={restore}>restore_from_trash</button>
   {/if}
   <button class="icon compact" class:disabled={chord.isApplied} on:click={restore}>undo</button>
   <div class="separator" />

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -135,7 +135,7 @@
   role="textbox"
   tabindex="0"
   bind:this={box}
-  class:edited={chord.phraseChanged}
+  class:edited={chord.phrase.length !== 0 && chord.phraseChanged}
   on:focusin={() => (hasFocus = true)}
   on:focusout={event => {
     if (event.relatedTarget !== button) hasFocus = false
@@ -236,12 +236,13 @@
       background: currentcolor;
 
       transition:
-        opacity 250ms ease,
+        opacity 150ms ease,
         scale 250ms ease;
     }
 
     &::after {
       scale: 0 1;
+      transition-duration: 250ms;
     }
 
     &:hover::before {