@plattar/plattar-ar-adapter 1.122.4 → 1.123.1

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

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

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

@@ -0,0 +1,186 @@
+"use strict";
+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 util_1 = require("../../util/util");
+const plattar_controller_1 = require("./plattar-controller");
+/**
+ * Manages an instance of the <plattar-configurator> HTML Element
+ */
+class ConfiguratorController 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/configurator.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("ConfiguratorController.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-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");
+                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("ConfiguratorController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
+        });
+    }
+    startAR() {
+        return new Promise((accept, reject) => {
+            this.initAR().then((launcher) => {
+                launcher.start();
+                accept();
+            }).catch(reject);
+        });
+    }
+    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"));
+            }
+            // 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) {
+                let output = "glb";
+                if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                    output = "usdz";
+                }
+                return viewer.messenger.getARFile(output).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) {
+                try {
+                    const decodedb64State = atob(configState);
+                    const state = JSON.parse(decodedb64State);
+                    if (state.meta) {
+                        const sceneProductIndex = state.meta.scene_product_index || 0;
+                        const variationIndex = state.meta.product_variation_index || 1;
+                        const states = state.states || [];
+                        if (states.length > 0) {
+                            const configurator = new plattar_services_1.Configurator();
+                            states.forEach((productState) => {
+                                configurator.addSceneProduct(productState[sceneProductIndex], productState[variationIndex]);
+                            });
+                            if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                                configurator.output = "usdz";
+                            }
+                            if (util_1.Util.canSceneViewer()) {
+                                configurator.output = "glb";
+                            }
+                            const server = this.getAttribute("server") || "production";
+                            configurator.server = server;
+                            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("ConfiguratorController.initAR() - invalid config-state does not have any product states"));
+                    }
+                    return reject(new Error("ConfiguratorController.initAR() - invalid config-state for configurator"));
+                }
+                catch (err) {
+                    return reject(err);
+                }
+            }
+            return reject(new Error("ConfiguratorController.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.ConfiguratorController = ConfiguratorController;

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

@@ -0,0 +1,62 @@
+import { LauncherAR } from "../../ar/launcher-ar";
+export declare enum ControllerState {
+    None = 0,
+    Renderer = 1,
+    QRCode = 2
+}
+/**
+ * All Plattar Controllers are derived from the same interface
+ */
+export declare abstract class PlattarController {
+    /**
+     * Default QR Code rendering options
+     */
+    static get DEFAULT_QR_OPTIONS(): any;
+    private readonly _parent;
+    constructor(parent: HTMLElement);
+    /**
+     * Called by the parent when a HTML Attribute has changed and the controller
+     * requires an update
+     */
+    abstract onAttributesUpdated(): void;
+    /**
+     * Start Rendering a QR Code with the provided options
+     * @param options (optional) - The QR Code Options
+     */
+    abstract startQRCode(options: any | undefined | null): Promise<HTMLElement>;
+    /**
+     * Start the underlying Plattar Renderer for this Controller
+     */
+    abstract startRenderer(): Promise<HTMLElement>;
+    /**
+     * Initialise and start AR mode if available
+     */
+    abstract startAR(): Promise<void>;
+    /**
+     * Initialise and return a launcher that can be used to start AR
+     */
+    abstract initAR(): Promise<LauncherAR>;
+    /**
+     * Removes the currently active renderer view from the DOM
+     */
+    abstract removeRenderer(): boolean;
+    /**
+     * Get the underlying renderer component (if any)
+     */
+    abstract get element(): HTMLElement | null;
+    /**
+     * Returns the Parent Instance
+     */
+    get parent(): HTMLElement;
+    /**
+     * Returns the specified attribute from the parent
+     * @param attribute - The name of thhe attribute
+     * @returns - The attribute value or null
+     */
+    getAttribute(attribute: string): string | null;
+    /**
+     * Appends the provided element into the shadow-root of the parent element
+     * @param element - The element to append
+     */
+    append(element: HTMLElement): void;
+}

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

@@ -0,0 +1,51 @@
+"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
+        };
+    }
+    ;
+    /**
+     * 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,18 @@
+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>;
+    startAR(): Promise<void>;
+    initAR(): Promise<LauncherAR>;
+    removeRenderer(): boolean;
+    get element(): HTMLElement | null;
+}

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

@@ -0,0 +1,141 @@
+"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"));
+        });
+    }
+    startAR() {
+        return new Promise((accept, reject) => {
+            this.initAR().then((launcher) => {
+                launcher.start();
+                accept();
+            }).catch(reject);
+        });
+    }
+    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,18 @@
+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>;
+    startAR(): Promise<void>;
+    initAR(): Promise<LauncherAR>;
+    removeRenderer(): boolean;
+    get element(): HTMLElement | null;
+}

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

@@ -0,0 +1,155 @@
+"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"));
+        });
+    }
+    startAR() {
+        return new Promise((accept, reject) => {
+            this.initAR().then((launcher) => {
+                launcher.start();
+                accept();
+            }).catch(reject);
+        });
+    }
+    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/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;