mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-23 02:12:41 +00:00
feat: improvements
This commit is contained in:
402
src/routes/(app)/config/chords/+page.svelte
Normal file
402
src/routes/(app)/config/chords/+page.svelte
Normal file
@@ -0,0 +1,402 @@
|
||||
<script lang="ts">
|
||||
import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
|
||||
import FlexSearch from "flexsearch";
|
||||
import LL from "$i18n/i18n-svelte";
|
||||
import { action } from "$lib/title";
|
||||
import { onDestroy, onMount, setContext, tick } from "svelte";
|
||||
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, 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";
|
||||
|
||||
const resultSize = 38;
|
||||
let results: HTMLElement;
|
||||
const pageSize = writable(0);
|
||||
let resizeObserver: ResizeObserver;
|
||||
|
||||
let abortIndexing: (() => void) | undefined;
|
||||
let progress = 0;
|
||||
|
||||
onMount(() => {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
pageSize.set(Math.floor(results.clientHeight / resultSize));
|
||||
});
|
||||
pageSize.set(Math.floor(results.clientHeight / resultSize));
|
||||
resizeObserver.observe(results);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
resizeObserver?.disconnect();
|
||||
});
|
||||
|
||||
let index = new FlexSearch.Index();
|
||||
let searchIndex = writable<FlexSearch.Index | undefined>(undefined);
|
||||
$: {
|
||||
abortIndexing?.();
|
||||
progress = 0;
|
||||
buildIndex($chords, $osLayout).then(searchIndex.set);
|
||||
}
|
||||
|
||||
function encodeChord(chord: ChordInfo, osLayout: Map<string, string>) {
|
||||
const plainPhrase: string[] = [""];
|
||||
const extraActions: string[] = [];
|
||||
const extraCodes: string[] = [];
|
||||
|
||||
for (const actionCode of chord.phrase ?? []) {
|
||||
const action = KEYMAP_CODES.get(actionCode);
|
||||
if (!action) {
|
||||
extraCodes.push(`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.push(`0x${action.code.toString(16)}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^\s$/.test(token) && plainPhrase.at(-1) !== "") {
|
||||
plainPhrase.push("");
|
||||
} else if (token.length === 1) {
|
||||
plainPhrase[plainPhrase.length - 1] =
|
||||
plainPhrase[plainPhrase.length - 1] + token;
|
||||
} else {
|
||||
extraActions.push(token);
|
||||
}
|
||||
}
|
||||
|
||||
if (chord.phrase?.[0] === 298) {
|
||||
plainPhrase.push("suffix");
|
||||
}
|
||||
if (
|
||||
["ARROW_LT", "ARROW_RT", "ARROW_UP", "ARROW_DN"].some((it) =>
|
||||
extraActions.includes(it),
|
||||
)
|
||||
) {
|
||||
plainPhrase.push("cursor warp");
|
||||
}
|
||||
if (
|
||||
["CTRL", "ALT", "GUI", "ENTER", "TAB"].some((it) =>
|
||||
extraActions.includes(it),
|
||||
)
|
||||
) {
|
||||
plainPhrase.push("macro");
|
||||
}
|
||||
if (chord.actions[0] !== 0) {
|
||||
plainPhrase.push("compound");
|
||||
}
|
||||
|
||||
const input = chord.actions
|
||||
.slice(chord.actions.lastIndexOf(0) + 1)
|
||||
.map((it) => {
|
||||
const info = KEYMAP_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)}`;
|
||||
});
|
||||
|
||||
return [
|
||||
...plainPhrase,
|
||||
`+${input.join("+")}`,
|
||||
...new Set(extraActions),
|
||||
...new Set(extraCodes),
|
||||
].join(" ");
|
||||
}
|
||||
|
||||
async function buildIndex(
|
||||
chords: ChordInfo[],
|
||||
osLayout: Map<string, string>,
|
||||
): Promise<FlexSearch.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();
|
||||
});
|
||||
},
|
||||
});
|
||||
let abort = false;
|
||||
abortIndexing = () => {
|
||||
abort = true;
|
||||
};
|
||||
for (let i = 0; i < chords.length; i++) {
|
||||
if (abort) return index;
|
||||
|
||||
const chord = chords[i]!;
|
||||
progress = i;
|
||||
|
||||
if ("phrase" in chord) {
|
||||
console.log(encodeChord(chord, osLayout));
|
||||
await index.addAsync(i, encodeChord(chord, osLayout));
|
||||
}
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
const searchFilter = writable<number[] | undefined>(undefined);
|
||||
|
||||
async function search(index: FlexSearch.Index, event: Event) {
|
||||
const query = (event.target as HTMLInputElement).value;
|
||||
searchFilter.set(
|
||||
query && searchIndex
|
||||
? ((await index.searchAsync(query)) as number[])
|
||||
: undefined,
|
||||
);
|
||||
page = 0;
|
||||
}
|
||||
|
||||
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 ? plainPhrase(it.phrase, $osLayout).trim() : "",
|
||||
),
|
||||
);
|
||||
vocabulary.delete("");
|
||||
const blob = new Blob([Array.from(vocabulary).join("|")], {
|
||||
type: "text/plain",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "vocabulary.txt";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
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 = 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 + 1)}
|
||||
on:input={(event) => $searchIndex && search($searchIndex, event)}
|
||||
class:loading={progress !== $chords.length - 1}
|
||||
/>
|
||||
<div class="paginator">
|
||||
{#if $lastPage !== -1}
|
||||
{page + 1} / {$lastPage + 1}
|
||||
{:else}
|
||||
- / -
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="icon"
|
||||
on:click={() => (page = Math.max(page - 1, 0))}
|
||||
use:action={{ shortcut: "ctrl+left" }}>navigate_before</button
|
||||
>
|
||||
<button
|
||||
class="icon"
|
||||
on:click={() => (page = Math.min(page + 1, $lastPage))}
|
||||
use:action={{ shortcut: "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}
|
||||
{#if page === 0}
|
||||
<tr
|
||||
><th class="new-chord"
|
||||
><ChordActionEdit
|
||||
on:submit={({ detail }) => insertChord(detail)}
|
||||
/></th
|
||||
><td /><td /></tr
|
||||
>
|
||||
{/if}
|
||||
{#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
|
||||
{#if chord}
|
||||
<tr>
|
||||
<ChordEdit {chord} on:duplicate={() => (page = 0)} />
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
{: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 on:click={downloadVocabulary}
|
||||
><span class="icon">download</span>
|
||||
{$LL.configure.chords.VOCABULARY()}</button
|
||||
>
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 8ch;
|
||||
}
|
||||
|
||||
.new-chord :global(.add) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> button {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
transition: outline-color 250ms ease;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: 1px dashed var(--md-sys-color-outline);
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -1px;
|
||||
margin: 2px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
width: 512px;
|
||||
margin-block-start: 16px;
|
||||
padding-block: 8px;
|
||||
padding-inline: 16px;
|
||||
|
||||
font-size: 16px;
|
||||
color: inherit;
|
||||
|
||||
background: none;
|
||||
border: 0 solid var(--md-sys-color-surface-variant);
|
||||
border-bottom-width: 1px;
|
||||
|
||||
transition: all 250ms ease;
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
border-color: var(--md-sys-color-outline);
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--md-sys-color-primary);
|
||||
border-style: solid;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
height: 100%;
|
||||
padding-inline: 8px;
|
||||
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.results {
|
||||
height: 100%;
|
||||
min-width: min(90vw, 16.5cm);
|
||||
}
|
||||
|
||||
table {
|
||||
height: fit-content;
|
||||
overflow: hidden;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
</style>
|
||||
208
src/routes/(app)/config/chords/ChordActionEdit.svelte
Normal file
208
src/routes/(app)/config/chords/ChordActionEdit.svelte
Normal file
@@ -0,0 +1,208 @@
|
||||
<script lang="ts">
|
||||
import type { ChordInfo } from "$lib/undo-redo";
|
||||
import { changes, ChangeType } from "$lib/undo-redo";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
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";
|
||||
|
||||
export let chord: ChordInfo | undefined = undefined;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let pressedKeys = new Set<number>();
|
||||
let editing = false;
|
||||
|
||||
function compare(a: number, b: number) {
|
||||
return a - b;
|
||||
}
|
||||
|
||||
function makeChordInput(...actions: number[]) {
|
||||
const compound = compoundIndices ?? [];
|
||||
return [
|
||||
...compound,
|
||||
...Array.from(
|
||||
{
|
||||
length: 12 - (compound.length + actions.length + 1),
|
||||
},
|
||||
() => 0,
|
||||
),
|
||||
...actions.toSorted(compare),
|
||||
];
|
||||
}
|
||||
|
||||
function edit() {
|
||||
pressedKeys = new Set();
|
||||
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);
|
||||
pressedKeys = pressedKeys;
|
||||
}
|
||||
|
||||
function keyup() {
|
||||
if (!editing) return;
|
||||
editing = false;
|
||||
if (pressedKeys.size < 1) return;
|
||||
if (!chord) return dispatch("submit", 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) {
|
||||
selectAction(event, (action) => {
|
||||
changes.update((changes) => {
|
||||
console.log(compoundIndices, chordActions, action);
|
||||
changes.push({
|
||||
type: ChangeType.Chord,
|
||||
id: chord!.id,
|
||||
actions: makeChordInput(...chordActions!, action),
|
||||
phrase: chord!.phrase,
|
||||
});
|
||||
return changes;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$: chordActions = chord?.actions
|
||||
.slice(chord.actions.lastIndexOf(0) + 1)
|
||||
.toSorted(compare);
|
||||
$: compoundIndices = chord?.actions.slice(0, chord.actions.indexOf(0));
|
||||
</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"
|
||||
on:click={edit}
|
||||
on:keydown={keydown}
|
||||
on:keyup={keyup}
|
||||
on:blur={keyup}
|
||||
>
|
||||
{#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 compoundIndices ?? [] as index}
|
||||
<sub>{index}</sub>
|
||||
{/each}
|
||||
{#if compoundIndices?.length}
|
||||
<span>→</span>
|
||||
{/if}
|
||||
{/if}
|
||||
<ActionString
|
||||
display="keys"
|
||||
actions={editing ? [...pressedKeys].sort(compare) : chordActions ?? []}
|
||||
/>
|
||||
<sup>•</sup>
|
||||
<button class="icon add" on:click|stopPropagation={addSpecial}
|
||||
>add_circle</button
|
||||
>
|
||||
</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 {
|
||||
font-size: 18px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
--icon-fill: 1;
|
||||
}
|
||||
|
||||
.chord:hover .add {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chord {
|
||||
position: relative;
|
||||
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
|
||||
height: 32px;
|
||||
margin-inline: 4px;
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chord::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform-origin: center left;
|
||||
translate: -20px 0;
|
||||
scale: 0 1;
|
||||
|
||||
width: calc(100% - 60px);
|
||||
height: 1px;
|
||||
|
||||
background: currentcolor;
|
||||
|
||||
transition:
|
||||
scale 250ms ease,
|
||||
color 250ms ease;
|
||||
}
|
||||
|
||||
.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>
|
||||
149
src/routes/(app)/config/chords/ChordEdit.svelte
Normal file
149
src/routes/(app)/config/chords/ChordEdit.svelte
Normal file
@@ -0,0 +1,149 @@
|
||||
<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 { createEventDispatcher } from "svelte";
|
||||
|
||||
export let chord: ChordInfo;
|
||||
|
||||
const dispatch = createEventDispatcher<{ duplicate: void }>();
|
||||
|
||||
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.filter(
|
||||
(it) => !(it.type === ChangeType.Chord && isSameChord(it, chord)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
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]++;
|
||||
}
|
||||
|
||||
changes.update((changes) => {
|
||||
changes.push({
|
||||
type: ChangeType.Chord,
|
||||
id,
|
||||
actions: [...chord.actions],
|
||||
phrase: [...chord.phrase],
|
||||
});
|
||||
return changes;
|
||||
});
|
||||
|
||||
dispatch("duplicate");
|
||||
}
|
||||
|
||||
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: SharePopup;
|
||||
tippy(event.target as HTMLElement, {
|
||||
onCreate(instance) {
|
||||
const target = instance.popper.querySelector(".tippy-content")!;
|
||||
shareComponent = new SharePopup({ target });
|
||||
},
|
||||
onHidden(instance) {
|
||||
instance.destroy();
|
||||
},
|
||||
onDestroy(_instance) {
|
||||
shareComponent.$destroy();
|
||||
},
|
||||
}).show();
|
||||
}
|
||||
</script>
|
||||
|
||||
<th>
|
||||
<ChordActionEdit {chord} />
|
||||
</th>
|
||||
<td>
|
||||
<ChordPhraseEdit {chord} />
|
||||
</td>
|
||||
<td class="table-buttons">
|
||||
{#if !chord.deleted}
|
||||
<button transition:slide class="icon compact" on:click={remove}
|
||||
>delete</button
|
||||
>
|
||||
{:else}
|
||||
<button transition:slide class="icon compact" on:click={restore}
|
||||
>restore_from_trash</button
|
||||
>
|
||||
{/if}
|
||||
<button disabled={chord.deleted} class="icon compact" on:click={duplicate}
|
||||
>content_copy</button
|
||||
>
|
||||
<button
|
||||
class="icon compact"
|
||||
class:disabled={chord.isApplied}
|
||||
on:click={restore}>undo</button
|
||||
>
|
||||
<div class="separator" />
|
||||
<button class="icon compact" on:click={share}>share</button>
|
||||
</td>
|
||||
|
||||
<style lang="scss">
|
||||
.separator {
|
||||
display: inline-flex;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
opacity: 0.2;
|
||||
background: currentcolor;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: opacity 75ms ease;
|
||||
}
|
||||
|
||||
td {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-buttons {
|
||||
opacity: 0;
|
||||
transition: opacity 75ms ease;
|
||||
}
|
||||
|
||||
:global(tr):focus-within > .table-buttons,
|
||||
:global(tr):hover > .table-buttons {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
223
src/routes/(app)/config/chords/ChordPhraseEdit.svelte
Normal file
223
src/routes/(app)/config/chords/ChordPhraseEdit.svelte
Normal file
@@ -0,0 +1,223 @@
|
||||
<script lang="ts">
|
||||
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 ActionString from "$lib/components/ActionString.svelte";
|
||||
import { selectAction } from "./action-selector";
|
||||
import { inputToAction } from "./input-converter";
|
||||
import { serialPort } from "$lib/serial/connection";
|
||||
import { get } from "svelte/store";
|
||||
|
||||
export let chord: ChordInfo;
|
||||
|
||||
onMount(() => {
|
||||
if (chord.phrase.length === 0) {
|
||||
box.focus();
|
||||
}
|
||||
});
|
||||
|
||||
function keypress(event: KeyboardEvent) {
|
||||
if (event.key === "ArrowUp") {
|
||||
addSpecial(event);
|
||||
} else if (event.key === "ArrowLeft") {
|
||||
moveCursor(cursorPosition - 1);
|
||||
} else if (event.key === "ArrowRight") {
|
||||
moveCursor(cursorPosition + 1);
|
||||
} else if (event.key === "Backspace") {
|
||||
deleteAction(cursorPosition - 1);
|
||||
moveCursor(cursorPosition - 1);
|
||||
} else if (event.key === "Delete") {
|
||||
deleteAction(cursorPosition);
|
||||
} else {
|
||||
if (event.key === "Shift") return;
|
||||
const action = inputToAction(event, get(serialPort)?.device === "X");
|
||||
if (action !== undefined) {
|
||||
insertAction(cursorPosition, action);
|
||||
tick().then(() => moveCursor(cursorPosition + 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveCursor(to: number) {
|
||||
cursorPosition = Math.max(0, Math.min(to, chord.phrase.length));
|
||||
const item = box.children.item(cursorPosition) as HTMLElement;
|
||||
cursorOffset = item.offsetLeft + item.offsetWidth;
|
||||
}
|
||||
|
||||
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),
|
||||
});
|
||||
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 (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);
|
||||
return;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
moveCursor(i - 1);
|
||||
}
|
||||
|
||||
function addSpecial(event: MouseEvent | KeyboardEvent) {
|
||||
selectAction(
|
||||
event,
|
||||
(action) => {
|
||||
insertAction(cursorPosition, action);
|
||||
tick().then(() => moveCursor(cursorPosition + 1));
|
||||
},
|
||||
() => box.focus(),
|
||||
);
|
||||
}
|
||||
|
||||
let button: HTMLButtonElement;
|
||||
let box: HTMLDivElement;
|
||||
let cursorPosition = 0;
|
||||
let cursorOffset = 0;
|
||||
|
||||
let hasFocus = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<div
|
||||
on:keydown={keypress}
|
||||
on:mousedown={clickCursor}
|
||||
role="textbox"
|
||||
tabindex="0"
|
||||
bind:this={box}
|
||||
class:edited={!chord.deleted && chord.phraseChanged}
|
||||
on:focusin={() => (hasFocus = true)}
|
||||
on:focusout={(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} on:click={addSpecial}>add</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div />
|
||||
<!-- placeholder for cursor placement -->
|
||||
{/if}
|
||||
<ActionString actions={chord.phrase} />
|
||||
<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;
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
background: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
transition: translate 50ms ease;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 0;
|
||||
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
background: var(--md-sys-color-secondary-container);
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: 12px 12px 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.edited {
|
||||
color: var(--md-sys-color-primary);
|
||||
|
||||
sup {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[role="textbox"] {
|
||||
cursor: text;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 1em;
|
||||
padding-block: 4px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
opacity: 0;
|
||||
background: currentcolor;
|
||||
|
||||
transition:
|
||||
opacity 150ms ease,
|
||||
scale 250ms ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
scale: 0 1;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
|
||||
&::after {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/routes/(app)/config/chords/action-selector.ts
Normal file
53
src/routes/(app)/config/chords/action-selector.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
|
||||
import { tick } from "svelte";
|
||||
|
||||
export function selectAction(
|
||||
event: MouseEvent | KeyboardEvent,
|
||||
select: (action: number) => void,
|
||||
dismissed?: () => void,
|
||||
) {
|
||||
const component = new ActionSelector({ target: document.body });
|
||||
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;
|
||||
|
||||
component.$destroy();
|
||||
await tick();
|
||||
dismissed?.();
|
||||
}
|
||||
|
||||
component.$on("close", closed);
|
||||
component.$on("select", ({ detail }) => {
|
||||
select(detail);
|
||||
closed();
|
||||
});
|
||||
}
|
||||
12
src/routes/(app)/config/chords/input-converter.ts
Normal file
12
src/routes/(app)/config/chords/input-converter.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { KEYMAP_IDS, KEYMAP_KEYCODES } from "$lib/serial/keymap-codes";
|
||||
|
||||
export function inputToAction(
|
||||
event: KeyboardEvent,
|
||||
useKeycodes?: boolean,
|
||||
): number | undefined {
|
||||
if (useKeycodes) {
|
||||
return KEYMAP_KEYCODES.get(event.code);
|
||||
} else {
|
||||
return KEYMAP_IDS.get(event.key)?.code ?? KEYMAP_KEYCODES.get(event.code);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user