@plattar/plattar-ar-adapter
Version:
Plattar AR Adapter for interfacing with Google & Apple WebAR
145 lines (144 loc) • 6.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebXRController = void 0;
const util_1 = require("../../util/util");
const plattar_controller_1 = require("./plattar-controller");
/**
* Manages an instance of the <plattar-ewall> HTML Element
*/
class WebXRController 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;
}
}
startViewerQRCode(options) {
return this.startQRCode(options);
}
get element() {
return this._element;
}
async startQRCode(options) {
// remove the old renderer instance if any
this.removeRenderer();
const sceneID = this.getAttribute("scene-id");
if (!sceneID) {
throw new Error("WebXRController.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;
// 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");
const dst = location.href;
viewer.setAttribute("url", opt.url || dst);
this._state = plattar_controller_1.ControllerState.QRCode;
this._prevQROpt = opt;
return new Promise((accept, reject) => {
viewer.onload = () => {
return accept(viewer);
};
this.append(viewer);
});
}
async startRenderer() {
// remove the old renderer instance if any
this.removeRenderer();
if (!util_1.Util.canAugment()) {
return this.startQRCode(this._GetDefaultQROptions());
}
const sceneID = this.getAttribute("scene-id");
if (!sceneID) {
throw new Error("WebXRController.startRenderer() - minimum required attributes not set, use scene-id as a minimum");
}
// required attributes with defaults for plattar-configurator node
const width = this.getAttribute("width") || "500px";
const height = this.getAttribute("height") || "500px";
const server = this.getAttribute("server") || "production";
const viewer = document.createElement("plattar-8wall");
this._element = viewer;
viewer.setAttribute("width", width);
viewer.setAttribute("height", height);
viewer.setAttribute("server", server);
viewer.setAttribute("scene-id", sceneID);
const showAR = this.getAttribute("show-ar");
const showUI = this.getAttribute("show-ui");
if (showAR) {
viewer.setAttribute("show-ar", showAR);
}
if (showUI) {
viewer.setAttribute("show-ui", showUI);
}
return new Promise((accept, reject) => {
this.append(viewer);
return accept(viewer);
});
}
async initAR() {
throw new Error("WebXRController.initAR() - cannot proceed as AR not available in webxr");
}
}
exports.WebXRController = WebXRController;