From 0dda5f0344d49329227ca00d577afe07ab2a1b92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P=2E?= <nicolo.paraciani@cnr.it>
Date: Fri, 24 Oct 2025 08:38:54 +0200
Subject: [PATCH] Some UI changes for clipping

---
 index.html  |  2 +-
 js/scene.js | 24 +++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5f23868..3638871 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
             <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
                 <i class="bi bi-gear-fill"></i>
             </a>
-            <a class="btn aton-btn fs-5" id="clipper" title="Clipper">
+            <a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
                 <i class="bi bi-scissors"></i>
             </a>
             <div class="d-none
diff --git a/js/scene.js b/js/scene.js
index a3ff3a9..f922c1f 100644
--- a/js/scene.js
+++ b/js/scene.js
@@ -30,21 +30,43 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
             const aoCurrentState = AppState.ambientOcclusion;
             if (!AppState.clipping.enabled) {
                 AppState.clipping.enabled = true;
-                trigger.className += ' border border-2 border-white';
                 Scene.toggleAmbientOcclusion(false);
+
+                const btns = toolbar.querySelectorAll('button');
+
+                trigger.className += ' border border-2 border-white';
                 toolbar.addEventListener('click', event => {
                     console.log('Clipping target:', event.target);
                     if (event.target.id === 'clipX') {
                             // Clip along X...
                             Scene.addClippingPlane('x', -1);
+                            // Export to function...
+                            event.target.classList.add('border', 'border-2', 'border-warning');
+                            btns.forEach(btn => {
+                                if (btn.id !== event.target.id) {
+                                    btn.classList.remove('border', 'border-2', 'border-warning');
+                                }
+                            });
                     }
                     else if (event.target.id === 'clipY') {
                             // Clip along Y...
                             Scene.addClippingPlane('y', -1);
+                            event.target.classList.add('border', 'border-2', 'border-warning');
+                            btns.forEach(btn => {
+                                if (btn.id !== event.target.id) {
+                                    btn.classList.remove('border', 'border-2', 'border-warning');
+                                }
+                            })
                     }
                     else if (event.target.id === 'clipZ') {
                             // Clip along Z...
                             Scene.addClippingPlane('z', 1);
+                            event.target.classList.add('border', 'border-2', 'border-warning');
+                            btns.forEach(btn => {
+                                if (btn.id !== event.target.id) {
+                                    btn.classList.remove('border', 'border-2', 'border-warning');
+                                }
+                            })
                     }
                 });
             } else {