@babylonjs/gui 5.0.0-rc.7 → 5.0.1

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 (277) hide show
  1. package/2D/adtInstrumentation.d.ts +52 -52
  2. package/2D/adtInstrumentation.js +126 -126
  3. package/2D/adtInstrumentation.js.map +1 -1
  4. package/2D/advancedDynamicTexture.d.ts +449 -448
  5. package/2D/advancedDynamicTexture.js +1318 -1318
  6. package/2D/advancedDynamicTexture.js.map +1 -1
  7. package/2D/controls/button.d.ts +135 -135
  8. package/2D/controls/button.js +276 -276
  9. package/2D/controls/button.js.map +1 -1
  10. package/2D/controls/checkbox.d.ts +59 -59
  11. package/2D/controls/checkbox.js +188 -188
  12. package/2D/controls/checkbox.js.map +1 -1
  13. package/2D/controls/colorpicker.d.ts +103 -103
  14. package/2D/controls/colorpicker.js +1417 -1417
  15. package/2D/controls/colorpicker.js.map +1 -1
  16. package/2D/controls/container.d.ts +175 -175
  17. package/2D/controls/container.js +570 -570
  18. package/2D/controls/container.js.map +1 -1
  19. package/2D/controls/control.d.ts +866 -866
  20. package/2D/controls/control.js +2433 -2433
  21. package/2D/controls/control.js.map +1 -1
  22. package/2D/controls/displayGrid.d.ts +53 -53
  23. package/2D/controls/displayGrid.js +245 -245
  24. package/2D/controls/displayGrid.js.map +1 -1
  25. package/2D/controls/ellipse.d.ts +21 -21
  26. package/2D/controls/ellipse.js +85 -85
  27. package/2D/controls/ellipse.js.map +1 -1
  28. package/2D/controls/focusableButton.d.ts +59 -59
  29. package/2D/controls/focusableButton.js +99 -99
  30. package/2D/controls/focusableButton.js.map +1 -1
  31. package/2D/controls/focusableControl.d.ts +34 -34
  32. package/2D/controls/focusableControl.js +1 -1
  33. package/2D/controls/focusableControl.js.map +1 -1
  34. package/2D/controls/grid.d.ts +139 -139
  35. package/2D/controls/grid.js +529 -529
  36. package/2D/controls/grid.js.map +1 -1
  37. package/2D/controls/image.d.ts +204 -204
  38. package/2D/controls/image.js +887 -887
  39. package/2D/controls/image.js.map +1 -1
  40. package/2D/controls/index.d.ts +29 -29
  41. package/2D/controls/index.js +29 -29
  42. package/2D/controls/inputPassword.d.ts +9 -8
  43. package/2D/controls/inputPassword.js +28 -25
  44. package/2D/controls/inputPassword.js.map +1 -1
  45. package/2D/controls/inputText.d.ts +201 -201
  46. package/2D/controls/inputText.js +1119 -1119
  47. package/2D/controls/inputText.js.map +1 -1
  48. package/2D/controls/line.d.ts +66 -66
  49. package/2D/controls/line.js +271 -271
  50. package/2D/controls/line.js.map +1 -1
  51. package/2D/controls/multiLine.d.ts +75 -75
  52. package/2D/controls/multiLine.js +262 -262
  53. package/2D/controls/multiLine.js.map +1 -1
  54. package/2D/controls/radioButton.d.ts +49 -49
  55. package/2D/controls/radioButton.js +205 -205
  56. package/2D/controls/radioButton.js.map +1 -1
  57. package/2D/controls/rectangle.d.ts +29 -29
  58. package/2D/controls/rectangle.js +150 -150
  59. package/2D/controls/rectangle.js.map +1 -1
  60. package/2D/controls/scrollViewers/scrollViewer.d.ts +182 -182
  61. package/2D/controls/scrollViewers/scrollViewer.js +677 -677
  62. package/2D/controls/scrollViewers/scrollViewer.js.map +1 -1
  63. package/2D/controls/scrollViewers/scrollViewerWindow.d.ts +57 -57
  64. package/2D/controls/scrollViewers/scrollViewerWindow.js +278 -278
  65. package/2D/controls/scrollViewers/scrollViewerWindow.js.map +1 -1
  66. package/2D/controls/selector.d.ts +263 -263
  67. package/2D/controls/selector.js +692 -692
  68. package/2D/controls/sliders/baseSlider.d.ts +82 -82
  69. package/2D/controls/sliders/baseSlider.js +347 -347
  70. package/2D/controls/sliders/baseSlider.js.map +1 -1
  71. package/2D/controls/sliders/imageBasedSlider.d.ts +49 -49
  72. package/2D/controls/sliders/imageBasedSlider.js +192 -192
  73. package/2D/controls/sliders/imageBasedSlider.js.map +1 -1
  74. package/2D/controls/sliders/imageScrollBar.d.ts +65 -65
  75. package/2D/controls/sliders/imageScrollBar.js +263 -263
  76. package/2D/controls/sliders/imageScrollBar.js.map +1 -1
  77. package/2D/controls/sliders/scrollBar.d.ts +38 -38
  78. package/2D/controls/sliders/scrollBar.js +143 -143
  79. package/2D/controls/sliders/scrollBar.js.map +1 -1
  80. package/2D/controls/sliders/slider.d.ts +35 -35
  81. package/2D/controls/sliders/slider.js +271 -271
  82. package/2D/controls/sliders/slider.js.map +1 -1
  83. package/2D/controls/stackPanel.d.ts +64 -64
  84. package/2D/controls/stackPanel.js +246 -246
  85. package/2D/controls/stackPanel.js.map +1 -1
  86. package/2D/controls/statics.d.ts +6 -6
  87. package/2D/controls/statics.js +49 -49
  88. package/2D/controls/textBlock.d.ts +175 -175
  89. package/2D/controls/textBlock.js +603 -603
  90. package/2D/controls/textBlock.js.map +1 -1
  91. package/2D/controls/textWrapper.d.ts +13 -13
  92. package/2D/controls/textWrapper.js +101 -101
  93. package/2D/controls/toggleButton.d.ts +117 -117
  94. package/2D/controls/toggleButton.js +268 -268
  95. package/2D/controls/toggleButton.js.map +1 -1
  96. package/2D/controls/virtualKeyboard.d.ts +96 -96
  97. package/2D/controls/virtualKeyboard.js +256 -256
  98. package/2D/controls/virtualKeyboard.js.map +1 -1
  99. package/2D/index.d.ts +9 -9
  100. package/2D/index.js +10 -9
  101. package/2D/index.js.map +1 -1
  102. package/2D/math2D.d.ts +117 -117
  103. package/2D/math2D.js +221 -221
  104. package/2D/math2D.js.map +1 -1
  105. package/2D/measure.d.ts +77 -77
  106. package/2D/measure.js +139 -139
  107. package/2D/measure.js.map +1 -1
  108. package/2D/multiLinePoint.d.ts +47 -47
  109. package/2D/multiLinePoint.js +127 -127
  110. package/2D/multiLinePoint.js.map +1 -1
  111. package/2D/style.d.ts +46 -46
  112. package/2D/style.js +97 -97
  113. package/2D/style.js.map +1 -1
  114. package/2D/valueAndUnit.d.ts +89 -89
  115. package/2D/valueAndUnit.js +226 -226
  116. package/2D/valueAndUnit.js.map +1 -1
  117. package/2D/xmlLoader.d.ts +60 -60
  118. package/2D/xmlLoader.js +348 -348
  119. package/2D/xmlLoader.js.map +1 -1
  120. package/3D/behaviors/defaultBehavior.d.ts +73 -73
  121. package/3D/behaviors/defaultBehavior.js +121 -121
  122. package/3D/behaviors/defaultBehavior.js.map +1 -1
  123. package/3D/controls/abstractButton3D.d.ts +15 -15
  124. package/3D/controls/abstractButton3D.js +25 -25
  125. package/3D/controls/abstractButton3D.js.map +1 -1
  126. package/3D/controls/button3D.d.ts +30 -30
  127. package/3D/controls/button3D.js +93 -93
  128. package/3D/controls/button3D.js.map +1 -1
  129. package/3D/controls/container3D.d.ts +72 -72
  130. package/3D/controls/container3D.js +139 -139
  131. package/3D/controls/container3D.js.map +1 -1
  132. package/3D/controls/contentDisplay3D.d.ts +30 -30
  133. package/3D/controls/contentDisplay3D.js +79 -79
  134. package/3D/controls/contentDisplay3D.js.map +1 -1
  135. package/3D/controls/control3D.d.ts +201 -201
  136. package/3D/controls/control3D.js +445 -445
  137. package/3D/controls/control3D.js.map +1 -1
  138. package/3D/controls/cylinderPanel.d.ts +17 -17
  139. package/3D/controls/cylinderPanel.js +66 -66
  140. package/3D/controls/cylinderPanel.js.map +1 -1
  141. package/3D/controls/handMenu.d.ts +28 -28
  142. package/3D/controls/handMenu.js +47 -47
  143. package/3D/controls/handMenu.js.map +1 -1
  144. package/3D/controls/holographicBackplate.d.ts +49 -49
  145. package/3D/controls/holographicBackplate.js +120 -120
  146. package/3D/controls/holographicBackplate.js.map +1 -1
  147. package/3D/controls/holographicButton.d.ts +84 -84
  148. package/3D/controls/holographicButton.js +339 -339
  149. package/3D/controls/holographicButton.js.map +1 -1
  150. package/3D/controls/holographicSlate.d.ts +131 -131
  151. package/3D/controls/holographicSlate.js +431 -431
  152. package/3D/controls/holographicSlate.js.map +1 -1
  153. package/3D/controls/index.d.ts +21 -21
  154. package/3D/controls/index.js +21 -21
  155. package/3D/controls/meshButton3D.d.ts +21 -21
  156. package/3D/controls/meshButton3D.js +62 -62
  157. package/3D/controls/meshButton3D.js.map +1 -1
  158. package/3D/controls/nearMenu.d.ts +44 -44
  159. package/3D/controls/nearMenu.js +114 -114
  160. package/3D/controls/nearMenu.js.map +1 -1
  161. package/3D/controls/planePanel.d.ts +9 -9
  162. package/3D/controls/planePanel.js +36 -36
  163. package/3D/controls/planePanel.js.map +1 -1
  164. package/3D/controls/scatterPanel.d.ts +18 -18
  165. package/3D/controls/scatterPanel.js +108 -108
  166. package/3D/controls/scatterPanel.js.map +1 -1
  167. package/3D/controls/slider3D.d.ts +81 -81
  168. package/3D/controls/slider3D.js +268 -268
  169. package/3D/controls/slider3D.js.map +1 -1
  170. package/3D/controls/spherePanel.d.ts +17 -17
  171. package/3D/controls/spherePanel.js +67 -67
  172. package/3D/controls/spherePanel.js.map +1 -1
  173. package/3D/controls/stackPanel3D.d.ts +22 -22
  174. package/3D/controls/stackPanel3D.js +107 -107
  175. package/3D/controls/touchButton3D.d.ts +80 -80
  176. package/3D/controls/touchButton3D.js +233 -233
  177. package/3D/controls/touchButton3D.js.map +1 -1
  178. package/3D/controls/touchHolographicButton.d.ts +110 -110
  179. package/3D/controls/touchHolographicButton.js +445 -445
  180. package/3D/controls/touchHolographicButton.js.map +1 -1
  181. package/3D/controls/touchHolographicMenu.d.ts +61 -61
  182. package/3D/controls/touchHolographicMenu.js +149 -149
  183. package/3D/controls/touchHolographicMenu.js.map +1 -1
  184. package/3D/controls/touchMeshButton3D.d.ts +21 -21
  185. package/3D/controls/touchMeshButton3D.js +62 -62
  186. package/3D/controls/touchMeshButton3D.js.map +1 -1
  187. package/3D/controls/volumeBasedPanel.d.ts +53 -53
  188. package/3D/controls/volumeBasedPanel.js +174 -174
  189. package/3D/controls/volumeBasedPanel.js.map +1 -1
  190. package/3D/gizmos/gizmoHandle.d.ts +108 -108
  191. package/3D/gizmos/gizmoHandle.js +209 -209
  192. package/3D/gizmos/gizmoHandle.js.map +1 -1
  193. package/3D/gizmos/index.d.ts +2 -2
  194. package/3D/gizmos/index.js +2 -2
  195. package/3D/gizmos/slateGizmo.d.ts +57 -57
  196. package/3D/gizmos/slateGizmo.js +369 -369
  197. package/3D/gizmos/slateGizmo.js.map +1 -1
  198. package/3D/gui3DManager.d.ts +94 -94
  199. package/3D/gui3DManager.js +257 -257
  200. package/3D/gui3DManager.js.map +1 -1
  201. package/3D/index.d.ts +5 -5
  202. package/3D/index.js +6 -5
  203. package/3D/index.js.map +1 -1
  204. package/3D/materials/fluent/fluentMaterial.d.ts +91 -90
  205. package/3D/materials/fluent/fluentMaterial.js +292 -292
  206. package/3D/materials/fluent/fluentMaterial.js.map +1 -1
  207. package/3D/materials/fluent/index.d.ts +1 -1
  208. package/3D/materials/fluent/index.js +1 -1
  209. package/3D/materials/fluent/shaders/fluent.fragment.d.ts +5 -5
  210. package/3D/materials/fluent/shaders/fluent.fragment.js +8 -8
  211. package/3D/materials/fluent/shaders/fluent.vertex.d.ts +5 -5
  212. package/3D/materials/fluent/shaders/fluent.vertex.js +8 -8
  213. package/3D/materials/fluentBackplate/fluentBackplateMaterial.d.ts +155 -154
  214. package/3D/materials/fluentBackplate/fluentBackplateMaterial.js +469 -469
  215. package/3D/materials/fluentBackplate/fluentBackplateMaterial.js.map +1 -1
  216. package/3D/materials/fluentBackplate/index.d.ts +1 -1
  217. package/3D/materials/fluentBackplate/index.js +1 -1
  218. package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.d.ts +5 -5
  219. package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.js +8 -8
  220. package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.d.ts +5 -5
  221. package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.js +8 -8
  222. package/3D/materials/fluentButton/fluentButtonMaterial.d.ts +190 -189
  223. package/3D/materials/fluentButton/fluentButtonMaterial.js +539 -539
  224. package/3D/materials/fluentButton/fluentButtonMaterial.js.map +1 -1
  225. package/3D/materials/fluentButton/index.d.ts +1 -1
  226. package/3D/materials/fluentButton/index.js +1 -1
  227. package/3D/materials/fluentButton/shaders/fluentButton.fragment.d.ts +5 -5
  228. package/3D/materials/fluentButton/shaders/fluentButton.fragment.js +8 -8
  229. package/3D/materials/fluentButton/shaders/fluentButton.vertex.d.ts +5 -5
  230. package/3D/materials/fluentButton/shaders/fluentButton.vertex.js +8 -8
  231. package/3D/materials/fluentMaterial.d.ts +4 -4
  232. package/3D/materials/fluentMaterial.js +4 -4
  233. package/3D/materials/handle/handleMaterial.d.ts +68 -68
  234. package/3D/materials/handle/handleMaterial.js +126 -126
  235. package/3D/materials/handle/handleMaterial.js.map +1 -1
  236. package/3D/materials/handle/index.d.ts +1 -1
  237. package/3D/materials/handle/index.js +1 -1
  238. package/3D/materials/handle/shaders/handle.fragment.d.ts +5 -5
  239. package/3D/materials/handle/shaders/handle.fragment.js +8 -8
  240. package/3D/materials/handle/shaders/handle.vertex.d.ts +5 -5
  241. package/3D/materials/handle/shaders/handle.vertex.js +8 -8
  242. package/3D/materials/index.d.ts +5 -5
  243. package/3D/materials/index.js +6 -5
  244. package/3D/materials/index.js.map +1 -1
  245. package/3D/materials/mrdl/index.d.ts +3 -3
  246. package/3D/materials/mrdl/index.js +3 -3
  247. package/3D/materials/mrdl/mrdlBackplateMaterial.d.ts +148 -147
  248. package/3D/materials/mrdl/mrdlBackplateMaterial.js +436 -436
  249. package/3D/materials/mrdl/mrdlBackplateMaterial.js.map +1 -1
  250. package/3D/materials/mrdl/mrdlSliderBarMaterial.d.ts +334 -333
  251. package/3D/materials/mrdl/mrdlSliderBarMaterial.js +851 -851
  252. package/3D/materials/mrdl/mrdlSliderBarMaterial.js.map +1 -1
  253. package/3D/materials/mrdl/mrdlSliderThumbMaterial.d.ts +334 -333
  254. package/3D/materials/mrdl/mrdlSliderThumbMaterial.js +851 -851
  255. package/3D/materials/mrdl/mrdlSliderThumbMaterial.js.map +1 -1
  256. package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.d.ts +5 -5
  257. package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.js +8 -8
  258. package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.d.ts +5 -5
  259. package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.js +8 -8
  260. package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.d.ts +5 -5
  261. package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.js +8 -8
  262. package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.d.ts +5 -5
  263. package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.js +8 -8
  264. package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.d.ts +5 -5
  265. package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.js +8 -8
  266. package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.d.ts +5 -5
  267. package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.js +8 -8
  268. package/3D/vector3WithInfo.d.ts +16 -16
  269. package/3D/vector3WithInfo.js +23 -23
  270. package/index.d.ts +2 -2
  271. package/index.js +3 -2
  272. package/index.js.map +1 -1
  273. package/legacy/legacy.d.ts +1 -1
  274. package/legacy/legacy.js +14 -13
  275. package/legacy/legacy.js.map +1 -1
  276. package/license.md +71 -0
  277. package/package.json +24 -5
@@ -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.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 };
340
340
  //# sourceMappingURL=holographicButton.js.map