clement/finite-state-automaton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a level selector

Browse Source
This commit is contained in:
Clément Fréville
2024-01-10 07:19:17 +01:00
parent 987388b714
commit b68f84bc98
5 changed files with 196 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -8,7 +8,11 @@
<link rel="stylesheet" href="src/style.css" /> <link rel="stylesheet" href="src/style.css" />
</head> </head>
<body> <body>
<div id="app"> <div id="automaton-selector">
<h1>Select an automaton</h1>
<div id="automaton-collection"></div>
</div>
<div id="app" hidden="hidden">
<div class="input"> <div class="input">
<input type="text" id="word-input" autocapitalize="off" spellcheck="false" /> <input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
<div id="light"></div> <div id="light"></div>
@@ -20,6 +24,6 @@
<pre id="pen"></pre> <pre id="pen"></pre>
<pre id="state-graph"></pre> <pre id="state-graph"></pre>
</div> </div>
<script type="module" src="src/fsm.js"></script> <script type="module" src="src/main.js"></script>
</body> </body>
</html> </html>

45
src/examples.js
View File

@@ -4,6 +4,43 @@
* @property {boolean} [accepting] * @property {boolean} [accepting]
*/ */
/**
* @type {State[]}
*/
export const STARTS_ENDS_A = [
{ transitions: { a: 1, b: 3 } },
{ transitions: { a: 2, b: 1 } },
{ transitions: { a: 2, b: 1 }, accepting: true },
{ transitions: { a: 3, b: 3 } },
];
/**
* @type {State[]}
*/
export const STARTS_BB = [
{ transitions: { a: 3, b: 1 } },
{ transitions: { a: 3, b: 2 } },
{ transitions: { a: 2, b: 2 }, accepting: true },
{ transitions: { a: 3, b: 3 } },
];
/**
* @type {State[]}
*/
export const EXACTLY_ONE_B = [
{ transitions: { a: 0, b: 1 } },
{ transitions: { a: 1, b: 2 }, accepting: true },
{ transitions: { a: 2, b: 2 } },
];
/**
* @type {State[]}
*/
export const ODD_NUMBER_OF_A = [
{ transitions: { a: 1, b: 0 } },
{ transitions: { a: 0, b: 1 }, accepting: true },
];
/** /**
* @type {State[]} * @type {State[]}
*/ */
@@ -12,3 +49,11 @@ export const ENDS_WITH_TWO_B = [
{ transitions: { a: 0, b: 2 } }, { transitions: { a: 0, b: 2 } },
{ transitions: { a: 0, b: 2 }, accepting: true }, { transitions: { a: 0, b: 2 }, accepting: true },
]; ];
export const AUTOMATONS = {
'Starts and ends with a': STARTS_ENDS_A,
'Starts with bb': STARTS_BB,
'Exactly one b': EXACTLY_ONE_B,
'Odd number of a': ODD_NUMBER_OF_A,
'Ends with two b': ENDS_WITH_TWO_B,
};

92
src/fsm.js
View File

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

31
src/main.js Normal file
View File

@@ -0,0 +1,31 @@
import { AUTOMATONS } from './examples.js';
import { selectAutomaton } from './fsm.js';
const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));
const app = /** @type {HTMLDivElement} */ (document.getElementById('app'));
for (const [displayName, automaton] of Object.entries(AUTOMATONS)) {
const card = document.createElement('div');
card.setAttribute('tabindex', '0');
card.setAttribute('role', 'button');
card.classList.add('card');
card.innerHTML = `
<div class="card-body">
<h5 class="card-title">${displayName}</h5>
<p class="card-text">${automaton.length} states</p>
</div>
`;
async function handleEvent() {
automatonSelector.setAttribute('hidden', 'hidden');
app.removeAttribute('hidden');
await selectAutomaton(automaton);
}
card.addEventListener('click', handleEvent);
card.addEventListener('keydown', async (event) => {
if (event.key === 'Enter' || event.key === ' ') {
await handleEvent();
}
});
automatonCollection.appendChild(card);
}

31
src/style.css
View File

@@ -82,9 +82,34 @@ button:focus-visible {
fill: red !important; fill: red !important;
} }
.accepting-node { .accepting-node {
outline: 1px solid #81B1DB; stroke: yellow;
outline-offset: 2px; }
border-radius: 0.1em;
#automaton-selector {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
#automaton-collection {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 2em 0;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5em;
margin: 1em;
border-radius: 8px;
background-color: #1a1a1a;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.card:hover {
background-color: #2a2a2a;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {