@preference-sl/pref-viewer 2.11.0-beta.7 → 2.11.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.7",
+  "version": "2.11.0-beta.9",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -40,7 +40,8 @@
     "@panzoom/panzoom": "^4.6.0",
     "babylonjs-gltf2interface": "^8.36.1",
     "idb": "^8.0.3",
-    "is-svg": "^6.1.0"
+    "is-svg": "^6.1.0",
+    "jszip": "^3.10.1"
   },
   "devDependencies": {
     "esbuild": "^0.25.10",

package/src/babylonjs-controller.js

@@ -1,4 +1,4 @@
-import { ArcRotateCamera, AssetContainer, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } from "@babylonjs/core";
+import { ArcRotateCamera, AssetContainer, Camera, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } from "@babylonjs/core";
 import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
 import "@babylonjs/loaders";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
@@ -16,7 +16,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - Handles loading, replacing, and disposing of 3D models, environments, and materials.
  *  - Configures advanced rendering features such as Draco mesh compression, shadows, and image-based lighting (IBL).
  *  - Integrates Babylon.js WebXR experience for augmented reality (AR) support.
- *  - Provides methods for downloading models and scenes in GLB and USDZ formats.
+ *  - Provides methods for downloading models and scenes in GLB, GLTF, and USDZ formats.
  *  - Manages camera and material options, container visibility, and user interactions.
  *  - Observes canvas resize events and updates the engine accordingly.
  *
@@ -26,7 +26,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - Load assets: await controller.load();
  *  - Set camera/material options: controller.setCameraOptions(), controller.setMaterialOptions();
  *  - Control visibility: controller.setContainerVisibility(name, show);
- *  - Download assets: controller.downloadModelGLB(), controller.downloadModelUSDZ(), etc.
+ *  - Download assets: controller.downloadModelGLB(), controller.downloadModelGLTF(), controller.downloadModelUSDZ(), controller.downloadModelAndSceneGLB(), controller.downloadModelAndSceneGLTF(), controller.downloadModelAndSceneUSDZ();
  *  - Disable rendering: controller.disable();
  *
  * Public Methods:
@@ -36,20 +36,29 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - setCameraOptions(): Applies camera options from configuration.
  *  - setMaterialOptions(): Applies material options from configuration.
  *  - setContainerVisibility(name, show): Shows or hides a container by name.
- *  - downloadModelGLB(), downloadModelUSDZ(), downloadModelAndSceneGLB(), downloadModelAndSceneUSDZ(): Downloads assets.
+ *  - downloadGLB(content): Downloads the current scene, model, or environment as a GLB file.
+ *  - downloadGLTF(content): Downloads the current scene, model, or environment as a glTF ZIP file.
+ *  - downloadUSDZ(content): Downloads the current scene, model, or environment as a USDZ file.
  *
  * Private Methods:
  *  - #configureDracoCompression(): Sets up Draco mesh compression.
+ *  - #renderLoop(): Babylon.js render loop callback.
+ *  - #addStylesToARButton(): Styles AR button.
+ *  - #createXRExperience(): Initializes WebXR AR experience.
  *  - #createCamera(), #createLights(), #initializeEnvironmentTexture(), #initializeIBLShadows(), #initializeShadows(): Scene setup.
- *  - #setupInteraction(): Sets up canvas interaction handlers.
+ *  - #setMaxSimultaneousLights(): Updates max simultaneous lights for materials.
+ *  - #enableInteraction(), #disableInteraction(): Canvas interaction handlers.
  *  - #disposeEngine(): Disposes engine and resources.
+ *  - #onMouseWheel(event), #onKeyUp(event): Canvas event handlers.
  *  - #setOptionsMaterial(), #setOptions_Materials(), #setOptions_Camera(): Applies material/camera options.
  *  - #findContainerByName(), #addContainer(), #removeContainer(), #replaceContainer(): Container management.
+ *  - #getPrefViewer3DComponent(), #getPrefViewerComponent(): Custom element references.
+ *  - #updateVisibilityAttributeInComponents(): Updates parent visibility attributes.
  *  - #setVisibilityOfWallAndFloorInModel(): Controls wall/floor mesh visibility.
  *  - #stopRender(), #startRender(): Render loop control.
  *  - #loadAssetContainer(), #loadContainers(): Asset loading.
- *  - #addStylesToARButton(): Styles AR button.
- *  - #createXRExperience(): Initializes WebXR AR experience.
+ *  - #downloadZip(): Generates and downloads a ZIP file.
+ *  - #openDownloadDialog(): Opens the modal download dialog.
  *
  * Notes:
  *  - Designed for integration with PrefViewer and GLTFResolver.
@@ -393,23 +402,22 @@ export default class BabylonJSController {
 
     /**
      * Sets up interaction handlers for the Babylon.js canvas.
-     * Adds a wheel event listener to control camera zoom based on mouse wheel input.
-     * Prevents zoom if the active camera is locked.
      * @private
      * @returns {void}
      */
-    #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();
-        });
+    #enableInteraction() {
+        this.#canvas.addEventListener("wheel", this.#onMouseWheel.bind(this));
+        this.#canvas.addEventListener("keyup", this.#onKeyUp.bind(this));
+    }
+
+    /**
+     * Removes interaction event listeners from the Babylon.js canvas.
+     * @private
+     * @returns {void}
+     */
+    #disableInteraction() {
+        this.#canvas.removeEventListener("wheel", this.#onMouseWheel.bind(this));
+        this.#canvas.removeEventListener("keyup", this.#onKeyUp.bind(this));
     }
 
     /**
@@ -428,6 +436,43 @@ export default class BabylonJSController {
         this.#XRExperience = null;
     }
 
+    /**
+     * Handles mouse wheel events on the Babylon.js canvas for zooming the camera.
+     * @private
+     * @param {WheelEvent} event - The mouse wheel event.
+     * @returns {void|false}
+     */
+    #onMouseWheel(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();
+    }
+
+    /**
+     * Handles keyup events on the Babylon.js canvas for triggering model and scene downloads.
+     * @private
+     * @param {KeyboardEvent} event - The keyup event.
+     * @returns {void}
+     */
+    #onKeyUp(event) {
+        // CTRL + ALT + letter
+        if (event.ctrlKey && event.altKey && event.key !== undefined) {
+            switch (event.key.toLowerCase()) {
+                case "d":
+                    this.#openDownloadDialog();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
     /**
      * Applies material options from the configuration to the relevant meshes.
      * @private
@@ -584,6 +629,13 @@ export default class BabylonJSController {
      */
     #getPrefViewerComponent() {
         if (this.#prefViewer === undefined) {
+            if (this.#prefViewer3D === undefined) {
+                this.#getPrefViewer3DComponent();
+            }
+            if (!this.#prefViewer3D) {
+                this.#prefViewer = null;
+                return;
+            }
             const rootNode = this.#prefViewer3D ? this.#prefViewer3D.getRootNode().host : null;
             this.#prefViewer = rootNode && rootNode.nodeName === "PREF-VIEWER" ? rootNode : null;
         }
@@ -771,7 +823,7 @@ export default class BabylonJSController {
                 if (this.#babylonJSAnimationController) {
                     this.#babylonJSAnimationController.dispose();
                     this.#babylonJSAnimationController = null;
-                };
+                }
                 values.forEach((result) => {
                     const container = result.value ? result.value[0] : null;
                     const assetContainer = result.value ? result.value[1] : null;
@@ -788,7 +840,7 @@ export default class BabylonJSController {
                         container.state.setSuccess(false);
                     }
                 });
-                
+
                 this.#setOptions_Materials();
                 this.#setOptions_Camera();
                 this.#setVisibilityOfWallAndFloorInModel();
@@ -809,6 +861,122 @@ export default class BabylonJSController {
         return detail;
     }
 
+    /**
+     * Appends the current date and time to the provided name string in the format: name_YYYY-MM-DD_HH.mm.ss
+     * @private
+     * @param {string} name - The base name to which the date and time will be appended.
+     * @returns {string} The name with the appended date and time.
+     */
+    #addDateToName(name) {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = (now.getMonth() + 1).toString().padStart(2, "0");
+        const day = now.getDate().toString().padStart(2, "0");
+        const hours = now.getHours().toString().padStart(2, "0");
+        const minutes = now.getMinutes().toString().padStart(2, "0");
+        const seconds = now.getSeconds().toString().padStart(2, "0");
+        name = `${name}_${year}-${month}-${day}_${hours}.${minutes}.${seconds}`;
+        return name;
+    }
+
+    /**
+     * Generates and downloads a ZIP file with the specified folder name and files.
+     * @private
+     * @param {Object} files - An object where keys are file names and values are file contents.
+     * @param {string} [name="files"] - The name for the root folder inside the ZIP.
+     * @param {string} [comment=""] - A comment to include in the ZIP file.
+     * @param {boolean} [addDateInName=false] - Whether to append the current date/time to the folder name.
+     * @returns {void}
+     * @description
+     * Uses JSZip to create the ZIP and triggers a browser download.
+     */
+    #downloadZip(files, name = "files", comment = "", addDateInName = false) {
+        name = addDateInName ? this.#addDateToName(name) : name;
+
+        const JSZip = require("jszip");
+        const zip = new JSZip();
+        zip.comment = comment;
+
+        const rootFolder = zip.folder(name);
+        Object.keys(files).forEach((key) => {
+            rootFolder.file(key, files[key]);
+        });
+
+        zip.generateAsync({ type: "blob" }).then((content) => {
+            const zipName = `${name}.zip`;
+            const a = document.createElement("a");
+            const url = window.URL.createObjectURL(content);
+            a.href = url;
+            a.download = zipName;
+            a.click();
+            window.URL.revokeObjectURL(url);
+        });
+    }
+
+    /**
+     * Opens a modal dialog for downloading the 3D scene, model, or environment.
+     * @private
+     * @returns {void}
+     */
+    #openDownloadDialog() {
+        this.#getPrefViewerComponent();
+        if (!this.#prefViewer) {
+            return;
+        }
+
+        const header = "Download 3D Scene";
+        const content = `
+            <form slot="content" id="download-dialog-form" style="display:flex;flex-direction:column;gap:16px;">
+                <h4>Content</h4>
+                <div style="display:flex;flex-direction:row;gap:16px;margin:0 8px 0 8px;">
+                    <label><input type="radio" name="content" value="1"> Model</label>
+                    <label><input type="radio" name="content" value="2"> Scene</label>
+                    <label><input type="radio" name="content" value="0" checked> Both</label>
+                </div>
+                <h4>Format</h4>
+                <div style="display:flex;flex-direction:row;gap:16px;margin:0 8px 0 8px;">
+                <label><input type="radio" name="format" value="gltf" checked> glTF (ZIP)</label>
+                    <label><input type="radio" name="format" value="glb"> GLB</label>
+                    <label><input type="radio" name="format" value="usdz"> USDZ</label>
+                </div>
+            </form>`;
+        const footer = `
+            <button type="button" class="primary" id="download-dialog-download">Download</button>
+            <button type="button" id="download-dialog-cancel">Cancel</button>`;
+
+        const dialog = this.#prefViewer.openDialog(header, content, footer);
+
+        if (!dialog) {
+            return;
+        }
+
+        // Button event handlers
+        const form = dialog.querySelector("#download-dialog-form");
+        const downloadButton = dialog.querySelector("#download-dialog-download");
+        const cancelButton = dialog.querySelector("#download-dialog-cancel");
+
+        downloadButton.onclick = () => {
+            const contentValue = form.content.value;
+            const formatValue = form.format.value;
+            switch (formatValue) {
+                case "glb":
+                    this.downloadGLB(Number(contentValue));
+                    break;
+                case "gltf":
+                    this.downloadGLTF(Number(contentValue));
+                    break;
+                case "usdz":
+                    this.downloadUSDZ(Number(contentValue));
+                    break;
+            }
+            this.#prefViewer.closeDialog();
+        };
+
+        cancelButton.onclick = () => {
+            this.#prefViewer.closeDialog();
+        };
+    }
+
     /**
      * ---------------------------
      * Public methods
@@ -830,7 +998,7 @@ export default class BabylonJSController {
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
         this.#createCamera();
         this.#createLights();
-        this.#setupInteraction();
+        this.#enableInteraction();
         await this.#createXRExperience();
         this.#startRender();
         this.#canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
@@ -844,8 +1012,13 @@ export default class BabylonJSController {
      * @returns {void}
      */
     disable() {
-        this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
+        this.#disableInteraction();
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.dispose();
+            this.#babylonJSAnimationController = null;
+        }
+        this.#disposeEngine();
     }
 
     /**
@@ -909,50 +1082,105 @@ export default class BabylonJSController {
     }
 
     /**
-     * Initiates download of the current model as a GLB file.
+     * Downloads the current scene, model, or environment as a GLB file.
      * @public
+     * @param {number} content - 0 for full scene, 1 for model, 2 for environment.
      * @returns {void}
      */
-    downloadModelGLB() {
-        const fileName = "model";
-        GLTF2Export.GLBAsync(this.#containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+    downloadGLB(content = 0) {
+        let fileName = "";
+        let container = null;
+        switch (content) {
+            case 0:
+                fileName = "full-scene";
+                container = this.#scene;
+                break;
+            case 1:
+                fileName = "model";
+                container = this.#containers.model.assetContainer;
+                break;
+            case 2:
+                fileName = "scene";
+                container = this.#containers.environment.assetContainer;
+                break;
+            default:
+                break;
+        }
+        fileName = this.#addDateToName(fileName);
+        GLTF2Export.GLBAsync(container, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            if (glb) {
+                glb.downloadFiles();
+            }
+        });
     }
 
     /**
-     * Initiates download of the current model as a USDZ file.
+     * Downloads the current scene, model, or environment as a glTF ZIP file.
      * @public
+     * @param {number} content - 0 for full scene, 1 for model, 2 for environment.
      * @returns {void}
      */
-    downloadModelUSDZ() {
-        const fileName = "model";
-        USDZExportAsync(this.#containers.model.assetContainer).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+    downloadGLTF(content = 0) {
+        let fileName = "";
+        let container = null;
+        let comment = "";
+        switch (content) {
+            case 0:
+                fileName = "full-scene";
+                comment = "Export of the complete scene in glTF format, including the model and the environment.";
+                container = this.#scene;
+                break;
+            case 1:
+                fileName = "model";
+                comment = "Export of model scene in glTF format.";
+                container = this.#containers.model.assetContainer;
+                break;
+            case 2:
+                fileName = "scene";
+                comment = "Export of the environment scene in glTF format.";
+                container = this.#containers.environment.assetContainer;
+                break;
+            default:
+                break;
+        }
+        comment += "\nPrefViewer by Preference, S.L.\npreference.com\n";
+        GLTF2Export.GLTFAsync(container, fileName, { exportWithoutWaitingForScene: true }).then((gltf) => {
+            if (gltf?.files) {
+                this.#downloadZip(gltf.files, fileName, comment, true);
             }
         });
     }
 
     /**
-     * Initiates download of the entire scene (model and environment) as a USDZ file.
+     * Downloads the current scene, model, or environment as a USDZ file.
      * @public
+     * @param {number} content - 0 for full scene, 1 for model, 2 for environment.
      * @returns {void}
      */
-    downloadModelAndSceneUSDZ() {
-        const fileName = "scene";
-        USDZExportAsync(this.#scene).then((response) => {
+    downloadUSDZ(content = 0) {
+        let fileName = "";
+        let container = null;
+        switch (content) {
+            case 0:
+                fileName = "full-scene";
+                container = this.#scene;
+                break;
+            case 1:
+                fileName = "model";
+                container = this.#containers.model.assetContainer;
+                break;
+            case 2:
+                fileName = "scene";
+                container = this.#containers.environment.assetContainer;
+                break;
+            default:
+                break;
+        }
+        fileName = this.#addDateToName(fileName);
+        USDZExportAsync(container).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
             }
         });
     }
-
-    /**
-     * Initiates download of the entire scene (model and environment) as a GLB file.
-     * @public
-     * @returns {void}
-     */
-    downloadModelAndSceneGLB() {
-        const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
-    }
 }

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

@@ -0,0 +1,39 @@
+/* Variables */
+pref-viewer-2d {
+    --pref-viewer-2d-bg-color: #ffffff;
+    --pref-viewer-2d-svg-padding: 10px;
+}
+
+pref-viewer-2d[visible="true"] {
+    display: block;
+}
+
+pref-viewer-2d[visible="false"] {
+    display: none;
+}
+
+pref-viewer-2d {
+    grid-column: 1;
+    grid-row: 1;
+    overflow: hidden;
+    min-width: 0; 
+    min-height: 0;
+    align-self: stretch;
+    justify-self: stretch;
+    background: var(--pref-viewer-2d-bg-color);
+}
+
+pref-viewer-2d,
+pref-viewer-2d>div,
+pref-viewer-2d>div>svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+    outline: none;
+    box-sizing: border-box;
+}
+
+pref-viewer-2d>div>svg {
+    padding: var(--pref-viewer-2d-svg-padding);
+}

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

@@ -0,0 +1,28 @@
+pref-viewer-3d[visible="true"] {
+    display: block;
+}
+
+pref-viewer-3d[visible="false"] {
+    display: none;
+}
+
+pref-viewer-3d {
+    grid-column: 1;
+    grid-row: 1;
+    overflow: hidden;
+    min-width: 0; 
+    min-height: 0;
+    align-self: stretch;
+    justify-self: stretch;
+}
+
+pref-viewer-3d,
+pref-viewer-3d>div,
+pref-viewer-3d>div>canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+    outline: none;
+    box-sizing: border-box;
+}

package/src/css/pref-viewer-dialog.css

@@ -0,0 +1,105 @@
+/* Variables */
+pref-viewer-dialog {
+    --brand-color: #ff6700;
+    --dialog-general-space: 16px;
+    --dialog-bg-color: #ffffff;
+    --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
+    --dialog-border-color: #e7e7e7;
+    --dialog-border-radius: 8px;
+    --dialog-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+    --button-default-bg-color: #bbbbbb;
+    --button-default-bg-color-hover: #a1a1a1;
+    --button-primary-bg-color: color-mix(in oklab, var(--brand-color), white 25%);
+    --button-primary-bg-color-hover: var(--brand-color);
+    --button-border-radius: 4px;
+    --button-padding-horizontal: 16px;
+    --button-padding-vertical: 8px;
+}
+
+pref-viewer-dialog:not {
+    display: none;
+}
+
+pref-viewer-dialog[open] {
+    font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    grid-row: 1;
+    grid-column: 1;
+    overflow: hidden;
+    min-width: 0; 
+    min-height: 0;
+    align-self: stretch;
+    justify-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--dialog-backdrop-color);
+    position: relative;
+    z-index: 1000;
+}
+
+pref-viewer-dialog>.dialog-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background: var(--dialog-bg-color);
+    border: 1px solid var(--dialog-border-color);
+    border-radius: var(--dialog-border-radius);
+    box-shadow: var(--dialog-box-shadow);
+    padding: 0;
+    min-width: 320px;
+    max-width: 90%;
+    max-height: 90%;
+    overflow: auto;
+}
+
+pref-viewer-dialog .dialog-header {
+    padding: var(--dialog-general-space);
+    border-bottom: 1px solid var(--dialog-border-color);
+}
+
+pref-viewer-dialog .dialog-header h3 {
+    margin: 0;
+    font-weight: 500;
+    font-size: 1.1em;
+}
+
+pref-viewer-dialog .dialog-content {
+    padding: var(--dialog-general-space);
+}
+
+pref-viewer-dialog .dialog-content h4 {
+    margin: 0;
+    font-weight: 500;
+    font-size: 1.05em;
+}
+
+pref-viewer-dialog .dialog-footer {
+    border-top: 1px solid var(--dialog-border-color);
+    padding: var(--dialog-general-space);
+    display: flex;
+    gap: var(--dialog-general-space);
+    justify-content: stretch;
+}
+
+pref-viewer-dialog .dialog-footer button {
+    width: 100%;
+    font-size: 1em;
+    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
+    border-radius: var(--button-border-radius);
+    border: none;
+    background: var(--button-default-bg-color);
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+pref-viewer-dialog .dialog-footer button.primary {
+    background: var(--button-primary-bg-color);
+}
+
+pref-viewer-dialog .dialog-footer button:hover {
+    background: var(--button-default-bg-color-hover);
+}
+
+pref-viewer-dialog .dialog-footer button.primary:hover {
+    background: var(--button-primary-bg-color-hover);
+}

package/src/css/pref-viewer.css

@@ -0,0 +1,11 @@
+:host .pref-viewer-wrapper {
+    display: grid !important;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-gap: 0;
+    min-width: 0; 
+    min-height: 0;
+}

package/src/index.js

@@ -1,5 +1,6 @@
 import { PrefViewer2D } from "./pref-viewer-2d.js";
 import { PrefViewer3D } from "./pref-viewer-3d.js";
+import { PrefViewerDialog } from "./pref-viewer-dialog.js";
 import { PrefViewerTask } from "./pref-viewer-task.js";
 
 /**
@@ -29,12 +30,32 @@ import { PrefViewerTask } from "./pref-viewer-task.js";
  *  - mode: Viewer mode ("2d" or "3d").
  *
  * Public Methods:
- *  - loadConfig(config), loadModel(model), loadScene(scene), loadMaterials(materials), loadDrawing(drawing)
- *  - setOptions(options)
+ *  - loadConfig(config): Loads a configuration object or JSON string.
+ *  - loadModel(model): Loads a model object or JSON string.
+ *  - loadScene(scene): Loads a scene/environment object or JSON string.
+ *  - loadMaterials(materials): Loads materials object or JSON string.
+ *  - loadDrawing(drawing): Loads a drawing object or JSON string.
+ *  - setOptions(options): Sets viewer options from an object or JSON string.
  *  - 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()
+ *  - showModel(): Shows the 3D model.
+ *  - hideModel(): Hides the 3D model.
+ *  - showScene(): Shows the 3D environment/scene.
+ *  - hideScene(): Hides the 3D environment/scene.
+ *  - zoomCenter(): Centers the 2D drawing view.
+ *  - zoomExtentsAll(): Zooms the 2D drawing to fit all content.
+ *  - zoomIn(): Zooms in on the 2D drawing.
+ *  - zoomOut(): Zooms out of the 2D drawing.
+ *  - downloadModelGLB(): Downloads the current 3D model as a GLB file.
+ *  - downloadModelGLTF(): Downloads the current 3D model as a glTF ZIP file.
+ *  - downloadModelUSDZ(): Downloads the current 3D model as a USDZ file.
+ *  - downloadModelAndSceneGLB(): Downloads both the model and scene as a GLB file.
+ *  - downloadModelAndSceneGLTF(): Downloads both the model and scene as a glTF ZIP file.
+ *  - downloadModelAndSceneUSDZ(): Downloads both the model and scene as a USDZ file.
+ *  - downloadSceneGLB(): Downloads the environment as a GLB file.
+ *  - downloadSceneGLTF(): Downloads the environment as a glTF ZIP file.
+ *  - downloadSceneUSDZ(): Downloads the environment as a USDZ file.
+ *  - openDialog(title, content, footer): Opens a modal dialog with the specified title, content, and footer.
+ *  - closeDialog(): Closes the currently open dialog, if any, and removes it from the DOM.
  *
  * Public Properties:
  *  - isInitialized: Indicates if the viewer is initialized.
@@ -63,8 +84,10 @@ class PrefViewer extends HTMLElement {
 
     #taskQueue = [];
 
+    #wrapper = null;
     #component2D = null;
     #component3D = null;
+    #dialog = null;
 
     /**
      * Creates a new PrefViewer instance and attaches a shadow DOM.
@@ -145,6 +168,14 @@ class PrefViewer extends HTMLElement {
      * @returns {void|boolean} Returns false if initialization fails; otherwise void.
      */
     connectedCallback() {
+        this.#wrapper = document.createElement("div");
+        this.#wrapper.classList.add("pref-viewer-wrapper");
+        this.shadowRoot.append(this.#wrapper);
+
+        const style = document.createElement("style");
+        style.textContent = `@import "../src/css/pref-viewer.css";`;
+        this.shadowRoot.append(style);
+
         this.#createComponent3D();
         this.#createComponent2D();
 
@@ -166,7 +197,7 @@ class PrefViewer extends HTMLElement {
         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);
+        this.#wrapper.appendChild(this.#component2D);
     }
 
     /**
@@ -178,7 +209,7 @@ class PrefViewer extends HTMLElement {
     #createComponent3D() {
         this.#component3D = document.createElement("pref-viewer-3d");
         this.#component3D.setAttribute("visible", "false");
-        this.shadowRoot.appendChild(this.#component3D);
+        this.#wrapper.appendChild(this.#component3D);
     }
 
     /**
@@ -480,11 +511,14 @@ class PrefViewer extends HTMLElement {
             this.#component3D?.hide();
             this.#component2D?.show();
         } else {
-            this.#component3D?.show();
             this.#component2D?.hide();
+            this.#component3D?.show();
         }
         if (this.getAttribute("mode") !== mode) {
             this.setAttribute("mode", mode);
+            if (this.#dialog) {
+                this.closeDialog();
+            }
         }
     }
 
@@ -689,6 +723,19 @@ class PrefViewer extends HTMLElement {
         this.#component3D.downloadModelGLB();
     }
 
+    /**
+     * Initiates download of the current 3D model in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelGLTF();
+    }
+
     /**
      * Initiates download of the current 3D model in USDZ format.
      * @public
@@ -703,7 +750,33 @@ class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Initiates download of both the 3D model and scene in USDZ format.
+     * Initiates download of the current complete scene (3D model and environment) in GLB format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLB() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneGLB();
+    }
+
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneGLTF();
+    }
+
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in USDZ format.
      * @public
      * @returns {void}
      */
@@ -716,18 +789,82 @@ class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Initiates download of both the 3D model and scene in GLB format.
+     * Initiates download of the current 3D environment in GLB format.
      * @public
      * @returns {void}
      */
-    downloadModelAndSceneGLB() {
+    downloadSceneGLB() {
         if (!this.#component3D) {
             return;
         }
 
-        this.#component3D.downloadModelAndSceneGLB();
+        this.#component3D.downloadSceneGLB();
     }
 
+    /**
+     * Initiates download of the current 3D environment in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadSceneGLTF();
+    }
+
+    /**
+     * Initiates download of the current 3D environment in USDZ format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneUSDZ() {
+        if (!this.#component3D) {
+            return;
+        }
+        this.#component3D.downloadSceneUSDZ();
+    }
+
+    /**
+     * Opens a modal dialog with the specified title, content, and footer.
+     * @public
+     * @param {string} title - The dialog title to display in the header.
+     * @param {string} content - The HTML content to display in the dialog body.
+     * @param {string} footer - The HTML content to display in the dialog footer (e.g., action buttons).
+     * @returns {HTMLElement} The created dialog element.
+     * @description
+     * If a dialog is already open, it is closed before opening the new one.
+     * The dialog is appended to the viewer's shadow DOM and returned for further manipulation.
+     */
+    openDialog(title, content, footer) {
+        if (this.#dialog && this.#dialog.hasAttribute("open")) {
+            this.#dialog.close();
+        }
+        this.#dialog = document.createElement("pref-viewer-dialog");
+        this.shadowRoot.querySelector(".pref-viewer-wrapper").appendChild(this.#dialog);
+        const opened = this.#dialog.open(title, content, footer);
+        return opened ? this.#dialog : null;
+    }
+
+    /**
+     * Closes the currently open dialog, if any, and removes it from the DOM.
+     * @public
+     * @returns {void}
+     */
+    closeDialog() {
+        if (this.#dialog) {
+            this.#dialog.close();
+            this.#dialog = null;
+        }
+    }
+
+    /**
+     * ---------------------------
+     * Public properties
+     * ---------------------------
+     */
+
     /**
      * Indicates whether the viewer has been initialized.
      * @public
@@ -776,4 +913,5 @@ class PrefViewer extends HTMLElement {
 
 customElements.define("pref-viewer-2d", PrefViewer2D);
 customElements.define("pref-viewer-3d", PrefViewer3D);
+customElements.define("pref-viewer-dialog", PrefViewerDialog);
 customElements.define("pref-viewer", PrefViewer);

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

@@ -144,7 +144,7 @@ export class PrefViewer2D extends HTMLElement {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
         const style = document.createElement("style");
-        style.textContent = `pref-viewer-2d[visible="true"] { display: block; } pref-viewer-2d[visible="false"] { display: none; } pref-viewer-2d, pref-viewer-2d > div, pref-viewer-2d > div > svg { width: 100%; height: 100%; display: block; position: relative; outline: none; box-sizing: border-box; } pref-viewer-2d > div > svg { padding: 10px; }`;
+        style.textContent = `@import "../src/css/pref-viewer-2d.css";`;
         this.append(style);
     }
 

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

@@ -31,9 +31,14 @@ import BabylonJSController from "./babylonjs-controller.js";
  *  - showEnvironment(): Shows the 3D environment/scene.
  *  - hideEnvironment(): Hides the 3D environment/scene.
  *  - downloadModelGLB(): Downloads the current 3D model as a GLB file.
+ *  - downloadModelGLTF(): Downloads the current 3D model as a glTF ZIP file.
  *  - downloadModelUSDZ(): Downloads the current 3D model as a USDZ file.
  *  - downloadModelAndSceneGLB(): Downloads both the model and scene as a GLB file.
+ *  - downloadModelAndSceneGLTF(): Downloads both the model and scene as a glTF ZIP file.
  *  - downloadModelAndSceneUSDZ(): Downloads both the model and scene as a USDZ file.
+ *  - downloadSceneGLB(): Downloads the environment as a GLB file.
+ *  - downloadSceneGLTF(): Downloads the environment as a glTF ZIP file.
+ *  - downloadSceneUSDZ(): Downloads the environment as a USDZ file.
  *
  * Public Properties:
  *  - isInitialized: Indicates whether the component has completed initialization.
@@ -155,7 +160,7 @@ export class PrefViewer3D extends HTMLElement {
         this.#canvas = document.createElement("canvas");
         this.#wrapper.appendChild(this.#canvas);
         const style = document.createElement("style");
-        style.textContent = `pref-viewer-3d[visible="true"] { display: block; } pref-viewer-3d[visible="false"] { display: none; } pref-viewer-3d, pref-viewer-3d > div, pref-viewer-3d > div > canvas { width: 100%; height: 100%; display: block; position: relative; outline: none; box-sizing: border-box; }`;
+        style.textContent = `@import "../src/css/pref-viewer-3d.css";`;
         this.append(style);
     }
 
@@ -567,7 +572,19 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelGLB();
+        this.#babylonJSController.downloadGLB(1);
+    }
+
+    /**
+     * Downloads the current 3D model as a glTF file (ZIP with gltf and all resources (textures, buffers, etc.)).
+     * @public
+     * @returns {void}
+     */
+    downloadModelGLTF() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLTF(1);
     }
 
     /**
@@ -579,11 +596,35 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelUSDZ();
+        this.#babylonJSController.downloadUSDZ(1);
+    }
+
+    /**
+     * Downloads the current 3D complete scene (model and environment) as a GLB file.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLB() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadModelGLB(0);
     }
 
     /**
-     * Downloads both the 3D model and scene as a USDZ file.
+     * Downloads the current 3D complete scene (model and environment) as a glTF file (ZIP with gltf and all resources (textures, buffers, etc.)).
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLTF() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLTF(0);
+    }
+
+    /**
+     * Downloads the current 3D complete scene (model and environment) as a USDZ file.
      * @public
      * @returns {void}
      */
@@ -591,19 +632,43 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelAndSceneUSDZ();
+        this.#babylonJSController.downloadUSDZ(0);
     }
 
     /**
-     * Downloads both the 3D model and scene as a GLB file.
+     * Downloads the current 3D environment as a GLB file.
      * @public
      * @returns {void}
      */
-    downloadModelAndSceneGLB() {
+    downloadSceneGLB() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLB(2);
+    }
+
+    /**
+     * Downloads the current 3D environment as a glTF file (ZIP with gltf and all resources (textures, buffers, etc.)).
+     * @public
+     * @returns {void}
+     */
+    downloadSceneGLTF() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLTF(2);
+    }
+
+    /**
+     * Downloads the current 3D environment as a USDZ file.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneUSDZ() {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelAndSceneGLB();
+        this.#babylonJSController.downloadUSDZ(2);
     }
 
     /**

package/src/pref-viewer-dialog.js

@@ -0,0 +1,139 @@
+/**
+ * PrefViewerDialog - Custom Web Component for displaying modal dialogs in PrefViewer.
+ *
+ * Overview:
+ *  - Provides a modal dialog overlay for user interactions such as downloads or confirmations.
+ *  - Handles DOM creation, styling, and open/close logic.
+ *  - Ensures dialog content is centered and styled appropriately.
+ *  - Automatically focuses the canvas when closed for improved accessibility.
+ *
+ * Usage:
+ *  - Use as a custom HTML element: <pref-viewer-dialog></pref-viewer-dialog>
+ *  - Call open(title, content, footer) to display the dialog with a header, content, and footer.
+ *  - Call close() to hide and remove the dialog.
+ *
+ * Methods:
+ *  - constructor(): Initializes the custom element.
+ *  - connectedCallback(): Called when the element is added to the DOM; sets up DOM and styles.
+ *  - disconnectedCallback(): Called when the element is removed from the DOM; cleans up resources.
+ *  - open(title, content, footer): Displays the dialog and sets its header, content, and footer.
+ *  - close(): Hides and removes the dialog, refocuses the canvas if available.
+ *  - #createDOMElements(): Creates the dialog structure and applies styles.
+ */
+export class PrefViewerDialog extends HTMLElement {
+    #wrapper = null;
+    #header = null;
+    #content = null;
+    #footer = null;
+
+    /**
+     * Initializes the custom dialog element.
+     * Only calls super(); heavy initialization is deferred to connectedCallback.
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * Called when the element is inserted into the DOM.
+     * Sets up the dialog's DOM structure and styles.
+     * @returns {void}
+     */
+    connectedCallback() {
+        this.#createDOMElements();
+    }
+
+    /**
+     * Called when the element is removed from the DOM.
+     * Cleans up resources and event listeners.
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        this.removeEventListener("click", this.#closeOnBackdropClick.bind(this));
+    }
+
+    /**
+     * Creates the dialog's DOM structure and applies CSS styles.
+     * Adds a click handler to close the dialog when clicking outside the content.
+     * @private
+     * @returns {void}
+     */
+    #createDOMElements() {
+        this.#wrapper = document.createElement("div");
+        this.#wrapper.classList.add("dialog-wrapper");
+        this.#wrapper.innerHTML = `
+            <div class="dialog-header"><h3 class="dialog-header-title"></h3></div>
+            <div class="dialog-content"></div>
+            <div class="dialog-footer"></div>`;
+        this.append(this.#wrapper);
+
+        const style = document.createElement("style");
+        style.textContent = `@import "../src/css/pref-viewer-dialog.css";`;
+        this.append(style);
+
+        this.addEventListener("click", this.#closeOnBackdropClick.bind(this));
+
+        this.#header = this.#wrapper.querySelector(".dialog-header");
+        this.#content = this.#wrapper.querySelector(".dialog-content");
+        this.#footer = this.#wrapper.querySelector(".dialog-footer");
+    }
+
+    #closeOnBackdropClick(event) {
+        if (event.target === this) {
+            this.close();
+        }
+    }
+
+    /**
+     * Opens the dialog and sets its header, content, and footer.
+     * @param {string} title - The dialog title to display in the header.
+     * @param {string} content - The HTML content to display in the dialog body.
+     * @param {string} footer - The HTML content to display in the dialog footer (e.g., action buttons).
+     * @returns {boolean} True if the dialog was opened, false if no content was provided.
+     */
+    open(title = "", content = "", footer = "") {
+        if (this.#wrapper === null || this.#header === null || this.#content === null || this.#footer === null) {
+            return false;
+        }
+        if (title === "" && content === "" && footer === "") {
+            return false;
+        }
+
+        if (title === "") {
+            this.#header.style.display = "none";
+        }
+        if (footer === "") {
+            this.#footer.style.display = "none";
+        }
+
+        this.#header.querySelector(".dialog-header-title").innerHTML = title;
+        this.#content.innerHTML = content;
+        this.#footer.innerHTML = footer;
+        this.setAttribute("open", "");
+        return true;
+    }
+
+    /**
+     * Closes and removes the dialog from the DOM.
+     * @returns {void}
+     */
+    close() {
+        this.removeAttribute("open");
+        const parent = this.getRootNode().host;
+        if (parent) {
+            // Refocus 3D canvas or 2D component for accessibility
+            const canvas = parent.shadowRoot.querySelector("pref-viewer-3d[visible='true'] canvas");
+            if (canvas) {
+                canvas.focus();
+            } else {
+                const component2D = parent.shadowRoot.querySelector("pref-viewer-2d[visible='true']");
+                if (component2D) {
+                    component2D.focus();
+                }
+            }
+
+        }
+        this.#wrapper = this.#header = this.#content = this.#footer = null;
+        this.remove();
+    }
+}