diff --git a/index.html b/index.html
index 6baa8c6..175eea5 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,10 @@
+
diff --git a/src/fsm.js b/src/fsm.js
index 568b712..0d382eb 100644
--- a/src/fsm.js
+++ b/src/fsm.js
@@ -9,6 +9,7 @@ const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-bu
const controlsButton = /** @type {HTMLButtonElement} */ (document.getElementById('controls-button'));
const clearButton = /** @type {HTMLButtonElement} */ (document.getElementById('clear-button'));
const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
+const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph'));
/**
* @param {import('./examples.js').State[]} states
@@ -34,7 +35,9 @@ export function openAutomaton(states, editable = false) {
console.error(e);
}
});
- const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph'));
+ while (container.firstChild) {
+ container.removeChild(container.firstChild);
+ }
container.appendChild(viewer);
viewer.graph = graph;
@@ -83,21 +86,30 @@ export function openAutomaton(states, editable = false) {
updateUIState();
}
- // Dynamically create buttons for each letter in the alphabet
/**
- * @type {string[]}
+ * Dynamically create buttons for each letter in the alphabet.
*/
- 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);
+ function createLetters() {
+ /**
+ * @type {string[]}
+ */
+ const alphabet = Array.from(states.reduce((acc, current) => {
+ Object.keys(current.transitions).forEach(current => acc.add(current));
+ return acc;
+ }, new Set())).sort();
+ while (buttons.firstChild) {
+ buttons.removeChild(buttons.firstChild);
+ }
+ for (const letter of alphabet) {
+ const button = document.createElement('button');
+ button.innerText = letter;
+ button.addEventListener('click', () => step(letter));
+ buttons.appendChild(button);
+ }
}
+ createLetters();
+
// Reacts to input in the text box
wordInput.addEventListener('input', () => type());
diff --git a/src/main.js b/src/main.js
index e5ae8bd..1a1bafb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import './modal.ts';
const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));
+const backButton = /** @type {HTMLButtonElement} */ (document.getElementById('back-button'));
const app = /** @type {HTMLDivElement} */ (document.getElementById('app'));
for (const [displayName, automaton] of Object.entries(AUTOMATONS)) {
@@ -44,3 +45,8 @@ create.addEventListener('click', () => {
app.removeAttribute('hidden');
openAutomaton([], true);
});
+
+backButton.addEventListener('click', () => {
+ app.setAttribute('hidden', 'hidden');
+ automatonSelector.removeAttribute('hidden');
+});
diff --git a/src/style.css b/src/style.css
index aec9a20..d44e4e3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -199,6 +199,12 @@ th, td {
display: none;
}
+.actions {
+ position: absolute;
+ top: 16px;
+ left: 16px;
+}
+
.modal {
position: fixed;
display: flex;
@@ -226,7 +232,7 @@ th, td {
color: #213547;
background-color: #ffffff;
}
- button, .btn {
+ button, .button {
background-color: #f9f9f9;
}
.context-menu {