@plattar/plattar-ar-adapter 1.122.1 → 1.123.1

package/dist/ar/raw-ar.d.ts

@@ -0,0 +1,30 @@
+import { LauncherAR } from "./launcher-ar";
+/**
+ * Allows launching AR Experiences provided a single remote 3D Model file
+ */
+export declare class RawAR extends LauncherAR {
+    private readonly _modelLocation;
+    private _ar;
+    constructor(modelLocation?: string | undefined | null);
+    get modelLocation(): string;
+    /**
+     * Initialise the RawAR instance. This returns a Promise that resolves
+     * successfully if initialisation is successful, otherwise it will fail.
+     *
+     * filure can occur for a number of reasons but it generally means that AR
+     * cannot be performed.
+     */
+    init(): Promise<LauncherAR>;
+    /**
+     * Initialise and launch with a single function call. this is mostly for convenience.
+     * Use .init() and .start() separately for fine-grained control
+     */
+    launch(): Promise<void>;
+    /**
+     * Launches the internal AR instance using an appropriate version of AR Viewers
+     */
+    start(): void;
+    canQuicklook(): boolean;
+    canRealityViewer(): boolean;
+    canSceneViewer(): boolean;
+}

package/dist/ar/raw-ar.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawAR = void 0;
+const util_1 = require("../util/util");
+const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
+const reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
+const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
+const launcher_ar_1 = require("./launcher-ar");
+/**
+ * Allows launching AR Experiences provided a single remote 3D Model file
+ */
+class RawAR extends launcher_ar_1.LauncherAR {
+    constructor(modelLocation = null) {
+        super();
+        if (!modelLocation) {
+            throw new Error("RawAR.constructor(modelLocation) - modelLocation must be defined");
+        }
+        const lowerLoc = modelLocation.toLowerCase();
+        if (lowerLoc.endsWith("usdz") || lowerLoc.endsWith("glb") || lowerLoc.endsWith("gltf") || lowerLoc.endsWith("reality")) {
+            this._modelLocation = modelLocation;
+            this._ar = null;
+        }
+        else {
+            throw new Error("RawAR.constructor(modelLocation) - modelLocation must be one of gltf, glb, usdz or reality");
+        }
+    }
+    get modelLocation() {
+        return this._modelLocation;
+    }
+    /**
+     * Initialise the RawAR instance. This returns a Promise that resolves
+     * successfully if initialisation is successful, otherwise it will fail.
+     *
+     * filure can occur for a number of reasons but it generally means that AR
+     * cannot be performed.
+     */
+    init() {
+        return new Promise((accept, reject) => {
+            if (!util_1.Util.canAugment()) {
+                return reject(new Error("RawAR.init() - cannot proceed as AR not available in context"));
+            }
+            const modelLocation = this._modelLocation;
+            const lowerLoc = modelLocation.toLowerCase();
+            // we need to define our AR module here
+            // we are in Safari/Quicklook mode here
+            if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                // load the reality experience if dealing with reality file
+                if (lowerLoc.endsWith("reality") && util_1.Util.canRealityViewer()) {
+                    this._ar = new reality_viewer_1.default();
+                    this._ar.modelUrl = modelLocation;
+                    return accept(this);
+                }
+                // load the usdz experience if dealing with usdz file
+                if (lowerLoc.endsWith("usdz") && util_1.Util.canQuicklook()) {
+                    this._ar = new quicklook_viewer_1.default();
+                    this._ar.modelUrl = modelLocation;
+                    return accept(this);
+                }
+                return reject(new Error("RawAR.init() - cannot proceed as model is not a .usdz or .reality file"));
+            }
+            // check android
+            if (util_1.Util.canSceneViewer()) {
+                if (lowerLoc.endsWith("glb") || lowerLoc.endsWith("gltf")) {
+                    this._ar = new scene_viewer_1.default();
+                    this._ar.modelUrl = modelLocation;
+                    return accept(this);
+                }
+                return reject(new Error("RawAR.init() - cannot proceed as model is not a .glb or .gltf file"));
+            }
+            // otherwise, we didn't have AR available - it should never really reach this stage as this should be caught
+            // earlier in the process
+            return reject(new Error("RawAR.init() - could not initialise AR correctly, check values"));
+        });
+    }
+    /**
+     * Initialise and launch with a single function call. this is mostly for convenience.
+     * Use .init() and .start() separately for fine-grained control
+     */
+    launch() {
+        return new Promise((accept, reject) => {
+            this.init().then((value) => {
+                value.start();
+                return accept();
+            }).catch(reject);
+        });
+    }
+    /**
+     * Launches the internal AR instance using an appropriate version of AR Viewers
+     */
+    start() {
+        if (!this._ar) {
+            throw new Error("RawAR.start() - cannot proceed as AR instance is null");
+        }
+        // this was initialised via the init() function
+        this._ar.start();
+    }
+    canQuicklook() {
+        return this._ar && this._ar.nodeType === "Quick Look" ? true : false;
+    }
+    canRealityViewer() {
+        return this._ar && this._ar.nodeType === "Reality Viewer" ? true : false;
+    }
+    canSceneViewer() {
+        return this._ar && this._ar.nodeType === "Scene Viewer" ? true : false;
+    }
+}
+exports.RawAR = RawAR;

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;
+}