Refactor clipper controls

assets/controllers/clipper_controller.js

@@ -3,7 +3,13 @@ import * as THREE from "three"
 import BIM from '../bim.js';
 
 export default class extends Controller {
-    static targets = ['hex'];
+    static targets = [
+        'hex',
+        'color',
+        'range',
+        'rangeContainer',
+        'size'
+    ];
 
     /**
      * @param {Event} event 
@@ -18,11 +24,15 @@ export default class extends Controller {
      * @param {Event} event 
      */
     size(event) {
-        BIM.clipper.config.size = event.target.value
+        const value = event.target.value;
+        BIM.clipper.config.size = value
+        this.rangeTarget.title = value;
+        this.sizeTarget.textContent = value;
     }
 
     deleteAll() {
         BIM.clipper.deleteAll();
+        this._resetControls();
     }
 
     /**
@@ -32,5 +42,13 @@ export default class extends Controller {
     toggle(event) {
         BIM.clipper.enabled = event.target.value;
     }
+
+    _resetControls() {
+        this.rangeTarget.value = 10;
+        this.rangeTarget.title = 10;
+        this.sizeTarget.textContent = '10';
+        this.colorTarget.value = '#eaeaea';
+        this.hexTarget.querySelector('span').textContent =  '#eaeaea';
+    }
 }
 

assets/styles/app.css

@@ -12,3 +12,16 @@
     max-width: 20vw;
     z-index: 5;
 }
+
+/* Clipper-related styles */
+li button {
+    max-width: 40%;
+}
+
+input[type="color"] {
+    border: none;
+}
+
+input[type="range"] {
+    width: 100%;
+}

templates/home/index.html.twig

@@ -7,7 +7,7 @@
 {% include 'partials/navbar.html.twig' %}
 
 <div class="columns">
-	<div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard:prevent">
+	<div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard">
 		<div id="scene" data-scene-target="scene"></div>
 		<div id="ui" data-theme="light" data-controller="form">
 			<aside class="menu ml-4 mt-3" data-controller="clipper">
@@ -67,24 +67,28 @@
 								Colore piani
 								<div class="mt-2 p-2 input is-small" data-clipper-target="hex">
 									<input type="color" data-action="input->clipper#color change->clipper#color"
-									class="is-small is-clickable mr-2" aria-label="Colore clipper" value="#eaeaea" style="border: none">
+									data-clipper-target="color" class="is-small is-clickable mr-2"
+									aria-label="Colore clipper" value="#eaeaea">
 									<span>#eaeaea</span>
 								</div>
 							</li>
 							<li class="menu-item">
 								Grandezza piani
-								<div class="mt-2 input is-small" data-clipper-target="range">
+								<div class="mt-2 input is-small" data-clipper-target="range-container">
-									<input class="is-clickable is-small" data-action="change->clipper#size"
+									<input class="is-clickable is-small" data-action="change->clipper#size" data-clipper-target="range"
-									type="range" step="0.1" min="5" max="15" style="width: 100%;">
+									type="range" step="0.1" min="5" max="15" title="10">
+									<span class="is-size-6 is-small ml-1" data-clipper-target="size">10</span>
+								</div>
+							</li>
+							<li class="menu-item">
+							 	<div class="buttons">
+									<button class="button has-background-danger has-text-centered has-text-dark"
+									data-action="clipper#deleteAll" title="Elimina tutti i piani">Elimina</button>
 								</div>
 							</li>
-							
 						</ul>
 					</li>
 				</ul>
-					<div class="buttons ml-6">
-						<button class="button is-danger" data-action="clipper#deleteAll" title="Elimina tutti i piani">Elimina</button>
-					</div>
 			</aside>
 		</div>
 	</div>