From e7a52221d2e54b6b3256c83929f5e087fe84352f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= Date: Fri, 22 Sep 2023 20:27:15 +0200 Subject: [PATCH] feat: layout editing (sorta) --- icons.config.ts | 5 + src/i18n/de/index.ts | 14 + src/i18n/en/index.ts | 14 + src/lib/action-autocomplete.ts | 59 --- src/lib/chords/coverage.ts | 23 - src/lib/components/ActionAutocomplete.svelte | 63 --- src/lib/components/ActionListItem.svelte | 9 +- src/lib/components/TypingInput.svelte | 77 ---- .../components/layout/ActionSelector.svelte | 407 ++++++++++++------ src/lib/components/layout/Layout.svelte | 5 - src/lib/components/layout/LayoutCC1.svelte | 10 +- src/lib/components/layout/RingInput.svelte | 43 +- src/lib/editable-layout.ts | 45 +- src/lib/serial/connection.ts | 8 + .../+layout.svelte => ConfigTabs.svelte} | 2 +- src/routes/EditActions.svelte | 85 ++++ src/routes/Footer.svelte | 1 + src/routes/Navigation.svelte | 113 ++--- src/routes/config/chords/+page.svelte | 11 +- src/routes/train/+page.ts | 6 - src/routes/train/[mode]/+page.svelte | 5 - 21 files changed, 500 insertions(+), 505 deletions(-) delete mode 100644 src/lib/action-autocomplete.ts delete mode 100644 src/lib/chords/coverage.ts delete mode 100644 src/lib/components/ActionAutocomplete.svelte delete mode 100644 src/lib/components/TypingInput.svelte rename src/routes/{config/+layout.svelte => ConfigTabs.svelte} (96%) create mode 100644 src/routes/EditActions.svelte delete mode 100644 src/routes/train/+page.ts delete mode 100644 src/routes/train/[mode]/+page.svelte diff --git a/icons.config.ts b/icons.config.ts index a4d2962c..0a3d8154 100644 --- a/icons.config.ts +++ b/icons.config.ts @@ -62,6 +62,11 @@ const config: IconsConfig = { "upload_file", "commit", "bug_report", + "delete", + "remove_selection", + "bolt", + "undo", + "redo", ], codePoints: { speed: "e9e4", diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts index 8736d665..9bcd411d 100644 --- a/src/i18n/de/index.ts +++ b/src/i18n/de/index.ts @@ -2,6 +2,12 @@ import type {Translation} from "../i18n-types" const de = { TITLE: "amaCC1ng", + saveActions: { + UNDO: "Rückgängig", + REDO: "Wiederholen", + APPLY: "Anwenden", + SAVE: "Änderungen auf das Gerät schreiben", + }, backup: { TITLE: "Sicherungskopie", DISCLAIMER: @@ -9,6 +15,14 @@ const de = { DOWNLOAD: "Kopie Speichern", RESTORE: "Wiederherstellen", }, + modal: { + CLOSE: "Schließen", + }, + actionSearch: { + PLACEHOLDER: "Nach Aktionen suchen", + CURRENT_ACTION: "Aktuelle Aktion", + DELETE: "Entfernen", + }, share: { URL_COPIED: "Teilbare URL kopiert!", EXTRA_DOWNLOAD: "Als Datei herunterladen", diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts index 21cf6bd1..bbc2738a 100644 --- a/src/i18n/en/index.ts +++ b/src/i18n/en/index.ts @@ -2,12 +2,26 @@ import type {BaseTranslation} from "../i18n-types" const en = { TITLE: "amaCC1ng", + saveActions: { + UNDO: "Undo", + REDO: "Redo", + APPLY: "Apply", + SAVE: "Write changes to your device", + }, backup: { TITLE: "Local Backup", DISCLAIMER: "Backups remain on your computer and are never shared with us or uploaded to our servers.", DOWNLOAD: "Download Backup", RESTORE: "Restore", }, + modal: { + CLOSE: "Close", + }, + actionSearch: { + PLACEHOLDER: "Search for actions", + CURRENT_ACTION: "Current action", + DELETE: "Remove", + }, share: { URL_COPIED: "Sharable URL copied!", EXTRA_DOWNLOAD: "Download as file", diff --git a/src/lib/action-autocomplete.ts b/src/lib/action-autocomplete.ts deleted file mode 100644 index fbfb64e9..00000000 --- a/src/lib/action-autocomplete.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type {Action} from "svelte/action" -import Index from "flexsearch" -import {KEYMAP_CODES} from "$lib/serial/keymap-codes" -import tippy from "tippy.js" -import ActionAutocomplete from "$lib/components/ActionAutocomplete.svelte" -import {browser} from "$app/environment" - -const index = browser ? new Index({tokenize: "full"}) : undefined -for (const action of Object.values(KEYMAP_CODES)) { - index?.add( - action.code, - `${action.title || ""} ${action.variant || ""} ${action.category} ${action.id || ""} ${ - action.description || "" - }`, - ) -} -const exact = Object.fromEntries( - Object.values(KEYMAP_CODES) - .filter(it => !!it.id) - .map(it => [it.id, it] as const), -) - -export const actionAutocomplete: Action = node => { - if (!browser) return - - let completionComponent: ActionAutocomplete - const completionDialog = tippy(node, { - interactive: true, - placement: "bottom-start", - hideOnClick: false, - theme: "surface-variant search-completion", - arrow: false, - trigger: "focus", - offset: [0, 0], - onCreate(instance) { - const target = instance.popper.querySelector(".tippy-content")! - completionComponent = new ActionAutocomplete({target, props: {width: node.clientWidth}}) - }, - onDestroy() { - completionComponent.$destroy() - }, - }) - - function input(event: Event) { - completionComponent.$set({ - results: index!.search(node.value), - exact: exact[node.value], - code: Number(node.value), - }) - } - - node.addEventListener("input", input) - - return { - destroy() { - node.removeEventListener("input", input) - }, - } -} diff --git a/src/lib/chords/coverage.ts b/src/lib/chords/coverage.ts deleted file mode 100644 index 85be4f2a..00000000 --- a/src/lib/chords/coverage.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type {Chord} from "$lib/serial/chord" -import {KEYMAP_CODES} from "$lib/serial/keymap-codes" - -interface Language { - name: string - noLazyMode?: boolean - orderedByFrequency?: boolean - words: string[] -} - -export async function calculateChordCoverage(chords: Chord[]) { - const language: Language = await fetch("/languages/english.json").then(it => it.json()) - - const words = new Set(language.words) - for (const chord of chords) { - words.delete(chord.phrase.map(it => KEYMAP_CODES[it].id!).join("")) - } - - return { - coverage: words.size / language.words.length, - missing: [...words.values()], - } -} diff --git a/src/lib/components/ActionAutocomplete.svelte b/src/lib/components/ActionAutocomplete.svelte deleted file mode 100644 index b0b2705d..00000000 --- a/src/lib/components/ActionAutocomplete.svelte +++ /dev/null @@ -1,63 +0,0 @@ - - -
- {#if exact !== undefined} -
- Exact match - -
- {/if} - {#if !exact && code} - {#if code >= 2 ** 5 && code < 2 ** 13} - - {:else} -
Action code is out of range
- {/if} - {/if} - {#each results as id (id)} - - {/each} -
- - diff --git a/src/lib/components/ActionListItem.svelte b/src/lib/components/ActionListItem.svelte index 096d07f0..a3ae7949 100644 --- a/src/lib/components/ActionListItem.svelte +++ b/src/lib/components/ActionListItem.svelte @@ -7,7 +7,7 @@ $: key = (typeof id === "number" ? KEYMAP_CODES[id] ?? id : id) as number | KeyInfo - - {/if} - - {#each results as id} - {@const key = KEYMAP_CODES[id]} - - {/each} + dispatch("close")}> +
+
+ { + if (event.key === "Enter") { + select(exact) + } + }} + placeholder={$LL.actionSearch.PLACEHOLDER()} + /> + + +
+ +
    + {#if exact !== undefined} +
  • + Exact match shift+keyboard_return + select(exact)} /> +
    • + {/if} + {#if !exact && code} + {#if code >= 2 ** 5 && code < 2 ** 13} +
    • + {:else} +
  • Action code is out of range
    • + {/if} + {/if} + {#each results as id (id)} +
  • select(id)} />
    • + {/each} +
- + diff --git a/src/lib/components/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte index 145aa573..97cede05 100644 --- a/src/lib/components/layout/Layout.svelte +++ b/src/lib/components/layout/Layout.svelte @@ -13,11 +13,6 @@
- -
{#each layers as [title, icon, value]}
diff --git a/src/lib/components/layout/RingInput.svelte b/src/lib/components/layout/RingInput.svelte index 5e14d819..37a7534c 100644 --- a/src/lib/components/layout/RingInput.svelte +++ b/src/lib/components/layout/RingInput.svelte @@ -1,5 +1,6 @@ -
+
{#each [keys.n, keys.e, keys.s, keys.w, keys.d] as id, quadrant} - {@const actions = getActions(id, $layout)} + {@const actions = getActions(id, $layout, $changes)} + +
+ +{#if $changes.length !== 0} + +{/if} + + diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte index 842dda13..c893fed6 100644 --- a/src/routes/Footer.svelte +++ b/src/routes/Footer.svelte @@ -20,6 +20,7 @@ position: absolute; bottom: 0; left: 0; + opacity: 0.4; } ul { diff --git a/src/routes/Navigation.svelte b/src/routes/Navigation.svelte index 3a3d0a86..489ed7ff 100644 --- a/src/routes/Navigation.svelte +++ b/src/routes/Navigation.svelte @@ -1,6 +1,5 @@