|
|
|
|
@ -1,5 +1,4 @@
|
|
|
|
|
import mermaid from 'mermaid';
|
|
|
|
|
import { ENDS_WITH_TWO_B } from './examples.js';
|
|
|
|
|
|
|
|
|
|
const IS_VALID = 'is-valid';
|
|
|
|
|
const IS_INVALID = 'is-invalid';
|
|
|
|
|
@ -14,112 +13,99 @@ mermaid.initialize({
|
|
|
|
|
startOnLoad: false,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const states = ENDS_WITH_TWO_B;
|
|
|
|
|
let state = 0;
|
|
|
|
|
let builder = '';
|
|
|
|
|
|
|
|
|
|
// Build the mermaid graph definition
|
|
|
|
|
let graphDefinition = 'stateDiagram-v2';
|
|
|
|
|
for (let i = 0; i < states.length; ++i) {
|
|
|
|
|
graphDefinition += `\n s${i} : ${i}`;
|
|
|
|
|
for (const [transition, destination] of Object.entries(states[i].transitions)) {
|
|
|
|
|
graphDefinition += `\n s${i} --> s${destination}: ${transition}`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const graph = /** @type {HTMLDivElement} */ (document.getElementById('pen'));
|
|
|
|
|
const { svg } = await mermaid.render('state-graph', graphDefinition);
|
|
|
|
|
graph.innerHTML = svg;
|
|
|
|
|
const nodes = graph.querySelectorAll('.label-container');
|
|
|
|
|
for (let i = 0; i < nodes.length; ++i) {
|
|
|
|
|
if (states[i].accepting) {
|
|
|
|
|
nodes[i].classList.add('accepting-node');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// Create a triangular arrow pointing to the initial state
|
|
|
|
|
const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
|
|
|
const x = -(getIntAttribute(nodes[0], 'x') - 20);
|
|
|
|
|
const y = -getIntAttribute(nodes[0], 'y');
|
|
|
|
|
arrow.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
|
|
|
|
|
arrow.setAttribute('transform', `translate(${x}, ${y})`);
|
|
|
|
|
arrow.setAttribute('fill', 'currentColor');
|
|
|
|
|
(/** @type {Element} */ (graph.querySelector('.edgePaths'))).appendChild(arrow);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Updates the UI to reflect the current state.
|
|
|
|
|
* @param {import('./examples.js').State[]} states
|
|
|
|
|
*/
|
|
|
|
|
function updateUIState() {
|
|
|
|
|
wordInput.value = builder;
|
|
|
|
|
if (state === -1 || !states[state].accepting) {
|
|
|
|
|
light.classList.remove(IS_VALID);
|
|
|
|
|
light.classList.add(IS_INVALID);
|
|
|
|
|
} else {
|
|
|
|
|
light.classList.remove(IS_INVALID);
|
|
|
|
|
light.classList.add(IS_VALID);
|
|
|
|
|
export async function selectAutomaton(states) {
|
|
|
|
|
let state = 0;
|
|
|
|
|
let builder = '';
|
|
|
|
|
|
|
|
|
|
// Build the mermaid graph definition
|
|
|
|
|
let graphDefinition = 'stateDiagram-v2\n classDef acceptingnode font-weight:bold,stroke-width:2px,stroke:yellow';
|
|
|
|
|
for (let i = 0; i < states.length; ++i) {
|
|
|
|
|
graphDefinition += `\n s${i} : ${i}`;
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
graphDefinition += '\n [*] --> s0';
|
|
|
|
|
}
|
|
|
|
|
if (states[i].accepting) {
|
|
|
|
|
graphDefinition += `\n s${i} --> [*]`;
|
|
|
|
|
graphDefinition += `\n class s${i} acceptingnode`;
|
|
|
|
|
}
|
|
|
|
|
for (const [transition, destination] of Object.entries(states[i].transitions)) {
|
|
|
|
|
graphDefinition += `\n s${i} --> s${destination}: ${transition}`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
nodes.forEach((node) => node.classList.remove('current-node'));
|
|
|
|
|
if (state in nodes) {
|
|
|
|
|
nodes[state].classList.add('current-node');
|
|
|
|
|
const graph = /** @type {HTMLDivElement} */ (document.getElementById('pen'));
|
|
|
|
|
const { svg } = await mermaid.render('state-graph', graphDefinition);
|
|
|
|
|
graph.innerHTML = svg;
|
|
|
|
|
const nodes = graph.querySelectorAll('.label-container');
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Updates the UI to reflect the current state.
|
|
|
|
|
*/
|
|
|
|
|
function updateUIState() {
|
|
|
|
|
wordInput.value = builder;
|
|
|
|
|
if (state === -1 || !states[state].accepting) {
|
|
|
|
|
light.classList.remove(IS_VALID);
|
|
|
|
|
light.classList.add(IS_INVALID);
|
|
|
|
|
} else {
|
|
|
|
|
light.classList.remove(IS_INVALID);
|
|
|
|
|
light.classList.add(IS_VALID);
|
|
|
|
|
}
|
|
|
|
|
nodes.forEach((node) => node.classList.remove('current-node'));
|
|
|
|
|
if (state in nodes) {
|
|
|
|
|
nodes[state].classList.add('current-node');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Steps the FSM with the given letter.
|
|
|
|
|
*
|
|
|
|
|
* @param {string} letter
|
|
|
|
|
*/
|
|
|
|
|
function step(letter) {
|
|
|
|
|
if (state === -1) {
|
|
|
|
|
return;
|
|
|
|
|
/**
|
|
|
|
|
* Steps the FSM with the given letter.
|
|
|
|
|
*
|
|
|
|
|
* @param {string} letter
|
|
|
|
|
*/
|
|
|
|
|
function step(letter) {
|
|
|
|
|
if (state === -1) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
builder += letter;
|
|
|
|
|
state = states[state].transitions[letter] ?? -1;
|
|
|
|
|
updateUIState();
|
|
|
|
|
}
|
|
|
|
|
builder += letter;
|
|
|
|
|
state = states[state].transitions[letter] ?? -1;
|
|
|
|
|
updateUIState();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Gets the integer value of the given attribute on the given element.
|
|
|
|
|
*
|
|
|
|
|
* @param {Element} element
|
|
|
|
|
* @param {string} attribute
|
|
|
|
|
* @returns {number}
|
|
|
|
|
*/
|
|
|
|
|
function getIntAttribute(element, attribute) {
|
|
|
|
|
return parseInt(/** @type {string} */ (element.getAttribute(attribute)));
|
|
|
|
|
}
|
|
|
|
|
// Dynamically create buttons for each letter in the alphabet
|
|
|
|
|
/**
|
|
|
|
|
* @type {string[]}
|
|
|
|
|
*/
|
|
|
|
|
const alphabet = Array.from(states.reduce((acc, current) => {
|
|
|
|
|
Object.keys(current.transitions).forEach(current => acc.add(current));
|
|
|
|
|
return acc;
|
|
|
|
|
}, new Set())).sort();
|
|
|
|
|
for (const letter of alphabet) {
|
|
|
|
|
const button = document.createElement('button');
|
|
|
|
|
button.innerText = letter;
|
|
|
|
|
button.addEventListener('click', () => step(letter));
|
|
|
|
|
buttons.appendChild(button);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Dynamically create buttons for each letter in the alphabet
|
|
|
|
|
/**
|
|
|
|
|
* @type {string[]}
|
|
|
|
|
*/
|
|
|
|
|
const alphabet = Array.from(states.reduce((acc, current) => {
|
|
|
|
|
Object.keys(current.transitions).forEach(current => acc.add(current));
|
|
|
|
|
return acc;
|
|
|
|
|
}, new Set())).sort();
|
|
|
|
|
for (const letter of alphabet) {
|
|
|
|
|
const button = document.createElement('button');
|
|
|
|
|
button.innerText = letter;
|
|
|
|
|
button.addEventListener('click', () => step(letter));
|
|
|
|
|
buttons.appendChild(button);
|
|
|
|
|
}
|
|
|
|
|
// Reacts to input in the text box
|
|
|
|
|
wordInput.addEventListener('input', () => {
|
|
|
|
|
const value = wordInput.value;
|
|
|
|
|
builder = '';
|
|
|
|
|
state = 0;
|
|
|
|
|
for (const letter of value) {
|
|
|
|
|
step(letter);
|
|
|
|
|
}
|
|
|
|
|
if (!value.length) {
|
|
|
|
|
updateUIState();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Reacts to input in the text box
|
|
|
|
|
wordInput.addEventListener('input', () => {
|
|
|
|
|
const value = wordInput.value;
|
|
|
|
|
builder = '';
|
|
|
|
|
state = 0;
|
|
|
|
|
for (const letter of value) {
|
|
|
|
|
step(letter);
|
|
|
|
|
}
|
|
|
|
|
if (!value.length) {
|
|
|
|
|
clearButton.addEventListener('click', () => {
|
|
|
|
|
wordInput.value = '';
|
|
|
|
|
builder = '';
|
|
|
|
|
state = 0;
|
|
|
|
|
updateUIState();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
clearButton.addEventListener('click', () => {
|
|
|
|
|
wordInput.value = '';
|
|
|
|
|
builder = '';
|
|
|
|
|
state = 0;
|
|
|
|
|
updateUIState();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
updateUIState();
|
|
|
|
|
}
|
|
|
|
|
|
