@plattar/plattar-ar-adapter 1.188.3 → 1.188.5

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

@@ -1,6 +1,6 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { DecodedConfiguratorState } from "../../util/configurator-state";
-import { PlattarController } from "./plattar-controller";
+import { PlattarController, QRCodeOptions } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -9,7 +9,7 @@ export declare class ConfiguratorController extends PlattarController {
     getConfiguratorState(): Promise<DecodedConfiguratorState>;
     onAttributesUpdated(attributeName: string): Promise<void>;
     startARQRCode(options: any): Promise<HTMLElement>;
-    startViewerQRCode(options: any): Promise<HTMLElement>;
+    startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     /**

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

@@ -90,8 +90,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");
@@ -121,9 +124,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";
@@ -160,13 +164,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() {

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

@@ -1,6 +1,6 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { DecodedConfiguratorState } from "../../util/configurator-state";
-import { PlattarController } from "./plattar-controller";
+import { PlattarController, QRCodeOptions } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -8,7 +8,7 @@ export declare class GalleryController extends PlattarController {
     private _cachedConfigState;
     getConfiguratorState(): Promise<DecodedConfiguratorState>;
     onAttributesUpdated(attributeName: string): Promise<void>;
-    startViewerQRCode(options: any): Promise<HTMLElement>;
+    startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     get element(): HTMLElement | null;

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

@@ -43,15 +43,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";
@@ -69,13 +73,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() {

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

@@ -23,24 +23,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;
         }
@@ -122,15 +122,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) {

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

@@ -6,6 +6,14 @@ export declare enum ControllerState {
     Renderer = 1,
     QRCode = 2
 }
+export interface QRCodeOptions {
+    readonly color: string;
+    readonly qrType: string;
+    readonly shorten: boolean;
+    readonly margin: number;
+    readonly detached: boolean;
+    readonly url?: string | null;
+}
 /**
  * All Plattar Controllers are derived from the same interface
  */
@@ -13,7 +21,7 @@ export declare abstract class PlattarController {
     /**
      * Default QR Code rendering options
      */
-    protected _GetDefaultQROptions(): any;
+    protected _GetDefaultQROptions(opt?: QRCodeOptions | undefined | null): QRCodeOptions;
     private readonly _parent;
     protected _state: ControllerState;
     protected _element: HTMLElement | null;
@@ -56,19 +64,19 @@ export declare abstract class PlattarController {
      * Start Rendering a QR Code with the provided options
      * @param options (optional) - The QR Code Options
      */
-    abstract startViewerQRCode(options: any | undefined | null): Promise<HTMLElement>;
+    abstract startViewerQRCode(options: QRCodeOptions | undefined | null): Promise<HTMLElement>;
     /**
      * Decide which QR Code to render according to the qr-type attribute
      * @param options
      * @returns
      */
-    startQRCode(options: any): Promise<HTMLElement>;
+    startQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     /**
      * Displays a QR Code that sends the user direct to AR
      * @param options
      * @returns
      */
-    startARQRCode(options: any): Promise<HTMLElement>;
+    startARQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     /**
      * Initialise and return a launcher that can be used to start AR
      */

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

@@ -16,12 +16,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
         };
     }
     ;
@@ -140,11 +143,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";
@@ -154,7 +159,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);
@@ -162,7 +167,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");
@@ -172,16 +177,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;
         }
@@ -209,14 +204,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);
         });
     }
     /**

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

@@ -1,6 +1,6 @@
 import { LauncherAR } from "../../ar/launcher-ar";
 import { DecodedConfiguratorState } from "../../util/configurator-state";
-import { PlattarController } from "./plattar-controller";
+import { PlattarController, QRCodeOptions } from "./plattar-controller";
 /**
  * Manages an instance of the <plattar-configurator> HTML Element
  */
@@ -8,7 +8,7 @@ export declare class VTOController extends PlattarController {
     private _cachedConfigState;
     getConfiguratorState(): Promise<DecodedConfiguratorState>;
     onAttributesUpdated(attributeName: string): Promise<void>;
-    startViewerQRCode(options: any): Promise<HTMLElement>;
+    startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
     initAR(): Promise<LauncherAR>;
     /**

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

@@ -66,15 +66,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";
@@ -120,13 +124,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() {

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

@@ -119,6 +119,7 @@ export declare class ConfiguratorState {
      * @returns - Base64 String
      */
     encode(): string;
+    encodeSceneGraphID(): Promise<string>;
     /**
      * Compiles and returns the Dynamic Scene Graph (Updated for 2025 for DynamicAR)
      * NOTE: Eventually this structure should replace ConfiguratorState

package/dist/util/configurator-state.js

@@ -440,6 +440,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

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.188.3";
+declare const _default: "1.188.5";
 export default _default;

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plattar/plattar-ar-adapter",
-	"version": "1.188.3",
+	"version": "1.188.5",
 	"description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -44,9 +44,9 @@
 		"@plattar/plattar-web": "^1.182.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.27.0",
-		"@babel/core": "^7.26.10",
-		"@babel/preset-env": "^7.26.9",
+		"@babel/cli": "^7.27.2",
+		"@babel/core": "^7.27.4",
+		"@babel/preset-env": "^7.27.2",
 		"browserify": "^17.0.1",
 		"typescript": "^5.8.3",
 		"uglify-js": "^3.19.3"