@babylonjs/gui 5.0.0-rc.5 → 5.0.0-rc.9

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 (203) hide show
  1. package/2D/adtInstrumentation.d.ts +52 -52
  2. package/2D/adtInstrumentation.js +126 -126
  3. package/2D/advancedDynamicTexture.d.ts +448 -448
  4. package/2D/advancedDynamicTexture.js +1318 -1318
  5. package/2D/controls/button.d.ts +135 -135
  6. package/2D/controls/button.js +276 -276
  7. package/2D/controls/checkbox.d.ts +59 -59
  8. package/2D/controls/checkbox.js +188 -188
  9. package/2D/controls/colorpicker.d.ts +103 -103
  10. package/2D/controls/colorpicker.js +1417 -1417
  11. package/2D/controls/container.d.ts +175 -175
  12. package/2D/controls/container.js +570 -570
  13. package/2D/controls/control.d.ts +866 -866
  14. package/2D/controls/control.js +2433 -2433
  15. package/2D/controls/displayGrid.d.ts +53 -53
  16. package/2D/controls/displayGrid.js +245 -245
  17. package/2D/controls/ellipse.d.ts +21 -21
  18. package/2D/controls/ellipse.js +85 -85
  19. package/2D/controls/focusableButton.d.ts +59 -59
  20. package/2D/controls/focusableButton.js +99 -99
  21. package/2D/controls/focusableControl.d.ts +34 -34
  22. package/2D/controls/focusableControl.js +1 -1
  23. package/2D/controls/grid.d.ts +139 -139
  24. package/2D/controls/grid.js +529 -529
  25. package/2D/controls/image.d.ts +204 -204
  26. package/2D/controls/image.js +887 -887
  27. package/2D/controls/index.d.ts +29 -29
  28. package/2D/controls/index.js +29 -29
  29. package/2D/controls/inputPassword.d.ts +8 -8
  30. package/2D/controls/inputPassword.js +25 -25
  31. package/2D/controls/inputText.d.ts +201 -201
  32. package/2D/controls/inputText.js +1119 -1119
  33. package/2D/controls/line.d.ts +66 -66
  34. package/2D/controls/line.js +271 -271
  35. package/2D/controls/multiLine.d.ts +75 -75
  36. package/2D/controls/multiLine.js +262 -262
  37. package/2D/controls/radioButton.d.ts +49 -49
  38. package/2D/controls/radioButton.js +205 -205
  39. package/2D/controls/rectangle.d.ts +29 -29
  40. package/2D/controls/rectangle.js +150 -150
  41. package/2D/controls/scrollViewers/scrollViewer.d.ts +182 -182
  42. package/2D/controls/scrollViewers/scrollViewer.js +677 -677
  43. package/2D/controls/scrollViewers/scrollViewerWindow.d.ts +57 -57
  44. package/2D/controls/scrollViewers/scrollViewerWindow.js +278 -278
  45. package/2D/controls/selector.d.ts +263 -263
  46. package/2D/controls/selector.js +692 -692
  47. package/2D/controls/sliders/baseSlider.d.ts +82 -82
  48. package/2D/controls/sliders/baseSlider.js +347 -347
  49. package/2D/controls/sliders/imageBasedSlider.d.ts +49 -49
  50. package/2D/controls/sliders/imageBasedSlider.js +192 -192
  51. package/2D/controls/sliders/imageScrollBar.d.ts +65 -65
  52. package/2D/controls/sliders/imageScrollBar.js +263 -263
  53. package/2D/controls/sliders/scrollBar.d.ts +38 -38
  54. package/2D/controls/sliders/scrollBar.js +143 -143
  55. package/2D/controls/sliders/slider.d.ts +35 -35
  56. package/2D/controls/sliders/slider.js +271 -271
  57. package/2D/controls/stackPanel.d.ts +64 -64
  58. package/2D/controls/stackPanel.js +246 -246
  59. package/2D/controls/statics.d.ts +6 -6
  60. package/2D/controls/statics.js +49 -49
  61. package/2D/controls/textBlock.d.ts +175 -175
  62. package/2D/controls/textBlock.js +603 -603
  63. package/2D/controls/textWrapper.d.ts +13 -13
  64. package/2D/controls/textWrapper.js +101 -101
  65. package/2D/controls/toggleButton.d.ts +117 -117
  66. package/2D/controls/toggleButton.js +268 -268
  67. package/2D/controls/virtualKeyboard.d.ts +96 -96
  68. package/2D/controls/virtualKeyboard.js +256 -256
  69. package/2D/index.d.ts +9 -9
  70. package/2D/index.js +9 -9
  71. package/2D/math2D.d.ts +117 -117
  72. package/2D/math2D.js +221 -221
  73. package/2D/measure.d.ts +77 -77
  74. package/2D/measure.js +139 -139
  75. package/2D/multiLinePoint.d.ts +47 -47
  76. package/2D/multiLinePoint.js +127 -127
  77. package/2D/style.d.ts +46 -46
  78. package/2D/style.js +97 -97
  79. package/2D/valueAndUnit.d.ts +89 -89
  80. package/2D/valueAndUnit.js +226 -226
  81. package/2D/xmlLoader.d.ts +60 -60
  82. package/2D/xmlLoader.js +348 -348
  83. package/3D/behaviors/defaultBehavior.d.ts +73 -73
  84. package/3D/behaviors/defaultBehavior.js +121 -121
  85. package/3D/controls/abstractButton3D.d.ts +15 -15
  86. package/3D/controls/abstractButton3D.js +25 -25
  87. package/3D/controls/button3D.d.ts +30 -30
  88. package/3D/controls/button3D.js +93 -93
  89. package/3D/controls/container3D.d.ts +72 -72
  90. package/3D/controls/container3D.js +139 -139
  91. package/3D/controls/contentDisplay3D.d.ts +30 -30
  92. package/3D/controls/contentDisplay3D.js +79 -79
  93. package/3D/controls/control3D.d.ts +201 -201
  94. package/3D/controls/control3D.js +445 -445
  95. package/3D/controls/cylinderPanel.d.ts +17 -17
  96. package/3D/controls/cylinderPanel.js +66 -66
  97. package/3D/controls/handMenu.d.ts +28 -28
  98. package/3D/controls/handMenu.js +47 -47
  99. package/3D/controls/holographicBackplate.d.ts +49 -49
  100. package/3D/controls/holographicBackplate.js +120 -120
  101. package/3D/controls/holographicButton.d.ts +84 -84
  102. package/3D/controls/holographicButton.js +339 -339
  103. package/3D/controls/holographicSlate.d.ts +131 -131
  104. package/3D/controls/holographicSlate.js +431 -431
  105. package/3D/controls/index.d.ts +21 -21
  106. package/3D/controls/index.js +21 -21
  107. package/3D/controls/meshButton3D.d.ts +21 -21
  108. package/3D/controls/meshButton3D.js +62 -62
  109. package/3D/controls/nearMenu.d.ts +44 -44
  110. package/3D/controls/nearMenu.js +114 -114
  111. package/3D/controls/planePanel.d.ts +9 -9
  112. package/3D/controls/planePanel.js +36 -36
  113. package/3D/controls/scatterPanel.d.ts +18 -18
  114. package/3D/controls/scatterPanel.js +108 -108
  115. package/3D/controls/slider3D.d.ts +81 -81
  116. package/3D/controls/slider3D.js +268 -268
  117. package/3D/controls/spherePanel.d.ts +17 -17
  118. package/3D/controls/spherePanel.js +67 -67
  119. package/3D/controls/stackPanel3D.d.ts +22 -22
  120. package/3D/controls/stackPanel3D.js +107 -107
  121. package/3D/controls/touchButton3D.d.ts +80 -80
  122. package/3D/controls/touchButton3D.js +233 -233
  123. package/3D/controls/touchHolographicButton.d.ts +110 -110
  124. package/3D/controls/touchHolographicButton.js +445 -445
  125. package/3D/controls/touchHolographicMenu.d.ts +61 -61
  126. package/3D/controls/touchHolographicMenu.js +149 -149
  127. package/3D/controls/touchMeshButton3D.d.ts +21 -21
  128. package/3D/controls/touchMeshButton3D.js +62 -62
  129. package/3D/controls/volumeBasedPanel.d.ts +53 -53
  130. package/3D/controls/volumeBasedPanel.js +174 -174
  131. package/3D/gizmos/gizmoHandle.d.ts +108 -108
  132. package/3D/gizmos/gizmoHandle.js +209 -209
  133. package/3D/gizmos/index.d.ts +2 -2
  134. package/3D/gizmos/index.js +2 -2
  135. package/3D/gizmos/slateGizmo.d.ts +57 -57
  136. package/3D/gizmos/slateGizmo.js +369 -369
  137. package/3D/gui3DManager.d.ts +94 -94
  138. package/3D/gui3DManager.js +257 -257
  139. package/3D/index.d.ts +5 -5
  140. package/3D/index.js +5 -5
  141. package/3D/materials/fluent/fluentMaterial.d.ts +90 -90
  142. package/3D/materials/fluent/fluentMaterial.js +292 -292
  143. package/3D/materials/fluent/index.d.ts +1 -1
  144. package/3D/materials/fluent/index.js +1 -1
  145. package/3D/materials/fluent/shaders/fluent.fragment.d.ts +5 -5
  146. package/3D/materials/fluent/shaders/fluent.fragment.js +8 -8
  147. package/3D/materials/fluent/shaders/fluent.vertex.d.ts +5 -5
  148. package/3D/materials/fluent/shaders/fluent.vertex.js +8 -8
  149. package/3D/materials/fluentBackplate/fluentBackplateMaterial.d.ts +154 -154
  150. package/3D/materials/fluentBackplate/fluentBackplateMaterial.js +469 -469
  151. package/3D/materials/fluentBackplate/index.d.ts +1 -1
  152. package/3D/materials/fluentBackplate/index.js +1 -1
  153. package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.d.ts +5 -5
  154. package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.js +8 -8
  155. package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.d.ts +5 -5
  156. package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.js +8 -8
  157. package/3D/materials/fluentButton/fluentButtonMaterial.d.ts +189 -189
  158. package/3D/materials/fluentButton/fluentButtonMaterial.js +539 -539
  159. package/3D/materials/fluentButton/index.d.ts +1 -1
  160. package/3D/materials/fluentButton/index.js +1 -1
  161. package/3D/materials/fluentButton/shaders/fluentButton.fragment.d.ts +5 -5
  162. package/3D/materials/fluentButton/shaders/fluentButton.fragment.js +8 -8
  163. package/3D/materials/fluentButton/shaders/fluentButton.vertex.d.ts +5 -5
  164. package/3D/materials/fluentButton/shaders/fluentButton.vertex.js +8 -8
  165. package/3D/materials/fluentMaterial.d.ts +4 -4
  166. package/3D/materials/fluentMaterial.js +4 -4
  167. package/3D/materials/handle/handleMaterial.d.ts +68 -68
  168. package/3D/materials/handle/handleMaterial.js +126 -126
  169. package/3D/materials/handle/index.d.ts +1 -1
  170. package/3D/materials/handle/index.js +1 -1
  171. package/3D/materials/handle/shaders/handle.fragment.d.ts +5 -5
  172. package/3D/materials/handle/shaders/handle.fragment.js +8 -8
  173. package/3D/materials/handle/shaders/handle.vertex.d.ts +5 -5
  174. package/3D/materials/handle/shaders/handle.vertex.js +8 -8
  175. package/3D/materials/index.d.ts +5 -5
  176. package/3D/materials/index.js +5 -5
  177. package/3D/materials/mrdl/index.d.ts +3 -3
  178. package/3D/materials/mrdl/index.js +3 -3
  179. package/3D/materials/mrdl/mrdlBackplateMaterial.d.ts +147 -147
  180. package/3D/materials/mrdl/mrdlBackplateMaterial.js +436 -436
  181. package/3D/materials/mrdl/mrdlSliderBarMaterial.d.ts +333 -333
  182. package/3D/materials/mrdl/mrdlSliderBarMaterial.js +851 -851
  183. package/3D/materials/mrdl/mrdlSliderThumbMaterial.d.ts +333 -333
  184. package/3D/materials/mrdl/mrdlSliderThumbMaterial.js +851 -851
  185. package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.d.ts +5 -5
  186. package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.js +8 -8
  187. package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.d.ts +5 -5
  188. package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.js +8 -8
  189. package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.d.ts +5 -5
  190. package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.js +8 -8
  191. package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.d.ts +5 -5
  192. package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.js +8 -8
  193. package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.d.ts +5 -5
  194. package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.js +8 -8
  195. package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.d.ts +5 -5
  196. package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.js +8 -8
  197. package/3D/vector3WithInfo.d.ts +16 -16
  198. package/3D/vector3WithInfo.js +23 -23
  199. package/index.d.ts +2 -2
  200. package/index.js +2 -2
  201. package/legacy/legacy.d.ts +1 -1
  202. package/legacy/legacy.js +13 -13
  203. package/package.json +2 -2
@@ -1,340 +1,340 @@
1
- import { __extends } from "tslib";
2
- import { Button3D } from "./button3D.js";
3
- import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
4
- import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
5
- import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
6
- import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
7
- import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
8
- import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior.js";
9
- import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
10
- import { StackPanel } from "../../2D/controls/stackPanel.js";
11
- import { Image } from "../../2D/controls/image.js";
12
- import { TextBlock } from "../../2D/controls/textBlock.js";
13
- import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture.js";
14
- import { Color3 } from "@babylonjs/core/Maths/math.color.js";
15
- import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
16
- /**
17
- * Class used to create a holographic button in 3D
18
- */
19
- var HolographicButton = /** @class */ (function (_super) {
20
- __extends(HolographicButton, _super);
21
- /**
22
- * Creates a new button
23
- * @param name defines the control name
24
- * @param shareMaterials
25
- */
26
- function HolographicButton(name, shareMaterials) {
27
- if (shareMaterials === void 0) { shareMaterials = true; }
28
- var _this = _super.call(this, name) || this;
29
- _this._shareMaterials = true;
30
- _this._shareMaterials = shareMaterials;
31
- // Default animations
32
- _this.pointerEnterAnimation = function () {
33
- if (!_this.mesh) {
34
- return;
35
- }
36
- _this._frontPlate.setEnabled(true);
37
- };
38
- _this.pointerOutAnimation = function () {
39
- if (!_this.mesh) {
40
- return;
41
- }
42
- _this._frontPlate.setEnabled(false);
43
- };
44
- return _this;
45
- }
46
- HolographicButton.prototype._disposeTooltip = function () {
47
- this._tooltipFade = null;
48
- if (this._tooltipTextBlock) {
49
- this._tooltipTextBlock.dispose();
50
- }
51
- if (this._tooltipTexture) {
52
- this._tooltipTexture.dispose();
53
- }
54
- if (this._tooltipMesh) {
55
- this._tooltipMesh.dispose();
56
- }
57
- this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
58
- this.onPointerOutObservable.remove(this._tooltipOutObserver);
59
- };
60
- Object.defineProperty(HolographicButton.prototype, "renderingGroupId", {
61
- get: function () {
62
- return this._backPlate.renderingGroupId;
63
- },
64
- /**
65
- * Rendering ground id of all the mesh in the button
66
- */
67
- set: function (id) {
68
- this._backPlate.renderingGroupId = id;
69
- this._textPlate.renderingGroupId = id;
70
- this._frontPlate.renderingGroupId = id;
71
- if (this._tooltipMesh) {
72
- this._tooltipMesh.renderingGroupId = id;
73
- }
74
- },
75
- enumerable: false,
76
- configurable: true
77
- });
78
- Object.defineProperty(HolographicButton.prototype, "tooltipText", {
79
- get: function () {
80
- if (this._tooltipTextBlock) {
81
- return this._tooltipTextBlock.text;
82
- }
83
- return null;
84
- },
85
- /**
86
- * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
87
- */
88
- set: function (text) {
89
- var _this = this;
90
- if (!text) {
91
- this._disposeTooltip();
92
- return;
93
- }
94
- if (!this._tooltipFade) {
95
- var rightHandedScene = this._backPlate._scene.useRightHandedSystem;
96
- // Create tooltip with mesh and text
97
- this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
98
- var tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
99
- var mat = new StandardMaterial("", this._backPlate._scene);
100
- mat.diffuseColor = Color3.FromHexString("#212121");
101
- tooltipBackground.material = mat;
102
- tooltipBackground.isPickable = false;
103
- this._tooltipMesh.addChild(tooltipBackground);
104
- tooltipBackground.position = Vector3.Forward(rightHandedScene).scale(0.05);
105
- this._tooltipMesh.scaling.y = 1 / 3;
106
- this._tooltipMesh.position = Vector3.Up().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));
107
- this._tooltipMesh.isPickable = false;
108
- this._tooltipMesh.parent = this._backPlate;
109
- // Create text texture for the tooltip
110
- this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);
111
- this._tooltipTextBlock = new TextBlock();
112
- this._tooltipTextBlock.scaleY = 3;
113
- this._tooltipTextBlock.color = "white";
114
- this._tooltipTextBlock.fontSize = 130;
115
- this._tooltipTexture.addControl(this._tooltipTextBlock);
116
- // Add hover action to tooltip
117
- this._tooltipFade = new FadeInOutBehavior();
118
- this._tooltipFade.delay = 500;
119
- this._tooltipMesh.addBehavior(this._tooltipFade);
120
- this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
121
- if (_this._tooltipFade) {
122
- _this._tooltipFade.fadeIn(true);
123
- }
124
- });
125
- this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
126
- if (_this._tooltipFade) {
127
- _this._tooltipFade.fadeIn(false);
128
- }
129
- });
130
- }
131
- if (this._tooltipTextBlock) {
132
- this._tooltipTextBlock.text = text;
133
- }
134
- },
135
- enumerable: false,
136
- configurable: true
137
- });
138
- Object.defineProperty(HolographicButton.prototype, "text", {
139
- /**
140
- * Gets or sets text for the button
141
- */
142
- get: function () {
143
- return this._text;
144
- },
145
- set: function (value) {
146
- if (this._text === value) {
147
- return;
148
- }
149
- this._text = value;
150
- this._rebuildContent();
151
- },
152
- enumerable: false,
153
- configurable: true
154
- });
155
- Object.defineProperty(HolographicButton.prototype, "imageUrl", {
156
- /**
157
- * Gets or sets the image url for the button
158
- */
159
- get: function () {
160
- return this._imageUrl;
161
- },
162
- set: function (value) {
163
- if (this._imageUrl === value) {
164
- return;
165
- }
166
- this._imageUrl = value;
167
- this._rebuildContent();
168
- },
169
- enumerable: false,
170
- configurable: true
171
- });
172
- Object.defineProperty(HolographicButton.prototype, "backMaterial", {
173
- /**
174
- * Gets the back material used by this button
175
- */
176
- get: function () {
177
- return this._backMaterial;
178
- },
179
- enumerable: false,
180
- configurable: true
181
- });
182
- Object.defineProperty(HolographicButton.prototype, "frontMaterial", {
183
- /**
184
- * Gets the front material used by this button
185
- */
186
- get: function () {
187
- return this._frontMaterial;
188
- },
189
- enumerable: false,
190
- configurable: true
191
- });
192
- Object.defineProperty(HolographicButton.prototype, "plateMaterial", {
193
- /**
194
- * Gets the plate material used by this button
195
- */
196
- get: function () {
197
- return this._plateMaterial;
198
- },
199
- enumerable: false,
200
- configurable: true
201
- });
202
- Object.defineProperty(HolographicButton.prototype, "shareMaterials", {
203
- /**
204
- * Gets a boolean indicating if this button shares its material with other HolographicButtons
205
- */
206
- get: function () {
207
- return this._shareMaterials;
208
- },
209
- enumerable: false,
210
- configurable: true
211
- });
212
- HolographicButton.prototype._getTypeName = function () {
213
- return "HolographicButton";
214
- };
215
- HolographicButton.prototype._rebuildContent = function () {
216
- this._disposeFacadeTexture();
217
- var panel = new StackPanel();
218
- panel.isVertical = true;
219
- if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
220
- if (this._imageUrl) {
221
- var image = new Image();
222
- image.source = this._imageUrl;
223
- image.paddingTop = "40px";
224
- image.height = "180px";
225
- image.width = "100px";
226
- image.paddingBottom = "40px";
227
- panel.addControl(image);
228
- }
229
- }
230
- if (this._text) {
231
- var text = new TextBlock();
232
- text.text = this._text;
233
- text.color = "white";
234
- text.height = "30px";
235
- text.fontSize = 24;
236
- panel.addControl(text);
237
- }
238
- if (this._frontPlate) {
239
- this.content = panel;
240
- }
241
- };
242
- // Mesh association
243
- HolographicButton.prototype._createNode = function (scene) {
244
- this._backPlate = CreateBox(this.name + "BackMesh", {
245
- width: 1.0,
246
- height: 1.0,
247
- depth: 0.08,
248
- }, scene);
249
- this._frontPlate = CreateBox(this.name + "FrontMesh", {
250
- width: 1.0,
251
- height: 1.0,
252
- depth: 0.08,
253
- }, scene);
254
- this._frontPlate.parent = this._backPlate;
255
- this._frontPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-0.08);
256
- this._frontPlate.isPickable = false;
257
- this._frontPlate.setEnabled(false);
258
- this._textPlate = _super.prototype._createNode.call(this, scene);
259
- this._textPlate.parent = this._backPlate;
260
- this._textPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-0.08);
261
- this._textPlate.isPickable = false;
262
- return this._backPlate;
263
- };
264
- HolographicButton.prototype._applyFacade = function (facadeTexture) {
265
- this._plateMaterial.emissiveTexture = facadeTexture;
266
- this._plateMaterial.opacityTexture = facadeTexture;
267
- };
268
- HolographicButton.prototype._createBackMaterial = function (mesh) {
269
- var _this = this;
270
- this._backMaterial = new FluentMaterial(this.name + "Back Material", mesh.getScene());
271
- this._backMaterial.renderHoverLight = true;
272
- this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(function (pickedPoint) {
273
- if (pickedPoint) {
274
- _this._backMaterial.hoverPosition = pickedPoint;
275
- _this._backMaterial.hoverColor.a = 1.0;
276
- }
277
- else {
278
- _this._backMaterial.hoverColor.a = 0;
279
- }
280
- });
281
- };
282
- HolographicButton.prototype._createFrontMaterial = function (mesh) {
283
- this._frontMaterial = new FluentMaterial(this.name + "Front Material", mesh.getScene());
284
- this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow
285
- this._frontMaterial.alpha = 0.5; // Additive
286
- this._frontMaterial.renderBorders = true;
287
- };
288
- HolographicButton.prototype._createPlateMaterial = function (mesh) {
289
- this._plateMaterial = new StandardMaterial(this.name + "Plate Material", mesh.getScene());
290
- this._plateMaterial.specularColor = Color3.Black();
291
- };
292
- HolographicButton.prototype._affectMaterial = function (mesh) {
293
- // Back
294
- if (this._shareMaterials) {
295
- if (!this._host._sharedMaterials["backFluentMaterial"]) {
296
- this._createBackMaterial(mesh);
297
- this._host._sharedMaterials["backFluentMaterial"] = this._backMaterial;
298
- }
299
- else {
300
- this._backMaterial = this._host._sharedMaterials["backFluentMaterial"];
301
- }
302
- // Front
303
- if (!this._host._sharedMaterials["frontFluentMaterial"]) {
304
- this._createFrontMaterial(mesh);
305
- this._host._sharedMaterials["frontFluentMaterial"] = this._frontMaterial;
306
- }
307
- else {
308
- this._frontMaterial = this._host._sharedMaterials["frontFluentMaterial"];
309
- }
310
- }
311
- else {
312
- this._createBackMaterial(mesh);
313
- this._createFrontMaterial(mesh);
314
- }
315
- this._createPlateMaterial(mesh);
316
- this._backPlate.material = this._backMaterial;
317
- this._frontPlate.material = this._frontMaterial;
318
- this._textPlate.material = this._plateMaterial;
319
- this._rebuildContent();
320
- };
321
- /**
322
- * Releases all associated resources
323
- */
324
- HolographicButton.prototype.dispose = function () {
325
- _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
326
- this._disposeTooltip();
327
- if (!this.shareMaterials) {
328
- this._backMaterial.dispose();
329
- this._frontMaterial.dispose();
330
- this._plateMaterial.dispose();
331
- if (this._pickedPointObserver) {
332
- this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
333
- this._pickedPointObserver = null;
334
- }
335
- }
336
- };
337
- return HolographicButton;
338
- }(Button3D));
339
- export { HolographicButton };
1
+ import { __extends } from "tslib";
2
+ import { Button3D } from "./button3D";
3
+ import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
4
+ import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
5
+ import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
6
+ import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
7
+ import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
8
+ import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior.js";
9
+ import { FluentMaterial } from "../materials/fluent/fluentMaterial";
10
+ import { StackPanel } from "../../2D/controls/stackPanel";
11
+ import { Image } from "../../2D/controls/image";
12
+ import { TextBlock } from "../../2D/controls/textBlock";
13
+ import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
14
+ import { Color3 } from "@babylonjs/core/Maths/math.color.js";
15
+ import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
16
+ /**
17
+ * Class used to create a holographic button in 3D
18
+ */
19
+ var HolographicButton = /** @class */ (function (_super) {
20
+ __extends(HolographicButton, _super);
21
+ /**
22
+ * Creates a new button
23
+ * @param name defines the control name
24
+ * @param shareMaterials
25
+ */
26
+ function HolographicButton(name, shareMaterials) {
27
+ if (shareMaterials === void 0) { shareMaterials = true; }
28
+ var _this = _super.call(this, name) || this;
29
+ _this._shareMaterials = true;
30
+ _this._shareMaterials = shareMaterials;
31
+ // Default animations
32
+ _this.pointerEnterAnimation = function () {
33
+ if (!_this.mesh) {
34
+ return;
35
+ }
36
+ _this._frontPlate.setEnabled(true);
37
+ };
38
+ _this.pointerOutAnimation = function () {
39
+ if (!_this.mesh) {
40
+ return;
41
+ }
42
+ _this._frontPlate.setEnabled(false);
43
+ };
44
+ return _this;
45
+ }
46
+ HolographicButton.prototype._disposeTooltip = function () {
47
+ this._tooltipFade = null;
48
+ if (this._tooltipTextBlock) {
49
+ this._tooltipTextBlock.dispose();
50
+ }
51
+ if (this._tooltipTexture) {
52
+ this._tooltipTexture.dispose();
53
+ }
54
+ if (this._tooltipMesh) {
55
+ this._tooltipMesh.dispose();
56
+ }
57
+ this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
58
+ this.onPointerOutObservable.remove(this._tooltipOutObserver);
59
+ };
60
+ Object.defineProperty(HolographicButton.prototype, "renderingGroupId", {
61
+ get: function () {
62
+ return this._backPlate.renderingGroupId;
63
+ },
64
+ /**
65
+ * Rendering ground id of all the mesh in the button
66
+ */
67
+ set: function (id) {
68
+ this._backPlate.renderingGroupId = id;
69
+ this._textPlate.renderingGroupId = id;
70
+ this._frontPlate.renderingGroupId = id;
71
+ if (this._tooltipMesh) {
72
+ this._tooltipMesh.renderingGroupId = id;
73
+ }
74
+ },
75
+ enumerable: false,
76
+ configurable: true
77
+ });
78
+ Object.defineProperty(HolographicButton.prototype, "tooltipText", {
79
+ get: function () {
80
+ if (this._tooltipTextBlock) {
81
+ return this._tooltipTextBlock.text;
82
+ }
83
+ return null;
84
+ },
85
+ /**
86
+ * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
87
+ */
88
+ set: function (text) {
89
+ var _this = this;
90
+ if (!text) {
91
+ this._disposeTooltip();
92
+ return;
93
+ }
94
+ if (!this._tooltipFade) {
95
+ var rightHandedScene = this._backPlate._scene.useRightHandedSystem;
96
+ // Create tooltip with mesh and text
97
+ this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
98
+ var tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
99
+ var mat = new StandardMaterial("", this._backPlate._scene);
100
+ mat.diffuseColor = Color3.FromHexString("#212121");
101
+ tooltipBackground.material = mat;
102
+ tooltipBackground.isPickable = false;
103
+ this._tooltipMesh.addChild(tooltipBackground);
104
+ tooltipBackground.position = Vector3.Forward(rightHandedScene).scale(0.05);
105
+ this._tooltipMesh.scaling.y = 1 / 3;
106
+ this._tooltipMesh.position = Vector3.Up().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));
107
+ this._tooltipMesh.isPickable = false;
108
+ this._tooltipMesh.parent = this._backPlate;
109
+ // Create text texture for the tooltip
110
+ this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);
111
+ this._tooltipTextBlock = new TextBlock();
112
+ this._tooltipTextBlock.scaleY = 3;
113
+ this._tooltipTextBlock.color = "white";
114
+ this._tooltipTextBlock.fontSize = 130;
115
+ this._tooltipTexture.addControl(this._tooltipTextBlock);
116
+ // Add hover action to tooltip
117
+ this._tooltipFade = new FadeInOutBehavior();
118
+ this._tooltipFade.delay = 500;
119
+ this._tooltipMesh.addBehavior(this._tooltipFade);
120
+ this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
121
+ if (_this._tooltipFade) {
122
+ _this._tooltipFade.fadeIn(true);
123
+ }
124
+ });
125
+ this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
126
+ if (_this._tooltipFade) {
127
+ _this._tooltipFade.fadeIn(false);
128
+ }
129
+ });
130
+ }
131
+ if (this._tooltipTextBlock) {
132
+ this._tooltipTextBlock.text = text;
133
+ }
134
+ },
135
+ enumerable: false,
136
+ configurable: true
137
+ });
138
+ Object.defineProperty(HolographicButton.prototype, "text", {
139
+ /**
140
+ * Gets or sets text for the button
141
+ */
142
+ get: function () {
143
+ return this._text;
144
+ },
145
+ set: function (value) {
146
+ if (this._text === value) {
147
+ return;
148
+ }
149
+ this._text = value;
150
+ this._rebuildContent();
151
+ },
152
+ enumerable: false,
153
+ configurable: true
154
+ });
155
+ Object.defineProperty(HolographicButton.prototype, "imageUrl", {
156
+ /**
157
+ * Gets or sets the image url for the button
158
+ */
159
+ get: function () {
160
+ return this._imageUrl;
161
+ },
162
+ set: function (value) {
163
+ if (this._imageUrl === value) {
164
+ return;
165
+ }
166
+ this._imageUrl = value;
167
+ this._rebuildContent();
168
+ },
169
+ enumerable: false,
170
+ configurable: true
171
+ });
172
+ Object.defineProperty(HolographicButton.prototype, "backMaterial", {
173
+ /**
174
+ * Gets the back material used by this button
175
+ */
176
+ get: function () {
177
+ return this._backMaterial;
178
+ },
179
+ enumerable: false,
180
+ configurable: true
181
+ });
182
+ Object.defineProperty(HolographicButton.prototype, "frontMaterial", {
183
+ /**
184
+ * Gets the front material used by this button
185
+ */
186
+ get: function () {
187
+ return this._frontMaterial;
188
+ },
189
+ enumerable: false,
190
+ configurable: true
191
+ });
192
+ Object.defineProperty(HolographicButton.prototype, "plateMaterial", {
193
+ /**
194
+ * Gets the plate material used by this button
195
+ */
196
+ get: function () {
197
+ return this._plateMaterial;
198
+ },
199
+ enumerable: false,
200
+ configurable: true
201
+ });
202
+ Object.defineProperty(HolographicButton.prototype, "shareMaterials", {
203
+ /**
204
+ * Gets a boolean indicating if this button shares its material with other HolographicButtons
205
+ */
206
+ get: function () {
207
+ return this._shareMaterials;
208
+ },
209
+ enumerable: false,
210
+ configurable: true
211
+ });
212
+ HolographicButton.prototype._getTypeName = function () {
213
+ return "HolographicButton";
214
+ };
215
+ HolographicButton.prototype._rebuildContent = function () {
216
+ this._disposeFacadeTexture();
217
+ var panel = new StackPanel();
218
+ panel.isVertical = true;
219
+ if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
220
+ if (this._imageUrl) {
221
+ var image = new Image();
222
+ image.source = this._imageUrl;
223
+ image.paddingTop = "40px";
224
+ image.height = "180px";
225
+ image.width = "100px";
226
+ image.paddingBottom = "40px";
227
+ panel.addControl(image);
228
+ }
229
+ }
230
+ if (this._text) {
231
+ var text = new TextBlock();
232
+ text.text = this._text;
233
+ text.color = "white";
234
+ text.height = "30px";
235
+ text.fontSize = 24;
236
+ panel.addControl(text);
237
+ }
238
+ if (this._frontPlate) {
239
+ this.content = panel;
240
+ }
241
+ };
242
+ // Mesh association
243
+ HolographicButton.prototype._createNode = function (scene) {
244
+ this._backPlate = CreateBox(this.name + "BackMesh", {
245
+ width: 1.0,
246
+ height: 1.0,
247
+ depth: 0.08,
248
+ }, scene);
249
+ this._frontPlate = CreateBox(this.name + "FrontMesh", {
250
+ width: 1.0,
251
+ height: 1.0,
252
+ depth: 0.08,
253
+ }, scene);
254
+ this._frontPlate.parent = this._backPlate;
255
+ this._frontPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-0.08);
256
+ this._frontPlate.isPickable = false;
257
+ this._frontPlate.setEnabled(false);
258
+ this._textPlate = _super.prototype._createNode.call(this, scene);
259
+ this._textPlate.parent = this._backPlate;
260
+ this._textPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(-0.08);
261
+ this._textPlate.isPickable = false;
262
+ return this._backPlate;
263
+ };
264
+ HolographicButton.prototype._applyFacade = function (facadeTexture) {
265
+ this._plateMaterial.emissiveTexture = facadeTexture;
266
+ this._plateMaterial.opacityTexture = facadeTexture;
267
+ };
268
+ HolographicButton.prototype._createBackMaterial = function (mesh) {
269
+ var _this = this;
270
+ this._backMaterial = new FluentMaterial(this.name + "Back Material", mesh.getScene());
271
+ this._backMaterial.renderHoverLight = true;
272
+ this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(function (pickedPoint) {
273
+ if (pickedPoint) {
274
+ _this._backMaterial.hoverPosition = pickedPoint;
275
+ _this._backMaterial.hoverColor.a = 1.0;
276
+ }
277
+ else {
278
+ _this._backMaterial.hoverColor.a = 0;
279
+ }
280
+ });
281
+ };
282
+ HolographicButton.prototype._createFrontMaterial = function (mesh) {
283
+ this._frontMaterial = new FluentMaterial(this.name + "Front Material", mesh.getScene());
284
+ this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow
285
+ this._frontMaterial.alpha = 0.5; // Additive
286
+ this._frontMaterial.renderBorders = true;
287
+ };
288
+ HolographicButton.prototype._createPlateMaterial = function (mesh) {
289
+ this._plateMaterial = new StandardMaterial(this.name + "Plate Material", mesh.getScene());
290
+ this._plateMaterial.specularColor = Color3.Black();
291
+ };
292
+ HolographicButton.prototype._affectMaterial = function (mesh) {
293
+ // Back
294
+ if (this._shareMaterials) {
295
+ if (!this._host._sharedMaterials["backFluentMaterial"]) {
296
+ this._createBackMaterial(mesh);
297
+ this._host._sharedMaterials["backFluentMaterial"] = this._backMaterial;
298
+ }
299
+ else {
300
+ this._backMaterial = this._host._sharedMaterials["backFluentMaterial"];
301
+ }
302
+ // Front
303
+ if (!this._host._sharedMaterials["frontFluentMaterial"]) {
304
+ this._createFrontMaterial(mesh);
305
+ this._host._sharedMaterials["frontFluentMaterial"] = this._frontMaterial;
306
+ }
307
+ else {
308
+ this._frontMaterial = this._host._sharedMaterials["frontFluentMaterial"];
309
+ }
310
+ }
311
+ else {
312
+ this._createBackMaterial(mesh);
313
+ this._createFrontMaterial(mesh);
314
+ }
315
+ this._createPlateMaterial(mesh);
316
+ this._backPlate.material = this._backMaterial;
317
+ this._frontPlate.material = this._frontMaterial;
318
+ this._textPlate.material = this._plateMaterial;
319
+ this._rebuildContent();
320
+ };
321
+ /**
322
+ * Releases all associated resources
323
+ */
324
+ HolographicButton.prototype.dispose = function () {
325
+ _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
326
+ this._disposeTooltip();
327
+ if (!this.shareMaterials) {
328
+ this._backMaterial.dispose();
329
+ this._frontMaterial.dispose();
330
+ this._plateMaterial.dispose();
331
+ if (this._pickedPointObserver) {
332
+ this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
333
+ this._pickedPointObserver = null;
334
+ }
335
+ }
336
+ };
337
+ return HolographicButton;
338
+ }(Button3D));
339
+ export { HolographicButton };
340
340
  //# sourceMappingURL=holographicButton.js.map