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%;
+}