mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-19 16:32:58 +00:00
feat: editing
This commit is contained in:
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="cross" maskUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="32" height="32" fill="white" />
|
||||
<path d="M0 0L32 32M0 32L32 0" stroke="black" stroke-width="3" />
|
||||
</mask>
|
||||
<circle cx="16" cy="16" r="11.5" fill="none" stroke="white" stroke-width="9" mask="url(#cross)" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 433 B |
118
src/lib/assets/settings.yml
Normal file
118
src/lib/assets/settings.yml
Normal file
@@ -0,0 +1,118 @@
|
||||
settings:
|
||||
1:
|
||||
title: Enable Serial Header
|
||||
description: boolean 0 or 1, default is 0
|
||||
2:
|
||||
title: Enable Serial Logging
|
||||
description: boolean 0 or 1, default is 0
|
||||
3:
|
||||
title: Enable Serial Debugging
|
||||
description: boolean 0 or 1, default is 0
|
||||
4:
|
||||
title: Enable Serial Raw
|
||||
description: boolean 0 or 1, default is 0
|
||||
5:
|
||||
title: Enable Serial Chord
|
||||
description: boolean 0 or 1, default is 0
|
||||
6:
|
||||
title: Enable Serial Keyboard
|
||||
description: boolean 0 or 1, default is 0
|
||||
7:
|
||||
title: Enable Serial Mouse
|
||||
description: boolean 0 or 1, default is 0
|
||||
11:
|
||||
title: Enable USB HID Keyboard
|
||||
description: boolean 0 or 1, default is 1
|
||||
12:
|
||||
title: Enable Character Entry
|
||||
description: boolean 0 or 1
|
||||
13:
|
||||
title: GUI-CTRL Swap Mode
|
||||
description: boolean 0 or 1; 1 swaps keymap 0 and 1. (CCL only)
|
||||
14:
|
||||
title: Key Scan Duration
|
||||
description: scan rate described in milliseconds; default is 2ms = 500Hz
|
||||
15:
|
||||
title: Key Debounce Press Duration
|
||||
description: debounce time in milliseconds; default is 7ms on the One and 20ms on the Lite
|
||||
16:
|
||||
title: Key Debounce Release Duration
|
||||
description: debounce time in milliseconds; default is 7ms on the One and 20ms on the Lite
|
||||
17:
|
||||
title: Keyboard Output Character Microsecond Delays
|
||||
description: delay time in microseconds (one delay for press and again for release); default is 480us; max is 10240us; increments of 40us
|
||||
21:
|
||||
title: Enable USB HID Mouse
|
||||
description: boolean 0 or 1; default is 1
|
||||
22:
|
||||
title: Slow Mouse Speed
|
||||
description: pixels to move at the mouse poll rate; default for CC1 is 5 = 250px/s
|
||||
23:
|
||||
title: Fast Mouse Speed
|
||||
description: pixels to move at the mouse poll rate; default for CC1 is 25 = 1250px/s
|
||||
24:
|
||||
title: Enable Active Mouse
|
||||
description: boolean 0 or 1; moves mouse back and forth every 60s
|
||||
25:
|
||||
title: Mouse Scroll Speed
|
||||
description: default is 1; polls at 1/4th the rate of the mouse move updates
|
||||
26:
|
||||
title: Mouse Poll Duration
|
||||
description: poll rate described in milliseconds; default is 20ms = 50Hz
|
||||
31:
|
||||
title: Enable Chording
|
||||
description: boolean 0 or 1
|
||||
32:
|
||||
title: Enable Chording Character Counter Timeout
|
||||
description: boolean 0 or 1; default is 1
|
||||
33:
|
||||
title: Chording Character Counter Timeout Timer
|
||||
description: 0-255 deciseconds; default is 40 or 4.0 seconds
|
||||
34:
|
||||
title: Chord Detection Press Tolerance(ms)
|
||||
description: 1-50 milliseconds
|
||||
35:
|
||||
title: Chord Detection Release Tolerance(ms)
|
||||
description: 1-50 milliseconds
|
||||
41:
|
||||
title: Enable Spurring
|
||||
description: boolean 0 or 1; default is 1
|
||||
42:
|
||||
title: Enable Spurring Character Counter Timeout
|
||||
description: boolean 0 or 1; default is 1
|
||||
43:
|
||||
title: Spurring Character Counter Timeout Timer
|
||||
description: 0-255 seconds; default is 240
|
||||
51:
|
||||
title: Enable Arpeggiates
|
||||
description: boolean 0 or 1; default is 1
|
||||
54:
|
||||
title: Arpeggiate Tolerance
|
||||
description: in milliseconds; default 800ms
|
||||
61:
|
||||
title: Enable Compound Chording (coming soon)
|
||||
description: boolean 0 or 1; default is 0
|
||||
64:
|
||||
title: Compound Tolerance
|
||||
description: in milliseconds; default 1500ms
|
||||
81:
|
||||
title: LED Brightness
|
||||
description: 0-50 (CCL only); default is 5, which draws around 100 mA of current
|
||||
82:
|
||||
title: LED Color Code
|
||||
description: Color Codes to be listed (CCL only)
|
||||
83:
|
||||
title: Enable LED Key Highlight (coming soon)
|
||||
description: boolean 0 or 1 (CCL only)
|
||||
84:
|
||||
title: Enable LEDs
|
||||
description: boolean 0 or 1; default is 1 (CCL only)
|
||||
91:
|
||||
title: Operating System
|
||||
description: Operating system codes listed below
|
||||
92:
|
||||
title: Enable Realtime Feedback
|
||||
description: boolean 0 or 1; default is 1
|
||||
93:
|
||||
title: Enable CharaChorder Ready on startup
|
||||
description: boolean 0 or 1; default is 1
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import {compileLayout} from "$lib/serialization/visual-layout"
|
||||
import type {VisualLayout, CompiledLayoutKey} from "$lib/serialization/visual-layout"
|
||||
import {changes, layout} from "$lib/serial/connection"
|
||||
import {deviceLayout} from "$lib/serial/connection"
|
||||
import {dev} from "$app/environment"
|
||||
import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
|
||||
import {get} from "svelte/store"
|
||||
@@ -9,6 +9,7 @@
|
||||
import KeyboardKey from "$lib/components/layout/KeyboardKey.svelte"
|
||||
import {getContext} from "svelte"
|
||||
import type {VisualLayoutConfig} from "./visual-layout.js"
|
||||
import {changes, ChangeType} from "$lib/undo-redo"
|
||||
|
||||
const {scale, margin, strokeWidth, fontSize, iconFontSize} =
|
||||
getContext<VisualLayoutConfig>("visual-layout-config")
|
||||
@@ -114,7 +115,7 @@
|
||||
const clickedGroup = groupParent.children.item(index) as SVGGElement
|
||||
const component = new ActionSelector({
|
||||
target: document.body,
|
||||
props: {currentAction: get(layout)[get(activeLayer)][keyInfo.id]},
|
||||
props: {currentAction: get(deviceLayout)[get(activeLayer)][keyInfo.id]},
|
||||
})
|
||||
const dialog = document.querySelector("dialog > div") as HTMLDivElement
|
||||
const backdrop = document.querySelector("dialog") as HTMLDialogElement
|
||||
@@ -152,7 +153,12 @@
|
||||
component.$on("close", closed)
|
||||
component.$on("select", ({detail}) => {
|
||||
changes.update(changes => {
|
||||
changes.push({layout: {[get(activeLayer)]: {[keyInfo.id]: detail}}})
|
||||
changes.push({
|
||||
type: ChangeType.Layout,
|
||||
id: keyInfo.id,
|
||||
layer: get(activeLayer),
|
||||
action: detail,
|
||||
})
|
||||
return changes
|
||||
})
|
||||
closed()
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {layout} from "$lib/serial/connection"
|
||||
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
|
||||
import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
|
||||
import {popup} from "$lib/popup"
|
||||
import ActionListItem from "$lib/components/ActionListItem.svelte"
|
||||
|
||||
export let id: number = 0
|
||||
</script>
|
||||
|
||||
<table>
|
||||
{#each $layout as layer, i}
|
||||
<tr>
|
||||
<th class="icon">counter_{i + 1}</th>
|
||||
<ActionListItem id={layer[id]} />
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
@@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
import {getActions} from "$lib/components/layout/get-actions.js"
|
||||
import {changes, layout} from "$lib/serial/connection.js"
|
||||
import {getContext} from "svelte"
|
||||
import type {Writable} from "svelte/store"
|
||||
import type {VisualLayoutConfig} from "$lib/components/layout/visual-layout"
|
||||
import type {CompiledLayoutKey} from "$lib/serialization/visual-layout"
|
||||
import {layout} from "$lib/undo-redo.js"
|
||||
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
|
||||
|
||||
const {fontSize, margin, inactiveOpacity, inactiveScale, iconFontSize} =
|
||||
getContext<VisualLayoutConfig>("visual-layout-config")
|
||||
@@ -21,27 +21,28 @@
|
||||
</script>
|
||||
|
||||
{#each positions as position, layer}
|
||||
{@const [action, changed] = getActions(layer, key.id, $layout, $changes)}
|
||||
{@const {action: actionId, isApplied} = $layout[layer][key.id]}
|
||||
{@const {code, icon, id} = KEYMAP_CODES[actionId] ?? {code: actionId}}
|
||||
{@const isActive = layer === $activeLayer}
|
||||
{@const direction = [(middle[0] - margin * 3) / position[0], (middle[1] - margin * 3) / position[1]]}
|
||||
<text
|
||||
fill={changed ? "var(--md-sys-color-primary)" : "currentcolor"}
|
||||
font-weight={changed ? "bold" : ""}
|
||||
fill={isApplied ? "currentcolor" : "var(--md-sys-color-primary)"}
|
||||
font-weight={isApplied ? "" : "bold"}
|
||||
text-anchor="middle"
|
||||
alignment-baseline="central"
|
||||
x={pos[0] + middle[0] + (changed ? fontSize / 3 : 0)}
|
||||
x={pos[0] + middle[0] + (isApplied ? 0 : fontSize / 3)}
|
||||
y={pos[1] + middle[1]}
|
||||
font-size={fontSizeMultiplier * (action.icon ? iconFontSize : fontSize)}
|
||||
font-family={action.icon ? "Material Symbols Rounded" : undefined}
|
||||
font-size={fontSizeMultiplier * (icon ? iconFontSize : fontSize)}
|
||||
font-family={icon ? "Material Symbols Rounded" : undefined}
|
||||
opacity={isActive ? 1 : inactiveOpacity}
|
||||
style:scale={isActive ? 1 : inactiveScale}
|
||||
style:translate={isActive ? "0 0 0" : `${direction[0]}px ${direction[1]}px 0`}
|
||||
style:rotate="{rotate}deg"
|
||||
>
|
||||
{#if action.code !== 0}
|
||||
{action.icon || action.id || `0x${action.code?.toString(16)}`}
|
||||
{#if code !== 0}
|
||||
{icon || id || `0x${code.toString(16)}`}
|
||||
{/if}
|
||||
{#if changed}
|
||||
{#if !isApplied}
|
||||
<tspan>•</tspan>
|
||||
{/if}
|
||||
</text>
|
||||
|
||||
@@ -44,7 +44,6 @@
|
||||
{@const multiplier = 1.25}
|
||||
<g style:transform="rotateZ({key.rotate}deg) translate({innerMargin}px, {innerMargin}px)">
|
||||
<path
|
||||
opacity="0.4"
|
||||
d="M{posX + p1},{posY} a{r1},{r1} 0 0,1 {-p1},{p1} l0,{-(p1 - p2)} a{r2},{r2} 0 0,0 {p2},{-p2}z"
|
||||
/>
|
||||
<KeyText
|
||||
@@ -86,8 +85,8 @@
|
||||
|
||||
path {
|
||||
fill: currentcolor;
|
||||
fill-opacity: 0.2;
|
||||
stroke-opacity: 0.6;
|
||||
fill-opacity: 0;
|
||||
stroke-opacity: 0.3;
|
||||
}
|
||||
|
||||
g:hover {
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
<script>
|
||||
import RingInput from "$lib/components/layout/RingInput.svelte"
|
||||
|
||||
export let activeLayer = 0
|
||||
</script>
|
||||
|
||||
<div class="col layout" style="gap: 0">
|
||||
<div class="row" style="gap: 156px">
|
||||
<div class="row">
|
||||
<RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} />
|
||||
<div class="col">
|
||||
<RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
|
||||
<RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} />
|
||||
</div>
|
||||
<div class="col">
|
||||
<RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
|
||||
<RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} />
|
||||
</div>
|
||||
<RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
|
||||
<div class="col">
|
||||
<RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
|
||||
<RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
|
||||
</div>
|
||||
<div class="col">
|
||||
<RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
|
||||
<RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
|
||||
</div>
|
||||
<RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="gap: 48px; margin-top: -32px">
|
||||
<RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
|
||||
<RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
|
||||
</div>
|
||||
<div class="row" style="gap: 160px">
|
||||
<RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
|
||||
<RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
|
||||
</div>
|
||||
<div class="row" style="gap: 320px; margin-top: -12px">
|
||||
<RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} />
|
||||
<RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.row,
|
||||
.col {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1,186 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {changes, highlightActions, layout} from "$lib/serial/connection"
|
||||
import type {Change} from "$lib/serial/connection"
|
||||
import type {CharaLayout} from "$lib/serialization/layout"
|
||||
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
|
||||
import type {KeyInfo} from "$lib/serial/keymap-codes"
|
||||
import {editableLayout} from "$lib/editable-layout"
|
||||
|
||||
export let activeLayer = 0
|
||||
export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
|
||||
|
||||
const virtualLayerMap = [1, 0, 2]
|
||||
const characterOffset = 8
|
||||
|
||||
function offsetDistance(quadrant: number, layer: number, activeLayer: number): number {
|
||||
const layerOffsetIndex = virtualLayerMap[layer] - virtualLayerMap[activeLayer]
|
||||
const layerOffset = quadrant > 2 ? -characterOffset : characterOffset
|
||||
return 25 * quadrant + layerOffsetIndex * layerOffset
|
||||
}
|
||||
|
||||
function getActions(id: number, layout: CharaLayout, changes: Change[]): [KeyInfo, KeyInfo | undefined][] {
|
||||
return Array.from({length: 3}).map((_, i) => {
|
||||
const actionId = layout?.[i][id]
|
||||
const changedId = changes.findLast(it => it?.layout?.[i]?.[id] !== undefined)?.layout![i]![id]
|
||||
if (changedId !== undefined) {
|
||||
return [KEYMAP_CODES[changedId], KEYMAP_CODES[actionId]]
|
||||
} else {
|
||||
return [KEYMAP_CODES[actionId], undefined]
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="radial">
|
||||
{#each [keys.n, keys.e, keys.s, keys.w, keys.d] as id, quadrant}
|
||||
{@const actions = getActions(id, $layout, $changes)}
|
||||
<button
|
||||
use:editableLayout={{activeLayer, id}}
|
||||
class:active={actions.some(([it]) => it && $highlightActions?.includes(it.code))}
|
||||
>
|
||||
{#each actions as [keyInfo, old], layer}
|
||||
{#if keyInfo}
|
||||
<span
|
||||
class:active={virtualLayerMap[activeLayer] === virtualLayerMap[layer]}
|
||||
class:icon={!!keyInfo.icon}
|
||||
class:changed={!!old}
|
||||
style="offset-distance: {offsetDistance(quadrant, layer, activeLayer)}%"
|
||||
>{keyInfo.icon || keyInfo.id || keyInfo.code}</span
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use "sass:math";
|
||||
|
||||
$border-width: 18px;
|
||||
$gap: 6px;
|
||||
$size: 96;
|
||||
$offset: 14;
|
||||
$scale-difference: 0.2;
|
||||
$transition-time: 750ms;
|
||||
|
||||
.radial {
|
||||
position: relative;
|
||||
|
||||
container: radial / size;
|
||||
|
||||
width: #{$size * 1px};
|
||||
height: #{$size * 1px};
|
||||
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
span {
|
||||
$cr: math.div($size, 2) - 2 * $offset;
|
||||
|
||||
will-change: scale, offset-distance;
|
||||
user-select: none;
|
||||
|
||||
scale: 0.9;
|
||||
offset-path: path(
|
||||
"M#{math.div($size, 2)} #{$offset}A#{$cr} #{$cr} 0 1 1 #{math.div($size, 2)} #{$size - $offset}A#{$cr} #{$cr} 0 1 1 #{math.div($size, 2)} #{$offset}Z"
|
||||
);
|
||||
offset-rotate: 0deg;
|
||||
|
||||
display: flex;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
opacity: 0.2;
|
||||
|
||||
transition:
|
||||
scale $transition-time ease,
|
||||
opacity $transition-time ease,
|
||||
offset-distance $transition-time ease;
|
||||
|
||||
&.active {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
&.changed {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
all: unset;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
position: absolute;
|
||||
|
||||
display: grid;
|
||||
|
||||
width: 100cqw;
|
||||
height: 100cqh;
|
||||
padding: 0;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
border: none;
|
||||
|
||||
transition: all 250ms ease;
|
||||
|
||||
mask-image: url("$lib/assets/quater-ring.svg");
|
||||
mask-size: 100% 100%;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
background: var(--md-sys-color-tertiary);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
clip-path: polygon(50% 50%, 0 100%, 100% 100%);
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
clip-path: polygon(50% 50%, 0 0, 0 100%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 25cqw;
|
||||
height: 25cqh;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
mask-image: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
import type {CharaLayout} from "$lib/serialization/layout"
|
||||
import type {Change} from "$lib/serial/connection"
|
||||
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
|
||||
import type {KeyInfo} from "$lib/serial/keymap-codes"
|
||||
|
||||
export function getActions(
|
||||
layer: number,
|
||||
id: number,
|
||||
layout: CharaLayout,
|
||||
changes: Change[],
|
||||
): [KeyInfo, boolean] {
|
||||
const actionId = layout?.[layer][id]
|
||||
const changedId = changes.findLast(it => it?.layout?.[layer]?.[id] !== undefined)?.layout?.[layer]?.[id]
|
||||
if (changedId !== undefined) {
|
||||
return [KEYMAP_CODES[changedId] ?? {code: changedId}, true]
|
||||
} else {
|
||||
return [KEYMAP_CODES[actionId] ?? {code: actionId}, false]
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import type {Action} from "svelte/action"
|
||||
import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
|
||||
import {changes, layout} from "$lib/serial/connection"
|
||||
import {get} from "svelte/store"
|
||||
|
||||
export const editableLayout: Action<HTMLButtonElement, {activeLayer: number; id: number}> = (
|
||||
node,
|
||||
{id, activeLayer},
|
||||
) => {
|
||||
let component: ActionSelector | undefined
|
||||
function present() {
|
||||
component?.$destroy()
|
||||
component = new ActionSelector({
|
||||
target: document.body,
|
||||
props: {currentAction: get(layout)[activeLayer][id]},
|
||||
})
|
||||
component.$on("close", () => {
|
||||
component!.$destroy()
|
||||
})
|
||||
component.$on("select", ({detail}) => {
|
||||
changes.update(changes => {
|
||||
changes.push({layout: {[activeLayer]: {[id]: detail}}})
|
||||
return changes
|
||||
})
|
||||
component!.$destroy()
|
||||
})
|
||||
}
|
||||
|
||||
node.addEventListener("click", present)
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener("click", present)
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import type {Writable} from "svelte/store"
|
||||
import type {CharaLayout} from "$lib/serialization/layout"
|
||||
import {persistentWritable} from "$lib/storage"
|
||||
import {userPreferences} from "$lib/preferences"
|
||||
import settingInfo from "$lib/assets/settings.yml"
|
||||
|
||||
export const serialPort = writable<CharaDevice | undefined>()
|
||||
|
||||
@@ -15,27 +16,32 @@ export interface SerialLogEntry {
|
||||
|
||||
export const serialLog = writable<SerialLogEntry[]>([])
|
||||
|
||||
export const chords = persistentWritable<Chord[]>("chord-library", [], () => get(userPreferences).backup)
|
||||
/**
|
||||
* Chords as read from the device
|
||||
*/
|
||||
export const deviceChords = persistentWritable<Chord[]>(
|
||||
"chord-library",
|
||||
[],
|
||||
() => get(userPreferences).backup,
|
||||
)
|
||||
|
||||
export const layout = persistentWritable<CharaLayout>(
|
||||
/**
|
||||
* Layout as read from the device
|
||||
*/
|
||||
export const deviceLayout = persistentWritable<CharaLayout>(
|
||||
"layout",
|
||||
[[], [], []],
|
||||
() => get(userPreferences).backup,
|
||||
)
|
||||
|
||||
export interface Change {
|
||||
layout?: Record<number, Record<number, number>>
|
||||
chords?: Array<Record<"delete" | "edit" | "add", Chord>>
|
||||
settings?: Record<number, number>
|
||||
}
|
||||
|
||||
export const changes = persistentWritable<Change[]>("changes", [])
|
||||
|
||||
export const settings = writable({})
|
||||
|
||||
export const unsavedChanges = writable(new Map<number, number>())
|
||||
|
||||
export const highlightActions: Writable<number[]> = writable([])
|
||||
/**
|
||||
* Settings as read from the device
|
||||
*/
|
||||
export const deviceSettings = persistentWritable<number[]>(
|
||||
"device-settings",
|
||||
[],
|
||||
() => get(userPreferences).backup,
|
||||
)
|
||||
|
||||
export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"> = writable("done")
|
||||
|
||||
@@ -45,19 +51,28 @@ export async function initSerial(manual = false) {
|
||||
serialPort.set(device)
|
||||
|
||||
syncStatus.set("downloading")
|
||||
const parsedSettings: number[] = []
|
||||
for (const key in settingInfo.settings) {
|
||||
try {
|
||||
parsedSettings[Number.parseInt(key)] = await device.getSetting(Number.parseInt(key))
|
||||
} catch {}
|
||||
}
|
||||
deviceSettings.set(parsedSettings)
|
||||
|
||||
const parsedLayout: CharaLayout = [[], [], []]
|
||||
for (let layer = 1; layer <= 3; layer++) {
|
||||
// TODO: this will fail for LITE!
|
||||
for (let i = 0; i < 90; i++) {
|
||||
parsedLayout[layer - 1][i] = await device.getLayoutKey(layer, i)
|
||||
}
|
||||
}
|
||||
layout.set(parsedLayout)
|
||||
deviceLayout.set(parsedLayout)
|
||||
|
||||
const chordCount = await device.getChordCount()
|
||||
const chordInfo = []
|
||||
for (let i = 0; i < chordCount; i++) {
|
||||
chordInfo.push(await device.getChord(i))
|
||||
}
|
||||
chords.set(chordInfo)
|
||||
deviceChords.set(chordInfo)
|
||||
syncStatus.set("done")
|
||||
}
|
||||
|
||||
@@ -193,7 +193,7 @@ export class CharaDevice {
|
||||
if (status !== "0") throw new Error(`Failed with status ${status}`)
|
||||
}
|
||||
|
||||
async deleteChord(chord: Chord) {
|
||||
async deleteChord(chord: Pick<Chord, "actions">) {
|
||||
const status = await this.send(`CML C4 ${stringifyChordActions(chord.actions)}`)
|
||||
if (status.at(-1) !== "0") throw new Error(`Failed with status ${status}`)
|
||||
}
|
||||
@@ -205,7 +205,8 @@ export class CharaDevice {
|
||||
* @param action the assigned action id
|
||||
*/
|
||||
async setLayoutKey(layer: number, id: number, action: number) {
|
||||
const [status] = await this.send(`VAR B3 A${layer} ${id} ${action}`)
|
||||
const [status] = await this.send(`VAR B4 A${layer} ${id} ${action}`)
|
||||
console.log(status)
|
||||
if (status !== "0") throw new Error(`Failed with status ${status}`)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import type {Action} from "svelte/action"
|
||||
import {serialPort, unsavedChanges} from "$lib/serial/connection"
|
||||
import {get} from "svelte/store"
|
||||
import {changes, ChangeType, settings} from "$lib/undo-redo"
|
||||
|
||||
export const setting: Action<HTMLInputElement, {id: number; inverse?: number; scale?: number}> = function (
|
||||
node: HTMLInputElement,
|
||||
@@ -9,15 +8,20 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
|
||||
node.setAttribute("disabled", "")
|
||||
const type = node.getAttribute("type") as "number" | "checkbox"
|
||||
|
||||
const unsubscribe = serialPort.subscribe(async port => {
|
||||
if (port) {
|
||||
const unsubscribe = settings.subscribe(async settings => {
|
||||
if (id in settings) {
|
||||
const {value, isApplied} = settings[id]
|
||||
if (type === "number") {
|
||||
const value = Number(await port.getSetting(id).then(it => it.toString()))
|
||||
node.value = (
|
||||
inverse !== undefined ? inverse / value : scale !== undefined ? scale * value : value
|
||||
).toString()
|
||||
} else {
|
||||
node.checked = await port.getSetting(id).then(it => it !== 0)
|
||||
node.checked = value !== 0
|
||||
}
|
||||
if (isApplied) {
|
||||
node.classList.remove("pending-changes")
|
||||
} else {
|
||||
node.classList.add("pending-changes")
|
||||
}
|
||||
node.removeAttribute("disabled")
|
||||
} else {
|
||||
@@ -26,8 +30,7 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
|
||||
})
|
||||
|
||||
async function listener(event: Event) {
|
||||
const currentValue = await get(serialPort)!.getSetting(id)
|
||||
let value = 0
|
||||
let value: number
|
||||
if (type === "number") {
|
||||
value = Number((event as InputEvent).data)
|
||||
if (Number.isNaN(value)) return
|
||||
@@ -35,16 +38,14 @@ export const setting: Action<HTMLInputElement, {id: number; inverse?: number; sc
|
||||
} else {
|
||||
value = node.checked ? 1 : 0
|
||||
}
|
||||
await get(serialPort)!.setSetting(id, value)
|
||||
|
||||
const originalValue = get(unsavedChanges).get(id)
|
||||
unsavedChanges.update(it => {
|
||||
if (originalValue === value) {
|
||||
it.delete(id)
|
||||
} else if (!it.has(id)) {
|
||||
it.set(id, currentValue)
|
||||
}
|
||||
return it
|
||||
changes.update(changes => {
|
||||
changes.push({
|
||||
type: ChangeType.Setting,
|
||||
id: id,
|
||||
setting: value,
|
||||
})
|
||||
return changes
|
||||
})
|
||||
}
|
||||
node.addEventListener("input", listener)
|
||||
|
||||
109
src/lib/undo-redo.ts
Normal file
109
src/lib/undo-redo.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import {persistentWritable} from "$lib/storage"
|
||||
import {derived} from "svelte/store"
|
||||
import {serializeActions} from "$lib/serial/chord"
|
||||
import type {Chord} from "$lib/serial/chord"
|
||||
import {deviceChords, deviceLayout, deviceSettings} from "$lib/serial/connection"
|
||||
|
||||
export enum ChangeType {
|
||||
Layout,
|
||||
Chord,
|
||||
Setting,
|
||||
}
|
||||
|
||||
export interface LayoutChange {
|
||||
type: ChangeType.Layout
|
||||
id: number
|
||||
layer: number
|
||||
action: number
|
||||
}
|
||||
|
||||
export interface ChordChange {
|
||||
type: ChangeType.Chord
|
||||
actions: number[]
|
||||
phrase: number[]
|
||||
}
|
||||
|
||||
export interface SettingChange {
|
||||
type: ChangeType.Setting
|
||||
id: number
|
||||
setting: number
|
||||
}
|
||||
|
||||
export interface ChangeInfo {
|
||||
isApplied: boolean
|
||||
isCommitted?: boolean
|
||||
}
|
||||
|
||||
export type Change = LayoutChange | ChordChange | SettingChange
|
||||
|
||||
export const changes = persistentWritable<Change[]>("changes", [])
|
||||
|
||||
export interface Overlay {
|
||||
layout: [Map<number, number>, Map<number, number>, Map<number, number>]
|
||||
chords: Map<bigint, number[]>
|
||||
settings: Map<number, number>
|
||||
}
|
||||
|
||||
export const overlay = derived(changes, changes => {
|
||||
console.time("overlay building")
|
||||
const overlay: Overlay = {
|
||||
layout: [new Map(), new Map(), new Map()],
|
||||
chords: new Map(),
|
||||
settings: new Map(),
|
||||
}
|
||||
|
||||
for (const change of changes) {
|
||||
switch (change.type) {
|
||||
case ChangeType.Layout:
|
||||
overlay.layout[change.layer].set(change.id, change.action)
|
||||
break
|
||||
case ChangeType.Chord:
|
||||
overlay.chords.set(serializeActions(change.actions), change.phrase)
|
||||
break
|
||||
case ChangeType.Setting:
|
||||
overlay.settings.set(change.id, change.setting)
|
||||
break
|
||||
}
|
||||
}
|
||||
console.timeEnd("overlay building")
|
||||
|
||||
return overlay
|
||||
})
|
||||
|
||||
export const settings = derived([overlay, deviceSettings], ([overlay, settings]) =>
|
||||
settings.map<{value: number} & ChangeInfo>((value, id) => ({
|
||||
value: overlay.settings.get(id) ?? value,
|
||||
isApplied: !overlay.settings.has(id),
|
||||
})),
|
||||
)
|
||||
|
||||
export type KeyInfo = {action: number} & ChangeInfo
|
||||
export const layout = derived([overlay, deviceLayout], ([overlay, layout]) =>
|
||||
layout.map(
|
||||
(actions, layer) =>
|
||||
actions.map<KeyInfo>((action, id) => ({
|
||||
action: overlay.layout[layer].get(id) ?? action,
|
||||
isApplied: !overlay.layout[layer].has(id),
|
||||
})) as [KeyInfo, KeyInfo, KeyInfo],
|
||||
),
|
||||
)
|
||||
|
||||
export type ChordInfo = Chord & ChangeInfo
|
||||
export const chords = derived([overlay, deviceChords], ([overlay, chords]) =>
|
||||
chords.map<ChordInfo>(chord => {
|
||||
const key = serializeActions(chord.actions)
|
||||
if (overlay.chords.has(key)) {
|
||||
return {
|
||||
actions: chord.actions,
|
||||
phrase: overlay.chords.get(key)!,
|
||||
isApplied: false,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
actions: chord.actions,
|
||||
phrase: chord.phrase,
|
||||
isApplied: true,
|
||||
}
|
||||
}
|
||||
}),
|
||||
)
|
||||
1
src/lib/versioning.ts
Normal file
1
src/lib/versioning.ts
Normal file
@@ -0,0 +1 @@
|
||||
// TODO
|
||||
Reference in New Issue
Block a user