@plattar/plattar-ar-adapter
Version:
Plattar AR Adapter for interfacing with Google & Apple WebAR
248 lines (247 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VTOController = void 0;
const plattar_api_1 = require("@plattar/plattar-api");
const __1 = require("../..");
const util_1 = require("../../util/util");
const plattar_controller_1 = require("./plattar-controller");
const configurator_ar_1 = require("../../ar/configurator-ar");
/**
* Manages an instance of the <plattar-configurator> HTML Element
*/
class VTOController 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 (state === plattar_controller_1.ControllerState.Renderer) {
const viewer = this.element;
if (viewer) {
if (attributeName === "variation-id") {
const variationIDs = this.getAttribute("variation-id");
const variationIDsList = variationIDs ? variationIDs.split(",") : [];
if (variationIDsList.length > 0) {
await viewer.messenger.selectVariationID(variationIDsList);
}
}
if (attributeName === "variation-sku") {
const variationSKUs = this.getAttribute("variation-sku");
const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
if (variationSKUList.length > 0) {
await viewer.messenger.selectVariationSKU(variationSKUList);
}
}
}
return;
}
// 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;
}
}
async startViewerQRCode(options) {
const opt = this._GetDefaultQROptions(options);
// remove the old renderer instance if any
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 viewer = document.createElement("plattar-qrcode");
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";
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);
}
viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
let dst = plattar_api_1.Server.location().base + "renderer/facear.html?scene_id=" + sceneID;
// optional attributes
let configState = null;
try {
configState = await this.getConfiguratorState();
}
catch (_err) {
// config state is not available
configState = null;
}
const showAR = this.getAttribute("show-ar");
const productID = this.getAttribute("product-id");
const sceneProductID = this.getAttribute("scene-product-id");
const variationID = this.getAttribute("variation-id");
if (configState) {
dst += "&config_state=" + configState.state.encode();
}
if (showAR) {
dst += "&show_ar=" + showAR;
}
if (productID) {
dst += "&product_id=" + productID;
}
if (sceneProductID) {
dst += "&scene_product_id=" + sceneProductID;
}
if (variationID) {
dst += "&variation_id=" + variationID;
}
viewer.setAttribute("url", opt.url || dst);
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) => {
return accept(viewer);
});
}
async startRenderer() {
// remove the old renderer instance if any
this.removeRenderer();
const sceneID = this.getAttribute("scene-id");
if (!sceneID) {
throw new Error("VTOController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
}
this._state = plattar_controller_1.ControllerState.Renderer;
// 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");
this._element = viewer;
viewer.setAttribute("width", width);
viewer.setAttribute("height", height);
viewer.setAttribute("server", server);
viewer.setAttribute("scene-id", sceneID);
// optional attributes
let configState = null;
try {
configState = await this.getConfiguratorState();
}
catch (_err) {
// config state not available
configState = null;
}
const showAR = this.getAttribute("show-ar");
const productID = this.getAttribute("product-id");
const sceneProductID = this.getAttribute("scene-product-id");
const variationID = this.getAttribute("variation-id");
if (configState) {
viewer.setAttribute("config-state", configState.state.encode());
}
if (showAR) {
viewer.setAttribute("show-ar", showAR);
}
if (productID) {
viewer.setAttribute("product-id", productID);
}
if (sceneProductID) {
viewer.setAttribute("scene-product-id", sceneProductID);
}
if (variationID) {
viewer.setAttribute("variation-id", variationID);
}
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("VTOController.initAR() - cannot proceed as VTO AR not available in context");
}
if (!(util_1.Util.isSafari() || util_1.Util.isChromeOnIOS())) {
throw new Error("VTOController.initAR() - cannot proceed as VTO AR only available on IOS Mobile devices");
}
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("VTOController.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 = new __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("VTOController.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("VTOController.initAR() - generated AR minimum required attributes not set, use scene-id as a minimum");
}
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.VTOController = VTOController;