@plattar/plattar-ar-adapter 1.154.2 → 1.155.2

package/dist/embed/controllers/configurator-controller.js

@@ -2,219 +2,210 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfiguratorController = void 0;
 const plattar_api_1 = require("@plattar/plattar-api");
-const plattar_services_1 = require("@plattar/plattar-services");
-const raw_ar_1 = require("../../ar/raw-ar");
-const scene_ar_1 = require("../../ar/scene-ar");
 const scene_product_ar_1 = require("../../ar/scene-product-ar");
-const configurator_state_1 = require("../../util/configurator-state");
 const util_1 = require("../../util/util");
 const plattar_controller_1 = require("./plattar-controller");
+const configurator_ar_1 = require("../../ar/configurator-ar");
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
 class ConfiguratorController extends plattar_controller_1.PlattarController {
-    constructor(parent) {
-        super(parent);
+    constructor() {
+        super(...arguments);
+        this._cachedConfigState = null;
     }
-    onAttributesUpdated() {
+    async getConfiguratorState() {
+        if (this._cachedConfigState) {
+            return this._cachedConfigState;
+        }
+        this._cachedConfigState = this.createConfiguratorState();
+        return this._cachedConfigState;
+    }
+    async onAttributesUpdated(attributeName) {
         const state = this._state;
+        if (state === plattar_controller_1.ControllerState.Renderer) {
+            const viewer = this.element;
+            if (viewer) {
+                if (attributeName === "variation-id") {
+                    const variationIDs = this.getAttribute("variation-id");
+                    const variationIDsList = variationIDs ? variationIDs.split(",") : [];
+                    if (variationIDsList.length > 0) {
+                        await viewer.messenger.selectVariationID(variationIDsList);
+                    }
+                }
+                if (attributeName === "variation-sku") {
+                    const variationSKUs = this.getAttribute("variation-sku");
+                    const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+                    if (variationSKUList.length > 0) {
+                        await viewer.messenger.selectVariationSKU(variationSKUList);
+                    }
+                }
+            }
+            return;
+        }
         // re-render the QR Code when attributes have changed
         if (state === plattar_controller_1.ControllerState.QRCode) {
+            if (attributeName === "variation-id") {
+                const configState = await this.getConfiguratorState();
+                const variationIDs = this.getAttribute("variation-id");
+                const variationIDsList = variationIDs ? variationIDs.split(",") : [];
+                variationIDsList.forEach((variationID) => {
+                    configState.state.setVariationID(variationID);
+                });
+            }
+            if (attributeName === "variation-sku") {
+                const configState = await this.getConfiguratorState();
+                const variationSKUs = this.getAttribute("variation-sku");
+                const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+                variationSKUList.forEach((variationSKU) => {
+                    configState.state.setVariationSKU(variationSKU);
+                });
+            }
             this.startQRCode(this._prevQROpt);
             return;
         }
     }
-    startViewerQRCode(options) {
+    async startViewerQRCode(options) {
+        // remove the old renderer instance if any
+        this.removeRenderer();
+        const sceneID = this.getAttribute("scene-id");
+        if (!sceneID) {
+            throw new Error("ConfiguratorController.startQRCode() - minimum required attributes not set, use scene-id as a minimum");
+        }
+        const opt = options || this._GetDefaultQROptions();
+        const viewer = document.createElement("plattar-qrcode");
+        this._element = viewer;
+        // required attributes with defaults for plattar-viewer node
+        const width = this.getAttribute("width") || "500px";
+        const height = this.getAttribute("height") || "500px";
+        viewer.setAttribute("width", width);
+        viewer.setAttribute("height", height);
+        if (opt.color) {
+            viewer.setAttribute("color", opt.color);
+        }
+        if (opt.margin) {
+            viewer.setAttribute("margin", "" + opt.margin);
+        }
+        if (opt.qrType) {
+            viewer.setAttribute("qr-type", opt.qrType);
+        }
+        viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
+        let dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID;
+        // optional attributes
+        let configState = null;
+        const showAR = this.getAttribute("show-ar");
+        const showUI = this.getAttribute("show-ui");
+        try {
+            configState = (await this.getConfiguratorState()).state.encode();
+        }
+        catch (_err) {
+            // config state is not available
+            configState = null;
+        }
+        if (showUI && showUI === "true") {
+            dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
+        }
+        if (configState) {
+            dst += "&config_state=" + configState;
+        }
+        if (showAR) {
+            dst += "&show_ar=" + showAR;
+        }
+        viewer.setAttribute("url", opt.url || dst);
+        this._state = plattar_controller_1.ControllerState.QRCode;
+        this._prevQROpt = opt;
         return new Promise((accept, reject) => {
-            // remove the old renderer instance if any
-            this.removeRenderer();
-            const sceneID = this.getAttribute("scene-id");
-            if (sceneID) {
-                const opt = options || this._GetDefaultQROptions();
-                const viewer = document.createElement("plattar-qrcode");
-                // required attributes with defaults for plattar-viewer node
-                const width = this.getAttribute("width") || "500px";
-                const height = this.getAttribute("height") || "500px";
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                if (opt.color) {
-                    viewer.setAttribute("color", opt.color);
-                }
-                if (opt.margin) {
-                    viewer.setAttribute("margin", "" + opt.margin);
-                }
-                if (opt.qrType) {
-                    viewer.setAttribute("qr-type", opt.qrType);
-                }
-                viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
-                let dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + sceneID;
-                // optional attributes
-                const configState = this.getAttribute("config-state");
-                const showAR = this.getAttribute("show-ar");
-                const showUI = this.getAttribute("show-ui");
-                if (showUI && showUI === "true") {
-                    dst = plattar_api_1.Server.location().base + "configurator/dist/index.html?scene_id=" + sceneID;
-                }
-                if (configState) {
-                    dst += "&config_state=" + configState;
-                }
-                if (showAR) {
-                    dst += "&show_ar=" + showAR;
-                }
-                viewer.setAttribute("url", opt.url || dst);
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                this.append(viewer);
-                this._element = viewer;
-                this._state = plattar_controller_1.ControllerState.QRCode;
-                this._prevQROpt = opt;
-                return;
-            }
-            return reject(new Error("ConfiguratorController.startQRCode() - minimum required attributes not set, use scene-id as a minimum"));
+            viewer.onload = () => {
+                return accept(viewer);
+            };
+            this.append(viewer);
         });
     }
-    startRenderer() {
+    async startRenderer() {
+        // remove the old renderer instance if any
+        this.removeRenderer();
+        const sceneID = this.getAttribute("scene-id");
+        if (!sceneID) {
+            throw new Error("ConfiguratorController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
+        }
+        // required attributes with defaults for plattar-configurator node
+        const width = this.getAttribute("width") || "500px";
+        const height = this.getAttribute("height") || "500px";
+        const server = this.getAttribute("server") || "production";
+        const viewer = document.createElement("plattar-configurator");
+        this._element = viewer;
+        viewer.setAttribute("width", width);
+        viewer.setAttribute("height", height);
+        viewer.setAttribute("server", server);
+        viewer.setAttribute("scene-id", sceneID);
+        // optional attributes
+        let configState = null;
+        try {
+            configState = await this.getConfiguratorState();
+        }
+        catch (_err) {
+            // config state is not available
+            configState = null;
+        }
+        const showAR = this.getAttribute("show-ar");
+        const showUI = this.getAttribute("show-ui");
+        if (configState) {
+            viewer.setAttribute("config-state", configState.state.encode());
+        }
+        if (showAR) {
+            viewer.setAttribute("show-ar", showAR);
+        }
+        if (showUI) {
+            viewer.setAttribute("show-ui", showUI);
+        }
+        this._state = plattar_controller_1.ControllerState.Renderer;
         return new Promise((accept, reject) => {
-            // remove the old renderer instance if any
-            this.removeRenderer();
-            const sceneID = this.getAttribute("scene-id");
-            if (sceneID) {
-                // required attributes with defaults for plattar-configurator node
-                const width = this.getAttribute("width") || "500px";
-                const height = this.getAttribute("height") || "500px";
-                const server = this.getAttribute("server") || "production";
-                const viewer = document.createElement("plattar-configurator");
-                viewer.setAttribute("width", width);
-                viewer.setAttribute("height", height);
-                viewer.setAttribute("server", server);
-                viewer.setAttribute("scene-id", sceneID);
-                // optional attributes
-                const configState = this.getAttribute("config-state");
-                const showAR = this.getAttribute("show-ar");
-                const showUI = this.getAttribute("show-ui");
-                if (configState) {
-                    viewer.setAttribute("config-state", configState);
-                }
-                if (showAR) {
-                    viewer.setAttribute("show-ar", showAR);
-                }
-                if (showUI) {
-                    viewer.setAttribute("show-ui", showUI);
-                }
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                this.append(viewer);
-                this._element = viewer;
-                this._state = plattar_controller_1.ControllerState.Renderer;
-                return;
+            this.append(viewer);
+            if (configState) {
+                this.setupMessengerObservers(viewer, configState);
             }
-            return reject(new Error("ConfiguratorController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
+            return accept(viewer);
         });
     }
-    initAR() {
-        return new Promise((accept, reject) => {
-            if (!util_1.Util.canAugment()) {
-                return reject(new Error("ConfiguratorController.initAR() - cannot proceed as AR not available in context"));
-            }
-            const arMode = this.getAttribute("ar-mode") || "generated";
-            switch (arMode.toLowerCase()) {
-                case "inherited":
-                    this._InitARInherited(accept, reject);
-                    return;
-                case "generated":
-                default:
-                    this._InitARGenerated(accept, reject);
-            }
-        });
+    async initAR() {
+        if (!util_1.Util.canAugment()) {
+            throw new Error("ConfiguratorController.initAR() - cannot proceed as AR not available in context");
+        }
+        const arMode = this.getAttribute("ar-mode") || "generated";
+        switch (arMode.toLowerCase()) {
+            case "inherited":
+                return this._InitARInherited();
+            case "generated":
+            default:
+                return this._InitARGenerated();
+        }
     }
     /**
      * Private Function - This launches the Static/Inherited AR Mode
      */
-    _InitARInherited(accept, reject) {
+    async _InitARInherited() {
         const sceneID = this.getAttribute("scene-id");
-        const configState = this.getAttribute("config-state");
-        // use config-state if its available
-        if (sceneID && configState) {
-            const state = configurator_state_1.ConfiguratorState.decode(configState);
-            const first = state.first();
-            if (first) {
-                const sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                sceneProductAR.init().then(accept).catch(reject);
-                return;
-            }
-            return reject(new Error("ConfiguratorController.initAR() - invalid config-state does not have any product states"));
-        }
-        // otherwise fallback to using scene
-        if (sceneID) {
-            configurator_state_1.ConfiguratorState.decodeScene(sceneID).then((state) => {
-                const first = state.first();
-                if (first) {
-                    const sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                    return sceneProductAR.init().then(accept).catch(reject);
-                }
-                return reject(new Error("ConfiguratorController.initAR() - invalid Scene does not have any product states"));
-            }).catch(reject);
-            return;
+        if (!sceneID) {
+            throw new Error("ConfiguratorController.initAR() - inherited AR minimum required attributes not set, use scene-id as a minimum");
         }
-        return reject(new Error("ConfiguratorController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
+        const state = (await this.getConfiguratorState()).state;
+        const first = state.first();
+        if (first) {
+            const sceneProductAR = new scene_product_ar_1.SceneProductAR(first.scene_product_id, first.product_variation_id);
+            return sceneProductAR.init();
+        }
+        throw new Error("ConfiguratorController.initAR() - invalid decoded config-state does not have any product states");
     }
     /**
      * Private Function - This launches the Dynamic/Generated AR Mode
      */
-    _InitARGenerated(accept, reject) {
-        // if scene ID is available and the state is a configurator viewer
-        // we can use the real-time configurator state to launch the AR view
-        const viewer = this.element;
+    async _InitARGenerated() {
         const sceneID = this.getAttribute("scene-id");
-        if (viewer && sceneID && viewer.messenger) {
-            let output = "glb";
-            if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
-                output = "usdz";
-            }
-            viewer.messenger.getARFile(output).then((result) => {
-                const rawAR = new raw_ar_1.RawAR(result.filename, sceneID);
-                return rawAR.init().then(accept).catch(reject);
-            }).catch(reject);
-            return;
-        }
-        const configState = this.getAttribute("config-state");
-        // otherwise scene ID is available to the viewer is not launched
-        // we can use the static configuration state to launch the AR view
-        if (sceneID && configState) {
-            const state = configurator_state_1.ConfiguratorState.decode(configState);
-            if (state.length > 0) {
-                const server = this.getAttribute("server") || "production";
-                const configurator = new plattar_services_1.Configurator();
-                configurator.server = server;
-                if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
-                    configurator.output = "usdz";
-                }
-                if (util_1.Util.canSceneViewer()) {
-                    configurator.output = "glb";
-                }
-                state.forEach((productState) => {
-                    if (productState.meta_data.augment === true) {
-                        configurator.addSceneProduct(productState.scene_product_id, productState.product_variation_id);
-                    }
-                });
-                configurator.get().then((result) => {
-                    const rawAR = new raw_ar_1.RawAR(result.filename, sceneID);
-                    rawAR.init().then(accept).catch(reject);
-                }).catch(reject);
-                return;
-            }
-            return reject(new Error("ConfiguratorController.initAR() - invalid config-state does not have any product states"));
-        }
-        // otherwise no config-state or viewer is active
-        // fallback to using default SceneAR implementation
-        if (sceneID) {
-            const sceneAR = new scene_ar_1.SceneAR(sceneID);
-            sceneAR.init().then(accept).catch(reject);
-            return;
+        if (!sceneID) {
+            throw new Error("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
         }
-        return reject(new Error("ConfiguratorController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
+        const configAR = new configurator_ar_1.ConfiguratorAR(await this.getConfiguratorState());
+        return configAR.init();
     }
     removeRenderer() {
         if (this._element) {
@@ -222,6 +213,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
             this._element = null;
             return true;
         }
+        this.removeMessengerObservers();
         return false;
     }
     get element() {

package/dist/embed/controllers/plattar-controller.d.ts

@@ -1,4 +1,5 @@
 import { LauncherAR } from "../../ar/launcher-ar";
+import { DecodedConfiguratorState } from "../../util/configurator-state";
 export declare enum ControllerState {
     None = 0,
     Renderer = 1,
@@ -16,16 +17,35 @@ export declare abstract class PlattarController {
     protected _state: ControllerState;
     protected _element: HTMLElement | null;
     protected _prevQROpt: any;
+    private _selectVariationObserver;
+    private _selectVariationSKUObserver;
     constructor(parent: HTMLElement);
+    /**
+     * Generates a brand new Configurator State from the provided SceneID or inputted Configurator State
+     */
+    protected createConfiguratorState(): Promise<DecodedConfiguratorState>;
+    /**
+     * Generates and returns a new instance of the ConfiguratorState for this node
+     */
+    abstract getConfiguratorState(): Promise<DecodedConfiguratorState>;
     /**
      * Called by the parent when a HTML Attribute has changed and the controller
      * requires an update
      */
-    abstract onAttributesUpdated(): void;
+    abstract onAttributesUpdated(attributeName: string): Promise<void>;
     /**
      * Start the underlying Plattar Renderer for this Controller
      */
     abstract startRenderer(): Promise<HTMLElement>;
+    /**
+     * Setup messenger observers to detect variation changes and apply to the internal
+     * configuration state
+     */
+    protected setupMessengerObservers(viewer: any, configState: DecodedConfiguratorState): void;
+    /**
+     * Remove all pre-existing observers
+     */
+    protected removeMessengerObservers(): void;
     /**
      * Initialise and start AR mode if available
      */