Move UI logic to Stimulus: toolbar only

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