Move UI logic to Stimulus: toolbar only

2026-04-21 15:30:35 +02:00
parent d37e72390d
commit 26bea5daae
9 changed files with 288 additions and 166 deletions
--- a/js/controllers/clipper_controller.js
+++ b/js/controllers/clipper_controller.js
@@ -0,0 +1,74 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { addClippingPlane, resetClipping } from "../utils/clipping.js";
+import { toggleAmbientOcclusion } from "../utils/environment.js";
+
+/**
+ * Handle events for the clipper toolbar,
+ * related to the clipping module
+ */
+export default class extends Controller {
+    static targets = ['trigger', 'clipper', 'axis'];
+    static values = { enabled: Boolean };
+
+    connect() {
+        console.log('#clipper controller connected');
+    }
+
+    clip(event) {
+        /**
+         * @type {string}
+         */
+        const label = event.params.axis;
+        /**
+         * @type {HTMLButtonElement}
+         */
+        const target = event.target;
+        /**
+         * @type {NodeListOf<HTMLButtonElement>}
+         */
+        const axes = this.axisTargets;
+        const classes = ['border', 'border-2', 'border-warning'];
+
+        addClippingPlane(label, -1);
+        target.classList.add(...classes);
+
+        for (const btn of axes) {
+            if (btn.id !== target.id) {
+                btn.classList.remove(...classes);
+            }
+        }
+    }
+    /**
+     * Toggle clipper toolbar
+     */
+    toggleClipper() {
+        /**
+         * @type {HTMLElement}
+         */
+        const trigger = this.triggerTarget;
+        this.clipperTarget.classList.toggle('d-none');
+        // If the toolbar is shown, clipping is enabled and vice versa
+        this.enabledValue = !this.clipperTarget.classList.contains('d-none');
+
+        this.axisTargets.forEach(btn => {
+            btn.classList.remove('border', 'border-2', 'border-warning');
+        });
+
+        // AO should be turned off if clipping is enabled
+        toggleAmbientOcclusion(!this.enabledValue);
+
+        if (this.enabledValue) {
+            trigger.className += ' border border-2 border-white';
+        }
+
+        if (!this.enabledValue) {
+            resetClipping();
+            trigger.className = trigger.className.replace(/ border.*$/g, '');
+        }
+
+        AppState.clipping.enabled = this.enabledValue;
+    }
+}
+