@plattar/plattar-ar-adapter 1.123.1 → 1.123.5

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

@@ -13,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

package/dist/embed/plattar-embed.js

@@ -4,6 +4,7 @@ const plattar_api_1 = require("@plattar/plattar-api");
 const product_controller_1 = require("./controllers/product-controller");
 const viewer_controller_1 = require("./controllers/viewer-controller");
 const configurator_controller_1 = require("./controllers/configurator-controller");
+const vto_controller_1 = require("./controllers/vto-controller");
 /**
  * This tracks the current embed type
  */
@@ -11,6 +12,7 @@ var EmbedType;
 (function (EmbedType) {
     EmbedType[EmbedType["Viewer"] = 0] = "Viewer";
     EmbedType[EmbedType["Configurator"] = 1] = "Configurator";
+    EmbedType[EmbedType["VTO"] = 2] = "VTO";
 })(EmbedType || (EmbedType = {}));
 /**
  * This is the primary <plattar-embed /> node that allows easy embedding
@@ -33,6 +35,9 @@ class PlattarEmbed extends HTMLElement {
                 case "viewer":
                     this._currentType = EmbedType.Viewer;
                     break;
+                case "vto":
+                    this._currentType = EmbedType.VTO;
+                    break;
                 case "configurator":
                     this._currentType = EmbedType.Configurator;
                     break;
@@ -67,6 +72,9 @@ class PlattarEmbed extends HTMLElement {
         else if (this._currentType === EmbedType.Configurator) {
             this._controller = new configurator_controller_1.ConfiguratorController(this);
         }
+        else if (this._currentType === EmbedType.VTO) {
+            this._controller = new vto_controller_1.VTOController(this);
+        }
         const init = this.hasAttribute("init") ? this.getAttribute("init") : null;
         if (init === "ar") {
             this.startAR();
@@ -124,6 +132,17 @@ class PlattarEmbed extends HTMLElement {
             return this._controller.startQRCode(options).then(accept).catch(reject);
         });
     }
+    /**
+     * This will remove the currently active Renderer
+     *
+     * @returns - true if removed successfully, false otherwise
+     */
+    removeRenderer() {
+        if (!this._controller) {
+            return false;
+        }
+        return this._controller.removeRenderer();
+    }
     /**
      * 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

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export * as PlattarWeb from "@plattar/plattar-web";
 export * as PlattarQRCode from "@plattar/plattar-qrcode";
 export * as version from "./version";
-export { ConfiguratorAR } from "./ar/configurator-ar";
 export { ProductAR } from "./ar/product-ar";
 export { SceneAR } from "./ar/scene-ar";
 export { ModelAR } from "./ar/model-ar";
 export { RawAR } from "./ar/raw-ar";
 export { Util } from "./util/util";
+export { ConfiguratorState } from "./util/configurator-state";

package/dist/index.js

@@ -22,12 +22,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Util = exports.RawAR = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.ConfiguratorAR = exports.version = exports.PlattarQRCode = exports.PlattarWeb = void 0;
+exports.ConfiguratorState = exports.Util = exports.RawAR = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.version = exports.PlattarQRCode = exports.PlattarWeb = void 0;
 exports.PlattarWeb = __importStar(require("@plattar/plattar-web"));
 exports.PlattarQRCode = __importStar(require("@plattar/plattar-qrcode"));
 exports.version = __importStar(require("./version"));
-var configurator_ar_1 = require("./ar/configurator-ar");
-Object.defineProperty(exports, "ConfiguratorAR", { enumerable: true, get: function () { return configurator_ar_1.ConfiguratorAR; } });
 var product_ar_1 = require("./ar/product-ar");
 Object.defineProperty(exports, "ProductAR", { enumerable: true, get: function () { return product_ar_1.ProductAR; } });
 var scene_ar_1 = require("./ar/scene-ar");
@@ -38,6 +36,8 @@ var raw_ar_1 = require("./ar/raw-ar");
 Object.defineProperty(exports, "RawAR", { enumerable: true, get: function () { return raw_ar_1.RawAR; } });
 var util_1 = require("./util/util");
 Object.defineProperty(exports, "Util", { enumerable: true, get: function () { return util_1.Util; } });
+var configurator_state_1 = require("./util/configurator-state");
+Object.defineProperty(exports, "ConfiguratorState", { enumerable: true, get: function () { return configurator_state_1.ConfiguratorState; } });
 const plattar_embed_1 = __importDefault(require("./embed/plattar-embed"));
 const version_1 = __importDefault(require("./version"));
 if (customElements) {

package/dist/util/configurator-state.d.ts

@@ -0,0 +1,26 @@
+export interface SceneProductData {
+    scene_product_id: string;
+    product_variation_id: string;
+    meta_data: {
+        augment: boolean;
+    };
+}
+export declare class ConfiguratorState {
+    private readonly _state;
+    constructor(state?: string | null | undefined);
+    /**
+     * Adds a new Scene Product/Variation combo with meta-data into the Configurator State
+     *
+     * @param sceneProductID - The Scene Product ID to be used (as defined in Plattar CMS)
+     * @param productVariationID - The Product Variation ID to be used (as defined in Plattar CMS)
+     * @param metaData - Arbitrary meta-data that can be used against certain operaions
+     */
+    addSceneProduct(sceneProductID: string, productVariationID: string, metaData?: any | null | undefined): void;
+    /**
+     * Iterate over the internal state data
+     */
+    forEach(callback: (data: SceneProductData) => void): void;
+    get length(): number;
+    static decode(state: string): ConfiguratorState;
+    encode(): string;
+}

package/dist/util/configurator-state.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfiguratorState = void 0;
+class ConfiguratorState {
+    constructor(state = null) {
+        const defaultState = {
+            meta: {
+                scene_product_index: 0,
+                product_variation_index: 1,
+                meta_index: 2,
+            },
+            states: []
+        };
+        if (state) {
+            try {
+                const decodedb64State = atob(state);
+                const parsedState = JSON.parse(decodedb64State);
+                // set the meta data
+                if (parsedState.meta) {
+                    defaultState.meta.scene_product_index = parsedState.meta.scene_product_index || 0;
+                    defaultState.meta.product_variation_index = parsedState.meta.product_variation_index || 1;
+                    defaultState.meta.meta_index = parsedState.meta.meta_index || 2;
+                }
+                defaultState.states = parsedState.states || [];
+            }
+            catch (err) {
+                console.error("ConfiguratorState.constructor() - there was an error parsing configurator state");
+                console.error(err);
+            }
+        }
+        this._state = defaultState;
+    }
+    /**
+     * Adds a new Scene Product/Variation combo with meta-data into the Configurator State
+     *
+     * @param sceneProductID - The Scene Product ID to be used (as defined in Plattar CMS)
+     * @param productVariationID - The Product Variation ID to be used (as defined in Plattar CMS)
+     * @param metaData - Arbitrary meta-data that can be used against certain operaions
+     */
+    addSceneProduct(sceneProductID, productVariationID, metaData = null) {
+        if (sceneProductID && productVariationID) {
+            const states = this._state.states;
+            const meta = this._state.meta;
+            const newData = [];
+            newData.splice(meta.scene_product_index, 0, sceneProductID);
+            newData.splice(meta.product_variation_index, 0, productVariationID);
+            if (metaData) {
+                newData.splice(meta.meta_index, 0, metaData);
+            }
+            states.push(newData);
+        }
+    }
+    /**
+     * Iterate over the internal state data
+     */
+    forEach(callback) {
+        const states = this._state.states;
+        const meta = this._state.meta;
+        if (states.length > 0) {
+            states.forEach((productState) => {
+                if (productState.length === 2) {
+                    callback({
+                        scene_product_id: productState[meta.scene_product_index],
+                        product_variation_id: productState[meta.product_variation_index],
+                        meta_data: {
+                            augment: true
+                        }
+                    });
+                }
+                else if (productState.length === 3) {
+                    callback({
+                        scene_product_id: productState[meta.scene_product_index],
+                        product_variation_id: productState[meta.product_variation_index],
+                        meta_data: {
+                            augment: productState[meta.meta_index].augment || true
+                        }
+                    });
+                }
+            });
+        }
+    }
+    get length() {
+        return this._state.states.length;
+    }
+    static decode(state) {
+        return new ConfiguratorState(state);
+    }
+    encode() {
+        return btoa(JSON.stringify(this._state));
+    }
+}
+exports.ConfiguratorState = ConfiguratorState;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.123.1";
+declare const _default: "1.123.5";
 export default _default;

package/dist/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = "1.123.1";
+exports.default = "1.123.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.123.1",
+  "version": "1.123.5",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,15 +41,15 @@
     "@plattar/plattar-api": "^1.120.1",
     "@plattar/plattar-qrcode": "1.122.1",
     "@plattar/plattar-services": "^1.120.1",
-    "@plattar/plattar-web": "^1.122.3"
+    "@plattar/plattar-web": "^1.123.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.17.0",
+    "@babel/cli": "^7.17.3",
+    "@babel/core": "^7.17.4",
     "@babel/preset-env": "^7.16.11",
     "browserify": "^17.0.0",
     "typescript": "^4.5.5",
-    "uglify-es": "^3.3.9"
+    "uglify-js": "^3.15.1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,9 +0,0 @@
-import { LauncherAR } from "./launcher-ar";
-/**
- * Performs AR related to Plattar Configurator functionalities
- */
-export declare class ConfiguratorAR extends LauncherAR {
-    init(): Promise<LauncherAR>;
-    launch(): Promise<void>;
-    start(): void;
-}

package/dist/ar/configurator-ar.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfiguratorAR = void 0;
-const launcher_ar_1 = require("./launcher-ar");
-/**
- * Performs AR related to Plattar Configurator functionalities
- */
-class ConfiguratorAR extends launcher_ar_1.LauncherAR {
-    init() {
-        throw new Error("Method not implemented.");
-    }
-    launch() {
-        throw new Error("Method not implemented.");
-    }
-    start() {
-        throw new Error("Method not implemented.");
-    }
-}
-exports.ConfiguratorAR = ConfiguratorAR;