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

Keep controls table while editing

Browse Source
This commit is contained in:
Clément Fréville
2024-05-15 22:10:55 +02:00
parent 76decaf203
commit 5f780c751a
7 changed files with 89 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.drone.yml
View File

@@ -4,7 +4,7 @@ type: docker
steps: steps:
- name: build - name: build
image: node:20-alpine image: node:22-alpine
commands: commands:
- yarn install - yarn install
- yarn build - yarn build

100
index.html
View File

@@ -15,7 +15,6 @@
<div id="app" hidden="hidden"> <div id="app" hidden="hidden">
<div class="actions"> <div class="actions">
<button id="back-button" data-i18n>Back</button> <button id="back-button" data-i18n>Back</button>
<a id="controls-button" class="button open-modal" href="#controls" data-i18n>Controls</a>
</div> </div>
<h2 id="current-word"></h2> <h2 id="current-word"></h2>
<div class="input"> <div class="input">
@@ -26,55 +25,56 @@
<div id="input-buttons"></div> <div id="input-buttons"></div>
<button id="clear-button" data-i18n>Clear</button> <button id="clear-button" data-i18n>Clear</button>
</div> </div>
<div class="player"> <div id="controls">
<div id="state-graph" class="blurred"></div> <div><button id="sidebar-toggle"></button></div>
<button id="display-graph" data-i18n>Display representation</button> <div id="sidebar">
</div> <h3 data-i18n>Controls</h3>
</div> <table>
<div id="controls" class="modal" hidden="hidden"> <thead>
<div class="modal-content"> <tr>
<h3 data-i18n>Controls</h3> <th data-i18n>Action</th>
<table> <th data-i18n>Desktop</th>
<thead> </tr>
<tr> </thead>
<th data-i18n>Action</th> <tbody>
<th data-i18n>Desktop</th> <tr>
</tr> <td data-i18n>Pan</td>
</thead> <td data-i18n>Left-click and drag</td>
<tbody> </tr>
<tr> <tr>
<td data-i18n>Pan</td> <td data-i18n>Zoom in/out</td>
<td data-i18n>Left-click and drag</td> <td data-i18n>Mouse wheel</td>
</tr> </tr>
<tr> <tr>
<td data-i18n>Zoom in/out</td> <td data-i18n>Create state</td>
<td data-i18n>Mouse wheel</td> <td data-i18n>Double-click</td>
</tr> </tr>
<tr> <tr>
<td data-i18n>Create state</td> <td data-i18n>Move state</td>
<td data-i18n>Double-click</td> <td data-i18n>Middle-click and drag</td>
</tr> </tr>
<tr> <tr>
<td data-i18n>Move state</td> <td data-i18n>Edit/Delete state</td>
<td data-i18n>Middle-click and drag</td> <td data-i18n>Right-click</td>
</tr> </tr>
<tr> <tr>
<td data-i18n>Edit/Delete state</td> <td data-i18n>Create transition</td>
<td data-i18n>Right-click</td> <td data-i18n>Left-click and drag</td>
</tr> </tr>
<tr> <tr>
<td data-i18n>Create transition</td> <td data-i18n>Edit transition</td>
<td data-i18n>Left-click and drag</td> <td data-i18n>Right-click</td>
</tr> </tr>
<tr> <tr>
<td data-i18n>Edit transition</td> <td data-i18n>Delete transition</td>
<td data-i18n>Right-click</td> <td data-i18n>Right-click</td>
</tr> </tr>
<tr> </table>
<td data-i18n>Delete transition</td> </div>
<td data-i18n>Right-click</td> <div class="player">
</tr> <div id="state-graph" class="blurred"></div>
</table> <button id="display-graph" data-i18n>Display representation</button>
</div>
</div> </div>
</div> </div>
<script type="module" src="src/main.js"></script> <script type="module" src="src/main.js"></script>

8
package.json
View File

@@ -13,10 +13,10 @@
"@types/d3": "^7.4.3", "@types/d3": "^7.4.3",
"@types/eslint__js": "^8.42.3", "@types/eslint__js": "^8.42.3",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"globals": "^14.0.0", "globals": "^15.2.0",
"typescript": "^5.4.2", "typescript": "^5.4.5",
"typescript-eslint": "^7.3.1", "typescript-eslint": "^7.9.0",
"vite": "^5.2.2" "vite": "^5.2.11"
}, },
"dependencies": { "dependencies": {
"d3": "^7.9.0", "d3": "^7.9.0",

12
src/fsm.js
View File

@@ -7,11 +7,12 @@ const IS_INVALID = 'is-invalid';
const currentWord = /** @type {HTMLInputElement} */ (document.getElementById('current-word')); const currentWord = /** @type {HTMLInputElement} */ (document.getElementById('current-word'));
const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input')); const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons')); 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 clearButton = /** @type {HTMLButtonElement} */ (document.getElementById('clear-button'));
const light = /** @type {HTMLDivElement} */ (document.getElementById('light')); const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph')); const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph'));
const displayGraphButton = /** @type {HTMLButtonElement} */ (document.getElementById('display-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 * @param {string} name
@@ -25,11 +26,11 @@ export function openAutomaton(name, states, editable = false) {
const viewer = new GraphEditor(); const viewer = new GraphEditor();
viewer.readonly = !editable; viewer.readonly = !editable;
if (editable) { if (editable) {
controlsButton.removeAttribute('hidden'); sidebarToggle.removeAttribute('hidden');
container.classList.remove('blurred'); container.classList.remove('blurred');
displayGraphButton.setAttribute('hidden', 'hidden'); displayGraphButton.setAttribute('hidden', 'hidden');
} else { } else {
controlsButton.setAttribute('hidden', 'hidden'); sidebarToggle.setAttribute('hidden', 'hidden');
container.classList.add('blurred'); container.classList.add('blurred');
displayGraphButton.removeAttribute('hidden'); displayGraphButton.removeAttribute('hidden');
} }
@@ -146,6 +147,11 @@ displayGraphButton.addEventListener('click', () => {
displayGraphButton.setAttribute('hidden', 'hidden'); displayGraphButton.setAttribute('hidden', 'hidden');
}); });
sidebarToggle.addEventListener('click', () => {
console.log('toggle');
controls.classList.toggle('has-sidebar');
});
/** /**
* @param {import('./examples.js').State[]} states * @param {import('./examples.js').State[]} states
* @returns {number[]} * @returns {number[]}

1
src/main.js
View File

@@ -1,7 +1,6 @@
import { AUTOMATONS } from './examples.js'; import { AUTOMATONS } from './examples.js';
import { openAutomaton } from './fsm.js'; import { openAutomaton } from './fsm.js';
import { tr, trUserContent } from './i18n.ts'; import { tr, trUserContent } from './i18n.ts';
import './modal.ts';
const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector')); const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection')); const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));

34
src/modal.ts
View File

@@ -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);
}
});

49
src/style.css
View File

@@ -238,36 +238,37 @@ th, td {
padding: 0 16px; padding: 0 16px;
} }
.modal[hidden] {
display: none;
}
.actions { .actions {
position: absolute; position: absolute;
top: 16px; top: 16px;
left: 16px; left: 16px;
} }
.modal { #sidebar-toggle::after {
position: fixed; content: "🡒";
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
} }
.has-sidebar #sidebar-toggle::after {
.modal-content { content: "🡐";
overflow: auto; }
width: 600px; #sidebar {
max-width: calc(100vw - 20px); margin-left: -600px;
max-height: calc(100vh - 20px); padding-left: .5rem;
padding: 20px; transition: all .3s;
background-color: #1a1a1a; 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) { @media (prefers-color-scheme: light) {
@@ -302,7 +303,7 @@ th, td {
th, td { th, td {
border-bottom: thin solid hsla(0, 0%, 0%, .12); border-bottom: thin solid hsla(0, 0%, 0%, .12);
} }
.modal-content { .sidebar-content {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
} }