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

package/src/file-storage.js

@@ -129,10 +129,6 @@ export default class FileStorage {
     #minimumFreeSpaceRatio = 0.05; // try to keep at least 5% of quota free
     #maxQuotaEvictionRetries = 5; // max retries after quota error
     #lastCleanupAt = 0; // timestamp of last automatic cleanup run
-    // In-memory blob cache — eliminates repeated IDB round-trips for the same URI within a session.
-    // Keyed by URI; values are normalized records (blob kept in RAM). Avoids both the readonly read
-    // and the readwrite #touchFile transaction on every getURL() call during #replaceSceneURIAsync.
-    #memoryCache = new Map();
 
     constructor(dbName = "FilesDB", osName = "FilesObjectStore") {
         this.dbName = dbName; // database name
@@ -262,7 +258,6 @@ export default class FileStorage {
         const store = transaction.objectStore(this.osName);
         keys.forEach((key) => {
             store.delete(key);
-            this.#memoryCache.delete(String(key));
         });
         await transaction.done;
         return keys.length;
@@ -613,7 +608,6 @@ export default class FileStorage {
                 const store = transaction.objectStore(this.osName);
                 const result = await store.put(record, uri);
                 await transaction.done;
-                this.#memoryCache.set(uri, record);
                 return result;
             } catch (error) {
                 if (!this.#isQuotaExceededError(error) || attempt === this.#maxQuotaEvictionRetries) {
@@ -641,19 +635,6 @@ export default class FileStorage {
      *   - false: if the database could not be opened (IndexedDB unsupported or open failure)
      */
     async #getFile(uri, { touch = true, allowExpired = false } = {}) {
-        // In-memory cache hit: skip IDB entirely, update lastAccess in RAM only.
-        const inMemory = this.#memoryCache.get(uri);
-        if (inMemory) {
-            if (!allowExpired && this.#isExpired(inMemory)) {
-                this.#memoryCache.delete(uri);
-            } else {
-                if (touch) {
-                    inMemory.lastAccess = this.#now();
-                }
-                return inMemory;
-            }
-        }
-
         if (this.#db === undefined) {
             this.#db = await this.#openDB();
         }
@@ -670,68 +651,13 @@ export default class FileStorage {
             await this.#deleteKeys([uri]);
             return undefined;
         }
-        this.#memoryCache.set(uri, record);
         if (touch) {
-            // Fire-and-forget: don't block the caller on a readwrite IDB transaction just to update lastAccess.
-            void this.#touchFile(uri, record);
+            await this.#touchFile(uri, record);
             record.lastAccess = this.#now();
         }
         return record;
     }
 
-    /**
-     * Retrieves multiple file records from the in-memory cache and IDB in a single readonly
-     * transaction, populating the in-memory cache for all hits.
-     * @private
-     * @param {string[]} uris - URIs to look up.
-     * @returns {Promise<Map<string, object>>} Map of uri → normalized record for found entries.
-     */
-    async #getFileBatch(uris) {
-        const resultMap = new Map();
-        if (!uris.length) return resultMap;
-
-        const idbMisses = [];
-        for (const uri of uris) {
-            const cached = this.#memoryCache.get(uri);
-            if (cached) {
-                if (this.#isExpired(cached)) {
-                    this.#memoryCache.delete(uri);
-                    idbMisses.push(uri);
-                } else {
-                    resultMap.set(uri, cached);
-                }
-            } else {
-                idbMisses.push(uri);
-            }
-        }
-
-        if (!idbMisses.length) return resultMap;
-
-        if (this.#db === undefined) {
-            this.#db = await this.#openDB();
-        }
-        if (this.#db === null) return resultMap;
-
-        // One readonly transaction for all IDB misses — single lock acquisition vs N transactions.
-        const tx = this.#db.transaction(this.osName, "readonly");
-        const store = tx.objectStore(this.osName);
-        const rawRecords = await Promise.all(idbMisses.map((uri) => store.get(uri)));
-
-        const now = this.#now();
-        idbMisses.forEach((uri, i) => {
-            const record = this.#normalizeRecord(rawRecords[i]);
-            if (!record) return;
-            if (this.#isExpired(record, now)) {
-                void this.#deleteKeys([uri]);
-                return;
-            }
-            this.#memoryCache.set(uri, record);
-            resultMap.set(uri, record);
-        });
-
-        return resultMap;
-    }
-
     /**
      * ---------------------------
      * Public methods
@@ -756,44 +682,6 @@ export default class FileStorage {
         return storedFile ? URL.createObjectURL(storedFile.blob) : (await this.#getServerFileTimeStamp(uri)) ? uri : false;
     }
 
-    /**
-     * Resolve multiple URIs to object URLs in a single IDB batch transaction.
-     * Hits in-memory cache first, then IDB in one transaction, then falls back to individual
-     * server downloads for any URIs not found. Returns a Map<uri, objectURL|uri>.
-     * @public
-     * @param {string[]} uris - URIs to resolve.
-     * @returns {Promise<Map<string, string>>} Map of uri → resolved URL (blob: or original URI).
-     */
-    async getURLBatch(uris) {
-        if (!uris.length) return new Map();
-        if (!this.#supported) {
-            return new Map(uris.map((uri) => [uri, uri]));
-        }
-        await this.#runCleanupIfDue();
-        const records = await this.#getFileBatch(uris);
-        const urlMap = new Map();
-        const serverFetches = [];
-
-        for (const uri of uris) {
-            const record = records.get(uri);
-            if (record?.blob) {
-                urlMap.set(uri, URL.createObjectURL(record.blob));
-            } else {
-                serverFetches.push(uri);
-            }
-        }
-
-        // For URIs absent from IDB, fall back to individual get() which downloads and caches them.
-        await Promise.all(
-            serverFetches.map(async (uri) => {
-                const url = await this.getURL(uri);
-                if (url) urlMap.set(uri, url);
-            })
-        );
-
-        return urlMap;
-    }
-
     /**
      * Get the cached or server Last-Modified timestamp for a file.
      * @public
@@ -874,18 +762,10 @@ export default class FileStorage {
         }
         if (!storedFile) {
             const fileToStore = await this.#getServerFile(uri);
-            if (fileToStore) {
-                // Populate in-memory cache immediately after download so subsequent calls
-                // within this session are instant — even if the IDB write fails later.
-                const freshRecord = this.#createRecordFromFile(fileToStore);
-                if (freshRecord) {
-                    this.#memoryCache.set(uri, freshRecord);
-                }
-                if (!!(await this.#putFile(fileToStore, uri))) {
-                    storedFile = await this.#getFile(uri);
-                } else {
-                    storedFile = freshRecord ?? fileToStore;
-                }
+            if (fileToStore && !!(await this.#putFile(fileToStore, uri))) {
+                storedFile = await this.#getFile(uri);
+            } else {
+                storedFile = fileToStore;
             }
         }
         return storedFile;
@@ -921,6 +801,5 @@ export default class FileStorage {
             } catch {}
         }
         this.#db = undefined;
-        this.#memoryCache.clear();
     }
 }

package/src/gltf-resolver.js

@@ -82,27 +82,27 @@ export default class GLTFResolver {
      *   - If parsing fails, returns a Blob with MIME type "model/gltf-binary" and extension ".glb".
      *   - If decoding fails, returns nulls for blob and extension.
      */
-    async #decodeBase64(base64) {
+    #decodeBase64(base64) {
         const [, payload] = base64.split(",");
         const raw = payload || base64;
-        const size = raw.length;
-
-        // Detect format from first base64 chars — O(1), no full decode needed.
-        // GLB magic bytes 0x676c5446 ("glTF") encode to "Z2x" in base64.
-        // GLTF JSON always starts with '{' (0x7B), which encodes to "ey" in base64.
-        const isGlb = raw.startsWith("Z2x");
-        const extension = isGlb ? ".glb" : ".gltf";
-        const type = isGlb ? "model/gltf-binary" : "model/gltf+json";
-
+        let decoded = "";
         let blob = null;
+        let extension = null;
+        let size = raw.length;
         try {
-            // Native browser decode: runs in C++ off the JS call stack, does not block the
-            // main thread. Avoids the per-character Uint8Array loop and the full JSON.parse
-            // that the previous sync implementation used to detect the file type.
-            blob = await fetch(`data:${type};base64,${raw}`).then((r) => r.blob());
+            decoded = atob(raw);
         } catch {
-            return { blob: null, extension: null, size };
+            return { blob, extension, size };
         }
+        let isJson = false;
+        try {
+            JSON.parse(decoded);
+            isJson = true;
+        } catch {}
+        extension = isJson ? ".gltf" : ".glb";
+        const type = isJson ? "model/gltf+json" : "model/gltf-binary";
+        const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
+        blob = new Blob([array], { type });
         return { blob, extension, size };
     }
 
@@ -138,27 +138,6 @@ export default class GLTFResolver {
         return typeof url === "string" && url.startsWith("blob:");
     }
 
-    /**
-     * Check whether a source should be treated as embedded base64/data URI.
-     * @private
-     * @param {string} source - Value to test.
-     * @returns {boolean} True when the source is a data URI or raw base64 payload.
-     */
-    #isEmbeddedBase64Source(source) {
-        if (typeof source !== "string") {
-            return false;
-        }
-        const normalized = source.trim();
-        if (!normalized) {
-            return false;
-        }
-        if (normalized.startsWith("data:")) {
-            return true;
-        }
-        // Raw base64 payloads use the standard alphabet and have no URL separators.
-        return /^[A-Za-z0-9+/=_-]+$/.test(normalized);
-    }
-
     /**
      * Collects asset entries that have an external URI (non-data URI) and stores a normalized absolute or relative-resolved URI for later replacement.
      * @private
@@ -225,19 +204,17 @@ export default class GLTFResolver {
             assetContainerJSON.images.forEach((asset, index, array) => this.#saveAssetData(asset, index, array, sceneURLBase, arrayOfAssetsWithURI));
         }
 
-        // Batch-resolve all asset URIs in a single IDB transaction to avoid per-URI transaction
-        // overhead. Falls back to individual getURL() for URIs not found in IDB.
-        const urisToResolve = arrayOfAssetsWithURI.map((asset) => asset.uri);
-        const urlMap = await this.#fileStorage.getURLBatch(urisToResolve);
-        arrayOfAssetsWithURI.forEach((asset) => {
-            const resolvedUrl = urlMap.get(asset.uri);
-            if (resolvedUrl) {
-                asset.parent[asset.index].uri = resolvedUrl;
-                if (this.#isBlobURL(resolvedUrl)) {
-                    objectURLs.push(resolvedUrl);
+        // Replace parallel URIs so that if files are not stored yet, they are downloaded in parallel
+        const promisesArray = arrayOfAssetsWithURI.map(async (asset) => {
+            const uri = await this.#fileStorage.getURL(asset.uri);
+            if (uri) {
+                asset.parent[asset.index].uri = uri;
+                if (this.#isBlobURL(uri)) {
+                    objectURLs.push(uri);
                 }
             }
         });
+        await Promise.all(promisesArray);
     }
 
     /**
@@ -293,9 +270,7 @@ export default class GLTFResolver {
 
         if (storage.db && storage.table && storage.id) {
             await this.#initializeStorage(storage.db, storage.table);
-            const tIdb = performance.now();
             const object = await loadModel(storage.id, storage.table);
-            console.log(`[perf][gltf:${storage.id}] IDB read ${Math.round(performance.now() - tIdb)}ms`);
             if (!object || !object.data || !object.timeStamp || !object.size) {
                 return false;
             }
@@ -315,21 +290,12 @@ export default class GLTFResolver {
         }
 
         let file = null;
-        let blob = null;
-        let extension = null;
-        let size = 0;
-        if (this.#isEmbeddedBase64Source(source)) {
-            const tDecode = performance.now();
-            ({ blob, extension, size } = await this.#decodeBase64(source));
-            console.log(`[perf][gltf:${storage.id ?? "url"}] decode(${extension}) ${Math.round(performance.now() - tDecode)}ms`);
-        }
+        let { blob, extension, size } = this.#decodeBase64(source);
 
         if (blob && extension) {
             if (extension === ".gltf") {
                 const assetContainerJSON = JSON.parse(await blob.text());
-                const tReplace = performance.now();
                 await this.#replaceSceneURIAsync(assetContainerJSON, source, objectURLs);
-                console.log(`[perf][gltf:${storage.id ?? "url"}] replaceURIs ${Math.round(performance.now() - tReplace)}ms (${objectURLs.length} assets)`);
                 source = `data:${JSON.stringify(assetContainerJSON)}`;
             } else {
                 file = new File([blob], `file${extension}`, {

package/src/localization/translations.js

@@ -3,18 +3,12 @@ export const translations = {
         prefViewer: {
             menu3d: {
                 title: "3D render settings",
-                subtitle: "Toggle visual effects on or off.",
-                pendingLabel: "Pending changes",
+                subtitle: "Modify the visual effects.",
                 actions: {
-                    apply: "Apply",
-                    applying: "Applying...",
                     play: "Play",
                     pause: "Pause",
                 },
-                status: {
-                    error: "Couldn't apply the changes.",
-                },
-                switches: {
+                features: {
                     antiAliasingEnabled: {
                         label: "Antialiasing",
                         helper: "Softens jagged edges and lines.",
@@ -70,18 +64,12 @@ export const translations = {
         prefViewer: {
             menu3d: {
                 title: "Ajustes de render 3D",
-                subtitle: "Activa o desactiva los efectos visuales.",
-                pendingLabel: "Pendiente de aplicar",
+                subtitle: "Modifica los efectos visuales.",
                 actions: {
-                    apply: "Aplicar",
-                    applying: "Aplicando...",
                     play: "Reproducir",
                     pause: "Pausar",
                 },
-                status: {
-                    error: "No se pudo aplicar los cambios.",
-                },
-                switches: {
+                features: {
                     antiAliasingEnabled: {
                         label: "Antialiasing",
                         helper: "Suaviza aristas y líneas.",
@@ -100,7 +88,7 @@ export const translations = {
                     },
                     highlightEnabled: {
                         label: "Resaltado",
-                        helper: "Resaltar elementos animados al pasar el ratón.",
+                        helper: "Resalta elementos animados al pasar el ratón.",
                     },
                     highlightColor: {
                         label: "Color de resaltado",

package/src/material-utils.js

@@ -0,0 +1,72 @@
+import { PBRMaterial } from "@babylonjs/core";
+
+/**
+ * Utilities for classifying and tagging PBR materials by their transparency/transmission mode.
+ * Used by BabylonJSController at load time and by pref-viewer-3d for render-order decisions.
+ */
+
+const PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY = "prefViewerSimplifiedTransmission";
+
+/**
+ * Tags a PBR material as having been converted from physical KHR_materials_transmission to simple
+ * alpha blending. The tag is stored in `mat.metadata` under an internal key so that downstream
+ * render-order passes can still identify these materials as transparent candidates even after
+ * their `subSurface.isRefractionEnabled` flag has been cleared.
+ *
+ * Returns the same material instance (or the original value when `mat` is falsy) so calls can be
+ * chained.
+ * @param {import("@babylonjs/core").PBRMaterial|null|undefined} mat - Material to tag.
+ * @returns {import("@babylonjs/core").PBRMaterial|null|undefined} The same `mat` value that was passed in.
+ */
+export function markPrefViewerSimplifiedTransmissionMaterial(mat) {
+    if (!mat) {
+        return mat;
+    }
+            
+    mat.metadata = {
+        ...(mat.metadata ?? {}),
+        [PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY]: true,
+    };
+    return mat;
+}
+
+/**
+ * Returns true when the material uses Babylon.js physical glass rendering — i.e. either
+ * KHR_materials_transmission (refraction) or KHR_materials_translucency is active.
+ *
+ * This is intentionally narrower than `isPrefViewerTransparentRenderOrderMaterial`: it only
+ * matches full physical transmission, not plain alpha blending or simplified environment glass.
+ * @param {import("@babylonjs/core").Material|null|undefined} mat - Material to test.
+ * @returns {boolean}
+ */
+export function isPrefViewerPhysicalGlassMaterial(mat) {
+    return Boolean(mat?.subSurface?.isRefractionEnabled || mat?.subSurface?.isTranslucencyEnabled);
+}
+
+/**
+ * Returns true when a material should be placed in the transparent rendering group (renderingGroupId=1).
+ *
+ * A material qualifies when any of the following is true:
+ * - It is a physical glass material (KHR_materials_transmission / translucency).
+ * - It has been tagged as simplified environment transmission via `markPrefViewerSimplifiedTransmissionMaterial`.
+ * - Its effective alpha is below 1, its `transparencyMode` is alpha-blend or alpha-test-and-blend,
+ *   or it self-reports as needing blending/testing through the Babylon.js material API.
+ * @param {import("@babylonjs/core").Material|null|undefined} mat - Material to test.
+ * @returns {boolean}
+ */
+export function isPrefViewerTransparentRenderOrderMaterial(mat) {
+    if (!mat) {
+        return false;
+    }
+    const isTransmissive = isPrefViewerPhysicalGlassMaterial(mat);
+    const isSimplifiedTransmission = mat.metadata?.[PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY] === true;
+    const alpha = typeof mat.alpha === "number" ? mat.alpha : 1;
+    const isAlphaBlended =
+        alpha < 1 ||
+        mat.transparencyMode === PBRMaterial.PBRMATERIAL_ALPHABLEND ||
+        mat.transparencyMode === PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND ||
+        mat.needAlphaBlending?.() === true ||
+        mat.needAlphaTesting?.() === true;
+
+    return Boolean(isTransmissive || isSimplifiedTransmission || isAlphaBlended);
+}

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

@@ -19,20 +19,20 @@ import { PrefViewer2DStyles } from "./styles.js";
  *  - visible: "true" | "false" (controls visibility and event subscription)
  *
  * Public methods
- *  - async load(svgConfig) : Promise<boolean> — accept SVG input/config and prepare for render
+ *  - async load(svgConfig) : Promise<{success: boolean, error: Error|null}> — accept SVG input/config and prepare for render
  *  - show(), hide() — toggle visibility and event subscriptions
  *  - zoomIn(), zoomOut(), zoomCenter(), zoomExtentsAll() — pan/zoom controls
  * 
- * * Public Properties:
+ * Public Properties:
  *  - isInitialized: Indicates whether the component has completed initialization.
  *  - isLoaded: Indicates whether the SVG content is loaded and ready.
  *  - isVisible: Indicates whether the component is currently visible.
  *
  * Events
- *  - "drawing-loading": emitted before loading starts
- *  - "drawing-loaded": emitted after content and Panzoom are ready
- *  - "drawing-error": emitted on validation/fetch errors (detail.error: Error)
- *  - "drawing-zoom-changed": emitted when pan/zoom state changes (detail: { moved, scaled, maximized, minimized })
+ *  - "pref-viewer-2d-loading": emitted before loading starts. Legacy alias: "drawing-loading"
+ *  - "pref-viewer-2d-loaded": emitted after content and Panzoom are ready. Legacy alias: "drawing-loaded"
+ *  - "pref-viewer-2d-error": emitted on validation/fetch errors (detail.error: Error). Legacy alias: "drawing-error"
+ *  - "pref-viewer-2d-viewport-changed": emitted when pan/zoom state changes (detail: { moved, scaled, maximized, minimized })
  *
  * Implementation notes
  *  - Keeps internal state in private fields (#svg, #panzoom, #panzoomOptions, ...).
@@ -235,7 +235,8 @@ export default class PrefViewer2D extends HTMLElement {
             composed: false, // indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM
             detail: detail,
         };
-        this.dispatchEvent(new CustomEvent("drawing-error", customEventOptions));
+        this.dispatchEvent(new CustomEvent("pref-viewer-2d-error", customEventOptions));
+        this.dispatchEvent(new CustomEvent("drawing-error", customEventOptions)); // Legacy alias for backward compatibility
         return detail;
     }
 
@@ -250,7 +251,8 @@ export default class PrefViewer2D extends HTMLElement {
             cancelable: true,
             composed: false,
         };
-        this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
+        this.dispatchEvent(new CustomEvent("pref-viewer-2d-loaded", customEventOptions));
+        this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions)); // Legacy alias for backward compatibility
 
         this.removeAttribute("loading");
         this.setAttribute("loaded", "");
@@ -270,7 +272,8 @@ export default class PrefViewer2D extends HTMLElement {
             cancelable: true,
             composed: false,
         };
-        this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
+        this.dispatchEvent(new CustomEvent("pref-viewer-2d-loading", customEventOptions));
+        this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions)); // Legacy alias for backward compatibility
 
         this.removeAttribute("loaded");
         this.setAttribute("loading", "");
@@ -283,7 +286,7 @@ export default class PrefViewer2D extends HTMLElement {
     }
 
     /**
-     * Handles Panzoom state changes by dispatching a "prefviewer2d-zoomchanged" custom event.
+     * Handles Panzoom state changes by dispatching the public "pref-viewer-2d-viewport-changed" event.
      * @private
      * @param {object} state - The current Panzoom state object.
      * @returns {void}
@@ -299,17 +302,7 @@ export default class PrefViewer2D extends HTMLElement {
             detail: state,
         };
         customEventOptions.detail.desde2d = "true";
-        this.dispatchEvent(new CustomEvent("drawing-zoom-changed", customEventOptions));
-    }
-
-    /**
-     * Subscribe DOM events required by Panzoom and keyboard interactions.
-     * @private
-     * @returns {void}
-                composed: true,
-                detail: state,
-            })
-        );
+        this.dispatchEvent(new CustomEvent("pref-viewer-2d-viewport-changed", customEventOptions));
     }
 
     /**