-
-
Controls
-
-
-
- | Action |
- Desktop |
-
-
-
-
- | Pan |
- Left-click and drag |
-
-
- | Zoom in/out |
- Mouse wheel |
-
-
- | Create state |
- Double-click |
-
-
- | Move state |
- Middle-click and drag |
-
-
- | Edit/Delete state |
- Right-click |
-
-
- | Create transition |
- Left-click and drag |
-
-
- | Edit transition |
- Right-click |
-
-
- | Delete transition |
- Right-click |
-
-
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 97e9d7b..10c17f1 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,10 @@
"@types/d3": "^7.4.3",
"@types/eslint__js": "^8.42.3",
"eslint": "^8.57.0",
- "globals": "^14.0.0",
- "typescript": "^5.4.2",
- "typescript-eslint": "^7.3.1",
- "vite": "^5.2.2"
+ "globals": "^15.2.0",
+ "typescript": "^5.4.5",
+ "typescript-eslint": "^7.9.0",
+ "vite": "^5.2.11"
},
"dependencies": {
"d3": "^7.9.0",
diff --git a/src/fsm.js b/src/fsm.js
index 1fe54bf..2863543 100644
--- a/src/fsm.js
+++ b/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[]}
diff --git a/src/main.js b/src/main.js
index 8f33d10..19cfd75 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,6 @@
import { AUTOMATONS } from './examples.js';
import { openAutomaton } from './fsm.js';
import { tr, trUserContent } from './i18n.ts';
-import './modal.ts';
const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));
diff --git a/src/modal.ts b/src/modal.ts
deleted file mode 100644
index 4411041..0000000
--- a/src/modal.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-let modal: HTMLElement | null = null;
-
-function openModal(event: Event) {
- event.preventDefault();
- const el = document.querySelector((event.target as HTMLElement).getAttribute('href')!)! as HTMLElement;
- // @ts-expect-error reset
- el.style.display = null;
- el.removeAttribute('hidden');
- el.setAttribute('aria-modal', 'true');
- modal = el;
- modal.addEventListener('click', closeModal);
-}
-
-function closeModal(event: Event) {
- event.preventDefault();
- if (modal === null) {
- return;
- }
- modal.style.display = 'none';
- modal.setAttribute('hidden', 'hidden');
- modal.removeAttribute('aria-modal');
- modal.removeEventListener('click', closeModal);
- modal = null;
-}
-
-document.querySelectorAll('.open-modal').forEach((el) => {
- el.addEventListener('click', openModal);
-});
-
-window.addEventListener('keydown', (event) => {
- if (event.key === 'Escape' && modal !== null) {
- closeModal(event);
- }
-});
diff --git a/src/style.css b/src/style.css
index 642c6a0..17b5899 100644
--- a/src/style.css
+++ b/src/style.css
@@ -238,36 +238,37 @@ th, td {
padding: 0 16px;
}
-.modal[hidden] {
- display: none;
-}
-
.actions {
position: absolute;
top: 16px;
left: 16px;
}
-.modal {
- position: fixed;
- display: flex;
- align-items: center;
- justify-content: center;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, .8);
- animation: fadeIn .3s both
+#sidebar-toggle::after {
+ content: "🡒";
}
-
-.modal-content {
- overflow: auto;
- width: 600px;
- max-width: calc(100vw - 20px);
- max-height: calc(100vh - 20px);
- padding: 20px;
- background-color: #1a1a1a;
+.has-sidebar #sidebar-toggle::after {
+ content: "🡐";
+}
+#sidebar {
+ margin-left: -600px;
+ padding-left: .5rem;
+ transition: all .3s;
+ position: absolute;
+ pointer-events: none;
+}
+.has-sidebar #sidebar {
+ margin: -.2rem 0 0 0;
+}
+.has-sidebar #sidebar-toggle {
+ margin-left: 7rem;
+ transition: all .3s;
+}
+#controls {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1em;
+ flex-grow: 1;
}
@media (prefers-color-scheme: light) {
@@ -302,7 +303,7 @@ th, td {
th, td {
border-bottom: thin solid hsla(0, 0%, 0%, .12);
}
- .modal-content {
+ .sidebar-content {
background-color: #f0f0f0;
}
}