@preference-sl/pref-viewer 2.11.0-beta.0 → 2.11.0-beta.2

package/src/index.js

@@ -1,1172 +1,515 @@
+import { PrefViewer2D } from "./pref-viewer-2d.js";
+import { PrefViewer3D } from "./pref-viewer-3d.js";
+import { PrefViewerTask } from "./pref-viewer-task.js";
+
 /**
- * =============================================================================
- * PrefViewer Web Component (JavaScript)
- * =============================================================================
+ * PrefViewer - Custom Web Component for advanced 2D and 3D product visualization and configuration.
+ *
+ * Overview:
+ *  - Encapsulates both 2D (SVG) and 3D (Babylon.js) viewers, supporting glTF/GLB models, environments, and drawings.
+ *  - Loads assets from remote URLs, Base64 data URIs, and IndexedDB sources.
+ *  - Provides a unified API for loading models, scenes, drawings, materials, and configuration via attributes or methods.
+ *  - Manages an internal task queue for sequential processing of viewer operations.
+ *  - Emits custom events for loading, errors, and state changes to facilitate integration.
+ *  - Supports downloading models and scenes in GLB and USDZ formats.
+ *  - Automatically updates the viewer when reactive attributes change.
+ *
+ * Usage:
+ *  - Use as a custom HTML element: <pref-viewer ...>
+ *  - Configure via attributes (config, model, scene, materials, drawing, options, mode).
+ *  - Control viewer mode, visibility, and downloads via public methods.
+ *
+ * Reactive Attributes:
+ *  - config: URL or Base64 for configuration file.
+ *  - model: URL or Base64 for 3D model (glTF/GLB).
+ *  - scene: URL or Base64 for environment/scene (glTF/GLB).
+ *  - materials: URL or Base64 for materials definition.
+ *  - drawing: URL or Base64 for SVG drawing.
+ *  - options: JSON string for viewer options.
+ *  - mode: Viewer mode ("2d" or "3d").
  *
- * Overview
- * --------
- * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Renders the glTF or GLB model of the product ('model') and merges it with the glTF or GLB model of environment ('scene') into a <canvas> inside its shadow DOM.
- *   • Supports loading via remote URL (storage.url), Base64 data URI (storage.url), or from a Base64 stored entry in IndexedDB (storage.db, storage.table, storage.id).
- *   • The data for loading both models is provided via the 'config' (both model and scene), 'model' and 'scene' attributes. The 'config' attribute can carry more initial configurations than just the models.
- *   • Exposes methods for making changes to the scene that replicate what the attribute observables do: 'loadConfig', 'loadModel', 'loadScene'.
- *   • Automatically handles scene creation (engine, camera, lighting) and resource cleanup.
- *   • Emits 'model-loaded' and 'model-error' events for integration.
+ * Public Methods:
+ *  - loadConfig(config), loadModel(model), loadScene(scene), loadMaterials(materials), loadDrawing(drawing)
+ *  - setOptions(options)
+ *  - setMode(mode): Sets the viewer mode to "2d" or "3d" and updates component visibility.
+ *  - showModel(), hideModel(), showScene(), hideScene()
+ *  - downloadModelGLB(), downloadModelUSDZ(), downloadModelAndSceneGLB(), downloadModelAndSceneUSDZ()
+ *  - zoomCenter(), zoomExtentsAll(), zoomIn(), zoomOut()
  *
- * Usage
- * -----
- * Load model from IndexedDB:
- * ```html
- * <pref-viewer
- *     model='{ "storage": { "db": "PrefConfiguratorDB", "table": "gltfModels", "id": "1234-1234-1234-1234-1234" }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Public Properties:
+ *  - isInitialized: Indicates if the viewer is initialized.
+ *  - isLoaded: Indicates if the viewer has finished loading.
+ *  - isLoading: Indicates if the viewer is currently loading.
+ *  - isMode2D: Indicates if the viewer is in 2D mode.
+ *  - isMode3D: Indicates if the viewer is in 3D mode.
  *
- * Load scene a URL:
- * ```html
- * <pref-viewer
- *     scene='{ "storage": { "url" : "https://example.com/scenes/scene1.gltf" }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Events:
+ *  - "scene-loading": Dispatched when a 3D loading operation starts.
+ *  - "scene-loaded": Dispatched when a 3D loading operation completes.
+ *  - "drawing-loading": Dispatched when a 2D drawing loading operation starts.
+ *  - "drawing-loaded": Dispatched when a 2D drawing loading operation completes.
+ *  - "drawing-zoom-changed": Dispatched when the 2D drawing zoom/pan state changes.
  *
- * Load model from Base64 data:
- * ```html
- * <pref-viewer
- *     model='{ "storage": { "url" : "data:model/gltf+json;base64,UEsDB..." }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Notes:
+ *  - Automatically creates and manages 2D and 3D viewer components in its shadow DOM.
+ *  - Processes tasks sequentially to ensure consistent state.
+ *  - Designed for extensibility and integration in product configurators and visualization tools.
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName, HDRCubeTexture, IblShadowsRenderPipeline } from "@babylonjs/core";
-import "@babylonjs/loaders";
-import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
-import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
-import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
-import { initDb, loadModel } from "./gltf-storage.js";
-import { FileStorage } from "./file-storage.js";
-
-class PrefViewerTask {
-    static Types = Object.freeze({
-        Config: "config",
-        Environment: "environment",
-        Materials: "materials",
-        Model: "model",
-        Options: "options",
-    });
-
-    /**
-     * value: any payload for the task
-     * type: must match one of PrefViewerTask.Types values (case-insensitive)
-     */
-    constructor(value, type) {
-        this.value = value;
-
-        const t = typeof type === "string" ? type.toLowerCase() : String(type).toLowerCase();
-        const allowed = Object.values(PrefViewerTask.Types);
-        if (!allowed.includes(t)) {
-            throw new TypeError(`PrefViewerTask: invalid type "${type}". Allowed types: ${allowed.join(", ")}`);
-        }
-        this.type = t;
-
-        Object.freeze(this);
-    }
-}
-
 class PrefViewer extends HTMLElement {
-    initialized = false;
-    loaded = false;
-    loading = false;
+    #isInitialized = false;
+    #isLoaded = false;
+    #isLoading = false;
+    #mode = "3d";
+
     #taskQueue = [];
-    #fileStorage = new FileStorage("PrefViewer", "Files");
-
-    #data = {
-        containers: {
-            model: {
-                name: "model",
-                assetContainer: null,
-                show: true,
-                storage: null,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-            environment: {
-                name: "environment",
-                assetContainer: null,
-                show: true,
-                storage: null,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-            materials: {
-                name: "materials",
-                assetContainer: null,
-                storage: null,
-                show: true,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-        },
-        options: {
-            camera: {
-                value: null,
-                locked: true,
-                changed: { pending: false, success: false },
-            },
-            materials: {
-                innerWall: {
-                    value: null,
-                    prefix: "innerWall",
-                    changed: { pending: false, success: false },
-                },
-                outerWall: {
-                    value: null,
-                    prefix: "outerWall",
-                    changed: { pending: false, success: false },
-                },
-                innerFloor: {
-                    value: null,
-                    prefix: "innerFloor",
-                    changed: { pending: false, success: false },
-                },
-                outerFloor: {
-                    value: null,
-                    prefix: "outerFloor",
-                    changed: { pending: false, success: false },
-                },
-            },
-        },
-    };
-
-    // DOM elements
-    #wrapper = null;
-    #canvas = null;
-
-    // Babylon.js core objects
-    #engine = null;
-    #scene = null;
-    #camera = null;
-    #hemiLight = null;
-    #dirLight = null;
-    #cameraLight = null;
-    #shadowGen = null;
-    #XRExperience = null;
 
+    #component2D = null;
+    #component3D = null;
+
+    /**
+     * Creates a new PrefViewer instance and attaches a shadow DOM.
+     * Initializes internal state and component references.
+     * @public
+     */
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.#createCanvas();
-        this.#wrapCanvas();
-        // Point to whichever version you packaged or want to use:
-        const DRACO_BASE = "https://www.gstatic.com/draco/versioned/decoders/1.5.7";
-        DracoCompression.Configuration.decoder = {
-            // loader for the “wrapper” that pulls in the real WASM
-            wasmUrl: `${DRACO_BASE}/draco_wasm_wrapper_gltf.js`,
-            // the raw WebAssembly binary
-            wasmBinaryUrl: `${DRACO_BASE}/draco_decoder_gltf.wasm`,
-            // JS fallback if WASM isn’t available
-            fallbackUrl: `${DRACO_BASE}/draco_decoder_gltf.js`,
-        };
     }
 
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @public
+     * @returns {string[]} Array of attribute names to observe.
+     */
     static get observedAttributes() {
-        return ["config", "model", "scene", "show-model", "show-scene"];
+        return ["config", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene"];
     }
 
+    /**
+     * Observes changes to specific attributes and triggers corresponding actions.
+     * Loads configuration, drawing, model, scene, materials, or options when their attributes change.
+     * Toggles model or scene visibility when "show-model" or "show-scene" attributes change.
+     * @public
+     * @param {string} name - The name of the changed attribute.
+     * @param {*} _old - The previous value of the attribute (unused).
+     * @param {*} value - The new value of the attribute.
+     * @returns {void}
+     */
     attributeChangedCallback(name, _old, value) {
-        let data = null;
         switch (name) {
             case "config":
                 this.loadConfig(value);
                 break;
+            case "drawing":
+                this.loadDrawing(value);
+                break;
+            case "materials":
+                this.loadMaterials(value);
+                break;
+            case "mode":
+                if (_old === value || value.toLowerCase() === this.#mode) {
+                    return;
+                }
+                this.setMode(value.toLowerCase());
+                break;
             case "model":
                 this.loadModel(value);
                 break;
             case "scene":
                 this.loadScene(value);
                 break;
-            case "materials":
-                this.loadMaterials(value);
-                break;
             case "options":
                 this.setOptions(value);
                 break;
             case "show-model":
-                data = value.toLowerCase?.() === "true";
-                if (this.initialized) {
-                    data ? this.showModel() : this.hideModel();
-                } else {
-                    this.#data.containers.model.show = data;
+                if (_old === value) {
+                    return;
                 }
+                const showModel = value.toLowerCase() === "true";
+                showModel ? this.showModel() : this.hideModel();
                 break;
             case "show-scene":
-                data = value.toLowerCase?.() === "true";
-                if (this.initialized) {
-                    data ? this.showScene() : this.hideScene();
-                } else {
-                    this.#data.containers.environment.show = data;
+                if (_old === value) {
+                    return;
                 }
+                const showScene = value.toLowerCase() === "true";
+                showScene ? this.showScene() : this.hideScene();
                 break;
         }
     }
 
+    /**
+     * Called when the element is inserted into the DOM.
+     * Initializes the 3D and 2D viewer components and starts processing tasks.
+     * @public
+     * @returns {void|boolean} Returns false if initialization fails; otherwise void.
+     */
     connectedCallback() {
-        if (!this.hasAttribute("config")) {
-            const error = 'PrefViewer: provide "models" as array of model and environment';
-            console.error(error);
-            this.dispatchEvent(
-                new CustomEvent("scene-error", {
-                    bubbles: true,
-                    cancelable: false,
-                    composed: true,
-                    detail: { error: new Error(error) },
-                })
-            );
-            return false;
+        this.#createComponent3D();
+        this.#createComponent2D();
+
+        if (!this.hasAttribute("mode")) {
+            this.setMode();
         }
 
-        this.#initializeBabylon();
-        this.initialized = true;
+        this.#isInitialized = true;
         this.#processNextTask();
     }
 
-    disconnectedCallback() {
-        this.#disposeEngine();
-        this.#canvasResizeObserver.disconnect();
-    }
-
-    // Web Component
-    #createCanvas() {
-        this.#canvas = document.createElement("canvas");
-        Object.assign(this.#canvas.style, {
-            width: "100%",
-            height: "100%",
-            display: "block",
-            outline: "none",
-        });
-    }
-
-    #wrapCanvas() {
-        this.#wrapper = document.createElement("div");
-        Object.assign(this.#wrapper.style, {
-            width: "100%",
-            height: "100%",
-            position: "relative",
-        });
-        this.#wrapper.appendChild(this.#canvas);
-        this.shadowRoot.append(this.#wrapper);
+    /**
+     * Creates and appends the 2D viewer component to the shadow DOM.
+     * Sets the "visible" attribute to true by default.
+     * @private
+     * @returns {void}
+     */
+    #createComponent2D() {
+        this.#component2D = document.createElement("pref-viewer-2d");
+        this.#component2D.setAttribute("visible", "false");
+        this.#component2D.addEventListener("drawing-zoom-changed", this.#on2DZoomChanged.bind(this));
+        this.shadowRoot.appendChild(this.#component2D);
     }
 
-    #setStatusLoading() {
-        this.loaded = false;
-        this.loading = true;
-        if (this.hasAttribute("loaded")) {
-            this.removeAttribute("loaded");
-        }
-        this.setAttribute("loading", "");
-        this.dispatchEvent(
-            new CustomEvent("scene-loading", {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-            })
-        );
-        this.#engine.stopRenderLoop(this.#renderLoop);
+    /**
+     * Creates and appends the 3D viewer component to the shadow DOM.
+     * Sets the "visible" attribute to true by default.
+     * @private
+     * @returns {void}
+     */
+    #createComponent3D() {
+        this.#component3D = document.createElement("pref-viewer-3d");
+        this.#component3D.setAttribute("visible", "false");
+        this.shadowRoot.appendChild(this.#component3D);
     }
 
-    async #setStatusLoaded() {
-        const toLoadDetail = {
-            container_model: !!this.#data.containers.model.changed.pending,
-            container_environment: !!this.#data.containers.environment.changed.pending,
-            container_materials: !!this.#data.containers.materials.changed.pending,
-            options_camera: !!this.#data.options.camera.changed.pending,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
-        };
-        const loadedDetail = {
-            container_model: !!this.#data.containers.model.changed.success,
-            container_environment: !!this.#data.containers.environment.changed.success,
-            container_materials: !!this.#data.containers.materials.changed.success,
-            options_camera: !!this.#data.options.camera.changed.success,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.success,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.success,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.success,
-        };
-        const detail = {
-            tried: toLoadDetail,
-            success: loadedDetail,
-        };
-
-        this.dispatchEvent(
-            new CustomEvent("scene-loaded", {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-                detail: detail,
-            })
-        );
-
-        await this.#scene.whenReadyAsync();
-        this.#engine.runRenderLoop(this.#renderLoop);
-
-        this.#resetChangedFlags();
-
-        if (this.hasAttribute("loading")) {
-            this.removeAttribute("loading");
+    /**
+     * Adds a new task to the internal queue for processing.
+     * If the viewer is initialized and not currently loading, immediately processes the next task.
+     * @private
+     * @param {*} value - The payload or data for the task.
+     * @param {string} type - The type of task (see PrefViewerTask.Types).
+     * @returns {void}
+     */
+    #addTaskToQueue(value, type) {
+        this.#taskQueue.push(new PrefViewerTask(value, type));
+        if (this.#isInitialized && !this.#isLoading) {
+            this.#processNextTask();
         }
-        this.setAttribute("loaded", "");
-
-        this.loaded = true;
-        this.loading = false;
-
-        this.#processNextTask();
     }
 
-    // Data
-    #checkCameraChanged(options) {
-        if (!options || !options.camera) {
+    /**
+     * Processes the next task in the queue, if any.
+     * Dispatches the task to the appropriate handler based on its type.
+     * @private
+     * @returns {boolean|void} Returns false if the queue is empty; otherwise void.
+     */
+    #processNextTask() {
+        if (!this.#taskQueue.length) {
             return false;
         }
-        const prev = this.#data.options.camera.value;
-        const changed = options.camera !== prev;
-
-        this.#data.options.camera.changed.pending = changed;
-        this.#data.options.camera.changed.success = false;
-        if (changed) {
-            this.#data.options.camera.changed.value = prev;
-            this.#data.options.camera.changed.locked = this.#data.options.camera.locked;
-            this.#data.options.camera.value = options.camera;
+        const task = this.#taskQueue[0];
+        this.#taskQueue.shift();
+        switch (task.type) {
+            case PrefViewerTask.Types.Config:
+                this.#processConfig(task.value);
+                break;
+            case PrefViewerTask.Types.Drawing:
+                this.#processDrawing(task.value);
+                break;
+            case PrefViewerTask.Types.Environment:
+                this.#processEnvironment(task.value);
+                break;
+            case PrefViewerTask.Types.Materials:
+                this.#processMaterials(task.value);
+                break;
+            case PrefViewerTask.Types.Model:
+                this.#processModel(task.value);
+                break;
+            case PrefViewerTask.Types.Options:
+                this.#processOptions(task.value);
+                break;
+            case PrefViewerTask.Types.Visibility:
+                this.#processVisibility(task.value);
+                break;
         }
-        return changed;
     }
 
-    #checkMaterialsChanged(options) {
-        if (!options) {
-            return false;
-        }
-        let someChanged = false;
-        Object.keys(this.#data.options.materials).forEach((material) => {
-            const key = `${material}Material`;
-            const state = this.#data.options.materials[material];
-            const prev = state.value;
-            const incoming = options[key];
-            const changed = !!incoming && incoming !== prev;
-
-            state.changed.pending = changed;
-            state.changed.success = false;
-            if (changed) {
-                state.changed.value = prev;
-                state.value = incoming;
-            }
-            someChanged = someChanged || changed;
-        });
-        return someChanged;
-    }
+    /**
+     * Handles the start of a 3D loading operation.
+     * Updates loading state, sets attributes, and dispatches a "scene-loading" event.
+     * @private
+     * @returns {void}
+     */
+    #on3DLoading() {
+        this.#isLoaded = false;
+        this.#isLoading = true;
 
-    #storeChangedFlagsForContainer(container, success) {
-        if (success) {
-            container.timeStamp = container.changed.timeStamp;
-            container.size = container.changed.size;
-            container.changed.success = true;
-        } else {
-            container.changed.success = false;
-        }
-    }
+        this.removeAttribute("loaded-3d");
+        this.setAttribute("loading-3d", "");
 
-    #resetChangedFlags() {
-        const reset = (node) => {
-            node.changed = { pending: false, success: false };
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
         };
-        Object.values(this.#data.containers).forEach(reset);
-        Object.values(this.#data.options.materials).forEach(reset);
-        reset(this.#data.options.camera);
-    }
-
-    // Babylon.js
-    async #initializeBabylon() {
-        this.#engine = new Engine(this.#canvas, true, { alpha: true });
-        this.#engine.disableUniformBuffers = true;
-        this.#scene = new Scene(this.#engine);
-        this.#scene.clearColor = new Color4(1, 1, 1, 1);
-        this.#createCamera();
-        this.#createLights();
-        this.#setupInteraction();
-        await this.#createXRExperience();
-        this.#engine.runRenderLoop(this.#renderLoop);
-        this.#canvasResizeObserver.observe(this.#canvas);
+        this.dispatchEvent(new CustomEvent("scene-loading", customEventOptions));
     }
 
-    // If this function is defined as '#renderLoop() {}' it is not executed in 'this.#engine.runRenderLoop(this.#renderLoop)'
-    #renderLoop = () => {
-        this.#scene && this.#scene.render();
-    };
+    /**
+     * Handles the completion of a 3D loading operation.
+     * Updates loading state, sets attributes, dispatches a "scene-loaded" event, and processes the next task.
+     * @private
+     * @param {object} [detail] - Optional details to include in the event.
+     * @returns {void}
+     */
+    #on3DLoaded(detail) {
+        this.#isLoaded = true;
+        this.#isLoading = false;
 
-    #addStylesToARButton() {
-        const css = '.babylonVRicon { color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%222048%22%20height%3D%221152%22%20viewBox%3D%220%200%202048%201152%22%20version%3D%221.1%22%3E%3Cpath%20transform%3D%22rotate%28180%201024%2C576.0000000000001%29%22%20d%3D%22m1109%2C896q17%2C0%2030%2C-12t13%2C-30t-12.5%2C-30.5t-30.5%2C-12.5l-170%2C0q-18%2C0%20-30.5%2C12.5t-12.5%2C30.5t13%2C30t30%2C12l170%2C0zm-85%2C256q59%2C0%20132.5%2C-1.5t154.5%2C-5.5t164.5%2C-11.5t163%2C-20t150%2C-30t124.5%2C-41.5q23%2C-11%2042%2C-24t38%2C-30q27%2C-25%2041%2C-61.5t14%2C-72.5l0%2C-257q0%2C-123%20-47%2C-232t-128%2C-190t-190%2C-128t-232%2C-47l-81%2C0q-37%2C0%20-68.5%2C14t-60.5%2C34.5t-55.5%2C45t-53%2C45t-53%2C34.5t-55.5%2C14t-55.5%2C-14t-53%2C-34.5t-53%2C-45t-55.5%2C-45t-60.5%2C-34.5t-68.5%2C-14l-81%2C0q-123%2C0%20-232%2C47t-190%2C128t-128%2C190t-47%2C232l0%2C257q0%2C68%2038%2C115t97%2C73q54%2C24%20124.5%2C41.5t150%2C30t163%2C20t164.5%2C11.5t154.5%2C5.5t132.5%2C1.5zm939%2C-298q0%2C39%20-24.5%2C67t-58.5%2C42q-54%2C23%20-122%2C39.5t-143.5%2C28t-155.5%2C19t-157%2C11t-148.5%2C5t-129.5%2C1.5q-59%2C0%20-130%2C-1.5t-148%2C-5t-157%2C-11t-155.5%2C-19t-143.5%2C-28t-122%2C-39.5q-34%2C-14%20-58.5%2C-42t-24.5%2C-67l0%2C-257q0%2C-106%2040.5%2C-199t110%2C-162.5t162.5%2C-109.5t199%2C-40l81%2C0q27%2C0%2052%2C14t50%2C34.5t51%2C44.5t55.5%2C44.5t63.5%2C34.5t74%2C14t74%2C-14t63.5%2C-34.5t55.5%2C-44.5t51%2C-44.5t50%2C-34.5t52%2C-14l14%2C0q37%2C0%2070%2C0.5t64.5%2C4.5t63.5%2C12t68%2C23q71%2C30%20128.5%2C78.5t98.5%2C110t63.5%2C133.5t22.5%2C149l0%2C257z%22%20fill%3D%22white%22%20/%3E%3C/svg%3E%0A); background-size: 80%; background-repeat:no-repeat; background-position: center; border: none; outline: none; transition: transform 0.125s ease-out } .babylonVRicon:hover { transform: scale(1.05) } .babylonVRicon:active {background-color: rgba(51,51,51,1) } .babylonVRicon:focus {background-color: rgba(51,51,51,1) }.babylonVRicon.vrdisplaypresenting { background-image: none;} .vrdisplaypresenting::after { content: "EXIT"} .xr-error::after { content: "ERROR"}';
-        const style = document.createElement("style");
-        style.appendChild(document.createTextNode(css));
-        this.#wrapper.appendChild(style);
-    }
+        this.removeAttribute("loading-3d");
+        this.setAttribute("loaded-3d", "");
 
-    async #createXRExperience() {
-        if (this.#XRExperience) {
-            return true;
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
         }
+        this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
+    }
 
-        const sessionMode = "immersive-ar";
-        const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
-        if (!sessionSupported) {
-            console.info("PrefViewer: WebXR in mode AR is not supported");
-            return false;
-        }
+    /**
+     * Handles the start of a 2D loading operation.
+     * Updates loading state, sets attributes, and dispatches a "drawing-loading" event.
+     * @private
+     * @returns {void}
+     */
+    #on2DLoading() {
+        this.#isLoaded = false;
+        this.#isLoading = true;
 
-        try {
-            const ground = MeshBuilder.CreateGround("ground", { width: 1000, height: 1000 }, this.#scene);
-            ground.isVisible = false;
-
-            const options = {
-                floorMeshes: [ground],
-                uiOptions: {
-                    sessionMode: sessionMode,
-                    renderTarget: "xrLayer",
-                    referenceSpaceType: "local",
-                },
-                optionalFeatures: true,
-            };
-
-            this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
-
-            const featuresManager = this.#XRExperience.baseExperience.featuresManager;
-            featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
-                xrInput: this.#XRExperience.input,
-                floorMeshes: [ground],
-                timeToTeleport: 1500,
-            });
-
-            this.#XRExperience.baseExperience.sessionManager.onXRReady.add(() => {
-                // Set the initial position of xrCamera: use nonVRCamera, which contains a copy of the original this.#scene.activeCamera before entering XR
-                this.#XRExperience.baseExperience.camera.setTransformationFromNonVRCamera(this.#XRExperience.baseExperience._nonVRCamera);
-                this.#XRExperience.baseExperience.camera.setTarget(Vector3.Zero());
-                this.#XRExperience.baseExperience.onInitialXRPoseSetObservable.notifyObservers(this.#XRExperience.baseExperience.camera);
-            });
-
-            this.#addStylesToARButton();
-        } catch (error) {
-            console.warn("PrefViewer: failed to create WebXR experience", error);
-            this.#XRExperience = null;
-        }
-    }
+        this.removeAttribute("loaded-2d");
+        this.setAttribute("loading-2d", "");
 
-    #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
-
-    #createCamera() {
-        this.#camera = new ArcRotateCamera("camera", (3 * Math.PI) / 2, Math.PI * 0.47, 10, Vector3.Zero(), this.#scene);
-        this.#camera.upperBetaLimit = Math.PI * 0.48;
-        this.#camera.lowerBetaLimit = Math.PI * 0.25;
-        this.#camera.lowerRadiusLimit = 5;
-        this.#camera.upperRadiusLimit = 20;
-        this.#camera.metadata = { locked: false };
-        this.#camera.attachControl(this.#canvas, true);
-        this.#scene.activeCamera = this.#camera;
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+        };
+        this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
     }
 
-    #createLights() {
-        this.#initEnvironmentTexture();
-
-        if (this.#scene.environmentTexture) {
-            return true;
-        }
+    /**
+     * Handles the completion of a 2D loading operation.
+     * Updates loading state, sets attributes, dispatches a "drawing-loaded" event, and processes the next task.
+     * @private
+     * @param {object} [detail] - Optional details to include in the event.
+     * @returns {void}
+     */
+    #on2DLoaded(detail) {
+        this.#isLoaded = true;
+        this.#isLoading = false;
 
-        // 1) Stronger ambient fill
-        this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#hemiLight.intensity = 0.6;
-
-        // 2) Directional light from the front-right, angled slightly down
-        this.#dirLight = new DirectionalLight("dirLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
-        this.#dirLight.intensity = 0.6;
-
-        // // 3) Soft shadows
-        this.#shadowGen = new ShadowGenerator(1024, this.#dirLight);
-        this.#shadowGen.useBlurExponentialShadowMap = true;
-        this.#shadowGen.blurKernel = 16;
-        this.#shadowGen.darkness = 0.5;
-
-        // 4) Camera‐attached headlight
-        this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
-        this.#cameraLight.parent = this.#camera;
-        this.#cameraLight.intensity = 0.3;
-    }
+        this.removeAttribute("loading-2d");
+        this.setAttribute("loaded-2d", "");
 
-    #initEnvironmentTexture() {
-        return false;
-        if (this.#scene.environmentTexture) {
-            return true;
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
         }
-        const hdrTextureURI = "../src/environments/noon_grass.hdr";
-        const hdrTexture = new HDRCubeTexture(hdrTextureURI, this.#scene, 128);
-        hdrTexture.gammaSpace = true;
-        hdrTexture._noMipmap = false;
-        hdrTexture.level = 2.0;
-        this.#scene.environmentTexture = hdrTexture;
+        this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
     }
 
-    #initIBLShadows() {
-        if (!this.#scene.environmentTexture) {
-            return false;
-        }
-
-        let createIBLShadowPipeline = function (scene) {
-            const pipeline = new IblShadowsRenderPipeline(
-                "iblShadowsPipeline",
-                scene,
-                {
-                    resolutionExp: 7,
-                    sampleDirections: 2,
-                    ssShadowsEnabled: true,
-                    shadowRemanence: 0.8,
-                    triPlanarVoxelization: true,
-                    shadowOpacity: 0.8,
-                },
-                [scene.activeCamera]
-            );
-            pipeline.allowDebugPasses = false;
-            pipeline.gbufferDebugEnabled = true;
-            pipeline.importanceSamplingDebugEnabled = false;
-            pipeline.voxelDebugEnabled = false;
-            pipeline.voxelDebugDisplayMip = 1;
-            pipeline.voxelDebugAxis = 2;
-            pipeline.voxelTracingDebugEnabled = false;
-            pipeline.spatialBlurPassDebugEnabled = false;
-            pipeline.accumulationPassDebugEnabled = false;
-            return pipeline;
+    /**
+     * Handles the "drawing-zoom-changed" event from the 2D viewer component.
+     * Dispatches a custom "drawing-zoom-changed" event from the PrefViewer element, forwarding the event detail to external listeners.
+     * @private
+     * @param {CustomEvent} event - The original zoom change event from the 2D viewer.
+     * @returns {void}
+     */
+    #on2DZoomChanged(event) {
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail: event.detail,
         };
-
-        let iblShadowsPipeline = createIBLShadowPipeline(this.#scene);
-
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__") || mesh.name === "hdri") {
-                return false;
-            }
-            iblShadowsPipeline.addShadowCastingMesh(mesh);
-            iblShadowsPipeline.updateSceneBounds();
-        });
-
-        this.#scene.materials.forEach((material) => {
-            iblShadowsPipeline.addShadowReceivingMaterial(material);
-        });
+        this.dispatchEvent(new CustomEvent("drawing-zoom-changed", customEventOptions));
     }
 
-    #initShadows() {
-        if (!this.#scene.environmentTexture) {
-            this.#initIBLShadows();
-            return true;
+    /**
+     * Processes a configuration object by loading it into the 3D component.
+     * Dispatches loading events and processes the next task when finished.
+     * @private
+     * @param {object} config - The configuration object to process.
+     * @returns {void}
+     */
+    #processConfig(config) {
+        if (!this.#component3D) {
+            return;
         }
 
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__")) {
-                return false;
-            }
-            mesh.receiveShadows = true;
-            if (!mesh.name === "hdri") {
-                this.#shadowGen.addShadowCaster(mesh, true);
-            }
+        this.#on3DLoading();
+        this.#component3D.load(config).then((detail) => {
+            this.#on3DLoaded(detail);
+            this.#processNextTask();
         });
     }
 
-    #setMaxSimultaneousLights() {
-        let lightsNumber = 1; // Como mínimo una luz correspondiente a la textura de environmentTexture
-        this.#scene.lights.forEach((light) => {
-            if (light.isEnabled()) {
-                ++lightsNumber;
-            }
-        });
-        if (this.#scene.materials) {
-            this.#scene.materials.forEach((material) => (material.maxSimultaneousLights = lightsNumber));
+    /**
+     * Processes a drawing object by loading it into the 2D component.
+     * Processes the next task when finished.
+     * @private
+     * @param {object} drawing - The drawing object to process.
+     * @returns {void}
+     */
+    #processDrawing(drawing) {
+        if (!this.#component2D) {
+            return;
         }
-    }
-
-    #setupInteraction() {
-        this.#canvas.addEventListener("wheel", (event) => {
-            if (!this.#scene || !this.#camera) {
-                return false;
-            }
-            //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
-            //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
-            if (!this.#scene.activeCamera.metadata?.locked) {
-                this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
-            }
-            event.preventDefault();
-        });
-    }
-
-    #disposeEngine() {
-        if (!this.#engine) return;
-        this.#engine.dispose();
-        this.#engine = this.#scene = this.#camera = null;
-        this.#hemiLight = this.#dirLight = this.#cameraLight = null;
-        this.#shadowGen = null;
-    }
-
-    // Utility methods for loading gltf/glb
-    async #getServerFileDataHeader(uri) {
-        return new Promise((resolve) => {
-            const xhr = new XMLHttpRequest();
-            xhr.open("HEAD", uri, true);
-            xhr.responseType = "blob";
-            xhr.onload = () => {
-                if (xhr.status === 200) {
-                    const size = parseInt(xhr.getResponseHeader("Content-Length"));
-                    const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
-                    resolve([size, timeStamp]);
-                } else {
-                    resolve([0, null]);
-                }
-            };
-            xhr.onerror = () => {
-                resolve([0, null]);
-            };
-            xhr.send();
-        });
-    }
 
-    #transformUrl(url) {
-        return new Promise((resolve) => {
-            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
+        this.#on2DLoading();
+        this.#component2D.load(drawing).then((detail) => {
+            this.#on2DLoaded(detail);
+            this.#processNextTask();
         });
     }
 
-    #decodeBase64(base64) {
-        const [, payload] = base64.split(",");
-        const raw = payload || base64;
-        let decoded = "";
-        let blob = null;
-        let extension = null;
-        let size = raw.length;
-        try {
-            decoded = atob(raw);
-        } catch {
-            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 };
-    }
-
-    async #initStorage(db, table) {
-        if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
-            return true;
-        }
-        await initDb(db, table);
-    }
-
-    // Methods for managing Asset Containers
-    #setVisibilityOfWallAndFloorInModel(show) {
-        if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
-            return false;
-        }
-        show = show !== undefined ? show : this.#data.containers.environment.visible;
-        const prefixes = Object.values(this.#data.options.materials).map((material) => material.prefix);
-        this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))).forEach((mesh) => mesh.setEnabled(show));
-    }
-
-    #setOptionsMaterial(optionMaterial) {
-        if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
-            return false;
-        }
-
-        const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
-        if (!material) {
-            return false;
-        }
-
-        const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
-            containers.push(this.#data.containers.model.assetContainer);
-        }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
-            containers.push(this.#data.containers.environment.assetContainer);
-        }
-        if (containers.length === 0) {
-            return false;
-        }
-
-        let someSetted = false;
-        containers.forEach((container) =>
-            container.meshes
-                .filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix))
-                .forEach((mesh) => {
-                    mesh.material = material;
-                    someSetted = true;
-                })
-        );
-
-        if (someSetted) {
-            optionMaterial.changed.success = true;
-        } else if (optionMaterial.changed.pending) {
-            optionMaterial.value = optionMaterial.changed.value;
-            optionMaterial.changed.success = false;
-        }
-
-        return someSetted;
-    }
-
-    #setOptionsMaterials() {
-        let someSetted = false;
-        Object.values(this.#data.options.materials).forEach((material) => {
-            let settedMaterial = this.#setOptionsMaterial(material);
-            someSetted = someSetted || settedMaterial;
-        });
-        return someSetted;
+    /**
+     * Processes an environment (scene) object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} environment - The environment/scene object to process.
+     * @returns {void}
+     */
+    #processEnvironment(environment) {
+        const config = {};
+        config.scene = environment;
+        this.#processConfig(config);
     }
 
-    #setOptionsCamera() {
-        if (!this.#data.options.camera.value && !this.#data.options.camera.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
-            return false;
-        }
-
-        let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
-        if (!camera) {
-            if (this.#data.options.camera.changed.value && this.#data.options.camera.changed.value !== this.#data.options.camera.value) {
-                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || null;
-            }
-            if (camera) {
-                camera.metadata = { locked: this.#data.options.camera.changed.locked };
-                this.#data.options.camera.value = this.#data.options.camera.changed.value;
-                this.#data.options.camera.locked = this.#data.options.camera.changed.locked;
-                this.#data.options.camera.changed.success = false;
-            } else {
-                camera = this.#camera;
-                this.#data.options.camera.value = null;
-                this.#data.options.camera.locked = this.#camera.metadata.locked;
-                this.#data.options.camera.changed.success = false;
-            }
-        } else {
-            camera.metadata = { locked: this.#data.options.camera.locked };
-            if (this.#data.options.camera.changed.pending) {
-                this.#data.options.camera.changed.success = true;
-            }
-        }
-        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
-            camera.attachControl(this.#canvas, true);
-        }
-        this.#scene.activeCamera = camera;
-        return true;
+    /**
+     * Processes a materials object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} materials - The materials object to process.
+     * @returns {void}
+     */
+    #processMaterials(materials) {
+        const config = {};
+        config.materials = materials;
+        this.#processConfig(config);
     }
 
-    #addContainer(container) {
-        if (!container.assetContainer || container.visible || !container.show) {
-            return false;
-        }
-
-        container.assetContainer.addAllToScene();
-        container.visible = true;
-        return true;
+    /**
+     * Processes a model object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} model - The model object to process.
+     * @returns {void}
+     */
+    #processModel(model) {
+        const config = {};
+        config.model = model;
+        this.#processConfig(config);
     }
 
-    #removeContainer(container) {
-        if (!container.assetContainer || !container.visible) {
-            return false;
+    /**
+     * Processes viewer options by loading them into the 3D component.
+     * Dispatches loading events and processes the next task.
+     * @private
+     * @param {object} options - The options object to process.
+     * @returns {void}
+     */
+    #processOptions(options) {
+        if (!this.#component3D) {
+            return;
         }
 
-        container.assetContainer.removeAllFromScene();
-        container.visible = false;
-        return true;
-    }
-
-    #replaceContainer(container, newAssetContainer) {
-        if (container.assetContainer) {
-            this.#removeContainer(container);
-            container.assetContainer.dispose();
-            container.assetContainer = null;
-        }
-        this.#scene.getEngine().releaseEffects();
-        container.assetContainer = newAssetContainer;
-        this.#addContainer(container);
-        return true;
+        this.#on3DLoading();
+        const detail = this.#component3D.setOptions(options);
+        this.#on3DLoaded(detail);
+        this.#processNextTask();
     }
 
     /**
-     * Replace internal URIs in a glTF AssetContainer JSON with URLs pointing to files stored in IndexedDB.
-     * @param {JSON} assetContainerJSON AssetContainer in glTF (JSON) (modified in-place).
-     * @param {URL} [assetContainerURL] Optional URL of the AssetContainer. Used as the base path to resolve relative URIs.
-     * @returns {Promise<void>} Resolves when all applicable URIs have been resolved/replaced.
-     * @description
-     * - When provided, assetContainerURL is used as the base path for other scene files (binary buffers and all images).
-     *   If not provided (null/undefined), it is because it is the assetContainer of the model or materials whose URIs are absolute.
-     * - According to the glTF 2.0 spec, only items inside the "buffers" and "images" arrays may have a "uri" property.
-     * - Data URIs (embedded base64) are ignored and left unchanged.
-     * - Matching asset URIs are normalized (backslashes converted to forward slashes) and passed to the FileStorage layer
-     *   to obtain a usable URL (object URL or cached URL).
-     * - The function performs replacements in parallel and waits for all lookups to complete.
-     * - The JSON is updated in-place with the resolved URLs.
-     * @see {@link https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#uris|glTF™ 2.0 Specification - URIs}
+     * Processes visibility configuration for the model and scene.
+     * Shows or hides the model and/or scene based on the config, then processes the next task.
+     * @private
+     * @param {object} config - The visibility configuration object.
+     * @returns {void}
      */
-    async #replaceSceneURIAsync(assetContainerJSON, assetContainerURL) {
-        if (!assetContainerJSON) {
+    #processVisibility(config) {
+        if (!this.#component3D) {
             return;
         }
-
-        let sceneURLBase = assetContainerURL;
-
-        if (typeof assetContainerURL === "string") {
-            const lastIndexOfSlash = assetContainerURL.lastIndexOf("/");
-            if (lastIndexOfSlash !== -1) {
-                sceneURLBase = assetContainerURL.substring(0, lastIndexOfSlash + 1);
-            }
-        }
-
-        const arrayOfAssetsWithURI = [];
-
-        /**
-         * Check whether a value is a syntactically absolute URL.
-         * @param {string} url Value to test.
-         * @returns {boolean} True when `url` is a string that can be parsed by the global URL constructor (i.e. a syntactically absolute URL); false otherwise.
-         * @description
-         *  - Returns false for non-string inputs.
-         *  - Uses the browser's URL parser, so protocol-relative URLs ("//host/...") and relative paths are considered non-absolute.
-         *  - This is a syntactic check only — it does not perform network requests or validate reachability/CORS.
-         */
-        var isURLAbsolute = function (url) {
-            if (typeof url !== "string") {
-                return false;
-            }
-            try {
-                new URL(url);
-                return true;
-            } catch {
-                return false;
-            }
-        };
-
-        /**
-         * Collect asset entries that have an external URI (non-data URI) and store a normalized absolute/relative-resolved URI for later replacement.
-         * @param {Object} asset glTF asset entry (an element of buffers[] or images[]).
-         * @param {number} index Index of the asset within its parent array.
-         * @param {Array}  array Reference to the parent array (buffers or images).
-         * @returns {void} Side-effect: pushes a record into arrayOfAssetsWithURI when applicable { parent: <array>, index: <number>, uri: <string> }.
-         */
-        var saveAssetData = function (asset, index, array) {
-            if (asset.uri && !asset.uri.startsWith("data:")) {
-                const assetData = {
-                    parent: array,
-                    index: index,
-                    uri: `${!isURLAbsolute(asset.uri) && sceneURLBase ? sceneURLBase : ""}${asset.uri}`.replace(/\\\\|\\|\/\\/g, "/"),
-                };
-                arrayOfAssetsWithURI.push(assetData);
-            }
-        };
-
-        if (assetContainerJSON.buffers) {
-            assetContainerJSON.buffers.forEach((asset, index, array) => saveAssetData(asset, index, array));
+        const showModel = config.model?.visible;
+        const showScene = config.scene?.visible;
+        if (showModel !== undefined) {
+            showModel ? this.#component3D.showModel() : this.#component3D.hideModel();
         }
-        if (assetContainerJSON.images) {
-            assetContainerJSON.images.forEach((asset, index, array) => saveAssetData(asset, index, array));
+        if (showScene !== undefined) {
+            showScene ? this.#component3D.showEnvironment() : this.#component3D.hideEnvironment();
         }
-
-        // 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;
-            }
-        });
-        await Promise.all(promisesArray);
+        this.#processNextTask();
     }
 
-    async #loadAssetContainer(container) {
-        let storage = container?.storage;
-
-        if (!storage) {
-            return false;
-        }
-
-        let source = storage.url || null;
-
-        if (storage.db && storage.table && storage.id) {
-            await this.#initStorage(storage.db, storage.table);
-            const object = await loadModel(storage.id, storage.table);
-            source = object.data;
-            if (object.timeStamp === container.timeStamp) {
-                container.changed = { pending: false, success: false };
-                return false;
-            } else {
-                container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
-            }
-        }
-
-        if (!source) {
-            return false;
-        }
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
 
-        let file = null;
-
-        let { blob, extension, size } = this.#decodeBase64(source);
-        if (blob && extension) {
-            if ((container.name === "model" || container.name === "materials") && extension === ".gltf") {
-                const assetContainerJSON = JSON.parse(await blob.text());
-                await this.#replaceSceneURIAsync(assetContainerJSON, source);
-                source = `data:${JSON.stringify(assetContainerJSON)}`;
-            } else {
-                file = new File([blob], `${container.name}${extension}`, {
-                    type: blob.type,
-                });
-            }
-            if (!container.changed.pending) {
-                if (container.timeStamp === null && container.size === size) {
-                    container.changed = { pending: false, success: false };
-                    return false;
-                } else {
-                    container.changed = { pending: true, size: size, success: false, timeStamp: null };
-                }
-            }
+    /**
+     * Sets the viewer mode to "2d" or "3d" and updates component visibility accordingly.
+     * @public
+     * @param {string} [mode=this.#mode] - The mode to set ("2d" or "3d").
+     * @returns {void}
+     */
+    setMode(mode = this.#mode) {
+        if (mode !== "2d" && mode !== "3d") {
+            console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
+            mode = this.#mode;
+        }
+        this.#mode = mode;
+        if (mode === "2d") {
+            this.#component3D?.hide();
+            this.#component2D?.show();
         } else {
-            const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
-            extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-            let [fileSize, fileTimeStamp] = [await this.#fileStorage.getSize(source), await this.#fileStorage.getTimeStamp(source)];
-            if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
-                container.changed = { pending: false, success: false };
-                return false;
-            } else {
-                container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
-                if (extension === ".gltf") {
-                    const assetContainerBlob = await this.#fileStorage.getBlob(source);
-                    const assetContainerJSON = JSON.parse(await assetContainerBlob.text());
-                    await this.#replaceSceneURIAsync(assetContainerJSON, source);
-                    source = `data:${JSON.stringify(assetContainerJSON)}`;
-                } else {
-                    source = await this.#fileStorage.getURL(source);
-                }
-            }
+            this.#component3D?.show();
+            this.#component2D?.hide();
         }
-
-        // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
-        let options = {
-            pluginExtension: extension,
-            pluginOptions: {
-                gltf: {
-                    compileMaterials: true,
-                    loadAllMaterials: true,
-                    loadOnlyMaterials: container.name === "materials",
-                    //preprocessUrlAsync: this.#transformUrl,
-                },
-            },
-        };
-
-        return LoadAssetContainerAsync(file || source, this.#scene, options);
-    }
-
-    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        this.#engine.stopRenderLoop(this.#renderLoop);
-
-        const promiseArray = [];
-        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
-        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
-        promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
-
-        Promise.allSettled(promiseArray)
-            .then((values) => {
-                const modelContainer = values[0];
-                const environmentContainer = values[1];
-                const materialsContainer = values[2];
-
-                if (modelContainer.status === "fulfilled" && modelContainer.value) {
-                    modelContainer.value.lights = [];
-                    this.#replaceContainer(this.#data.containers.model, modelContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
-                } else {
-                    if (this.#data.containers.model.assetContainer && this.#data.containers.model.show !== this.#data.containers.model.visible) {
-                        this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
-                    }
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
-                }
-
-                if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
-                    this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
-                } else {
-                    if (this.#data.containers.environment.assetContainer && this.#data.containers.environment.show !== this.#data.containers.environment.visible) {
-                        this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
-                    }
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
-                }
-
-                if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
-                    this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
-                } else {
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
-                }
-
-                this.#setOptionsMaterials();
-                this.#setOptionsCamera();
-                this.#setVisibilityOfWallAndFloorInModel();
-            })
-            .catch((error) => {
-                this.loaded = true;
-                console.error("PrefViewer: failed to load model", error);
-                this.dispatchEvent(
-                    new CustomEvent("scene-error", {
-                        bubbles: true,
-                        cancelable: false,
-                        composed: true,
-                        detail: { error: error },
-                    })
-                );
-            })
-            .finally(async () => {
-                this.#setMaxSimultaneousLights();
-                this.#initShadows();
-                await this.#setStatusLoaded();
-            });
-    }
-
-    // Tasks
-    #addTaskToQueue(value, type) {
-        this.#taskQueue.push(new PrefViewerTask(value, type));
-        if (this.initialized && !this.loading) {
-            this.#processNextTask();
+        if (this.getAttribute("mode") !== mode) {
+            this.setAttribute("mode", mode);
         }
     }
 
-    #processNextTask() {
-        if (!this.#taskQueue.length) {
-            return false;
-        }
-        const task = this.#taskQueue[0];
-        this.#taskQueue.shift();
-        switch (task.type) {
-            case PrefViewerTask.Types.Config:
-                this.#processConfig(task.value);
-                break;
-            case PrefViewerTask.Types.Model:
-                this.#processModel(task.value);
-                break;
-            case PrefViewerTask.Types.Environment:
-                this.#processEnvironment(task.value);
-                break;
-            case PrefViewerTask.Types.Materials:
-                this.#processMaterials(task.value);
-                break;
-            case PrefViewerTask.Types.Options:
-                this.#processOptions(task.value);
-                break;
-        }
-    }
-
-    #processConfig(config) {
-        this.#setStatusLoading();
-
-        // Containers
-        const loadModel = !!config.model?.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? config.model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
-
-        const loadEnvironment = !!config.scene?.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? config.scene.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
-
-        const loadMaterials = !!config.materials?.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? config.materials.storage : this.#data.containers.materials.storage;
-
-        // Options
-        if (config.options) {
-            this.#checkCameraChanged(config.options);
-            this.#checkMaterialsChanged(config.options);
-        }
-
-        this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
-    }
-
-    #processModel(model) {
-        this.#setStatusLoading();
-
-        const loadModel = !!model.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
-
-        this.initialized && this.#loadContainers(loadModel, false, false);
-    }
-
-    #processEnvironment(environment) {
-        this.#setStatusLoading();
-
-        const loadEnvironment = !!environment.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? environment.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = environment.visible !== undefined ? environment.visible : this.#data.containers.environment.show;
-
-        this.#loadContainers(false, loadEnvironment, false);
-    }
-
-    #processMaterials(materials) {
-        this.#setStatusLoading();
-
-        const loadMaterials = !!materials.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
-
-        this.#loadContainers(false, false, loadMaterials);
-    }
-
-    async #processOptions(options) {
-        this.#setStatusLoading();
-
-        let someSetted = false;
-        if (this.#checkCameraChanged(options)) {
-            someSetted = someSetted || this.#setOptionsCamera();
-        }
-        if (this.#checkMaterialsChanged(options)) {
-            someSetted = someSetted || this.#setOptionsMaterials();
-        }
-
-        await this.#setStatusLoaded();
-
-        return someSetted;
-    }
-
-    // Public Methods
+    /**
+     * Loads a configuration object or JSON string and adds it to the task queue.
+     * If the config contains a drawing, adds a drawing task as well.
+     * @public
+     * @param {object|string} config - Configuration object or JSON string.
+     * @returns {boolean|void} Returns false if config is invalid; otherwise void.
+     */
     loadConfig(config) {
         config = typeof config === "string" ? JSON.parse(config) : config;
         if (!config) {
             return false;
         }
+        if (config.drawing) {
+            this.#addTaskToQueue(config.drawing, "drawing");
+        }
         this.#addTaskToQueue(config, "config");
     }
 
+    /**
+     * Loads a model object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} model - Model object or JSON string.
+     * @returns {boolean|void} Returns false if model is invalid; otherwise void.
+     */
     loadModel(model) {
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
@@ -1175,6 +518,12 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(model, "model");
     }
 
+    /**
+     * Loads a scene/environment object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} scene - Scene object or JSON string.
+     * @returns {boolean|void} Returns false if scene is invalid; otherwise void.
+     */
     loadScene(scene) {
         scene = typeof scene === "string" ? JSON.parse(scene) : scene;
         if (!scene) {
@@ -1183,6 +532,12 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(scene, "environment");
     }
 
+    /**
+     * Loads materials object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} materials - Materials object or JSON string.
+     * @returns {boolean|void} Returns false if materials are invalid; otherwise void.
+     */
     loadMaterials(materials) {
         materials = typeof materials === "string" ? JSON.parse(materials) : materials;
         if (!materials) {
@@ -1191,6 +546,26 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(materials, "materials");
     }
 
+    /**
+     * Loads a drawing object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} drawing - Drawing object or JSON string.
+     * @returns {boolean|void} Returns false if drawing is invalid; otherwise void.
+     */
+    loadDrawing(drawing) {
+        drawing = typeof drawing === "string" ? JSON.parse(drawing) : drawing;
+        if (!drawing) {
+            return false;
+        }
+        this.#addTaskToQueue(drawing, "drawing");
+    }
+
+    /**
+     * Sets viewer options from an object or JSON string and adds them to the task queue.
+     * @public
+     * @param {object|string} options - Options object or JSON string.
+     * @returns {boolean|void} Returns false if options are invalid; otherwise void.
+     */
     setOptions(options) {
         options = typeof options === "string" ? JSON.parse(options) : options;
         if (!options) {
@@ -1199,55 +574,204 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(options, "options");
     }
 
+    /**
+     * Shows the 3D model by setting its visibility to true.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     showModel() {
-        this.#data.containers.model.show = true;
-        this.#addContainer(this.#data.containers.model);
+        const config = { model: { visible: true } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+    /**
+     * Hides the 3D model by setting its visibility to false.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     hideModel() {
-        this.#data.containers.model.show = false;
-        this.#removeContainer(this.#data.containers.model);
+        const config = { model: { visible: false } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+    /**
+     * Shows the scene/environment by setting its visibility to true.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     showScene() {
-        this.#data.containers.environment.show = true;
-        this.#addContainer(this.#data.containers.environment);
-        this.#setVisibilityOfWallAndFloorInModel();
+        const config = { scene: { visible: true } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+    /**
+     * Hides the scene/environment by setting its visibility to false.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     hideScene() {
-        this.#data.containers.environment.show = false;
-        this.#removeContainer(this.#data.containers.environment);
-        this.#setVisibilityOfWallAndFloorInModel();
+        const config = { scene: { visible: false } };
+        this.#addTaskToQueue(config, "visibility");
+    }
+
+    /**
+     * Centers the 2D drawing view in the viewer.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomCenter() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
+        }
+        this.#component2D.zoomCenter();
+    }
+
+    /**
+     * Zooms the 2D drawing to fit all content within the viewer.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomExtentsAll() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
+        }
+        this.#component2D.zoomExtentsAll();
+    }
+
+    /**
+     * Zooms in on the 2D drawing.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomIn() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
+        }
+        this.#component2D.zoomIn();
+    }
+
+    /**
+     * Zooms out of the 2D drawing.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomOut() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
+        }
+        this.#component2D.zoomOut();
     }
 
+    /**
+     * Initiates download of the current 3D model in GLB format.
+     * @public
+     * @returns {void}
+     */
     downloadModelGLB() {
-        const fileName = "model";
-        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelGLB();
     }
 
+    /**
+     * Initiates download of the current 3D model in USDZ format.
+     * @public
+     * @returns {void}
+     */
     downloadModelUSDZ() {
-        const fileName = "model";
-        USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
-            }
-        });
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelUSDZ();
     }
 
+    /**
+     * Initiates download of both the 3D model and scene in USDZ format.
+     * @public
+     * @returns {void}
+     */
     downloadModelAndSceneUSDZ() {
-        const fileName = "scene";
-        USDZExportAsync(this.#scene).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
-            }
-        });
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneUSDZ();
     }
 
+    /**
+     * Initiates download of both the 3D model and scene in GLB format.
+     * @public
+     * @returns {void}
+     */
     downloadModelAndSceneGLB() {
-        const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneGLB();
+    }
+
+    /**
+     * Indicates whether the viewer has been initialized.
+     * @public
+     * @returns {boolean} True if initialized; otherwise, false.
+     */
+    get isInitialized() {
+        return this.#isInitialized;
+    }
+
+    /**
+     * Indicates whether the viewer has finished loading.
+     * @public
+     * @returns {boolean} True if loaded; otherwise, false.
+     */
+    get isLoaded() {
+        return this.#isLoaded;
+    }
+
+    /**
+     * Indicates whether the viewer is currently loading.
+     * @public
+     * @returns {boolean} True if loading; otherwise, false.
+     */
+    get isLoading() {
+        return this.#isLoading;
+    }
+
+    /**
+     * Indicates whether the viewer is currently in 2D mode.
+     * @public
+     * @returns {boolean} True if the viewer is in 2D mode; otherwise, false.
+     */
+    get isMode2D() {
+        return this.#mode === "2d";
+    }
+
+    /**
+     * Indicates whether the viewer is currently in 3D mode.
+     * @public
+     * @returns {boolean} True if the viewer is in 3D mode; otherwise, false.
+     */
+    get isMode3D() {
+        return this.#mode === "3d";
     }
 }
 
+customElements.define("pref-viewer-2d", PrefViewer2D);
+customElements.define("pref-viewer-3d", PrefViewer3D);
 customElements.define("pref-viewer", PrefViewer);