@plattar/plattar-ar-adapter 1.188.3 → 1.188.5

package/build/es2019/plattar-ar-adapter.js

@@ -1219,8 +1219,11 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         return super.startARQRCode(options);
     }
     async startViewerQRCode(options) {
+        const opt = this._GetDefaultQROptions(options);
         // remove the old renderer instance if any
-        this.removeRenderer();
+        if (!opt.detached) {
+            this.removeRenderer();
+        }
         const sceneID = this.getAttribute("scene-id");
         if (!sceneID) {
             throw new Error("ConfiguratorController.startViewerQRCode() - minimum required attributes not set, use scene-id as a minimum");
@@ -1250,9 +1253,10 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
             // config state is not available
             configState = null;
         }
-        const opt = options || this._GetDefaultQROptions();
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        if (!opt.detached) {
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -1289,13 +1293,18 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
             dst += "&scene_graph_id=" + sceneGraphID;
         }
         viewer.setAttribute("url", opt.url || dst);
-        this._state = plattar_controller_1.ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = plattar_controller_1.ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                this.append(viewer);
+            });
+        }
         return new Promise((accept, reject) => {
-            viewer.onload = () => {
-                return accept(viewer);
-            };
-            this.append(viewer);
+            return accept(viewer);
         });
     }
     async startRenderer() {
@@ -1492,15 +1501,19 @@ class GalleryController extends plattar_controller_1.PlattarController {
         }
     }
     async startViewerQRCode(options) {
+        const opt = this._GetDefaultQROptions(options);
         // remove the old renderer instance if any
-        this.removeRenderer();
+        if (!opt.detached) {
+            this.removeRenderer();
+        }
         const sceneID = this.getAttribute("scene-id");
         if (!sceneID) {
             throw new Error("GalleryController.startViewerQRCode() - minimum required attributes not set, use scene-id as a minimum");
         }
-        const opt = options || this._GetDefaultQROptions();
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        if (!opt.detached) {
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -1518,13 +1531,18 @@ class GalleryController extends plattar_controller_1.PlattarController {
         viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
         const dst = plattar_api_1.Server.location().base + "renderer/gallery.html?scene_id=" + sceneID;
         viewer.setAttribute("url", opt.url || dst);
-        this._state = plattar_controller_1.ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = plattar_controller_1.ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                this.append(viewer);
+            });
+        }
         return new Promise((accept, reject) => {
-            viewer.onload = () => {
-                return accept(viewer);
-            };
-            this.append(viewer);
+            return accept(viewer);
         });
     }
     async startRenderer() {
@@ -1585,24 +1603,24 @@ class LauncherController extends plattar_controller_1.PlattarController {
     }
     async onAttributesUpdated(attributeName) {
         const state = this._state;
+        if (attributeName === "variation-id") {
+            const configState = await this.getConfiguratorState();
+            const variationIDs = this.getAttribute("variation-id");
+            const variationIDsList = variationIDs ? variationIDs.split(",") : [];
+            variationIDsList.forEach((variationID) => {
+                configState.state.setVariationID(variationID);
+            });
+        }
+        if (attributeName === "variation-sku") {
+            const configState = await this.getConfiguratorState();
+            const variationSKUs = this.getAttribute("variation-sku");
+            const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
+            variationSKUList.forEach((variationSKU) => {
+                configState.state.setVariationSKU(variationSKU);
+            });
+        }
         // re-render the QR Code when attributes have changed
         if (state === plattar_controller_1.ControllerState.QRCode) {
-            if (attributeName === "variation-id") {
-                const configState = await this.getConfiguratorState();
-                const variationIDs = this.getAttribute("variation-id");
-                const variationIDsList = variationIDs ? variationIDs.split(",") : [];
-                variationIDsList.forEach((variationID) => {
-                    configState.state.setVariationID(variationID);
-                });
-            }
-            if (attributeName === "variation-sku") {
-                const configState = await this.getConfiguratorState();
-                const variationSKUs = this.getAttribute("variation-sku");
-                const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
-                variationSKUList.forEach((variationSKU) => {
-                    configState.state.setVariationSKU(variationSKU);
-                });
-            }
             this.startQRCode(this._prevQROpt);
             return;
         }
@@ -1684,15 +1702,20 @@ class LauncherController extends plattar_controller_1.PlattarController {
         if (showBanner) {
             viewer.setAttribute("show-ar-banner", showBanner);
         }
-        if (configState) {
-            const encodedState = configState.state.encode();
-            if (encodedState.length < 6000) {
-                viewer.setAttribute("config-state", encodedState);
-            }
-        }
         if (sceneGraphID) {
             viewer.setAttribute("scene-graph-id", sceneGraphID);
         }
+        else {
+            try {
+                const sceneGraphID = await (await this.getConfiguratorState()).state.encodeSceneGraphID();
+                viewer.setAttribute("scene-graph-id", sceneGraphID);
+            }
+            catch (_err) {
+                // scene graph ID not available for some reason
+                // we will generate a new one
+                console.error(_err);
+            }
+        }
         return new Promise((accept, reject) => {
             this.append(viewer);
             if (configState) {
@@ -1803,12 +1826,15 @@ class PlattarController {
     /**
      * Default QR Code rendering options
      */
-    _GetDefaultQROptions() {
+    _GetDefaultQROptions(opt = null) {
+        const options = opt ?? {};
         return {
-            color: this.getAttribute("qr-color") || "#101721",
-            qrType: this.getAttribute("qr-style") || "default",
-            shorten: this.getAttribute("qr-shorten") || true,
-            margin: 0
+            color: options.color ?? (this.getAttribute("qr-color") || "#101721"),
+            qrType: options.qrType ?? (this.getAttribute("qr-style") || "default"),
+            shorten: options.shorten ?? (this.getBooleanAttribute("qr-shorten") || true),
+            margin: options.margin ?? 0,
+            detached: options.detached ?? (this.getBooleanAttribute("qr-detached") || false),
+            url: options.url ?? null
         };
     }
     ;
@@ -1927,11 +1953,13 @@ class PlattarController {
      * @returns
      */
     async startARQRCode(options) {
-        // remove the old renderer instance if any
-        this.removeRenderer();
-        const opt = options || this._GetDefaultQROptions();
+        const opt = this._GetDefaultQROptions(options);
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        // remove the old renderer instance if any
+        if (!opt.detached) {
+            this.removeRenderer();
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -1941,7 +1969,7 @@ class PlattarController {
             viewer.setAttribute("color", opt.color);
         }
         if (opt.margin) {
-            viewer.setAttribute("margin", "" + opt.margin);
+            viewer.setAttribute("margin", `${opt.margin}`);
         }
         if (opt.qrType) {
             viewer.setAttribute("qr-type", opt.qrType);
@@ -1949,7 +1977,7 @@ class PlattarController {
         viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
         const qrOptions = btoa(JSON.stringify(opt));
         let dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
-        let configState = null;
+        //let configState: string | null = null;
         const sceneID = this.getAttribute("scene-id");
         const embedType = this.getAttribute("embed-type");
         const productID = this.getAttribute("product-id");
@@ -1959,16 +1987,6 @@ class PlattarController {
         const arMode = this.getAttribute("ar-mode");
         const showBanner = this.getAttribute("show-ar-banner");
         const sceneGraphID = this.getAttribute("scene-graph-id");
-        try {
-            configState = (await this.getConfiguratorState()).state.encode();
-        }
-        catch (_err) {
-            // config state not available for some reason
-            configState = null;
-        }
-        if (configState) {
-            dst += "&config_state=" + configState;
-        }
         if (embedType) {
             dst += "&embed_type=" + embedType;
         }
@@ -1996,14 +2014,30 @@ class PlattarController {
         if (sceneGraphID) {
             dst += "&scene_graph_id" + sceneGraphID;
         }
+        else {
+            try {
+                const sceneGraphID = await (await this.getConfiguratorState()).state.encodeSceneGraphID();
+                dst += "&scene_graph_id=" + sceneGraphID;
+            }
+            catch (_err) {
+                // scene graph ID not available for some reason
+                // we will generate a new one
+                console.error(_err);
+            }
+        }
         viewer.setAttribute("url", opt.url || dst);
-        this._state = ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                this.append(viewer);
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+            });
+        }
         return new Promise((accept, reject) => {
-            this.append(viewer);
-            viewer.onload = () => {
-                return accept(viewer);
-            };
+            return accept(viewer);
         });
     }
     /**
@@ -2397,15 +2431,19 @@ class VTOController extends plattar_controller_1.PlattarController {
         }
     }
     async startViewerQRCode(options) {
+        const opt = this._GetDefaultQROptions(options);
         // remove the old renderer instance if any
-        this.removeRenderer();
+        if (!opt.detached) {
+            this.removeRenderer();
+        }
         const sceneID = this.getAttribute("scene-id");
         if (!sceneID) {
             throw new Error("VTOController.startQRCode() - minimum required attributes not set, use scene-id as a minimum");
         }
-        const opt = options || this._GetDefaultQROptions();
         const viewer = document.createElement("plattar-qrcode");
-        this._element = viewer;
+        if (!opt.detached) {
+            this._element = viewer;
+        }
         // required attributes with defaults for plattar-viewer node
         const width = this.getAttribute("width") || "500px";
         const height = this.getAttribute("height") || "500px";
@@ -2451,13 +2489,18 @@ class VTOController extends plattar_controller_1.PlattarController {
             dst += "&variation_id=" + variationID;
         }
         viewer.setAttribute("url", opt.url || dst);
-        this._state = plattar_controller_1.ControllerState.QRCode;
         this._prevQROpt = opt;
+        if (!opt.detached) {
+            this._state = plattar_controller_1.ControllerState.QRCode;
+            return new Promise((accept, reject) => {
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                this.append(viewer);
+            });
+        }
         return new Promise((accept, reject) => {
-            viewer.onload = () => {
-                return accept(viewer);
-            };
-            this.append(viewer);
+            return accept(viewer);
         });
     }
     async startRenderer() {
@@ -3516,6 +3559,37 @@ class ConfiguratorState {
     encode() {
         return btoa(JSON.stringify(this._state));
     }
+    async encodeSceneGraphID() {
+        const graph = this.sceneGraph;
+        // some scene-graphs are very large in size, we store it remotely
+        // this storage will expire in 10 minutes so this is a non-permanent version
+        // and is designed for quick ar
+        const url = `https://c.plattar.com/v3/redir/store`;
+        // finally send our scene-graph to the backend to generate the AR file and return
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    data: {
+                        attributes: {
+                            data: graph
+                        }
+                    }
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`ConfiguratorState.encodeSceneGraphID() - network response was not ok ${response.status}`);
+            }
+            const data = await response.json();
+            return data.data.id;
+        }
+        catch (error) {
+            throw new Error(`ConfiguratorState.encodeSceneGraphID() - there was a request error to ${url}, error was ${error.message}`);
+        }
+    }
     /**
      * Compiles and returns the Dynamic Scene Graph (Updated for 2025 for DynamicAR)
      * NOTE: Eventually this structure should replace ConfiguratorState
@@ -3653,7 +3727,7 @@ exports.Util = Util;
 },{}],20:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = "1.188.3";
+exports.default = "1.188.5";
 
 },{}],21:[function(require,module,exports){
 "use strict";