@preference-sl/pref-viewer 2.11.0-beta.2 → 2.11.0-beta.20

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/src/index.js CHANGED
@@ -1,777 +1,23 @@
1
- import { PrefViewer2D } from "./pref-viewer-2d.js";
2
- import { PrefViewer3D } from "./pref-viewer-3d.js";
3
- import { PrefViewerTask } from "./pref-viewer-task.js";
1
+ // Imports all main PrefViewer components (2D, 3D, dialog, and root).
2
+ import PrefViewer from "./pref-viewer.js";
3
+ import PrefViewer2D from "./pref-viewer-2d.js";
4
+ import PrefViewer3D from "./pref-viewer-3d.js";
5
+ import PrefViewerDialog from "./pref-viewer-dialog.js";
4
6
 
5
- /**
6
- * PrefViewer - Custom Web Component for advanced 2D and 3D product visualization and configuration.
7
- *
8
- * Overview:
9
- * - Encapsulates both 2D (SVG) and 3D (Babylon.js) viewers, supporting glTF/GLB models, environments, and drawings.
10
- * - Loads assets from remote URLs, Base64 data URIs, and IndexedDB sources.
11
- * - Provides a unified API for loading models, scenes, drawings, materials, and configuration via attributes or methods.
12
- * - Manages an internal task queue for sequential processing of viewer operations.
13
- * - Emits custom events for loading, errors, and state changes to facilitate integration.
14
- * - Supports downloading models and scenes in GLB and USDZ formats.
15
- * - Automatically updates the viewer when reactive attributes change.
16
- *
17
- * Usage:
18
- * - Use as a custom HTML element: <pref-viewer ...>
19
- * - Configure via attributes (config, model, scene, materials, drawing, options, mode).
20
- * - Control viewer mode, visibility, and downloads via public methods.
21
- *
22
- * Reactive Attributes:
23
- * - config: URL or Base64 for configuration file.
24
- * - model: URL or Base64 for 3D model (glTF/GLB).
25
- * - scene: URL or Base64 for environment/scene (glTF/GLB).
26
- * - materials: URL or Base64 for materials definition.
27
- * - drawing: URL or Base64 for SVG drawing.
28
- * - options: JSON string for viewer options.
29
- * - mode: Viewer mode ("2d" or "3d").
30
- *
31
- * Public Methods:
32
- * - loadConfig(config), loadModel(model), loadScene(scene), loadMaterials(materials), loadDrawing(drawing)
33
- * - setOptions(options)
34
- * - setMode(mode): Sets the viewer mode to "2d" or "3d" and updates component visibility.
35
- * - showModel(), hideModel(), showScene(), hideScene()
36
- * - downloadModelGLB(), downloadModelUSDZ(), downloadModelAndSceneGLB(), downloadModelAndSceneUSDZ()
37
- * - zoomCenter(), zoomExtentsAll(), zoomIn(), zoomOut()
38
- *
39
- * Public Properties:
40
- * - isInitialized: Indicates if the viewer is initialized.
41
- * - isLoaded: Indicates if the viewer has finished loading.
42
- * - isLoading: Indicates if the viewer is currently loading.
43
- * - isMode2D: Indicates if the viewer is in 2D mode.
44
- * - isMode3D: Indicates if the viewer is in 3D mode.
45
- *
46
- * Events:
47
- * - "scene-loading": Dispatched when a 3D loading operation starts.
48
- * - "scene-loaded": Dispatched when a 3D loading operation completes.
49
- * - "drawing-loading": Dispatched when a 2D drawing loading operation starts.
50
- * - "drawing-loaded": Dispatched when a 2D drawing loading operation completes.
51
- * - "drawing-zoom-changed": Dispatched when the 2D drawing zoom/pan state changes.
52
- *
53
- * Notes:
54
- * - Automatically creates and manages 2D and 3D viewer components in its shadow DOM.
55
- * - Processes tasks sequentially to ensure consistent state.
56
- * - Designed for extensibility and integration in product configurators and visualization tools.
57
- */
58
- class PrefViewer extends HTMLElement {
59
- #isInitialized = false;
60
- #isLoaded = false;
61
- #isLoading = false;
62
- #mode = "3d";
63
-
64
- #taskQueue = [];
65
-
66
- #component2D = null;
67
- #component3D = null;
68
-
69
- /**
70
- * Creates a new PrefViewer instance and attaches a shadow DOM.
71
- * Initializes internal state and component references.
72
- * @public
73
- */
74
- constructor() {
75
- super();
76
- this.attachShadow({ mode: "open" });
77
- }
78
-
79
- /**
80
- * Returns the list of attributes to observe for changes.
81
- * @public
82
- * @returns {string[]} Array of attribute names to observe.
83
- */
84
- static get observedAttributes() {
85
- return ["config", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene"];
86
- }
87
-
88
- /**
89
- * Observes changes to specific attributes and triggers corresponding actions.
90
- * Loads configuration, drawing, model, scene, materials, or options when their attributes change.
91
- * Toggles model or scene visibility when "show-model" or "show-scene" attributes change.
92
- * @public
93
- * @param {string} name - The name of the changed attribute.
94
- * @param {*} _old - The previous value of the attribute (unused).
95
- * @param {*} value - The new value of the attribute.
96
- * @returns {void}
97
- */
98
- attributeChangedCallback(name, _old, value) {
99
- switch (name) {
100
- case "config":
101
- this.loadConfig(value);
102
- break;
103
- case "drawing":
104
- this.loadDrawing(value);
105
- break;
106
- case "materials":
107
- this.loadMaterials(value);
108
- break;
109
- case "mode":
110
- if (_old === value || value.toLowerCase() === this.#mode) {
111
- return;
112
- }
113
- this.setMode(value.toLowerCase());
114
- break;
115
- case "model":
116
- this.loadModel(value);
117
- break;
118
- case "scene":
119
- this.loadScene(value);
120
- break;
121
- case "options":
122
- this.setOptions(value);
123
- break;
124
- case "show-model":
125
- if (_old === value) {
126
- return;
127
- }
128
- const showModel = value.toLowerCase() === "true";
129
- showModel ? this.showModel() : this.hideModel();
130
- break;
131
- case "show-scene":
132
- if (_old === value) {
133
- return;
134
- }
135
- const showScene = value.toLowerCase() === "true";
136
- showScene ? this.showScene() : this.hideScene();
137
- break;
138
- }
139
- }
140
-
141
- /**
142
- * Called when the element is inserted into the DOM.
143
- * Initializes the 3D and 2D viewer components and starts processing tasks.
144
- * @public
145
- * @returns {void|boolean} Returns false if initialization fails; otherwise void.
146
- */
147
- connectedCallback() {
148
- this.#createComponent3D();
149
- this.#createComponent2D();
150
-
151
- if (!this.hasAttribute("mode")) {
152
- this.setMode();
153
- }
154
-
155
- this.#isInitialized = true;
156
- this.#processNextTask();
157
- }
158
-
159
- /**
160
- * Creates and appends the 2D viewer component to the shadow DOM.
161
- * Sets the "visible" attribute to true by default.
162
- * @private
163
- * @returns {void}
164
- */
165
- #createComponent2D() {
166
- this.#component2D = document.createElement("pref-viewer-2d");
167
- this.#component2D.setAttribute("visible", "false");
168
- this.#component2D.addEventListener("drawing-zoom-changed", this.#on2DZoomChanged.bind(this));
169
- this.shadowRoot.appendChild(this.#component2D);
170
- }
171
-
172
- /**
173
- * Creates and appends the 3D viewer component to the shadow DOM.
174
- * Sets the "visible" attribute to true by default.
175
- * @private
176
- * @returns {void}
177
- */
178
- #createComponent3D() {
179
- this.#component3D = document.createElement("pref-viewer-3d");
180
- this.#component3D.setAttribute("visible", "false");
181
- this.shadowRoot.appendChild(this.#component3D);
182
- }
183
-
184
- /**
185
- * Adds a new task to the internal queue for processing.
186
- * If the viewer is initialized and not currently loading, immediately processes the next task.
187
- * @private
188
- * @param {*} value - The payload or data for the task.
189
- * @param {string} type - The type of task (see PrefViewerTask.Types).
190
- * @returns {void}
191
- */
192
- #addTaskToQueue(value, type) {
193
- this.#taskQueue.push(new PrefViewerTask(value, type));
194
- if (this.#isInitialized && !this.#isLoading) {
195
- this.#processNextTask();
196
- }
197
- }
198
-
199
- /**
200
- * Processes the next task in the queue, if any.
201
- * Dispatches the task to the appropriate handler based on its type.
202
- * @private
203
- * @returns {boolean|void} Returns false if the queue is empty; otherwise void.
204
- */
205
- #processNextTask() {
206
- if (!this.#taskQueue.length) {
207
- return false;
208
- }
209
- const task = this.#taskQueue[0];
210
- this.#taskQueue.shift();
211
- switch (task.type) {
212
- case PrefViewerTask.Types.Config:
213
- this.#processConfig(task.value);
214
- break;
215
- case PrefViewerTask.Types.Drawing:
216
- this.#processDrawing(task.value);
217
- break;
218
- case PrefViewerTask.Types.Environment:
219
- this.#processEnvironment(task.value);
220
- break;
221
- case PrefViewerTask.Types.Materials:
222
- this.#processMaterials(task.value);
223
- break;
224
- case PrefViewerTask.Types.Model:
225
- this.#processModel(task.value);
226
- break;
227
- case PrefViewerTask.Types.Options:
228
- this.#processOptions(task.value);
229
- break;
230
- case PrefViewerTask.Types.Visibility:
231
- this.#processVisibility(task.value);
232
- break;
233
- }
234
- }
235
-
236
- /**
237
- * Handles the start of a 3D loading operation.
238
- * Updates loading state, sets attributes, and dispatches a "scene-loading" event.
239
- * @private
240
- * @returns {void}
241
- */
242
- #on3DLoading() {
243
- this.#isLoaded = false;
244
- this.#isLoading = true;
245
-
246
- this.removeAttribute("loaded-3d");
247
- this.setAttribute("loading-3d", "");
248
-
249
- const customEventOptions = {
250
- bubbles: true,
251
- cancelable: false,
252
- composed: true,
253
- };
254
- this.dispatchEvent(new CustomEvent("scene-loading", customEventOptions));
255
- }
256
-
257
- /**
258
- * Handles the completion of a 3D loading operation.
259
- * Updates loading state, sets attributes, dispatches a "scene-loaded" event, and processes the next task.
260
- * @private
261
- * @param {object} [detail] - Optional details to include in the event.
262
- * @returns {void}
263
- */
264
- #on3DLoaded(detail) {
265
- this.#isLoaded = true;
266
- this.#isLoading = false;
267
-
268
- this.removeAttribute("loading-3d");
269
- this.setAttribute("loaded-3d", "");
270
-
271
- const customEventOptions = {
272
- bubbles: true,
273
- cancelable: false,
274
- composed: true,
275
- };
276
- if (detail) {
277
- customEventOptions.detail = detail;
278
- }
279
- this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
280
- }
281
-
282
- /**
283
- * Handles the start of a 2D loading operation.
284
- * Updates loading state, sets attributes, and dispatches a "drawing-loading" event.
285
- * @private
286
- * @returns {void}
287
- */
288
- #on2DLoading() {
289
- this.#isLoaded = false;
290
- this.#isLoading = true;
291
-
292
- this.removeAttribute("loaded-2d");
293
- this.setAttribute("loading-2d", "");
294
-
295
- const customEventOptions = {
296
- bubbles: true,
297
- cancelable: false,
298
- composed: true,
299
- };
300
- this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
301
- }
302
-
303
- /**
304
- * Handles the completion of a 2D loading operation.
305
- * Updates loading state, sets attributes, dispatches a "drawing-loaded" event, and processes the next task.
306
- * @private
307
- * @param {object} [detail] - Optional details to include in the event.
308
- * @returns {void}
309
- */
310
- #on2DLoaded(detail) {
311
- this.#isLoaded = true;
312
- this.#isLoading = false;
313
-
314
- this.removeAttribute("loading-2d");
315
- this.setAttribute("loaded-2d", "");
316
-
317
- const customEventOptions = {
318
- bubbles: true,
319
- cancelable: false,
320
- composed: true,
321
- };
322
- if (detail) {
323
- customEventOptions.detail = detail;
324
- }
325
- this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
326
- }
327
-
328
- /**
329
- * Handles the "drawing-zoom-changed" event from the 2D viewer component.
330
- * Dispatches a custom "drawing-zoom-changed" event from the PrefViewer element, forwarding the event detail to external listeners.
331
- * @private
332
- * @param {CustomEvent} event - The original zoom change event from the 2D viewer.
333
- * @returns {void}
334
- */
335
- #on2DZoomChanged(event) {
336
- const customEventOptions = {
337
- bubbles: true,
338
- cancelable: false,
339
- composed: true,
340
- detail: event.detail,
341
- };
342
- this.dispatchEvent(new CustomEvent("drawing-zoom-changed", customEventOptions));
343
- }
344
-
345
- /**
346
- * Processes a configuration object by loading it into the 3D component.
347
- * Dispatches loading events and processes the next task when finished.
348
- * @private
349
- * @param {object} config - The configuration object to process.
350
- * @returns {void}
351
- */
352
- #processConfig(config) {
353
- if (!this.#component3D) {
354
- return;
355
- }
356
-
357
- this.#on3DLoading();
358
- this.#component3D.load(config).then((detail) => {
359
- this.#on3DLoaded(detail);
360
- this.#processNextTask();
361
- });
362
- }
363
-
364
- /**
365
- * Processes a drawing object by loading it into the 2D component.
366
- * Processes the next task when finished.
367
- * @private
368
- * @param {object} drawing - The drawing object to process.
369
- * @returns {void}
370
- */
371
- #processDrawing(drawing) {
372
- if (!this.#component2D) {
373
- return;
374
- }
375
-
376
- this.#on2DLoading();
377
- this.#component2D.load(drawing).then((detail) => {
378
- this.#on2DLoaded(detail);
379
- this.#processNextTask();
380
- });
381
- }
382
-
383
- /**
384
- * Processes an environment (scene) object by wrapping it in a config and loading it.
385
- * @private
386
- * @param {object} environment - The environment/scene object to process.
387
- * @returns {void}
388
- */
389
- #processEnvironment(environment) {
390
- const config = {};
391
- config.scene = environment;
392
- this.#processConfig(config);
393
- }
394
-
395
- /**
396
- * Processes a materials object by wrapping it in a config and loading it.
397
- * @private
398
- * @param {object} materials - The materials object to process.
399
- * @returns {void}
400
- */
401
- #processMaterials(materials) {
402
- const config = {};
403
- config.materials = materials;
404
- this.#processConfig(config);
405
- }
406
-
407
- /**
408
- * Processes a model object by wrapping it in a config and loading it.
409
- * @private
410
- * @param {object} model - The model object to process.
411
- * @returns {void}
412
- */
413
- #processModel(model) {
414
- const config = {};
415
- config.model = model;
416
- this.#processConfig(config);
417
- }
418
-
419
- /**
420
- * Processes viewer options by loading them into the 3D component.
421
- * Dispatches loading events and processes the next task.
422
- * @private
423
- * @param {object} options - The options object to process.
424
- * @returns {void}
425
- */
426
- #processOptions(options) {
427
- if (!this.#component3D) {
428
- return;
429
- }
430
-
431
- this.#on3DLoading();
432
- const detail = this.#component3D.setOptions(options);
433
- this.#on3DLoaded(detail);
434
- this.#processNextTask();
435
- }
436
-
437
- /**
438
- * Processes visibility configuration for the model and scene.
439
- * Shows or hides the model and/or scene based on the config, then processes the next task.
440
- * @private
441
- * @param {object} config - The visibility configuration object.
442
- * @returns {void}
443
- */
444
- #processVisibility(config) {
445
- if (!this.#component3D) {
446
- return;
447
- }
448
- const showModel = config.model?.visible;
449
- const showScene = config.scene?.visible;
450
- if (showModel !== undefined) {
451
- showModel ? this.#component3D.showModel() : this.#component3D.hideModel();
452
- }
453
- if (showScene !== undefined) {
454
- showScene ? this.#component3D.showEnvironment() : this.#component3D.hideEnvironment();
455
- }
456
- this.#processNextTask();
457
- }
458
-
459
- /**
460
- * ---------------------------
461
- * Public methods
462
- * ---------------------------
463
- */
464
-
465
- /**
466
- * Sets the viewer mode to "2d" or "3d" and updates component visibility accordingly.
467
- * @public
468
- * @param {string} [mode=this.#mode] - The mode to set ("2d" or "3d").
469
- * @returns {void}
470
- */
471
- setMode(mode = this.#mode) {
472
- if (mode !== "2d" && mode !== "3d") {
473
- console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
474
- mode = this.#mode;
475
- }
476
- this.#mode = mode;
477
- if (mode === "2d") {
478
- this.#component3D?.hide();
479
- this.#component2D?.show();
480
- } else {
481
- this.#component3D?.show();
482
- this.#component2D?.hide();
483
- }
484
- if (this.getAttribute("mode") !== mode) {
485
- this.setAttribute("mode", mode);
486
- }
487
- }
488
-
489
- /**
490
- * Loads a configuration object or JSON string and adds it to the task queue.
491
- * If the config contains a drawing, adds a drawing task as well.
492
- * @public
493
- * @param {object|string} config - Configuration object or JSON string.
494
- * @returns {boolean|void} Returns false if config is invalid; otherwise void.
495
- */
496
- loadConfig(config) {
497
- config = typeof config === "string" ? JSON.parse(config) : config;
498
- if (!config) {
499
- return false;
500
- }
501
- if (config.drawing) {
502
- this.#addTaskToQueue(config.drawing, "drawing");
503
- }
504
- this.#addTaskToQueue(config, "config");
505
- }
506
-
507
- /**
508
- * Loads a model object or JSON string and adds it to the task queue.
509
- * @public
510
- * @param {object|string} model - Model object or JSON string.
511
- * @returns {boolean|void} Returns false if model is invalid; otherwise void.
512
- */
513
- loadModel(model) {
514
- model = typeof model === "string" ? JSON.parse(model) : model;
515
- if (!model) {
516
- return false;
517
- }
518
- this.#addTaskToQueue(model, "model");
519
- }
520
-
521
- /**
522
- * Loads a scene/environment object or JSON string and adds it to the task queue.
523
- * @public
524
- * @param {object|string} scene - Scene object or JSON string.
525
- * @returns {boolean|void} Returns false if scene is invalid; otherwise void.
526
- */
527
- loadScene(scene) {
528
- scene = typeof scene === "string" ? JSON.parse(scene) : scene;
529
- if (!scene) {
530
- return false;
531
- }
532
- this.#addTaskToQueue(scene, "environment");
533
- }
534
-
535
- /**
536
- * Loads materials object or JSON string and adds it to the task queue.
537
- * @public
538
- * @param {object|string} materials - Materials object or JSON string.
539
- * @returns {boolean|void} Returns false if materials are invalid; otherwise void.
540
- */
541
- loadMaterials(materials) {
542
- materials = typeof materials === "string" ? JSON.parse(materials) : materials;
543
- if (!materials) {
544
- return false;
545
- }
546
- this.#addTaskToQueue(materials, "materials");
547
- }
548
-
549
- /**
550
- * Loads a drawing object or JSON string and adds it to the task queue.
551
- * @public
552
- * @param {object|string} drawing - Drawing object or JSON string.
553
- * @returns {boolean|void} Returns false if drawing is invalid; otherwise void.
554
- */
555
- loadDrawing(drawing) {
556
- drawing = typeof drawing === "string" ? JSON.parse(drawing) : drawing;
557
- if (!drawing) {
558
- return false;
559
- }
560
- this.#addTaskToQueue(drawing, "drawing");
561
- }
562
-
563
- /**
564
- * Sets viewer options from an object or JSON string and adds them to the task queue.
565
- * @public
566
- * @param {object|string} options - Options object or JSON string.
567
- * @returns {boolean|void} Returns false if options are invalid; otherwise void.
568
- */
569
- setOptions(options) {
570
- options = typeof options === "string" ? JSON.parse(options) : options;
571
- if (!options) {
572
- return false;
573
- }
574
- this.#addTaskToQueue(options, "options");
575
- }
576
-
577
- /**
578
- * Shows the 3D model by setting its visibility to true.
579
- * Adds a visibility task to the queue for processing.
580
- * @public
581
- * @returns {void}
582
- */
583
- showModel() {
584
- const config = { model: { visible: true } };
585
- this.#addTaskToQueue(config, "visibility");
586
- }
587
-
588
- /**
589
- * Hides the 3D model by setting its visibility to false.
590
- * Adds a visibility task to the queue for processing.
591
- * @public
592
- * @returns {void}
593
- */
594
- hideModel() {
595
- const config = { model: { visible: false } };
596
- this.#addTaskToQueue(config, "visibility");
597
- }
598
-
599
- /**
600
- * Shows the scene/environment by setting its visibility to true.
601
- * Adds a visibility task to the queue for processing.
602
- * @public
603
- * @returns {void}
604
- */
605
- showScene() {
606
- const config = { scene: { visible: true } };
607
- this.#addTaskToQueue(config, "visibility");
608
- }
609
-
610
- /**
611
- * Hides the scene/environment by setting its visibility to false.
612
- * Adds a visibility task to the queue for processing.
613
- * @public
614
- * @returns {void}
615
- */
616
- hideScene() {
617
- const config = { scene: { visible: false } };
618
- this.#addTaskToQueue(config, "visibility");
619
- }
620
-
621
- /**
622
- * Centers the 2D drawing view in the viewer.
623
- * @public
624
- * @returns {void}
625
- * @description
626
- * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
627
- */
628
- zoomCenter() {
629
- if (!this.#component2D || this.#mode !== "2d") {
630
- return;
631
- }
632
- this.#component2D.zoomCenter();
633
- }
634
-
635
- /**
636
- * Zooms the 2D drawing to fit all content within the viewer.
637
- * @public
638
- * @returns {void}
639
- * @description
640
- * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
641
- */
642
- zoomExtentsAll() {
643
- if (!this.#component2D || this.#mode !== "2d") {
644
- return;
645
- }
646
- this.#component2D.zoomExtentsAll();
647
- }
648
-
649
- /**
650
- * Zooms in on the 2D drawing.
651
- * @public
652
- * @returns {void}
653
- * @description
654
- * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
655
- */
656
- zoomIn() {
657
- if (!this.#component2D || this.#mode !== "2d") {
658
- return;
659
- }
660
- this.#component2D.zoomIn();
661
- }
662
-
663
- /**
664
- * Zooms out of the 2D drawing.
665
- * @public
666
- * @returns {void}
667
- * @description
668
- * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
669
- */
670
- zoomOut() {
671
- if (!this.#component2D || this.#mode !== "2d") {
672
- return;
673
- }
674
- this.#component2D.zoomOut();
675
- }
676
-
677
- /**
678
- * Initiates download of the current 3D model in GLB format.
679
- * @public
680
- * @returns {void}
681
- */
682
- downloadModelGLB() {
683
- if (!this.#component3D) {
684
- return;
685
- }
686
-
687
- this.#component3D.downloadModelGLB();
688
- }
689
-
690
- /**
691
- * Initiates download of the current 3D model in USDZ format.
692
- * @public
693
- * @returns {void}
694
- */
695
- downloadModelUSDZ() {
696
- if (!this.#component3D) {
697
- return;
698
- }
699
-
700
- this.#component3D.downloadModelUSDZ();
701
- }
702
-
703
- /**
704
- * Initiates download of both the 3D model and scene in USDZ format.
705
- * @public
706
- * @returns {void}
707
- */
708
- downloadModelAndSceneUSDZ() {
709
- if (!this.#component3D) {
710
- return;
711
- }
712
-
713
- this.#component3D.downloadModelAndSceneUSDZ();
714
- }
715
-
716
- /**
717
- * Initiates download of both the 3D model and scene in GLB format.
718
- * @public
719
- * @returns {void}
720
- */
721
- downloadModelAndSceneGLB() {
722
- if (!this.#component3D) {
723
- return;
724
- }
725
-
726
- this.#component3D.downloadModelAndSceneGLB();
727
- }
728
-
729
- /**
730
- * Indicates whether the viewer has been initialized.
731
- * @public
732
- * @returns {boolean} True if initialized; otherwise, false.
733
- */
734
- get isInitialized() {
735
- return this.#isInitialized;
736
- }
737
-
738
- /**
739
- * Indicates whether the viewer has finished loading.
740
- * @public
741
- * @returns {boolean} True if loaded; otherwise, false.
742
- */
743
- get isLoaded() {
744
- return this.#isLoaded;
745
- }
746
-
747
- /**
748
- * Indicates whether the viewer is currently loading.
749
- * @public
750
- * @returns {boolean} True if loading; otherwise, false.
751
- */
752
- get isLoading() {
753
- return this.#isLoading;
754
- }
7
+ // Defines custom elements for use as HTML tags in the application.
8
+ customElements.define("pref-viewer-2d", PrefViewer2D);
9
+ customElements.define("pref-viewer-3d", PrefViewer3D);
10
+ customElements.define("pref-viewer-dialog", PrefViewerDialog);
11
+ customElements.define("pref-viewer", PrefViewer);
755
12
 
756
- /**
757
- * Indicates whether the viewer is currently in 2D mode.
758
- * @public
759
- * @returns {boolean} True if the viewer is in 2D mode; otherwise, false.
760
- */
761
- get isMode2D() {
762
- return this.#mode === "2d";
763
- }
13
+ // Exposes selected PrefViewer classes globally for external JavaScript use.
14
+ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
15
+ const PrefViewerClasses = {
16
+ BabylonJSAnimationController
17
+ };
764
18
 
765
- /**
766
- * Indicates whether the viewer is currently in 3D mode.
767
- * @public
768
- * @returns {boolean} True if the viewer is in 3D mode; otherwise, false.
769
- */
770
- get isMode3D() {
771
- return this.#mode === "3d";
772
- }
19
+ if (typeof window !== 'undefined') {
20
+ window.PrefViewerClasses = PrefViewerClasses;
773
21
  }
774
22
 
775
- customElements.define("pref-viewer-2d", PrefViewer2D);
776
- customElements.define("pref-viewer-3d", PrefViewer3D);
777
- customElements.define("pref-viewer", PrefViewer);
23
+ export default PrefViewerClasses;