Move UI logic to Stimulus: toolbar only

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

js/controllers/settings_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+
+export default class extends Controller {
+    static targets = ['ao', 'shadows'];
+
+    connect() {
+        console.log('#settings controller connected');
+        this.aoTarget.checked = AppState.ambientOcclusion;
+        this.shadowsTarget.checked = AppState.shadows;
+    }
+    /**
+     * Toggle Ambient Occlusion
+     * @param {Event} event 
+     */
+    toggleAO(event) {
+        ATON.FX.togglePass(ATON.FX.PASS_AO, event.target.checked);
+        AppState.ambientOcclusion = event.target.checked;
+    }
+    /**
+     * Toggle shadows
+     * @param {Event} event 
+     */
+    toggleShadows(event) {
+        ATON.toggleShadows(event.target.checked);
+        AppState.shadows = event.target.checked;
+    }
+}

js/controllers/tabs_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['active', 'tab', 'content'];
+
+    connect() {
+        console.log('#tabs controller connected');
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    activate(event) {
+        event.preventDefault();
+        this.deactivate();
+        const activeId = event.currentTarget.dataset.id;
+
+        event.currentTarget.parentElement.classList.add('active');
+        this.contentTargets.find(c => c.dataset.id === activeId)
+            .classList.remove('d-hide');
+    }
+
+    reset() {
+        this.deactivate();
+        const activeId = this.activeTarget.dataset.id;
+
+        this.activeTarget.classList.add('active');
+        this.contentTargets.find(c => c.dataset.id === activeId)
+            .classList.remove('d-hide');
+    }
+
+    deactivate() {
+        this.tabTargets.forEach(tab => {
+            tab.classList.remove('active');
+        });
+
+        this.contentTargets.forEach(content => {
+            content.classList.add('d-hide');
+        });
+    }
+}
+

js/controllers/toolbar_controller.js

@@ -0,0 +1,50 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { createLightSlider } from "../utils/environment.js";
+
+const html = String.raw;
+const panelHeader = html`
+    <i class="bi bi-gear-fill me-1"></i> Impostazioni
+`;
+
+export default class extends Controller {
+    static targets = ['settings'];
+
+    connect() {
+        console.log('#toolbar controller connected');
+    }
+    /**
+     * Open settings panel
+     * @param {Event} event 
+     */
+    toggleSettings(event) {
+        ATON.UI.setSidePanelLeft();
+        ATON.UI.showSidePanel({header: panelHeader});
+        this.#buildSettingsPanel(ATON.UI.elSidePanel);
+    }
+    /**
+     * Clone a <template> by id
+     * @param {String} id
+     * @returns {DocumentFragment}
+     */
+    #cloneTemplate(id) {
+        return document.getElementById(id).content.cloneNode(true);
+    }
+    /**
+     * Create the left-side settings panel
+     * content
+     * @param {Element} panel 
+     */
+    #buildSettingsPanel(panel) {
+        const fragment = this.#cloneTemplate('tmpl-settings');
+        let sliderContainer = fragment.querySelector('[data-sliders-container]');
+
+        ['x', 'y', 'z'].forEach((axis, i) => {
+            const label = ['Asse X', 'Asse Y', 'Asse Z'][i];
+            sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1));
+        })
+
+        panel.appendChild(fragment);
+    }
+}

js/ui.js

@@ -62,161 +62,6 @@ function reset() {
     document.querySelector('#clipper-bar')?.classList.add('d-none');
     document.querySelector('#clipper')?.classList.remove('border', 'border-2', 'border-white');
 }
-
-/**
- * 
- * @param {HTMLElement} target 
- * @param {NodeListOf<HTMLButtonElement>} btns 
- * @param {String} axis - One of 'x', 'y', 'z'
- */
-function showClipping(target, btns, axis) {
-    if (axis) {
-        addClippingPlane(axis, -1);
-        target.classList.add('border', 'border-2', 'border-warning');
-        btns.forEach(btn => {
-            if (btn.id !== target.id) {
-                btn.classList.remove('border', 'border-2', 'border-warning');
-            }
-        });
-    }
-}
-/**
- * @todo Get clipping button from state? Review logic!! 
- * @param {String} triggerSelector 
- * @param {String} targetSelector The selector for the target toolbar to be displayed
- */
-function toggleClipperBar(triggerSelector, targetSelector) {
-    const trigger = document.querySelector(triggerSelector);
-    const toolbar = document.querySelector(targetSelector);
-    const btns = toolbar.querySelectorAll('button');
-    const clipTargets = {
-        clipX: {axis: 'x'},
-        clipY: {axis: 'y'},
-        clipZ: {axis: 'z'},
-    };
-
-    if (!AppState.clipping.listeners.button) {
-        trigger.addEventListener(
-            'click',
-            () => {
-                toolbar.classList.toggle('d-none');
-                const aoCurrentState = AppState.ambientOcclusion;
-
-                if (!toolbar.classList.contains('d-none')) {
-                    AppState.clipping.enabled = true;
-                    toggleAmbientOcclusion(false);
-
-                    btns.forEach(btn => {
-                        btn.classList.remove('border', 'border-2', 'border-warning');
-                    });
-
-                    trigger.className += ' border border-2 border-white';
-                    toolbar.addEventListener('click', event => {
-                        showClipping(event.target, btns, clipTargets[event.target.id]?.axis);
-                    });
-                } else {
-                    resetClipping();
-                    let noBorder = trigger.className.replace(/ border.*$/g, '');
-                    trigger.className = noBorder;
-                    toggleAmbientOcclusion(aoCurrentState);
-                }
-            }
-        );
-        AppState.clipping.listeners.button = true;
-    }
-}
-/**
- * A left side settings panel
- * @param {String} triggerId - The settings button id
- */
-function toggleSettingsPanel(triggerId) {
-    const btn = document.querySelector(`#${triggerId}`);
-    const lightHeading = document.createElement('h2');
-    lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
-    lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
-    const envHeading = document.createElement('h2');
-    envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
-    envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
-
-    btn.addEventListener('click', () => {
-        ATON.UI.setSidePanelLeft();
-        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
-        ATON.UI.elSidePanel.appendChild(lightHeading);
-
-        const lightSliderX = createLightSlider('x', 'Asse X', [-2, 2], 0.1);
-        const lightSliderY = createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
-        const lightSliderZ = createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
-
-        ATON.UI.elSidePanel.appendChild(lightSliderX);
-        ATON.UI.elSidePanel.appendChild(lightSliderY);
-        ATON.UI.elSidePanel.appendChild(lightSliderZ);
-
-        ATON.UI.elSidePanel.appendChild(envHeading);
-
-        const ambientOcclSwitch = document.createElement('div');
-        ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
-        ambientOcclSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
-            <label class="form-check-label" for="aoSwitch"><em>Ambient occlusion</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
-        `;
-
-        const shadowsSwitch = document.createElement('div');
-        shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
-        shadowsSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
-            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
-        `;
-
-        shadowsSwitch.querySelector('input[type="checkbox"]').checked = AppState.shadows;
-        ambientOcclSwitch.querySelector('input[type="checkbox"]').checked = AppState.ambientOcclusion;
-
-        ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
-        ATON.UI.elSidePanel.appendChild(shadowsSwitch);
-
-        // TODO: move somewhere else...
-        document.querySelector('#aoSwitch').addEventListener(
-            'change',
-            event => {
-                toggleAmbientOcclusion(event.target.checked);
-                AppState.ambientOcclusion = event.target.checked;
-            }
-        );
-        document.querySelector('#shadowsSwitch').addEventListener(
-            'change',
-            event => {
-                const checked = event.target.checked;
-                ATON.toggleShadows(checked);
-                AppState.shadows = checked;
-            }
-        );
-    });
-}
-/**
- * 
- * @param {String} direction - The axis direction, one of 'x','y','z'
- * @param {String} label - The slider label
- * @param {Number[]} range - The slider's range
- * @param {Number} step - The slider's step
- */
-function createLightSlider(direction, label, range, step) {
-    const currentVal = ATON.getMainLightDirection()[direction];
-    const lightSlider = ATON.UI.createSlider({
-        range,
-        label,
-        value: Number.parseFloat(currentVal).toPrecision(1),
-        oninput: val => {
-            const lightDir = ATON.getMainLightDirection();
-            // Keep existing direction values for the other axes
-            lightDir[direction] = Number.parseFloat(val);
-            changeLightDirection(lightDir);
-        },
-    });
-
-    lightSlider.classList.add('ms-4');
-    lightSlider.querySelector('input').step = step;
-
-    return lightSlider;
-}
 /**
  * Right-side main menu panel
  * @param {String} triggerId - The menu button id
@@ -307,7 +152,5 @@ function buildOntologyMenu(ontology, sidePanel) {
  * @param {String} ontologyJsonPath
  */
 export async function initUI(ontologyJsonPath) {
-    toggleSettingsPanel('settings');
     toggleContentMenu('menu', ontologyJsonPath);
-    toggleClipperBar('#clipper', '#clipper-bar');
 }

js/utils/environment.js

@@ -8,7 +8,7 @@
  * 
  * @param {THREE.Vector3} vector - An object with x,y,z coordinates
  */
-export function changeLightDirection (vector) {
+export function changeLightDirection(vector) {
     ATON.setMainLightDirection(vector);
 }
 
@@ -16,7 +16,33 @@ export function changeLightDirection (vector) {
  * 
  * @param {Boolean} isEnabled 
  */
-export function toggleAmbientOcclusion (isEnabled) {
+export function toggleAmbientOcclusion(isEnabled) {
     ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
     console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
 }
+/**
+ * 
+ * @param {String} direction - The axis direction, one of 'x','y','z'
+ * @param {String} label - The slider label
+ * @param {Number[]} range - The slider's range
+ * @param {Number} step - The slider's step
+ */
+export function createLightSlider(direction, label, range, step) {
+    const currentVal = ATON.getMainLightDirection()[direction];
+    const lightSlider = ATON.UI.createSlider({
+        range,
+        label,
+        value: Number.parseFloat(currentVal).toPrecision(1),
+        oninput: val => {
+            const lightDir = ATON.getMainLightDirection();
+            // Keep existing direction values for the other axes
+            lightDir[direction] = Number.parseFloat(val);
+            changeLightDirection(lightDir);
+        },
+    });
+
+    lightSlider.classList.add('ms-4');
+    lightSlider.querySelector('input').step = step;
+
+    return lightSlider;
+}

js/utils/stimulus.js

@@ -0,0 +1,14 @@
+import { Application } from '@hotwired/stimulus';
+import SettingController from '../controllers/settings_controller.js';
+import ToolbarController from '../controllers/toolbar_controller.js';
+import ClipperController from '../controllers/clipper_controller.js';
+
+/**
+ * Initialize Stimulus controllers
+ */
+export function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register("settings", SettingController);
+    Stimulus.register("toolbar", ToolbarController);
+    Stimulus.register("clipper", ClipperController);
+}