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

100
index.html
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>