@plattar/plattar-ar-adapter 1.154.1 → 1.155.1

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

@@ -2,234 +2,229 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VTOController = void 0;
 const plattar_api_1 = require("@plattar/plattar-api");
-const plattar_services_1 = require("@plattar/plattar-services");
 const __1 = require("../..");
-const raw_ar_1 = require("../../ar/raw-ar");
 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 VTOController 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("VTOController.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/facear.html?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 productID = this.getAttribute("product-id");
+        const sceneProductID = this.getAttribute("scene-product-id");
+        const variationID = this.getAttribute("variation-id");
+        if (configState) {
+            dst += "&config_state=" + configState.state.encode();
+        }
+        if (showAR) {
+            dst += "&show_ar=" + showAR;
+        }
+        if (productID) {
+            dst += "&product_id=" + productID;
+        }
+        if (sceneProductID) {
+            dst += "&scene_product_id=" + sceneProductID;
+        }
+        if (variationID) {
+            dst += "&variation_id=" + variationID;
+        }
+        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/facear.html?scene_id=" + sceneID;
-                // optional attributes
-                const configState = this.getAttribute("config-state");
-                const showAR = this.getAttribute("show-ar");
-                const productID = this.getAttribute("product-id");
-                const sceneProductID = this.getAttribute("scene-product-id");
-                const variationID = this.getAttribute("variation-id");
-                if (configState) {
-                    dst += "&config_state=" + configState;
-                }
-                if (showAR) {
-                    dst += "&show_ar=" + showAR;
-                }
-                if (productID) {
-                    dst += "&product_id=" + productID;
-                }
-                if (sceneProductID) {
-                    dst += "&scene_product_id=" + sceneProductID;
-                }
-                if (variationID) {
-                    dst += "&variation_id=" + variationID;
-                }
-                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("VTOController.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("VTOController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
+        }
+        // required attributes with defaults for plattar-facear node
+        const width = this.getAttribute("width") || "500px";
+        const height = this.getAttribute("height") || "500px";
+        const server = this.getAttribute("server") || "production";
+        const viewer = document.createElement("plattar-facear");
+        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 not available
+            configState = null;
+        }
+        const showAR = this.getAttribute("show-ar");
+        const productID = this.getAttribute("product-id");
+        const sceneProductID = this.getAttribute("scene-product-id");
+        const variationID = this.getAttribute("variation-id");
+        if (configState) {
+            viewer.setAttribute("config-state", configState.state.encode());
+        }
+        if (showAR) {
+            viewer.setAttribute("show-ar", showAR);
+        }
+        if (productID) {
+            viewer.setAttribute("product-id", productID);
+        }
+        if (sceneProductID) {
+            viewer.setAttribute("scene-product-id", sceneProductID);
+        }
+        if (variationID) {
+            viewer.setAttribute("variation-id", variationID);
+        }
+        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-facear node
-                const width = this.getAttribute("width") || "500px";
-                const height = this.getAttribute("height") || "500px";
-                const server = this.getAttribute("server") || "production";
-                const viewer = document.createElement("plattar-facear");
-                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 productID = this.getAttribute("product-id");
-                const sceneProductID = this.getAttribute("scene-product-id");
-                const variationID = this.getAttribute("variation-id");
-                if (configState) {
-                    viewer.setAttribute("config-state", configState);
-                }
-                if (showAR) {
-                    viewer.setAttribute("show-ar", showAR);
-                }
-                if (productID) {
-                    viewer.setAttribute("product-id", productID);
-                }
-                if (sceneProductID) {
-                    viewer.setAttribute("scene-product-id", sceneProductID);
-                }
-                if (variationID) {
-                    viewer.setAttribute("variation-id", variationID);
-                }
-                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("VTOController.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("VTOController.initAR() - cannot proceed as VTO AR not available in context"));
-            }
-            if (!(util_1.Util.isSafari() || util_1.Util.isChromeOnIOS())) {
-                return reject(new Error("VTOController.initAR() - cannot proceed as VTO AR only available on IOS Mobile devices"));
-            }
-            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("VTOController.initAR() - cannot proceed as VTO AR not available in context");
+        }
+        if (!(util_1.Util.isSafari() || util_1.Util.isChromeOnIOS())) {
+            throw new Error("VTOController.initAR() - cannot proceed as VTO AR only available on IOS Mobile devices");
+        }
+        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 = __1.ConfiguratorState.decode(configState);
-            const first = state.first();
-            if (first) {
-                const sceneProductAR = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                sceneProductAR.init().then(accept).catch(reject);
-                return;
-            }
-            return reject(new Error("VTOController.initAR() - invalid config-state does not have any product states"));
-        }
-        // otherwise fallback to using scene
-        if (sceneID) {
-            __1.ConfiguratorState.decodeScene(sceneID).then((state) => {
-                const first = state.first();
-                if (first) {
-                    const sceneProductAR = new __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
-                    return sceneProductAR.init().then(accept).catch(reject);
-                }
-                return reject(new Error("VTOController.initAR() - invalid Scene does not have any product states"));
-            }).catch(reject);
-            return;
+        if (!sceneID) {
+            throw new Error("VTOController.initAR() - inherited AR 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 __1.SceneProductAR(first.scene_product_id, first.product_variation_id);
+            return sceneProductAR.init();
         }
-        return reject(new Error("VTOController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
+        throw new Error("VTOController.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) {
-            viewer.messenger.getARFile("vto").then((result) => {
-                const rawAR = new raw_ar_1.RawAR(result.filename);
-                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 = __1.ConfiguratorState.decode(configState);
-            if (state.length > 0) {
-                const server = this.getAttribute("server") || "production";
-                const configurator = new plattar_services_1.Configurator();
-                configurator.server = server;
-                configurator.output = "vto";
-                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);
-                    rawAR.init().then(accept).catch(reject);
-                }).catch(reject);
-                return;
-            }
-            return reject(new Error("VTOController.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 productID = this.getAttribute("product-id");
-            const sceneProductID = this.getAttribute("scene-product-id");
-            const variationID = this.getAttribute("variation-id");
-            const sceneAR = new __1.SceneAR(sceneID, {
-                productID: productID ? productID : undefined,
-                sceneProductID: sceneProductID ? sceneProductID : undefined,
-                variationID: variationID ? variationID : undefined
-            });
-            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("VTOController.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) {
@@ -237,6 +232,7 @@ class VTOController extends plattar_controller_1.PlattarController {
             this._element = null;
             return true;
         }
+        this.removeMessengerObservers();
         return false;
     }
     get element() {

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

@@ -6,9 +6,32 @@ import { LauncherAR } from "../ar/launcher-ar";
 export default class PlattarEmbed extends HTMLElement {
     private _currentType;
     private _controller;
+    private _currentSceneID;
+    private _observer;
     constructor();
     get viewer(): HTMLElement | null;
+    /**
+     * Begin observing all changes to this DOM element
+     */
     connectedCallback(): void;
+    /**
+     * creates a brand new instance of this embed
+     */
+    create(): void;
+    /**
+     * Destroys the active instance of this embed and resets internal state to default
+     */
+    destroy(): void;
+    /**
+     * this is only used for backwards-compatible legacy embed types typically
+     * embedding products with variations (without a scene-id)
+     */
+    private _CreateLegacyEmbed;
+    /**
+     * creates the embed
+     * this can also be called when attributes/state changes so embeds can be re-loaded
+     */
+    private _CreateEmbed;
     initAR(): Promise<LauncherAR>;
     startAR(): Promise<void>;
     startViewer(): Promise<HTMLElement>;