@preference-sl/pref-viewer 2.12.0 → 2.13.0-beta.1

package/src/index.js

@@ -3,11 +3,13 @@ import PrefViewer from "./pref-viewer.js";
 import PrefViewer2D from "./pref-viewer-2d.js";
 import PrefViewer3D from "./pref-viewer-3d.js";
 import PrefViewerDialog from "./pref-viewer-dialog.js";
+import PrefViewerMenu3D from "./pref-viewer-menu-3d.js";
 
 // Defines custom elements for use as HTML tags in the application.
 customElements.define("pref-viewer-2d", PrefViewer2D);
 customElements.define("pref-viewer-3d", PrefViewer3D);
 customElements.define("pref-viewer-dialog", PrefViewerDialog);
+customElements.define("pref-viewer-menu-3d", PrefViewerMenu3D);
 customElements.define("pref-viewer", PrefViewer);
 
 // Exposes selected PrefViewer classes globally for external JavaScript use.

package/src/localization/i18n.js

@@ -0,0 +1,94 @@
+import translations from "./translations.js";
+
+export const DEFAULT_LOCALE = "en-EN";
+
+export const SUPPORTED_LOCALES = Object.keys(translations);
+const listeners = new Set();
+let currentLocale = DEFAULT_LOCALE;
+
+const findLocaleKey = (localeId) => {
+    if (typeof localeId !== "string") {
+        return DEFAULT_LOCALE;
+    }
+    const normalized = localeId.trim().toLowerCase();
+    const match = SUPPORTED_LOCALES.find((locale) => locale.toLowerCase() === normalized);
+    return match ?? DEFAULT_LOCALE;
+};
+
+const getBundle = (localeId = currentLocale) => {
+    const key = findLocaleKey(localeId);
+    return translations[key] ?? translations[DEFAULT_LOCALE];
+};
+
+const resolveValue = (bundle, parts) => parts.reduce((acc, part) => (
+    acc && Object.prototype.hasOwnProperty.call(acc, part) ? acc[part] : undefined
+), bundle);
+
+export const availableLocales = () => [...SUPPORTED_LOCALES];
+
+export const getLocale = () => currentLocale;
+
+export const resolveLocale = (localeId) => findLocaleKey(localeId);
+
+export const setLocale = (localeId) => {
+    const resolved = findLocaleKey(localeId);
+    if (resolved === currentLocale) {
+        return currentLocale;
+    }
+    currentLocale = resolved;
+    listeners.forEach((listener) => {
+        try {
+            listener(currentLocale);
+        } catch (error) {
+            console.warn("PrefViewer i18n listener failed", error);
+        }
+    });
+    return currentLocale;
+};
+
+export const onLocaleChange = (listener) => {
+    if (typeof listener !== "function") {
+        return () => {};
+    }
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+};
+
+export const translate = (key, options = {}) => {
+    if (!key) {
+        return "";
+    }
+    const { locale, fallback } = options;
+    const parts = Array.isArray(key) ? key : key.split(".");
+    const bundle = getBundle(locale);
+    let value = resolveValue(bundle, parts);
+    if (value !== undefined) {
+        return value;
+    }
+    if (bundle !== translations[DEFAULT_LOCALE]) {
+        value = resolveValue(translations[DEFAULT_LOCALE], parts);
+        if (value !== undefined) {
+            return value;
+        }
+    }
+    return fallback ?? "";
+};
+
+export const getNamespace = (namespace, options = {}) => {
+    if (!namespace) {
+        return getBundle(options.locale);
+    }
+    return translate(namespace, options);
+};
+
+export default {
+    availableLocales,
+    DEFAULT_LOCALE,
+    getLocale,
+    getNamespace,
+    onLocaleChange,
+    resolveLocale,
+    setLocale,
+    SUPPORTED_LOCALES,
+    translate,
+};

package/src/localization/translations.js

@@ -0,0 +1,104 @@
+export const translations = {
+    "en-EN": {
+        prefViewer: {
+            menu3d: {
+                title: "3D render settings",
+                subtitle: "Toggle visual effects on or off.",
+                pendingLabel: "Pending changes",
+                actions: {
+                    apply: "Apply",
+                    applying: "Applying...",
+                },
+                status: {
+                    error: "Couldn't apply the changes.",
+                },
+                switches: {
+                    antiAliasingEnabled: {
+                        label: "Antialiasing",
+                        helper: "Softens jagged edges and lines.",
+                    },
+                    ambientOcclusionEnabled: {
+                        label: "Ambient Occlusion",
+                        helper: "Reduction of ambient light in corners and areas close to surfaces.",
+                    },
+                    iblEnabled: {
+                        label: "IBL",
+                        helper: "Uses the HDR environment to light the scene.",
+                    },
+                    shadowsEnabled: {
+                        label: "Shadows",
+                        helper: "Enables shadows.",
+                    },
+                },
+            },
+            downloadDialog: {
+                title: "Download 3D Scene",
+                sections: {
+                    content: "Content",
+                    format: "Format",
+                },
+                options: {
+                    model: "Model",
+                    scene: "Scene",
+                    both: "Both",
+                },
+                buttons: {
+                    download: "Download",
+                    cancel: "Cancel",
+                },
+            },
+        },
+    },
+    "es-ES": {
+        prefViewer: {
+            menu3d: {
+                title: "Ajustes de render 3D",
+                subtitle: "Activa o desactiva los efectos visuales.",
+                pendingLabel: "Pendiente de aplicar",
+                actions: {
+                    apply: "Aplicar",
+                    applying: "Aplicando...",
+                },
+                status: {
+                    error: "No se pudo aplicar los cambios.",
+                },
+                switches: {
+                    antiAliasingEnabled: {
+                        label: "Antialiasing",
+                        helper: "Suaviza aristas y líneas.",
+                    },
+                    ambientOcclusionEnabled: {
+                        label: "Ambient Occlusion",
+                        helper: "Atenuación de la luz ambiental en rincones y zonas cercanas entre superficies.",
+                    },
+                    iblEnabled: {
+                        label: "IBL",
+                        helper: "Usa la imagen HDR de entorno para iluminar la escena.",
+                    },
+                    shadowsEnabled: {
+                        label: "Sombras",
+                        helper: "Activa sombras.",
+                    },
+                },
+            },
+            downloadDialog: {
+                title: "Descargar escena 3D",
+                sections: {
+                    content: "Contenido",
+                    format: "Formato",
+                },
+                options: {
+                    model: "Modelo",
+                    scene: "Escena",
+                    both: "Ambos",
+                },
+                buttons: {
+                    download: "Descargar",
+                    cancel: "Cancelar",
+                },
+            },
+        },
+    },
+};
+
+export default translations;

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

@@ -18,6 +18,7 @@ export class ContainerData {
         this.show = true;
         this.size = 0;
         this.timeStamp = null;
+        this.storage = null;
         this.visible = false;
         // Set initial information about ongoing update
         this.reset();
@@ -40,6 +41,9 @@ export class ContainerData {
             this.size = this.update.size;
             this.timeStamp = this.update.timeStamp;
             this.metadata = { ...(this.update.metadata ?? {}) };
+            if (this.update.storage !== undefined && this.update.storage !== null) {
+                this.storage = this.update.storage;
+            }
         } else {
             this.update.success = false;
         }
@@ -50,12 +54,27 @@ export class ContainerData {
         this.update.storage = storage;
         this.update.success = false;
         this.update.show = show !== undefined ? show : this.update.show !== null ? this.update.show : this.show;
+        if (storage !== undefined && storage !== null) {
+            this.storage = storage;
+        }
     }
     setPendingCacheData(size = 0, timeStamp = null, metadata = {}) {
         this.update.size = size;
         this.update.timeStamp = timeStamp;
         this.update.metadata = { ...(metadata ?? {}) };
     }
+    setPendingWithCurrentStorage() {
+        const storedSource = this.storage ?? null;
+        if (!storedSource) {
+            return false;
+        }
+        const targetShow = this.update.show !== null ? this.update.show : this.show;
+        this.setPending(storedSource, targetShow);
+        this.update.size = this.size;
+        this.update.timeStamp = this.timeStamp;
+        this.update.metadata = { ...(this.metadata ?? {}) };
+        return true;
+    }
     get isPending() {
         return this.update.pending === true;
     }
@@ -114,7 +133,11 @@ export class MaterialData {
         this.update.value = value;
     }
     setPendingWithCurrent() {
+        if (this.value === undefined) {
+            return false;
+        }
         this.setPending(this.value);
+        return true;
     }
     get isPending() {
         return this.update.pending === true;
@@ -138,7 +161,8 @@ export class MaterialData {
  *  - Access status via isPending, isSuccess getters.
  */
 export class CameraData {
-    constructor(name = "", value = null, locked = true) {
+    defaultLocked = true;
+    constructor(name = "", value = null, locked = this.defaultLocked) {
         this.name = name;
         this.value = value;
         this.locked = locked;
@@ -161,7 +185,7 @@ export class CameraData {
             this.update.success = false;
         }
     }
-    setPending(value = undefined, locked = true) {
+    setPending(value = undefined, locked = this.defaultLocked) {
         this.reset();
         if (value === undefined) {
             return;
@@ -174,6 +198,11 @@ export class CameraData {
         this.update.value = value;
         this.update.locked = locked;
     }
+    setPendingWithCurrent() {
+        const currentValue = this.value !== undefined ? this.value : null;
+        this.setPending(currentValue, this.locked);
+        return true;
+    }
     get isPending() {
         return this.update.pending === true;
     }

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

@@ -8,14 +8,16 @@ import { FileStorage } from "./file-storage.js";
  *
  * Overview:
  *  - Encapsulates a Babylon.js-powered 3D viewer for displaying models, environments, and materials.
- *  - Manages internal state for containers (model, environment, materials) and options (camera, materials).
+ *  - Manages internal state for containers (model, environment, materials) and options (camera, materials, IBL, render toggles).
  *  - Handles asset loading, configuration, and option updates (camera, materials, IBL) through attributes and public methods.
+ *  - Exposes getters/setters for render settings so PrefViewerMenu3D or other UIs can persistently toggle AA/SSAO/IBL/shadows.
  *  - Provides API for showing/hiding the viewer, model, and environment, and for downloading assets.
- *  - Emits custom events for loading, loaded, and option-setting states.
+ *  - Emits custom events for loading, loaded, option-setting, and render-setting workflows.
  *
  * Usage:
  *  - Use as a custom HTML element: <pref-viewer-3d ...>
  *  - Configure via attributes (config, options, show-model, show-scene, visible).
+ *  - Call getRenderSettings()/applyRenderSettings() to synchronize UI toggles with BabylonJSController persistence.
  *  - Control viewer state and assets via public methods.
  *
  * Observed Attributes:
@@ -28,6 +30,8 @@ import { FileStorage } from "./file-storage.js";
  *  - hide(): Hides the 3D viewer component.
  *  - load(config): Loads the provided configuration into the viewer.
  *  - setOptions(options): Sets viewer options such as camera, materials, and image-based lighting (IBL).
+ *  - getRenderSettings(): Returns the current anti-aliasing, SSAO, IBL, and shadow flags.
+ *  - applyRenderSettings(settings): Persists incoming render toggles, reloads if needed, and reports the result.
  *  - showModel(): Shows the 3D model.
  *  - hideModel(): Hides the 3D model.
  *  - showEnvironment(): Shows the 3D environment/scene.
@@ -63,7 +67,7 @@ import { FileStorage } from "./file-storage.js";
  *
  * Notes:
  *  - Internal state and heavy initialization are handled in connectedCallback.
- *  - Designed for extensibility and integration in product configurators and visualization tools.
+ *  - Designed for extensibility and integration in product configurators, PrefViewer host elements, and visualization tools.
  *  - All resource management and rendering operations are performed asynchronously for performance.
  */
 export default class PrefViewer3D extends HTMLElement {
@@ -337,13 +341,12 @@ export default class PrefViewer3D extends HTMLElement {
 
         if (options.ibl.url) {
             url = options.ibl.url;
-            // TEMPORARY: Disable FileStorage usage due to efficiency problems
-            // const fileStorage = new FileStorage("PrefViewer", "Files");
-            // const newURL = await fileStorage.getURL(options.ibl.url);
-            // if (newURL) {
-            //     url = newURL;
-            //     timeStamp = await fileStorage.getTimeStamp(options.ibl.url);
-            // }
+            const fileStorage = new FileStorage("PrefViewer", "Files");
+            const newURL = await fileStorage.getURL(options.ibl.url);
+            if (newURL) {
+                url = newURL;
+                timeStamp = await fileStorage.getTimeStamp(options.ibl.url);
+            }
         }
         if (options.ibl.shadows !== undefined) {
             shadows = options.ibl.shadows;
@@ -740,6 +743,39 @@ export default class PrefViewer3D extends HTMLElement {
         this.#babylonJSController.downloadUSDZ(2);
     }
 
+    /**
+     * Returns the current render settings used by the BabylonJSController.
+     * @public
+     * @returns {object|null} A shallow copy of the render settings or null if unavailable.
+     */
+    getRenderSettings() {
+        if (!this.#babylonJSController) {
+            return null;
+        }
+        return this.#babylonJSController.getRenderSettings();
+    }
+
+    /**
+     * Applies render settings that require reloading the Babylon.js scene.
+     * @public
+     * @param {object} settings - Partial settings for anti-aliasing, SSAO, IBL, and shadows.
+     * @returns {Promise<object>} Resolves with the reload summary.
+     */
+    async applyRenderSettings(settings) {
+        if (!this.#babylonJSController) {
+            return { changed: false, success: false };
+        }
+        const scheduled = this.#babylonJSController.scheduleRenderSettingsReload(settings);
+        if (!scheduled.changed) {
+            return { changed: false, success: true };
+        }
+
+        this.#onLoading();
+        const reloadResult = await this.#babylonJSController.reloadWithCurrentSettings();
+        const detail = this.#onLoaded();
+        return { changed: true, success: reloadResult.success, detail, controller: reloadResult };
+    }
+
     /**
      * Indicates whether the component has completed its initialization.
      * @public