Keep controls table while editing
This commit is contained in:
12
src/fsm.js
12
src/fsm.js
@@ -7,11 +7,12 @@ const IS_INVALID = 'is-invalid';
|
||||
const currentWord = /** @type {HTMLInputElement} */ (document.getElementById('current-word'));
|
||||
const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
|
||||
const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons'));
|
||||
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'));
|
||||
const displayGraphButton = /** @type {HTMLButtonElement} */ (document.getElementById('display-graph'));
|
||||
const controls = /** @type {HTMLElement} */ (document.getElementById('controls'));
|
||||
const sidebarToggle = /** @type {HTMLElement} */ (document.getElementById('sidebar-toggle'));
|
||||
|
||||
/**
|
||||
* @param {string} name
|
||||
@@ -25,11 +26,11 @@ export function openAutomaton(name, states, editable = false) {
|
||||
const viewer = new GraphEditor();
|
||||
viewer.readonly = !editable;
|
||||
if (editable) {
|
||||
controlsButton.removeAttribute('hidden');
|
||||
sidebarToggle.removeAttribute('hidden');
|
||||
container.classList.remove('blurred');
|
||||
displayGraphButton.setAttribute('hidden', 'hidden');
|
||||
} else {
|
||||
controlsButton.setAttribute('hidden', 'hidden');
|
||||
sidebarToggle.setAttribute('hidden', 'hidden');
|
||||
container.classList.add('blurred');
|
||||
displayGraphButton.removeAttribute('hidden');
|
||||
}
|
||||
@@ -146,6 +147,11 @@ displayGraphButton.addEventListener('click', () => {
|
||||
displayGraphButton.setAttribute('hidden', 'hidden');
|
||||
});
|
||||
|
||||
sidebarToggle.addEventListener('click', () => {
|
||||
console.log('toggle');
|
||||
controls.classList.toggle('has-sidebar');
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {import('./examples.js').State[]} states
|
||||
* @returns {number[]}
|
||||
|
Reference in New Issue
Block a user