Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-02-23 17:42:03 +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

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>