mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-22 01:42:47 +00:00
feat: cv2
This commit is contained in:
34
package.json
34
package.json
@@ -35,25 +35,27 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@codemirror/autocomplete": "^6.20.0",
|
||||
"@codemirror/collab": "^6.1.1",
|
||||
"@codemirror/commands": "^6.10.1",
|
||||
"@codemirror/lang-javascript": "^6.2.4",
|
||||
"@codemirror/language": "^6.11.3",
|
||||
"@codemirror/language": "^6.12.1",
|
||||
"@codemirror/lint": "^6.9.2",
|
||||
"@codemirror/merge": "^6.11.2",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/view": "^6.39.4",
|
||||
"@codemirror/state": "^6.5.3",
|
||||
"@codemirror/view": "^6.39.9",
|
||||
"@fontsource-variable/material-symbols-rounded": "^5.2.30",
|
||||
"@fontsource-variable/noto-sans-mono": "^5.2.10",
|
||||
"@lezer/common": "^1.4.0",
|
||||
"@lezer/common": "^1.5.0",
|
||||
"@lezer/generator": "^1.8.0",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@lezer/lr": "^1.4.5",
|
||||
"@lezer/lr": "^1.4.7",
|
||||
"@material/material-color-utilities": "^0.3.0",
|
||||
"@melt-ui/pp": "^0.3.2",
|
||||
"@melt-ui/svelte": "^0.86.6",
|
||||
"@modyfi/vite-plugin-yaml": "^1.1.1",
|
||||
"@sveltejs/adapter-static": "^3.0.10",
|
||||
"@sveltejs/kit": "^2.49.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
||||
"@sveltejs/kit": "^2.49.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.3",
|
||||
"@tauri-apps/api": "^1.6.0",
|
||||
"@tauri-apps/cli": "^1.6.0",
|
||||
"@types/dom-view-transitions": "^1.0.6",
|
||||
@@ -76,29 +78,29 @@
|
||||
"matrix-js-sdk": "^37.12.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.7.4",
|
||||
"prettier-plugin-css-order": "^2.1.2",
|
||||
"prettier-plugin-css-order": "^2.2.0",
|
||||
"prettier-plugin-svelte": "^3.4.1",
|
||||
"rxjs": "^7.8.2",
|
||||
"sass": "^1.97.0",
|
||||
"sass": "^1.97.2",
|
||||
"semver": "^7.7.3",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"stylelint": "^16.26.1",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-prettier-scss": "^1.0.0",
|
||||
"stylelint-config-recommended-scss": "^16.0.2",
|
||||
"stylelint-config-standard-scss": "^16.0.0",
|
||||
"svelte": "5.37.1",
|
||||
"svelte-check": "^4.3.4",
|
||||
"svelte": "5.46.1",
|
||||
"svelte-check": "^4.3.5",
|
||||
"svelte-preprocess": "^6.0.3",
|
||||
"tippy.js": "^6.3.7",
|
||||
"typesafe-i18n": "^5.26.2",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^7.0.6",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.3.1",
|
||||
"vite-plugin-mkcert": "^1.17.9",
|
||||
"vite-plugin-pwa": "^1.0.2",
|
||||
"vite-plugin-pwa": "^1.2.0",
|
||||
"vitest": "^4.0.16",
|
||||
"web-serial-polyfill": "^1.0.15",
|
||||
"workbox-window": "^7.3.0"
|
||||
"workbox-window": "^7.4.0"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
||||
808
pnpm-lock.yaml
generated
808
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
196
src/lib/chord-editor/action-linter.ts
Normal file
196
src/lib/chord-editor/action-linter.ts
Normal file
@@ -0,0 +1,196 @@
|
||||
import {
|
||||
KEYMAP_CODES,
|
||||
KEYMAP_IDS,
|
||||
type KeyInfo,
|
||||
} from "$lib/serial/keymap-codes";
|
||||
import { syntaxTree } from "@codemirror/language";
|
||||
import { linter, type Diagnostic } from "@codemirror/lint";
|
||||
import { derived, get } from "svelte/store";
|
||||
import { parseCharaChords } from "./action-serializer";
|
||||
import { deviceChords } from "$lib/serial/connection";
|
||||
|
||||
export const actionLinterDependencies = derived(
|
||||
[KEYMAP_IDS, KEYMAP_CODES, deviceChords],
|
||||
(it) => it,
|
||||
);
|
||||
|
||||
export const actionLinter = linter(
|
||||
(view) => {
|
||||
const diagnostics: Diagnostic[] = [];
|
||||
const [ids, codes, deviceChords] = get(actionLinterDependencies);
|
||||
|
||||
const { meta, compoundInputs } = parseCharaChords(view.state, ids);
|
||||
|
||||
syntaxTree(view.state)
|
||||
.cursor()
|
||||
.iterate((node) => {
|
||||
let action: KeyInfo | undefined = undefined;
|
||||
switch (node.name) {
|
||||
case "SingleLetter": {
|
||||
action = ids.get(view.state.doc.sliceString(node.from, node.to));
|
||||
break;
|
||||
}
|
||||
case "ActionId": {
|
||||
action = ids.get(view.state.doc.sliceString(node.from, node.to));
|
||||
break;
|
||||
}
|
||||
case "HexNumber": {
|
||||
const hexString = view.state.doc.sliceString(node.from, node.to);
|
||||
const code = Number.parseInt(hexString, 16);
|
||||
if (hexString.length === 10) {
|
||||
if (compoundInputs.has(code)) {
|
||||
diagnostics.push({
|
||||
from: node.from,
|
||||
to: node.to,
|
||||
severity: "info",
|
||||
message: "Compound hash literal can be expanded",
|
||||
actions: [
|
||||
{
|
||||
name: "Expand",
|
||||
apply(view, from, to) {
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: from - 1,
|
||||
to: to + 1,
|
||||
insert: compoundInputs.get(code)! + "|",
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(code >= 0 && code <= 1023)) {
|
||||
diagnostics.push({
|
||||
from: node.from,
|
||||
to: node.to,
|
||||
severity: "error",
|
||||
message: "Hex code invalid (out of range)",
|
||||
actions: [
|
||||
{
|
||||
name: "Remove",
|
||||
apply(view, from, to) {
|
||||
view.dispatch({ changes: { from, to } });
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
action = codes.get(code);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
return;
|
||||
}
|
||||
if (!action) {
|
||||
const action = view.state.doc.sliceString(node.from, node.to);
|
||||
diagnostics.push({
|
||||
from: node.from,
|
||||
to: node.to,
|
||||
severity: node.name === "HexNumber" ? "warning" : "error",
|
||||
message: `Unknown action: ${action}`,
|
||||
actions: [
|
||||
...(node.name === "SingleLetter"
|
||||
? ([
|
||||
{
|
||||
name: "Generate Windows Hex Numpad Code",
|
||||
apply(view, from, to) {
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from,
|
||||
to,
|
||||
insert:
|
||||
"<PRESS_NEXT><LEFT_ALT><KP_PLUS>" +
|
||||
action
|
||||
.codePointAt(0)!
|
||||
.toString(16)
|
||||
.split("")
|
||||
.map((c) =>
|
||||
/^\d$/.test(c)
|
||||
? `<KP_${c}>`
|
||||
: c.toLowerCase(),
|
||||
)
|
||||
.join("") +
|
||||
"<RELEASE_NEXT><LEFT_ALT>",
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
] satisfies Diagnostic["actions"])
|
||||
: []),
|
||||
],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
for (const m of meta) {
|
||||
if (m.invalidActions) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "error",
|
||||
markClass: "chord-invalid",
|
||||
message: `Chord contains invalid actions`,
|
||||
});
|
||||
}
|
||||
if (m.invalidInput) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "error",
|
||||
markClass: "chord-invalid",
|
||||
message: `Chord input is invalid`,
|
||||
});
|
||||
}
|
||||
if (m.emptyPhrase) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "warning",
|
||||
message: `Chord phrase is empty`,
|
||||
});
|
||||
}
|
||||
if (m.overriddenBy) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "warning",
|
||||
message: `Chord overridden by previous chord`,
|
||||
});
|
||||
}
|
||||
if (m.orphan) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "warning",
|
||||
message: `Orphan compound chord`,
|
||||
});
|
||||
}
|
||||
if (m.disabled) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "info",
|
||||
markClass: "chord-ignored",
|
||||
message: `Chord disabled`,
|
||||
});
|
||||
}
|
||||
if ((m.overrides?.length ?? 0) > 0) {
|
||||
diagnostics.push({
|
||||
from: m.from,
|
||||
to: m.to,
|
||||
severity: "info",
|
||||
message: `Chord overrides other chords`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return diagnostics;
|
||||
},
|
||||
{ delay: 100 },
|
||||
);
|
||||
@@ -56,18 +56,16 @@ function actionWidgets(view: EditorView) {
|
||||
enter: (node) => {
|
||||
if (node.name !== "ExplicitAction") return;
|
||||
const value =
|
||||
node.node.getChild("ActionId") ??
|
||||
node.node.getChild("HexNumber") ??
|
||||
node.node.getChild("DecimalNumber");
|
||||
node.node.getChild("ActionId") ?? node.node.getChild("HexNumber");
|
||||
if (!value) return;
|
||||
if (!node.node.getChild("ExplicitDelimEnd")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const id = view.state.doc.sliceString(value.from, value.to);
|
||||
if (value.name === "HexNumber" && id.length === 10) return;
|
||||
let deco = Decoration.replace({
|
||||
widget: new ActionWidget(
|
||||
value.name === "ActionId" ? id : parseInt(id),
|
||||
value.name === "ActionId" ? id : Number.parseInt(id, 16),
|
||||
),
|
||||
});
|
||||
widgets.push(deco.range(node.from, node.to));
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
|
||||
import {
|
||||
KEYMAP_CODES,
|
||||
KEYMAP_IDS,
|
||||
type KeyInfo,
|
||||
} from "$lib/serial/keymap-codes";
|
||||
import type { CharaChordFile } from "$lib/share/chara-file";
|
||||
import { syntaxTree } from "@codemirror/language";
|
||||
import { StateEffect, ChangeDesc, type EditorState } from "@codemirror/state";
|
||||
import type { Update } from "@codemirror/collab";
|
||||
import { get } from "svelte/store";
|
||||
import {
|
||||
composeChordInput,
|
||||
hashChord,
|
||||
splitCompound,
|
||||
willBeValidChordInput,
|
||||
} from "$lib/serial/chord";
|
||||
import type { SyntaxNodeRef } from "@lezer/common";
|
||||
|
||||
export function canUseIdAsString(info: KeyInfo): boolean {
|
||||
return !!info.id && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(info.id);
|
||||
@@ -9,8 +24,270 @@ export function actionToValue(action: number | KeyInfo) {
|
||||
const info =
|
||||
typeof action === "number" ? get(KEYMAP_CODES).get(action) : action;
|
||||
if (info && info.id?.length === 1)
|
||||
return /^[<>\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
|
||||
return /^[<>|\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
|
||||
if (!info || !canUseIdAsString(info))
|
||||
return `<0x${(info?.code ?? action).toString(16).padStart(2, "0")}>`;
|
||||
return `<${info.id}>`;
|
||||
}
|
||||
|
||||
export interface ParseMeta {
|
||||
from: number;
|
||||
to: number;
|
||||
invalidActions?: true;
|
||||
invalidInput?: true;
|
||||
emptyPhrase?: true;
|
||||
orphan?: true;
|
||||
disabled?: true;
|
||||
overrides?: number[];
|
||||
overriddenBy?: number;
|
||||
}
|
||||
|
||||
export interface ParseResult {
|
||||
result: CharaChordFile["chords"];
|
||||
meta: ParseMeta[];
|
||||
compoundInputs: Map<number, string>;
|
||||
}
|
||||
|
||||
export function parseCharaChords(
|
||||
data: EditorState,
|
||||
ids: Map<string, KeyInfo>,
|
||||
): ParseResult {
|
||||
const chords: CharaChordFile["chords"] = [];
|
||||
const metas: ParseMeta[] = [];
|
||||
const keys = new Map<string, number>();
|
||||
const compoundInputs = new Map<number, string>();
|
||||
|
||||
let currentChord: CharaChordFile["chords"][number] | undefined = undefined;
|
||||
let compound: number | undefined = undefined;
|
||||
let currentActions: number[] = [];
|
||||
let invalidActions = false;
|
||||
let invalidInput = false;
|
||||
let chordFrom = 0;
|
||||
|
||||
function makeChordInput(node: SyntaxNodeRef): number[] {
|
||||
invalidInput ||= !willBeValidChordInput(currentActions.length, !!compound);
|
||||
const input = composeChordInput(currentActions, compound);
|
||||
compound = hashChord(input);
|
||||
if (!compoundInputs.has(compound)) {
|
||||
compoundInputs.set(compound, data.doc.sliceString(chordFrom, node.from));
|
||||
}
|
||||
return input;
|
||||
}
|
||||
|
||||
syntaxTree(data)
|
||||
.cursor()
|
||||
.iterate(
|
||||
(node) => {
|
||||
if (node.name === "Chord") {
|
||||
currentChord = undefined;
|
||||
compound = undefined;
|
||||
invalidActions = false;
|
||||
invalidInput = false;
|
||||
chordFrom = node.from;
|
||||
} else if (node.name === "ActionString") {
|
||||
currentActions = [];
|
||||
} else if (node.name === "HexNumber") {
|
||||
const hexString = data.doc.sliceString(node.from, node.to);
|
||||
const code = Number.parseInt(hexString, 16);
|
||||
if (hexString.length === 10) {
|
||||
if (compound !== undefined) {
|
||||
invalidInput = true;
|
||||
}
|
||||
compound = code;
|
||||
} else {
|
||||
if (Number.isNaN(code) || code < 0 || code > 1023) {
|
||||
invalidActions = true;
|
||||
}
|
||||
currentActions.push(code);
|
||||
}
|
||||
} else if (
|
||||
node.name === "ActionId" ||
|
||||
node.name === "SingleLetter" ||
|
||||
node.name === "EscapedChar"
|
||||
) {
|
||||
const id = data.doc.sliceString(node.from, node.to);
|
||||
const code = ids.get(id)?.code;
|
||||
if (code === undefined) {
|
||||
invalidActions = true;
|
||||
const encoder = new TextEncoder();
|
||||
const bytes = encoder.encode(id);
|
||||
for (let byte of bytes) {
|
||||
currentActions.push(-byte);
|
||||
}
|
||||
} else {
|
||||
currentActions.push(code);
|
||||
}
|
||||
}
|
||||
},
|
||||
(node) => {
|
||||
if (node.name === "Chord" && currentChord !== undefined) {
|
||||
if (currentChord !== undefined) {
|
||||
currentChord[1] = currentActions;
|
||||
const index = chords.length;
|
||||
chords.push(currentChord);
|
||||
const meta: ParseMeta = { from: node.from, to: node.to };
|
||||
if (invalidActions) {
|
||||
meta.invalidActions = true;
|
||||
}
|
||||
if (invalidInput) {
|
||||
meta.invalidInput = true;
|
||||
}
|
||||
metas.push(meta);
|
||||
if (currentChord[1].length === 0) {
|
||||
meta.emptyPhrase = true;
|
||||
}
|
||||
const key = JSON.stringify(currentChord[0]);
|
||||
if (!meta.invalidInput) {
|
||||
if (keys.has(key)) {
|
||||
const targetIndex = keys.get(key)!;
|
||||
const targetMeta = metas[targetIndex]!;
|
||||
if (!targetMeta.overrides) targetMeta.overrides = [];
|
||||
targetMeta.overrides.push(index);
|
||||
meta.overriddenBy = targetIndex;
|
||||
} else {
|
||||
keys.set(key, index);
|
||||
}
|
||||
}
|
||||
if (
|
||||
meta.emptyPhrase ||
|
||||
meta.invalidInput ||
|
||||
meta.invalidActions ||
|
||||
meta.overriddenBy !== undefined
|
||||
) {
|
||||
meta.disabled = true;
|
||||
}
|
||||
}
|
||||
} else if (node.name === "CompoundDelim") {
|
||||
makeChordInput(node);
|
||||
} else if (node.name === "PhraseDelim") {
|
||||
const input = makeChordInput(node);
|
||||
currentChord = [composeChordInput(input, compound), []];
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
for (let i = 0; i < metas.length; i++) {
|
||||
const [, compound] = splitCompound(chords[i]![0]);
|
||||
if (compound !== undefined && !compoundInputs.has(compound)) {
|
||||
metas[i]!.orphan = true;
|
||||
}
|
||||
}
|
||||
|
||||
return { result: chords, meta: metas, compoundInputs };
|
||||
}
|
||||
|
||||
class ChordRecord {
|
||||
private chords = new Map<string, Set<string>>();
|
||||
|
||||
constructor(chords: CharaChordFile["chords"]) {
|
||||
for (let chord of chords) {
|
||||
const key = JSON.stringify(chord[0]);
|
||||
if (!this.chords.has(key)) {
|
||||
this.chords.set(key, new Set());
|
||||
}
|
||||
this.chords.get(key)!.add(JSON.stringify(chord));
|
||||
}
|
||||
}
|
||||
|
||||
static createDiff(
|
||||
previous: CharaChordFile["chords"],
|
||||
updated: CharaChordFile["chords"],
|
||||
) {
|
||||
const deleted = new ChordRecord(previous);
|
||||
const added = new ChordRecord(updated);
|
||||
const dupA = deleted.duplicates(added);
|
||||
const dupB = added.duplicates(deleted);
|
||||
for (let chord of dupA) {
|
||||
deleted.remove(chord);
|
||||
added.remove(chord);
|
||||
}
|
||||
for (let chord of dupB) {
|
||||
deleted.remove(chord);
|
||||
added.remove(chord);
|
||||
}
|
||||
return { deleted, added };
|
||||
}
|
||||
|
||||
duplicates(
|
||||
other: ChordRecord,
|
||||
): IteratorObject<CharaChordFile["chords"][number]> {
|
||||
const duplicates = new Set<string>();
|
||||
for (let [key, chordSet] of this.chords) {
|
||||
for (let chord of chordSet) {
|
||||
if (other.hasInternal(key, chord)) {
|
||||
duplicates.add(chord);
|
||||
}
|
||||
}
|
||||
}
|
||||
return duplicates
|
||||
.values()
|
||||
.map((it) => JSON.parse(it) as CharaChordFile["chords"][number]);
|
||||
}
|
||||
|
||||
private hasInternal(key: string, chord: string): boolean {
|
||||
return this.chords.get(key)?.has(chord) ?? false;
|
||||
}
|
||||
|
||||
has(chord: CharaChordFile["chords"][number]): boolean {
|
||||
return this.hasInternal(JSON.stringify(chord[0]), JSON.stringify(chord));
|
||||
}
|
||||
|
||||
remove(chord: CharaChordFile["chords"][number]) {
|
||||
const key = JSON.stringify(chord[0]);
|
||||
const set = this.chords.get(key);
|
||||
if (set) {
|
||||
set.delete(JSON.stringify(chord));
|
||||
if (set.size === 0) {
|
||||
this.chords.delete(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function syncChords(
|
||||
previous: CharaChordFile["chords"],
|
||||
updated: CharaChordFile["chords"],
|
||||
state: EditorState,
|
||||
) {
|
||||
const deviceDiff = ChordRecord.createDiff(previous, updated);
|
||||
const current = parseCharaChords(state, get(KEYMAP_IDS));
|
||||
// save initial device chords
|
||||
// compare new device chords with initial device chords
|
||||
// take changed/new/removed chords
|
||||
// compare current editor chords with initial device chords
|
||||
// compare two change sets
|
||||
// apply removals if the chord didn't change on either end
|
||||
// apply
|
||||
}
|
||||
|
||||
export function rebaseUpdates(
|
||||
updates: readonly Update[],
|
||||
over: readonly { changes: ChangeDesc; clientID: string }[],
|
||||
) {
|
||||
if (!over.length || !updates.length) return updates;
|
||||
let changes: ChangeDesc | null = null,
|
||||
skip = 0;
|
||||
for (let update of over) {
|
||||
let other = skip < updates.length ? updates[skip] : null;
|
||||
if (other && other.clientID == update.clientID) {
|
||||
if (changes) changes = changes.mapDesc(other.changes, true);
|
||||
skip++;
|
||||
} else {
|
||||
changes = changes ? changes.composeDesc(update.changes) : update.changes;
|
||||
}
|
||||
}
|
||||
|
||||
if (skip) updates = updates.slice(skip);
|
||||
return !changes
|
||||
? updates
|
||||
: updates.map((update) => {
|
||||
let updateChanges = update.changes.map(changes!);
|
||||
changes = changes!.mapDesc(update.changes, true);
|
||||
return {
|
||||
changes: updateChanges,
|
||||
effects:
|
||||
update.effects && StateEffect.mapEffects(update.effects, changes!),
|
||||
clientID: update.clientID,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,72 +1,39 @@
|
||||
import { KEYMAP_CATEGORIES, KEYMAP_CODES } from "$lib/serial/keymap-codes";
|
||||
import type {
|
||||
Completion,
|
||||
CompletionSection,
|
||||
CompletionSource,
|
||||
} from "@codemirror/autocomplete";
|
||||
import { derived, get } from "svelte/store";
|
||||
import { actionToValue, canUseIdAsString } from "./action-serializer";
|
||||
import {
|
||||
EditorView,
|
||||
ViewPlugin,
|
||||
ViewUpdate,
|
||||
type PluginValue,
|
||||
} from "@codemirror/view";
|
||||
import { syntaxTree } from "@codemirror/language";
|
||||
import type { EditorState } from "@codemirror/state";
|
||||
|
||||
const completionSections = derived(
|
||||
KEYMAP_CATEGORIES,
|
||||
(categories) =>
|
||||
new Map(
|
||||
categories.map(
|
||||
(category) =>
|
||||
[
|
||||
category,
|
||||
{
|
||||
name: category.name,
|
||||
} satisfies CompletionSection,
|
||||
] as const,
|
||||
),
|
||||
),
|
||||
);
|
||||
export function actionAutocompletePlugin(
|
||||
query: (query: string | undefined) => void,
|
||||
) {
|
||||
return ViewPlugin.fromClass(
|
||||
class implements PluginValue {
|
||||
constructor(readonly view: EditorView) {}
|
||||
|
||||
export const actionAutocompleteItems = derived(
|
||||
[KEYMAP_CODES, completionSections],
|
||||
([codes, sections]) =>
|
||||
codes
|
||||
.values()
|
||||
.map((info) => {
|
||||
const canUseId = canUseIdAsString(info);
|
||||
const completionValue =
|
||||
(canUseId && info.id) ||
|
||||
`0x${info.code.toString(16).padStart(2, "0")}`;
|
||||
return {
|
||||
label:
|
||||
[
|
||||
canUseId || !info.id ? undefined : `"${info.id}"`,
|
||||
info.title,
|
||||
info.variant?.replace(/^[a-z]/g, (c) => c.toUpperCase()),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ") || completionValue,
|
||||
detail: actionToValue(info),
|
||||
section: info.category ? sections.get(info.category) : undefined,
|
||||
info: info.description,
|
||||
type: "keyword",
|
||||
apply: completionValue + ">",
|
||||
} satisfies Completion;
|
||||
})
|
||||
.filter(
|
||||
(item) => typeof item.label === "string" && item.apply !== undefined,
|
||||
)
|
||||
.toArray(),
|
||||
);
|
||||
update(update: ViewUpdate) {
|
||||
query(this.resolveAutocomplete(update.state));
|
||||
}
|
||||
|
||||
export const actionAutocomplete = ((context) => {
|
||||
let word = context.tokenBefore([
|
||||
"ExplicitDelimStart",
|
||||
"ActionId",
|
||||
"HexNumber",
|
||||
"DecimalNumber",
|
||||
]);
|
||||
if (!word) return null;
|
||||
console.log(get(actionAutocompleteItems));
|
||||
return {
|
||||
from: word.type.name === "ExplicitDelimStart" ? word.to : word.from,
|
||||
validFor: /^<?[a-zA-Z0-9_]*$/,
|
||||
options: get(actionAutocompleteItems),
|
||||
};
|
||||
}) satisfies CompletionSource;
|
||||
resolveAutocomplete(state: EditorState): string | undefined {
|
||||
if (state.selection.ranges.length !== 1) return;
|
||||
const from = state.selection.ranges[0]!.from;
|
||||
const to = state.selection.ranges[0]!.to;
|
||||
if (from !== to) return;
|
||||
const tree = syntaxTree(state);
|
||||
const node = tree.resolveInner(from, -1).parent;
|
||||
if (node?.name !== "ExplicitAction") return;
|
||||
if (node.getChild("ExplicitDelimEnd")) return;
|
||||
const queryNode = node.getChild("ExplicitDelimStart")?.nextSibling;
|
||||
return (
|
||||
(queryNode
|
||||
? state.doc.sliceString(queryNode.from, queryNode.to)
|
||||
: undefined) || undefined
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@ export class DelimWidget extends WidgetType {
|
||||
|
||||
toDOM() {
|
||||
if (!this.element) {
|
||||
this.element = document.createElement("span");
|
||||
/*this.element = document.createElement("span");
|
||||
this.element.innerHTML =
|
||||
" ⇛" + (this.hasConcatenator ? "" : " ");
|
||||
this.element.style.scale = "1.8";
|
||||
@@ -41,7 +41,9 @@ export class DelimWidget extends WidgetType {
|
||||
props: { action: 574, display: "keys", inText: true, ghost: true },
|
||||
});
|
||||
this.element.appendChild(button);
|
||||
}
|
||||
}*/
|
||||
this.element = document.createElement("div");
|
||||
this.element.style.breakAfter = "column";
|
||||
}
|
||||
return this.element;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
HighlightStyle,
|
||||
} from "@codemirror/language";
|
||||
import { styleTags, tags } from "@lezer/highlight";
|
||||
import { actionAutocomplete } from "./autocomplete";
|
||||
|
||||
export const chordHighlightStyle = HighlightStyle.define([
|
||||
{
|
||||
@@ -51,7 +50,5 @@ export const chordLanguage = LRLanguage.define({
|
||||
});
|
||||
|
||||
export function chordLanguageSupport() {
|
||||
return new LanguageSupport(chordLanguage, [
|
||||
chordLanguage.data.of({ autocomplete: actionAutocomplete }),
|
||||
]);
|
||||
return new LanguageSupport(chordLanguage, [chordLanguage.data.of({})]);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@top Program { Chord* }
|
||||
|
||||
ExplicitAction { ExplicitDelimStart (HexNumber | DecimalNumber | ActionId) ExplicitDelimEnd }
|
||||
ExplicitAction { ExplicitDelimStart (HexNumber | ActionId) ExplicitDelimEnd }
|
||||
EscapedSingleAction { Escape EscapedLetter }
|
||||
Action { SingleLetter | ExplicitAction | EscapedSingleAction }
|
||||
ActionString { Action* }
|
||||
@@ -9,16 +9,15 @@ ChordPhrase { ActionString }
|
||||
Chord { ChordInput PhraseDelim ChordPhrase ChordDelim }
|
||||
|
||||
@tokens {
|
||||
@precedence {HexNumber, DecimalNumber}
|
||||
@precedence {HexNumber}
|
||||
@precedence {CompoundDelim, PhraseDelim, ExplicitDelimStart, ChordDelim, SingleLetter}
|
||||
@precedence {EscapedLetter}
|
||||
ExplicitDelimStart {"<"}
|
||||
ExplicitDelimEnd {">"}
|
||||
CompoundDelim {"+>"}
|
||||
CompoundDelim {"|"}
|
||||
PhraseDelim {"=>"}
|
||||
Escape { "\\" }
|
||||
HexNumber { "0x" $[a-fA-F0-9]+ }
|
||||
DecimalNumber { $[0-9]+ }
|
||||
ActionId { $[a-zA-Z_]$[a-zA-Z0-9_]* }
|
||||
SingleLetter { ![\\] }
|
||||
EscapedLetter { ![] }
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
.=<LEFT_SHIFT> => =>
|
||||
;ims => <0x219><IMPULSE>
|
||||
-;<KSC_2C><LEFT_SHIFT> => <0x23e>_<0x23e>
|
||||
.;g => <0x23e>...<0x23e><LH_THUMB_3_3D>
|
||||
'dg => <0x23e>'<0x23e>
|
||||
'gl => <0x23e>'ll<0x23e>
|
||||
'ar => <0x23e>'re<0x23e>
|
||||
'gs => <0x23e>'s<0x23e>
|
||||
'ev => <0x23e>'ve<0x23e>
|
||||
<SPACE>-; => <0x23e><0x223>-<0x223><KSC_00>
|
||||
<SPACE>;<LEFT_SHIFT> => <0x23e><0x223><0x23d><0x223><KSC_00>
|
||||
<SPACE>;g => <0x23e><0x223><SPACE><0x223><KSC_00>
|
||||
deg => <0x23e>ed<0x23e>
|
||||
;gr => <0x23e>er<0x23e>
|
||||
;es => <0x23e>es<0x23e>
|
||||
;est => <0x23e>est<0x23e>
|
||||
a|.=<LEFT_SHIFT>=>t=t
|
||||
;ims=<0x219><IMPULSE>
|
||||
-;<KSC_2C><LEFT_SHIFT>=><0x23e>_<0x23e>
|
||||
.;g=><0x23e>...<0x23e><LH_THUMB_3_3D>
|
||||
'dg=><0x23e>'<0x23e>
|
||||
'gl=><0x23e>'ll<0x23e>
|
||||
'ar=><0x23e>'re<0x23e>
|
||||
'gs=><0x23e>'s<0x23e>
|
||||
'ev=><0x23e>'ve<0x23e>
|
||||
<SPACE>-;=><0x23e><0x223>-<0x223><KSC_00>
|
||||
<SPACE>;<LEFT_SHIFT>=><0x23e><0x223><0x23d><0x223><KSC_00>
|
||||
<SPACE>;g=><0x23e><0x223><SPACE><0x223><KSC_00>
|
||||
deg=><0x23e>ed<0x23e>
|
||||
;gr=><0x23e>er<0x23e>
|
||||
;es=><0x23e>es<0x23e>
|
||||
;est=><0x23e>est<0x23e>
|
||||
|
||||
@@ -8,10 +8,12 @@
|
||||
let {
|
||||
action,
|
||||
display,
|
||||
ignoreIcon = false,
|
||||
inText = false,
|
||||
}: {
|
||||
action: string | number | KeyInfo;
|
||||
display: "inline-keys" | "keys" | "verbose";
|
||||
ignoreIcon?: boolean;
|
||||
inText?: boolean;
|
||||
} = $props();
|
||||
|
||||
@@ -30,6 +32,7 @@
|
||||
? ({ code: 1024, id: action } satisfies KeyInfo)
|
||||
: action),
|
||||
);
|
||||
let icon = $derived(ignoreIcon ? undefined : info.icon);
|
||||
let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
|
||||
let hasPopover = $derived(
|
||||
!retrievedInfo || !info.id || info.title || info.description,
|
||||
@@ -63,7 +66,7 @@
|
||||
|
||||
{#snippet kbdText()}
|
||||
{dynamicMapping ??
|
||||
info.icon ??
|
||||
icon ??
|
||||
info.display ??
|
||||
info.id ??
|
||||
`0x${info.code.toString(16)}`}
|
||||
@@ -71,7 +74,7 @@
|
||||
{#snippet kbdSnippet(withPopover = true)}
|
||||
<kbd
|
||||
class:in-text={inText}
|
||||
class:icon={!!info.icon}
|
||||
class:icon={!!icon}
|
||||
class:left={info.variant === "left"}
|
||||
class:right={info.variant === "right"}
|
||||
class:error={info.code > 1023}
|
||||
@@ -91,7 +94,7 @@
|
||||
class:left={info.variant === "left"}
|
||||
class:right={info.variant === "right"}>{dynamicMapping}</span
|
||||
>
|
||||
{:else if !info.icon && info.id?.length === 1}
|
||||
{:else if !icon && info.id?.length === 1}
|
||||
<span
|
||||
{@attach hasPopover ? actionTooltip(popover) : null}
|
||||
class:in-text={inText}
|
||||
@@ -106,7 +109,7 @@
|
||||
class:in-text={inText}
|
||||
class:left={info.variant === "left"}
|
||||
class:right={info.variant === "right"}
|
||||
class:icon={!!info.icon}
|
||||
class:icon={!!icon}
|
||||
class:warn={!retrievedInfo}
|
||||
class:error={info.code > 1023}
|
||||
{@attach hasPopover ? actionTooltip(popover) : null}
|
||||
@@ -155,21 +158,50 @@
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
$variant-offset: 12px;
|
||||
$variant-padding: calc(2px + $variant-offset);
|
||||
$variant-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 50%,
|
||||
transparent
|
||||
);
|
||||
|
||||
.left,
|
||||
.right {
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
outline: 2px dashed
|
||||
color-mix(in srgb, var(--bg-color), var(--md-sys-color-outline) 40%);
|
||||
outline-offset: -2px;
|
||||
border-radius: var(--border-radius);
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
$cutoff: 60%;
|
||||
|
||||
.left {
|
||||
padding-inline-end: $variant-padding;
|
||||
text-shadow: $variant-offset 0 2px $variant-color;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--bg-color) $cutoff,
|
||||
transparent $cutoff
|
||||
);
|
||||
|
||||
&::before {
|
||||
clip-path: inset(0 0 0 $cutoff);
|
||||
}
|
||||
}
|
||||
.right {
|
||||
padding-inline-start: $variant-padding;
|
||||
text-shadow: -$variant-offset 0 2px $variant-color;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--bg-color) $cutoff,
|
||||
transparent $cutoff
|
||||
);
|
||||
|
||||
&::before {
|
||||
clip-path: inset(0 $cutoff 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.inline-kbd {
|
||||
|
||||
@@ -19,13 +19,17 @@
|
||||
let {
|
||||
currentAction = undefined,
|
||||
nextAction = undefined,
|
||||
queryFilter = undefined,
|
||||
ignoreIcon,
|
||||
autofocus = false,
|
||||
onselect,
|
||||
onclose,
|
||||
}: {
|
||||
currentAction?: number;
|
||||
queryFilter?: string;
|
||||
nextAction?: number;
|
||||
autofocus?: boolean;
|
||||
ignoreIcon?: boolean;
|
||||
onselect?: (id: number) => void;
|
||||
onclose?: () => void;
|
||||
} = $props();
|
||||
@@ -43,6 +47,14 @@
|
||||
createIndex($KEYMAP_CODES);
|
||||
});
|
||||
|
||||
let didClear = true;
|
||||
$effect(() => {
|
||||
if (queryFilter !== undefined || !didClear) {
|
||||
searchBox.value = queryFilter ?? "";
|
||||
search();
|
||||
}
|
||||
});
|
||||
|
||||
async function createIndex(codes: Map<number, KeyInfo>) {
|
||||
for (const [, action] of codes) {
|
||||
await index?.addAsync(
|
||||
@@ -60,6 +72,7 @@
|
||||
(category) => [category, []] as [KeymapCategory, KeyInfo[]],
|
||||
),
|
||||
);
|
||||
didClear = searchBox.value === "";
|
||||
const result =
|
||||
searchBox.value === ""
|
||||
? Array.from($KEYMAP_CODES.keys())
|
||||
@@ -167,7 +180,7 @@
|
||||
<li>Action code is out of range</li>
|
||||
{/if}
|
||||
{/if}
|
||||
{#each results as [category, actions] (category)}
|
||||
{#each results as [category, actions] (actions)}
|
||||
{#if actions.length > 0}
|
||||
<div class="category">
|
||||
<h3>{category.name}</h3>
|
||||
@@ -191,7 +204,7 @@
|
||||
}
|
||||
: undefined}
|
||||
>
|
||||
<Action {action} display="verbose"></Action>
|
||||
<Action {action} display="verbose" {ignoreIcon}></Action>
|
||||
</button>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -56,6 +56,84 @@ export function deserializeActions(native: bigint): number[] {
|
||||
return actions;
|
||||
}
|
||||
|
||||
const compoundHashItems = 3;
|
||||
const maxChordInputItems = 12;
|
||||
const actionBits = 10;
|
||||
const actionMask = (1 << actionBits) - 1;
|
||||
|
||||
/**
|
||||
* Applies the compound value to a **valid** chord input
|
||||
*/
|
||||
export function applyCompound(actions: number[], compound: number): number[] {
|
||||
const result = [...actions];
|
||||
for (let i = 0; i < compoundHashItems; i++) {
|
||||
result[i] = (compound >>> (i * actionBits)) & actionMask;
|
||||
}
|
||||
result[compoundHashItems] = 0;
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts the compound value from a chord input, if present
|
||||
*/
|
||||
export function splitCompound(
|
||||
actions: number[],
|
||||
): [inputs: number[], compound: number | undefined] {
|
||||
if (actions[compoundHashItems] != 0) {
|
||||
return [
|
||||
actions.slice(
|
||||
Math.max(
|
||||
0,
|
||||
actions.findIndex((it) => it !== 0),
|
||||
),
|
||||
),
|
||||
undefined,
|
||||
];
|
||||
}
|
||||
|
||||
let compound = 0;
|
||||
for (let i = 0; i < compoundHashItems; i++) {
|
||||
compound |= (actions[i] ?? 0) << (i * actionBits);
|
||||
}
|
||||
|
||||
return [
|
||||
actions.slice(
|
||||
actions.findIndex((it, i) => i > compoundHashItems && it !== 0),
|
||||
),
|
||||
compound === 0 ? undefined : compound,
|
||||
];
|
||||
}
|
||||
|
||||
export function willBeValidChordInput(
|
||||
inputCount: number,
|
||||
hasCompound: boolean,
|
||||
): boolean {
|
||||
return (
|
||||
inputCount > 0 &&
|
||||
inputCount <= maxChordInputItems - (hasCompound ? compoundHashItems + 1 : 0)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Composes a chord input from a list of actions and an optional compound value
|
||||
* to a valid chord input
|
||||
*/
|
||||
export function composeChordInput(
|
||||
actions: number[],
|
||||
compound?: number,
|
||||
): number[] {
|
||||
const result = [
|
||||
...Array.from(
|
||||
{
|
||||
length: Math.max(0, maxChordInputItems - actions.length),
|
||||
},
|
||||
() => 0,
|
||||
),
|
||||
...actions.slice(0, maxChordInputItems).sort((a, b) => a - b),
|
||||
];
|
||||
return compound !== undefined ? applyCompound(result, compound) : result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hashes a chord input the same way as CCOS
|
||||
*/
|
||||
@@ -72,5 +150,6 @@ export function hashChord(actions: number[]) {
|
||||
if ((hash & 0xff) === 0xff) {
|
||||
hash ^= 0xff;
|
||||
}
|
||||
return hash & 0x3fff_ffff;
|
||||
hash &= 0x3fff_ffff;
|
||||
return hash === 0 ? 1 : hash;
|
||||
}
|
||||
|
||||
@@ -55,7 +55,10 @@ export const syncStatus: Writable<
|
||||
"done" | "error" | "downloading" | "uploading"
|
||||
> = writable("done");
|
||||
|
||||
export const deviceMeta = writable<VersionMeta | undefined>(undefined);
|
||||
export const deviceMeta = persistentWritable<VersionMeta | undefined>(
|
||||
"current-meta",
|
||||
undefined,
|
||||
);
|
||||
|
||||
export interface ProgressInfo {
|
||||
max: number;
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
kbd {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-block: 6px;
|
||||
border-radius: 4px;
|
||||
|
||||
//border: 1px solid currentcolor;
|
||||
background: color-mix(
|
||||
--bg-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-surface-variant) 50%,
|
||||
transparent
|
||||
);
|
||||
padding: 4px;
|
||||
--border-radius: 4px;
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-block: 6px;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg-color);
|
||||
padding: 4px;
|
||||
height: 20px;
|
||||
color: currentcolor;
|
||||
font-weight: normal;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
&.icon {
|
||||
|
||||
@@ -4,13 +4,7 @@
|
||||
import { actionToValue } from "$lib/chord-editor/action-serializer";
|
||||
import { actionPlugin } from "$lib/chord-editor/action-plugin";
|
||||
import { delimPlugin } from "$lib/chord-editor/chord-delim-plugin";
|
||||
import {
|
||||
drawSelection,
|
||||
dropCursor,
|
||||
highlightActiveLine,
|
||||
highlightSpecialChars,
|
||||
keymap,
|
||||
} from "@codemirror/view";
|
||||
import { highlightActiveLine, keymap } from "@codemirror/view";
|
||||
import { history, standardKeymap } from "@codemirror/commands";
|
||||
import "$lib/chord-editor/chords.grammar";
|
||||
import {
|
||||
@@ -18,20 +12,32 @@
|
||||
chordLanguageSupport,
|
||||
} from "$lib/chord-editor/chords-grammar-plugin";
|
||||
import { syntaxHighlighting } from "@codemirror/language";
|
||||
import { autocompletion } from "@codemirror/autocomplete";
|
||||
import { persistentWritable } from "$lib/storage";
|
||||
import ActionList from "$lib/components/layout/ActionList.svelte";
|
||||
import { actionAutocompletePlugin } from "$lib/chord-editor/autocomplete";
|
||||
import {
|
||||
actionLinter,
|
||||
actionLinterDependencies,
|
||||
} from "$lib/chord-editor/action-linter";
|
||||
import { forceLinting } from "@codemirror/lint";
|
||||
import { untrack } from "svelte";
|
||||
import { splitCompound } from "$lib/serial/chord";
|
||||
|
||||
let queryFilter: string | undefined = $state(undefined);
|
||||
|
||||
const rawCode = persistentWritable("chord-editor-raw-code", false);
|
||||
const showEdits = persistentWritable("chord-editor-show-edits", true);
|
||||
const denseSpacing = persistentWritable("chord-editor-spacing", false);
|
||||
|
||||
let originalDoc = $derived(
|
||||
$chords
|
||||
.map((chord) => {
|
||||
const [actions, compound] = splitCompound(chord.actions);
|
||||
return (
|
||||
chord.actions
|
||||
.filter((it) => it !== 0)
|
||||
.map((it) => actionToValue(it))
|
||||
.join("") +
|
||||
(compound
|
||||
? "<0x" + compound.toString(16).padStart(8, "0") + ">"
|
||||
: "") +
|
||||
actions.map((it) => actionToValue(it)).join("") +
|
||||
"=>" +
|
||||
chord.phrase.map((it) => actionToValue(it)).join("")
|
||||
);
|
||||
@@ -49,31 +55,60 @@
|
||||
extensions: [
|
||||
...($rawCode ? [] : [delimPlugin, actionPlugin]),
|
||||
chordLanguageSupport(),
|
||||
autocompletion({ icons: false, selectOnOpen: true }),
|
||||
actionLinter,
|
||||
// lineNumbers(),
|
||||
actionAutocompletePlugin((query) => {
|
||||
queryFilter = query;
|
||||
}),
|
||||
history(),
|
||||
dropCursor(),
|
||||
syntaxHighlighting(chordHighlightStyle),
|
||||
highlightActiveLine(),
|
||||
drawSelection(),
|
||||
highlightSpecialChars(),
|
||||
// drawSelection(),
|
||||
EditorView.theme({
|
||||
".cm-line": {
|
||||
borderBottom: "1px solid transparent",
|
||||
caretColor: "var(--md-sys-color-on-surface)",
|
||||
},
|
||||
".cm-scroller": {
|
||||
overflow: "auto",
|
||||
width: "100%",
|
||||
fontFamily: "inherit !important",
|
||||
gap: "8px",
|
||||
},
|
||||
".cm-content": {
|
||||
width: "100%",
|
||||
},
|
||||
".cm-cursor": {
|
||||
borderColor: "var(--md-sys-color-on-surface)",
|
||||
},
|
||||
}),
|
||||
keymap.of(standardKeymap),
|
||||
],
|
||||
});
|
||||
return () => view.destroy();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
$actionLinterDependencies;
|
||||
untrack(() => view && forceLinting(view));
|
||||
});
|
||||
</script>
|
||||
|
||||
<label><input type="checkbox" bind:checked={$rawCode} />View as code</label>
|
||||
<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>
|
||||
<label><input type="checkbox" bind:checked={$rawCode} />Edit as code</label>
|
||||
<!--<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>-->
|
||||
<label
|
||||
><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
|
||||
>
|
||||
|
||||
<div class="split">
|
||||
<ActionList />
|
||||
<div
|
||||
class="editor"
|
||||
class:hide-edits={!$showEdits}
|
||||
class:raw={$rawCode}
|
||||
class:dense-spacing={$denseSpacing}
|
||||
bind:this={editor}
|
||||
></div>
|
||||
<ActionList {queryFilter} ignoreIcon={$rawCode} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -82,21 +117,17 @@
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
|
||||
> :global(:first-child) {
|
||||
max-width: 600px;
|
||||
> :global(:last-child) {
|
||||
width: min(600px, 30vw);
|
||||
}
|
||||
}
|
||||
|
||||
.editor:not(.raw) :global(.cm-line) {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.editor :global(.cm-deletedChunk) {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.editor {
|
||||
min-width: 600px;
|
||||
width: min(600px, 30vw);
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
|
||||
@@ -122,6 +153,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.raw) :global(.cm-line) {
|
||||
columns: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.dense-spacing :global(.cm-line) {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
:global(.cm-line) {
|
||||
padding-block: 8px;
|
||||
width: 100%;
|
||||
text-wrap: wrap;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
||||
> :global(*) {
|
||||
break-before: avoid;
|
||||
break-after: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.chord-ignored) {
|
||||
opacity: 0.5;
|
||||
background-image: none;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
:global(.chord-invalid) {
|
||||
color: var(--md-sys-color-error);
|
||||
text-decoration-color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
:global(.change-button) {
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
@@ -144,29 +209,20 @@
|
||||
}
|
||||
|
||||
:global(.cm-gutters) {
|
||||
border: none;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.raw :global(.cm-gutters) {
|
||||
border-color: var(--md-sys-color-surface-variant);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
:global(.cm-editor) {
|
||||
outline: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.cm-line) {
|
||||
border-bottom: 1px solid transparent;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
:global(.cm-scroller) {
|
||||
overflow: auto;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
:global(.cm-cursor) {
|
||||
border-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
:global(.cm-changedLine) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
@@ -182,17 +238,13 @@
|
||||
|
||||
:global(.cm-activeLine) {
|
||||
border-bottom: 1px solid var(--md-sys-color-surface-variant);
|
||||
/*background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-surface-variant) 40%,
|
||||
transparent
|
||||
) !important;*/
|
||||
|
||||
&:not(.cm-changedLine) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(::selection),
|
||||
:global(.cm-selectionBackground) {
|
||||
background-color: var(--md-sys-color-surface-variant) !important;
|
||||
}
|
||||
|
||||
10
src/routes/(app)/config/x2/+page.svelte
Normal file
10
src/routes/(app)/config/x2/+page.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { parseCharaChords } from "$lib/chord-editor/action-serializer";
|
||||
import text from "$lib/chord-editor/test.txt?raw";
|
||||
import { KEYMAP_IDS } from "$lib/serial/keymap-codes";
|
||||
</script>
|
||||
|
||||
<pre>{text}</pre>
|
||||
{#each parseCharaChords(text, $KEYMAP_IDS) as chord}
|
||||
<pre>{JSON.stringify(chord)} ({text.slice(chord.from, chord.to)})</pre>
|
||||
{/each}
|
||||
Reference in New Issue
Block a user