Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-04-21 05:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update stuff

Browse Source
This commit is contained in:
Thea Schöbl
2025-12-18 16:29:30 +01:00
parent 9f65b4bb6c
commit 82dd08f2a2
34 changed files with 1694 additions and 2213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2744
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
src/lib/charrecorder/core/recorder.ts
View File

@@ -56,7 +56,7 @@ export class ReplayRecorder {
finish(trim = true, round = true) {
return {
start: maybeRound(trim ? this.replay[0]?.[2] : this.start, round),
start: maybeRound(trim ? this.replay[0]?.[2] : this.start, round) ?? 0,
finish: maybeRound(
trim
? Math.max(...this.replay.map((it) => it[2] + it[3]))
@@ -74,6 +74,6 @@ export class ReplayRecorder {
] as const,
)
.sort((a, b) => a[2] - b[2]),
};
} satisfies Replay;
}
}

13
src/lib/components/Action.svelte
View File

@@ -184,19 +184,6 @@
margin-inline-start: 2px;
}
div[popover] {
width: fit-content;
max-width: 200px;
height: fit-content;
text-align: left;
text-wrap: break-word;
small {
opacity: 0.8;
font-size: 0.9em;
}
}
.verbose {
display: flex;
align-items: center;

2
src/lib/components/AnimatedNumber.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fade, slide } from "svelte/transition";
import { fade } from "svelte/transition";
let { value }: { value: number } = $props();

367
src/lib/components/ChordPhraseDisplay.svelte
View File

@@ -1,367 +0,0 @@
<script lang="ts">
import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
import { onMount, tick } from "svelte";
import { scale } from "svelte/transition";
import ActionString from "$lib/components/ActionString.svelte";
import { deviceMeta, serialPort } from "$lib/serial/connection";
import { get } from "svelte/store";
import { action } from "$lib/title";
import semverGte from "semver/functions/gte";
import { inputToAction } from "../../routes/(app)/config/chords/input-converter";
import { selectAction } from "../../routes/(app)/config/chords/action-selector";
interface InteractiveProps {
interactive: true;
ondeleteaction: (at: number, count?: number) => void;
oninsertaction: (at: number, action: number) => void;
}
interface NonInteractiveProps {
interactive: false;
ondeleteaction?: never;
oninsertaction?: never;
}
let {
phrase,
edited,
interactive,
oninsertaction,
ondeleteaction,
}: { phrase: number[]; edited: boolean } & (
| NonInteractiveProps
| InteractiveProps
) = $props();
const JOIN_ACTION = 574;
const NO_CONCATENATOR_ACTION = 256;
onMount(() => {
if (interactive && phrase.length === 0) {
box?.focus();
}
});
function keypress(event: KeyboardEvent) {
if (!event.shiftKey && event.key === "ArrowUp") {
addSpecial(event);
} else if (!event.shiftKey && event.key === "ArrowLeft") {
moveCursor(cursorPosition - 1);
} else if (!event.shiftKey && event.key === "ArrowRight") {
moveCursor(cursorPosition + 1);
} else if (event.key === "Backspace") {
if (interactive) {
ondeleteaction!(cursorPosition - 1);
}
moveCursor(cursorPosition - 1);
} else if (event.key === "Delete") {
if (interactive) {
ondeleteaction!(cursorPosition);
}
} else {
if (event.key === "Shift") return;
const action = inputToAction(event, get(serialPort)?.device === "X");
if (action !== undefined) {
oninsertaction!(cursorPosition, action);
tick().then(() => moveCursor(cursorPosition + 1));
}
}
}
function moveCursor(to: number) {
if (!box) return;
cursorPosition = Math.max(0, Math.min(to, phrase.length));
const item = box.children.item(cursorPosition) as HTMLElement;
cursorOffset = item.offsetLeft + item.offsetWidth;
}
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);
return;
}
i++;
}
moveCursor(i - 1);
}
function addSpecial(event: MouseEvent | KeyboardEvent) {
selectAction(
event,
(action) => {
oninsertaction!(cursorPosition, action);
tick().then(() => moveCursor(cursorPosition + 1));
},
() => box?.focus(),
);
}
function resolveAutospace(autospace: boolean) {
if (autospace) {
if (phrase.at(-1) === JOIN_ACTION) {
if (
phrase.every(
(action, i, arr) =>
$KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
)
) {
ondeleteaction!(phrase.length - 1);
} else {
return;
}
} else {
if (isPrintable) {
return;
} else if (phrase.at(-1) === NO_CONCATENATOR_ACTION) {
ondeleteaction!(phrase.length - 1);
} else {
oninsertaction!(phrase.length, JOIN_ACTION);
}
}
} else {
if (phrase.at(-1) === JOIN_ACTION) {
ondeleteaction!(phrase.length - 1);
} else {
if (phrase.at(-1) === NO_CONCATENATOR_ACTION) {
if (
phrase.every(
(action, i, arr) =>
$KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
)
) {
return;
} else {
ondeleteaction!(phrase.length - 1);
}
} else {
oninsertaction!(phrase.length, NO_CONCATENATOR_ACTION);
}
}
}
}
let button: HTMLButtonElement | undefined = $state();
let box: HTMLDivElement | undefined = $state();
let cursorPosition = 0;
let cursorOffset = $state(0);
let hasFocus = $state(false);
let isPrintable = $derived(
phrase.every((action) => $KEYMAP_CODES.get(action)?.printable === true),
);
let supportsAutospace = $derived(
semverGte($deviceMeta?.version ?? "0.0.0", "2.1.0"),
);
let hasAutospace = $derived(isPrintable || phrase.at(-1) === JOIN_ACTION);
let displayPhrase = $derived(
phrase.filter(
(it, i, arr) =>
!(
(i === 0 && it === JOIN_ACTION) ||
(i === arr.length - 1 &&
(it === JOIN_ACTION || it === NO_CONCATENATOR_ACTION))
),
),
);
</script>
<div
class="wrapper"
class:edited
onclick={interactive
? () => {
box.focus();
}
: undefined}
>
{#if supportsAutospace}
<label
class="auto-space-edit"
use:action={{ title: "Remove previous concatenator" }}
><span class="icon">join_inner</span><input
checked={phrase[0] === JOIN_ACTION}
disabled={!interactive}
onchange={interactive
? (event) => {
const autospace = hasAutospace;
if ((event.target as HTMLInputElement).checked) {
if (phrase[0] !== JOIN_ACTION) {
oninsertaction!(0, JOIN_ACTION);
}
} else {
if (phrase[0] === JOIN_ACTION) {
ondeleteaction!(0, 1);
}
}
tick().then(() => resolveAutospace(autospace));
}
: undefined}
type="checkbox"
/></label
>
{/if}
<div
onkeydown={interactive ? keypress : undefined}
onmousedown={interactive ? clickCursor : undefined}
role="textbox"
tabindex="0"
bind:this={box}
onfocusin={interactive ? () => (hasFocus = true) : undefined}
onfocusout={interactive
? (event) => {
if (event.relatedTarget !== button) hasFocus = false;
}
: undefined}
>
{#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}
<ActionString actions={displayPhrase} />
</div>
{#if supportsAutospace}
<label class="auto-space-edit" use:action={{ title: "Add concatenator" }}
><span class="icon">space_bar</span><input
checked={hasAutospace}
disabled={!interactive}
onchange={interactive
? (event) =>
resolveAutospace((event.target as HTMLInputElement).checked)
: undefined}
type="checkbox"
/></label
>
{/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;
}
}
.auto-space-edit {
margin-inline: 8px;
border-radius: 4px;
background: var(--md-sys-color-tertiary-container);
padding-inline: 0;
height: 1em;
color: var(--md-sys-color-on-tertiary-container);
font-size: 1.3em;
&:first-of-type:not(:has(:checked)),
&:last-of-type:has(:checked) {
opacity: 0;
}
}
.wrapper:hover .auto-space-edit {
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::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>

2
src/lib/components/Terminal.svelte
View File

@@ -9,7 +9,7 @@
function submit(event: Event) {
event.preventDefault();
$serialPort?.send(0, value.trim());
$serialPort?.send(0, [value.trim()]);
value = "";
io.scrollTo({ top: io.scrollHeight });
}

57
src/lib/components/layout/ActionList.svelte
View File

@@ -9,7 +9,7 @@
import { onMount } from "svelte";
import ActionListItem from "$lib/components/ActionListItem.svelte";
import LL from "$i18n/i18n-svelte";
import { action } from "$lib/title";
import { actionTooltip } from "$lib/title";
import { get } from "svelte/store";
import type { KeymapCategory } from "$lib/meta/types/actions";
import Action from "../Action.svelte";
@@ -26,7 +26,7 @@
currentAction?: number;
nextAction?: number;
autofocus?: boolean;
onselect: (id: number) => void;
onselect?: (id: number) => void;
onclose?: () => void;
} = $props();
@@ -84,13 +84,13 @@
function select(id?: number) {
if (id !== undefined) {
onselect(id);
onselect?.(id);
}
}
function keyboardNavigation(event: KeyboardEvent) {
if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
onselect(exact);
onselect?.(exact);
} else if (event.key === "ArrowDown") {
const element =
resultList.querySelector("li:focus-within")?.nextSibling ??
@@ -131,11 +131,11 @@
placeholder={$LL.actionSearch.PLACEHOLDER()}
/>
{#if onclose}
<button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
<button onclick={() => select(0)} {@attach actionTooltip("", "shift+esc")}
>{$LL.actionSearch.DELETE()}</button
>
<button
use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
{@attach actionTooltip($LL.modal.CLOSE(), "esc")}
class="icon"
onclick={onclose}>close</button
>
@@ -176,9 +176,9 @@
{#each actions as action (action.code)}
<button
class="action-item"
draggable="true"
draggable={!onclose}
onclick={() => select(action.code)}
ondragstart={onselect === undefined
ondragstart={onclose === undefined
? (event) => {
if (!event.dataTransfer) return;
event.stopPropagation();
@@ -202,50 +202,15 @@
</div>
<style lang="scss">
.filters {
display: flex;
gap: 4px;
border: none;
label {
border: 1px solid currentcolor;
border-radius: 6px;
padding-inline: 4px;
padding-block: 2px;
height: unset;
font-size: 14px;
&:has(:checked) {
background: var(--md-sys-color-secondary);
color: var(--md-sys-color-on-secondary);
}
input {
display: none;
}
}
}
.action-item {
cursor: grab;
margin: 0;
padding: 0;
height: auto;
font: inherit;
}
dialog {
display: flex;
justify-content: center;
align-items: center;
border: none;
background: rgba(0 0 0 / 60%);
width: 100%;
height: 100%;
&[draggable="true"] {
cursor: grab;
}
}
aside {

2
src/lib/components/layout/GenericLayout.svelte
View File

@@ -28,7 +28,7 @@
console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer");
}
let { layoutInfo }: { layout: CompiledLayout } = $props();
let { layoutInfo }: { layoutInfo: CompiledLayout } = $props();
function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2];

13
src/lib/components/layout/KeyText.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
import type { CompiledLayoutKey } from "$lib/assets/layouts/layout.d.ts";
import { layout } from "$lib/undo-redo.js";
import { osLayout } from "$lib/os-layout.js";
import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
import { action } from "$lib/title";
import { actionTooltip } from "$lib/title";
import { activeProfile, activeLayer } from "$lib/serial/connection";
import { getContext } from "svelte";
@@ -28,7 +28,12 @@
middle: [number, number];
pos: [number, number];
rotate: number;
positions: [[number, number], [number, number], [number, number]];
positions: [
[number, number],
[number, number],
[number, number],
[number, number],
];
} = $props();
</script>
@@ -67,7 +72,7 @@
? "0 0 0"
: `${direction[0]?.toPrecision(2)}px ${direction[1]?.toPrecision(2)}px 0`}
style:rotate="{rotate}deg"
use:action={{ title: tooltip }}
{@attach actionTooltip(tooltip)}
>
{#if code !== 0 && code != 1023}
{dynamicMapping || icon || display || id || `0x${code.toString(16)}`}

3
src/lib/components/layout/KeyboardKey.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
import type { CompiledLayoutKey } from "$lib/assets/layouts/layout.d.ts";
import { getContext } from "svelte";
import type { VisualLayoutConfig } from "./visual-layout.js";
import KeyText from "$lib/components/layout/KeyText.svelte";
@@ -64,6 +64,7 @@
[-1, 1],
[-1, -1],
[1, -1],
[1, 1],
]}
/>
{:else if key.shape === "quarter-circle"}

12
src/lib/components/layout/Layout.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import { deviceMeta, serialPort } from "$lib/serial/connection";
import { action } from "$lib/title";
import { actionTooltip } from "$lib/title";
import GenericLayout from "$lib/components/layout/GenericLayout.svelte";
import { activeProfile, activeLayer } from "$lib/serial/connection";
import { fade, fly } from "svelte/transition";
import { restoreFromFile } from "$lib/backup/backup";
import type { CompiledLayout } from "$lib/assets/layouts/layout.d.ts";
const layouts = {
const layouts: Record<string, (() => Promise<CompiledLayout>) | undefined> = {
ONE: () =>
import("$lib/assets/layouts/one.layout.yml").then(
(it) => it.default as CompiledLayout,
@@ -45,7 +45,7 @@
<div class="container">
{#if $serialPort}
{#await layouts[$serialPort.device]() then layoutInfo}
{#await layouts[$serialPort.device]?.() then layoutInfo}
<fieldset transition:fade>
<div class="layers">
{#each Array.from({ length: $serialPort.layerCount }, (_, i) => i) as layer}
@@ -65,7 +65,7 @@
</div>
{#if $deviceMeta?.factoryDefaults?.layout}
<button
use:action={{ title: "Reset Layout" }}
{@attach actionTooltip("Reset Layout")}
transition:fly={{ x: -8 }}
class="icon reset-layout"
onclick={() =>
@@ -75,7 +75,9 @@
{/if}
</fieldset>
<GenericLayout {layoutInfo} />
{#if layoutInfo}
<GenericLayout {layoutInfo} />
{/if}
{/await}
{/if}
</div>

217
src/lib/dialogs/PickChangesDialog.svelte
View File

@@ -1,217 +0,0 @@
<script lang="ts">
import Dialog from "$lib/dialogs/Dialog.svelte";
import type {
Change,
ChordChange,
LayoutChange,
SettingChange,
} from "$lib/undo-redo";
import { ChangeType, chords } from "$lib/undo-redo";
import ActionString from "$lib/components/ActionString.svelte";
import LL from "$i18n/i18n-svelte";
import { KEYMAP_IDS } from "$lib/serial/keymap-codes";
export let changes: Change[] = [
{ type: ChangeType.Layout, layer: 0, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
{ type: ChangeType.Setting, id: 0, setting: 2 },
{ type: ChangeType.Setting, id: 0, setting: 2 },
{ type: ChangeType.Setting, id: 0, setting: 2 },
{ type: ChangeType.Setting, id: 0, setting: 2 },
{
type: ChangeType.Chord,
id: [1],
actions: [55],
phrase: [55, 63, 37, 36],
},
{
type: ChangeType.Chord,
id: [
KEYMAP_IDS.get("y")!.code,
KEYMAP_IDS.get("r")!.code,
KEYMAP_IDS.get("t")!.code,
],
actions: [
KEYMAP_IDS.get("y")!.code,
KEYMAP_IDS.get("r")!.code,
KEYMAP_IDS.get("t")!.code,
],
phrase: [55, 63, 37, 36],
},
{
type: ChangeType.Chord,
id: [
KEYMAP_IDS.get("y")!.code,
KEYMAP_IDS.get("r")!.code,
KEYMAP_IDS.get("t")!.code,
],
actions: [
KEYMAP_IDS.get("y")!.code,
KEYMAP_IDS.get("r")!.code,
KEYMAP_IDS.get("t")!.code,
],
phrase: [],
},
];
$: existingChords = new Set($chords.map((it) => JSON.stringify(it.id)));
$: layoutChanges = Array.from(
{ length: 3 },
(_, i) =>
changes.filter(
(it) => it.type === ChangeType.Layout && it.layer === i,
) as LayoutChange[],
);
$: settingChanges = changes.filter(
(it) => it.type === ChangeType.Setting,
) as SettingChange[];
$: chordChanges = {
added: changes.filter(
(it) =>
it.type === ChangeType.Chord &&
it.phrase.length > 0 &&
!existingChords.has(JSON.stringify(it.id)),
) as ChordChange[],
changed: changes.filter(
(it) =>
it.type === ChangeType.Chord &&
it.phrase.length > 0 &&
existingChords.has(JSON.stringify(it.id)),
) as ChordChange[],
deleted: changes.filter(
(it) => it.type === ChangeType.Chord && it.phrase.length === 0,
) as ChordChange[],
};
$: totalChordChanges = Object.values(chordChanges).reduce(
(acc, curr) => acc + curr.length,
0,
);
</script>
<Dialog>
<h1>{$LL.changes.TITLE()}</h1>
<h2>
<label
><input
type="checkbox"
class="checkbox"
/>{$LL.changes.ALL_CHANGES()}</label
>
</h2>
<ul>
{#if layoutChanges.some((it) => it.length > 0)}
<li>
<h3>
<label>
<input type="checkbox" class="checkbox" />
{$LL.changes.layout.TITLE(
layoutChanges.reduce((acc, curr) => acc + curr.length, 0),
)}
</label>
</h3>
<ul>
{#each layoutChanges as changes, i}
{@const layer = i + 1}
{#if changes.length > 0}
<li>
<h4>
<label>
<input type="checkbox" class="checkbox" />
{$LL.changes.layout.LAYER({
changes: changes.length,
layer,
})}
</label>
</h4>
</li>
{/if}
{/each}
</ul>
</li>
{/if}
{#if settingChanges.length > 0}
<li>
<h3>
<label
><input
type="checkbox"
class="checkbox"
/>{$LL.changes.settings.TITLE(settingChanges.length)}</label
>
</h3>
</li>
{/if}
{#if totalChordChanges > 0}
<li>
<h3>
<label
><input
type="checkbox"
class="checkbox"
/>{$LL.changes.chords.TITLE(totalChordChanges)}</label
>
</h3>
<ul>
{#each Object.entries(chordChanges) as [category, changes]}
{#if changes.length > 0}
<li>
<h4>
<label
><input type="checkbox" class="checkbox" />
{#if category === "added"}
{$LL.changes.chords.NEW_CHORDS(changes.length)}
{:else if category === "changed"}
{$LL.changes.chords.CHANGED_CHORDS(changes.length)}
{:else if category === "deleted"}
{$LL.changes.chords.DELETED_CHORDS(changes.length)}
{/if}
</label>
</h4>
<ul>
{#each changes as change}
<li>
<label>
<input type="checkbox" class="checkbox" />
<ActionString display="keys" actions={change.actions} />
<ActionString actions={change.phrase} />
</label>
</li>
{/each}
</ul>
</li>
{/if}
{/each}
</ul>
</li>
{/if}
</ul>
</Dialog>
<style lang="scss">
h1 {
font-size: 2em;
text-align: center;
}
h2 {
font-size: 1.5em;
}
ul {
padding-inline-start: 0;
list-style: none;
}
li {
margin-inline-start: 24px;
}
</style>

4
src/lib/learn/chords.ts
View File

@@ -5,8 +5,8 @@ import { type ChordInfo, chords } from "$lib/undo-redo";
import { derived } from "svelte/store";
export const words = derived(
[chords, osLayout],
([chords, layout]) =>
[chords, osLayout, KEYMAP_CODES],
([chords, layout, KEYMAP_CODES]) =>
new Map<string, ChordInfo>(
chords
.map((chord) => ({

3
src/lib/meta/types/meta.ts
View File

@@ -74,6 +74,7 @@ export interface E2eTestItem {
press?: string[];
release?: string[];
step?: number;
skip?: number;
idle?: boolean;
clearChords?: boolean;
addChords?: E2eAddChord[];
@@ -107,7 +108,7 @@ export interface VersionMeta {
actions: KeymapCategory[];
settings: SettingsMeta[];
changelog: Changelog;
recipes?: E2eTest[];
recipes?: E2eDemo[];
factoryDefaults?: {
layout: CharaLayoutFile;
settings: CharaSettingsFile;

41
src/lib/title.ts
View File

@@ -1,4 +1,3 @@
import type { Action } from "svelte/action";
import tippy from "tippy.js";
import { mount, unmount, type Snippet } from "svelte";
import Tooltip from "$lib/components/Tooltip.svelte";
@@ -6,46 +5,6 @@ import type { Attachment } from "svelte/attachments";
export const hotkeys = new Map<string, HTMLElement>();
/**
* @deprecated Use `tooltip` instead.
*/
export const action: Action<Element, { title?: string; shortcut?: string }> = (
node: Element,
{ title, shortcut },
) => {
let component: {} | undefined;
const tooltip = tippy(node, {
arrow: false,
theme: "tooltip",
animation: "fade",
onShow(instance) {
component ??= mount(Tooltip, {
target: instance.popper.querySelector(".tippy-content") as Element,
props: { title, shortcut },
});
},
onHidden() {
if (component) {
unmount(component);
component = undefined;
}
},
});
if (shortcut && node instanceof HTMLElement) {
hotkeys.set(shortcut, node);
}
return {
destroy() {
tooltip.destroy();
if (shortcut && node instanceof HTMLElement) {
hotkeys.delete(shortcut);
}
},
};
};
export function actionTooltip(
title: string | Snippet,
shortcut?: string,

2
src/routes/(app)/+layout.svelte
View File

@@ -131,8 +131,6 @@
<div class="layout">
<Sidebar />
<!-- <PickChangesDialog /> -->
<PageTransition>
{#if children}
{@render children()}

47
src/routes/(app)/Footer.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { browser, version } from "$app/environment";
import { action } from "$lib/title";
import { actionTooltip } from "$lib/title";
import LL, { setLocale } from "$i18n/i18n-svelte";
import { theme } from "$lib/preferences.js";
import type { Locales } from "$i18n/i18n-types";
import { detectLocale, locales } from "$i18n/i18n-util";
import { detectLocale } from "$i18n/i18n-util";
import { loadLocaleAsync } from "$i18n/i18n-util.async";
import { tick } from "svelte";
import {
@@ -54,15 +54,13 @@
$serialPort = undefined;
}
}
let languageSelect: HTMLSelectElement;
</script>
<footer>
<ul>
<li>
<a
use:action={{ title: "Branch" }}
{@attach actionTooltip("Branch")}
href={import.meta.env.VITE_HOMEPAGE_URL}
rel="noreferrer"
target="_blank"><span class="icon">commit</span> v{version}</a
@@ -71,7 +69,7 @@
<li>
<a
href="/ccos/{currentDevice ? `${currentDevice}/` : ''}"
use:action={{ title: "Updates" }}
{@attach actionTooltip("Updates")}
>
CCOS {$serialPort?.version ?? "Updates"}
</a>
@@ -94,12 +92,13 @@
<ConnectPopup />
</div>
{:else}
{#snippet disconnectTooltip()}
Disconnect<br /><kbd class="icon">shift</kbd> Sync
{/snippet}
<button
transition:slide={{ axis: "x" }}
onclick={disconnect}
use:action={{
title: "Disconnect<br><kbd class='icon'>shift</kbd> Sync",
}}
{@attach actionTooltip(disconnectTooltip)}
><b
>{$serialPort.company}
{$serialPort.device}
@@ -129,7 +128,7 @@
</li>
<li class="hide-forced-colors">
<input
use:action={{ title: $LL.profile.theme.COLOR_SCHEME() }}
{@attach actionTooltip($LL.profile.theme.COLOR_SCHEME())}
type="color"
bind:value={$theme.color}
/>
@@ -137,7 +136,7 @@
<li class="hide-forced-colors">
{#if $theme.mode === "light"}
<button
use:action={{ title: $LL.profile.theme.DARK_MODE() }}
{@attach actionTooltip($LL.profile.theme.DARK_MODE())}
class="icon"
onclick={switchTheme}
>
@@ -145,7 +144,7 @@
</button>
{:else if $theme.mode === "dark"}
<button
use:action={{ title: $LL.profile.theme.LIGHT_MODE() }}
{@attach actionTooltip($LL.profile.theme.LIGHT_MODE())}
class="icon"
onclick={switchTheme}
>
@@ -153,22 +152,6 @@
</button>
{/if}
</li>
<!--<li>
<div
role="button"
class="icon"
use:action={{ title: $LL.profile.LANGUAGE() }}
onclick={() => languageSelect.click()}
>
translate
<select bind:value={locale} bind:this={languageSelect}>
{#each locales as code}
<option value={code}>{code}</option>
{/each}
</select>
</div>
</li>-->
</ul>
</footer>
@@ -232,14 +215,6 @@
background: var(--md-sys-color-primary);
}
.warning {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: var(--md-sys-color-error);
}
input[type="color"] {
display: flex;
justify-content: center;

3
src/routes/(app)/config/EditActions.svelte
View File

@@ -3,7 +3,6 @@
import {
changes,
ChangeType,
chords,
layout,
overlay,
settings,
@@ -11,7 +10,7 @@
} from "$lib/undo-redo";
import type { Change, ChordChange } from "$lib/undo-redo";
import { fly } from "svelte/transition";
import { action, actionTooltip } from "$lib/title";
import { actionTooltip } from "$lib/title";
import {
deviceChords,
deviceLayout,

18
src/routes/(app)/config/chords/+page.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
import FlexSearch from "flexsearch";
import FlexSearch, { type Index } from "flexsearch";
import LL from "$i18n/i18n-svelte";
import { action } from "$lib/title";
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";
@@ -38,7 +38,7 @@
});
let index = new FlexSearch.Index();
let searchIndex = writable<FlexSearch.Index | undefined>(undefined);
let searchIndex = writable<Index | undefined>(undefined);
$effect(() => {
abortIndexing?.();
progress = 0;
@@ -129,7 +129,7 @@
chords: ChordInfo[],
osLayout: Map<string, string>,
codes: Map<number, KeyInfo>,
): Promise<FlexSearch.Index> {
): Promise<Index> {
if (chords.length === 0 || !browser) return index;
index = new FlexSearch.Index({
@@ -185,7 +185,7 @@
const searchFilter = writable<number[] | undefined>(undefined);
let currentSearchQuery = $state("");
async function search(index: FlexSearch.Index, event: Event) {
async function search(index: Index, event: Event) {
const query = (event.target as HTMLInputElement).value;
currentSearchQuery = query;
searchFilter.set(
@@ -296,12 +296,12 @@
<button
class="icon"
onclick={() => (page = Math.max(page - 1, 0))}
use:action={{ shortcut: "ctrl+left" }}>navigate_before</button
{@attach actionTooltip("", "ctrl+left")}>navigate_before</button
>
<button
class="icon"
onclick={() => (page = Math.min(page + 1, $lastPage))}
use:action={{ shortcut: "ctrl+right" }}>navigate_next</button
{@attach actionTooltip("", "ctrl+right")}>navigate_next</button
>
</div>
@@ -370,10 +370,6 @@
min-width: 8ch;
}
.new-chord :global(.add) {
visibility: hidden;
}
.sidebar {
display: flex;
flex-direction: column;

1
src/routes/(app)/config/chords/ChordActionEdit.svelte
View File

@@ -82,6 +82,7 @@
function addSpecial(event: MouseEvent) {
event.stopPropagation();
selectAction(event, (action) => {
if (!chord) return onsubmit([action]);
changes.update((changes) => {
changes.push([
{

21
src/routes/(app)/config/chords/ChordEditActions.svelte
View File

@@ -1,21 +0,0 @@
<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>

71
src/routes/(app)/config/cv2/ChordEdit.svelte
View File

@@ -1,71 +0,0 @@
<script lang="ts">
import Action from "$lib/components/Action.svelte";
import type { ChordInfo } from "$lib/undo-redo";
import { onMount, tick } from "svelte";
let { chord }: { chord: ChordInfo } = $props();
let actualElements: HTMLDivElement | undefined = $state(undefined);
let pseudoElements: HTMLDivElement | undefined = $state(undefined);
let widths: number[] = $state([]);
onMount(async () => {
for (const letter of chord.phrase) {
const span = document.createElement("span");
span.textContent = String.fromCodePoint(letter);
pseudoElements?.appendChild(span);
}
await tick();
await tick();
await tick();
await tick();
update();
});
function update() {
console.log(document.getSelection());
pseudoElements?.childNodes.forEach((node, index) => {
if (node instanceof HTMLElement) {
const range = document.createRange();
const actual = actualElements?.childNodes[index];
range.setStartBefore(actual);
range.setEndAfter(actual);
const rect = range.getBoundingClientRect();
console.log(rect);
node.style.width = rect.width + "px";
}
});
}
</script>
<div class="editor">
<div class="visual" bind:this={actualElements}>
{#each chord.phrase as action, index}
<Action {action} display="inline-keys" />
{/each}
</div>
<div contenteditable="true" bind:this={pseudoElements}></div>
</div>
<style lang="scss">
.editor {
position: relative;
}
[contenteditable="true"] {
position: absolute;
inset: 0;
> :global(span) {
display: inline-block;
background: red;
&:nth-child(even) {
background: blue;
}
}
}
</style>

34
src/routes/(app)/config/cv2/DropTarget.svelte
View File

@@ -1,34 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
let {
children,
onofferdropbefore,
onofferdropafter,
onofferreplace,
}: {
children: Snippet;
onofferdropbefore: () => void;
onofferdropafter: () => void;
onofferreplace: () => void;
} = $props();
let element: HTMLSpanElement | undefined = $state(undefined);
</script>
<span
class="droptarget"
bind:this={element}
{ondrop}
{ondragenter}
{ondragleave}
>
{@render children()}
</span>
<style lang="scss">
.droptarget {
position: relative;
}
</style>

9
src/routes/(app)/config/layout/+page.svelte
View File

@@ -7,6 +7,7 @@
import SharePopup from "../SharePopup.svelte";
import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
import { layout } from "$lib/undo-redo";
import { activeProfile } from "$lib/serial/connection";
async function shareLayout(event: Event) {
const url = new URL(window.location.href);
@@ -16,11 +17,9 @@
charaVersion: 1,
type: "layout",
device: "one",
layout: $layout.map((it) => it.map((it) => it.action)) as [
number[],
number[],
number[],
],
layout: $layout[$activeProfile]?.map((it) =>
it.map((it) => it.action),
) as [number[], number[], number[]],
}),
);
await navigator.clipboard.writeText(url.toString());

11
src/routes/(app)/config/settings/+page.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import Action from "$lib/components/Action.svelte";
import { popup } from "$lib/popup";
import { deviceMeta, serialPort } from "$lib/serial/connection";
import { setting } from "$lib/setting";
import ResetPopup from "./ResetPopup.svelte";
@@ -14,8 +12,7 @@
restoreBackup,
restoreFromFile,
} from "$lib/backup/backup";
import { preference } from "$lib/preferences";
import { action } from "$lib/title";
import { actionTooltip } from "$lib/title";
import { fly } from "svelte/transition";
import type { SettingsItemMeta } from "$lib/meta/types/meta";
@@ -96,7 +93,9 @@
/>{item.unit}
</div>
{/if}
<div class="title">{titlecase(item.name)}</div>
{#if item.name}
<div class="title">{titlecase(item.name)}</div>
{/if}
{#if item.description}
<div class="description">{@html item.description}</div>
{/if}
@@ -139,7 +138,7 @@
{#if $serialPort}
{#if $deviceMeta?.factoryDefaults?.settings}
<button
use:action={{ title: "Reset Settings" }}
{@attach actionTooltip("Reset Settings")}
transition:fly={{ x: -8 }}
onclick={() =>
restoreFromFile($deviceMeta.factoryDefaults!.settings)}

85
src/routes/(app)/e2e/replay/+page.svelte
View File

@@ -1,85 +0,0 @@
<script lang="ts">
import type { PageData } from "./$types";
let { data }: { data: PageData } = $props();
$effect(() => {
console.log(data);
});
</script>
<details>
<summary>Full Log</summary>
{#each data.data as item, i}
{#if "press" in item}
<div class="press">{item.press}</div>
{:else if "release" in item}
<div class="release">{item.release}</div>
{:else if "keys" in item}
<div class="report">
<span class="icon">keyboard</span>
<div class="modifiers">
{item.modifiers.toString(2)}
</div>
<div class="keys">{item.keys.join(", ")}</div>
</div>
{:else if "out" in item}
<pre class="out">{item.out}</pre>
{:else if "in" in item}
<pre class="in">{item.in}</pre>
{:else if "tick" in item}
<div class="tick"><span class="icon">timer_play</span>{item.tick}ms</div>
{:else}
<div>Unknown log item at index {i}</div>
{/if}
{/each}
</details>
<style lang="scss">
details {
margin-top: 1rem;
border: 1px solid var(--md-sys-color-outline);
border-radius: 0.5rem;
background-color: var(--md-sys-color-surface-variant);
padding: 1rem;
}
.report {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
border-radius: 0.25rem;
background-color: var(--md-sys-color-primary-container);
padding: 0.5rem;
color: var(--md-sys-color-on-primary-container);
}
.out {
color: var(--md-sys-color-primary);
}
.in {
color: var(--md-sys-color-secondary);
}
.tick {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.25rem;
padding: 0.2rem 0.5rem;
width: fit-content;
color: var(--md-sys-color-tertiary);
font-size: 0.6rem;
}
.icon {
font-size: inherit;
}
input[type="range"] {
margin-bottom: 1rem;
width: 100%;
}
</style>

49
src/routes/(app)/e2e/replay/+page.ts
View File

@@ -1,49 +0,0 @@
import type { PageLoad } from "./$types";
import { browser } from "$app/environment";
import { fromBase64 } from "$lib/serialization/base64";
export interface ReplaySerialIn {
in: string;
}
export interface ReplaySerialOut {
out: string;
}
export interface ReplaySerialReport {
modifiers: number;
keys: number[];
}
export interface ReplaySerialPress {
press: number;
}
export interface ReplaySerialRelease {
release: number;
}
export interface ReplayTick {
tick: number;
}
export type ReplayDataItem =
| ReplayTick
| ReplaySerialIn
| ReplaySerialOut
| ReplaySerialReport
| ReplaySerialPress
| ReplaySerialRelease;
export const load = (async ({ url, fetch }) => {
const replay = browser && new URLSearchParams(url.search).get("data");
if (!replay) {
return undefined;
}
const stream = (await fromBase64(replay, fetch))
.stream()
.pipeThrough(new DecompressionStream("deflate"));
return {
data: JSON.parse(await new Response(stream).text()) as ReplayDataItem[],
};
}) satisfies PageLoad;

16
src/routes/(app)/learn/chords/+page.svelte
View File

@@ -9,7 +9,7 @@
learnConfig,
learnConfigStored,
} from "$lib/learn/chords";
import { blur, fade } from "svelte/transition";
import { fade } from "svelte/transition";
import ChordActionEdit from "../../config/chords/ChordActionEdit.svelte";
import TrackChords from "$lib/charrecorder/TrackChords.svelte";
import type { InferredChord } from "$lib/charrecorder/core/types";
@@ -144,7 +144,7 @@
<tbody>
{#each Object.entries($scores)
.sort(([, a], [, b]) => b.lastTyped - a.lastTyped)
.splice(0, 10) as [word, score]}
.splice(0, 10) as [word, _score]}
<tr class="decay">
<td>{word}</td>
</tr>
@@ -164,16 +164,20 @@
<td
><input
type="number"
value={$learnConfig[key] ?? value}
value={$learnConfig[key as keyof typeof $learnConfig] ?? value}
step="0.1"
oninput={(event) =>
($learnConfigStored[key] = event.target.value)}
($learnConfigStored[key as keyof typeof $learnConfig] = (
event.target as HTMLInputElement
).value as any)}
/>
</td>
<td>
<button
disabled={!$learnConfigStored[key]}
onclick={() => ($learnConfigStored[key] = undefined)}>⟲</button
disabled={!$learnConfigStored[key as keyof typeof $learnConfig]}
onclick={() =>
($learnConfigStored[key as keyof typeof $learnConfigStored] =
undefined)}>⟲</button
>
</td>
</tr>

14
src/routes/(app)/learn/layout/+page.svelte
View File

@@ -1,9 +1,6 @@
<script lang="ts">
import { share } from "$lib/share";
import tippy from "tippy.js";
import { mount, setContext, unmount } from "svelte";
import { setContext } from "svelte";
import Layout from "$lib/components/layout/Layout.svelte";
import { charaFileToUriComponent } from "$lib/share/share-url";
import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
import { writable, derived } from "svelte/store";
import { layout } from "$lib/undo-redo";
@@ -26,7 +23,7 @@
const result = new Set<number>();
for (const layer of layout) {
for (const key of layer) {
result.add(key.action);
result.add(key[0].action);
}
}
return [...result];
@@ -39,11 +36,12 @@
([layout, currentAction]) => {
const result: Array<{ layer: number; key: number }> = [];
for (let layer = 0; layer <= layout.length; layer++) {
if (layout[layer] === undefined) {
const layerArr = layout[layer];
if (layerArr === undefined) {
continue;
}
for (let key = 0; key <= layout[layer].length; key++) {
if (layout[layer][key]?.action === currentAction) {
for (let key = 0; key <= layerArr.length; key++) {
if (layerArr[key]?.[0].action === currentAction) {
result.push({ layer, key });
}
}

4
src/routes/(app)/plugin/+page.svelte
View File

@@ -80,7 +80,7 @@
];
const actionsCompletion: Completion[] = Array.from(
KEYMAP_CODES,
$KEYMAP_CODES,
([id, info]) => {
const isValidIdentifier =
info.id && /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(info.id);
@@ -195,7 +195,7 @@
function runPlugin() {
frame.contentWindow?.postMessage(
{
actionCodes: KEYMAP_CODES,
actionCodes: $KEYMAP_CODES,
script: editorView.state.doc.toString(),
charaChannels: Object.keys(channels),
} satisfies ChannelCharaEventData,

4
src/routes/(app)/recipes/+page.svelte
View File

@@ -4,8 +4,8 @@
let recipes = $derived(
$deviceMeta?.recipes?.toSorted((a, b) => {
if (a.demo == null) return 1;
if (b.demo == null) return -1;
if (!a.demo?.title) return 1;
if (!b.demo?.title) return -1;
return a.demo.title.localeCompare(b.demo.title);
}),
);

1
src/routes/(app)/recipes/Demo.svelte
View File

@@ -24,6 +24,7 @@
});
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<section
id={"demo-" + i}
onmouseenter={() => (paused = false)}

26
src/routes/(app)/recipes/Recipe.svelte
View File

@@ -1,14 +1,11 @@
<script lang="ts">
import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
import { ReplayPlayer } from "$lib/charrecorder/core/player";
import type { Replay } from "$lib/charrecorder/core/types";
import ActionString from "$lib/components/ActionString.svelte";
import ChordPhraseDisplay from "$lib/components/ChordPhraseDisplay.svelte";
import type { E2eTest, E2eTestItem } from "$lib/meta/types/meta";
import { osLayout } from "$lib/os-layout";
import { deviceMeta } from "$lib/serial/connection";
import { KEYMAP_IDS } from "$lib/serial/keymap-codes";
import type { ChordInfo } from "$lib/undo-redo";
let { test, paused = false }: { test: E2eTest; paused?: boolean } = $props();
@@ -224,7 +221,8 @@
<ul>
{#each settings as [item, value]}
<li>
{item?.name ?? "Unknown Setting"}: {value?.toString()}
{(typeof item === "object" ? item?.name : undefined) ??
"Unknown Setting"}: {value?.toString()}
</li>
{/each}
</ul>
@@ -287,26 +285,6 @@
}
}
.details {
position: absolute;
transform-origin: top;
scale: 1 0.5;
z-index: 1;
margin-left: -17px;
border: 1px solid var(--md-sys-color-outline);
border-top: none;
background-color: var(--md-sys-color-surface);
padding: 16px;
width: calc(100% + 2px);
}
summary {
cursor: pointer;
margin-top: 0.5rem;
font-weight: bold;
user-select: none;
}
.replay {
border-radius: 0.4rem;
background: var(--md-sys-color-surface-variant);

7
vite.config.ts
View File

@@ -39,13 +39,6 @@ export default defineConfig({
define: {
global: "window",
},
css: {
preprocessorOptions: {
scss: {
api: "modern-compiler",
},
},
},
envPrefix: ["TAURI_", "VITE_"],
plugins: [
ViteYaml({ exclude: /\.layout\.yml$/ }),