@plattar/plattar-ar-adapter
Version:
Plattar AR Adapter for interfacing with Google & Apple WebAR
229 lines (228 loc) • 9.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LauncherController = void 0;
const scene_product_ar_1 = require("../../ar/scene-product-ar");
const util_1 = require("../../util/util");
const plattar_controller_1 = require("./plattar-controller");
const configurator_ar_1 = require("../../ar/configurator-ar");
const scene_graph_ar_1 = require("../../ar/scene-graph-ar");
/**
* Manages an instance of the <plattar-configurator> HTML Element
*/
class LauncherController extends plattar_controller_1.PlattarController {
constructor() {
super(...arguments);
this._cachedConfigState = null;
}
async getConfiguratorState() {
if (this._cachedConfigState) {
return this._cachedConfigState;
}
this._cachedConfigState = this.createConfiguratorState();
return this._cachedConfigState;
}
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) {
this.startQRCode(this._prevQROpt);
return;
}
}
async startARQRCode(options) {
try {
const dState = await this.getConfiguratorState();
// if this is declared, we have a furniture scene that we need to re-create the embed
// with new attributes
const product = dState.state.firstOfType("product");
if (product) {
this.parent.lockObserver();
this.parent.destroy();
this.setAttribute("product-id", product.scene_product_id);
this.removeAttribute("scene-id");
this.parent.unlockObserver();
const controller = this.parent.create();
if (controller) {
return controller.startARQRCode(options);
}
return Promise.reject(new Error("LauncherController.startARQRCode() - legacy product transition failed"));
}
}
catch (_err) {
}
return super.startARQRCode(options);
}
async startViewerQRCode(options) {
return this.startARQRCode(options);
}
async startRenderer() {
// remove the old renderer instance if any
this.removeRenderer();
const sceneID = this.getAttribute("scene-id");
if (!sceneID) {
throw new Error("LauncherController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
}
// optional attributes
const configState = await this.getConfiguratorState();
this._state = plattar_controller_1.ControllerState.Renderer;
const qrOptions = btoa(JSON.stringify(this._GetDefaultQROptions()));
const embedType = this.getAttribute("embed-type");
const productID = this.getAttribute("product-id");
const sceneProductID = this.getAttribute("scene-product-id");
const variationID = this.getAttribute("variation-id");
const variationSKU = this.getAttribute("variation-sku");
const arMode = this.getAttribute("ar-mode");
const showBanner = this.getAttribute("show-ar-banner");
const sceneGraphID = this.getAttribute("scene-graph-id");
// required attributes with defaults for plattar-launcher node
const width = this.getAttribute("width") || "500px";
const height = this.getAttribute("height") || "500px";
const server = this.getAttribute("server") || "production";
const viewer = document.createElement("plattar-launcher");
this._element = viewer;
viewer.setAttribute("width", width);
viewer.setAttribute("height", height);
viewer.setAttribute("server", server);
viewer.setAttribute("scene-id", sceneID);
viewer.setAttribute("qr-options", qrOptions);
if (embedType) {
viewer.setAttribute("embed-type", embedType);
}
if (productID) {
viewer.setAttribute("product-id", productID);
}
if (sceneProductID) {
viewer.setAttribute("scene-product-id", sceneProductID);
}
if (variationID) {
viewer.setAttribute("variation-id", variationID);
}
if (variationSKU) {
viewer.setAttribute("variation-sku", variationSKU);
}
if (arMode) {
viewer.setAttribute("ar-mode", arMode);
}
if (showBanner) {
viewer.setAttribute("show-ar-banner", showBanner);
}
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) {
this.setupMessengerObservers(viewer, configState);
}
return accept(viewer);
});
}
async initAR() {
if (!util_1.Util.canAugment()) {
throw new Error("LauncherController.initAR() - cannot proceed as AR not available in context");
}
try {
const dState = await this.getConfiguratorState();
// if this is declared, we have a furniture scene that we need to re-create the embed
// with new attributes
const product = dState.state.firstOfType("product");
if (product) {
this.parent.lockObserver();
this.parent.destroy();
this.setAttribute("product-id", product.scene_product_id);
this.removeAttribute("scene-id");
this.parent.unlockObserver();
const controller = this.parent.create();
if (controller) {
return controller.initAR();
}
return Promise.reject(new Error("LauncherController.initAR() - legacy product transition failed"));
}
}
catch (_err) {
// config state is not available
}
const arMode = this.getAttribute("ar-mode") || "generated";
switch (arMode.toLowerCase()) {
case "inherited":
return this._InitARInherited();
case "generated":
default:
return this._InitARGenerated();
}
}
/**
* Private Function - This launches the Static/Inherited AR Mode
*/
async _InitARInherited() {
const sceneID = this.getAttribute("scene-id");
if (!sceneID) {
throw new Error("LauncherController.initAR() - inherited AR minimum required attributes not set, use scene-id as a minimum");
}
const state = (await this.getConfiguratorState()).state;
const first = state.firstActiveOfType("sceneproduct");
if (first) {
//const sceneProductAR: SceneProductAR = new SceneProductAR(first.scene_product_id, first.product_variation_id);
const sceneProductAR = new scene_product_ar_1.SceneProductAR({
productID: first.scene_product_id,
variationID: first.product_variation_id,
variationSKU: null,
useARBanner: this.getBooleanAttribute("show-ar-banner")
});
return sceneProductAR.init();
}
throw new Error("LauncherController.initAR() - invalid decoded config-state does not have any product states");
}
/**
* Private Function - This launches the Dynamic/Generated AR Mode
*/
async _InitARGenerated() {
const sceneID = this.getAttribute("scene-id");
if (!sceneID) {
throw new Error("LauncherController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
}
const graphID = this.getAttribute("scene-graph-id");
// use the scene-graph route if available
if (graphID) {
const configAR = new scene_graph_ar_1.SceneGraphAR({
useARBanner: this.getBooleanAttribute("show-ar-banner"),
id: graphID,
sceneID: sceneID
});
return configAR.init();
}
const configAR = new configurator_ar_1.ConfiguratorAR({ state: await this.getConfiguratorState(), useARBanner: this.getBooleanAttribute("show-ar-banner") });
return configAR.init();
}
get element() {
return this._element;
}
}
exports.LauncherController = LauncherController;