@preference-sl/pref-viewer 2.16.2 → 2.17.0-beta.1

package/src/pref-viewer-menu-3d.js

@@ -1,6 +1,6 @@
 import { PrefViewerMenu3DStyles } from "./styles.js";
 import BabylonJSController from "./babylonjs-controller.js";
-import { DEFAULT_LOCALE, resolveLocale, translate } from "./localization/i18n.js";
+import I18n from "./localization/i18n.js";
 
 /**
  * PrefViewerMenu3D - Localized floating control panel for Babylon.js render settings.
@@ -55,15 +55,16 @@ export default class PrefViewerMenu3D extends HTMLElement {
         onColorSliderInput: null,
         onLightingSliderInput: null,
         onLightingPlayClick: null,
+        onLightingTick: null,
         onHostLeave: null,
         onPanelEnter: null,
         onSwitchChange: null,
         onToggleEnter: null,
     };
 
-    #DEFAULT_RENDER_SETTINGS = { ...BabylonJSController.DEFAULT_RENDER_SETTINGS };
+    #DEFAULT_RENDER_SETTINGS = { ...BabylonJSController.config.render.defaultSettings };
     // Only include boolean settings as switches; scalar settings are handled by sliders.
-    #MENU_SWITCHES = Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter(key => 
+    #MENU_SWITCHES = Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter(key =>
         typeof this.#DEFAULT_RENDER_SETTINGS[key] === "boolean"
     );
     #settings = { ...this.#DEFAULT_RENDER_SETTINGS };
@@ -77,9 +78,9 @@ export default class PrefViewerMenu3D extends HTMLElement {
     #lightingPlaybackBase = 0.5;
     #lightingPlaybackDurationMs = 15000;
 
-    #culture = DEFAULT_LOCALE;
+    #culture = I18n.DEFAULT_LOCALE;
     #texts = {};
-    
+
     /**
      * Creates the menu custom element.
      * Rendering is deferred until connectedCallback() so attributes can be set before the UI is built.
@@ -87,8 +88,9 @@ export default class PrefViewerMenu3D extends HTMLElement {
      */
     constructor() {
         super();
+        this.#handles.onLightingTick = this.#tickLightingPlayback.bind(this);
     }
-    
+
     /**
      * Returns the list of attributes to observe for changes.
      * @public
@@ -97,7 +99,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
     static get observedAttributes() {
         return ["culture"];
     }
-    
+
     /**
      * Reacts to observed attribute mutations and mirrors them into the internal settings/UI state.
      * @public
@@ -109,7 +111,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
     attributeChangedCallback(name, _old, value) {
         switch (name) {
             case "culture":
-                this.#setCultureInternal(value || DEFAULT_LOCALE);
+                this.#setCultureInternal(value || I18n.DEFAULT_LOCALE);
                 break;
         }
     }
@@ -194,7 +196,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
     /**
      * Generates the HTML fragment for a single boolean render-setting switch.
      * @private
-     * @param {string} key - Render setting key from BabylonJSController.DEFAULT_RENDER_SETTINGS.
+     * @param {string} key - Render setting key from BabylonJSController.config.render.defaultSettings.
      * @param {Record<string, {label?: string, helper?: string}>} copy - Locale-aware feature copy used for labels.
      * @returns {string} HTML string representing the switch row.
      */
@@ -222,7 +224,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @returns {object} Resolved `prefViewer.menu3d` translation object or an empty fallback.
      */
     #getMenuNamespace() {
-        const namespace = translate("prefViewer.menu3d", { locale: this.#culture });
+        const namespace = I18n.translate("prefViewer.menu3d", { locale: this.#culture });
         return namespace && typeof namespace === "object" ? namespace : {};
     }
 
@@ -291,11 +293,11 @@ export default class PrefViewerMenu3D extends HTMLElement {
     /**
      * Resolves and applies a locale internally, updating texts when it changes.
      * @private
-     * @param {string} [cultureId=DEFAULT_LOCALE] - Desired locale identifier.
+     * @param {string} [cultureId=I18n.DEFAULT_LOCALE] - Desired locale identifier.
      * @returns {string} The applied locale.
      */
-    #setCultureInternal(cultureId = DEFAULT_LOCALE) {
-        const resolved = resolveLocale(cultureId);
+    #setCultureInternal(cultureId = I18n.DEFAULT_LOCALE) {
+        const resolved = I18n.resolveLocale(cultureId);
         if (resolved === this.#culture) {
             return this.#culture;
         }
@@ -333,7 +335,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#elements.sliderWrappers["highlightColor"] = this.querySelector(".menu-slider[data-setting='highlightColor']");
         this.#elements.sliders["lightingTimeOfDay"] = this.querySelector("input[data-setting='lightingTimeOfDay']");
         this.#elements.sliderWrappers["lightingTimeOfDay"] = this.querySelector(".menu-slider[data-setting='lightingTimeOfDay']");
-        
+
         this.#MENU_SWITCHES.forEach((key) => {
             this.#elements.switches[key] = this.querySelector(`input[data-setting="${key}"]`);
             const wrapper = this.querySelector(`.menu-switch[data-setting="${key}"]`);
@@ -499,19 +501,26 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#lightingPlaybackBase = this.#settings.lightingTimeOfDay ?? 0.5;
         this.#lightingPlaybackStart = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
         this.#updateLightingPlayButtonUI();
-        const tick = () => {
-            if (!this.#isLightingPlaying) {
-                return;
-            }
-            const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
-            const elapsed = now - this.#lightingPlaybackStart;
-            const cycle = (this.#lightingPlaybackBase + (elapsed / this.#lightingPlaybackDurationMs)) % 1;
-            this.#settings.lightingTimeOfDay = cycle;
-            this.#updateLightingSliderUI(cycle);
-            this.#emitApply({ lightingTimeOfDay: cycle, persist: false }, { partial: true });
-            this.#lightingAnimationFrame = requestAnimationFrame(tick);
-        };
-        this.#lightingAnimationFrame = requestAnimationFrame(tick);
+
+        this.#lightingAnimationFrame = requestAnimationFrame(this.#handles.onLightingTick);
+    }
+
+    /**
+     * Advances the time-of-day playback cycle and emits transient settings while playback remains active.
+     * @private
+     * @returns {void}
+     */
+    #tickLightingPlayback() {
+        if (!this.#isLightingPlaying) {
+            return;
+        }
+        const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        const elapsed = now - this.#lightingPlaybackStart;
+        const cycle = (this.#lightingPlaybackBase + (elapsed / this.#lightingPlaybackDurationMs)) % 1;
+        this.#settings.lightingTimeOfDay = cycle;
+        this.#updateLightingSliderUI(cycle);
+        this.#emitApply({ lightingTimeOfDay: cycle, persist: false }, { partial: true });
+        this.#lightingAnimationFrame = requestAnimationFrame(this.#handles.onLightingTick);
     }
 
     /**
@@ -555,11 +564,22 @@ export default class PrefViewerMenu3D extends HTMLElement {
     static #hueToHex(hue) {
         const h = ((hue % 360) + 360) % 360;
         const a = Math.min(0.5, 1 - 0.5);
-        const f = (n) => {
-            const k = (n + h / 30) % 12;
-            return 0.5 - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-        };
-        return '#' + [f(0), f(8), f(4)].map((v) => Math.round(v * 255).toString(16).padStart(2, '0')).join('');
+
+        return '#' + [0, 8, 4].map((phase) => PrefViewerMenu3D.#hueChannel(phase, h, a)).map((v) => Math.round(v * 255).toString(16).padStart(2, '0')).join('');
+    }
+
+    /**
+     * Computes a normalized RGB channel from the current hue.
+     * @private
+     * @static
+     * @param {number} phase - Channel phase offset.
+     * @param {number} hue - Normalized hue angle in degrees.
+     * @param {number} amplitude - RGB channel amplitude.
+     * @returns {number}
+     */
+    static #hueChannel(phase, hue, amplitude) {
+        const k = (phase + hue / 30) % 12;
+        return 0.5 - amplitude * Math.max(Math.min(k - 3, 9 - k, 1), -1);
     }
 
     /**
@@ -724,21 +744,21 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#isApplying = isApplying;
         this.toggleAttribute("data-applying", isApplying);
     }
-    
+
     /**
      * Sets the locale used for menu labels and helper text.
      * @public
      * @param {string} cultureId - Locale identifier, e.g., "en-EN".
      * @returns {void}
      */
-    setCulture(cultureId = DEFAULT_LOCALE) {
-        const resolved = resolveLocale(cultureId);
+    setCulture(cultureId = I18n.DEFAULT_LOCALE) {
+        const resolved = I18n.resolveLocale(cultureId);
         const applied = this.#setCultureInternal(resolved);
         if (this.getAttribute("culture") !== applied) {
             this.setAttribute("culture", applied);
         }
     }
-    
+
     /**
      * Enables or disables the menu entirely, hiding it when 3D mode is unavailable.
      * @public
@@ -774,7 +794,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#updateLightingPlayButtonUI();
         this.setApplying(false);
     }
-    
+
     /**
      * Receives viewer hover state so the menu only opens when the user interacts with the 3D viewport.
      * @public