@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.
- package/2D/adtInstrumentation.d.ts +52 -52
- package/2D/adtInstrumentation.js +126 -126
- package/2D/advancedDynamicTexture.d.ts +448 -448
- package/2D/advancedDynamicTexture.js +1318 -1318
- package/2D/controls/button.d.ts +135 -135
- package/2D/controls/button.js +276 -276
- package/2D/controls/checkbox.d.ts +59 -59
- package/2D/controls/checkbox.js +188 -188
- package/2D/controls/colorpicker.d.ts +103 -103
- package/2D/controls/colorpicker.js +1417 -1417
- package/2D/controls/container.d.ts +175 -175
- package/2D/controls/container.js +570 -570
- package/2D/controls/control.d.ts +866 -866
- package/2D/controls/control.js +2433 -2433
- package/2D/controls/displayGrid.d.ts +53 -53
- package/2D/controls/displayGrid.js +245 -245
- package/2D/controls/ellipse.d.ts +21 -21
- package/2D/controls/ellipse.js +85 -85
- package/2D/controls/focusableButton.d.ts +59 -59
- package/2D/controls/focusableButton.js +99 -99
- package/2D/controls/focusableControl.d.ts +34 -34
- package/2D/controls/focusableControl.js +1 -1
- package/2D/controls/grid.d.ts +139 -139
- package/2D/controls/grid.js +529 -529
- package/2D/controls/image.d.ts +204 -204
- package/2D/controls/image.js +887 -887
- package/2D/controls/index.d.ts +29 -29
- package/2D/controls/index.js +29 -29
- package/2D/controls/inputPassword.d.ts +8 -8
- package/2D/controls/inputPassword.js +25 -25
- package/2D/controls/inputText.d.ts +201 -201
- package/2D/controls/inputText.js +1119 -1119
- package/2D/controls/line.d.ts +66 -66
- package/2D/controls/line.js +271 -271
- package/2D/controls/multiLine.d.ts +75 -75
- package/2D/controls/multiLine.js +262 -262
- package/2D/controls/radioButton.d.ts +49 -49
- package/2D/controls/radioButton.js +205 -205
- package/2D/controls/rectangle.d.ts +29 -29
- package/2D/controls/rectangle.js +150 -150
- package/2D/controls/scrollViewers/scrollViewer.d.ts +182 -182
- package/2D/controls/scrollViewers/scrollViewer.js +677 -677
- package/2D/controls/scrollViewers/scrollViewerWindow.d.ts +57 -57
- package/2D/controls/scrollViewers/scrollViewerWindow.js +278 -278
- package/2D/controls/selector.d.ts +263 -263
- package/2D/controls/selector.js +692 -692
- package/2D/controls/sliders/baseSlider.d.ts +82 -82
- package/2D/controls/sliders/baseSlider.js +347 -347
- package/2D/controls/sliders/imageBasedSlider.d.ts +49 -49
- package/2D/controls/sliders/imageBasedSlider.js +192 -192
- package/2D/controls/sliders/imageScrollBar.d.ts +65 -65
- package/2D/controls/sliders/imageScrollBar.js +263 -263
- package/2D/controls/sliders/scrollBar.d.ts +38 -38
- package/2D/controls/sliders/scrollBar.js +143 -143
- package/2D/controls/sliders/slider.d.ts +35 -35
- package/2D/controls/sliders/slider.js +271 -271
- package/2D/controls/stackPanel.d.ts +64 -64
- package/2D/controls/stackPanel.js +246 -246
- package/2D/controls/statics.d.ts +6 -6
- package/2D/controls/statics.js +49 -49
- package/2D/controls/textBlock.d.ts +175 -175
- package/2D/controls/textBlock.js +603 -603
- package/2D/controls/textWrapper.d.ts +13 -13
- package/2D/controls/textWrapper.js +101 -101
- package/2D/controls/toggleButton.d.ts +117 -117
- package/2D/controls/toggleButton.js +268 -268
- package/2D/controls/virtualKeyboard.d.ts +96 -96
- package/2D/controls/virtualKeyboard.js +256 -256
- package/2D/index.d.ts +9 -9
- package/2D/index.js +9 -9
- package/2D/math2D.d.ts +117 -117
- package/2D/math2D.js +221 -221
- package/2D/measure.d.ts +77 -77
- package/2D/measure.js +139 -139
- package/2D/multiLinePoint.d.ts +47 -47
- package/2D/multiLinePoint.js +127 -127
- package/2D/style.d.ts +46 -46
- package/2D/style.js +97 -97
- package/2D/valueAndUnit.d.ts +89 -89
- package/2D/valueAndUnit.js +226 -226
- package/2D/xmlLoader.d.ts +60 -60
- package/2D/xmlLoader.js +348 -348
- package/3D/behaviors/defaultBehavior.d.ts +73 -73
- package/3D/behaviors/defaultBehavior.js +121 -121
- package/3D/controls/abstractButton3D.d.ts +15 -15
- package/3D/controls/abstractButton3D.js +25 -25
- package/3D/controls/button3D.d.ts +30 -30
- package/3D/controls/button3D.js +93 -93
- package/3D/controls/container3D.d.ts +72 -72
- package/3D/controls/container3D.js +139 -139
- package/3D/controls/contentDisplay3D.d.ts +30 -30
- package/3D/controls/contentDisplay3D.js +79 -79
- package/3D/controls/control3D.d.ts +201 -201
- package/3D/controls/control3D.js +445 -445
- package/3D/controls/cylinderPanel.d.ts +17 -17
- package/3D/controls/cylinderPanel.js +66 -66
- package/3D/controls/handMenu.d.ts +28 -28
- package/3D/controls/handMenu.js +47 -47
- package/3D/controls/holographicBackplate.d.ts +49 -49
- package/3D/controls/holographicBackplate.js +120 -120
- package/3D/controls/holographicButton.d.ts +84 -84
- package/3D/controls/holographicButton.js +339 -339
- package/3D/controls/holographicSlate.d.ts +131 -131
- package/3D/controls/holographicSlate.js +431 -431
- package/3D/controls/index.d.ts +21 -21
- package/3D/controls/index.js +21 -21
- package/3D/controls/meshButton3D.d.ts +21 -21
- package/3D/controls/meshButton3D.js +62 -62
- package/3D/controls/nearMenu.d.ts +44 -44
- package/3D/controls/nearMenu.js +114 -114
- package/3D/controls/planePanel.d.ts +9 -9
- package/3D/controls/planePanel.js +36 -36
- package/3D/controls/scatterPanel.d.ts +18 -18
- package/3D/controls/scatterPanel.js +108 -108
- package/3D/controls/slider3D.d.ts +81 -81
- package/3D/controls/slider3D.js +268 -268
- package/3D/controls/spherePanel.d.ts +17 -17
- package/3D/controls/spherePanel.js +67 -67
- package/3D/controls/stackPanel3D.d.ts +22 -22
- package/3D/controls/stackPanel3D.js +107 -107
- package/3D/controls/touchButton3D.d.ts +80 -80
- package/3D/controls/touchButton3D.js +233 -233
- package/3D/controls/touchHolographicButton.d.ts +110 -110
- package/3D/controls/touchHolographicButton.js +445 -445
- package/3D/controls/touchHolographicMenu.d.ts +61 -61
- package/3D/controls/touchHolographicMenu.js +149 -149
- package/3D/controls/touchMeshButton3D.d.ts +21 -21
- package/3D/controls/touchMeshButton3D.js +62 -62
- package/3D/controls/volumeBasedPanel.d.ts +53 -53
- package/3D/controls/volumeBasedPanel.js +174 -174
- package/3D/gizmos/gizmoHandle.d.ts +108 -108
- package/3D/gizmos/gizmoHandle.js +209 -209
- package/3D/gizmos/index.d.ts +2 -2
- package/3D/gizmos/index.js +2 -2
- package/3D/gizmos/slateGizmo.d.ts +57 -57
- package/3D/gizmos/slateGizmo.js +369 -369
- package/3D/gui3DManager.d.ts +94 -94
- package/3D/gui3DManager.js +257 -257
- package/3D/index.d.ts +5 -5
- package/3D/index.js +5 -5
- package/3D/materials/fluent/fluentMaterial.d.ts +90 -90
- package/3D/materials/fluent/fluentMaterial.js +292 -292
- package/3D/materials/fluent/index.d.ts +1 -1
- package/3D/materials/fluent/index.js +1 -1
- package/3D/materials/fluent/shaders/fluent.fragment.d.ts +5 -5
- package/3D/materials/fluent/shaders/fluent.fragment.js +8 -8
- package/3D/materials/fluent/shaders/fluent.vertex.d.ts +5 -5
- package/3D/materials/fluent/shaders/fluent.vertex.js +8 -8
- package/3D/materials/fluentBackplate/fluentBackplateMaterial.d.ts +154 -154
- package/3D/materials/fluentBackplate/fluentBackplateMaterial.js +469 -469
- package/3D/materials/fluentBackplate/index.d.ts +1 -1
- package/3D/materials/fluentBackplate/index.js +1 -1
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.d.ts +5 -5
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.js +8 -8
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.d.ts +5 -5
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.js +8 -8
- package/3D/materials/fluentButton/fluentButtonMaterial.d.ts +189 -189
- package/3D/materials/fluentButton/fluentButtonMaterial.js +539 -539
- package/3D/materials/fluentButton/index.d.ts +1 -1
- package/3D/materials/fluentButton/index.js +1 -1
- package/3D/materials/fluentButton/shaders/fluentButton.fragment.d.ts +5 -5
- package/3D/materials/fluentButton/shaders/fluentButton.fragment.js +8 -8
- package/3D/materials/fluentButton/shaders/fluentButton.vertex.d.ts +5 -5
- package/3D/materials/fluentButton/shaders/fluentButton.vertex.js +8 -8
- package/3D/materials/fluentMaterial.d.ts +4 -4
- package/3D/materials/fluentMaterial.js +4 -4
- package/3D/materials/handle/handleMaterial.d.ts +68 -68
- package/3D/materials/handle/handleMaterial.js +126 -126
- package/3D/materials/handle/index.d.ts +1 -1
- package/3D/materials/handle/index.js +1 -1
- package/3D/materials/handle/shaders/handle.fragment.d.ts +5 -5
- package/3D/materials/handle/shaders/handle.fragment.js +8 -8
- package/3D/materials/handle/shaders/handle.vertex.d.ts +5 -5
- package/3D/materials/handle/shaders/handle.vertex.js +8 -8
- package/3D/materials/index.d.ts +5 -5
- package/3D/materials/index.js +5 -5
- package/3D/materials/mrdl/index.d.ts +3 -3
- package/3D/materials/mrdl/index.js +3 -3
- package/3D/materials/mrdl/mrdlBackplateMaterial.d.ts +147 -147
- package/3D/materials/mrdl/mrdlBackplateMaterial.js +436 -436
- package/3D/materials/mrdl/mrdlSliderBarMaterial.d.ts +333 -333
- package/3D/materials/mrdl/mrdlSliderBarMaterial.js +851 -851
- package/3D/materials/mrdl/mrdlSliderThumbMaterial.d.ts +333 -333
- package/3D/materials/mrdl/mrdlSliderThumbMaterial.js +851 -851
- package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.d.ts +5 -5
- package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.js +8 -8
- package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.d.ts +5 -5
- package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.js +8 -8
- package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.d.ts +5 -5
- package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.js +8 -8
- package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.d.ts +5 -5
- package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.js +8 -8
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.d.ts +5 -5
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.js +8 -8
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.d.ts +5 -5
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.js +8 -8
- package/3D/vector3WithInfo.d.ts +16 -16
- package/3D/vector3WithInfo.js +23 -23
- package/index.d.ts +2 -2
- package/index.js +2 -2
- package/legacy/legacy.d.ts +1 -1
- package/legacy/legacy.js +13 -13
- package/package.json +2 -2
package/2D/controls/container.js
CHANGED
|
@@ -1,571 +1,571 @@
|
|
|
1
|
-
import { __decorate, __extends } from "tslib";
|
|
2
|
-
import { Logger } from "@babylonjs/core/Misc/logger.js";
|
|
3
|
-
import { Control } from "./control
|
|
4
|
-
import { Measure } from "../measure
|
|
5
|
-
import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
|
|
6
|
-
import { serialize } from "@babylonjs/core/Misc/decorators.js";
|
|
7
|
-
import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture.js";
|
|
8
|
-
import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
|
|
9
|
-
import { Constants } from "@babylonjs/core/Engines/constants.js";
|
|
10
|
-
/**
|
|
11
|
-
* Root class for 2D containers
|
|
12
|
-
* @see https://doc.babylonjs.com/how_to/gui#containers
|
|
13
|
-
*/
|
|
14
|
-
var Container = /** @class */ (function (_super) {
|
|
15
|
-
__extends(Container, _super);
|
|
16
|
-
/**
|
|
17
|
-
* Creates a new Container
|
|
18
|
-
* @param name defines the name of the container
|
|
19
|
-
*/
|
|
20
|
-
function Container(name) {
|
|
21
|
-
var _this = _super.call(this, name) || this;
|
|
22
|
-
_this.name = name;
|
|
23
|
-
/** @hidden */
|
|
24
|
-
_this._children = new Array();
|
|
25
|
-
/** @hidden */
|
|
26
|
-
_this._measureForChildren = Measure.Empty();
|
|
27
|
-
/** @hidden */
|
|
28
|
-
_this._background = "";
|
|
29
|
-
/** @hidden */
|
|
30
|
-
_this._adaptWidthToChildren = false;
|
|
31
|
-
/** @hidden */
|
|
32
|
-
_this._adaptHeightToChildren = false;
|
|
33
|
-
/** @hidden */
|
|
34
|
-
_this._renderToIntermediateTexture = false;
|
|
35
|
-
/** @hidden */
|
|
36
|
-
_this._intermediateTexture = null;
|
|
37
|
-
/**
|
|
38
|
-
* Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
|
|
39
|
-
*/
|
|
40
|
-
_this.logLayoutCycleErrors = false;
|
|
41
|
-
/**
|
|
42
|
-
* Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
|
|
43
|
-
*/
|
|
44
|
-
_this.maxLayoutCycle = 3;
|
|
45
|
-
return _this;
|
|
46
|
-
}
|
|
47
|
-
Object.defineProperty(Container.prototype, "renderToIntermediateTexture", {
|
|
48
|
-
/** Gets or sets boolean indicating if children should be rendered to an intermediate texture rather than directly to host, useful for alpha blending */
|
|
49
|
-
get: function () {
|
|
50
|
-
return this._renderToIntermediateTexture;
|
|
51
|
-
},
|
|
52
|
-
set: function (value) {
|
|
53
|
-
if (this._renderToIntermediateTexture === value) {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
this._renderToIntermediateTexture = value;
|
|
57
|
-
this._markAsDirty();
|
|
58
|
-
},
|
|
59
|
-
enumerable: false,
|
|
60
|
-
configurable: true
|
|
61
|
-
});
|
|
62
|
-
Object.defineProperty(Container.prototype, "adaptHeightToChildren", {
|
|
63
|
-
/** Gets or sets a boolean indicating if the container should try to adapt to its children height */
|
|
64
|
-
get: function () {
|
|
65
|
-
return this._adaptHeightToChildren;
|
|
66
|
-
},
|
|
67
|
-
set: function (value) {
|
|
68
|
-
if (this._adaptHeightToChildren === value) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
this._adaptHeightToChildren = value;
|
|
72
|
-
if (value) {
|
|
73
|
-
this.height = "100%";
|
|
74
|
-
}
|
|
75
|
-
this._markAsDirty();
|
|
76
|
-
},
|
|
77
|
-
enumerable: false,
|
|
78
|
-
configurable: true
|
|
79
|
-
});
|
|
80
|
-
Object.defineProperty(Container.prototype, "adaptWidthToChildren", {
|
|
81
|
-
/** Gets or sets a boolean indicating if the container should try to adapt to its children width */
|
|
82
|
-
get: function () {
|
|
83
|
-
return this._adaptWidthToChildren;
|
|
84
|
-
},
|
|
85
|
-
set: function (value) {
|
|
86
|
-
if (this._adaptWidthToChildren === value) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
this._adaptWidthToChildren = value;
|
|
90
|
-
if (value) {
|
|
91
|
-
this.width = "100%";
|
|
92
|
-
}
|
|
93
|
-
this._markAsDirty();
|
|
94
|
-
},
|
|
95
|
-
enumerable: false,
|
|
96
|
-
configurable: true
|
|
97
|
-
});
|
|
98
|
-
Object.defineProperty(Container.prototype, "background", {
|
|
99
|
-
/** Gets or sets background color */
|
|
100
|
-
get: function () {
|
|
101
|
-
return this._background;
|
|
102
|
-
},
|
|
103
|
-
set: function (value) {
|
|
104
|
-
if (this._background === value) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
this._background = value;
|
|
108
|
-
this._markAsDirty();
|
|
109
|
-
},
|
|
110
|
-
enumerable: false,
|
|
111
|
-
configurable: true
|
|
112
|
-
});
|
|
113
|
-
Object.defineProperty(Container.prototype, "children", {
|
|
114
|
-
/** Gets the list of children */
|
|
115
|
-
get: function () {
|
|
116
|
-
return this._children;
|
|
117
|
-
},
|
|
118
|
-
enumerable: false,
|
|
119
|
-
configurable: true
|
|
120
|
-
});
|
|
121
|
-
Object.defineProperty(Container.prototype, "isReadOnly", {
|
|
122
|
-
get: function () {
|
|
123
|
-
return this._isReadOnly;
|
|
124
|
-
},
|
|
125
|
-
set: function (value) {
|
|
126
|
-
this._isReadOnly = value;
|
|
127
|
-
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
128
|
-
var child = _a[_i];
|
|
129
|
-
child.isReadOnly = value;
|
|
130
|
-
}
|
|
131
|
-
},
|
|
132
|
-
enumerable: false,
|
|
133
|
-
configurable: true
|
|
134
|
-
});
|
|
135
|
-
Container.prototype._getTypeName = function () {
|
|
136
|
-
return "Container";
|
|
137
|
-
};
|
|
138
|
-
Container.prototype._flagDescendantsAsMatrixDirty = function () {
|
|
139
|
-
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
140
|
-
var child = _a[_i];
|
|
141
|
-
child._markMatrixAsDirty();
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
/**
|
|
145
|
-
* Gets a child using its name
|
|
146
|
-
* @param name defines the child name to look for
|
|
147
|
-
* @returns the child control if found
|
|
148
|
-
*/
|
|
149
|
-
Container.prototype.getChildByName = function (name) {
|
|
150
|
-
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
151
|
-
var child = _a[_i];
|
|
152
|
-
if (child.name === name) {
|
|
153
|
-
return child;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
return null;
|
|
157
|
-
};
|
|
158
|
-
/**
|
|
159
|
-
* Gets a child using its type and its name
|
|
160
|
-
* @param name defines the child name to look for
|
|
161
|
-
* @param type defines the child type to look for
|
|
162
|
-
* @returns the child control if found
|
|
163
|
-
*/
|
|
164
|
-
Container.prototype.getChildByType = function (name, type) {
|
|
165
|
-
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
166
|
-
var child = _a[_i];
|
|
167
|
-
if (child.typeName === type) {
|
|
168
|
-
return child;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
return null;
|
|
172
|
-
};
|
|
173
|
-
/**
|
|
174
|
-
* Search for a specific control in children
|
|
175
|
-
* @param control defines the control to look for
|
|
176
|
-
* @returns true if the control is in child list
|
|
177
|
-
*/
|
|
178
|
-
Container.prototype.containsControl = function (control) {
|
|
179
|
-
return this.children.indexOf(control) !== -1;
|
|
180
|
-
};
|
|
181
|
-
/**
|
|
182
|
-
* Adds a new control to the current container
|
|
183
|
-
* @param control defines the control to add
|
|
184
|
-
* @returns the current container
|
|
185
|
-
*/
|
|
186
|
-
Container.prototype.addControl = function (control) {
|
|
187
|
-
if (!control) {
|
|
188
|
-
return this;
|
|
189
|
-
}
|
|
190
|
-
var index = this._children.indexOf(control);
|
|
191
|
-
if (index !== -1) {
|
|
192
|
-
return this;
|
|
193
|
-
}
|
|
194
|
-
control._link(this._host);
|
|
195
|
-
control._markAllAsDirty();
|
|
196
|
-
this._reOrderControl(control);
|
|
197
|
-
this._markAsDirty();
|
|
198
|
-
return this;
|
|
199
|
-
};
|
|
200
|
-
/**
|
|
201
|
-
* Removes all controls from the current container
|
|
202
|
-
* @returns the current container
|
|
203
|
-
*/
|
|
204
|
-
Container.prototype.clearControls = function () {
|
|
205
|
-
var children = this.children.slice();
|
|
206
|
-
for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
|
|
207
|
-
var child = children_1[_i];
|
|
208
|
-
this.removeControl(child);
|
|
209
|
-
}
|
|
210
|
-
return this;
|
|
211
|
-
};
|
|
212
|
-
/**
|
|
213
|
-
* Removes a control from the current container
|
|
214
|
-
* @param control defines the control to remove
|
|
215
|
-
* @returns the current container
|
|
216
|
-
*/
|
|
217
|
-
Container.prototype.removeControl = function (control) {
|
|
218
|
-
var index = this._children.indexOf(control);
|
|
219
|
-
if (index !== -1) {
|
|
220
|
-
this._children.splice(index, 1);
|
|
221
|
-
control.parent = null;
|
|
222
|
-
}
|
|
223
|
-
control.linkWithMesh(null);
|
|
224
|
-
if (this._host) {
|
|
225
|
-
this._host._cleanControlAfterRemoval(control);
|
|
226
|
-
}
|
|
227
|
-
this._markAsDirty();
|
|
228
|
-
return this;
|
|
229
|
-
};
|
|
230
|
-
/**
|
|
231
|
-
* @param control
|
|
232
|
-
* @hidden
|
|
233
|
-
*/
|
|
234
|
-
Container.prototype._reOrderControl = function (control) {
|
|
235
|
-
this.removeControl(control);
|
|
236
|
-
var wasAdded = false;
|
|
237
|
-
for (var index = 0; index < this._children.length; index++) {
|
|
238
|
-
if (this._children[index].zIndex > control.zIndex) {
|
|
239
|
-
this._children.splice(index, 0, control);
|
|
240
|
-
wasAdded = true;
|
|
241
|
-
break;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
if (!wasAdded) {
|
|
245
|
-
this._children.push(control);
|
|
246
|
-
}
|
|
247
|
-
control.parent = this;
|
|
248
|
-
this._markAsDirty();
|
|
249
|
-
};
|
|
250
|
-
/**
|
|
251
|
-
* @param offset
|
|
252
|
-
* @hidden
|
|
253
|
-
*/
|
|
254
|
-
Container.prototype._offsetLeft = function (offset) {
|
|
255
|
-
_super.prototype._offsetLeft.call(this, offset);
|
|
256
|
-
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
257
|
-
var child = _a[_i];
|
|
258
|
-
child._offsetLeft(offset);
|
|
259
|
-
}
|
|
260
|
-
};
|
|
261
|
-
/**
|
|
262
|
-
* @param offset
|
|
263
|
-
* @hidden
|
|
264
|
-
*/
|
|
265
|
-
Container.prototype._offsetTop = function (offset) {
|
|
266
|
-
_super.prototype._offsetTop.call(this, offset);
|
|
267
|
-
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
268
|
-
var child = _a[_i];
|
|
269
|
-
child._offsetTop(offset);
|
|
270
|
-
}
|
|
271
|
-
};
|
|
272
|
-
/** @hidden */
|
|
273
|
-
Container.prototype._markAllAsDirty = function () {
|
|
274
|
-
_super.prototype._markAllAsDirty.call(this);
|
|
275
|
-
for (var index = 0; index < this._children.length; index++) {
|
|
276
|
-
this._children[index]._markAllAsDirty();
|
|
277
|
-
}
|
|
278
|
-
};
|
|
279
|
-
/**
|
|
280
|
-
* @param context
|
|
281
|
-
* @hidden
|
|
282
|
-
*/
|
|
283
|
-
Container.prototype._localDraw = function (context) {
|
|
284
|
-
if (this._background) {
|
|
285
|
-
context.save();
|
|
286
|
-
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
|
|
287
|
-
context.shadowColor = this.shadowColor;
|
|
288
|
-
context.shadowBlur = this.shadowBlur;
|
|
289
|
-
context.shadowOffsetX = this.shadowOffsetX;
|
|
290
|
-
context.shadowOffsetY = this.shadowOffsetY;
|
|
291
|
-
}
|
|
292
|
-
context.fillStyle = this._background;
|
|
293
|
-
context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
|
|
294
|
-
context.restore();
|
|
295
|
-
}
|
|
296
|
-
};
|
|
297
|
-
/**
|
|
298
|
-
* @param host
|
|
299
|
-
* @hidden
|
|
300
|
-
*/
|
|
301
|
-
Container.prototype._link = function (host) {
|
|
302
|
-
_super.prototype._link.call(this, host);
|
|
303
|
-
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
304
|
-
var child = _a[_i];
|
|
305
|
-
child._link(host);
|
|
306
|
-
}
|
|
307
|
-
};
|
|
308
|
-
/** @hidden */
|
|
309
|
-
Container.prototype._beforeLayout = function () {
|
|
310
|
-
// Do nothing
|
|
311
|
-
};
|
|
312
|
-
/**
|
|
313
|
-
* @param parentMeasure
|
|
314
|
-
* @param context
|
|
315
|
-
* @hidden
|
|
316
|
-
*/
|
|
317
|
-
Container.prototype._processMeasures = function (parentMeasure, context) {
|
|
318
|
-
if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
|
|
319
|
-
_super.prototype._processMeasures.call(this, parentMeasure, context);
|
|
320
|
-
this._evaluateClippingState(parentMeasure);
|
|
321
|
-
if (this._renderToIntermediateTexture) {
|
|
322
|
-
if (this._intermediateTexture && this._host.getScene() != this._intermediateTexture.getScene()) {
|
|
323
|
-
this._intermediateTexture.dispose();
|
|
324
|
-
this._intermediateTexture = null;
|
|
325
|
-
}
|
|
326
|
-
if (!this._intermediateTexture) {
|
|
327
|
-
this._intermediateTexture = new DynamicTexture("", { width: this._currentMeasure.width, height: this._currentMeasure.height }, this._host.getScene(), false, Texture.NEAREST_SAMPLINGMODE, Constants.TEXTUREFORMAT_RGBA, false);
|
|
328
|
-
this._intermediateTexture.hasAlpha = true;
|
|
329
|
-
}
|
|
330
|
-
else {
|
|
331
|
-
this._intermediateTexture.scaleTo(this._currentMeasure.width, this._currentMeasure.height);
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
};
|
|
336
|
-
/**
|
|
337
|
-
* @param parentMeasure
|
|
338
|
-
* @param context
|
|
339
|
-
* @hidden
|
|
340
|
-
*/
|
|
341
|
-
Container.prototype._layout = function (parentMeasure, context) {
|
|
342
|
-
var _a, _b;
|
|
343
|
-
if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
|
|
344
|
-
return false;
|
|
345
|
-
}
|
|
346
|
-
this.host._numLayoutCalls++;
|
|
347
|
-
if (this._isDirty) {
|
|
348
|
-
this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
|
|
349
|
-
}
|
|
350
|
-
var rebuildCount = 0;
|
|
351
|
-
context.save();
|
|
352
|
-
this._applyStates(context);
|
|
353
|
-
this._beforeLayout();
|
|
354
|
-
do {
|
|
355
|
-
var computedWidth = -1;
|
|
356
|
-
var computedHeight = -1;
|
|
357
|
-
this._rebuildLayout = false;
|
|
358
|
-
this._processMeasures(parentMeasure, context);
|
|
359
|
-
if (!this._isClipped) {
|
|
360
|
-
for (var _i = 0, _c = this._children; _i < _c.length; _i++) {
|
|
361
|
-
var child = _c[_i];
|
|
362
|
-
child._tempParentMeasure.copyFrom(this._measureForChildren);
|
|
363
|
-
if (child._layout(this._measureForChildren, context)) {
|
|
364
|
-
if (this.adaptWidthToChildren && child._width.isPixel) {
|
|
365
|
-
computedWidth = Math.max(computedWidth, child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels);
|
|
366
|
-
}
|
|
367
|
-
if (this.adaptHeightToChildren && child._height.isPixel) {
|
|
368
|
-
computedHeight = Math.max(computedHeight, child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels);
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
if (this.adaptWidthToChildren && computedWidth >= 0) {
|
|
373
|
-
computedWidth += this.paddingLeftInPixels + this.paddingRightInPixels;
|
|
374
|
-
if (this.width !== computedWidth + "px") {
|
|
375
|
-
(_a = this.parent) === null || _a === void 0 ? void 0 : _a._markAsDirty();
|
|
376
|
-
this.width = computedWidth + "px";
|
|
377
|
-
this._rebuildLayout = true;
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
if (this.adaptHeightToChildren && computedHeight >= 0) {
|
|
381
|
-
computedHeight += this.paddingTopInPixels + this.paddingBottomInPixels;
|
|
382
|
-
if (this.height !== computedHeight + "px") {
|
|
383
|
-
(_b = this.parent) === null || _b === void 0 ? void 0 : _b._markAsDirty();
|
|
384
|
-
this.height = computedHeight + "px";
|
|
385
|
-
this._rebuildLayout = true;
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
this._postMeasure();
|
|
389
|
-
}
|
|
390
|
-
rebuildCount++;
|
|
391
|
-
} while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
|
|
392
|
-
if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
|
|
393
|
-
Logger.Error("Layout cycle detected in GUI (Container name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
|
|
394
|
-
}
|
|
395
|
-
context.restore();
|
|
396
|
-
if (this._isDirty) {
|
|
397
|
-
this.invalidateRect();
|
|
398
|
-
this._isDirty = false;
|
|
399
|
-
}
|
|
400
|
-
return true;
|
|
401
|
-
};
|
|
402
|
-
Container.prototype._postMeasure = function () {
|
|
403
|
-
// Do nothing by default
|
|
404
|
-
};
|
|
405
|
-
/**
|
|
406
|
-
* @param context
|
|
407
|
-
* @param invalidatedRectangle
|
|
408
|
-
* @hidden
|
|
409
|
-
*/
|
|
410
|
-
Container.prototype._draw = function (context, invalidatedRectangle) {
|
|
411
|
-
var renderToIntermediateTextureThisDraw = this._renderToIntermediateTexture && this._intermediateTexture;
|
|
412
|
-
var contextToDrawTo = renderToIntermediateTextureThisDraw ? this._intermediateTexture.getContext() : context;
|
|
413
|
-
if (renderToIntermediateTextureThisDraw) {
|
|
414
|
-
contextToDrawTo.save();
|
|
415
|
-
contextToDrawTo.translate(-this._currentMeasure.left, -this._currentMeasure.top);
|
|
416
|
-
if (invalidatedRectangle) {
|
|
417
|
-
contextToDrawTo.clearRect(invalidatedRectangle.left, invalidatedRectangle.top, invalidatedRectangle.width, invalidatedRectangle.height);
|
|
418
|
-
}
|
|
419
|
-
else {
|
|
420
|
-
contextToDrawTo.clearRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
this._localDraw(contextToDrawTo);
|
|
424
|
-
context.save();
|
|
425
|
-
if (this.clipChildren) {
|
|
426
|
-
this._clipForChildren(contextToDrawTo);
|
|
427
|
-
}
|
|
428
|
-
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
429
|
-
var child = _a[_i];
|
|
430
|
-
// Only redraw parts of the screen that are invalidated
|
|
431
|
-
if (invalidatedRectangle) {
|
|
432
|
-
if (!child._intersectsRect(invalidatedRectangle)) {
|
|
433
|
-
continue;
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
child._render(contextToDrawTo, invalidatedRectangle);
|
|
437
|
-
}
|
|
438
|
-
if (renderToIntermediateTextureThisDraw) {
|
|
439
|
-
contextToDrawTo.restore();
|
|
440
|
-
context.save();
|
|
441
|
-
context.globalAlpha = this.alpha;
|
|
442
|
-
context.drawImage(contextToDrawTo.canvas, this._currentMeasure.left, this._currentMeasure.top);
|
|
443
|
-
context.restore();
|
|
444
|
-
}
|
|
445
|
-
context.restore();
|
|
446
|
-
};
|
|
447
|
-
Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
|
|
448
|
-
if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
|
|
449
|
-
if (!this.children) {
|
|
450
|
-
return;
|
|
451
|
-
}
|
|
452
|
-
for (var index = 0; index < this.children.length; index++) {
|
|
453
|
-
var item = this.children[index];
|
|
454
|
-
if (!predicate || predicate(item)) {
|
|
455
|
-
results.push(item);
|
|
456
|
-
}
|
|
457
|
-
if (!directDescendantsOnly) {
|
|
458
|
-
item.getDescendantsToRef(results, false, predicate);
|
|
459
|
-
}
|
|
460
|
-
}
|
|
461
|
-
};
|
|
462
|
-
/**
|
|
463
|
-
* @param x
|
|
464
|
-
* @param y
|
|
465
|
-
* @param pi
|
|
466
|
-
* @param type
|
|
467
|
-
* @param pointerId
|
|
468
|
-
* @param buttonIndex
|
|
469
|
-
* @param deltaX
|
|
470
|
-
* @param deltaY
|
|
471
|
-
* @hidden
|
|
472
|
-
*/
|
|
473
|
-
Container.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
|
|
474
|
-
if (!this._isEnabled || !this.isVisible || this.notRenderable) {
|
|
475
|
-
return false;
|
|
476
|
-
}
|
|
477
|
-
// checks if the picking position is within the container
|
|
478
|
-
var contains = _super.prototype.contains.call(this, x, y);
|
|
479
|
-
// if clipChildren is off, we should still pass picking events to children even if we don't contain the pointer
|
|
480
|
-
if (!contains && this.clipChildren) {
|
|
481
|
-
return false;
|
|
482
|
-
}
|
|
483
|
-
// Checking backwards to pick closest first
|
|
484
|
-
for (var index = this._children.length - 1; index >= 0; index--) {
|
|
485
|
-
var child = this._children[index];
|
|
486
|
-
if (child._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
|
|
487
|
-
if (child.hoverCursor) {
|
|
488
|
-
this._host._changeCursor(child.hoverCursor);
|
|
489
|
-
}
|
|
490
|
-
return true;
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
if (!contains) {
|
|
494
|
-
return false;
|
|
495
|
-
}
|
|
496
|
-
if (!this.isHitTestVisible) {
|
|
497
|
-
return false;
|
|
498
|
-
}
|
|
499
|
-
return this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
|
|
500
|
-
};
|
|
501
|
-
/**
|
|
502
|
-
* @param parentMeasure
|
|
503
|
-
* @param context
|
|
504
|
-
* @hidden
|
|
505
|
-
*/
|
|
506
|
-
Container.prototype._additionalProcessing = function (parentMeasure, context) {
|
|
507
|
-
_super.prototype._additionalProcessing.call(this, parentMeasure, context);
|
|
508
|
-
this._measureForChildren.copyFrom(this._currentMeasure);
|
|
509
|
-
};
|
|
510
|
-
/**
|
|
511
|
-
* Serializes the current control
|
|
512
|
-
* @param serializationObject defined the JSON serialized object
|
|
513
|
-
*/
|
|
514
|
-
Container.prototype.serialize = function (serializationObject) {
|
|
515
|
-
_super.prototype.serialize.call(this, serializationObject);
|
|
516
|
-
if (!this.children.length) {
|
|
517
|
-
return;
|
|
518
|
-
}
|
|
519
|
-
serializationObject.children = [];
|
|
520
|
-
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
521
|
-
var child = _a[_i];
|
|
522
|
-
var childSerializationObject = {};
|
|
523
|
-
child.serialize(childSerializationObject);
|
|
524
|
-
serializationObject.children.push(childSerializationObject);
|
|
525
|
-
}
|
|
526
|
-
};
|
|
527
|
-
/** Releases associated resources */
|
|
528
|
-
Container.prototype.dispose = function () {
|
|
529
|
-
var _a;
|
|
530
|
-
_super.prototype.dispose.call(this);
|
|
531
|
-
for (var index = this.children.length - 1; index >= 0; index--) {
|
|
532
|
-
this.children[index].dispose();
|
|
533
|
-
}
|
|
534
|
-
(_a = this._intermediateTexture) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
535
|
-
};
|
|
536
|
-
/**
|
|
537
|
-
* @param serializedObject
|
|
538
|
-
* @param host
|
|
539
|
-
* @hidden
|
|
540
|
-
*/
|
|
541
|
-
Container.prototype._parseFromContent = function (serializedObject, host) {
|
|
542
|
-
_super.prototype._parseFromContent.call(this, serializedObject, host);
|
|
543
|
-
this._link(host);
|
|
544
|
-
if (!serializedObject.children) {
|
|
545
|
-
return;
|
|
546
|
-
}
|
|
547
|
-
for (var _i = 0, _a = serializedObject.children; _i < _a.length; _i++) {
|
|
548
|
-
var childData = _a[_i];
|
|
549
|
-
this.addControl(Control.Parse(childData, host));
|
|
550
|
-
}
|
|
551
|
-
};
|
|
552
|
-
__decorate([
|
|
553
|
-
serialize()
|
|
554
|
-
], Container.prototype, "renderToIntermediateTexture", null);
|
|
555
|
-
__decorate([
|
|
556
|
-
serialize()
|
|
557
|
-
], Container.prototype, "maxLayoutCycle", void 0);
|
|
558
|
-
__decorate([
|
|
559
|
-
serialize()
|
|
560
|
-
], Container.prototype, "adaptHeightToChildren", null);
|
|
561
|
-
__decorate([
|
|
562
|
-
serialize()
|
|
563
|
-
], Container.prototype, "adaptWidthToChildren", null);
|
|
564
|
-
__decorate([
|
|
565
|
-
serialize()
|
|
566
|
-
], Container.prototype, "background", null);
|
|
567
|
-
return Container;
|
|
568
|
-
}(Control));
|
|
569
|
-
export { Container };
|
|
570
|
-
RegisterClass("BABYLON.GUI.Container", Container);
|
|
1
|
+
import { __decorate, __extends } from "tslib";
|
|
2
|
+
import { Logger } from "@babylonjs/core/Misc/logger.js";
|
|
3
|
+
import { Control } from "./control";
|
|
4
|
+
import { Measure } from "../measure";
|
|
5
|
+
import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
|
|
6
|
+
import { serialize } from "@babylonjs/core/Misc/decorators.js";
|
|
7
|
+
import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture.js";
|
|
8
|
+
import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
|
|
9
|
+
import { Constants } from "@babylonjs/core/Engines/constants.js";
|
|
10
|
+
/**
|
|
11
|
+
* Root class for 2D containers
|
|
12
|
+
* @see https://doc.babylonjs.com/how_to/gui#containers
|
|
13
|
+
*/
|
|
14
|
+
var Container = /** @class */ (function (_super) {
|
|
15
|
+
__extends(Container, _super);
|
|
16
|
+
/**
|
|
17
|
+
* Creates a new Container
|
|
18
|
+
* @param name defines the name of the container
|
|
19
|
+
*/
|
|
20
|
+
function Container(name) {
|
|
21
|
+
var _this = _super.call(this, name) || this;
|
|
22
|
+
_this.name = name;
|
|
23
|
+
/** @hidden */
|
|
24
|
+
_this._children = new Array();
|
|
25
|
+
/** @hidden */
|
|
26
|
+
_this._measureForChildren = Measure.Empty();
|
|
27
|
+
/** @hidden */
|
|
28
|
+
_this._background = "";
|
|
29
|
+
/** @hidden */
|
|
30
|
+
_this._adaptWidthToChildren = false;
|
|
31
|
+
/** @hidden */
|
|
32
|
+
_this._adaptHeightToChildren = false;
|
|
33
|
+
/** @hidden */
|
|
34
|
+
_this._renderToIntermediateTexture = false;
|
|
35
|
+
/** @hidden */
|
|
36
|
+
_this._intermediateTexture = null;
|
|
37
|
+
/**
|
|
38
|
+
* Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
|
|
39
|
+
*/
|
|
40
|
+
_this.logLayoutCycleErrors = false;
|
|
41
|
+
/**
|
|
42
|
+
* Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
|
|
43
|
+
*/
|
|
44
|
+
_this.maxLayoutCycle = 3;
|
|
45
|
+
return _this;
|
|
46
|
+
}
|
|
47
|
+
Object.defineProperty(Container.prototype, "renderToIntermediateTexture", {
|
|
48
|
+
/** Gets or sets boolean indicating if children should be rendered to an intermediate texture rather than directly to host, useful for alpha blending */
|
|
49
|
+
get: function () {
|
|
50
|
+
return this._renderToIntermediateTexture;
|
|
51
|
+
},
|
|
52
|
+
set: function (value) {
|
|
53
|
+
if (this._renderToIntermediateTexture === value) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
this._renderToIntermediateTexture = value;
|
|
57
|
+
this._markAsDirty();
|
|
58
|
+
},
|
|
59
|
+
enumerable: false,
|
|
60
|
+
configurable: true
|
|
61
|
+
});
|
|
62
|
+
Object.defineProperty(Container.prototype, "adaptHeightToChildren", {
|
|
63
|
+
/** Gets or sets a boolean indicating if the container should try to adapt to its children height */
|
|
64
|
+
get: function () {
|
|
65
|
+
return this._adaptHeightToChildren;
|
|
66
|
+
},
|
|
67
|
+
set: function (value) {
|
|
68
|
+
if (this._adaptHeightToChildren === value) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
this._adaptHeightToChildren = value;
|
|
72
|
+
if (value) {
|
|
73
|
+
this.height = "100%";
|
|
74
|
+
}
|
|
75
|
+
this._markAsDirty();
|
|
76
|
+
},
|
|
77
|
+
enumerable: false,
|
|
78
|
+
configurable: true
|
|
79
|
+
});
|
|
80
|
+
Object.defineProperty(Container.prototype, "adaptWidthToChildren", {
|
|
81
|
+
/** Gets or sets a boolean indicating if the container should try to adapt to its children width */
|
|
82
|
+
get: function () {
|
|
83
|
+
return this._adaptWidthToChildren;
|
|
84
|
+
},
|
|
85
|
+
set: function (value) {
|
|
86
|
+
if (this._adaptWidthToChildren === value) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
this._adaptWidthToChildren = value;
|
|
90
|
+
if (value) {
|
|
91
|
+
this.width = "100%";
|
|
92
|
+
}
|
|
93
|
+
this._markAsDirty();
|
|
94
|
+
},
|
|
95
|
+
enumerable: false,
|
|
96
|
+
configurable: true
|
|
97
|
+
});
|
|
98
|
+
Object.defineProperty(Container.prototype, "background", {
|
|
99
|
+
/** Gets or sets background color */
|
|
100
|
+
get: function () {
|
|
101
|
+
return this._background;
|
|
102
|
+
},
|
|
103
|
+
set: function (value) {
|
|
104
|
+
if (this._background === value) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
this._background = value;
|
|
108
|
+
this._markAsDirty();
|
|
109
|
+
},
|
|
110
|
+
enumerable: false,
|
|
111
|
+
configurable: true
|
|
112
|
+
});
|
|
113
|
+
Object.defineProperty(Container.prototype, "children", {
|
|
114
|
+
/** Gets the list of children */
|
|
115
|
+
get: function () {
|
|
116
|
+
return this._children;
|
|
117
|
+
},
|
|
118
|
+
enumerable: false,
|
|
119
|
+
configurable: true
|
|
120
|
+
});
|
|
121
|
+
Object.defineProperty(Container.prototype, "isReadOnly", {
|
|
122
|
+
get: function () {
|
|
123
|
+
return this._isReadOnly;
|
|
124
|
+
},
|
|
125
|
+
set: function (value) {
|
|
126
|
+
this._isReadOnly = value;
|
|
127
|
+
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
128
|
+
var child = _a[_i];
|
|
129
|
+
child.isReadOnly = value;
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
enumerable: false,
|
|
133
|
+
configurable: true
|
|
134
|
+
});
|
|
135
|
+
Container.prototype._getTypeName = function () {
|
|
136
|
+
return "Container";
|
|
137
|
+
};
|
|
138
|
+
Container.prototype._flagDescendantsAsMatrixDirty = function () {
|
|
139
|
+
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
140
|
+
var child = _a[_i];
|
|
141
|
+
child._markMatrixAsDirty();
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
/**
|
|
145
|
+
* Gets a child using its name
|
|
146
|
+
* @param name defines the child name to look for
|
|
147
|
+
* @returns the child control if found
|
|
148
|
+
*/
|
|
149
|
+
Container.prototype.getChildByName = function (name) {
|
|
150
|
+
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
151
|
+
var child = _a[_i];
|
|
152
|
+
if (child.name === name) {
|
|
153
|
+
return child;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
return null;
|
|
157
|
+
};
|
|
158
|
+
/**
|
|
159
|
+
* Gets a child using its type and its name
|
|
160
|
+
* @param name defines the child name to look for
|
|
161
|
+
* @param type defines the child type to look for
|
|
162
|
+
* @returns the child control if found
|
|
163
|
+
*/
|
|
164
|
+
Container.prototype.getChildByType = function (name, type) {
|
|
165
|
+
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
166
|
+
var child = _a[_i];
|
|
167
|
+
if (child.typeName === type) {
|
|
168
|
+
return child;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
return null;
|
|
172
|
+
};
|
|
173
|
+
/**
|
|
174
|
+
* Search for a specific control in children
|
|
175
|
+
* @param control defines the control to look for
|
|
176
|
+
* @returns true if the control is in child list
|
|
177
|
+
*/
|
|
178
|
+
Container.prototype.containsControl = function (control) {
|
|
179
|
+
return this.children.indexOf(control) !== -1;
|
|
180
|
+
};
|
|
181
|
+
/**
|
|
182
|
+
* Adds a new control to the current container
|
|
183
|
+
* @param control defines the control to add
|
|
184
|
+
* @returns the current container
|
|
185
|
+
*/
|
|
186
|
+
Container.prototype.addControl = function (control) {
|
|
187
|
+
if (!control) {
|
|
188
|
+
return this;
|
|
189
|
+
}
|
|
190
|
+
var index = this._children.indexOf(control);
|
|
191
|
+
if (index !== -1) {
|
|
192
|
+
return this;
|
|
193
|
+
}
|
|
194
|
+
control._link(this._host);
|
|
195
|
+
control._markAllAsDirty();
|
|
196
|
+
this._reOrderControl(control);
|
|
197
|
+
this._markAsDirty();
|
|
198
|
+
return this;
|
|
199
|
+
};
|
|
200
|
+
/**
|
|
201
|
+
* Removes all controls from the current container
|
|
202
|
+
* @returns the current container
|
|
203
|
+
*/
|
|
204
|
+
Container.prototype.clearControls = function () {
|
|
205
|
+
var children = this.children.slice();
|
|
206
|
+
for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
|
|
207
|
+
var child = children_1[_i];
|
|
208
|
+
this.removeControl(child);
|
|
209
|
+
}
|
|
210
|
+
return this;
|
|
211
|
+
};
|
|
212
|
+
/**
|
|
213
|
+
* Removes a control from the current container
|
|
214
|
+
* @param control defines the control to remove
|
|
215
|
+
* @returns the current container
|
|
216
|
+
*/
|
|
217
|
+
Container.prototype.removeControl = function (control) {
|
|
218
|
+
var index = this._children.indexOf(control);
|
|
219
|
+
if (index !== -1) {
|
|
220
|
+
this._children.splice(index, 1);
|
|
221
|
+
control.parent = null;
|
|
222
|
+
}
|
|
223
|
+
control.linkWithMesh(null);
|
|
224
|
+
if (this._host) {
|
|
225
|
+
this._host._cleanControlAfterRemoval(control);
|
|
226
|
+
}
|
|
227
|
+
this._markAsDirty();
|
|
228
|
+
return this;
|
|
229
|
+
};
|
|
230
|
+
/**
|
|
231
|
+
* @param control
|
|
232
|
+
* @hidden
|
|
233
|
+
*/
|
|
234
|
+
Container.prototype._reOrderControl = function (control) {
|
|
235
|
+
this.removeControl(control);
|
|
236
|
+
var wasAdded = false;
|
|
237
|
+
for (var index = 0; index < this._children.length; index++) {
|
|
238
|
+
if (this._children[index].zIndex > control.zIndex) {
|
|
239
|
+
this._children.splice(index, 0, control);
|
|
240
|
+
wasAdded = true;
|
|
241
|
+
break;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
if (!wasAdded) {
|
|
245
|
+
this._children.push(control);
|
|
246
|
+
}
|
|
247
|
+
control.parent = this;
|
|
248
|
+
this._markAsDirty();
|
|
249
|
+
};
|
|
250
|
+
/**
|
|
251
|
+
* @param offset
|
|
252
|
+
* @hidden
|
|
253
|
+
*/
|
|
254
|
+
Container.prototype._offsetLeft = function (offset) {
|
|
255
|
+
_super.prototype._offsetLeft.call(this, offset);
|
|
256
|
+
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
257
|
+
var child = _a[_i];
|
|
258
|
+
child._offsetLeft(offset);
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
/**
|
|
262
|
+
* @param offset
|
|
263
|
+
* @hidden
|
|
264
|
+
*/
|
|
265
|
+
Container.prototype._offsetTop = function (offset) {
|
|
266
|
+
_super.prototype._offsetTop.call(this, offset);
|
|
267
|
+
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
268
|
+
var child = _a[_i];
|
|
269
|
+
child._offsetTop(offset);
|
|
270
|
+
}
|
|
271
|
+
};
|
|
272
|
+
/** @hidden */
|
|
273
|
+
Container.prototype._markAllAsDirty = function () {
|
|
274
|
+
_super.prototype._markAllAsDirty.call(this);
|
|
275
|
+
for (var index = 0; index < this._children.length; index++) {
|
|
276
|
+
this._children[index]._markAllAsDirty();
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
/**
|
|
280
|
+
* @param context
|
|
281
|
+
* @hidden
|
|
282
|
+
*/
|
|
283
|
+
Container.prototype._localDraw = function (context) {
|
|
284
|
+
if (this._background) {
|
|
285
|
+
context.save();
|
|
286
|
+
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
|
|
287
|
+
context.shadowColor = this.shadowColor;
|
|
288
|
+
context.shadowBlur = this.shadowBlur;
|
|
289
|
+
context.shadowOffsetX = this.shadowOffsetX;
|
|
290
|
+
context.shadowOffsetY = this.shadowOffsetY;
|
|
291
|
+
}
|
|
292
|
+
context.fillStyle = this._background;
|
|
293
|
+
context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
|
|
294
|
+
context.restore();
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
/**
|
|
298
|
+
* @param host
|
|
299
|
+
* @hidden
|
|
300
|
+
*/
|
|
301
|
+
Container.prototype._link = function (host) {
|
|
302
|
+
_super.prototype._link.call(this, host);
|
|
303
|
+
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
304
|
+
var child = _a[_i];
|
|
305
|
+
child._link(host);
|
|
306
|
+
}
|
|
307
|
+
};
|
|
308
|
+
/** @hidden */
|
|
309
|
+
Container.prototype._beforeLayout = function () {
|
|
310
|
+
// Do nothing
|
|
311
|
+
};
|
|
312
|
+
/**
|
|
313
|
+
* @param parentMeasure
|
|
314
|
+
* @param context
|
|
315
|
+
* @hidden
|
|
316
|
+
*/
|
|
317
|
+
Container.prototype._processMeasures = function (parentMeasure, context) {
|
|
318
|
+
if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
|
|
319
|
+
_super.prototype._processMeasures.call(this, parentMeasure, context);
|
|
320
|
+
this._evaluateClippingState(parentMeasure);
|
|
321
|
+
if (this._renderToIntermediateTexture) {
|
|
322
|
+
if (this._intermediateTexture && this._host.getScene() != this._intermediateTexture.getScene()) {
|
|
323
|
+
this._intermediateTexture.dispose();
|
|
324
|
+
this._intermediateTexture = null;
|
|
325
|
+
}
|
|
326
|
+
if (!this._intermediateTexture) {
|
|
327
|
+
this._intermediateTexture = new DynamicTexture("", { width: this._currentMeasure.width, height: this._currentMeasure.height }, this._host.getScene(), false, Texture.NEAREST_SAMPLINGMODE, Constants.TEXTUREFORMAT_RGBA, false);
|
|
328
|
+
this._intermediateTexture.hasAlpha = true;
|
|
329
|
+
}
|
|
330
|
+
else {
|
|
331
|
+
this._intermediateTexture.scaleTo(this._currentMeasure.width, this._currentMeasure.height);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
};
|
|
336
|
+
/**
|
|
337
|
+
* @param parentMeasure
|
|
338
|
+
* @param context
|
|
339
|
+
* @hidden
|
|
340
|
+
*/
|
|
341
|
+
Container.prototype._layout = function (parentMeasure, context) {
|
|
342
|
+
var _a, _b;
|
|
343
|
+
if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
|
|
344
|
+
return false;
|
|
345
|
+
}
|
|
346
|
+
this.host._numLayoutCalls++;
|
|
347
|
+
if (this._isDirty) {
|
|
348
|
+
this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
|
|
349
|
+
}
|
|
350
|
+
var rebuildCount = 0;
|
|
351
|
+
context.save();
|
|
352
|
+
this._applyStates(context);
|
|
353
|
+
this._beforeLayout();
|
|
354
|
+
do {
|
|
355
|
+
var computedWidth = -1;
|
|
356
|
+
var computedHeight = -1;
|
|
357
|
+
this._rebuildLayout = false;
|
|
358
|
+
this._processMeasures(parentMeasure, context);
|
|
359
|
+
if (!this._isClipped) {
|
|
360
|
+
for (var _i = 0, _c = this._children; _i < _c.length; _i++) {
|
|
361
|
+
var child = _c[_i];
|
|
362
|
+
child._tempParentMeasure.copyFrom(this._measureForChildren);
|
|
363
|
+
if (child._layout(this._measureForChildren, context)) {
|
|
364
|
+
if (this.adaptWidthToChildren && child._width.isPixel) {
|
|
365
|
+
computedWidth = Math.max(computedWidth, child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels);
|
|
366
|
+
}
|
|
367
|
+
if (this.adaptHeightToChildren && child._height.isPixel) {
|
|
368
|
+
computedHeight = Math.max(computedHeight, child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels);
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
if (this.adaptWidthToChildren && computedWidth >= 0) {
|
|
373
|
+
computedWidth += this.paddingLeftInPixels + this.paddingRightInPixels;
|
|
374
|
+
if (this.width !== computedWidth + "px") {
|
|
375
|
+
(_a = this.parent) === null || _a === void 0 ? void 0 : _a._markAsDirty();
|
|
376
|
+
this.width = computedWidth + "px";
|
|
377
|
+
this._rebuildLayout = true;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
if (this.adaptHeightToChildren && computedHeight >= 0) {
|
|
381
|
+
computedHeight += this.paddingTopInPixels + this.paddingBottomInPixels;
|
|
382
|
+
if (this.height !== computedHeight + "px") {
|
|
383
|
+
(_b = this.parent) === null || _b === void 0 ? void 0 : _b._markAsDirty();
|
|
384
|
+
this.height = computedHeight + "px";
|
|
385
|
+
this._rebuildLayout = true;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
this._postMeasure();
|
|
389
|
+
}
|
|
390
|
+
rebuildCount++;
|
|
391
|
+
} while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
|
|
392
|
+
if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
|
|
393
|
+
Logger.Error("Layout cycle detected in GUI (Container name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
|
|
394
|
+
}
|
|
395
|
+
context.restore();
|
|
396
|
+
if (this._isDirty) {
|
|
397
|
+
this.invalidateRect();
|
|
398
|
+
this._isDirty = false;
|
|
399
|
+
}
|
|
400
|
+
return true;
|
|
401
|
+
};
|
|
402
|
+
Container.prototype._postMeasure = function () {
|
|
403
|
+
// Do nothing by default
|
|
404
|
+
};
|
|
405
|
+
/**
|
|
406
|
+
* @param context
|
|
407
|
+
* @param invalidatedRectangle
|
|
408
|
+
* @hidden
|
|
409
|
+
*/
|
|
410
|
+
Container.prototype._draw = function (context, invalidatedRectangle) {
|
|
411
|
+
var renderToIntermediateTextureThisDraw = this._renderToIntermediateTexture && this._intermediateTexture;
|
|
412
|
+
var contextToDrawTo = renderToIntermediateTextureThisDraw ? this._intermediateTexture.getContext() : context;
|
|
413
|
+
if (renderToIntermediateTextureThisDraw) {
|
|
414
|
+
contextToDrawTo.save();
|
|
415
|
+
contextToDrawTo.translate(-this._currentMeasure.left, -this._currentMeasure.top);
|
|
416
|
+
if (invalidatedRectangle) {
|
|
417
|
+
contextToDrawTo.clearRect(invalidatedRectangle.left, invalidatedRectangle.top, invalidatedRectangle.width, invalidatedRectangle.height);
|
|
418
|
+
}
|
|
419
|
+
else {
|
|
420
|
+
contextToDrawTo.clearRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
this._localDraw(contextToDrawTo);
|
|
424
|
+
context.save();
|
|
425
|
+
if (this.clipChildren) {
|
|
426
|
+
this._clipForChildren(contextToDrawTo);
|
|
427
|
+
}
|
|
428
|
+
for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
|
|
429
|
+
var child = _a[_i];
|
|
430
|
+
// Only redraw parts of the screen that are invalidated
|
|
431
|
+
if (invalidatedRectangle) {
|
|
432
|
+
if (!child._intersectsRect(invalidatedRectangle)) {
|
|
433
|
+
continue;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
child._render(contextToDrawTo, invalidatedRectangle);
|
|
437
|
+
}
|
|
438
|
+
if (renderToIntermediateTextureThisDraw) {
|
|
439
|
+
contextToDrawTo.restore();
|
|
440
|
+
context.save();
|
|
441
|
+
context.globalAlpha = this.alpha;
|
|
442
|
+
context.drawImage(contextToDrawTo.canvas, this._currentMeasure.left, this._currentMeasure.top);
|
|
443
|
+
context.restore();
|
|
444
|
+
}
|
|
445
|
+
context.restore();
|
|
446
|
+
};
|
|
447
|
+
Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
|
|
448
|
+
if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
|
|
449
|
+
if (!this.children) {
|
|
450
|
+
return;
|
|
451
|
+
}
|
|
452
|
+
for (var index = 0; index < this.children.length; index++) {
|
|
453
|
+
var item = this.children[index];
|
|
454
|
+
if (!predicate || predicate(item)) {
|
|
455
|
+
results.push(item);
|
|
456
|
+
}
|
|
457
|
+
if (!directDescendantsOnly) {
|
|
458
|
+
item.getDescendantsToRef(results, false, predicate);
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
};
|
|
462
|
+
/**
|
|
463
|
+
* @param x
|
|
464
|
+
* @param y
|
|
465
|
+
* @param pi
|
|
466
|
+
* @param type
|
|
467
|
+
* @param pointerId
|
|
468
|
+
* @param buttonIndex
|
|
469
|
+
* @param deltaX
|
|
470
|
+
* @param deltaY
|
|
471
|
+
* @hidden
|
|
472
|
+
*/
|
|
473
|
+
Container.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
|
|
474
|
+
if (!this._isEnabled || !this.isVisible || this.notRenderable) {
|
|
475
|
+
return false;
|
|
476
|
+
}
|
|
477
|
+
// checks if the picking position is within the container
|
|
478
|
+
var contains = _super.prototype.contains.call(this, x, y);
|
|
479
|
+
// if clipChildren is off, we should still pass picking events to children even if we don't contain the pointer
|
|
480
|
+
if (!contains && this.clipChildren) {
|
|
481
|
+
return false;
|
|
482
|
+
}
|
|
483
|
+
// Checking backwards to pick closest first
|
|
484
|
+
for (var index = this._children.length - 1; index >= 0; index--) {
|
|
485
|
+
var child = this._children[index];
|
|
486
|
+
if (child._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
|
|
487
|
+
if (child.hoverCursor) {
|
|
488
|
+
this._host._changeCursor(child.hoverCursor);
|
|
489
|
+
}
|
|
490
|
+
return true;
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
if (!contains) {
|
|
494
|
+
return false;
|
|
495
|
+
}
|
|
496
|
+
if (!this.isHitTestVisible) {
|
|
497
|
+
return false;
|
|
498
|
+
}
|
|
499
|
+
return this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
|
|
500
|
+
};
|
|
501
|
+
/**
|
|
502
|
+
* @param parentMeasure
|
|
503
|
+
* @param context
|
|
504
|
+
* @hidden
|
|
505
|
+
*/
|
|
506
|
+
Container.prototype._additionalProcessing = function (parentMeasure, context) {
|
|
507
|
+
_super.prototype._additionalProcessing.call(this, parentMeasure, context);
|
|
508
|
+
this._measureForChildren.copyFrom(this._currentMeasure);
|
|
509
|
+
};
|
|
510
|
+
/**
|
|
511
|
+
* Serializes the current control
|
|
512
|
+
* @param serializationObject defined the JSON serialized object
|
|
513
|
+
*/
|
|
514
|
+
Container.prototype.serialize = function (serializationObject) {
|
|
515
|
+
_super.prototype.serialize.call(this, serializationObject);
|
|
516
|
+
if (!this.children.length) {
|
|
517
|
+
return;
|
|
518
|
+
}
|
|
519
|
+
serializationObject.children = [];
|
|
520
|
+
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
|
|
521
|
+
var child = _a[_i];
|
|
522
|
+
var childSerializationObject = {};
|
|
523
|
+
child.serialize(childSerializationObject);
|
|
524
|
+
serializationObject.children.push(childSerializationObject);
|
|
525
|
+
}
|
|
526
|
+
};
|
|
527
|
+
/** Releases associated resources */
|
|
528
|
+
Container.prototype.dispose = function () {
|
|
529
|
+
var _a;
|
|
530
|
+
_super.prototype.dispose.call(this);
|
|
531
|
+
for (var index = this.children.length - 1; index >= 0; index--) {
|
|
532
|
+
this.children[index].dispose();
|
|
533
|
+
}
|
|
534
|
+
(_a = this._intermediateTexture) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
535
|
+
};
|
|
536
|
+
/**
|
|
537
|
+
* @param serializedObject
|
|
538
|
+
* @param host
|
|
539
|
+
* @hidden
|
|
540
|
+
*/
|
|
541
|
+
Container.prototype._parseFromContent = function (serializedObject, host) {
|
|
542
|
+
_super.prototype._parseFromContent.call(this, serializedObject, host);
|
|
543
|
+
this._link(host);
|
|
544
|
+
if (!serializedObject.children) {
|
|
545
|
+
return;
|
|
546
|
+
}
|
|
547
|
+
for (var _i = 0, _a = serializedObject.children; _i < _a.length; _i++) {
|
|
548
|
+
var childData = _a[_i];
|
|
549
|
+
this.addControl(Control.Parse(childData, host));
|
|
550
|
+
}
|
|
551
|
+
};
|
|
552
|
+
__decorate([
|
|
553
|
+
serialize()
|
|
554
|
+
], Container.prototype, "renderToIntermediateTexture", null);
|
|
555
|
+
__decorate([
|
|
556
|
+
serialize()
|
|
557
|
+
], Container.prototype, "maxLayoutCycle", void 0);
|
|
558
|
+
__decorate([
|
|
559
|
+
serialize()
|
|
560
|
+
], Container.prototype, "adaptHeightToChildren", null);
|
|
561
|
+
__decorate([
|
|
562
|
+
serialize()
|
|
563
|
+
], Container.prototype, "adaptWidthToChildren", null);
|
|
564
|
+
__decorate([
|
|
565
|
+
serialize()
|
|
566
|
+
], Container.prototype, "background", null);
|
|
567
|
+
return Container;
|
|
568
|
+
}(Control));
|
|
569
|
+
export { Container };
|
|
570
|
+
RegisterClass("BABYLON.GUI.Container", Container);
|
|
571
571
|
//# sourceMappingURL=container.js.map
|