@combeenation/3d-viewer 4.0.0-rc1 → 4.1.0

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.
Files changed (103) hide show
  1. package/README.md +114 -114
  2. package/dist/lib-cjs/api/classes/animationInterface.d.ts +8 -8
  3. package/dist/lib-cjs/api/classes/animationInterface.js +1 -1
  4. package/dist/lib-cjs/api/classes/dottedPath.d.ts +79 -79
  5. package/dist/lib-cjs/api/classes/dottedPath.js +190 -190
  6. package/dist/lib-cjs/api/classes/element.d.ts +130 -130
  7. package/dist/lib-cjs/api/classes/element.js +746 -743
  8. package/dist/lib-cjs/api/classes/element.js.map +1 -1
  9. package/dist/lib-cjs/api/classes/elementParameterizable.d.ts +14 -14
  10. package/dist/lib-cjs/api/classes/elementParameterizable.js +134 -134
  11. package/dist/lib-cjs/api/classes/event.d.ts +326 -326
  12. package/dist/lib-cjs/api/classes/event.js +371 -371
  13. package/dist/lib-cjs/api/classes/eventBroadcaster.d.ts +26 -26
  14. package/dist/lib-cjs/api/classes/eventBroadcaster.js +53 -53
  15. package/dist/lib-cjs/api/classes/parameter.d.ts +259 -259
  16. package/dist/lib-cjs/api/classes/parameter.js +387 -387
  17. package/dist/lib-cjs/api/classes/parameter.js.map +1 -1
  18. package/dist/lib-cjs/api/classes/parameterObservable.d.ts +36 -36
  19. package/dist/lib-cjs/api/classes/parameterObservable.js +101 -101
  20. package/dist/lib-cjs/api/classes/parameterizable.d.ts +15 -15
  21. package/dist/lib-cjs/api/classes/parameterizable.js +149 -149
  22. package/dist/lib-cjs/api/classes/placementAnimation.d.ts +43 -38
  23. package/dist/lib-cjs/api/classes/placementAnimation.js +160 -149
  24. package/dist/lib-cjs/api/classes/placementAnimation.js.map +1 -1
  25. package/dist/lib-cjs/api/classes/variant.d.ts +234 -234
  26. package/dist/lib-cjs/api/classes/variant.js +1147 -1147
  27. package/dist/lib-cjs/api/classes/variantInstance.d.ts +45 -45
  28. package/dist/lib-cjs/api/classes/variantInstance.js +108 -108
  29. package/dist/lib-cjs/api/classes/variantParameterizable.d.ts +17 -17
  30. package/dist/lib-cjs/api/classes/variantParameterizable.js +99 -92
  31. package/dist/lib-cjs/api/classes/variantParameterizable.js.map +1 -1
  32. package/dist/lib-cjs/api/classes/viewer.d.ts +131 -131
  33. package/dist/lib-cjs/api/classes/viewer.js +567 -567
  34. package/dist/lib-cjs/api/classes/viewer.js.map +1 -1
  35. package/dist/lib-cjs/api/classes/viewerLight.d.ts +66 -66
  36. package/dist/lib-cjs/api/classes/viewerLight.js +392 -389
  37. package/dist/lib-cjs/api/classes/viewerLight.js.map +1 -1
  38. package/dist/lib-cjs/api/internal/debugViewer.d.ts +13 -13
  39. package/dist/lib-cjs/api/internal/debugViewer.js +87 -87
  40. package/dist/lib-cjs/api/internal/lensRendering.d.ts +8 -8
  41. package/dist/lib-cjs/api/internal/lensRendering.js +11 -11
  42. package/dist/lib-cjs/api/internal/sceneSetup.d.ts +10 -10
  43. package/dist/lib-cjs/api/internal/sceneSetup.js +231 -231
  44. package/dist/lib-cjs/api/manager/animationManager.d.ts +29 -29
  45. package/dist/lib-cjs/api/manager/animationManager.js +121 -121
  46. package/dist/lib-cjs/api/manager/gltfExportManager.d.ts +35 -0
  47. package/dist/lib-cjs/api/manager/gltfExportManager.js +108 -0
  48. package/dist/lib-cjs/api/manager/gltfExportManager.js.map +1 -0
  49. package/dist/lib-cjs/api/manager/sceneManager.d.ts +32 -32
  50. package/dist/lib-cjs/api/manager/sceneManager.js +132 -132
  51. package/dist/lib-cjs/api/manager/variantInstanceManager.d.ts +90 -90
  52. package/dist/lib-cjs/api/manager/variantInstanceManager.js +321 -321
  53. package/dist/lib-cjs/api/store/specStorage.d.ts +24 -24
  54. package/dist/lib-cjs/api/store/specStorage.js +51 -51
  55. package/dist/lib-cjs/api/util/babylonHelper.d.ts +166 -175
  56. package/dist/lib-cjs/api/util/babylonHelper.js +500 -520
  57. package/dist/lib-cjs/api/util/babylonHelper.js.map +1 -1
  58. package/dist/lib-cjs/api/util/globalTypes.d.ts +338 -333
  59. package/dist/lib-cjs/api/util/globalTypes.js +1 -1
  60. package/dist/lib-cjs/api/util/resourceHelper.d.ts +53 -53
  61. package/dist/lib-cjs/api/util/resourceHelper.js +240 -240
  62. package/dist/lib-cjs/api/util/stringHelper.d.ts +9 -9
  63. package/dist/lib-cjs/api/util/stringHelper.js +25 -25
  64. package/dist/lib-cjs/buildinfo.json +3 -3
  65. package/dist/lib-cjs/index.d.ts +48 -48
  66. package/dist/lib-cjs/index.js +86 -86
  67. package/package.json +83 -83
  68. package/src/api/classes/animationInterface.ts +11 -11
  69. package/src/api/classes/dottedPath.ts +189 -189
  70. package/src/api/classes/element.ts +648 -644
  71. package/src/api/classes/event.ts +370 -370
  72. package/src/api/classes/eventBroadcaster.ts +54 -54
  73. package/src/api/classes/parameter.ts +408 -408
  74. package/src/api/classes/parameterObservable.ts +99 -99
  75. package/src/api/classes/parameterizable.ts +89 -89
  76. package/src/api/classes/placementAnimation.ts +157 -143
  77. package/src/api/classes/variant.ts +817 -817
  78. package/src/api/classes/variantInstance.ts +88 -88
  79. package/src/api/classes/variantParameterizable.ts +80 -73
  80. package/src/api/classes/viewer.ts +487 -487
  81. package/src/api/classes/viewerLight.ts +334 -330
  82. package/src/api/internal/debugViewer.ts +81 -81
  83. package/src/api/internal/lensRendering.ts +10 -10
  84. package/src/api/internal/sceneSetup.ts +193 -193
  85. package/src/api/manager/animationManager.ts +116 -116
  86. package/src/api/manager/sceneManager.ts +105 -105
  87. package/src/api/manager/variantInstanceManager.ts +236 -236
  88. package/src/api/store/specStorage.ts +53 -53
  89. package/src/api/util/babylonHelper.ts +534 -555
  90. package/src/api/util/globalTypes.ts +385 -379
  91. package/src/api/util/resourceHelper.ts +184 -184
  92. package/src/api/util/stringHelper.ts +25 -25
  93. package/src/buildinfo.json +2 -2
  94. package/src/commonjs.tsconfig.json +13 -13
  95. package/src/declaration.tsconfig.json +10 -10
  96. package/src/dev.ts +42 -42
  97. package/src/es6.tsconfig.json +13 -13
  98. package/src/index.ts +91 -91
  99. package/src/pagesconfig.json +65 -61
  100. package/src/tsconfig.json +43 -43
  101. package/src/tsconfig.types.json +9 -9
  102. package/src/types.d.ts +4 -4
  103. package/dist/webpack-stats.json +0 -0
package/README.md CHANGED
@@ -1,114 +1,114 @@
1
- # 3D viewer
2
-
3
- ## Usage
4
-
5
- - Create a label called `JS_3dViewerLbl` which we'll use to render the 3d viewer into:
6
-
7
- - Set its value to `<canvas></canvas>`
8
- - Add CSS class `ViewerLbl`
9
- - Add the following CSS styles to your configurator:
10
-
11
- ```css
12
- .ViewerLbl .cfgrctrl-innerlabel {
13
- height: 100%;
14
- }
15
-
16
- .ViewerLbl canvas {
17
- width: 100%;
18
- height: 100%;
19
- }
20
- ```
21
-
22
- - Install viewer dependencies: `npm i @combeenation/3d-viewer`
23
- - Create specification (example, bare minimum):
24
- ```js
25
- /**
26
- * @return {StructureJson}
27
- */
28
- export function createSpec() {
29
- return {
30
- scene: {
31
- engine: {
32
- antialiasing: true,
33
- options: {
34
- preserveDrawingBuffer: true,
35
- stencil: true,
36
- // `xrCompatible` is required to fix WebXR issue in Safari 15 as mentioned in the BabylonJS forum:
37
- // https://forum.babylonjs.com/t/safari-15-0-breaks-every-babylonjs-application/23973
38
- xrCompatible: false,
39
- },
40
- },
41
- scene: {
42
- globals: {},
43
- lights: {
44
- default: {
45
- type: 'hemispheric',
46
- },
47
- },
48
- cameras: {},
49
- },
50
- },
51
- setup: {
52
- instances: [
53
- {
54
- name: 'DirtBikeInstance',
55
- variant: 'DirtBike',
56
- lazy: false,
57
- parameters: {
58
- visible: true,
59
- scaling: '( 1, 1, 1 )',
60
- position: '( 0, 0, 0 )',
61
- rotation: '( 0, 0, 0 )',
62
- },
63
- },
64
- ],
65
- },
66
- variants: {
67
- DirtBike: {
68
- glTF: 'https://combeepublic.blob.core.windows.net/resources/the-3d-file.glb',
69
- elements: {
70
- Main: ['__root__'],
71
- },
72
- },
73
- },
74
- };
75
- }
76
- ```
77
-
78
- - Bootstrap viewer (example code):
79
-
80
- ```js
81
- import { Viewer } from '@combeenation/3d-viewer';
82
- import { CtrlUtils } from '@combeenation/custom-js-utils';
83
- import { createSpec } from 'path/to/spec-file';
84
-
85
- /**
86
- * Bootstraps the viewer using the JSON spec, registers all needed events etc.
87
- */
88
- export async function bootstrapViewer() {
89
- Cbn.utils.Log.add(`Bootstrapping viewer v${Viewer.version}`, Cbn.utils.Log.Type.Misc)();
90
-
91
- const $canvas = $(CtrlUtils.getLabel('JS_3dViewerLbl').el.dom).find('canvas');
92
- const canvas = /** @type {HTMLCanvasElement} */ ($canvas.get(0));
93
- const viewer = new Viewer(canvas, createSpec());
94
- await viewer.bootstrap();
95
-
96
- // The resize listener doesn't seem to work on the canvas itself, therefore we're installing it on its parent
97
- Cbn.utils.ResizeEvents.addResizeListener(canvas.parentElement, () => viewer.resize());
98
- }
99
- ```
100
-
101
- - Call `bootstrapViewer` e.g. somewhere in `onCfgrReady` in your main file:
102
- ```js
103
- CfgrUtils.onCfgrReady(async () => {
104
- // ...
105
-
106
- const viewer = await bootstrapViewer();
107
-
108
- // ...
109
-
110
- // Make some functions accessible in the global window object (e.g. for debugging in the console etc.)
111
- // Can be extended as needed.
112
- window.CfgrJS = { /* ... */ viewer /* ... */ };
113
- });
114
- ```
1
+ # 3D viewer
2
+
3
+ ## Usage
4
+
5
+ - Create a label called `JS_3dViewerLbl` which we'll use to render the 3d viewer into:
6
+
7
+ - Set its value to `<canvas></canvas>`
8
+ - Add CSS class `ViewerLbl`
9
+ - Add the following CSS styles to your configurator:
10
+
11
+ ```css
12
+ .ViewerLbl .cfgrctrl-innerlabel {
13
+ height: 100%;
14
+ }
15
+
16
+ .ViewerLbl canvas {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ ```
21
+
22
+ - Install viewer dependencies: `npm i @combeenation/3d-viewer`
23
+ - Create specification (example, bare minimum):
24
+ ```js
25
+ /**
26
+ * @return {StructureJson}
27
+ */
28
+ export function createSpec() {
29
+ return {
30
+ scene: {
31
+ engine: {
32
+ antialiasing: true,
33
+ options: {
34
+ preserveDrawingBuffer: true,
35
+ stencil: true,
36
+ // `xrCompatible` is required to fix WebXR issue in Safari 15 as mentioned in the BabylonJS forum:
37
+ // https://forum.babylonjs.com/t/safari-15-0-breaks-every-babylonjs-application/23973
38
+ xrCompatible: false,
39
+ },
40
+ },
41
+ scene: {
42
+ globals: {},
43
+ lights: {
44
+ default: {
45
+ type: 'hemispheric',
46
+ },
47
+ },
48
+ cameras: {},
49
+ },
50
+ },
51
+ setup: {
52
+ instances: [
53
+ {
54
+ name: 'DirtBikeInstance',
55
+ variant: 'DirtBike',
56
+ lazy: false,
57
+ parameters: {
58
+ visible: true,
59
+ scaling: '( 1, 1, 1 )',
60
+ position: '( 0, 0, 0 )',
61
+ rotation: '( 0, 0, 0 )',
62
+ },
63
+ },
64
+ ],
65
+ },
66
+ variants: {
67
+ DirtBike: {
68
+ glTF: 'https://combeepublic.blob.core.windows.net/resources/the-3d-file.glb',
69
+ elements: {
70
+ Main: ['__root__'],
71
+ },
72
+ },
73
+ },
74
+ };
75
+ }
76
+ ```
77
+
78
+ - Bootstrap viewer (example code):
79
+
80
+ ```js
81
+ import { Viewer } from '@combeenation/3d-viewer';
82
+ import { CtrlUtils } from '@combeenation/custom-js-utils';
83
+ import { createSpec } from 'path/to/spec-file';
84
+
85
+ /**
86
+ * Bootstraps the viewer using the JSON spec, registers all needed events etc.
87
+ */
88
+ export async function bootstrapViewer() {
89
+ Cbn.utils.Log.add(`Bootstrapping viewer v${Viewer.version}`, Cbn.utils.Log.Type.Misc)();
90
+
91
+ const $canvas = $(CtrlUtils.getLabel('JS_3dViewerLbl').el.dom).find('canvas');
92
+ const canvas = /** @type {HTMLCanvasElement} */ ($canvas.get(0));
93
+ const viewer = new Viewer(canvas, createSpec());
94
+ await viewer.bootstrap();
95
+
96
+ // The resize listener doesn't seem to work on the canvas itself, therefore we're installing it on its parent
97
+ Cbn.utils.ResizeEvents.addResizeListener(canvas.parentElement, () => viewer.resize());
98
+ }
99
+ ```
100
+
101
+ - Call `bootstrapViewer` e.g. somewhere in `onCfgrReady` in your main file:
102
+ ```js
103
+ CfgrUtils.onCfgrReady(async () => {
104
+ // ...
105
+
106
+ const viewer = await bootstrapViewer();
107
+
108
+ // ...
109
+
110
+ // Make some functions accessible in the global window object (e.g. for debugging in the console etc.)
111
+ // Can be extended as needed.
112
+ window.CfgrJS = { /* ... */ viewer /* ... */ };
113
+ });
114
+ ```
@@ -1,8 +1,8 @@
1
- /**
2
- * An Interface defining the basic functionality of an animation.
3
- */
4
- interface AnimationInterface {
5
- play(): Promise<AnimationInterface>;
6
- pause(): AnimationInterface;
7
- kill(): AnimationInterface;
8
- }
1
+ /**
2
+ * An Interface defining the basic functionality of an animation.
3
+ */
4
+ interface AnimationInterface {
5
+ play(): Promise<AnimationInterface>;
6
+ pause(): AnimationInterface;
7
+ kill(): AnimationInterface;
8
+ }
@@ -1,2 +1,2 @@
1
- "use strict";
1
+ "use strict";
2
2
  //# sourceMappingURL=animationInterface.js.map
@@ -1,79 +1,79 @@
1
- export declare class DottedPath {
2
- static DELIMITER: string;
3
- static SAFE_CHAR: string;
4
- parts: string[];
5
- /**
6
- * Magic factory function that creates a DottedPath based on the argument type.
7
- */
8
- static create(dottedPath?: DottedPathArgument): DottedPath;
9
- /**
10
- * Creates a DottedPath from a string.
11
- * Allows patterns with unsafe characters wrapped in apostrophes or quotes.
12
- * E.g. "part1.part2.'part.3'.part_4"
13
- */
14
- static createFromPath(path: string): DottedPath;
15
- /**
16
- * Creates a DottedPath from a string list.
17
- */
18
- static createFromParts(parts: string[]): DottedPath;
19
- /**
20
- * Creates an empty DottedPath.
21
- */
22
- static createEmpty(): DottedPath;
23
- /**
24
- * Sanitizes given part: replaces all characters like {@link DottedPath.DELIMITER}
25
- * with a "safe" character like {@link DottedPath.SAFE_CHAR}.
26
- * (i) Does not trim whitespace.
27
- */
28
- static sanitizePart(part: string): string;
29
- /**
30
- * Constructor
31
- */
32
- private constructor();
33
- /**
34
- * The path.
35
- * (i) Does not return an empty dot for no path.
36
- */
37
- get path(): string;
38
- /**
39
- * The first part.
40
- */
41
- get firstPart(): string | null;
42
- /**
43
- * The last part.
44
- */
45
- get lastPart(): string | null;
46
- /**
47
- * Gets the tokens to each leaf of the DottedPath tree.
48
- * E.g. "part1.part2.part_3" will return an array like
49
- * ["part1", "part1.part2", "part1.part2.part_3"]
50
- */
51
- get leafTokens(): string[];
52
- /**
53
- * Removes the first part and returns it.
54
- */
55
- shiftPart(): string | undefined;
56
- /**
57
- * Adds part to the beginning of parts list.
58
- */
59
- unshiftPart(part: string, duplicateCheck?: boolean): DottedPath;
60
- /**
61
- * Adds part to the end of parts list.
62
- * (i) Does not add a part if the last char already is the delimiter or if an empty string was passed.
63
- */
64
- addPart(part: string, duplicateCheck?: boolean): DottedPath;
65
- /**
66
- * Adds multiple parts to the end of parts list.
67
- */
68
- addParts(parts: string[], duplicateCheck?: boolean): DottedPath;
69
- /**
70
- * Removes the last part and returns it.
71
- */
72
- popPart(): string | undefined;
73
- toString(): string;
74
- valueOf(): string;
75
- /**
76
- * Clones the DottedPath.
77
- */
78
- clone(): DottedPath;
79
- }
1
+ export declare class DottedPath {
2
+ static DELIMITER: string;
3
+ static SAFE_CHAR: string;
4
+ parts: string[];
5
+ /**
6
+ * Magic factory function that creates a DottedPath based on the argument type.
7
+ */
8
+ static create(dottedPath?: DottedPathArgument): DottedPath;
9
+ /**
10
+ * Creates a DottedPath from a string.
11
+ * Allows patterns with unsafe characters wrapped in apostrophes or quotes.
12
+ * E.g. "part1.part2.'part.3'.part_4"
13
+ */
14
+ static createFromPath(path: string): DottedPath;
15
+ /**
16
+ * Creates a DottedPath from a string list.
17
+ */
18
+ static createFromParts(parts: string[]): DottedPath;
19
+ /**
20
+ * Creates an empty DottedPath.
21
+ */
22
+ static createEmpty(): DottedPath;
23
+ /**
24
+ * Sanitizes given part: replaces all characters like {@link DottedPath.DELIMITER}
25
+ * with a "safe" character like {@link DottedPath.SAFE_CHAR}.
26
+ * (i) Does not trim whitespace.
27
+ */
28
+ static sanitizePart(part: string): string;
29
+ /**
30
+ * Constructor
31
+ */
32
+ private constructor();
33
+ /**
34
+ * The path.
35
+ * (i) Does not return an empty dot for no path.
36
+ */
37
+ get path(): string;
38
+ /**
39
+ * The first part.
40
+ */
41
+ get firstPart(): string | null;
42
+ /**
43
+ * The last part.
44
+ */
45
+ get lastPart(): string | null;
46
+ /**
47
+ * Gets the tokens to each leaf of the DottedPath tree.
48
+ * E.g. "part1.part2.part_3" will return an array like
49
+ * ["part1", "part1.part2", "part1.part2.part_3"]
50
+ */
51
+ get leafTokens(): string[];
52
+ /**
53
+ * Removes the first part and returns it.
54
+ */
55
+ shiftPart(): string | undefined;
56
+ /**
57
+ * Adds part to the beginning of parts list.
58
+ */
59
+ unshiftPart(part: string, duplicateCheck?: boolean): DottedPath;
60
+ /**
61
+ * Adds part to the end of parts list.
62
+ * (i) Does not add a part if the last char already is the delimiter or if an empty string was passed.
63
+ */
64
+ addPart(part: string, duplicateCheck?: boolean): DottedPath;
65
+ /**
66
+ * Adds multiple parts to the end of parts list.
67
+ */
68
+ addParts(parts: string[], duplicateCheck?: boolean): DottedPath;
69
+ /**
70
+ * Removes the last part and returns it.
71
+ */
72
+ popPart(): string | undefined;
73
+ toString(): string;
74
+ valueOf(): string;
75
+ /**
76
+ * Clones the DottedPath.
77
+ */
78
+ clone(): DottedPath;
79
+ }