Add a level selector

src/fsm.js

@@ -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);
-  }
-  nodes.forEach((node) => node.classList.remove('current-node'));
-  if (state in nodes) {
-    nodes[state].classList.add('current-node');
-  }
-}
+export async function selectAutomaton(states) {
+  let state = 0;
+  let builder = '';
 
-/**
- * Steps the FSM with the given letter.
- *
- * @param {string} letter
- */
-function step(letter) {
-  if (state === -1) {
-    return;
+  // 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}`;
+    }
   }
-  builder += letter;
-  state = states[state].transitions[letter] ?? -1;
-  updateUIState();
-}
+  const graph = /** @type {HTMLDivElement} */ (document.getElementById('pen'));
+  const { svg } = await mermaid.render('state-graph', graphDefinition);
+  graph.innerHTML = svg;
+  const nodes = graph.querySelectorAll('.label-container');
 
-/**
- * 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);
-}
-
-// Reacts to input in the text box
-wordInput.addEventListener('input', () => {
-  const value = wordInput.value;
-  builder = '';
-  state = 0;
-  for (const letter of value) {
-    step(letter);
+  /**
+   * 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');
+    }
   }
-  if (!value.length) {
+
+  /**
+   * 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();
   }
-});
 
-clearButton.addEventListener('click', () => {
-  wordInput.value = '';
-  builder = '';
-  state = 0;
+  // 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();
+    }
+  });
+
+  clearButton.addEventListener('click', () => {
+    wordInput.value = '';
+    builder = '';
+    state = 0;
+    updateUIState();
+  });
+
   updateUIState();
-});
-
-updateUIState();
+}