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

Keep controls table while editing
continuous-integration/drone/push Build is passing Details

Browse Source
main
Clément FRÉVILLE 2 months ago
parent 76decaf203
commit 5f780c751a
7 changed files with 89 additions and 117 deletions
Show Stats Download Patch File Download Diff File

2
.drone.yml
Unescape View File

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

100
index.html
Unescape View File

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

8
package.json
Unescape View File

@ -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",

12
src/fsm.js
Unescape View File

@ -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[]}

1
src/main.js
Unescape View File

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

34
src/modal.ts
Unescape 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save