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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.8",
+  "version": "2.11.0-beta.9",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {

package/src/babylonjs-controller.js

@@ -72,7 +72,6 @@ export default class BabylonJSController {
     // References to parent custom elements
     #prefViewer3D = undefined;
     #prefViewer = undefined;
-    #prefViewerDialog = null;
 
     // Babylon.js core objects
     #engine = null;
@@ -862,6 +861,24 @@ 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
@@ -874,16 +891,7 @@ export default class BabylonJSController {
      * Uses JSZip to create the ZIP and triggers a browser download.
      */
     #downloadZip(files, name = "files", comment = "", addDateInName = false) {
-        if (addDateInName) {
-            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}`;
-        }
+        name = addDateInName ? this.#addDateToName(name) : name;
 
         const JSZip = require("jszip");
         const zip = new JSZip();
@@ -915,56 +923,39 @@ export default class BabylonJSController {
         if (!this.#prefViewer) {
             return;
         }
-        this.#prefViewerDialog = document.createElement("pref-viewer-dialog");
-        this.#prefViewer.shadowRoot.appendChild(this.#prefViewerDialog);
-
-        const content = document.createElement("div");
-        content.innerHTML = `
-            <form id="download-dialog-form" style="display:flex;flex-direction:column;gap:15px;">
-                <h3 style="margin: 0 0 5px; 0">Download 3D Scene</h3>
-                <h4 style="margin:0;">Content</h4>
-                <div style="display:flex;flex-direction:row;gap:15px;margin:0 10px 0 10px;">
+
+        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 style="margin:0;">Format</h4>
-                <div style="display:flex;flex-direction:row;gap:15px;margin: 0 10px 0 10px;">
+                <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>
-                <div style="display:flex;gap:15px;justify-content:stretch;margin-top:10px;">
-                    <button type="button" id="download-dialog-download">Download</button>
-                    <button type="button" id="download-dialog-cancel">Cancel</button>
-                </div>
-                <style>
-                    #download-dialog-download,
-                    #download-dialog-cancel {
-                        width: 100%;
-                        padding: 8px 20px;
-                        font-size: 1.1rem;
-                        border-radius: 6px;
-                        border: none;
-                        background: #eee;
-                        cursor: pointer;
-                        transition: background 0.2s;
-                    }
-                    #download-dialog-download:hover,
-                    #download-dialog-cancel:hover {
-                        background: #e0e0e0;
-                    }
-                </style>
             </form>`;
+        const footer = `
+            <button type="button" class="primary" id="download-dialog-download">Download</button>
+            <button type="button" id="download-dialog-cancel">Cancel</button>`;
 
-        this.#prefViewerDialog.open(content);
+        const dialog = this.#prefViewer.openDialog(header, content, footer);
+
+        if (!dialog) {
+            return;
+        }
 
         // Button event handlers
-        const form = content.querySelector("#download-dialog-form");
-        const downloadBtn = content.querySelector("#download-dialog-download");
-        const cancelBtn = content.querySelector("#download-dialog-cancel");
+        const form = dialog.querySelector("#download-dialog-form");
+        const downloadButton = dialog.querySelector("#download-dialog-download");
+        const cancelButton = dialog.querySelector("#download-dialog-cancel");
 
-        downloadBtn.onclick = () => {
+        downloadButton.onclick = () => {
             const contentValue = form.content.value;
             const formatValue = form.format.value;
             switch (formatValue) {
@@ -978,14 +969,12 @@ export default class BabylonJSController {
                     this.downloadUSDZ(Number(contentValue));
                     break;
             }
-            this.#prefViewerDialog.close();
+            this.#prefViewer.closeDialog();
         };
 
-        cancelBtn.onclick = () => {
-            this.#prefViewerDialog.close();
+        cancelButton.onclick = () => {
+            this.#prefViewer.closeDialog();
         };
-
-        this.#prefViewerDialog.open(content);
     }
 
     /**
@@ -1117,6 +1106,7 @@ export default class BabylonJSController {
             default:
                 break;
         }
+        fileName = this.#addDateToName(fileName);
         GLTF2Export.GLBAsync(container, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
             if (glb) {
                 glb.downloadFiles();
@@ -1186,6 +1176,7 @@ export default class BabylonJSController {
             default:
                 break;
         }
+        fileName = this.#addDateToName(fileName);
         USDZExportAsync(container).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);

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

@@ -54,6 +54,8 @@ import { PrefViewerTask } from "./pref-viewer-task.js";
  *  - 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.
@@ -82,6 +84,7 @@ class PrefViewer extends HTMLElement {
 
     #taskQueue = [];
 
+    #wrapper = null;
     #component2D = null;
     #component3D = null;
     #dialog = null;
@@ -165,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();
 
@@ -186,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);
     }
 
     /**
@@ -198,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);
     }
 
     /**
@@ -500,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();
+            }
         }
     }
 
@@ -734,7 +748,7 @@ class PrefViewer extends HTMLElement {
 
         this.#component3D.downloadModelUSDZ();
     }
-    
+
     /**
      * Initiates download of the current complete scene (3D model and environment) in GLB format.
      * @public
@@ -809,10 +823,42 @@ class PrefViewer extends HTMLElement {
         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

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

@@ -160,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);
     }
 

package/src/pref-viewer-dialog.js

@@ -9,19 +9,22 @@
  *
  * Usage:
  *  - Use as a custom HTML element: <pref-viewer-dialog></pref-viewer-dialog>
- *  - Call open(content) to display the dialog with custom HTML content.
+ *  - 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(content): Displays the dialog and appends the provided content.
+ *  - 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.
@@ -45,7 +48,9 @@ export class PrefViewerDialog extends HTMLElement {
      * Cleans up resources and event listeners.
      * @returns {void}
      */
-    disconnectedCallback() {}
+    disconnectedCallback() {
+        this.removeEventListener("click", this.#closeOnBackdropClick.bind(this));
+    }
 
     /**
      * Creates the dialog's DOM structure and applies CSS styles.
@@ -55,51 +60,57 @@ export class PrefViewerDialog extends HTMLElement {
      */
     #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 = `
-            pref-viewer-dialog {
-                display: none;
-            }
-            pref-viewer-dialog[open] {
-                font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: rgba(0, 0, 0, 0.25);
-                position: fixed;
-                top: 0;
-                left: 0;
-                z-index: 1000;
-            }
-            pref-viewer-dialog > div:first-child {
-                display: inline-block;
-                background: #fff;
-                border-radius: 10px;
-                box-shadow: 0 4px 24px rgba(0,0,0,0.25);
-                padding: 15px;
-                max-width: 90%;
-                max-height: 90%;
-                overflow: auto;
-            }`;
+        style.textContent = `@import "../src/css/pref-viewer-dialog.css";`;
         this.append(style);
-        this.addEventListener("click", (event) => {
-            if (event.target === this) {
-                this.close();
-            }
-        });
+
+        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 appends the provided content.
-     * @param {HTMLElement} content - The HTML content to display inside the dialog.
-     * @returns {void}
+     * 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(content) {
+    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", "");
-        this.#wrapper.appendChild(content);
+        return true;
     }
 
     /**
@@ -110,12 +121,19 @@ export class PrefViewerDialog extends HTMLElement {
         this.removeAttribute("open");
         const parent = this.getRootNode().host;
         if (parent) {
-            // Refocus canvas for accessibility
-            const canvas = parent.shadowRoot.querySelector("canvas");
+            // 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();
     }
 }