mirror of
https://github.com/ParkerTenBroeck/automata.git
synced 2026-06-06 21:24:06 -04:00
Merge branch 'main' into gh-pages
This commit is contained in:
Parker TenBroeck
commit
171c717b1e
17 changed files with 786 additions and 311 deletions
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<section class="flexCol gap marginTop">
|
||||
<div class="flexCenter sidePadding gap">
|
||||
<button id="themeToggle" class="btn btn-grey" title="Toggle light/dark">
|
||||
<button id="themeToggle" class="btn btn-blue" title="Toggle light/dark">
|
||||
🌙 Dark
|
||||
</button>
|
||||
<button class="btn btm-grey" style="position: relative" id="shareBtn" type="button">
|
||||
|
|
@ -46,6 +46,14 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="hSplit styleOnly" title="Drag to resize canvas height"></div>
|
||||
|
||||
<div class="flexCenter sidePadding" style="font-size: calc(16px);font-weight: bold;color: var(--fg-1)">
|
||||
<span style="margin-right: 0.5em;">Status: </span><span style="color: var(--fg-2)" id="simulationStatus">N/A</span>
|
||||
</div>
|
||||
<div class="flexCenter sidePadding">
|
||||
<input id="machineInput" type="text" class="test-input" placeholder="Enter machine input…" />
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
|
@ -53,7 +61,7 @@
|
|||
|
||||
<div class="flexCol">
|
||||
<div class="controls" style="background: var(--bg-0)">
|
||||
<button id="togglePhysics" class="btn btn-toggle active" title="Toggle physics layout">
|
||||
<button id="togglePhysics" class="btn btn-red btn-toggle active" title="Toggle physics layout">
|
||||
Physics: ON
|
||||
</button>
|
||||
|
||||
|
|
@ -63,21 +71,25 @@
|
|||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<button id="resetSim" class="btn btn-blue" title="Stop and reset simulation">
|
||||
⟲ Reset
|
||||
<button id="reloadSim" class="btn btn-blue" title="Stop and Reload simulation">
|
||||
⟲ Reload
|
||||
</button>
|
||||
<button id="playPause" class="btn btn-green" title="Run / pause simulation">
|
||||
▶ Play
|
||||
<button id="clearSim" class="btn btn-red" title="Stop and Clear simulation">
|
||||
✖ Clear
|
||||
</button>
|
||||
|
||||
<button id="step" class="btn btn-grey" title="Advance one step">
|
||||
Step
|
||||
|
||||
<button id="stepSim" class="btn btn-yellow" title="Advance one step">
|
||||
⏭ Step
|
||||
</button>
|
||||
<button id="playPauseSim" class="btn btn-green" title="Run / pause simulation">
|
||||
▶ Play
|
||||
</button>
|
||||
|
||||
<label class="speed">
|
||||
Speed
|
||||
<input id="speed" type="range" min="1" max="60" value="10" />
|
||||
<span id="speedLabel">10x</span>
|
||||
<input id="speedSim" type="range" min="1" max="60" value="1" />
|
||||
<span id="speedSimLabel">10x</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="hSplit styleOnly" title="Drag to resize canvas height"></div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export type Machine = Fa | Pda | Tm;
|
||||
|
||||
export function machine_from_json(json: string): Machine {
|
||||
export function parse_machine_from_json(json: string): Machine {
|
||||
const machine: Machine = JSON.parse(json);
|
||||
machine.states = new Map(Object.entries(machine.states));
|
||||
|
||||
|
|
@ -26,16 +26,16 @@ export function machine_from_json(json: string): Machine {
|
|||
for (const [from, tos] of machine.transitions) {
|
||||
for (const to of tos) {
|
||||
const layer_0 = machine.transitions_components;
|
||||
if(!layer_0.has(from.state)) layer_0.set(from.state, new Map());
|
||||
if (!layer_0.has(from.state)) layer_0.set(from.state, new Map());
|
||||
const layer_1 = machine.transitions_components.get(from.state)!;
|
||||
if(!layer_1.has(from.letter)) layer_1.set(from.letter, []);
|
||||
if (!layer_1.has(from.letter)) layer_1.set(from.letter, []);
|
||||
const layer_2 = layer_1.get(from.letter)!;
|
||||
layer_2.push(to);
|
||||
|
||||
const edge = from.state + "#" + to.state;
|
||||
if (!machine.edges.has(edge)) machine.edges.set(edge, []);
|
||||
machine.edges.get(edge)?.push({
|
||||
repr: from.letter?from.letter:"ε",
|
||||
repr: from.letter ? from.letter : "ε",
|
||||
function: to.function,
|
||||
transition: to.transition,
|
||||
});
|
||||
|
|
@ -49,18 +49,19 @@ export function machine_from_json(json: string): Machine {
|
|||
for (const [from, tos] of machine.transitions) {
|
||||
for (const to of tos) {
|
||||
const layer_0 = machine.transitions_components;
|
||||
if(!layer_0.has(from.state)) layer_0.set(from.state, new Map());
|
||||
if (!layer_0.has(from.state)) layer_0.set(from.state, new Map());
|
||||
const layer_1 = machine.transitions_components.get(from.state)!;
|
||||
if(!layer_1.has(from.symbol)) layer_1.set(from.symbol, new Map());
|
||||
if (!layer_1.has(from.symbol)) layer_1.set(from.symbol, new Map());
|
||||
const layer_2 = layer_1.get(from.symbol)!;
|
||||
if(!layer_2.has(from.letter)) layer_2.set(from.letter, []);
|
||||
if (!layer_2.has(from.letter)) layer_2.set(from.letter, []);
|
||||
const layer_3 = layer_2.get(from.letter)!;
|
||||
layer_3.push(to);
|
||||
|
||||
const edge = from.state + "#" + to.state;
|
||||
if (!machine.edges.has(edge)) machine.edges.set(edge, []);
|
||||
machine.edges.get(edge)?.push({
|
||||
repr: (from.letter?from.letter:"ε")+","+from.symbol+"->["+to.stack+"]",
|
||||
repr: (from.letter ? from.letter : "ε") + "," + from.symbol +
|
||||
"->[" + to.stack + "]",
|
||||
function: to.function,
|
||||
transition: to.transition,
|
||||
});
|
||||
|
|
@ -74,16 +75,16 @@ export function machine_from_json(json: string): Machine {
|
|||
for (const [from, tos] of machine.transitions) {
|
||||
for (const to of tos) {
|
||||
const layer_0 = machine.transitions_components;
|
||||
if(!layer_0.has(from.state)) layer_0.set(from.state, new Map());
|
||||
if (!layer_0.has(from.state)) layer_0.set(from.state, new Map());
|
||||
const layer_1 = machine.transitions_components.get(from.state)!;
|
||||
if(!layer_1.has(from.symbol)) layer_1.set(from.symbol, []);
|
||||
if (!layer_1.has(from.symbol)) layer_1.set(from.symbol, []);
|
||||
const layer_2 = layer_1.get(from.symbol)!;
|
||||
layer_2.push(to);
|
||||
|
||||
const edge = from.state + "#" + to.state;
|
||||
if (!machine.edges.has(edge)) machine.edges.set(edge, []);
|
||||
machine.edges.get(edge)?.push({
|
||||
repr: from.symbol+"->"+to.symbol+","+to.direction,
|
||||
repr: from.symbol + "->" + to.symbol + "," + to.direction,
|
||||
function: to.function,
|
||||
transition: to.transition,
|
||||
});
|
||||
|
|
@ -107,7 +108,7 @@ export type SymbolInfo = { definition: Span };
|
|||
|
||||
export type FaTransFrom = {
|
||||
state: State;
|
||||
letter: Letter|null;
|
||||
letter: Letter | null;
|
||||
};
|
||||
|
||||
export type FaTransTo = {
|
||||
|
|
@ -132,14 +133,14 @@ export type Fa = {
|
|||
final_states: Map<State, StateInfo>;
|
||||
|
||||
transitions: Map<FaTransFrom, FaTransTo[]>;
|
||||
transitions_components: Map<State, Map<Letter|null, FaTransTo[]>>;
|
||||
transitions_components: Map<State, Map<Letter | null, FaTransTo[]>>;
|
||||
|
||||
edges: Map<string, Edge[]>;
|
||||
};
|
||||
|
||||
export type PdaTransFrom = {
|
||||
state: State;
|
||||
letter: Letter|null;
|
||||
letter: Letter | null;
|
||||
symbol: Symbol;
|
||||
};
|
||||
|
||||
|
|
@ -162,7 +163,10 @@ export type Pda = {
|
|||
final_states: Map<State, StateInfo> | null;
|
||||
|
||||
transitions: Map<PdaTransFrom, PdaTransTo[]>;
|
||||
transitions_components: Map<State, Map<Symbol, Map<Letter|null, PdaTransTo[]>>>;
|
||||
transitions_components: Map<
|
||||
State,
|
||||
Map<Symbol, Map<Letter | null, PdaTransTo[]>>
|
||||
>;
|
||||
|
||||
edges: Map<string, Edge[]>;
|
||||
};
|
||||
|
|
@ -196,13 +200,3 @@ export type Tm = {
|
|||
|
||||
edges: Map<string, Edge[]>;
|
||||
};
|
||||
|
||||
|
||||
export type FaState = {
|
||||
state: State,
|
||||
position: number
|
||||
}
|
||||
|
||||
export class FaSim{
|
||||
|
||||
}
|
||||
87
web/root/src/bus.ts
Normal file
87
web/root/src/bus.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
// deno-lint-ignore-file
|
||||
|
||||
import type { Machine } from "./automata.ts";
|
||||
import type { Sim, SimStepResult } from "./simulation.ts";
|
||||
import type wasm from "./wasm.ts";
|
||||
import type { Text } from "npm:@codemirror/state";
|
||||
|
||||
type Unsubscribe = () => void;
|
||||
|
||||
export class EventBus<Events extends Record<string, any>> {
|
||||
private listeners = new Map<keyof Events, Set<(payload: any) => void>>();
|
||||
|
||||
on<K extends keyof Events>(
|
||||
event: K,
|
||||
handler: (payload: Events[K]) => void,
|
||||
): Unsubscribe {
|
||||
let set = this.listeners.get(event);
|
||||
if (!set) {
|
||||
set = new Set();
|
||||
this.listeners.set(event, set);
|
||||
}
|
||||
set.add(handler as any);
|
||||
|
||||
return () => this.off(event, handler);
|
||||
}
|
||||
|
||||
once<K extends keyof Events>(
|
||||
event: K,
|
||||
handler: (payload: Events[K]) => void,
|
||||
): Unsubscribe {
|
||||
const off = this.on(event, (payload) => {
|
||||
off();
|
||||
handler(payload);
|
||||
});
|
||||
return off;
|
||||
}
|
||||
|
||||
off<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void) {
|
||||
const set = this.listeners.get(event);
|
||||
if (!set) return;
|
||||
set.delete(handler as any);
|
||||
if (set.size === 0) this.listeners.delete(event);
|
||||
}
|
||||
|
||||
emit<K extends keyof Events>(event: K, payload: Events[K]) {
|
||||
const set = this.listeners.get(event);
|
||||
if (!set) return;
|
||||
|
||||
// Copy to avoid issues if handlers subscribe/unsubscribe during emit
|
||||
for (const handler of Array.from(set)) {
|
||||
try {
|
||||
(handler as (p: Events[K]) => void)(payload);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clear(event?: keyof Events) {
|
||||
if (event) this.listeners.delete(event);
|
||||
else this.listeners.clear();
|
||||
}
|
||||
}
|
||||
|
||||
type AppEvents = {
|
||||
"begin": void;
|
||||
|
||||
"editor/change": {text: string, doc: Text};
|
||||
"compiled": {log: wasm.CompileLog[], ansi_log: string, machine: string|undefined};
|
||||
|
||||
"automata/sim/update": { simulation: Sim|null };
|
||||
"automata/sim/before_step": { simulation: Sim };
|
||||
"automata/sim/after_step": { simulation: Sim, result: SimStepResult };
|
||||
"automata/update": { automaton: Machine };
|
||||
|
||||
"controls/physics": {enabled: boolean},
|
||||
"controls/reset_network": void,
|
||||
|
||||
|
||||
"controls/step_simulation": void,
|
||||
"controls/reload_simulation": void,
|
||||
"controls/clear_simulation": void,
|
||||
|
||||
"theme/update": void;
|
||||
};
|
||||
|
||||
export const bus = new EventBus<AppEvents>();
|
||||
|
|
@ -1,56 +1,70 @@
|
|||
import {nodes, edges, network} from "./visualizer.ts"
|
||||
import { bus } from "./bus.ts";
|
||||
|
||||
const togglePhysicsBtn = document.getElementById("togglePhysics") as HTMLButtonElement;
|
||||
const resetLayoutBtn = document.getElementById("resetLayout") as HTMLButtonElement;
|
||||
const playPauseBtn = document.getElementById("playPause") as HTMLButtonElement;
|
||||
const stepBtn = document.getElementById("step") as HTMLButtonElement;
|
||||
const speedSlider = document.getElementById("speed") as HTMLInputElement;
|
||||
const speedLabel = document.getElementById("speedLabel") as HTMLSpanElement;
|
||||
const resetSimBtn = document.getElementById("resetSim") as HTMLButtonElement;
|
||||
const togglePhysicsBtn = document.getElementById(
|
||||
"togglePhysics",
|
||||
) as HTMLButtonElement;
|
||||
const resetLayoutBtn = document.getElementById(
|
||||
"resetLayout",
|
||||
) as HTMLButtonElement;
|
||||
const playPauseBtn = document.getElementById(
|
||||
"playPauseSim",
|
||||
) as HTMLButtonElement;
|
||||
const stepBtn = document.getElementById("stepSim") as HTMLButtonElement;
|
||||
const speedSlider = document.getElementById("speedSim") as HTMLInputElement;
|
||||
const speedLabel = document.getElementById("speedSimLabel") as HTMLSpanElement;
|
||||
const reloadSimBtn = document.getElementById("reloadSim") as HTMLButtonElement;
|
||||
const clearSimBtn = document.getElementById("clearSim") as HTMLButtonElement;
|
||||
|
||||
|
||||
function stepSimulation(): void {
|
||||
console.log("step");
|
||||
}
|
||||
|
||||
function resetSimulation(): void {
|
||||
console.log("reset");
|
||||
}
|
||||
|
||||
// ---- Physics toggle (styled label) ----
|
||||
function setPhysicsButtonUI(enabled: boolean) {
|
||||
bus.on("controls/physics", ({ enabled }) => {
|
||||
togglePhysicsBtn.classList.toggle("active", enabled);
|
||||
togglePhysicsBtn.textContent = enabled ? "Physics: ON" : "Physics: OFF";
|
||||
}
|
||||
});
|
||||
|
||||
togglePhysicsBtn.onclick = () => {
|
||||
const enabled = !togglePhysicsBtn.classList.contains("active");
|
||||
setPhysicsButtonUI(enabled);
|
||||
network.setOptions({ physics: { enabled } });
|
||||
network.setOptions({edges: {smooth: enabled}});
|
||||
bus.emit("controls/physics", { enabled });
|
||||
};
|
||||
|
||||
setPhysicsButtonUI(togglePhysicsBtn.classList.contains("active"));
|
||||
bus.emit("controls/physics", {
|
||||
enabled: togglePhysicsBtn.classList.contains("active"),
|
||||
});
|
||||
|
||||
resetLayoutBtn.onclick = () => {
|
||||
try {
|
||||
nodes.forEach((n) => {
|
||||
n.physics = true;
|
||||
n.x = undefined;
|
||||
n.y = undefined;
|
||||
});
|
||||
network.setData({ nodes, edges });
|
||||
} catch {
|
||||
// Last resort
|
||||
network.setData({ nodes, edges });
|
||||
resetLayoutBtn.onclick = () => bus.emit("controls/reset_network", undefined);
|
||||
|
||||
clearSimBtn.onclick = () => bus.emit("controls/clear_simulation", undefined);
|
||||
|
||||
stepBtn.onclick = () => {
|
||||
bus.emit("controls/step_simulation", undefined);
|
||||
};
|
||||
|
||||
reloadSimBtn.onclick = () => bus.emit("controls/reload_simulation", undefined);
|
||||
|
||||
function updateButtons() {
|
||||
stepBtn.disabled = !simulation_active || running;
|
||||
playPauseBtn.disabled = !simulation_active;
|
||||
clearSimBtn.disabled = !simulation_active;
|
||||
}
|
||||
|
||||
bus.on("controls/reload_simulation", (_) => {
|
||||
if (running) setRunning(false);
|
||||
updateButtons();
|
||||
});
|
||||
|
||||
bus.on("automata/sim/update", ({ simulation }) => {
|
||||
simulation_active = !!simulation;
|
||||
if (!simulation) {
|
||||
if (running) setRunning(false);
|
||||
}
|
||||
updateButtons();
|
||||
});
|
||||
|
||||
// If physics button is OFF, keep it OFF (don’t surprise the user)
|
||||
const physicsEnabled = togglePhysicsBtn.classList.contains("active");
|
||||
network.setOptions({ physics: { enabled: physicsEnabled } });
|
||||
};
|
||||
bus.on("automata/sim/after_step", ({ result }) => {
|
||||
if (result !== "pending") {
|
||||
if (running) setRunning(false);
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Play/Pause + Speed ----
|
||||
let simulation_active = false;
|
||||
let running = false;
|
||||
let timer: number | null = null;
|
||||
|
||||
|
|
@ -81,8 +95,7 @@ function restartTimer() {
|
|||
const intervalMs = Math.round(1000 / sps);
|
||||
|
||||
timer = globalThis.window.setInterval(() => {
|
||||
// If your step can throw, keep the interval alive:
|
||||
try { stepSimulation(); } catch (e) { console.error(e); }
|
||||
bus.emit("controls/step_simulation", undefined);
|
||||
}, intervalMs);
|
||||
}
|
||||
|
||||
|
|
@ -100,18 +113,3 @@ function setRunning(on: boolean) {
|
|||
}
|
||||
|
||||
playPauseBtn.onclick = () => setRunning(!running);
|
||||
|
||||
stepBtn.onclick = () => {
|
||||
stepSimulation();
|
||||
};
|
||||
|
||||
resetSimBtn.onclick = () => {
|
||||
// Stop if running
|
||||
if (running) setRunning(false);
|
||||
|
||||
// Reset
|
||||
resetSimulation();
|
||||
|
||||
// Optional: re-enable Step after reset
|
||||
stepBtn.disabled = false;
|
||||
};
|
||||
|
|
@ -5,7 +5,6 @@ import {
|
|||
keymap,
|
||||
hoverTooltip,
|
||||
Decoration,
|
||||
ViewPlugin,
|
||||
lineNumbers,
|
||||
highlightActiveLineGutter,
|
||||
highlightActiveLine
|
||||
|
|
@ -18,12 +17,10 @@ import { closeBrackets } from "npm:@codemirror/autocomplete";
|
|||
|
||||
|
||||
import wasm from "./wasm.ts"
|
||||
import { terminalPlugin } from "./terminal.ts";
|
||||
|
||||
import { setAutomaton } from "./visualizer.ts";
|
||||
import { machine_from_json } from "./automata.ts";
|
||||
import { sharedText } from "./share.ts";
|
||||
import { examples } from "./examples.ts";
|
||||
import { bus } from "./bus.ts";
|
||||
|
||||
|
||||
function tokenize(text: string) {
|
||||
|
|
@ -45,31 +42,26 @@ function compile(text: string): wasm.CompileResult {
|
|||
}
|
||||
}
|
||||
|
||||
export const analysisField = StateField.define({
|
||||
const eventBusConnection = StateField.define({
|
||||
create(state) {
|
||||
const text = state.doc.toString();
|
||||
bus.emit("editor/change", {text, doc: state.doc});
|
||||
return buildAnalysis(text, state.doc);
|
||||
},
|
||||
update(value, tr) {
|
||||
if (!tr.docChanged) return value;
|
||||
const text = tr.state.doc.toString();
|
||||
bus.emit("editor/change", {text, doc: state.doc});
|
||||
return buildAnalysis(text, tr.state.doc);
|
||||
},
|
||||
provide: (f) => EditorView.decorations.from(f, (v) => v.deco),
|
||||
});
|
||||
|
||||
function buildAnalysis(text: string, doc: Text) {
|
||||
save(text);
|
||||
const tokens = tokenize(text);
|
||||
const { log, log_formatted, graph } = compile(text);
|
||||
const { log, ansi_log, machine } = compile(text);
|
||||
|
||||
if (graph){
|
||||
try{
|
||||
setAutomaton(machine_from_json(graph))
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
bus.emit("compiled", {log, ansi_log, machine})
|
||||
|
||||
const marks = [];
|
||||
const docLen = doc.length;
|
||||
|
|
@ -101,7 +93,7 @@ function buildAnalysis(text: string, doc: Text) {
|
|||
}
|
||||
|
||||
const deco = Decoration.set(marks, true);
|
||||
return { tokens, log, log_formatted, deco };
|
||||
return { tokens, log, ansi_log, deco };
|
||||
}
|
||||
|
||||
const tokenClass = (t: string) =>
|
||||
|
|
@ -136,7 +128,7 @@ function sevRank(sev: string) {
|
|||
|
||||
// ===================== Hover tooltip (uses cached diags) =====================
|
||||
const diagHover = hoverTooltip((view, pos) => {
|
||||
const { log } = view.state.field(analysisField);
|
||||
const { log } = view.state.field(eventBusConnection);
|
||||
const hits = log.filter((d) => d.start !== undefined && d.end !== undefined && pos >= d.start && pos <= d.end);
|
||||
if (hits.length === 0) return null;
|
||||
|
||||
|
|
@ -187,7 +179,7 @@ export function getText(): string{
|
|||
}
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: sharedText() ?? getSaved() ?? examples[0].machine,
|
||||
doc: "",
|
||||
extensions: [
|
||||
lineNumbers(),
|
||||
highlightActiveLineGutter(),
|
||||
|
|
@ -198,9 +190,8 @@ const state = EditorState.create({
|
|||
closeBrackets(),
|
||||
keymap.of([...defaultKeymap, ...historyKeymap]),
|
||||
|
||||
analysisField,
|
||||
eventBusConnection,
|
||||
diagHover,
|
||||
terminalPlugin,
|
||||
|
||||
EditorView.lineWrapping,
|
||||
],
|
||||
|
|
@ -210,3 +201,5 @@ const editor = new EditorView({
|
|||
state,
|
||||
parent: document.getElementById("editor")!,
|
||||
});
|
||||
|
||||
bus.on("begin", _ => setText(sharedText() ?? getSaved() ?? examples[0].machine))
|
||||
|
|
@ -10,9 +10,9 @@ export type Category =
|
|||
| "NTM";
|
||||
|
||||
export class Example {
|
||||
category: Category;
|
||||
title: string;
|
||||
machine: string;
|
||||
readonly category: Category;
|
||||
readonly title: string;
|
||||
readonly machine: string;
|
||||
|
||||
constructor(category: Category, title: string, machine: string) {
|
||||
this.category = category;
|
||||
|
|
@ -21,7 +21,7 @@ export class Example {
|
|||
}
|
||||
}
|
||||
|
||||
export const examples: Example[] = [
|
||||
export const examples: readonly Example[] = [
|
||||
new Example(
|
||||
"Tutorial",
|
||||
"DFA",
|
||||
|
|
@ -104,9 +104,40 @@ d(qeq, b, z0) = (qmb, z0)
|
|||
d(qmb, b, z0) = (qmb, z0)`,
|
||||
),
|
||||
|
||||
|
||||
new Example(
|
||||
"NPDA",
|
||||
"unequal",
|
||||
"palindrome",
|
||||
`type=NPDA
|
||||
Q = {q0, q1} // states
|
||||
E = {a, b} // alphabet
|
||||
T = {z0, A, B} // stack
|
||||
q0 = q0
|
||||
z0 = z0
|
||||
|
||||
// push letters we see to stack
|
||||
d(q0, a, z0) = (q0, [A z0])
|
||||
d(q0, b, z0) = (q0, [B z0])
|
||||
|
||||
d(q0, a, A) = (q0, [A A])
|
||||
d(q0, b, A) = (q0, [B A])
|
||||
|
||||
d(q0, a, B) = (q0, [A B])
|
||||
d(q0, b, B) = (q0, [B B])
|
||||
|
||||
// transition to q1
|
||||
d(q0, epsilon, z0) = { (q1, z0) }
|
||||
d(q0, epsilon, A) = { (q1, A) }
|
||||
d(q0, epsilon, B) = { (q1, B) }
|
||||
|
||||
// consume stack until empty
|
||||
d(q1, a, A) = { (q1, epsilon) }
|
||||
d(q1, b, B) = { (q1, epsilon) }`,
|
||||
),
|
||||
|
||||
new Example(
|
||||
"NPDA",
|
||||
"kleen star stack",
|
||||
`type=NPDA
|
||||
Q = {q0, q1} // states
|
||||
E = {a, b} // alphabet
|
||||
|
|
@ -143,7 +174,7 @@ const CATEGORY_ORDER: Category[] = [
|
|||
|
||||
function buildExamplesDropdown(
|
||||
selectEl: HTMLSelectElement,
|
||||
examples: Example[],
|
||||
examples: readonly Example[],
|
||||
onPick?: (ex: Example) => void,
|
||||
) {
|
||||
// Clear everything except the first placeholder option (if present)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
import "./editor.ts"
|
||||
import "./visualizer.ts"
|
||||
import { bus } from "./bus.ts";
|
||||
import "./splitters.ts"
|
||||
import "./controls.ts"
|
||||
import "./theme.ts"
|
||||
import "./share.ts"
|
||||
import "./examples.ts"
|
||||
import "./visualizer.ts"
|
||||
import "./editor.ts"
|
||||
import "./simulation.ts"
|
||||
|
||||
bus.emit("begin", undefined);
|
||||
325
web/root/src/simulation.ts
Normal file
325
web/root/src/simulation.ts
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
import { bus } from "./bus.ts";
|
||||
import {
|
||||
Fa,
|
||||
Machine,
|
||||
parse_machine_from_json,
|
||||
Pda,
|
||||
State,
|
||||
Symbol,
|
||||
Tm,
|
||||
} from "./automata.ts";
|
||||
|
||||
export type SimStepResult = "pending" | "accept" | "reject";
|
||||
export type Sim = FaSim | PdaSim | TmSim;
|
||||
let simulation: Sim | null = null;
|
||||
let automaton: Machine = {
|
||||
type: "fa",
|
||||
alphabet: new Map(),
|
||||
final_states: new Map(),
|
||||
initial_state: "",
|
||||
states: new Map(),
|
||||
transitions: new Map(),
|
||||
transitions_components: new Map(),
|
||||
edges: new Map(),
|
||||
};
|
||||
|
||||
bus.on("compiled", ({ machine }) => {
|
||||
if (machine) {
|
||||
try {
|
||||
bus.emit("controls/clear_simulation", undefined);
|
||||
automaton = parse_machine_from_json(machine);
|
||||
bus.emit("automata/update", { automaton });
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
bus.on("controls/clear_simulation", (_) => {
|
||||
simulation = null;
|
||||
bus.emit("automata/sim/update", { simulation: null });
|
||||
});
|
||||
bus.on("controls/step_simulation", (_) => {
|
||||
if (simulation) {
|
||||
bus.emit("automata/sim/before_step", { simulation });
|
||||
bus.emit("automata/sim/after_step", {
|
||||
result: simulation.step(),
|
||||
simulation: simulation,
|
||||
});
|
||||
}
|
||||
});
|
||||
const machineInput = document.getElementById("machineInput") as HTMLInputElement;
|
||||
machineInput.addEventListener("input", () => bus.emit("automata/sim/update", {simulation: null}));
|
||||
machineInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
bus.emit("controls/reload_simulation", undefined)
|
||||
}
|
||||
});
|
||||
bus.on("controls/reload_simulation", (_) => {
|
||||
const input = machineInput.value;
|
||||
switch (automaton.type) {
|
||||
case "fa":
|
||||
simulation = new FaSim(automaton as Fa, input);
|
||||
break;
|
||||
case "pda":
|
||||
simulation = new PdaSim(automaton as Pda, input);
|
||||
break;
|
||||
case "tm":
|
||||
simulation = new TmSim(automaton as Tm, input);
|
||||
break;
|
||||
}
|
||||
bus.emit("automata/sim/update", { simulation });
|
||||
});
|
||||
const simulationStatus = document.getElementById("simulationStatus") as HTMLInputElement;
|
||||
bus.on("automata/sim/update", ({simulation}) => {
|
||||
if (!simulation){
|
||||
simulationStatus.innerText = "N/A"
|
||||
simulationStatus.style.color = "var(--fg-2)";
|
||||
}else{
|
||||
simulationStatus.innerText = "Pending"
|
||||
simulationStatus.style.color = "var(--warning)";
|
||||
}
|
||||
});
|
||||
bus.on("automata/sim/after_step", ({result}) => {
|
||||
if (result === "pending"){
|
||||
simulationStatus.innerText = "Pending"
|
||||
simulationStatus.style.color = "var(--warning)";
|
||||
}else if (result==="accept"){
|
||||
simulationStatus.innerText = "Accepted"
|
||||
simulationStatus.style.color = "var(--success)";
|
||||
}else if (result==="reject"){
|
||||
simulationStatus.innerText = "Rejected"
|
||||
simulationStatus.style.color = "var(--error)";
|
||||
}
|
||||
});
|
||||
|
||||
export class FaState {
|
||||
readonly state: State;
|
||||
|
||||
readonly position: number;
|
||||
readonly input: string;
|
||||
readonly accepted: boolean = false;
|
||||
private repr!: string;
|
||||
|
||||
constructor(state: State, position: number, input: string) {
|
||||
this.state = state;
|
||||
this.position = position;
|
||||
this.input = input;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
if (!this.repr) {
|
||||
this.repr = this.state + +" >" + this.input.substring(this.position);
|
||||
}
|
||||
return this.repr;
|
||||
}
|
||||
}
|
||||
|
||||
export class FaSim {
|
||||
machine: Fa;
|
||||
paths: FaState[];
|
||||
input: string;
|
||||
|
||||
current_states: Map<string, FaState[]> = new Map();
|
||||
accepted: FaState[] = [];
|
||||
|
||||
constructor(machine: Fa, input: string) {
|
||||
this.machine = machine;
|
||||
this.paths = [new FaState(machine.initial_state, 0, input)];
|
||||
this.current_states.set(machine.initial_state, [this.paths[0]]);
|
||||
this.input = input;
|
||||
}
|
||||
|
||||
step(): SimStepResult {
|
||||
if (this.paths.length == 0) return "reject";
|
||||
if (this.accepted.length != 0) return "accept";
|
||||
|
||||
const paths: FaState[] = [];
|
||||
this.current_states.clear();
|
||||
|
||||
const push = (state: FaState) => {
|
||||
paths.push(state);
|
||||
if (!this.current_states.has(state.state)) {
|
||||
this.current_states.set(state.state, []);
|
||||
}
|
||||
this.current_states.get(state.state)?.push(state);
|
||||
|
||||
if (
|
||||
state.position == this.input.length &&
|
||||
this.machine.final_states.has(state.state)
|
||||
) {
|
||||
// @ts-expect-error sillllyyyy
|
||||
state.accepted = true;
|
||||
this.accepted.push(state);
|
||||
}
|
||||
};
|
||||
|
||||
for (const path of this.paths) {
|
||||
const letter_map = this.machine.transitions_components.get(path.state)!;
|
||||
if (!letter_map) continue;
|
||||
|
||||
for (const to of letter_map.get(null) ?? []) {
|
||||
push(new FaState(to.state, path.position, this.input));
|
||||
}
|
||||
|
||||
if (path.position >= this.input.length) continue;
|
||||
|
||||
const char = this.input.charAt(path.position);
|
||||
|
||||
for (const to of letter_map.get(char) ?? []) {
|
||||
push(new FaState(to.state, path.position + 1, this.input));
|
||||
}
|
||||
}
|
||||
this.paths = paths;
|
||||
|
||||
if (this.paths.length == 0) return "reject";
|
||||
if (this.accepted.length != 0) return "accept";
|
||||
return "pending";
|
||||
}
|
||||
}
|
||||
|
||||
export class PdaState {
|
||||
readonly state: State;
|
||||
readonly stack: Symbol[];
|
||||
|
||||
readonly position: number;
|
||||
readonly input: string;
|
||||
readonly accepted: boolean = false;
|
||||
private repr!: string;
|
||||
|
||||
constructor(state: State, stack: Symbol[], position: number, input: string) {
|
||||
this.state = state;
|
||||
this.stack = stack;
|
||||
this.position = position;
|
||||
this.input = input;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
if (!this.repr) {
|
||||
this.repr = this.state + " [" + this.stack + "]" + " >" +
|
||||
this.input.substring(this.position);
|
||||
}
|
||||
return this.repr;
|
||||
}
|
||||
}
|
||||
|
||||
export class PdaSim {
|
||||
machine: Pda;
|
||||
paths: PdaState[];
|
||||
input: string;
|
||||
|
||||
current_states: Map<string, PdaState[]> = new Map();
|
||||
accepted: PdaState[] = [];
|
||||
|
||||
constructor(machine: Pda, input: string) {
|
||||
this.machine = machine;
|
||||
this.paths = [
|
||||
new PdaState(machine.initial_state, [machine.initial_stack], 0, input),
|
||||
];
|
||||
this.current_states.set(machine.initial_state, [this.paths[0]]);
|
||||
this.input = input;
|
||||
}
|
||||
|
||||
step(): SimStepResult {
|
||||
if (this.paths.length == 0) return "reject";
|
||||
if (this.accepted.length != 0) return "accept";
|
||||
|
||||
const paths: PdaState[] = [];
|
||||
this.current_states.clear();
|
||||
|
||||
const push = (state: PdaState) => {
|
||||
paths.push(state);
|
||||
if (!this.current_states.has(state.state)) {
|
||||
this.current_states.set(state.state, []);
|
||||
}
|
||||
this.current_states.get(state.state)?.push(state);
|
||||
|
||||
if (
|
||||
state.position == this.input.length && this.machine.final_states &&
|
||||
this.machine.final_states.has(state.state) ||
|
||||
state.position == this.input.length && !this.machine.final_states &&
|
||||
state.stack.length == 1 &&
|
||||
state.stack[0] == this.machine.initial_stack
|
||||
) {
|
||||
// @ts-expect-error sillllyyyy
|
||||
state.accepted = true;
|
||||
this.accepted.push(state);
|
||||
}
|
||||
};
|
||||
|
||||
for (const path of this.paths) {
|
||||
const stack = path.stack.pop()!;
|
||||
const letter_map = this.machine.transitions_components.get(path.state)
|
||||
?.get(stack);
|
||||
if (!letter_map) continue;
|
||||
|
||||
for (const to of letter_map.get(null) ?? []) {
|
||||
push(
|
||||
new PdaState(
|
||||
to.state,
|
||||
path.stack.concat(to.stack),
|
||||
path.position,
|
||||
this.input,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (path.position >= this.input.length) continue;
|
||||
|
||||
const char = this.input.charAt(path.position);
|
||||
|
||||
for (const to of letter_map.get(char) ?? []) {
|
||||
push(
|
||||
new PdaState(
|
||||
to.state,
|
||||
path.stack.concat(to.stack),
|
||||
path.position + 1,
|
||||
this.input,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
this.paths = paths;
|
||||
|
||||
if (this.paths.length == 0) return "reject";
|
||||
if (this.accepted.length != 0) return "accept";
|
||||
return "pending";
|
||||
}
|
||||
}
|
||||
|
||||
export class TmState {
|
||||
readonly state: State;
|
||||
readonly tape: Symbol[];
|
||||
|
||||
readonly position: number;
|
||||
readonly input: string;
|
||||
readonly accepted: boolean = false;
|
||||
private repr!: string;
|
||||
|
||||
constructor(state: State, tape: Symbol[], position: number, input: string) {
|
||||
this.state = state;
|
||||
this.tape = tape;
|
||||
this.position = position;
|
||||
this.input = input;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
if (!this.repr) this.repr = this.state + " " + this.position;
|
||||
return this.repr;
|
||||
}
|
||||
}
|
||||
|
||||
export class TmSim {
|
||||
machine: Tm;
|
||||
input: string;
|
||||
current_states: Map<string, TmState[]> = new Map();
|
||||
accepted: TmState[] = [];
|
||||
|
||||
constructor(machine: Tm, input: string) {
|
||||
this.machine = machine;
|
||||
this.input = input;
|
||||
}
|
||||
|
||||
step(): SimStepResult {
|
||||
return "pending";
|
||||
}
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@ function setFlexFill(pane: HTMLElement) {
|
|||
pane.style.flex = "1 1 auto";
|
||||
}
|
||||
|
||||
export function enableFlexSplitters() {
|
||||
function enableFlexSplitters() {
|
||||
// Horizontal: A | hSplit | B (top/split/bottom)
|
||||
for (const splitter of document.querySelectorAll<HTMLElement>(".hSplit:not(.styleOnly)")) {
|
||||
const parent = splitter.parentElement as HTMLElement | null;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
// deno-lint-ignore-file
|
||||
import { bus } from "./bus.ts";
|
||||
|
||||
import {
|
||||
ViewPlugin,
|
||||
} from "npm:@codemirror/view";
|
||||
bus.on("compiled", ({log, ansi_log}) => {
|
||||
const term = document.getElementById("terminal");
|
||||
if (!term) return;
|
||||
|
||||
import { analysisField } from "./editor.ts";
|
||||
let s = "";
|
||||
s += `\x1b[90m[compile]\x1b[0m ${log.length} diagnostics\n`;
|
||||
|
||||
term.innerHTML = ansiToHtml(s + ansi_log);
|
||||
})
|
||||
|
||||
function escapeHtml(s: string) {
|
||||
return s
|
||||
|
|
@ -78,32 +82,3 @@ function ansiToHtml(input: string) {
|
|||
out += openSpanIfNeeded(input.slice(lastIndex));
|
||||
return out;
|
||||
}
|
||||
|
||||
// @ts-expect-error bad library
|
||||
function formatTerminal(view) {
|
||||
const term = document.getElementById("terminal");
|
||||
if (!term) return;
|
||||
|
||||
const { log, log_formatted } = view.state.field(analysisField);
|
||||
|
||||
let s = "";
|
||||
s += `\x1b[90m[compile]\x1b[0m ${log.length} diagnostics\n`;
|
||||
|
||||
term.innerHTML = ansiToHtml(s + log_formatted);
|
||||
}
|
||||
|
||||
export const terminalPlugin = ViewPlugin.fromClass(
|
||||
class {
|
||||
|
||||
// @ts-expect-error bad library
|
||||
constructor(view) {
|
||||
// @ts-expect-error bad library
|
||||
this.view = view;
|
||||
formatTerminal(view);
|
||||
}
|
||||
// @ts-expect-error bad library
|
||||
update(update) {
|
||||
if (update.docChanged) formatTerminal(update.view);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { updateGraphTheme } from "./visualizer.ts";
|
||||
import { bus } from "./bus.ts";
|
||||
|
||||
const themeBtn = document.getElementById("themeToggle") as HTMLButtonElement;
|
||||
|
||||
|
|
@ -22,11 +22,11 @@ function setTheme(theme: Theme) {
|
|||
|
||||
// update button label
|
||||
themeBtn.textContent = theme === "dark" ? "🌙 Dark" : "☀️ Light";
|
||||
updateGraphTheme();
|
||||
|
||||
bus.emit("theme/update", undefined);
|
||||
}
|
||||
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
bus.on("begin", _ => setTheme(getPreferredTheme()))
|
||||
|
||||
themeBtn.addEventListener("click", toggleTheme);
|
||||
function toggleTheme() {
|
||||
|
|
@ -34,8 +34,6 @@ function toggleTheme() {
|
|||
setTheme(current === "dark" ? "light" : "dark");
|
||||
}
|
||||
|
||||
|
||||
|
||||
globalThis.window.matchMedia?.("(prefers-color-scheme: light)")
|
||||
?.addEventListener("change", () => {
|
||||
if (localStorage.getItem("theme")) return;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,119 @@
|
|||
// deno-lint-ignore-file no-unversioned-import
|
||||
|
||||
// deno-lint-ignore no-import-prefix
|
||||
import * as vis from "npm:vis-network/standalone";
|
||||
import { StateEffect } from "npm:@codemirror/state";
|
||||
import { Machine } from "./automata.ts";
|
||||
import { getText } from "./editor.ts";
|
||||
|
||||
export const nodes = new vis.DataSet<vis.Node>();
|
||||
export const edges = new vis.DataSet<vis.Edge>();
|
||||
import { bus } from "./bus.ts";
|
||||
import type { Sim } from "./simulation.ts";
|
||||
import type { Machine } from "./automata.ts";
|
||||
|
||||
|
||||
bus.on("controls/physics", ({enabled}) => {
|
||||
network.setOptions({ physics: { enabled } });
|
||||
network.setOptions({edges: {smooth: enabled}});
|
||||
});
|
||||
bus.on("controls/reset_network", _ => {
|
||||
try {
|
||||
nodes.forEach((n) => {
|
||||
n.physics = true;
|
||||
n.x = undefined;
|
||||
n.y = undefined;
|
||||
});
|
||||
network.setData({ nodes, edges });
|
||||
} catch {
|
||||
// Last resort
|
||||
network.setData({ nodes, edges });
|
||||
}
|
||||
});
|
||||
|
||||
bus.on("automata/sim/after_step", _ => {
|
||||
network.redraw();
|
||||
});
|
||||
|
||||
let simulation: Sim | null = null;
|
||||
bus.on("automata/sim/update", ({simulation: sim}) => {
|
||||
simulation = sim;
|
||||
network.redraw();
|
||||
});
|
||||
|
||||
let automaton: Machine
|
||||
|
||||
bus.on("automata/update", ({automaton: auto}) => {
|
||||
automaton = auto;
|
||||
// Populate nodes
|
||||
for (const state of automaton.states.keys()) {
|
||||
|
||||
const size = measureTextWidth(state, getGraphTheme().node_font)/2+10
|
||||
if (nodes.get(state)) {
|
||||
nodes.update({
|
||||
id: state,
|
||||
label: state,
|
||||
size
|
||||
});
|
||||
} else {
|
||||
nodes.add({
|
||||
id: state,
|
||||
label: state,
|
||||
size
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Populate edges
|
||||
for (const [edge_id, transitions] of automaton.edges) {
|
||||
const to_from = edge_id.split("#");
|
||||
const vadjust = -getGraphTheme().edge_font_size *
|
||||
Math.floor(transitions.length / 2);
|
||||
const font = {
|
||||
vadjust,
|
||||
bold: {
|
||||
vadjust
|
||||
}
|
||||
};
|
||||
if (edges.get(edge_id)) {
|
||||
edges.update({
|
||||
id: edge_id,
|
||||
font,
|
||||
from: to_from[0],
|
||||
to: to_from[1],
|
||||
label: transitions.map(i => i.repr).join(automaton.type=="fa"?",":"\n"),
|
||||
});
|
||||
} else {
|
||||
edges.add({
|
||||
id: edge_id,
|
||||
font,
|
||||
from: to_from[0],
|
||||
to: to_from[1],
|
||||
label: transitions.map(i => i.repr).join(automaton.type=="fa"?",":"\n"),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// delete old edges
|
||||
for (const edge_id of edges.getIds()) {
|
||||
if (!automaton.edges.has(edge_id as string)) {
|
||||
edges.remove(edge_id);
|
||||
}
|
||||
}
|
||||
|
||||
// delete old nodes
|
||||
for (const node_id of nodes.getIds()) {
|
||||
if (!automaton.states.has(node_id as string)) {
|
||||
nodes.remove(node_id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const nodes = new vis.DataSet<vis.Node>();
|
||||
const edges = new vis.DataSet<vis.Edge>();
|
||||
|
||||
|
||||
let _graphTheme: GraphTheme | null = null;
|
||||
bus.on("theme/update", _ => {
|
||||
_graphTheme = null;
|
||||
updateGraphTheme()
|
||||
});
|
||||
|
||||
|
||||
type Color = string;
|
||||
type GraphTheme = {
|
||||
|
|
@ -37,12 +143,6 @@ type GraphTheme = {
|
|||
edge_font_bold: string,
|
||||
};
|
||||
|
||||
let _graphTheme: GraphTheme | null = null;
|
||||
|
||||
function invalidateGraphThemeCache() {
|
||||
_graphTheme = null;
|
||||
}
|
||||
|
||||
function getGraphTheme(): GraphTheme {
|
||||
function cssVar(name: string, fallback = ""): string {
|
||||
return getComputedStyle(document.documentElement)
|
||||
|
|
@ -82,8 +182,7 @@ function getGraphTheme(): GraphTheme {
|
|||
return _graphTheme;
|
||||
}
|
||||
|
||||
export function updateGraphTheme() {
|
||||
invalidateGraphThemeCache();
|
||||
function updateGraphTheme() {
|
||||
const gt = getGraphTheme();
|
||||
|
||||
network.setOptions({
|
||||
|
|
@ -122,37 +221,13 @@ export function updateGraphTheme() {
|
|||
},
|
||||
});
|
||||
|
||||
setAutomaton(automaton)
|
||||
}
|
||||
|
||||
let automaton: Machine = {
|
||||
type: "fa",
|
||||
alphabet: new Map(),
|
||||
final_states: new Map(),
|
||||
initial_state: "",
|
||||
states: new Map(),
|
||||
transitions: new Map(),
|
||||
transitions_components: new Map(),
|
||||
edges: new Map(),
|
||||
};
|
||||
|
||||
export function clearAutomaton() {
|
||||
automaton = {
|
||||
type: "fa",
|
||||
alphabet: new Map(),
|
||||
final_states: new Map(),
|
||||
initial_state: "",
|
||||
states: new Map(),
|
||||
transitions: new Map(),
|
||||
transitions_components: new Map(),
|
||||
edges: new Map(),
|
||||
};
|
||||
network.redraw();
|
||||
}
|
||||
|
||||
|
||||
let _measureCanvas: HTMLCanvasElement | null = null;
|
||||
|
||||
export function measureTextWidth(text: string, font: string): number {
|
||||
function measureTextWidth(text: string, font: string): number {
|
||||
if (!_measureCanvas) {
|
||||
_measureCanvas = document.createElement("canvas");
|
||||
}
|
||||
|
|
@ -163,71 +238,6 @@ export function measureTextWidth(text: string, font: string): number {
|
|||
return ctx.measureText(text).width;
|
||||
}
|
||||
|
||||
export function setAutomaton(auto: Machine) {
|
||||
automaton = auto;
|
||||
|
||||
// Populate nodes
|
||||
for (const state of automaton.states.keys()) {
|
||||
|
||||
const size = measureTextWidth(state, getGraphTheme().node_font)/2+10
|
||||
if (nodes.get(state)) {
|
||||
nodes.update({
|
||||
id: state,
|
||||
label: state,
|
||||
size
|
||||
});
|
||||
} else {
|
||||
nodes.add({
|
||||
id: state,
|
||||
label: state,
|
||||
size
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Populate edges
|
||||
for (const [edge_id, transitions] of auto.edges) {
|
||||
const to_from = edge_id.split("#");
|
||||
const vadjust = -getGraphTheme().edge_font_size *
|
||||
Math.floor(transitions.length / 2);
|
||||
const font = {
|
||||
vadjust,
|
||||
bold: {
|
||||
vadjust
|
||||
}
|
||||
};
|
||||
if (edges.get(edge_id)) {
|
||||
edges.update({
|
||||
id: edge_id,
|
||||
font,
|
||||
from: to_from[0],
|
||||
to: to_from[1],
|
||||
label: transitions.map(i => i.repr).join(auto.type=="fa"?",":"\n"),
|
||||
});
|
||||
} else {
|
||||
edges.add({
|
||||
id: edge_id,
|
||||
font,
|
||||
from: to_from[0],
|
||||
to: to_from[1],
|
||||
label: transitions.map(i => i.repr).join(auto.type=="fa"?",":"\n"),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const edge_id of edges.getIds()) {
|
||||
if (!auto.edges.has(edge_id as string)) {
|
||||
edges.remove(edge_id);
|
||||
}
|
||||
}
|
||||
|
||||
for (const node_id of nodes.getIds()) {
|
||||
if (!auto.states.has(node_id as string)) {
|
||||
nodes.remove(node_id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function chosen_edge(
|
||||
_: vis.ChosenNodeValues,
|
||||
id: vis.IdType,
|
||||
|
|
@ -244,7 +254,7 @@ function chosen_node(
|
|||
) {
|
||||
}
|
||||
|
||||
export const network: vis.Network = createGraph();
|
||||
const network: vis.Network = createGraph();
|
||||
|
||||
function createGraph(): vis.Network {
|
||||
const container = document.getElementById("graph")!;
|
||||
|
|
@ -306,6 +316,7 @@ function createGraph(): vis.Network {
|
|||
return network;
|
||||
}
|
||||
|
||||
|
||||
function renderNode({
|
||||
ctx,
|
||||
id,
|
||||
|
|
@ -324,7 +335,7 @@ function renderNode({
|
|||
const isFinal = automaton.final_states
|
||||
? automaton.final_states.has(id)
|
||||
: false;
|
||||
const isActive = false;
|
||||
const isActive = simulation?simulation.current_states.has(id):false;
|
||||
|
||||
const fill = selected ? t.bg_2 : hover ? t.bg_1 : t.bg_0;
|
||||
const stroke = isActive ? t.current_node_border : t.node_border;
|
||||
|
|
@ -366,34 +377,33 @@ function renderNode({
|
|||
drawInitialArrow(ctx, x, y, r, t.edge);
|
||||
}
|
||||
|
||||
// const badgeText = "bleh\npee";
|
||||
// if (badgeText) {
|
||||
// const lines = badgeText.split("\n").slice(0, 3);
|
||||
// const padX = 8;
|
||||
// const padY = 6;
|
||||
// const lineH = 14;
|
||||
if (isActive) {
|
||||
const paths = simulation?.current_states.get(id)!;
|
||||
const padX = 8;
|
||||
const padY = 6;
|
||||
const lineH = 14;
|
||||
|
||||
// let w = 0;
|
||||
// for (const ln of lines) w = Math.max(w, ctx.measureText(ln).width);
|
||||
// const boxW = w + padX * 2;
|
||||
// const boxH = lines.length * lineH + padY * 2;
|
||||
let w = 0;
|
||||
for (const ln of paths) w = Math.max(w, ctx.measureText(ln.toString()).width);
|
||||
const boxW = w + padX * 2;
|
||||
const boxH = paths.length * lineH + padY * 2;
|
||||
|
||||
// const bx = x - boxW / 2;
|
||||
// const by = y - r - 12 - boxH;
|
||||
const bx = x - boxW / 2;
|
||||
const by = y - r - 12 - boxH;
|
||||
|
||||
// ctx.fillStyle = t.bg_1;
|
||||
// ctx.strokeStyle = t.bg_2;
|
||||
// ctx.lineWidth = 1;
|
||||
// roundRect(ctx, bx, by, boxW, boxH, 8);
|
||||
// ctx.fill();
|
||||
// ctx.stroke();
|
||||
ctx.fillStyle = t.bg_1;
|
||||
ctx.strokeStyle = t.bg_2;
|
||||
ctx.lineWidth = 1;
|
||||
roundRect(ctx, bx, by, boxW, boxH, 8);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// ctx.fillStyle = t.fg_0;
|
||||
// ctx.textBaseline = "top";
|
||||
// for (let i = 0; i < lines.length; i++) {
|
||||
// ctx.fillText(lines[i], x, by + padY + i * lineH);
|
||||
// }
|
||||
// }
|
||||
ctx.textBaseline = "top";
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
ctx.fillStyle = paths[i].accepted?t.current_node_border:t.fg_0;
|
||||
ctx.fillText(paths[i].toString(), x, by + padY + i * lineH);
|
||||
}
|
||||
}
|
||||
|
||||
const node: vis.Node = nodes.get(id)!;
|
||||
const physicsOff = node.physics === false;
|
||||
|
|
|
|||
|
|
@ -52,27 +52,45 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
.btn-yellow {
|
||||
background: color-mix(in srgb, var(--warning) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--warning) 40%, transparent);
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
background: color-mix(in srgb, var(--warning) 22%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background: color-mix(in srgb, var(--focus) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--focus) 40%, transparent);
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--focus) 22%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-grey {
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
background: color-mix(in srgb, var(--ansi-fg-90) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--ansi-fg-90) 28%, transparent);
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
background: color-mix(in srgb, var(--ansi-fg-90) 18%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
background: color-mix(in srgb, var(--error) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--error) 28%, transparent);
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--error) 18%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle.active {
|
||||
background: color-mix(in srgb, var(--warning) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--success) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--success) 30%, transparent);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -97,3 +115,33 @@
|
|||
text-align: right;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.test-input {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
|
||||
align-self: center;
|
||||
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--bg-1);
|
||||
background: var(--bg-2);
|
||||
|
||||
font: var(--font-ui);
|
||||
color: var(--fg-0);
|
||||
|
||||
outline: none;
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.test-input::placeholder {
|
||||
color: var(--fg-0);
|
||||
}
|
||||
|
||||
.test-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent);
|
||||
}
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
.cm-lineNumbers .cm-gutterElement {
|
||||
padding: 0 10px 0 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cm-activeLine {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ body {
|
|||
margin: 0;
|
||||
color: var(--fg-0);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 14px;
|
||||
background: #909090;
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +104,7 @@ body {
|
|||
border-radius: 12px;
|
||||
border: 1px solid var(bg-1);
|
||||
background: var(--bg-2);
|
||||
font: var(--font-ui)
|
||||
}
|
||||
|
||||
.share-toast {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
padding: 1em;
|
||||
margin: 0px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.35;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
|
|
|||
|
|
@ -152,8 +152,8 @@ pub struct Graph<'a> {
|
|||
#[wasm_bindgen(getter_with_clone)]
|
||||
pub struct CompileResult {
|
||||
pub log: Vec<CompileLog>,
|
||||
pub log_formatted: String,
|
||||
pub graph: Option<String>,
|
||||
pub ansi_log: String,
|
||||
pub machine: Option<String>,
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
|
|
@ -161,10 +161,10 @@ pub fn compile(input: &str) -> CompileResult {
|
|||
let mut ctx = Context::new(input);
|
||||
let result = automata::loader::parse_universal(&mut ctx);
|
||||
|
||||
let graph = result.map(|result| serde_json::to_string(&result).unwrap());
|
||||
let machine = result.map(|result| serde_json::to_string(&result).unwrap());
|
||||
|
||||
use std::fmt::Write;
|
||||
let log_formatted = ctx.logs_display().fold(String::new(), |mut s, e| {
|
||||
let ansi_log = ctx.logs_display().fold(String::new(), |mut s, e| {
|
||||
write!(&mut s, "{e}").unwrap();
|
||||
s
|
||||
});
|
||||
|
|
@ -190,7 +190,7 @@ pub fn compile(input: &str) -> CompileResult {
|
|||
|
||||
CompileResult {
|
||||
log,
|
||||
log_formatted,
|
||||
graph,
|
||||
ansi_log,
|
||||
machine,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue