@plattar/plattar-ar-adapter 1.122.4 → 1.123.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/es2015/plattar-ar-adapter.js +2296 -1346
- package/build/es2015/plattar-ar-adapter.min.js +1 -1
- package/build/es2019/plattar-ar-adapter.js +1218 -560
- package/build/es2019/plattar-ar-adapter.min.js +9 -1
- package/dist/ar/launcher-ar.d.ts +8 -1
- package/dist/ar/launcher-ar.js +12 -0
- package/dist/ar/model-ar.d.ts +0 -5
- package/dist/ar/model-ar.js +1 -12
- package/dist/ar/product-ar.d.ts +1 -6
- package/dist/ar/product-ar.js +3 -14
- package/dist/ar/raw-ar.d.ts +0 -5
- package/dist/ar/raw-ar.js +0 -12
- package/dist/ar/scene-ar.d.ts +21 -1
- package/dist/ar/scene-ar.js +148 -5
- package/dist/embed/controllers/configurator-controller.d.ts +17 -0
- package/dist/embed/controllers/configurator-controller.js +178 -0
- package/dist/embed/controllers/plattar-controller.d.ts +62 -0
- package/dist/embed/controllers/plattar-controller.js +62 -0
- package/dist/embed/controllers/product-controller.d.ts +17 -0
- package/dist/embed/controllers/product-controller.js +133 -0
- package/dist/embed/controllers/viewer-controller.d.ts +17 -0
- package/dist/embed/controllers/viewer-controller.js +147 -0
- package/dist/embed/controllers/vto-controller.d.ts +17 -0
- package/dist/embed/controllers/vto-controller.js +169 -0
- package/dist/embed/plattar-embed.d.ts +7 -10
- package/dist/embed/plattar-embed.js +51 -346
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/util/configurator-state.d.ts +26 -0
- package/dist/util/configurator-state.js +92 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +6 -6
- package/dist/ar/configurator-ar.d.ts +0 -9
- package/dist/ar/configurator-ar.js +0 -19
|
@@ -1,22 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const plattar_api_1 = require("@plattar/plattar-api");
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
/**
|
|
9
|
-
* This tracks the current state of the Embed
|
|
10
|
-
*/
|
|
11
|
-
var EmbedState;
|
|
12
|
-
(function (EmbedState) {
|
|
13
|
-
EmbedState[EmbedState["None"] = 0] = "None";
|
|
14
|
-
EmbedState[EmbedState["SceneViewer"] = 1] = "SceneViewer";
|
|
15
|
-
EmbedState[EmbedState["ProductViewer"] = 2] = "ProductViewer";
|
|
16
|
-
EmbedState[EmbedState["ConfiguratorViewer"] = 3] = "ConfiguratorViewer";
|
|
17
|
-
EmbedState[EmbedState["ProductAR"] = 4] = "ProductAR";
|
|
18
|
-
EmbedState[EmbedState["QRCode"] = 5] = "QRCode";
|
|
19
|
-
})(EmbedState || (EmbedState = {}));
|
|
4
|
+
const product_controller_1 = require("./controllers/product-controller");
|
|
5
|
+
const viewer_controller_1 = require("./controllers/viewer-controller");
|
|
6
|
+
const configurator_controller_1 = require("./controllers/configurator-controller");
|
|
7
|
+
const vto_controller_1 = require("./controllers/vto-controller");
|
|
20
8
|
/**
|
|
21
9
|
* This tracks the current embed type
|
|
22
10
|
*/
|
|
@@ -24,6 +12,7 @@ var EmbedType;
|
|
|
24
12
|
(function (EmbedType) {
|
|
25
13
|
EmbedType[EmbedType["Viewer"] = 0] = "Viewer";
|
|
26
14
|
EmbedType[EmbedType["Configurator"] = 1] = "Configurator";
|
|
15
|
+
EmbedType[EmbedType["VTO"] = 2] = "VTO";
|
|
27
16
|
})(EmbedType || (EmbedType = {}));
|
|
28
17
|
/**
|
|
29
18
|
* This is the primary <plattar-embed /> node that allows easy embedding
|
|
@@ -32,26 +21,12 @@ var EmbedType;
|
|
|
32
21
|
class PlattarEmbed extends HTMLElement {
|
|
33
22
|
constructor() {
|
|
34
23
|
super();
|
|
35
|
-
// this is the current state of the embed, none by default
|
|
36
|
-
this._currentState = EmbedState.None;
|
|
37
24
|
// this is the current embed type, viewer by default
|
|
38
25
|
this._currentType = EmbedType.Viewer;
|
|
39
|
-
this.
|
|
40
|
-
color: "#101721",
|
|
41
|
-
qrType: "default",
|
|
42
|
-
margin: 0
|
|
43
|
-
};
|
|
44
|
-
this._sceneID = null;
|
|
45
|
-
this._productID = null;
|
|
46
|
-
this._variationID = null;
|
|
47
|
-
this._isReady = false;
|
|
48
|
-
this._width = "500px";
|
|
49
|
-
this._height = "500px";
|
|
50
|
-
this._server = "production";
|
|
51
|
-
this._viewer = null;
|
|
26
|
+
this._controller = null;
|
|
52
27
|
}
|
|
53
28
|
get viewer() {
|
|
54
|
-
return this.
|
|
29
|
+
return this._controller ? this._controller.element : null;
|
|
55
30
|
}
|
|
56
31
|
connectedCallback() {
|
|
57
32
|
const embedType = this.hasAttribute("embed-type") ? this.getAttribute("embed-type") : "viewer";
|
|
@@ -60,6 +35,9 @@ class PlattarEmbed extends HTMLElement {
|
|
|
60
35
|
case "viewer":
|
|
61
36
|
this._currentType = EmbedType.Viewer;
|
|
62
37
|
break;
|
|
38
|
+
case "vto":
|
|
39
|
+
this._currentType = EmbedType.VTO;
|
|
40
|
+
break;
|
|
63
41
|
case "configurator":
|
|
64
42
|
this._currentType = EmbedType.Configurator;
|
|
65
43
|
break;
|
|
@@ -70,26 +48,7 @@ class PlattarEmbed extends HTMLElement {
|
|
|
70
48
|
const observer = new MutationObserver((mutations) => {
|
|
71
49
|
mutations.forEach((mutation) => {
|
|
72
50
|
if (mutation.type === "attributes") {
|
|
73
|
-
|
|
74
|
-
const productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
|
|
75
|
-
const variationID = this.hasAttribute("variation-id") ? this.getAttribute("variation-id") : null;
|
|
76
|
-
let updated = false;
|
|
77
|
-
if (sceneID !== this._sceneID) {
|
|
78
|
-
this._sceneID = sceneID;
|
|
79
|
-
updated = true;
|
|
80
|
-
}
|
|
81
|
-
if (productID !== this._productID) {
|
|
82
|
-
this._productID = productID;
|
|
83
|
-
updated = true;
|
|
84
|
-
}
|
|
85
|
-
if (variationID !== this._variationID) {
|
|
86
|
-
this._variationID = variationID;
|
|
87
|
-
updated = true;
|
|
88
|
-
}
|
|
89
|
-
if (updated) {
|
|
90
|
-
// re-render based on internal state
|
|
91
|
-
this._OnAttributesUpdated();
|
|
92
|
-
}
|
|
51
|
+
this._OnAttributesUpdated();
|
|
93
52
|
}
|
|
94
53
|
});
|
|
95
54
|
});
|
|
@@ -98,21 +57,24 @@ class PlattarEmbed extends HTMLElement {
|
|
|
98
57
|
});
|
|
99
58
|
const server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
|
|
100
59
|
plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
|
|
101
|
-
|
|
102
|
-
|
|
60
|
+
const sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
|
|
61
|
+
const productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
|
|
62
|
+
// decide which controller to initialise
|
|
63
|
+
if (this._currentType === EmbedType.Viewer) {
|
|
64
|
+
// initialise product if scene-id is missing but product-id is defined
|
|
65
|
+
if (!sceneID && productID) {
|
|
66
|
+
this._controller = new product_controller_1.ProductController(this);
|
|
67
|
+
}
|
|
68
|
+
else if (sceneID) {
|
|
69
|
+
this._controller = new viewer_controller_1.ViewerController(this);
|
|
70
|
+
}
|
|
103
71
|
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
this._variationID = this.hasAttribute("variation-id") ? this.getAttribute("variation-id") : null;
|
|
107
|
-
const width = this.hasAttribute("width") ? this.getAttribute("width") : "500px";
|
|
108
|
-
const height = this.hasAttribute("height") ? this.getAttribute("height") : "500px";
|
|
109
|
-
if (width) {
|
|
110
|
-
this._width = width;
|
|
72
|
+
else if (this._currentType === EmbedType.Configurator) {
|
|
73
|
+
this._controller = new configurator_controller_1.ConfiguratorController(this);
|
|
111
74
|
}
|
|
112
|
-
if (
|
|
113
|
-
this.
|
|
75
|
+
else if (this._currentType === EmbedType.VTO) {
|
|
76
|
+
this._controller = new vto_controller_1.VTOController(this);
|
|
114
77
|
}
|
|
115
|
-
this._isReady = true;
|
|
116
78
|
const init = this.hasAttribute("init") ? this.getAttribute("init") : null;
|
|
117
79
|
if (init === "ar") {
|
|
118
80
|
this.startAR();
|
|
@@ -140,311 +102,54 @@ class PlattarEmbed extends HTMLElement {
|
|
|
140
102
|
}
|
|
141
103
|
initAR() {
|
|
142
104
|
return new Promise((accept, reject) => {
|
|
143
|
-
if (!this.
|
|
144
|
-
return reject(new Error("PlattarEmbed.initAR() - cannot execute as
|
|
145
|
-
}
|
|
146
|
-
if (!util_1.Util.canAugment()) {
|
|
147
|
-
return reject(new Error("PlattarEmbed.initAR() - cannot proceed as AR not available in context"));
|
|
148
|
-
}
|
|
149
|
-
if (this._currentType === EmbedType.Viewer) {
|
|
150
|
-
// if scene is not set but product is, then use ProductAR
|
|
151
|
-
if (!this._sceneID && this._productID) {
|
|
152
|
-
const product = new product_ar_1.ProductAR(this._productID, this._variationID);
|
|
153
|
-
return product.init().then(accept).catch(reject);
|
|
154
|
-
}
|
|
155
|
-
// If Product is set (under any scenario) then use ProductAR
|
|
156
|
-
// NOTE: At some point this should check for Scenes when SceneAR
|
|
157
|
-
// is implemented
|
|
158
|
-
if (this._productID) {
|
|
159
|
-
const product = new product_ar_1.ProductAR(this._productID, this._variationID);
|
|
160
|
-
return product.init().then(accept).catch(reject);
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
if (this._currentType === EmbedType.Configurator) {
|
|
164
|
-
// if scene ID is available and the state is a configurator viewer
|
|
165
|
-
// we can use the real-time configurator state to launch the AR view
|
|
166
|
-
const viewer = this.viewer;
|
|
167
|
-
if (viewer && this._sceneID && this._currentState === EmbedState.ConfiguratorViewer) {
|
|
168
|
-
let output = "glb";
|
|
169
|
-
if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
|
|
170
|
-
output = "usdz";
|
|
171
|
-
}
|
|
172
|
-
viewer.messenger.getARFile(output).then((result) => {
|
|
173
|
-
const rawAR = new raw_ar_1.RawAR(result.filename);
|
|
174
|
-
return rawAR.init().then(accept).catch(reject);
|
|
175
|
-
}).catch(reject);
|
|
176
|
-
}
|
|
177
|
-
const configState = this.hasAttribute("config-state") ? this.getAttribute("config-state") : null;
|
|
178
|
-
// otherwise scene ID is available to the viewer is not launched
|
|
179
|
-
// we can use the static configuration state to launch the AR view
|
|
180
|
-
if (this._sceneID && configState) {
|
|
181
|
-
try {
|
|
182
|
-
const decodedb64State = atob(configState);
|
|
183
|
-
const state = JSON.parse(decodedb64State);
|
|
184
|
-
if (state.meta) {
|
|
185
|
-
const sceneProductIndex = state.meta.scene_product_index || 0;
|
|
186
|
-
const variationIndex = state.meta.product_variation_index || 1;
|
|
187
|
-
const states = state.states || [];
|
|
188
|
-
if (states.length > 0) {
|
|
189
|
-
const configurator = new plattar_services_1.Configurator();
|
|
190
|
-
states.forEach((productState) => {
|
|
191
|
-
configurator.addSceneProduct(productState[sceneProductIndex], productState[variationIndex]);
|
|
192
|
-
});
|
|
193
|
-
if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
|
|
194
|
-
configurator.output = "usdz";
|
|
195
|
-
}
|
|
196
|
-
if (util_1.Util.canSceneViewer()) {
|
|
197
|
-
configurator.output = "glb";
|
|
198
|
-
}
|
|
199
|
-
configurator.server = this._server;
|
|
200
|
-
return configurator.get().then((result) => {
|
|
201
|
-
const rawAR = new raw_ar_1.RawAR(result.filename);
|
|
202
|
-
rawAR.init().then(accept).catch(reject);
|
|
203
|
-
}).catch(reject);
|
|
204
|
-
}
|
|
205
|
-
return reject(new Error("PlattarEmbed.initAR() - invalid config-state does not have any product states"));
|
|
206
|
-
}
|
|
207
|
-
return reject(new Error("PlattarEmbed.initAR() - invalid config-state for configurator"));
|
|
208
|
-
}
|
|
209
|
-
catch (err) {
|
|
210
|
-
return reject(err);
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
// otherwise, scene was set so use SceneAR
|
|
215
|
-
if (this._sceneID) {
|
|
216
|
-
return reject(new Error("PlattarEmbed.initAR() - scene-id not yet supported"));
|
|
105
|
+
if (!this._controller) {
|
|
106
|
+
return reject(new Error("PlattarEmbed.initAR() - cannot execute as controller has not loaded yet"));
|
|
217
107
|
}
|
|
218
|
-
return
|
|
108
|
+
return this._controller.initAR().then(accept).catch(reject);
|
|
219
109
|
});
|
|
220
110
|
}
|
|
221
111
|
startAR() {
|
|
222
112
|
return new Promise((accept, reject) => {
|
|
223
|
-
if (!this.
|
|
224
|
-
return reject(new Error("PlattarEmbed.startAR() - cannot execute as
|
|
113
|
+
if (!this._controller) {
|
|
114
|
+
return reject(new Error("PlattarEmbed.startAR() - cannot execute as controller has not loaded yet"));
|
|
225
115
|
}
|
|
226
|
-
this.
|
|
227
|
-
launcher.start();
|
|
228
|
-
accept();
|
|
229
|
-
}).catch(reject);
|
|
116
|
+
return this._controller.startAR().then(accept).catch(reject);
|
|
230
117
|
});
|
|
231
118
|
}
|
|
232
119
|
startViewer() {
|
|
233
120
|
return new Promise((accept, reject) => {
|
|
234
|
-
if (!this.
|
|
235
|
-
return reject(new Error("PlattarEmbed.startViewer() - cannot execute as
|
|
121
|
+
if (!this._controller) {
|
|
122
|
+
return reject(new Error("PlattarEmbed.startViewer() - cannot execute as controller has not loaded yet"));
|
|
236
123
|
}
|
|
237
|
-
|
|
238
|
-
this._viewer.remove();
|
|
239
|
-
this._viewer = null;
|
|
240
|
-
}
|
|
241
|
-
// if scene is set and embed is a viewer type, we use <plattar-viewer /> node from plattar-web
|
|
242
|
-
if (this._sceneID && this._currentType === EmbedType.Viewer) {
|
|
243
|
-
const viewer = document.createElement("plattar-viewer");
|
|
244
|
-
viewer.setAttribute("width", this._width);
|
|
245
|
-
viewer.setAttribute("height", this._height);
|
|
246
|
-
viewer.setAttribute("server", this._server);
|
|
247
|
-
viewer.setAttribute("scene-id", this._sceneID);
|
|
248
|
-
if (this._productID) {
|
|
249
|
-
viewer.setAttribute("product-id", this._productID);
|
|
250
|
-
}
|
|
251
|
-
if (this._variationID) {
|
|
252
|
-
viewer.setAttribute("variation-id", this._variationID);
|
|
253
|
-
}
|
|
254
|
-
viewer.onload = () => {
|
|
255
|
-
return accept(viewer);
|
|
256
|
-
};
|
|
257
|
-
const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
|
|
258
|
-
shadow.append(viewer);
|
|
259
|
-
this._viewer = viewer;
|
|
260
|
-
this._currentState = EmbedState.SceneViewer;
|
|
261
|
-
return;
|
|
262
|
-
}
|
|
263
|
-
// if scene is set and embed is a configurator type, we use <plattar-configurator /> node from plattar-web
|
|
264
|
-
if (this._sceneID && this._currentType === EmbedType.Configurator) {
|
|
265
|
-
const viewer = document.createElement("plattar-configurator");
|
|
266
|
-
viewer.setAttribute("width", this._width);
|
|
267
|
-
viewer.setAttribute("height", this._height);
|
|
268
|
-
viewer.setAttribute("server", this._server);
|
|
269
|
-
viewer.setAttribute("scene-id", this._sceneID);
|
|
270
|
-
const configState = this.hasAttribute("config-state") ? this.getAttribute("config-state") : null;
|
|
271
|
-
const showAR = this.hasAttribute("show-ar") ? this.getAttribute("show-ar") : null;
|
|
272
|
-
if (configState) {
|
|
273
|
-
viewer.setAttribute("config-state", configState);
|
|
274
|
-
}
|
|
275
|
-
if (showAR) {
|
|
276
|
-
viewer.setAttribute("show-ar", showAR);
|
|
277
|
-
}
|
|
278
|
-
viewer.onload = () => {
|
|
279
|
-
return accept(viewer);
|
|
280
|
-
};
|
|
281
|
-
const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
|
|
282
|
-
shadow.append(viewer);
|
|
283
|
-
this._viewer = viewer;
|
|
284
|
-
this._currentState = EmbedState.ConfiguratorViewer;
|
|
285
|
-
return;
|
|
286
|
-
}
|
|
287
|
-
// if product is set, we use <plattar-product /> node from plattar-web
|
|
288
|
-
if (this._productID) {
|
|
289
|
-
const viewer = document.createElement("plattar-product");
|
|
290
|
-
viewer.setAttribute("width", this._width);
|
|
291
|
-
viewer.setAttribute("height", this._height);
|
|
292
|
-
viewer.setAttribute("server", this._server);
|
|
293
|
-
viewer.setAttribute("product-id", this._productID);
|
|
294
|
-
if (this._variationID) {
|
|
295
|
-
viewer.setAttribute("variation-id", this._variationID);
|
|
296
|
-
}
|
|
297
|
-
viewer.onload = () => {
|
|
298
|
-
return accept(viewer);
|
|
299
|
-
};
|
|
300
|
-
const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
|
|
301
|
-
shadow.append(viewer);
|
|
302
|
-
this._viewer = viewer;
|
|
303
|
-
this._currentState = EmbedState.ProductViewer;
|
|
304
|
-
return;
|
|
305
|
-
}
|
|
306
|
-
return reject(new Error("PlattarEmbed.startViewer() - minimum required attributes not set, use scene-id or product-id as a minimum"));
|
|
124
|
+
return this._controller.startRenderer().then(accept).catch(reject);
|
|
307
125
|
});
|
|
308
126
|
}
|
|
309
127
|
startQRCode(options = null) {
|
|
310
128
|
return new Promise((accept, reject) => {
|
|
311
|
-
if (!this.
|
|
312
|
-
return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as
|
|
129
|
+
if (!this._controller) {
|
|
130
|
+
return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as controller has not loaded yet"));
|
|
313
131
|
}
|
|
314
|
-
|
|
315
|
-
// reset instance for later use
|
|
316
|
-
this._qrCodeOptions = opt;
|
|
317
|
-
if (this._viewer) {
|
|
318
|
-
this._viewer.remove();
|
|
319
|
-
this._viewer = null;
|
|
320
|
-
}
|
|
321
|
-
// if scene is set and embed type is viewer
|
|
322
|
-
// we embed a QR code that takes us to viewer.html
|
|
323
|
-
if (this._sceneID && this._currentType == EmbedType.Viewer) {
|
|
324
|
-
const viewer = document.createElement("plattar-qrcode");
|
|
325
|
-
viewer.setAttribute("width", this._width);
|
|
326
|
-
viewer.setAttribute("height", this._height);
|
|
327
|
-
if (opt.color) {
|
|
328
|
-
viewer.setAttribute("color", opt.color);
|
|
329
|
-
}
|
|
330
|
-
if (opt.margin) {
|
|
331
|
-
viewer.setAttribute("margin", "" + opt.margin);
|
|
332
|
-
}
|
|
333
|
-
if (opt.qrType) {
|
|
334
|
-
viewer.setAttribute("qr-type", opt.qrType);
|
|
335
|
-
}
|
|
336
|
-
let dst = plattar_api_1.Server.location().base + "renderer/viewer.html?scene_id=" + this._sceneID;
|
|
337
|
-
if (this._productID) {
|
|
338
|
-
dst += "&productId=" + this._productID;
|
|
339
|
-
}
|
|
340
|
-
if (this._variationID) {
|
|
341
|
-
dst += "&variationId=" + this._variationID;
|
|
342
|
-
}
|
|
343
|
-
viewer.setAttribute("url", opt.url || dst);
|
|
344
|
-
viewer.onload = () => {
|
|
345
|
-
return accept(viewer);
|
|
346
|
-
};
|
|
347
|
-
const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
|
|
348
|
-
shadow.append(viewer);
|
|
349
|
-
this._viewer = viewer;
|
|
350
|
-
this._currentState = EmbedState.QRCode;
|
|
351
|
-
return;
|
|
352
|
-
}
|
|
353
|
-
// if scene is set and embed type is configurator
|
|
354
|
-
// we embed a QR code that takes us to configurator.html
|
|
355
|
-
if (this._sceneID && this._currentType == EmbedType.Configurator) {
|
|
356
|
-
const viewer = document.createElement("plattar-qrcode");
|
|
357
|
-
viewer.setAttribute("width", this._width);
|
|
358
|
-
viewer.setAttribute("height", this._height);
|
|
359
|
-
if (opt.color) {
|
|
360
|
-
viewer.setAttribute("color", opt.color);
|
|
361
|
-
}
|
|
362
|
-
if (opt.margin) {
|
|
363
|
-
viewer.setAttribute("margin", "" + opt.margin);
|
|
364
|
-
}
|
|
365
|
-
if (opt.qrType) {
|
|
366
|
-
viewer.setAttribute("qr-type", opt.qrType);
|
|
367
|
-
}
|
|
368
|
-
let dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + this._sceneID;
|
|
369
|
-
const configState = this.hasAttribute("config-state") ? this.getAttribute("config-state") : null;
|
|
370
|
-
const showAR = this.hasAttribute("show-ar") ? this.getAttribute("show-ar") : null;
|
|
371
|
-
if (configState) {
|
|
372
|
-
dst += "&config_state=" + configState;
|
|
373
|
-
}
|
|
374
|
-
if (showAR) {
|
|
375
|
-
dst += "&show_ar=" + showAR;
|
|
376
|
-
}
|
|
377
|
-
viewer.setAttribute("url", opt.url || dst);
|
|
378
|
-
viewer.onload = () => {
|
|
379
|
-
return accept(viewer);
|
|
380
|
-
};
|
|
381
|
-
const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
|
|
382
|
-
shadow.append(viewer);
|
|
383
|
-
this._viewer = viewer;
|
|
384
|
-
this._currentState = EmbedState.QRCode;
|
|
385
|
-
return;
|
|
386
|
-
}
|
|
387
|
-
// if product is set, we embed a QR code that takes us to product.html
|
|
388
|
-
if (this._productID) {
|
|
389
|
-
const viewer = document.createElement("plattar-qrcode");
|
|
390
|
-
viewer.setAttribute("width", this._width);
|
|
391
|
-
viewer.setAttribute("height", this._height);
|
|
392
|
-
if (opt.color) {
|
|
393
|
-
viewer.setAttribute("color", opt.color);
|
|
394
|
-
}
|
|
395
|
-
if (opt.margin) {
|
|
396
|
-
viewer.setAttribute("margin", "" + opt.margin);
|
|
397
|
-
}
|
|
398
|
-
if (opt.qrType) {
|
|
399
|
-
viewer.setAttribute("qr-type", opt.qrType);
|
|
400
|
-
}
|
|
401
|
-
let dst = plattar_api_1.Server.location().base + "renderer/product.html?product_id=" + this._productID;
|
|
402
|
-
if (this._variationID) {
|
|
403
|
-
dst += "&variation_id=" + this._variationID;
|
|
404
|
-
}
|
|
405
|
-
viewer.setAttribute("url", opt.url || dst);
|
|
406
|
-
viewer.onload = () => {
|
|
407
|
-
return accept(viewer);
|
|
408
|
-
};
|
|
409
|
-
const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
|
|
410
|
-
shadow.append(viewer);
|
|
411
|
-
this._viewer = viewer;
|
|
412
|
-
this._currentState = EmbedState.QRCode;
|
|
413
|
-
return;
|
|
414
|
-
}
|
|
415
|
-
return reject(new Error("PlattarEmbed.startQRCode() - minimum required attributes not set, use scene-id or product-id as a minimum"));
|
|
132
|
+
return this._controller.startQRCode(options).then(accept).catch(reject);
|
|
416
133
|
});
|
|
417
134
|
}
|
|
135
|
+
/**
|
|
136
|
+
* This will remove the currently active Renderer
|
|
137
|
+
*
|
|
138
|
+
* @returns - true if removed successfully, false otherwise
|
|
139
|
+
*/
|
|
140
|
+
removeRenderer() {
|
|
141
|
+
if (!this._controller) {
|
|
142
|
+
return false;
|
|
143
|
+
}
|
|
144
|
+
return this._controller.removeRenderer();
|
|
145
|
+
}
|
|
418
146
|
/**
|
|
419
147
|
* This is called by the observer if any of the embed attributes have changed
|
|
420
148
|
* based on the state of the embed, we update the internal structure accordingly
|
|
421
149
|
*/
|
|
422
150
|
_OnAttributesUpdated() {
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
this._currentState === EmbedState.ProductAR ||
|
|
426
|
-
this._currentState === EmbedState.ConfiguratorViewer) {
|
|
427
|
-
return;
|
|
428
|
-
}
|
|
429
|
-
// re-render the QR Code when attributes have changed
|
|
430
|
-
if (this._currentState === EmbedState.QRCode) {
|
|
431
|
-
this.startQRCode(this._qrCodeOptions);
|
|
432
|
-
return;
|
|
433
|
-
}
|
|
434
|
-
// use the messenger function to change variation when attributes have changed
|
|
435
|
-
if (this._currentState === EmbedState.SceneViewer) {
|
|
436
|
-
const viewer = this.viewer;
|
|
437
|
-
if (viewer) {
|
|
438
|
-
viewer.messenger.selectVariation(this._productID, this._variationID);
|
|
439
|
-
}
|
|
440
|
-
return;
|
|
441
|
-
}
|
|
442
|
-
if (this._currentState === EmbedState.ProductViewer) {
|
|
443
|
-
const viewer = this.viewer;
|
|
444
|
-
if (viewer) {
|
|
445
|
-
viewer.messenger.selectVariation(this._variationID);
|
|
446
|
-
}
|
|
447
|
-
return;
|
|
151
|
+
if (this._controller) {
|
|
152
|
+
this._controller.onAttributesUpdated();
|
|
448
153
|
}
|
|
449
154
|
}
|
|
450
155
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export * as PlattarWeb from "@plattar/plattar-web";
|
|
2
2
|
export * as PlattarQRCode from "@plattar/plattar-qrcode";
|
|
3
3
|
export * as version from "./version";
|
|
4
|
-
export { ConfiguratorAR } from "./ar/configurator-ar";
|
|
5
4
|
export { ProductAR } from "./ar/product-ar";
|
|
6
5
|
export { SceneAR } from "./ar/scene-ar";
|
|
7
6
|
export { ModelAR } from "./ar/model-ar";
|
|
8
7
|
export { RawAR } from "./ar/raw-ar";
|
|
9
8
|
export { Util } from "./util/util";
|
|
9
|
+
export { ConfiguratorState } from "./util/configurator-state";
|
package/dist/index.js
CHANGED
|
@@ -22,12 +22,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
22
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.Util = exports.RawAR = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.
|
|
25
|
+
exports.ConfiguratorState = exports.Util = exports.RawAR = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.version = exports.PlattarQRCode = exports.PlattarWeb = void 0;
|
|
26
26
|
exports.PlattarWeb = __importStar(require("@plattar/plattar-web"));
|
|
27
27
|
exports.PlattarQRCode = __importStar(require("@plattar/plattar-qrcode"));
|
|
28
28
|
exports.version = __importStar(require("./version"));
|
|
29
|
-
var configurator_ar_1 = require("./ar/configurator-ar");
|
|
30
|
-
Object.defineProperty(exports, "ConfiguratorAR", { enumerable: true, get: function () { return configurator_ar_1.ConfiguratorAR; } });
|
|
31
29
|
var product_ar_1 = require("./ar/product-ar");
|
|
32
30
|
Object.defineProperty(exports, "ProductAR", { enumerable: true, get: function () { return product_ar_1.ProductAR; } });
|
|
33
31
|
var scene_ar_1 = require("./ar/scene-ar");
|
|
@@ -38,6 +36,8 @@ var raw_ar_1 = require("./ar/raw-ar");
|
|
|
38
36
|
Object.defineProperty(exports, "RawAR", { enumerable: true, get: function () { return raw_ar_1.RawAR; } });
|
|
39
37
|
var util_1 = require("./util/util");
|
|
40
38
|
Object.defineProperty(exports, "Util", { enumerable: true, get: function () { return util_1.Util; } });
|
|
39
|
+
var configurator_state_1 = require("./util/configurator-state");
|
|
40
|
+
Object.defineProperty(exports, "ConfiguratorState", { enumerable: true, get: function () { return configurator_state_1.ConfiguratorState; } });
|
|
41
41
|
const plattar_embed_1 = __importDefault(require("./embed/plattar-embed"));
|
|
42
42
|
const version_1 = __importDefault(require("./version"));
|
|
43
43
|
if (customElements) {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface SceneProductData {
|
|
2
|
+
scene_product_id: string;
|
|
3
|
+
product_variation_id: string;
|
|
4
|
+
meta_data: {
|
|
5
|
+
augment: boolean;
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
export declare class ConfiguratorState {
|
|
9
|
+
private readonly _state;
|
|
10
|
+
constructor(state?: string | null | undefined);
|
|
11
|
+
/**
|
|
12
|
+
* Adds a new Scene Product/Variation combo with meta-data into the Configurator State
|
|
13
|
+
*
|
|
14
|
+
* @param sceneProductID - The Scene Product ID to be used (as defined in Plattar CMS)
|
|
15
|
+
* @param productVariationID - The Product Variation ID to be used (as defined in Plattar CMS)
|
|
16
|
+
* @param metaData - Arbitrary meta-data that can be used against certain operaions
|
|
17
|
+
*/
|
|
18
|
+
addSceneProduct(sceneProductID: string, productVariationID: string, metaData?: any | null | undefined): void;
|
|
19
|
+
/**
|
|
20
|
+
* Iterate over the internal state data
|
|
21
|
+
*/
|
|
22
|
+
forEach(callback: (data: SceneProductData) => void): void;
|
|
23
|
+
get length(): number;
|
|
24
|
+
static decode(state: string): ConfiguratorState;
|
|
25
|
+
encode(): string;
|
|
26
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ConfiguratorState = void 0;
|
|
4
|
+
class ConfiguratorState {
|
|
5
|
+
constructor(state = null) {
|
|
6
|
+
const defaultState = {
|
|
7
|
+
meta: {
|
|
8
|
+
scene_product_index: 0,
|
|
9
|
+
product_variation_index: 1,
|
|
10
|
+
meta_index: 2,
|
|
11
|
+
},
|
|
12
|
+
states: []
|
|
13
|
+
};
|
|
14
|
+
if (state) {
|
|
15
|
+
try {
|
|
16
|
+
const decodedb64State = atob(state);
|
|
17
|
+
const parsedState = JSON.parse(decodedb64State);
|
|
18
|
+
// set the meta data
|
|
19
|
+
if (parsedState.meta) {
|
|
20
|
+
defaultState.meta.scene_product_index = parsedState.meta.scene_product_index || 0;
|
|
21
|
+
defaultState.meta.product_variation_index = parsedState.meta.product_variation_index || 1;
|
|
22
|
+
defaultState.meta.meta_index = parsedState.meta.meta_index || 2;
|
|
23
|
+
}
|
|
24
|
+
defaultState.states = parsedState.states || [];
|
|
25
|
+
}
|
|
26
|
+
catch (err) {
|
|
27
|
+
console.error("ConfiguratorState.constructor() - there was an error parsing configurator state");
|
|
28
|
+
console.error(err);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
this._state = defaultState;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Adds a new Scene Product/Variation combo with meta-data into the Configurator State
|
|
35
|
+
*
|
|
36
|
+
* @param sceneProductID - The Scene Product ID to be used (as defined in Plattar CMS)
|
|
37
|
+
* @param productVariationID - The Product Variation ID to be used (as defined in Plattar CMS)
|
|
38
|
+
* @param metaData - Arbitrary meta-data that can be used against certain operaions
|
|
39
|
+
*/
|
|
40
|
+
addSceneProduct(sceneProductID, productVariationID, metaData = null) {
|
|
41
|
+
if (sceneProductID && productVariationID) {
|
|
42
|
+
const states = this._state.states;
|
|
43
|
+
const meta = this._state.meta;
|
|
44
|
+
const newData = [];
|
|
45
|
+
newData.splice(meta.scene_product_index, 0, sceneProductID);
|
|
46
|
+
newData.splice(meta.product_variation_index, 0, productVariationID);
|
|
47
|
+
if (metaData) {
|
|
48
|
+
newData.splice(meta.meta_index, 0, metaData);
|
|
49
|
+
}
|
|
50
|
+
states.push(newData);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Iterate over the internal state data
|
|
55
|
+
*/
|
|
56
|
+
forEach(callback) {
|
|
57
|
+
const states = this._state.states;
|
|
58
|
+
const meta = this._state.meta;
|
|
59
|
+
if (states.length > 0) {
|
|
60
|
+
states.forEach((productState) => {
|
|
61
|
+
if (productState.length === 2) {
|
|
62
|
+
callback({
|
|
63
|
+
scene_product_id: productState[meta.scene_product_index],
|
|
64
|
+
product_variation_id: productState[meta.product_variation_index],
|
|
65
|
+
meta_data: {
|
|
66
|
+
augment: true
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
else if (productState.length === 3) {
|
|
71
|
+
callback({
|
|
72
|
+
scene_product_id: productState[meta.scene_product_index],
|
|
73
|
+
product_variation_id: productState[meta.product_variation_index],
|
|
74
|
+
meta_data: {
|
|
75
|
+
augment: productState[meta.meta_index].augment || true
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
get length() {
|
|
83
|
+
return this._state.states.length;
|
|
84
|
+
}
|
|
85
|
+
static decode(state) {
|
|
86
|
+
return new ConfiguratorState(state);
|
|
87
|
+
}
|
|
88
|
+
encode() {
|
|
89
|
+
return btoa(JSON.stringify(this._state));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
exports.ConfiguratorState = ConfiguratorState;
|
package/dist/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.
|
|
1
|
+
declare const _default: "1.123.4";
|
|
2
2
|
export default _default;
|
package/dist/version.js
CHANGED