mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-02-09 10:42:42 +00:00
feat: update stuff
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { fade, slide } from "svelte/transition";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
let { value }: { value: number } = $props();
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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 });
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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)}`}
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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) => ({
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user