@plattar/plattar-ar-adapter 1.122.1 → 1.123.1

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,14 +4,8 @@ import { LauncherAR } from "../ar/launcher-ar";
  * of Plattar related content
  */
 export default class PlattarEmbed extends HTMLElement {
-    private _sceneID;
-    private _productID;
-    private _variationID;
-    private _width;
-    private _height;
-    private _isReady;
-    private _server;
-    private _viewer;
+    private _currentType;
+    private _controller;
     constructor();
     get viewer(): HTMLElement | null;
     connectedCallback(): void;
@@ -19,4 +13,9 @@ export default class PlattarEmbed extends HTMLElement {
     startAR(): Promise<void>;
     startViewer(): Promise<HTMLElement>;
     startQRCode(options?: any | undefined | null): Promise<HTMLElement>;
+    /**
+     * 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
+     */
+    private _OnAttributesUpdated;
 }

package/dist/embed/plattar-embed.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const plattar_api_1 = require("@plattar/plattar-api");
-const product_ar_1 = require("../ar/product-ar");
+const product_controller_1 = require("./controllers/product-controller");
+const viewer_controller_1 = require("./controllers/viewer-controller");
+const configurator_controller_1 = require("./controllers/configurator-controller");
+/**
+ * This tracks the current embed type
+ */
+var EmbedType;
+(function (EmbedType) {
+    EmbedType[EmbedType["Viewer"] = 0] = "Viewer";
+    EmbedType[EmbedType["Configurator"] = 1] = "Configurator";
+})(EmbedType || (EmbedType = {}));
 /**
  * This is the primary <plattar-embed /> node that allows easy embedding
  * of Plattar related content
@@ -9,36 +19,54 @@ const product_ar_1 = require("../ar/product-ar");
 class PlattarEmbed extends HTMLElement {
     constructor() {
         super();
-        this._sceneID = null;
-        this._productID = null;
-        this._variationID = null;
-        this._isReady = false;
-        this._width = "500px";
-        this._height = "500px";
-        this._server = "production";
-        this._viewer = null;
+        // this is the current embed type, viewer by default
+        this._currentType = EmbedType.Viewer;
+        this._controller = null;
     }
     get viewer() {
-        return this._viewer;
+        return this._controller ? this._controller.element : null;
     }
     connectedCallback() {
+        const embedType = this.hasAttribute("embed-type") ? this.getAttribute("embed-type") : "viewer";
+        if (embedType) {
+            switch (embedType.toLowerCase()) {
+                case "viewer":
+                    this._currentType = EmbedType.Viewer;
+                    break;
+                case "configurator":
+                    this._currentType = EmbedType.Configurator;
+                    break;
+                default:
+                    this._currentType = EmbedType.Viewer;
+            }
+        }
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes") {
+                    this._OnAttributesUpdated();
+                }
+            });
+        });
+        observer.observe(this, {
+            attributes: true
+        });
         const server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
         plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
-        if (server) {
-            this._server = server;
-        }
-        this._sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
-        this._productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
-        this._variationID = this.hasAttribute("variation-id") ? this.getAttribute("variation-id") : null;
-        const width = this.hasAttribute("width") ? this.getAttribute("width") : "500px";
-        const height = this.hasAttribute("height") ? this.getAttribute("height") : "500px";
-        if (width) {
-            this._width = width;
+        const sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
+        const productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
+        // decide which controller to initialise
+        if (this._currentType === EmbedType.Viewer) {
+            // initialise product if scene-id is missing but product-id is defined
+            if (!sceneID && productID) {
+                this._controller = new product_controller_1.ProductController(this);
+            }
+            else if (sceneID) {
+                this._controller = new viewer_controller_1.ViewerController(this);
+            }
         }
-        if (height) {
-            this._height = height;
+        else if (this._currentType === EmbedType.Configurator) {
+            this._controller = new configurator_controller_1.ConfiguratorController(this);
         }
-        this._isReady = true;
         const init = this.hasAttribute("init") ? this.getAttribute("init") : null;
         if (init === "ar") {
             this.startAR();
@@ -66,156 +94,44 @@ class PlattarEmbed extends HTMLElement {
     }
     initAR() {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.initAR() - cannot execute as page has not loaded yet"));
-            }
-            // if scene is not set but product is, then use ProductAR
-            if (!this._sceneID && this._productID) {
-                const product = new product_ar_1.ProductAR(this._productID, this._variationID);
-                return product.init().then(accept).catch(reject);
-            }
-            // otherwise, scene was set so use SceneAR
-            if (this._sceneID) {
-                return reject(new Error("PlattarEmbed.initAR() - scene-id not yet supported"));
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.initAR() - cannot execute as controller has not loaded yet"));
             }
-            return reject(new Error("PlattarEmbed.initAR() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+            return this._controller.initAR().then(accept).catch(reject);
         });
     }
     startAR() {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.startAR() - cannot execute as page has not loaded yet"));
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.startAR() - cannot execute as controller has not loaded yet"));
             }
-            this.initAR().then((launcher) => {
-                launcher.start();
-                accept();
-            }).catch(reject);
+            return this._controller.startAR().then(accept).catch(reject);
         });
     }
     startViewer() {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.startViewer() - cannot execute as page has not loaded yet"));
-            }
-            if (this._viewer) {
-                this._viewer.remove();
-                this._viewer = null;
-            }
-            // if scene is set, we use <plattar-viewer /> node from plattar-web
-            if (this._sceneID) {
-                const viewer = document.createElement("plattar-viewer");
-                viewer.setAttribute("width", this._width);
-                viewer.setAttribute("height", this._height);
-                viewer.setAttribute("server", this._server);
-                viewer.setAttribute("scene-id", this._sceneID);
-                if (this._productID) {
-                    viewer.setAttribute("product-id", this._productID);
-                }
-                if (this._variationID) {
-                    viewer.setAttribute("variation-id", this._variationID);
-                }
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                return;
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.startViewer() - cannot execute as controller has not loaded yet"));
             }
-            // if product is set, we use <plattar-product /> node from plattar-web
-            if (this._productID) {
-                const viewer = document.createElement("plattar-product");
-                viewer.setAttribute("width", this._width);
-                viewer.setAttribute("height", this._height);
-                viewer.setAttribute("server", this._server);
-                viewer.setAttribute("product-id", this._productID);
-                if (this._variationID) {
-                    viewer.setAttribute("variation-id", this._variationID);
-                }
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                return;
-            }
-            return reject(new Error("PlattarEmbed.startViewer() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+            return this._controller.startRenderer().then(accept).catch(reject);
         });
     }
     startQRCode(options = null) {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as page has not loaded yet"));
-            }
-            const opt = options || {
-                color: "#101721",
-                qrType: "default",
-                margin: 0
-            };
-            if (this._viewer) {
-                this._viewer.remove();
-                this._viewer = null;
-            }
-            // if scene is set, we embed a QR code that takes us to viewer.html
-            if (this._sceneID) {
-                const viewer = document.createElement("plattar-qrcode");
-                viewer.setAttribute("width", this._width);
-                viewer.setAttribute("height", this._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=" + this._sceneID;
-                if (this._productID) {
-                    dst += "&productId=" + this._productID;
-                }
-                if (this._variationID) {
-                    dst += "&variationId=" + this._variationID;
-                }
-                viewer.setAttribute("url", dst);
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                return;
-            }
-            // if product is set, we embed a QR code that takes us to product.html
-            if (this._productID) {
-                const viewer = document.createElement("plattar-qrcode");
-                viewer.setAttribute("width", this._width);
-                viewer.setAttribute("height", this._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/product.html?product_id=" + this._productID;
-                if (this._variationID) {
-                    dst += "&variation_id=" + this._variationID;
-                }
-                viewer.setAttribute("url", dst);
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                return;
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as controller has not loaded yet"));
             }
-            return reject(new Error("PlattarEmbed.startQRCode() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+            return this._controller.startQRCode(options).then(accept).catch(reject);
         });
     }
+    /**
+     * 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
+     */
+    _OnAttributesUpdated() {
+        if (this._controller) {
+            this._controller.onAttributesUpdated();
+        }
+    }
 }
 exports.default = PlattarEmbed;

package/dist/index.d.ts

@@ -5,4 +5,5 @@ 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";

package/dist/index.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Util = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.ConfiguratorAR = exports.version = exports.PlattarQRCode = exports.PlattarWeb = void 0;
+exports.Util = exports.RawAR = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.ConfiguratorAR = 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"));
@@ -34,6 +34,8 @@ var scene_ar_1 = require("./ar/scene-ar");
 Object.defineProperty(exports, "SceneAR", { enumerable: true, get: function () { return scene_ar_1.SceneAR; } });
 var model_ar_1 = require("./ar/model-ar");
 Object.defineProperty(exports, "ModelAR", { enumerable: true, get: function () { return model_ar_1.ModelAR; } });
+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; } });
 const plattar_embed_1 = __importDefault(require("./embed/plattar-embed"));

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.122.1",
+  "version": "1.123.1",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,15 +39,16 @@
   "dependencies": {
     "@plattar/plattar-analytics": "^1.117.2",
     "@plattar/plattar-api": "^1.120.1",
-    "@plattar/plattar-qrcode": "1.120.3",
-    "@plattar/plattar-web": "^1.122.2"
+    "@plattar/plattar-qrcode": "1.122.1",
+    "@plattar/plattar-services": "^1.120.1",
+    "@plattar/plattar-web": "^1.122.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.10",
-    "@babel/preset-env": "^7.16.10",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
     "browserify": "^17.0.0",
-    "typescript": "^4.5.4",
+    "typescript": "^4.5.5",
     "uglify-es": "^3.3.9"
   },
   "publishConfig": {