Browse Source

Use select instead of checkbox for modes

better-rectangles
Tissevert 11 months ago
parent
commit
f9adb7d816
  1. 5
      index.html
  2. 4
      js/GUI.js
  3. 2
      js/Scoria.js
  4. 10
      js/Toolbar/EditMode.js

5
index.html

@ -25,7 +25,10 @@
<label for="wcThreshold">Seuil de qualité</label><input id="wcThreshold" name="wcThreshold" type="number" min="0" max="1" step="0.01" value="0.25"/>
</span>
<span>
<input id="editMode" type="checkbox" name="editMode"/><label for="editMode">Éditer</label>
<select id="mode">
<option value="display" selected>Affichage seulement</option>
<option value="edit">Édition des scories</option>
</select>
</span>
</div>
<div id="workzone">

4
js/GUI.js

@ -21,11 +21,11 @@ var saveScoria = document.getElementById('saveScoria');
var fileNumber = document.getElementById('fileNumber');
var fileName = document.getElementById('fileName');
var wcThreshold = document.getElementById('wcThreshold');
var editMode = document.getElementById('editMode');
var mode = document.getElementById('mode');
var saveScoria = document.getElementById('saveScoria');
return {
editMode: editMode,
mode: mode,
fileMenu: fileMenu,
fileName: fileName,
fileNumber: fileNumber,

2
js/Scoria.js

@ -30,7 +30,7 @@ function setScoria(wordId, state) {
}
function toggleWord(domElem, forceState) {
if(editMode.checked) {
if(mode.value == 'edit') {
var state = forceState != undefined ? forceState : !scoriae[domElem.id];
setScoria(domElem.id, state);
domElem.classList.toggle('deleted', state);

10
js/Toolbar/EditMode.js

@ -1,4 +1,4 @@
import {editMode, page, selector, workzone} from GUI;
import {mode, page, selector, workzone} from GUI;
import * as Rectangle from Geometry.Rectangle;
import toggleWord from Scoria;
@ -7,7 +7,7 @@ var selection = {
y: {from: null, to: null}
};
editMode.addEventListener('change', sync);
mode.addEventListener('change', sync);
workzone.addEventListener('mousedown', startRectangle);
workzone.addEventListener('mousemove', moveRectangle);
workzone.addEventListener('mouseup', endRectangle);
@ -17,11 +17,11 @@ return {
};
function sync() {
page.classList[editMode.checked ? "add" : "remove"]("editMode");
page.classList[mode.value == 'edit' ? "add" : "remove"]("editMode");
}
function startRectangle(e) {
if(editMode.checked) {
if(mode.value == 'edit') {
selection.x.from = e.clientX;
selection.y.from = e.clientY;
selector.className = 'on';
@ -42,7 +42,7 @@ function moveRectangle(e) {
}
function endRectangle(e) {
if(editMode.checked) {
if(mode.value == 'edit') {
selection.x.from = selection.y.from = selection.x.to = selection.y.to = null;
selector.style.left = selector.style.top = selector.style.width =
selector.style.height = null;

Loading…
Cancel
Save