@plattar/plattar-ar-adapter 1.122.4 → 1.123.4

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlattarController = exports.ControllerState = void 0;
+var ControllerState;
+(function (ControllerState) {
+    ControllerState[ControllerState["None"] = 0] = "None";
+    ControllerState[ControllerState["Renderer"] = 1] = "Renderer";
+    ControllerState[ControllerState["QRCode"] = 2] = "QRCode";
+})(ControllerState = exports.ControllerState || (exports.ControllerState = {}));
+/**
+ * All Plattar Controllers are derived from the same interface
+ */
+class PlattarController {
+    constructor(parent) {
+        this._parent = parent;
+    }
+    /**
+     * Default QR Code rendering options
+     */
+    static get DEFAULT_QR_OPTIONS() {
+        return {
+            color: "#101721",
+            qrType: "default",
+            margin: 0
+        };
+    }
+    ;
+    /**
+     * Initialise and start AR mode if available
+     */
+    startAR() {
+        return new Promise((accept, reject) => {
+            this.initAR().then((launcher) => {
+                launcher.start();
+                accept();
+            }).catch(reject);
+        });
+    }
+    /**
+     * Returns the Parent Instance
+     */
+    get parent() {
+        return this._parent;
+    }
+    /**
+     * Returns the specified attribute from the parent
+     * @param attribute - The name of thhe attribute
+     * @returns - The attribute value or null
+     */
+    getAttribute(attribute) {
+        return this.parent ? (this.parent.hasAttribute(attribute) ? this.parent.getAttribute(attribute) : null) : null;
+    }
+    /**
+     * Appends the provided element into the shadow-root of the parent element
+     * @param element - The element to append
+     */
+    append(element) {
+        const shadow = this.parent.shadowRoot || this.parent.attachShadow({ mode: 'open' });
+        shadow.append(element);
+    }
+}
+exports.PlattarController = PlattarController;

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

@@ -0,0 +1,17 @@
+import { LauncherAR } from "../../ar/launcher-ar";
+import { PlattarController } from "./plattar-controller";
+/**
+ * Manages an instance of the <plattar-product> HTML Element
+ */
+export declare class ProductController extends PlattarController {
+    private _state;
+    private _element;
+    private _prevQROpt;
+    constructor(parent: HTMLElement);
+    onAttributesUpdated(): void;
+    startQRCode(options: any): Promise<HTMLElement>;
+    startRenderer(): Promise<HTMLElement>;
+    initAR(): Promise<LauncherAR>;
+    removeRenderer(): boolean;
+    get element(): HTMLElement | null;
+}

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductController = void 0;
+const plattar_api_1 = require("@plattar/plattar-api");
+const product_ar_1 = require("../../ar/product-ar");
+const util_1 = require("../../util/util");
+const plattar_controller_1 = require("./plattar-controller");
+/**
+ * Manages an instance of the <plattar-product> HTML Element
+ */
+class ProductController extends plattar_controller_1.PlattarController {
+    constructor(parent) {
+        super(parent);
+        this._state = plattar_controller_1.ControllerState.None;
+        this._element = null;
+        this._prevQROpt = null;
+    }
+    onAttributesUpdated() {
+        const state = this._state;
+        // re-render the QR Code when attributes have changed
+        if (state === plattar_controller_1.ControllerState.QRCode) {
+            this.startQRCode(this._prevQROpt);
+            return;
+        }
+        // use the messenger function to change variation when attributes have changed
+        if (state === plattar_controller_1.ControllerState.Renderer) {
+            const viewer = this._element;
+            if (viewer) {
+                const variationID = this.getAttribute("variation-id");
+                viewer.messenger.selectVariation(variationID);
+            }
+            return;
+        }
+    }
+    startQRCode(options) {
+        return new Promise((accept, reject) => {
+            // remove the old renderer instance if any
+            this.removeRenderer();
+            const productID = this.getAttribute("product-id");
+            if (productID) {
+                const opt = options || plattar_controller_1.PlattarController.DEFAULT_QR_OPTIONS;
+                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);
+                }
+                // optional attributes
+                const variationID = this.getAttribute("variation-id");
+                let dst = plattar_api_1.Server.location().base + "renderer/product.html?product_id=" + productID;
+                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("ProductController.startQRCode() - minimum required attributes not set, use product-id as a minimum"));
+        });
+    }
+    startRenderer() {
+        return new Promise((accept, reject) => {
+            // remove the old renderer instance if any
+            this.removeRenderer();
+            const productID = this.getAttribute("product-id");
+            if (productID) {
+                // required attributes with defaults for plattar-product node
+                const width = this.getAttribute("width") || "500px";
+                const height = this.getAttribute("height") || "500px";
+                const server = this.getAttribute("server") || "production";
+                const viewer = document.createElement("plattar-product");
+                viewer.setAttribute("width", width);
+                viewer.setAttribute("height", height);
+                viewer.setAttribute("server", server);
+                viewer.setAttribute("product-id", productID);
+                // optional attributes
+                const variationID = this.getAttribute("variation-id");
+                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;
+            }
+            return reject(new Error("ProductController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    initAR() {
+        return new Promise((accept, reject) => {
+            if (!util_1.Util.canAugment()) {
+                return reject(new Error("ProductController.initAR() - cannot proceed as AR not available in context"));
+            }
+            const productID = this.getAttribute("product-id");
+            if (productID) {
+                const variationID = this.getAttribute("variation-id");
+                const product = new product_ar_1.ProductAR(productID, variationID);
+                return product.init().then(accept).catch(reject);
+            }
+            return reject(new Error("ProductController.initAR() - minimum required attributes not set, use product-id as a minimum"));
+        });
+    }
+    removeRenderer() {
+        if (this._element) {
+            this._element.remove();
+            this._element = null;
+            return true;
+        }
+        return false;
+    }
+    get element() {
+        return this._element;
+    }
+}
+exports.ProductController = ProductController;

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

@@ -0,0 +1,17 @@
+import { LauncherAR } from "../../ar/launcher-ar";
+import { PlattarController } from "./plattar-controller";
+/**
+ * Manages an instance of the <plattar-viewer> HTML Element
+ */
+export declare class ViewerController extends PlattarController {
+    private _state;
+    private _element;
+    private _prevQROpt;
+    constructor(parent: HTMLElement);
+    onAttributesUpdated(): void;
+    startQRCode(options: any): Promise<HTMLElement>;
+    startRenderer(): Promise<HTMLElement>;
+    initAR(): Promise<LauncherAR>;
+    removeRenderer(): boolean;
+    get element(): HTMLElement | null;
+}

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

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewerController = void 0;
+const plattar_api_1 = require("@plattar/plattar-api");
+const product_ar_1 = require("../../ar/product-ar");
+const util_1 = require("../../util/util");
+const plattar_controller_1 = require("./plattar-controller");
+/**
+ * Manages an instance of the <plattar-viewer> HTML Element
+ */
+class ViewerController extends plattar_controller_1.PlattarController {
+    constructor(parent) {
+        super(parent);
+        this._state = plattar_controller_1.ControllerState.None;
+        this._element = null;
+        this._prevQROpt = null;
+    }
+    onAttributesUpdated() {
+        const state = this._state;
+        // re-render the QR Code when attributes have changed
+        if (state === plattar_controller_1.ControllerState.QRCode) {
+            this.startQRCode(this._prevQROpt);
+            return;
+        }
+        // use the messenger function to change variation when attributes have changed
+        if (state === plattar_controller_1.ControllerState.Renderer) {
+            const viewer = this._element;
+            if (viewer) {
+                const productID = this.getAttribute("product-id");
+                const variationID = this.getAttribute("variation-id");
+                viewer.messenger.selectVariation(productID, variationID);
+            }
+            return;
+        }
+    }
+    startQRCode(options) {
+        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 || plattar_controller_1.PlattarController.DEFAULT_QR_OPTIONS;
+                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);
+                }
+                let dst = plattar_api_1.Server.location().base + "renderer/viewer.html?scene_id=" + sceneID;
+                // optional attributes
+                const productID = this.getAttribute("product-id");
+                const variationID = this.getAttribute("variation-id");
+                if (productID) {
+                    dst += "&productId=" + productID;
+                }
+                if (variationID) {
+                    dst += "&variationId=" + 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("ViewerController.startQRCode() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    startRenderer() {
+        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-viewer node
+                const width = this.getAttribute("width") || "500px";
+                const height = this.getAttribute("height") || "500px";
+                const server = this.getAttribute("server") || "production";
+                const viewer = document.createElement("plattar-viewer");
+                viewer.setAttribute("width", width);
+                viewer.setAttribute("height", height);
+                viewer.setAttribute("server", server);
+                viewer.setAttribute("scene-id", sceneID);
+                // optional attributes
+                const productID = this.getAttribute("product-id");
+                const variationID = this.getAttribute("variation-id");
+                if (productID) {
+                    viewer.setAttribute("product-id", productID);
+                }
+                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;
+            }
+            return reject(new Error("ViewerController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    initAR() {
+        return new Promise((accept, reject) => {
+            if (!util_1.Util.canAugment()) {
+                return reject(new Error("ViewerController.initAR() - cannot proceed as AR not available in context"));
+            }
+            const productID = this.getAttribute("product-id");
+            if (productID) {
+                const variationID = this.getAttribute("variation-id");
+                const product = new product_ar_1.ProductAR(productID, variationID);
+                return product.init().then(accept).catch(reject);
+            }
+            const sceneID = this.getAttribute("scene-id");
+            // otherwise, scene was set so use SceneAR
+            if (sceneID) {
+                return reject(new Error("ViewerController.initAR() - AR mode for scene-id not yet supported, use product-id"));
+            }
+            return reject(new Error("ViewerController.initAR() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+        });
+    }
+    removeRenderer() {
+        if (this._element) {
+            this._element.remove();
+            this._element = null;
+            return true;
+        }
+        return false;
+    }
+    get element() {
+        return this._element;
+    }
+}
+exports.ViewerController = ViewerController;

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

@@ -0,0 +1,17 @@
+import { LauncherAR } from "../../ar/launcher-ar";
+import { PlattarController } from "./plattar-controller";
+/**
+ * Manages an instance of the <plattar-configurator> HTML Element
+ */
+export declare class VTOController extends PlattarController {
+    private _state;
+    private _element;
+    private _prevQROpt;
+    constructor(parent: HTMLElement);
+    onAttributesUpdated(): void;
+    startQRCode(options: any): Promise<HTMLElement>;
+    startRenderer(): Promise<HTMLElement>;
+    initAR(): Promise<LauncherAR>;
+    removeRenderer(): boolean;
+    get element(): HTMLElement | null;
+}

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

@@ -0,0 +1,169 @@
+"use strict";
+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");
+/**
+ * Manages an instance of the <plattar-configurator> HTML Element
+ */
+class VTOController extends plattar_controller_1.PlattarController {
+    constructor(parent) {
+        super(parent);
+        this._state = plattar_controller_1.ControllerState.None;
+        this._element = null;
+        this._prevQROpt = null;
+    }
+    onAttributesUpdated() {
+        const state = this._state;
+        // re-render the QR Code when attributes have changed
+        if (state === plattar_controller_1.ControllerState.QRCode) {
+            this.startQRCode(this._prevQROpt);
+            return;
+        }
+    }
+    startQRCode(options) {
+        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 || plattar_controller_1.PlattarController.DEFAULT_QR_OPTIONS;
+                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);
+                }
+                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");
+                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("VTOController.startQRCode() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    startRenderer() {
+        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");
+                if (configState) {
+                    viewer.setAttribute("config-state", configState);
+                }
+                if (showAR) {
+                    viewer.setAttribute("show-ar", showAR);
+                }
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                this.append(viewer);
+                this._element = viewer;
+                this._state = plattar_controller_1.ControllerState.Renderer;
+                return;
+            }
+            return reject(new Error("VTOController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    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"));
+            }
+            // 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;
+            const sceneID = this.getAttribute("scene-id");
+            if (viewer && sceneID) {
+                return viewer.messenger.getARFile("vto").then((result) => {
+                    const rawAR = new raw_ar_1.RawAR(result.filename);
+                    return rawAR.init().then(accept).catch(reject);
+                }).catch(reject);
+            }
+            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);
+                        }
+                    });
+                    return configurator.get().then((result) => {
+                        const rawAR = new raw_ar_1.RawAR(result.filename);
+                        rawAR.init().then(accept).catch(reject);
+                    }).catch(reject);
+                }
+                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 sceneAR = new __1.SceneAR(sceneID);
+                return sceneAR.init().then(accept).catch(reject);
+            }
+            return reject(new Error("VTOController.initAR() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    removeRenderer() {
+        if (this._element) {
+            this._element.remove();
+            this._element = null;
+            return true;
+        }
+        return false;
+    }
+    get element() {
+        return this._element;
+    }
+}
+exports.VTOController = VTOController;

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

@@ -4,17 +4,8 @@ import { LauncherAR } from "../ar/launcher-ar";
  * of Plattar related content
  */
 export default class PlattarEmbed extends HTMLElement {
-    private _currentState;
     private _currentType;
-    private _qrCodeOptions;
-    private _sceneID;
-    private _productID;
-    private _variationID;
-    private _width;
-    private _height;
-    private _isReady;
-    private _server;
-    private _viewer;
+    private _controller;
     constructor();
     get viewer(): HTMLElement | null;
     connectedCallback(): void;
@@ -22,6 +13,12 @@ export default class PlattarEmbed extends HTMLElement {
     startAR(): Promise<void>;
     startViewer(): Promise<HTMLElement>;
     startQRCode(options?: any | undefined | null): Promise<HTMLElement>;
+    /**
+     * This will remove the currently active Renderer
+     *
+     * @returns - true if removed successfully, false otherwise
+     */
+    removeRenderer(): boolean;
     /**
      * This is called by the observer if any of the embed attributes have changed
      * based on the state of the embed, we update the internal structure accordingly