@preference-sl/pref-viewer 2.16.0-beta.10 → 2.16.0-beta.11

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

@@ -10,7 +10,7 @@ import { DEFAULT_LOCALE, resolveLocale, translate } from "./localization/i18n.js
  *  - A hue slider for the highlight color.
  *  - A time-of-day slider with play/pause continuous lighting-cycle animation.
  *
- * Every interaction emits `pref-viewer-menu-3d-apply` immediately; there is no Apply button or
+ * Every interaction emits `pref-viewer-3d-render-settings-change-requested` immediately; there is no Apply button or
  * draft/pending state. Switch changes emit the full settings snapshot, while highlight color and
  * lighting changes emit partial payloads to avoid unnecessary scene reloads.
  *
@@ -19,13 +19,13 @@ import { DEFAULT_LOCALE, resolveLocale, translate } from "./localization/i18n.js
  *  - `setApplying(isApplying)`: locks interactions while an async apply operation is running.
  *  - `setViewerHover(isHovering)`: drives panel visibility from the 3D viewport hover state.
  *  - `setEnabled(isEnabled)`: hides the menu when 3D mode is unavailable.
- *  - `setSwitchEnabled(settingKey, isEnabled)`: enables/disables a specific toggle at runtime.
+ *  - `setElementEnabled(settingKey, isEnabled)`: enables/disables a specific switch or slider at runtime.
+ *  - `setElementVisible(settingKey, isVisible)`: shows/hides a specific switch or slider at runtime.
  *  - `setCulture(cultureId)`: switches the display locale.
  *
- * Observed attributes: `culture`, `show-illumination`, `illumination-color`, `lighting-time-of-day`.
- * The illumination attributes are mirrored for compatibility with hosts that still set them declaratively.
+ * Observed attributes: `culture`. Runtime render values are synchronized through `setSettings()`.
  *
- * Events emitted: `pref-viewer-menu-3d-apply` - `{ detail: { settings: object } }`.
+ * Events emitted: `pref-viewer-3d-render-settings-change-requested` - `{ detail: { settings: object } }`.
  */
 export default class PrefViewerMenu3D extends HTMLElement {
     #elements = {
@@ -41,6 +41,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         lightingSlider: null,
         lightingValue: null,
         panel: null,
+        sliders: {},
+        sliderWrappers: {},
         subtitle: null,
         switches: {},
         switchCopyNodes: {},
@@ -65,7 +67,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         typeof this.#DEFAULT_RENDER_SETTINGS[key] === "boolean"
     );
     #settings = { ...this.#DEFAULT_RENDER_SETTINGS };
-    #switchAvailability = {};
+    #elementAvailability = {};
+    #elementVisibility = {};
     #isApplying = false;
     #isEnabled = true;
     #isLightingPlaying = false;
@@ -92,35 +95,22 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @returns {string[]} Array of attribute names to observe.
      */
     static get observedAttributes() {
-        return ["culture", "show-illumination", "illumination-color", "lighting-time-of-day"];
+        return ["culture"];
     }
     
     /**
      * Reacts to observed attribute mutations and mirrors them into the internal settings/UI state.
      * @public
-     * @param {"culture"|"show-illumination"|"illumination-color"|"lighting-time-of-day"} name - Attribute name that changed.
+     * @param {"culture"} name - Attribute name that changed.
      * @param {string|null} _old - Previous attribute value (unused).
      * @param {string|null} value - New attribute value.
      * @returns {void}
      */
     attributeChangedCallback(name, _old, value) {
-        if (name === "culture") {
-            this.#setCultureInternal(value || DEFAULT_LOCALE);
-        } else if (name === "show-illumination") {
-            this.#settings.illuminationEnabled = value === "true" || value === true;
-            const switchEl = this.#elements.switches?.illuminationEnabled;
-            if (switchEl) {
-                switchEl.checked = this.#settings.illuminationEnabled;
-            }
-        } else if (name === "illumination-color") {
-            this.#settings.illuminationColor = value;
-            this.#updateColorPickerPreview(value);
-        } else if (name === "lighting-time-of-day") {
-            const parsed = Number(value);
-            if (Number.isFinite(parsed)) {
-                this.#settings.lightingTimeOfDay = this.#clampLightingTime(parsed);
-                this.#updateLightingSliderUI(this.#settings.lightingTimeOfDay);
-            }
+        switch (name) {
+            case "culture":
+                this.#setCultureInternal(value || DEFAULT_LOCALE);
+                break;
         }
     }
 
@@ -171,19 +161,19 @@ export default class PrefViewerMenu3D extends HTMLElement {
                 <div class="menu-switches">
                     ${this.#MENU_SWITCHES.map((key) => this.#renderSwitchRow(key, this.#texts.features)).join("")}
                 </div>
-                <div class="menu-color-picker" data-setting="highlightColor">
+                <div class="menu-color-picker menu-slider" data-setting="highlightColor">
                     <div class="color-slider-row">
                         <span class="color-picker-label">${this.#texts.features?.highlightColor?.label || "Highlight Color"}</span>
                         <span class="color-preview" style="background-color: ${this.#settings.highlightColor || '#ff6700'}"></span>
                     </div>
-                    <input type="range" class="color-slider" min="0" max="359" value="${PrefViewerMenu3D.#hexToHue(this.#settings.highlightColor || '#ff6700')}">
+                    <input type="range" data-setting="highlightColor" class="color-slider" min="0" max="359" value="${PrefViewerMenu3D.#hexToHue(this.#settings.highlightColor || '#ff6700')}">
                 </div>
-                <div class="menu-lighting-slider" data-setting="lightingTimeOfDay">
+                <div class="menu-lighting-slider menu-slider" data-setting="lightingTimeOfDay">
                     <div class="lighting-slider-row">
-                        <span class="lighting-slider-label">${this.#texts.features?.lightingTimeOfDay?.label || "Time of day"}</span>
+                        <span class="lighting-slider-label menu-slider-label">${this.#texts.features?.lightingTimeOfDay?.label || "Time of day"}</span>
                         <span class="lighting-slider-value">${PrefViewerMenu3D.#formatLightingTime(this.#settings.lightingTimeOfDay ?? 0.5)}</span>
                     </div>
-                    <input type="range" class="lighting-slider" min="0" max="1000" step="1" value="${Math.round((this.#settings.lightingTimeOfDay ?? 0.5) * 1000)}">
+                    <input type="range" data-setting="lightingTimeOfDay" class="lighting-slider" min="0" max="1000" step="1" value="${Math.round((this.#settings.lightingTimeOfDay ?? 0.5) * 1000)}">
                     <div class="lighting-slider-markers" aria-hidden="true">
                         <span class="lighting-slider-start">${this.#texts.features?.lightingTimeOfDay?.startLabel || "Night"}</span>
                         <span class="lighting-slider-mid">${this.#texts.features?.lightingTimeOfDay?.midLabel || "Day"}</span>
@@ -325,7 +315,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#elements.panel = this.querySelector(".menu-panel");
         this.#elements.title = this.querySelector(".menu-title");
         this.#elements.subtitle = this.querySelector(".menu-subtitle");
-        // Cache color picker elements
+
+        // Cache slider elements
         this.#elements.colorPicker = this.querySelector(".menu-color-picker");
         this.#elements.colorSlider = this.querySelector(".color-slider");
         this.#elements.colorPickerPreview = this.querySelector(".color-preview");
@@ -337,6 +328,11 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#elements.lightingSliderEnd = this.querySelector(".lighting-slider-end");
         this.#elements.lightingSlider = this.querySelector(".lighting-slider");
         this.#elements.lightingValue = this.querySelector(".lighting-slider-value");
+
+        this.#elements.sliders["highlightColor"] = this.querySelector("input[data-setting='highlightColor']");
+        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}"]`);
@@ -668,12 +664,13 @@ export default class PrefViewerMenu3D extends HTMLElement {
             return;
         }
         const detail = { settings: options.partial ? { ...extraSettings } : { ...this.#settings, ...extraSettings } };
-        this.dispatchEvent(new CustomEvent("pref-viewer-menu-3d-apply", {
+        const eventOptions = {
             bubbles: true,
             cancelable: true,
             composed: true,
             detail,
-        }));
+        };
+        this.dispatchEvent(new CustomEvent("pref-viewer-3d-render-settings-change-requested", eventOptions));
     }
 
     /**
@@ -684,10 +681,29 @@ export default class PrefViewerMenu3D extends HTMLElement {
     #updateSwitches() {
         Object.entries(this.#elements.switches).forEach(([key, input]) => {
             if (input) {
-                const isEnabled = this.#switchAvailability[key] !== false;
+                const isEnabled = this.#elementAvailability[key] !== false;
+                const isVisible = this.#elementVisibility[key] !== false;
                 input.checked = Boolean(this.#settings[key]);
                 input.disabled = !isEnabled;
                 this.#elements.switchWrappers[key]?.toggleAttribute("data-disabled", !isEnabled);
+                this.#elements.switchWrappers[key]?.toggleAttribute("data-hidden", !isVisible);
+            }
+        });
+    }
+
+    /**
+     * Synchronizes slider states with the current settings snapshot.
+     * @private
+     * @returns {void}
+     */
+    #updateSliders() {
+        Object.entries(this.#elements.sliders).forEach(([key, input]) => {
+            if (input) {
+                const isEnabled = this.#elementAvailability[key] !== false;
+                const isVisible = this.#elementVisibility[key] !== false;
+                input.disabled = !isEnabled;
+                this.#elements.sliderWrappers[key]?.toggleAttribute("data-disabled", !isEnabled);
+                this.#elements.sliderWrappers[key]?.toggleAttribute("data-hidden", !isVisible);
             }
         });
     }
@@ -754,6 +770,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
         if (this.#settings.lightingTimeOfDay !== undefined) {
             this.#updateLightingSliderUI(this.#settings.lightingTimeOfDay);
         }
+        this.#updateSliders();
         this.#updateLightingPlayButtonUI();
         this.setApplying(false);
     }
@@ -777,17 +794,44 @@ export default class PrefViewerMenu3D extends HTMLElement {
     }
 
     /**
-     * Enables or disables a specific render-setting switch in the menu.
+     * Enables or disables a specific render-setting switch or slider in the menu.
      * @public
-     * @param {string} settingKey - Switch key (e.g. "iblEnabled").
+     * @param {string} settingKey - Setting key (e.g. "iblEnabled", "highlightColor", or "lightingTimeOfDay").
      * @param {boolean} [isEnabled=true] - True to allow interaction, false to disable it.
      * @returns {void}
      */
-    setSwitchEnabled(settingKey, isEnabled = true) {
-        if (!settingKey || !this.#MENU_SWITCHES.includes(settingKey)) {
+    setElementEnabled(settingKey, isEnabled = true) {
+        if (!settingKey) {
             return;
         }
-        this.#switchAvailability[settingKey] = Boolean(isEnabled);
-        this.#updateSwitches();
+
+        if (this.#MENU_SWITCHES.includes(settingKey)) {
+            this.#elementAvailability[settingKey] = Boolean(isEnabled);
+            this.#updateSwitches();
+        } else if (this.#elements.sliders[settingKey]) {
+            this.#elementAvailability[settingKey] = Boolean(isEnabled);
+            this.#updateSliders();
+        }
+    }
+
+    /**
+     * Shows or hides a specific render-setting switch or slider in the menu.
+     * @public
+     * @param {string} settingKey - Setting key (e.g. "iblEnabled", "highlightColor", or "lightingTimeOfDay").
+     * @param {boolean} [isVisible=true] - True to show the switch, false to hide it.
+     * @returns {void}
+     */
+    setElementVisible(settingKey, isVisible = true) {
+        if (!settingKey) {
+            return;
+        }
+
+        if (this.#MENU_SWITCHES.includes(settingKey)) {
+            this.#elementVisibility[settingKey] = Boolean(isVisible);
+            this.#updateSwitches();
+        } else if (this.#elements.sliders[settingKey]) {
+            this.#elementVisibility[settingKey] = Boolean(isVisible);
+            this.#updateSliders();
+        }
     }
 }

package/src/pref-viewer-task.js

@@ -2,7 +2,7 @@
  * PrefViewerTask - Represents a single task or operation to be processed by the PrefViewer.
  *
  * Responsibilities:
- *  - Encapsulates the payload and type of a viewer task (e.g., loading a model, updating materials).
+ *  - Encapsulates the payload and type of a viewer task (e.g., loading a model, updating materials, applying styles).
  *  - Validates the task type against a predefined set of allowed types.
  *  - Provides an immutable instance to ensure task integrity.
  *
@@ -12,13 +12,17 @@
  *  - Access the payload via the `value` property and the normalized type via the `type` property.
  *
  * Static Properties:
- *  - Types: An object containing all allowed task types as string constants.
+ *  - Types: An object containing all allowed task types as string constants, including `Styles` for queued runtime style overrides.
  *
  * Constructor:
  *  - Validates the type (case-insensitive) and throws a TypeError if invalid.
  *  - Freezes the instance to prevent further modification.
  */
 export default class PrefViewerTask {
+    /**
+     * Allowed task type constants used by the PrefViewer queue.
+     * @type {Readonly<{Config: string, Culture: string, Drawing: string, Environment: string, Materials: string, Model: string, Options: string, Styles: string, Visibility: string}>}
+     */
     static Types = Object.freeze({
         Config: "config",
         Culture: "culture",
@@ -27,6 +31,7 @@ export default class PrefViewerTask {
         Materials: "materials",
         Model: "model",
         Options: "options",
+        Styles: "styles",
         Visibility: "visibility",
     });