mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-07-03 02:58:55 +00:00
feat: cv2
This commit is contained in:
@@ -13,14 +13,7 @@
|
||||
|
||||
let isNavigating = $state(false);
|
||||
|
||||
const routeOrder = [
|
||||
"/config",
|
||||
"/learn",
|
||||
"/docs",
|
||||
"/editor",
|
||||
"/chat",
|
||||
"/plugin",
|
||||
];
|
||||
const routeOrder = ["/config", "/docs", "/editor", "/chat", "/plugin"];
|
||||
|
||||
function routeIndex(route: string | undefined): number {
|
||||
return routeOrder.findIndex((it) => route?.startsWith(it));
|
||||
|
||||
@@ -6,18 +6,15 @@
|
||||
layout,
|
||||
overlay,
|
||||
settings,
|
||||
duplicateChords,
|
||||
} from "$lib/undo-redo";
|
||||
import type { Change, ChordChange } from "$lib/undo-redo";
|
||||
import type { Change } from "$lib/undo-redo";
|
||||
import { fly } from "svelte/transition";
|
||||
import { actionTooltip } from "$lib/title";
|
||||
import {
|
||||
deviceChords,
|
||||
deviceLayout,
|
||||
deviceSettings,
|
||||
serialLog,
|
||||
serialPort,
|
||||
sync,
|
||||
syncProgress,
|
||||
syncStatus,
|
||||
waitForDevice,
|
||||
@@ -216,7 +213,6 @@
|
||||
}
|
||||
|
||||
async function save() {
|
||||
let needsSync = false;
|
||||
try {
|
||||
const port = $serialPort;
|
||||
if (!port) {
|
||||
@@ -237,10 +233,8 @@
|
||||
(acc, profile) => acc + (profile?.size ?? 0),
|
||||
0,
|
||||
);
|
||||
const chordChanges = $overlay.chords.size;
|
||||
needsSync = chordChanges > 0;
|
||||
const needsCommit = settingChanges > 0 || layoutChanges > 0;
|
||||
const progressMax = layoutChanges + settingChanges + chordChanges;
|
||||
const progressMax = layoutChanges + settingChanges;
|
||||
|
||||
let progressCurrent = 0;
|
||||
|
||||
@@ -265,11 +259,9 @@
|
||||
layoutSuccess = false;
|
||||
}
|
||||
}
|
||||
let chordsSuccess = await saveChords(updateProgress);
|
||||
|
||||
if (layoutSuccess && settingsSuccess && chordsSuccess) {
|
||||
if (layoutSuccess && settingsSuccess) {
|
||||
changes.set([]);
|
||||
needsSync = true;
|
||||
} else {
|
||||
throw new Error("Some changes could not be saved.");
|
||||
}
|
||||
@@ -284,10 +276,6 @@
|
||||
} finally {
|
||||
$syncStatus = "done";
|
||||
}
|
||||
|
||||
if (needsSync) {
|
||||
await sync();
|
||||
}
|
||||
}
|
||||
|
||||
let progressPopover: HTMLElement | undefined = $state();
|
||||
|
||||
@@ -1,468 +1,280 @@
|
||||
<script lang="ts">
|
||||
import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
|
||||
import FlexSearch, { type Index } from "flexsearch";
|
||||
import LL from "$i18n/i18n-svelte";
|
||||
import { actionTooltip } from "$lib/title";
|
||||
import { onDestroy, onMount, setContext, tick } from "svelte";
|
||||
import { changes, ChangeType, chords } from "$lib/undo-redo";
|
||||
import type { ChordChange, ChordInfo } from "$lib/undo-redo";
|
||||
import { derived, writable } from "svelte/store";
|
||||
import ChordEdit from "./ChordEdit.svelte";
|
||||
import { crossfade, fly } from "svelte/transition";
|
||||
import ChordActionEdit from "./ChordActionEdit.svelte";
|
||||
import { browser } from "$app/environment";
|
||||
import { expoOut } from "svelte/easing";
|
||||
import { osLayout } from "$lib/os-layout";
|
||||
import randomTips from "$lib/assets/random-tips/en.json";
|
||||
import { deviceMeta } from "$lib/serial/connection";
|
||||
import { restoreFromFile } from "$lib/backup/backup";
|
||||
import { EditorView } from "codemirror";
|
||||
import "$lib/chord-editor/chords.grammar";
|
||||
import { persistentWritable } from "$lib/storage";
|
||||
import ActionList from "$lib/components/layout/ActionList.svelte";
|
||||
import {
|
||||
createConfig,
|
||||
loadPersistentState,
|
||||
} from "$lib/chord-editor/persistent-state-plugin";
|
||||
import { parsedChordsField } from "$lib/chord-editor/parsed-chords-plugin";
|
||||
import type { CharaChordFile } from "$lib/share/chara-file";
|
||||
import { EditorState } from "@codemirror/state";
|
||||
import { deviceChords } from "$lib/serial/connection";
|
||||
import { editorSyncChords } from "$lib/chord-editor/chord-sync-plugin";
|
||||
|
||||
const resultSize = 38;
|
||||
let results: HTMLElement;
|
||||
const pageSize = writable(0);
|
||||
let resizeObserver: ResizeObserver;
|
||||
let queryFilter: string | undefined = $state(undefined);
|
||||
|
||||
let abortIndexing: (() => void) | undefined;
|
||||
let progress = $state(0);
|
||||
const rawCode = persistentWritable("chord-editor-raw-code", false);
|
||||
const showEdits = persistentWritable("chord-editor-show-edits", true);
|
||||
const denseSpacing = persistentWritable("chord-editor-spacing", false);
|
||||
|
||||
onMount(() => {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
pageSize.set(Math.floor(results.clientHeight / resultSize));
|
||||
});
|
||||
pageSize.set(Math.floor(results.clientHeight / resultSize));
|
||||
resizeObserver.observe(results);
|
||||
});
|
||||
let editor: HTMLDivElement | undefined = $state(undefined);
|
||||
let view: EditorView | undefined = $state(undefined);
|
||||
|
||||
onDestroy(() => {
|
||||
resizeObserver?.disconnect();
|
||||
});
|
||||
|
||||
let index = new FlexSearch.Index();
|
||||
let searchIndex = writable<Index | undefined>(undefined);
|
||||
$effect(() => {
|
||||
abortIndexing?.();
|
||||
progress = 0;
|
||||
buildIndex($chords, $osLayout, $KEYMAP_CODES).then(searchIndex.set);
|
||||
});
|
||||
|
||||
function encodeChord(
|
||||
chord: ChordInfo,
|
||||
osLayout: Map<string, string>,
|
||||
codes: Map<number, KeyInfo>,
|
||||
onlyPhrase: boolean = false,
|
||||
) {
|
||||
const plainPhrase: string[] = [""];
|
||||
const tags = new Set<string>();
|
||||
const extraActions = new Set<string>();
|
||||
const extraCodes = new Set<string>();
|
||||
|
||||
for (const actionCode of chord.phrase ?? []) {
|
||||
const action = codes.get(actionCode);
|
||||
if (!action) {
|
||||
extraCodes.add(`0x${actionCode.toString(16)}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const osCode = action.keyCode && osLayout.get(action.keyCode);
|
||||
const token = osCode?.length === 1 ? osCode : action.display || action.id;
|
||||
if (!token) {
|
||||
extraCodes.add(`0x${action.code.toString(16)}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (
|
||||
(token === "SPACE" || /^\s$/.test(token)) &&
|
||||
plainPhrase.at(-1) !== ""
|
||||
) {
|
||||
plainPhrase.push("");
|
||||
} else if (token.length === 1) {
|
||||
plainPhrase[plainPhrase.length - 1] =
|
||||
plainPhrase[plainPhrase.length - 1] + token;
|
||||
} else {
|
||||
extraActions.add(token);
|
||||
}
|
||||
}
|
||||
|
||||
if (chord.phrase?.[0] === 298) {
|
||||
tags.add("suffix");
|
||||
}
|
||||
if (
|
||||
["ARROW_LT", "ARROW_RT", "ARROW_UP", "ARROW_DN"].some((it) =>
|
||||
extraActions.has(it),
|
||||
)
|
||||
) {
|
||||
tags.add("cursor warp");
|
||||
}
|
||||
if (
|
||||
["CTRL", "ALT", "GUI", "ENTER", "TAB"].some((it) => extraActions.has(it))
|
||||
) {
|
||||
tags.add("macro");
|
||||
}
|
||||
if (chord.actions[0] !== 0) {
|
||||
tags.add("compound");
|
||||
}
|
||||
|
||||
const input = chord.actions
|
||||
.slice(chord.actions.lastIndexOf(0) + 1)
|
||||
.map((it) => {
|
||||
const info = codes.get(it);
|
||||
if (!info) return `0x${it.toString(16)}`;
|
||||
const osCode = info.keyCode && osLayout.get(info.keyCode);
|
||||
const result = osCode?.length === 1 ? osCode : info.id;
|
||||
return result ?? `0x${it.toString(16)}`;
|
||||
});
|
||||
|
||||
if (onlyPhrase) {
|
||||
return plainPhrase.join(" ");
|
||||
}
|
||||
|
||||
return [
|
||||
...plainPhrase,
|
||||
`+${input.join("+")}`,
|
||||
...tags,
|
||||
...extraActions,
|
||||
...extraCodes,
|
||||
].join(" ");
|
||||
}
|
||||
|
||||
async function buildIndex(
|
||||
chords: ChordInfo[],
|
||||
osLayout: Map<string, string>,
|
||||
codes: Map<number, KeyInfo>,
|
||||
): Promise<Index> {
|
||||
if (chords.length === 0 || !browser) return index;
|
||||
|
||||
index = new FlexSearch.Index({
|
||||
tokenize: "full",
|
||||
encode(phrase: string) {
|
||||
return phrase.split(/\s+/).flatMap((it) => {
|
||||
if (/^[A-Z_]+$/.test(it)) {
|
||||
return it;
|
||||
}
|
||||
if (it.startsWith("+")) {
|
||||
return it
|
||||
.slice(1)
|
||||
.split("+")
|
||||
.map((it) => `+${it}`);
|
||||
}
|
||||
return it.toLowerCase();
|
||||
});
|
||||
if (!editor) return;
|
||||
const viewPromise = loadPersistentState({
|
||||
rawCode: $rawCode,
|
||||
storeName: "chord-editor-state-storage",
|
||||
autocomplete(query) {
|
||||
queryFilter = query;
|
||||
},
|
||||
});
|
||||
|
||||
let abort = false;
|
||||
abortIndexing = () => {
|
||||
abort = true;
|
||||
};
|
||||
|
||||
const batchSize = 200;
|
||||
const batches = Math.ceil(chords.length / batchSize);
|
||||
|
||||
for (let b = 0; b < batches; b++) {
|
||||
if (abort) return index;
|
||||
|
||||
const start = b * batchSize;
|
||||
const end = Math.min((b + 1) * batchSize, chords.length);
|
||||
const batch = chords.slice(start, end);
|
||||
|
||||
const promises = batch.map((chord, i) => {
|
||||
const chordIndex = start + i;
|
||||
progress = chordIndex + 1;
|
||||
|
||||
if ("phrase" in chord) {
|
||||
const encodedChord = encodeChord(chord, osLayout, codes);
|
||||
return index.addAsync(chordIndex, encodedChord);
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
|
||||
await Promise.all(promises);
|
||||
}
|
||||
|
||||
return index;
|
||||
}
|
||||
|
||||
const searchFilter = writable<number[] | undefined>(undefined);
|
||||
let currentSearchQuery = $state("");
|
||||
|
||||
async function search(index: Index, event: Event) {
|
||||
const query = (event.target as HTMLInputElement).value;
|
||||
currentSearchQuery = query;
|
||||
searchFilter.set(
|
||||
query && searchIndex
|
||||
? ((await index.searchAsync(query)) as number[])
|
||||
: undefined,
|
||||
}).then(
|
||||
(state) =>
|
||||
new EditorView({
|
||||
parent: editor,
|
||||
state,
|
||||
}),
|
||||
);
|
||||
page = 0;
|
||||
}
|
||||
viewPromise.then((it) => (view = it));
|
||||
return () => viewPromise.then((it) => it.destroy());
|
||||
});
|
||||
|
||||
// Re-run search when chords change to fix stale indices
|
||||
$effect(() => {
|
||||
if (currentSearchQuery && $searchIndex) {
|
||||
search($searchIndex, { target: { value: currentSearchQuery } } as any);
|
||||
console.log("Syncing chords to editor");
|
||||
if (view) {
|
||||
editorSyncChords(
|
||||
view,
|
||||
$deviceChords.map((chord) => [chord.actions, chord.phrase] as const),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
function insertChord(actions: number[]) {
|
||||
const id = JSON.stringify(actions);
|
||||
if ($chords.some((it) => JSON.stringify(it.actions) === id)) {
|
||||
alert($LL.configure.chords.DUPLICATE());
|
||||
return;
|
||||
}
|
||||
changes.update((changes) => {
|
||||
changes.push([
|
||||
{
|
||||
type: ChangeType.Chord,
|
||||
id: actions,
|
||||
actions,
|
||||
phrase: [],
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
}
|
||||
|
||||
function downloadVocabulary() {
|
||||
const vocabulary = new Set(
|
||||
$chords.map((it) =>
|
||||
"phrase" in it
|
||||
? encodeChord(it, $osLayout, $KEYMAP_CODES, true).trim()
|
||||
: "",
|
||||
function regenerate() {
|
||||
if (!view) return;
|
||||
view.setState(
|
||||
EditorState.create(
|
||||
createConfig({
|
||||
rawCode: $rawCode,
|
||||
storeName: "chord-editor-state-storage",
|
||||
autocomplete(query) {
|
||||
queryFilter = query;
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
vocabulary.delete("");
|
||||
const blob = new Blob([Array.from(vocabulary).join("|")], {
|
||||
type: "text/plain",
|
||||
editorSyncChords(
|
||||
view,
|
||||
$deviceChords.map((chord) => [chord.actions, chord.phrase] as const),
|
||||
);
|
||||
}
|
||||
|
||||
function downloadBackup() {
|
||||
if (!view) return;
|
||||
const backup: CharaChordFile = {
|
||||
charaVersion: 1,
|
||||
type: "chords",
|
||||
chords: view.state
|
||||
.field(parsedChordsField)
|
||||
.chords.map((chord) => [
|
||||
chord.input?.value ?? [],
|
||||
chord.phrase?.value ?? [],
|
||||
]),
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(backup)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "vocabulary.txt";
|
||||
a.download = "chord-backup.json";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function clearChords() {
|
||||
changes.update((changes) => {
|
||||
changes.push(
|
||||
$chords.map<ChordChange>((it) => ({
|
||||
type: ChangeType.Chord,
|
||||
id: it.id,
|
||||
actions: it.actions,
|
||||
phrase: it.phrase,
|
||||
deleted: true,
|
||||
})),
|
||||
);
|
||||
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 + 1) / pageSize) - 1,
|
||||
);
|
||||
|
||||
setContext("cursor-crossfade", crossfade({}));
|
||||
|
||||
let page = $state(0);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Chord Manager - CharaChorder Device Manager</title>
|
||||
<meta name="description" content="Manage your chords" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="search"
|
||||
placeholder={$LL.configure.chords.search.PLACEHOLDER(progress)}
|
||||
value={currentSearchQuery}
|
||||
oninput={(event) => $searchIndex && search($searchIndex, event)}
|
||||
class:loading={progress !== $chords.length}
|
||||
/>
|
||||
<div class="paginator">
|
||||
{#if $lastPage !== -1}
|
||||
{page + 1} / {$lastPage + 1}
|
||||
{:else}
|
||||
- / -
|
||||
{/if}
|
||||
<div class="vertical">
|
||||
<div style:display="flex">
|
||||
<label><input type="checkbox" bind:checked={$rawCode} />Edit as code</label>
|
||||
<!--<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>-->
|
||||
<label
|
||||
><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
|
||||
>
|
||||
<button onclick={regenerate}>Reset</button>
|
||||
<!--<button onclick={largeFile}>Create Huge File</button>-->
|
||||
<button onclick={downloadBackup}>Download Backup</button>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div
|
||||
class="editor"
|
||||
class:hide-edits={!$showEdits}
|
||||
class:raw={$rawCode}
|
||||
class:dense-spacing={$denseSpacing}
|
||||
bind:this={editor}
|
||||
></div>
|
||||
<ActionList {queryFilter} ignoreIcon={$rawCode} />
|
||||
</div>
|
||||
<button
|
||||
class="icon"
|
||||
onclick={() => (page = Math.max(page - 1, 0))}
|
||||
{@attach actionTooltip("", "ctrl+left")}>navigate_before</button
|
||||
>
|
||||
<button
|
||||
class="icon"
|
||||
onclick={() => (page = Math.min(page + 1, $lastPage))}
|
||||
{@attach actionTooltip("", "ctrl+right")}>navigate_next</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<section bind:this={results}>
|
||||
<!-- fixes some unresponsiveness -->
|
||||
{#await tick() then}
|
||||
<div class="results">
|
||||
<table transition:fly={{ y: 48, easing: expoOut }}>
|
||||
{#if $lastPage !== -1}
|
||||
<tbody>
|
||||
{#if page === 0}
|
||||
<tr
|
||||
><th class="new-chord"
|
||||
><ChordActionEdit
|
||||
onsubmit={(action) => insertChord(action)}
|
||||
/></th
|
||||
><td></td><td></td></tr
|
||||
>
|
||||
{/if}
|
||||
{#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord]}
|
||||
{#if chord}
|
||||
<ChordEdit {chord} onduplicate={() => (page = 0)} />
|
||||
{/if}
|
||||
{/each}</tbody
|
||||
>
|
||||
{:else}
|
||||
<caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<textarea
|
||||
placeholder={$LL.configure.chords.TRY_TYPING() +
|
||||
"\n\nDid you know? " +
|
||||
randomTips[Math.floor(randomTips.length * Math.random())]}
|
||||
></textarea>
|
||||
<button onclick={clearChords}
|
||||
><span class="icon">delete_sweep</span>
|
||||
Clear Chords</button
|
||||
>
|
||||
<div>
|
||||
{#each Object.entries($deviceMeta?.factoryDefaults?.chords ?? {}) as [title, library]}
|
||||
<button onclick={() => restoreFromFile(library)}
|
||||
><span class="icon">library_add</span>{title}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
<button onclick={downloadVocabulary}
|
||||
><span class="icon">download</span>
|
||||
{$LL.configure.chords.VOCABULARY()}</button
|
||||
>
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
.search-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 8ch;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> button {
|
||||
padding-inline-start: 0;
|
||||
.split {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
width: calc(min(100%, 1400px));
|
||||
min-height: 0;
|
||||
|
||||
> :global(*) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
transition: outline-color 250ms ease;
|
||||
margin: 2px;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -1px;
|
||||
border: 1px dashed var(--md-sys-color-outline);
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
padding: 8px;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
}
|
||||
.editor :global(.cm-deletedChunk) {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
transition: all 250ms ease;
|
||||
margin-block-start: 16px;
|
||||
border: 0 solid var(--md-sys-color-surface-variant);
|
||||
border-bottom-width: 1px;
|
||||
|
||||
background: none;
|
||||
padding-inline: 16px;
|
||||
padding-block: 8px;
|
||||
width: 512px;
|
||||
color: inherit;
|
||||
|
||||
.editor {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
border-style: dashed;
|
||||
border-color: var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
opacity: 0.8;
|
||||
:global(.cm-tooltip) {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
:global(ul) {
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
:global(li[role="option"][aria-selected="true"]) {
|
||||
border-radius: 4px;
|
||||
background-color: var(--md-sys-color-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
|
||||
:global(completion-section) {
|
||||
margin-block: 8px;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:not(.raw) :global(.cm-line) {
|
||||
vertical-align: middle;
|
||||
columns: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.dense-spacing :global(.cm-line) {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
:global(.cm-line) {
|
||||
padding-block: 8px;
|
||||
width: 100%;
|
||||
text-wrap: wrap;
|
||||
text-wrap-style: stable;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
||||
> :global(*) {
|
||||
break-before: avoid;
|
||||
break-after: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.cm-panels) {
|
||||
border-top: none;
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
:global(.chord-ignored) {
|
||||
opacity: 0.5;
|
||||
background-image: none;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
:global(.chord-child) {
|
||||
background-image: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
:global(.chord-invalid) {
|
||||
color: var(--md-sys-color-error);
|
||||
text-decoration-color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
:global(.change-button) {
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:global(.cm-deletedLineGutter) {
|
||||
background-color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
:global(.cm-changedLineGutter) {
|
||||
background-color: var(--md-sys-color-success);
|
||||
}
|
||||
|
||||
:global(.cm-changedText) {
|
||||
background: linear-gradient(
|
||||
var(--md-sys-color-primary),
|
||||
var(--md-sys-color-primary)
|
||||
)
|
||||
bottom / 100% 1px no-repeat;
|
||||
}
|
||||
|
||||
:global(.cm-gutters) {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.raw :global(.cm-gutters) {
|
||||
border-color: var(--md-sys-color-surface-variant);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
:global(.cm-editor) {
|
||||
outline: none;
|
||||
border-style: solid;
|
||||
border-color: var(--md-sys-color-primary);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.4;
|
||||
:global(.cm-changedLine) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 5%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
position: relative;
|
||||
:global(.cm-activeLine),
|
||||
:global(.cm-line:hover) {
|
||||
--auto-space-show: 1;
|
||||
}
|
||||
|
||||
border-radius: 16px;
|
||||
padding-inline: 8px;
|
||||
:global(.cm-activeLine) {
|
||||
border-bottom: 1px solid var(--md-sys-color-surface-variant);
|
||||
|
||||
height: 100%;
|
||||
&:not(.cm-changedLine) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results {
|
||||
min-width: min(90vw, 20cm);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
transition: all 1s ease;
|
||||
height: fit-content;
|
||||
overflow-y: hidden;
|
||||
:global(::selection),
|
||||
:global(.cm-selectionBackground) {
|
||||
background-color: var(--md-sys-color-surface-variant) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,240 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { ChordInfo } from "$lib/undo-redo";
|
||||
import { SvelteSet } from "svelte/reactivity";
|
||||
import { changes, chordHashes, ChangeType } from "$lib/undo-redo";
|
||||
import LL from "$i18n/i18n-svelte";
|
||||
import ActionString from "$lib/components/ActionString.svelte";
|
||||
import { selectAction } from "./action-selector";
|
||||
import { serialPort } from "$lib/serial/connection";
|
||||
import { get } from "svelte/store";
|
||||
import { inputToAction } from "./input-converter";
|
||||
import { hashChord, type Chord } from "$lib/serial/chord";
|
||||
|
||||
let {
|
||||
chord = undefined,
|
||||
onsubmit,
|
||||
interactive = true,
|
||||
}: {
|
||||
chord?: ChordInfo;
|
||||
interactive?: boolean;
|
||||
onsubmit: (actions: number[]) => void;
|
||||
} = $props();
|
||||
|
||||
let pressedKeys = new SvelteSet<number>();
|
||||
let editing = $state(false);
|
||||
|
||||
function compare(a: number, b: number) {
|
||||
return a - b;
|
||||
}
|
||||
|
||||
function makeChordInput(...actions: number[]) {
|
||||
const compound = compoundInputs[0]
|
||||
? hashChord(compoundInputs[0].actions)
|
||||
: 0;
|
||||
return [
|
||||
...Array.from(
|
||||
{
|
||||
length: 12 - actions.length,
|
||||
},
|
||||
(_, i) => (compound >> (i * 10)) & 0x3ff,
|
||||
),
|
||||
...actions.toSorted(compare),
|
||||
];
|
||||
}
|
||||
|
||||
function edit() {
|
||||
pressedKeys.clear();
|
||||
editing = true;
|
||||
}
|
||||
|
||||
function keydown(event: KeyboardEvent) {
|
||||
// This is obviously a tradeoff
|
||||
if (event.key === "Tab" || event.key === "Escape") return;
|
||||
if (!editing) return;
|
||||
event.preventDefault();
|
||||
const input = inputToAction(event, get(serialPort)?.device === "X");
|
||||
if (input == undefined) {
|
||||
alert("Invalid key");
|
||||
return;
|
||||
}
|
||||
pressedKeys.add(input);
|
||||
}
|
||||
|
||||
function keyup() {
|
||||
if (!editing) return;
|
||||
editing = false;
|
||||
if (pressedKeys.size < 1) return;
|
||||
if (!chord) return onsubmit(makeChordInput(...pressedKeys));
|
||||
changes.update((changes) => {
|
||||
changes.push([
|
||||
{
|
||||
type: ChangeType.Chord,
|
||||
id: chord!.id,
|
||||
actions: makeChordInput(...pressedKeys),
|
||||
phrase: chord!.phrase,
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function addSpecial(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
selectAction(event, (action) => {
|
||||
if (!chord) return onsubmit([action]);
|
||||
changes.update((changes) => {
|
||||
changes.push([
|
||||
{
|
||||
type: ChangeType.Chord,
|
||||
id: chord!.id,
|
||||
actions: makeChordInput(...chordActions!, action),
|
||||
phrase: chord!.phrase,
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function* resolveCompound(chord?: ChordInfo) {
|
||||
if (!chord) return;
|
||||
let current: Chord = chord;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (current.actions[3] !== 0) return;
|
||||
const compound = current.actions
|
||||
.slice(0, 3)
|
||||
.reduce((a, b, i) => a | (b << (i * 10)));
|
||||
if (compound === 0) return;
|
||||
const next = $chordHashes.get(compound);
|
||||
if (!next) {
|
||||
return null;
|
||||
}
|
||||
|
||||
current = next;
|
||||
yield next;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let chordActions = $derived(
|
||||
chord?.actions.slice(chord.actions.lastIndexOf(0) + 1).toSorted(compare),
|
||||
);
|
||||
let compoundInputs = $derived([...resolveCompound(chord)].reverse());
|
||||
</script>
|
||||
|
||||
<button
|
||||
class:deleted={chord && chord.deleted}
|
||||
class:edited={chord && chord.actionsChanged}
|
||||
class:invalid={chord &&
|
||||
chordActions &&
|
||||
(chordActions.length < 2 ||
|
||||
chordActions.some((it, i) => chordActions[i] !== it))}
|
||||
class="chord"
|
||||
onclick={edit}
|
||||
onkeydown={keydown}
|
||||
onkeyup={keyup}
|
||||
onblur={keyup}
|
||||
disabled={!interactive}
|
||||
>
|
||||
{#if editing && pressedKeys.size === 0}
|
||||
<span>{$LL.configure.chords.HOLD_KEYS()}</span>
|
||||
{:else if !editing && !chord}
|
||||
<span>{$LL.configure.chords.NEW_CHORD()}</span>
|
||||
{/if}
|
||||
{#if !editing}
|
||||
{#each compoundInputs as compound}
|
||||
<sub
|
||||
><ActionString
|
||||
display="keys"
|
||||
actions={compound.actions.slice(compound.actions.lastIndexOf(0) + 1)}
|
||||
></ActionString>
|
||||
</sub>
|
||||
<span>→</span>
|
||||
{/each}
|
||||
{/if}
|
||||
<ActionString
|
||||
display="keys"
|
||||
actions={editing ? [...pressedKeys].sort(compare) : (chordActions ?? [])}
|
||||
/>
|
||||
<sup>•</sup>
|
||||
<div role="button" class="icon add" onclick={addSpecial}>add_circle</div>
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
span {
|
||||
opacity: 0.5;
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
translate: 0 -60%;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
|
||||
.add {
|
||||
opacity: 0;
|
||||
height: 20px;
|
||||
font-size: 18px;
|
||||
--icon-fill: 1;
|
||||
}
|
||||
|
||||
.chord:hover .add {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chord {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
gap: 4px;
|
||||
margin-inline: 4px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chord::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform-origin: center left;
|
||||
translate: -20px 0;
|
||||
scale: 0 1;
|
||||
|
||||
transition:
|
||||
scale 250ms ease,
|
||||
color 250ms ease;
|
||||
|
||||
background: currentcolor;
|
||||
|
||||
width: calc(100% - 60px);
|
||||
height: 1px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.edited {
|
||||
color: var(--md-sys-color-primary);
|
||||
|
||||
& > sup {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
.deleted {
|
||||
color: var(--md-sys-color-error);
|
||||
|
||||
&::after {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,172 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { changes, ChangeType, chords } 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";
|
||||
import { charaFileToUriComponent } from "$lib/share/share-url";
|
||||
import SharePopup from "../SharePopup.svelte";
|
||||
import tippy from "tippy.js";
|
||||
import { mount, unmount } from "svelte";
|
||||
|
||||
let { chord, onduplicate }: { chord: ChordInfo; onduplicate: () => void } =
|
||||
$props();
|
||||
|
||||
function remove() {
|
||||
changes.update((changes) => {
|
||||
changes.push([
|
||||
{
|
||||
type: ChangeType.Chord,
|
||||
id: chord.id,
|
||||
actions: chord.actions,
|
||||
phrase: chord.phrase,
|
||||
deleted: true,
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
}
|
||||
|
||||
function isSameChord(a: Chord, b: Chord) {
|
||||
return (
|
||||
a.actions.length === b.actions.length &&
|
||||
a.actions.every((it, i) => it === b.actions[i])
|
||||
);
|
||||
}
|
||||
|
||||
function restore() {
|
||||
changes.update((changes) =>
|
||||
changes
|
||||
.map((it) =>
|
||||
it.filter(
|
||||
(it) => !(it.type === ChangeType.Chord && isSameChord(it, chord)),
|
||||
),
|
||||
)
|
||||
.filter((it) => it.length > 0),
|
||||
);
|
||||
}
|
||||
|
||||
function duplicate() {
|
||||
const id = [...chord.id];
|
||||
id.splice(id.indexOf(0), 1);
|
||||
id.push(0);
|
||||
while ($chords.some((it) => JSON.stringify(it.id) === JSON.stringify(id))) {
|
||||
id[id.length - 1] = id[id.length - 1]! + 1;
|
||||
}
|
||||
|
||||
changes.update((changes) => {
|
||||
changes.push([
|
||||
{
|
||||
type: ChangeType.Chord,
|
||||
id,
|
||||
actions: [...chord.actions],
|
||||
phrase: [...chord.phrase],
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
|
||||
onduplicate();
|
||||
}
|
||||
|
||||
async function share(event: Event) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set(
|
||||
"import",
|
||||
await charaFileToUriComponent({
|
||||
charaVersion: 1,
|
||||
type: "chords",
|
||||
chords: [[chord.actions, chord.phrase]],
|
||||
}),
|
||||
);
|
||||
await navigator.clipboard.writeText(url.toString());
|
||||
let shareComponent = {};
|
||||
tippy(event.target as HTMLElement, {
|
||||
onCreate(instance) {
|
||||
const target = instance.popper.querySelector(".tippy-content")!;
|
||||
shareComponent = mount(SharePopup, { target });
|
||||
},
|
||||
onHidden(instance) {
|
||||
instance.destroy();
|
||||
},
|
||||
onDestroy(_instance) {
|
||||
unmount(shareComponent);
|
||||
},
|
||||
}).show();
|
||||
}
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<th>
|
||||
<ChordActionEdit {chord} onsubmit={() => {}} />
|
||||
</th>
|
||||
<td class="phrase-edit">
|
||||
<ChordPhraseEdit {chord} />
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-buttons">
|
||||
{#if !chord.deleted}
|
||||
<button transition:slide class="icon compact" onclick={remove}
|
||||
>delete</button
|
||||
>
|
||||
{:else}
|
||||
<button transition:slide class="icon compact" onclick={restore}
|
||||
>restore_from_trash</button
|
||||
>
|
||||
{/if}
|
||||
<button disabled={chord.deleted} class="icon compact" onclick={duplicate}
|
||||
>content_copy</button
|
||||
>
|
||||
<button
|
||||
class="icon compact"
|
||||
class:disabled={chord.isApplied}
|
||||
onclick={restore}>undo</button
|
||||
>
|
||||
<div class="separator"></div>
|
||||
<button class="icon compact" onclick={share}>share</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<style lang="scss">
|
||||
.separator {
|
||||
display: inline-flex;
|
||||
|
||||
opacity: 0.2;
|
||||
background: currentcolor;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: opacity 75ms ease;
|
||||
}
|
||||
|
||||
.phrase-edit {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-buttons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(100%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 75ms ease;
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
tr:hover .table-buttons {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,399 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { KEYMAP_CODES, KEYMAP_IDS } from "$lib/serial/keymap-codes";
|
||||
import { onMount, tick } from "svelte";
|
||||
import { changes, ChangeType } from "$lib/undo-redo";
|
||||
import type { ChordInfo } from "$lib/undo-redo";
|
||||
import { scale } from "svelte/transition";
|
||||
import { selectAction } from "./action-selector";
|
||||
import { inputToAction } from "./input-converter";
|
||||
import { deviceMeta, serialPort } from "$lib/serial/connection";
|
||||
import { get } from "svelte/store";
|
||||
import semverGte from "semver/functions/gte";
|
||||
import Action from "$lib/components/Action.svelte";
|
||||
import AutospaceSelector from "$lib/chord-editor/AutospaceSelector.svelte";
|
||||
|
||||
let { chord }: { chord: ChordInfo } = $props();
|
||||
|
||||
const JOIN_ACTION = 574;
|
||||
const NO_CONCATENATOR_ACTION = 256;
|
||||
|
||||
onMount(() => {
|
||||
if (chord.phrase.length === 0) {
|
||||
box?.focus();
|
||||
}
|
||||
});
|
||||
|
||||
function keypress(event: KeyboardEvent) {
|
||||
console.log(event);
|
||||
if (!event.shiftKey && event.key === "ArrowUp") {
|
||||
addSpecial(event);
|
||||
} else if (!event.shiftKey && event.key === "ArrowLeft") {
|
||||
moveCursor(cursorPosition - 1, true);
|
||||
} else if (!event.shiftKey && event.key === "ArrowRight") {
|
||||
moveCursor(cursorPosition + 1, true);
|
||||
} else if (event.key === " " && $KEYMAP_IDS.has("HYPERSPACE")) {
|
||||
insertAction(cursorPosition, $KEYMAP_IDS.get("HYPERSPACE")!.code);
|
||||
tick().then(() => moveCursor(cursorPosition + 1));
|
||||
} else if (event.key === "Backspace") {
|
||||
deleteAction(cursorPosition - 1, 1, true);
|
||||
moveCursor(cursorPosition - 1, true);
|
||||
} else if (event.key === "Delete") {
|
||||
deleteAction(cursorPosition, 1, true);
|
||||
} else {
|
||||
if (event.key === "Shift" || event.key === "Meta") return;
|
||||
const action = inputToAction(event, get(serialPort)?.device === "X");
|
||||
if (action !== undefined) {
|
||||
insertAction(cursorPosition, action);
|
||||
tick().then(() => moveCursor(cursorPosition + 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveCursor(to: number, user = false) {
|
||||
if (!box) return;
|
||||
cursorPosition = Math.max(
|
||||
user ? chord.phrase.findIndex((it, i, arr) => !isHidden(it, i, arr)) : 0,
|
||||
Math.min(
|
||||
to,
|
||||
user
|
||||
? chord.phrase.findLastIndex((it, i, arr) => !isHidden(it, i, arr)) +
|
||||
1 || chord.phrase.length
|
||||
: chord.phrase.length,
|
||||
),
|
||||
);
|
||||
const item = box.children.item(cursorPosition) as HTMLElement;
|
||||
cursorOffset = item.offsetLeft + item.offsetWidth;
|
||||
}
|
||||
|
||||
function deleteAction(at: number, count = 1, user = false) {
|
||||
if (user && isHidden(chord.phrase[at]!, at, chord.phrase)) return;
|
||||
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),
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
}
|
||||
|
||||
function insertAction(at: number, action: number) {
|
||||
changes.update((changes) => {
|
||||
changes.push([
|
||||
{
|
||||
type: ChangeType.Chord,
|
||||
id: chord.id,
|
||||
actions: chord.actions,
|
||||
phrase: chord.phrase.toSpliced(at, 0, action),
|
||||
},
|
||||
]);
|
||||
return changes;
|
||||
});
|
||||
}
|
||||
|
||||
function clickCursor(event: MouseEvent) {
|
||||
if (box === undefined || event.target === button) return;
|
||||
const distance = (event as unknown as { layerX: number }).layerX;
|
||||
|
||||
let i = 0;
|
||||
for (const child of box.children) {
|
||||
const { offsetLeft, offsetWidth } = child as HTMLElement;
|
||||
if (distance < offsetLeft + offsetWidth / 2) {
|
||||
moveCursor(i - 1, true);
|
||||
return;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
moveCursor(i - 1, true);
|
||||
}
|
||||
|
||||
function addSpecial(event: MouseEvent | KeyboardEvent) {
|
||||
selectAction(
|
||||
event,
|
||||
(action) => {
|
||||
insertAction(cursorPosition, action);
|
||||
tick().then(() => moveCursor(cursorPosition + 1));
|
||||
},
|
||||
() => box?.focus(),
|
||||
);
|
||||
}
|
||||
|
||||
function resolveAutospace(autospace: boolean) {
|
||||
if (autospace) {
|
||||
if (chord.phrase.at(-1) === JOIN_ACTION) {
|
||||
if (
|
||||
chord.phrase.every(
|
||||
(action, i, arr) =>
|
||||
$KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
|
||||
)
|
||||
) {
|
||||
deleteAction(chord.phrase.length - 1);
|
||||
moveCursor(cursorPosition, true);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (isPrintable) {
|
||||
return;
|
||||
} else if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
|
||||
deleteAction(chord.phrase.length - 1);
|
||||
moveCursor(cursorPosition, true);
|
||||
} else {
|
||||
insertAction(chord.phrase.length, JOIN_ACTION);
|
||||
moveCursor(cursorPosition, true);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (chord.phrase.at(-1) === JOIN_ACTION) {
|
||||
deleteAction(chord.phrase.length - 1);
|
||||
moveCursor(cursorPosition, true);
|
||||
} else {
|
||||
if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
|
||||
if (
|
||||
chord.phrase.every(
|
||||
(action, i, arr) =>
|
||||
$KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
} else {
|
||||
deleteAction(chord.phrase.length - 1);
|
||||
moveCursor(cursorPosition, true);
|
||||
}
|
||||
} else {
|
||||
insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
|
||||
moveCursor(cursorPosition, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let button: HTMLButtonElement | undefined = $state();
|
||||
let box: HTMLDivElement | undefined = $state();
|
||||
let cursorPosition = 0;
|
||||
let cursorOffset = $state(0);
|
||||
|
||||
let hasFocus = $state(false);
|
||||
|
||||
let isPrintable = $derived(
|
||||
chord.phrase.every(
|
||||
(action) => $KEYMAP_CODES.get(action)?.printable === true,
|
||||
),
|
||||
);
|
||||
let supportsAutospace = $derived(
|
||||
semverGte($deviceMeta?.version ?? "0.0.0", "2.1.0"),
|
||||
);
|
||||
let supportsAutospaceV2 = $derived(
|
||||
semverGte($deviceMeta?.version ?? "0.0.0", "3.0.0-gamma.5"),
|
||||
);
|
||||
let hasAutospace = $derived(
|
||||
supportsAutospaceV2
|
||||
? chord.phrase.at(-1) !== NO_CONCATENATOR_ACTION
|
||||
: isPrintable || chord.phrase.at(-1) === JOIN_ACTION,
|
||||
);
|
||||
|
||||
function isHidden(action: number, index: number, array: number[]) {
|
||||
return (
|
||||
(index === 0 && action === JOIN_ACTION) ||
|
||||
(index === array.length - 1 &&
|
||||
(action === JOIN_ACTION || action === NO_CONCATENATOR_ACTION))
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div
|
||||
role="textbox"
|
||||
class="wrapper"
|
||||
class:edited={!chord.deleted && chord.phraseChanged}
|
||||
onclick={() => {
|
||||
box?.focus();
|
||||
}}
|
||||
>
|
||||
{#if supportsAutospace}
|
||||
<AutospaceSelector
|
||||
variant="start"
|
||||
value={chord.phrase[0] === JOIN_ACTION}
|
||||
onchange={async (event) => {
|
||||
const autospace = hasAutospace;
|
||||
if ((event.target as HTMLInputElement).checked) {
|
||||
if (chord.phrase[0] === JOIN_ACTION) {
|
||||
deleteAction(0, 1);
|
||||
await tick();
|
||||
moveCursor(cursorPosition - 1, true);
|
||||
}
|
||||
} else {
|
||||
if (chord.phrase[0] !== JOIN_ACTION) {
|
||||
insertAction(0, JOIN_ACTION);
|
||||
moveCursor(cursorPosition + 1, true);
|
||||
}
|
||||
}
|
||||
if (!supportsAutospaceV2) {
|
||||
await tick();
|
||||
resolveAutospace(autospace);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<div
|
||||
onkeydown={keypress}
|
||||
onmousedown={clickCursor}
|
||||
role="textbox"
|
||||
tabindex="0"
|
||||
bind:this={box}
|
||||
onfocusin={() => (hasFocus = true)}
|
||||
onfocusout={(event) => {
|
||||
if (event.relatedTarget !== button) hasFocus = false;
|
||||
}}
|
||||
>
|
||||
{#if hasFocus}
|
||||
<div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
|
||||
<button class="icon" bind:this={button} onclick={addSpecial}>add</button
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<div></div>
|
||||
<!-- placeholder for cursor placement -->
|
||||
{/if}
|
||||
{#each chord.phrase as action, i}
|
||||
{#if isHidden(action, i, chord.phrase)}
|
||||
<span style:display="none"></span>
|
||||
{:else}
|
||||
<Action display="inline-keys" {action} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if supportsAutospace}
|
||||
<AutospaceSelector
|
||||
variant="end"
|
||||
value={!hasAutospace}
|
||||
onchange={async (event) => {
|
||||
if (supportsAutospaceV2) {
|
||||
if ((event.target as HTMLInputElement).checked) {
|
||||
if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
|
||||
deleteAction(chord.phrase.length - 1);
|
||||
await tick();
|
||||
moveCursor(cursorPosition, true);
|
||||
}
|
||||
} else {
|
||||
if (chord.phrase.at(-1) !== NO_CONCATENATOR_ACTION) {
|
||||
insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
|
||||
moveCursor(cursorPosition, true);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
resolveAutospace((event.target as HTMLInputElement).checked);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<sup>•</sup>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
sup {
|
||||
translate: 0 -40%;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
translate: 0 0;
|
||||
|
||||
transition: translate 50ms ease;
|
||||
|
||||
background: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 0;
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: 12px 12px 12px 0;
|
||||
|
||||
background: var(--md-sys-color-secondary-container);
|
||||
padding: 0;
|
||||
|
||||
height: 24px;
|
||||
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
}
|
||||
|
||||
.edited {
|
||||
color: var(--md-sys-color-primary);
|
||||
|
||||
sup {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
padding-block: 4px;
|
||||
|
||||
height: 1em;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition:
|
||||
opacity 150ms ease,
|
||||
scale 250ms ease;
|
||||
background: currentcolor;
|
||||
|
||||
width: calc(100% - 8px);
|
||||
height: 1px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
scale: 0 1;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--auto-space-show: 1;
|
||||
|
||||
&::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> :focus-within)::after {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[role="textbox"] {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
cursor: text;
|
||||
white-space: pre;
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
|
||||
import { mount, unmount, tick } from "svelte";
|
||||
|
||||
export function selectAction(
|
||||
event: MouseEvent | KeyboardEvent,
|
||||
select: (action: number) => void,
|
||||
dismissed?: () => void,
|
||||
) {
|
||||
const component = mount(ActionSelector, {
|
||||
target: document.body,
|
||||
props: {
|
||||
onclose: () => closed(),
|
||||
onselect: (action: number) => {
|
||||
select(action);
|
||||
closed();
|
||||
},
|
||||
},
|
||||
});
|
||||
const dialog = document.querySelector("dialog > div") as HTMLDivElement;
|
||||
const backdrop = document.querySelector("dialog") as HTMLDialogElement;
|
||||
const dialogRect = dialog.getBoundingClientRect();
|
||||
const groupRect = (event.target as HTMLElement).getBoundingClientRect();
|
||||
|
||||
const scale = 0.5;
|
||||
const dialogScale = `${
|
||||
1 - scale * (1 - groupRect.width / dialogRect.width)
|
||||
} ${1 - scale * (1 - groupRect.height / dialogRect.height)}`;
|
||||
const dialogTranslate = `${scale * (groupRect.x - dialogRect.x)}px ${
|
||||
scale * (groupRect.y - dialogRect.y)
|
||||
}px`;
|
||||
|
||||
const duration = 150;
|
||||
const options = { duration, easing: "ease" };
|
||||
const dialogAnimation = dialog.animate(
|
||||
[
|
||||
{ scale: dialogScale, translate: dialogTranslate },
|
||||
{ translate: "0 0", scale: "1" },
|
||||
],
|
||||
options,
|
||||
);
|
||||
const backdropAnimation = backdrop.animate(
|
||||
[{ opacity: 0 }, { opacity: 1 }],
|
||||
options,
|
||||
);
|
||||
|
||||
async function closed() {
|
||||
dialogAnimation.reverse();
|
||||
backdropAnimation.reverse();
|
||||
|
||||
await dialogAnimation.finished;
|
||||
|
||||
unmount(component);
|
||||
await tick();
|
||||
dismissed?.();
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { KEYMAP_IDS, KEYMAP_KEYCODES } from "$lib/serial/keymap-codes";
|
||||
import { get } from "svelte/store";
|
||||
|
||||
export function inputToAction(
|
||||
event: KeyboardEvent,
|
||||
useKeycodes?: boolean,
|
||||
): number | undefined {
|
||||
if (useKeycodes) {
|
||||
return get(KEYMAP_KEYCODES).get(event.code);
|
||||
} else {
|
||||
return (
|
||||
get(KEYMAP_IDS).get(event.key)?.code ??
|
||||
get(KEYMAP_KEYCODES).get(event.code)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { serializeActions } from "$lib/serial/chord";
|
||||
import { chords } from "$lib/undo-redo";
|
||||
import ChordEdit from "../ChordEdit.svelte";
|
||||
|
||||
export function hashChord(actions: number[]) {
|
||||
const chord = new Uint8Array(16);
|
||||
@@ -17,7 +15,8 @@
|
||||
}
|
||||
|
||||
const broken = $derived(
|
||||
$chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
|
||||
[],
|
||||
// $chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
|
||||
);
|
||||
</script>
|
||||
|
||||
@@ -35,7 +34,7 @@
|
||||
>, your library might have been corrupted.
|
||||
</p>
|
||||
{#each broken as chord}
|
||||
<ChordEdit {chord} onduplicate={() => {}} />
|
||||
<!--<ChordEdit {chord} onduplicate={() => {}} />-->
|
||||
{/each}
|
||||
{:else}
|
||||
<p>No problematic chords found</p>
|
||||
|
||||
Reference in New Issue
Block a user