@preference-sl/pref-viewer 2.10.0 → 2.11.0-beta.1

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

@@ -0,0 +1,457 @@
+import { ContainerData, MaterialData, CameraData } from "./pref-viewer-3d-data.js";
+import BabylonJSController from "./babylonjs-controller.js";
+
+export class PrefViewer3D extends HTMLElement {
+    // State flags
+    #isInitialized = false;
+    #isLoaded = false;
+    #isVisible = false;
+
+    #wrapper = null;
+    #canvas = null;
+
+    #data = null; // Component data
+
+    #babylonJSController = null; // BabylonJSController instance
+
+    /**
+     * Create a new instance of the 2D viewer component.
+     * The constructor only calls super(); heavy initialization happens in connectedCallback.
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * Attributes observed by the custom element.
+     * @returns {string[]} Array of attribute names that trigger attributeChangedCallback.
+     */
+    static get observedAttributes() {
+        return ["config", "options", "show-model", "show-scene", "visible"];
+    }
+
+    /**
+     * Handle attribute changes.
+     * @param {string} name - Attribute name.
+     * @param {string|null} _old - Previous attribute value (unused).
+     * @param {string|null} value -New attribute value.
+     * @returns {void}
+     * @description
+     * - "svg": triggers load of new SVG content.
+     * - "visible": shows or hides the component according to the attribute value ("true"/"false").
+     */
+    attributeChangedCallback(name, _old, value) {
+        switch (name) {
+            case "visible":
+                if (_old === value) {
+                    return;
+                }
+                if (value === "true" && this.#isVisible === false) {
+                    this.show();
+                } else if (value === "false" && this.#isVisible === true) {
+                    this.hide();
+                }
+                break;
+            case "show-model":
+                if (_old === value) {
+                    return;
+                }
+                const showModel = value.toLowerCase?.() === "true";
+                showModel ? this.showModel() : this.hideModel();
+                break;
+            case "show-scene":
+                if (_old === value) {
+                    return;
+                }
+                const showScene = value.toLowerCase?.() === "true";
+                showScene ? this.showEnvironment() : this.hideEnvironment();
+                break;
+        }
+    }
+
+    /**
+     * Called when the element is inserted into the DOM.
+     * Sets up DOM nodes, initial visibility and starts loading the SVG if provided.
+     * @returns {void}
+     */
+    connectedCallback() {
+        this.#createDOMElements();
+        this.#setInitialVisibility();
+        this.#initializeData();
+        this.#initializeBabylonJS();
+    }
+
+    disconnectedCallback() {
+        if (this.#babylonJSController) {
+            this.#babylonJSController.disable();
+        }
+    }
+
+    /**
+     * Create DOM structure and basic styles used by the component.
+     * @private
+     * @returns {void}
+     */
+    #createDOMElements() {
+        this.#wrapper = document.createElement("div");
+        this.append(this.#wrapper);
+        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; }`;
+        this.append(style);
+    }
+
+    /**
+     * Set initial visibility based on inline style and the visible attribute.
+     * @private
+     * @returns {void}
+     * @description If the "visible" attribute is not present, defaults to visible.
+     */
+    #setInitialVisibility() {
+        const visible = !this.hasAttribute("visible") || this.getAttribute("visible") === "true";
+        visible ? this.show() : this.hide();
+    }
+
+    #initializeData() {
+        this.#data = {
+            containers: {
+                model: new ContainerData("model"),
+                environment: new ContainerData("environment"),
+                materials: new ContainerData("materials"),
+            },
+            options: {
+                camera: new CameraData("activeCamera", null, true),
+                materials: {
+                    innerWall: new MaterialData("innerWall", undefined, undefined, ["innerWall"]),
+                    outerWall: new MaterialData("outerWall", undefined, undefined, ["outerWall"]),
+                    innerFloor: new MaterialData("innerFloor", undefined, undefined, ["innerFloor"]),
+                    outerFloor: new MaterialData("outerFloor", undefined, undefined, ["outerFloor"]),
+                },
+            },
+        };
+    }
+
+    #initializeBabylonJS() {
+        this.#babylonJSController = new BabylonJSController(this.#canvas, this.#data.containers, this.#data.options);
+        this.#babylonJSController.enable();
+    }
+
+    #resetUpdateFlags() {
+        Object.values(this.#data.containers).forEach(container => container.reset());
+        Object.values(this.#data.options.materials).forEach(material => material.reset());
+        this.#data.options.camera.reset();
+    }
+
+    #checkNeedToUpdateContainers(config) {
+        const modelState = this.#data.containers.model;
+        const modelHasStorage = !!config.model?.storage;
+        const modelNeedToChangeVisibility = config.model?.visible !== undefined && config.model?.visible !== modelState.show;
+        if (modelHasStorage) {
+            modelState.setPending(modelHasStorage ? config.model.storage : null, modelNeedToChangeVisibility ? config.model.visible : undefined);
+        } else if (modelNeedToChangeVisibility) {
+            modelState.show = config.model.visible;
+        }
+
+        const environmentState = this.#data.containers.environment;
+        const environmentHasStorage = !!config.scene?.storage;
+        const environmentNeedToChangeVisibility = config.scene?.visible !== undefined && config.scene?.visible !== environmentState.show;
+        if (environmentHasStorage) {
+            environmentState.setPending(environmentHasStorage ? config.scene.storage : null, environmentNeedToChangeVisibility ? config.scene.visible : undefined);
+        } else if (environmentNeedToChangeVisibility) {
+            environmentState.show = config.scene.visible;
+        }
+
+        // Materials container. Visibility is not established for this container because it does not contain geometry.
+        const materialsState = this.#data.containers.materials;
+        const materialsHasStorage = !!config.materials?.storage;
+        if (materialsHasStorage) {
+            materialsState.setPending(materialsHasStorage ? config.materials.storage : null, null);
+        }
+    }
+
+    #checkNeedToUpdateCamera(options) {
+        if (!options || options.camera === undefined || options.camera === "") {
+            return false;
+        }
+        const cameraState = this.#data.options.camera;
+        const needUpdate = options.camera !== cameraState.value;
+        if (needUpdate) {
+            cameraState.setPending(options.camera);
+        }
+        return needUpdate;
+    }
+
+    #checkNeedToUpdateMaterials(options) {
+        if (!options) {
+            return false;
+        }
+        let someNeedUpdate = false;
+        Object.keys(this.#data.options.materials).forEach((material) => {
+            const key = `${material}Material`;
+            const materialState = this.#data.options.materials[material];
+            const previousValue = materialState.value;
+            const incomingValue = options[key];
+            const needUpdate = !!incomingValue && incomingValue !== previousValue;
+            if (needUpdate) {
+                materialState.setPending(incomingValue);
+            }
+            someNeedUpdate = someNeedUpdate || needUpdate;
+        });
+        return someNeedUpdate;
+    }
+
+    
+    #onLoading() {
+        this.dispatchEvent(
+            new CustomEvent("prefviewer3d-loading", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+            })
+        );
+        
+        this.removeAttribute("loaded");
+        this.setAttribute("loading", "");
+        
+        if (this.#isLoaded === true) {
+            this.#isLoaded = false;
+        }
+    }
+    
+    #onLoaded() {
+        const toLoadDetail = {
+            container_model: this.#data.containers.model.isPending,
+            container_scene: this.#data.containers.environment.isPending,
+            container_materials: this.#data.containers.materials.isPending,
+            options_camera: this.#data.options.camera.isPending,
+            options_material_innerWall: this.#data.options.materials.innerWall.isPending,
+            options_material_outerWall: this.#data.options.materials.outerWall.isPending,
+            options_material_innerFloor: this.#data.options.materials.innerFloor.isPending,
+            options_material_outerFloor: this.#data.options.materials.outerFloor.isPending,
+        };
+        const loadedDetail = {
+            container_model: this.#data.containers.model.isSuccess,
+            container_scene: this.#data.containers.environment.isSuccess,
+            container_materials: this.#data.containers.materials.isSuccess,
+            options_camera: this.#data.options.camera.isSuccess,
+            options_material_innerWall: this.#data.options.materials.innerWall.isSuccess,
+            options_material_outerWall: this.#data.options.materials.outerWall.isSuccess,
+            options_material_innerFloor: this.#data.options.materials.innerFloor.isSuccess,
+            options_material_outerFloor: this.#data.options.materials.outerFloor.isSuccess,
+        };
+        const detail = {
+            tried: toLoadDetail,
+            success: loadedDetail,
+        };
+
+        this.dispatchEvent(
+            new CustomEvent("prefviewer3d-loaded", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+        
+        this.removeAttribute("loading");
+        this.setAttribute("loaded", "");
+        
+        this.#resetUpdateFlags();
+        this.#isLoaded = true;
+
+        return detail;
+    }
+
+    #onSettingOptions() {
+        this.dispatchEvent(
+            new CustomEvent("prefviewer3d-setting-options", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+            })
+        );
+        
+        this.removeAttribute("loaded");
+        this.setAttribute("loading", "");
+        
+        if (this.#isLoaded === true) {
+            this.#isLoaded = false;
+        }
+    }
+    
+    #onSettedOptions() {
+        const toSetDetail = {
+            camera: this.#data.options.camera.isPending,
+            innerWallMaterial: this.#data.options.materials.innerWall.isPending,
+            outerWallMaterial: this.#data.options.materials.outerWall.isPending,
+            innerFloorMaterial: this.#data.options.materials.innerFloor.isPending,
+            outerFloorMaterial: this.#data.options.materials.outerFloor.isPending,
+        };
+        const settedDetail = {
+            camera: this.#data.options.camera.isSuccess,
+            innerWallMaterial: this.#data.options.materials.innerWall.isSuccess,
+            outerWallMaterial: this.#data.options.materials.outerWall.isSuccess,
+            innerFloorMaterial: this.#data.options.materials.innerFloor.isSuccess,
+            outerFloorMaterial: this.#data.options.materials.outerFloor.isSuccess,
+        };
+        const detail = {
+            tried: toSetDetail,
+            success: settedDetail,
+        };
+
+        this.dispatchEvent(
+            new CustomEvent("prefviewer3d-loaded", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+        
+        this.removeAttribute("loading");
+        this.setAttribute("loaded", "");
+        
+        this.#resetUpdateFlags();
+        this.#isLoaded = true;
+
+        return detail;
+    }
+
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+    */
+    hide() {
+       this.#isVisible = false;
+       this.setAttribute("visible", "false");
+    }
+    
+    show() {
+        this.#isVisible = true;
+        this.setAttribute("visible", "true");
+    }
+
+    async load(config) {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        
+        this.#onLoading();
+
+        // Containers
+        this.#checkNeedToUpdateContainers(config);
+
+        // Options
+        if (config.options) {
+            this.#checkNeedToUpdateCamera(config.options);
+            this.#checkNeedToUpdateMaterials(config.options);
+        }
+
+        const success = await this.#babylonJSController.load();
+        
+        return { success: success, detail: this.#onLoaded() };
+    }
+
+    setOptions(options) {
+        if (!this.#babylonJSController) {
+            return;
+        }
+
+        this.#onSettingOptions();
+
+        let someSetted = false;
+        if (this.#checkNeedToUpdateCamera(options)) {
+            someSetted = someSetted || this.#babylonJSController.setCameraOptions();
+        }
+        if (this.#checkNeedToUpdateMaterials(options)) {
+            someSetted = someSetted || this.#babylonJSController.setMaterialOptions();
+        }
+        const detail = this.#onSettedOptions();
+        return {success: someSetted, detail: detail};
+    }
+
+    showModel() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.setContainerVisibility("model", true);
+    }
+
+    hideModel() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.setContainerVisibility("model", false);
+    }
+
+    showEnvironment() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.setContainerVisibility("environment", true);
+    }
+
+    hideEnvironment() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.setContainerVisibility("environment", false);
+    }
+
+    downloadModelGLB() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadModelGLB();
+    }
+
+    downloadModelUSDZ() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadModelUSDZ();
+    }
+
+    downloadModelAndSceneUSDZ() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadModelAndSceneUSDZ();
+    }
+
+    downloadModelAndSceneGLB() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadModelAndSceneGLB();
+    }
+
+    /**
+     * Indicates whether the component has completed its initialization.
+     * @public
+     * @returns {boolean} True if the component is initialized; otherwise, false.
+     */
+    get initialized() {
+        return this.#isInitialized;
+    }
+
+    /**
+     * Indicates whether the GLTF/GLB content is loaded and ready.
+     * @public
+     * @returns {boolean} True if the GLTF/GLB is loaded; otherwise, false.
+     */
+    get loaded() {
+        return this.#isLoaded;
+    }
+
+    /**
+     * Indicates whether the component is currently visible.
+     * @public
+     * @returns {boolean} True if the component is visible; otherwise, false.
+     */
+    get visible() {
+        return this.#isVisible;
+    }
+}

package/src/pref-viewer-task.js

@@ -0,0 +1,54 @@
+/**
+ * PrefViewerTask - Represents a single task or operation to be processed by the PrefViewer.
+ *
+ * Responsibilities:
+ *  - Encapsulates the payload and type of a viewer task (e.g., loading a model, updating materials).
+ *  - Validates the task type against a predefined set of allowed types.
+ *  - Provides an immutable instance to ensure task integrity.
+ *
+ * Usage:
+ *  - Instantiate with a value and a type:
+ *      new PrefViewerTask(data, PrefViewerTask.Types.Model)
+ *  - Access the payload via the `value` property and the normalized type via the `type` property.
+ *
+ * Static Properties:
+ *  - Types: An object containing all allowed task types as string constants.
+ *
+ * Constructor:
+ *  - Validates the type (case-insensitive) and throws a TypeError if invalid.
+ *  - Freezes the instance to prevent further modification.
+ */
+export class PrefViewerTask {
+    static Types = Object.freeze({
+        Config: "config",
+        Drawing: "drawing",
+        Environment: "environment",
+        Materials: "materials",
+        Model: "model",
+        Options: "options",
+        Visibility: "visibility",
+    });
+
+    /**
+     * Creates a new PrefViewerTask instance.
+     * Validates that the provided type matches one of the allowed task types (case-insensitive).
+     * If the type is invalid, throws a TypeError.
+     * The instance is frozen to prevent further modification.
+     *
+     * @param {*} value - The payload or data associated with the task.
+     * @param {string} type - The type of task; must match one of PrefViewerTask.Types values.
+     * @throws {TypeError} If the type is not valid.
+     */
+    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);
+    }
+}