@babylonjs/gui 5.19.0 → 5.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/2D/adtInstrumentation.js +70 -90
- package/2D/adtInstrumentation.js.map +1 -1
- package/2D/advancedDynamicTexture.d.ts +8 -0
- package/2D/advancedDynamicTexture.js +559 -620
- package/2D/advancedDynamicTexture.js.map +1 -1
- package/2D/controls/button.js +76 -90
- package/2D/controls/button.js.map +1 -1
- package/2D/controls/checkbox.js +86 -106
- package/2D/controls/checkbox.js.map +1 -1
- package/2D/controls/colorpicker.js +395 -415
- package/2D/controls/colorpicker.js.map +1 -1
- package/2D/controls/container.js +187 -230
- package/2D/controls/container.js.map +1 -1
- package/2D/controls/control.js +1073 -1353
- package/2D/controls/control.js.map +1 -1
- package/2D/controls/displayGrid.js +152 -196
- package/2D/controls/displayGrid.js.map +1 -1
- package/2D/controls/ellipse.js +32 -40
- package/2D/controls/ellipse.js.map +1 -1
- package/2D/controls/focusableButton.js +30 -35
- package/2D/controls/focusableButton.js.map +1 -1
- package/2D/controls/grid.js +172 -212
- package/2D/controls/grid.js.map +1 -1
- package/2D/controls/image.js +489 -592
- package/2D/controls/image.js.map +1 -1
- package/2D/controls/inputPassword.js +9 -16
- package/2D/controls/inputPassword.js.map +1 -1
- package/2D/controls/inputText.js +380 -467
- package/2D/controls/inputText.js.map +1 -1
- package/2D/controls/inputTextArea.js +234 -273
- package/2D/controls/inputTextArea.js.map +1 -1
- package/2D/controls/line.js +147 -198
- package/2D/controls/line.js.map +1 -1
- package/2D/controls/multiLine.js +87 -113
- package/2D/controls/multiLine.js.map +1 -1
- package/2D/controls/radioButton.js +106 -127
- package/2D/controls/radioButton.js.map +1 -1
- package/2D/controls/rectangle.js +64 -76
- package/2D/controls/rectangle.js.map +1 -1
- package/2D/controls/scrollViewers/scrollViewer.js +439 -543
- package/2D/controls/scrollViewers/scrollViewer.js.map +1 -1
- package/2D/controls/scrollViewers/scrollViewerWindow.js +99 -118
- package/2D/controls/scrollViewers/scrollViewerWindow.js.map +1 -1
- package/2D/controls/selector.js +241 -329
- package/2D/controls/selector.js.map +1 -1
- package/2D/controls/sliders/baseSlider.js +182 -230
- package/2D/controls/sliders/baseSlider.js.map +1 -1
- package/2D/controls/sliders/imageBasedSlider.js +86 -109
- package/2D/controls/sliders/imageBasedSlider.js.map +1 -1
- package/2D/controls/sliders/imageScrollBar.d.ts +4 -0
- package/2D/controls/sliders/imageScrollBar.js +149 -163
- package/2D/controls/sliders/imageScrollBar.js.map +1 -1
- package/2D/controls/sliders/scrollBar.d.ts +4 -0
- package/2D/controls/sliders/scrollBar.js +65 -65
- package/2D/controls/sliders/scrollBar.js.map +1 -1
- package/2D/controls/sliders/slider.js +91 -115
- package/2D/controls/sliders/slider.js.map +1 -1
- package/2D/controls/stackPanel.js +114 -135
- package/2D/controls/stackPanel.js.map +1 -1
- package/2D/controls/statics.js +5 -5
- package/2D/controls/statics.js.map +1 -1
- package/2D/controls/textBlock.js +322 -384
- package/2D/controls/textBlock.js.map +1 -1
- package/2D/controls/textWrapper.js +27 -41
- package/2D/controls/textWrapper.js.map +1 -1
- package/2D/controls/toggleButton.js +105 -121
- package/2D/controls/toggleButton.js.map +1 -1
- package/2D/controls/virtualKeyboard.js +101 -123
- package/2D/controls/virtualKeyboard.js.map +1 -1
- package/2D/math2D.js +62 -70
- package/2D/math2D.js.map +1 -1
- package/2D/measure.js +30 -32
- package/2D/measure.js.map +1 -1
- package/2D/multiLinePoint.js +71 -89
- package/2D/multiLinePoint.js.map +1 -1
- package/2D/style.js +55 -73
- package/2D/style.js.map +1 -1
- package/2D/valueAndUnit.js +71 -104
- package/2D/valueAndUnit.js.map +1 -1
- package/2D/xmlLoader.js +70 -84
- package/2D/xmlLoader.js.map +1 -1
- package/3D/behaviors/defaultBehavior.js +40 -59
- package/3D/behaviors/defaultBehavior.js.map +1 -1
- package/3D/controls/abstractButton3D.js +8 -12
- package/3D/controls/abstractButton3D.js.map +1 -1
- package/3D/controls/button3D.js +30 -35
- package/3D/controls/button3D.js.map +1 -1
- package/3D/controls/container3D.js +57 -71
- package/3D/controls/container3D.js.map +1 -1
- package/3D/controls/contentDisplay3D.js +47 -60
- package/3D/controls/contentDisplay3D.js.map +1 -1
- package/3D/controls/control3D.js +123 -158
- package/3D/controls/control3D.js.map +1 -1
- package/3D/controls/cylinderPanel.js +28 -38
- package/3D/controls/cylinderPanel.js.map +1 -1
- package/3D/controls/handMenu.js +20 -29
- package/3D/controls/handMenu.js.map +1 -1
- package/3D/controls/holographicBackplate.js +52 -72
- package/3D/controls/holographicBackplate.js.map +1 -1
- package/3D/controls/holographicButton.js +160 -200
- package/3D/controls/holographicButton.js.map +1 -1
- package/3D/controls/holographicSlate.js +176 -206
- package/3D/controls/holographicSlate.js.map +1 -1
- package/3D/controls/meshButton3D.js +24 -30
- package/3D/controls/meshButton3D.js.map +1 -1
- package/3D/controls/nearMenu.js +57 -71
- package/3D/controls/nearMenu.js.map +1 -1
- package/3D/controls/planePanel.js +6 -13
- package/3D/controls/planePanel.js.map +1 -1
- package/3D/controls/scatterPanel.js +43 -54
- package/3D/controls/scatterPanel.js.map +1 -1
- package/3D/controls/slider3D.js +168 -222
- package/3D/controls/slider3D.js.map +1 -1
- package/3D/controls/spherePanel.js +29 -39
- package/3D/controls/spherePanel.js.map +1 -1
- package/3D/controls/stackPanel3D.js +36 -49
- package/3D/controls/stackPanel3D.js.map +1 -1
- package/3D/controls/touchButton3D.js +126 -154
- package/3D/controls/touchButton3D.js.map +1 -1
- package/3D/controls/touchHolographicButton.js +223 -272
- package/3D/controls/touchHolographicButton.js.map +1 -1
- package/3D/controls/touchHolographicMenu.js +55 -66
- package/3D/controls/touchHolographicMenu.js.map +1 -1
- package/3D/controls/touchMeshButton3D.js +24 -30
- package/3D/controls/touchMeshButton3D.js.map +1 -1
- package/3D/controls/volumeBasedPanel.js +85 -107
- package/3D/controls/volumeBasedPanel.js.map +1 -1
- package/3D/gizmos/gizmoHandle.js +68 -103
- package/3D/gizmos/gizmoHandle.js.map +1 -1
- package/3D/gizmos/slateGizmo.js +165 -182
- package/3D/gizmos/slateGizmo.js.map +1 -1
- package/3D/gui3DManager.js +76 -101
- package/3D/gui3DManager.js.map +1 -1
- package/3D/materials/fluent/fluentMaterial.js +110 -119
- package/3D/materials/fluent/fluentMaterial.js.map +1 -1
- package/3D/materials/fluent/shaders/fluent.fragment.js +20 -3
- package/3D/materials/fluent/shaders/fluent.fragment.js.map +1 -1
- package/3D/materials/fluent/shaders/fluent.vertex.js +11 -3
- package/3D/materials/fluent/shaders/fluent.vertex.js.map +1 -1
- package/3D/materials/fluentBackplate/fluentBackplateMaterial.js +168 -177
- package/3D/materials/fluentBackplate/fluentBackplateMaterial.js.map +1 -1
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.js +9 -3
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment.js.map +1 -1
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.js +15 -3
- package/3D/materials/fluentBackplate/shaders/fluentBackplate.vertex.js.map +1 -1
- package/3D/materials/fluentButton/fluentButtonMaterial.js +205 -213
- package/3D/materials/fluentButton/fluentButtonMaterial.js.map +1 -1
- package/3D/materials/fluentButton/shaders/fluentButton.fragment.js +6 -3
- package/3D/materials/fluentButton/shaders/fluentButton.fragment.js.map +1 -1
- package/3D/materials/fluentButton/shaders/fluentButton.vertex.js +6 -3
- package/3D/materials/fluentButton/shaders/fluentButton.vertex.js.map +1 -1
- package/3D/materials/handle/handleMaterial.js +56 -69
- package/3D/materials/handle/handleMaterial.js.map +1 -1
- package/3D/materials/handle/shaders/handle.fragment.js +3 -3
- package/3D/materials/handle/shaders/handle.fragment.js.map +1 -1
- package/3D/materials/handle/shaders/handle.vertex.js +3 -3
- package/3D/materials/handle/shaders/handle.vertex.js.map +1 -1
- package/3D/materials/mrdl/mrdlBackplateMaterial.js +158 -166
- package/3D/materials/mrdl/mrdlBackplateMaterial.js.map +1 -1
- package/3D/materials/mrdl/mrdlSliderBarMaterial.js +322 -330
- package/3D/materials/mrdl/mrdlSliderBarMaterial.js.map +1 -1
- package/3D/materials/mrdl/mrdlSliderThumbMaterial.js +322 -330
- package/3D/materials/mrdl/mrdlSliderThumbMaterial.js.map +1 -1
- package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.js +9 -3
- package/3D/materials/mrdl/shaders/mrdlBackplate.fragment.js.map +1 -1
- package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.js +6 -3
- package/3D/materials/mrdl/shaders/mrdlBackplate.vertex.js.map +1 -1
- package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.js +24 -3
- package/3D/materials/mrdl/shaders/mrdlSliderBar.fragment.js.map +1 -1
- package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.js +12 -3
- package/3D/materials/mrdl/shaders/mrdlSliderBar.vertex.js.map +1 -1
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.js +24 -3
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.fragment.js.map +1 -1
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.js +12 -3
- package/3D/materials/mrdl/shaders/mrdlSliderThumb.vertex.js.map +1 -1
- package/3D/vector3WithInfo.js +6 -12
- package/3D/vector3WithInfo.js.map +1 -1
- package/legacy/legacy.js +1 -1
- package/legacy/legacy.js.map +1 -1
- package/package.json +2 -5
package/2D/controls/inputText.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate
|
|
1
|
+
import { __decorate } from "@babylonjs/core/tslib.es6.js";
|
|
2
2
|
import { Observable } from "@babylonjs/core/Misc/observable.js";
|
|
3
3
|
import { ClipboardEventTypes } from "@babylonjs/core/Events/clipboardEvents.js";
|
|
4
4
|
import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
|
|
@@ -10,355 +10,272 @@ import { serialize } from "@babylonjs/core/Misc/decorators.js";
|
|
|
10
10
|
/**
|
|
11
11
|
* Class used to create input text control
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
|
-
__extends(InputText, _super);
|
|
13
|
+
export class InputText extends Control {
|
|
15
14
|
/**
|
|
16
15
|
* Creates a new InputText
|
|
17
16
|
* @param name defines the control name
|
|
18
17
|
* @param text defines the text of the control
|
|
19
18
|
*/
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
_this._isPointerDown = false;
|
|
19
|
+
constructor(name, text = "") {
|
|
20
|
+
super(name);
|
|
21
|
+
this.name = name;
|
|
22
|
+
this._placeholderText = "";
|
|
23
|
+
this._background = "#222222";
|
|
24
|
+
this._focusedBackground = "#000000";
|
|
25
|
+
this._focusedColor = "white";
|
|
26
|
+
this._placeholderColor = "gray";
|
|
27
|
+
this._thickness = 1;
|
|
28
|
+
this._margin = new ValueAndUnit(10, ValueAndUnit.UNITMODE_PIXEL);
|
|
29
|
+
this._autoStretchWidth = true;
|
|
30
|
+
this._maxWidth = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
|
|
31
|
+
this._isFocused = false;
|
|
32
|
+
this._blinkIsEven = false;
|
|
33
|
+
this._cursorOffset = 0;
|
|
34
|
+
this._deadKey = false;
|
|
35
|
+
this._addKey = true;
|
|
36
|
+
this._currentKey = "";
|
|
37
|
+
this._isTextHighlightOn = false;
|
|
38
|
+
this._textHighlightColor = "#d5e0ff";
|
|
39
|
+
this._highligherOpacity = 0.4;
|
|
40
|
+
this._highlightedText = "";
|
|
41
|
+
this._startHighlightIndex = 0;
|
|
42
|
+
this._endHighlightIndex = 0;
|
|
43
|
+
this._cursorIndex = -1;
|
|
44
|
+
this._onFocusSelectAll = false;
|
|
45
|
+
this._isPointerDown = false;
|
|
48
46
|
/** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
|
|
49
|
-
|
|
47
|
+
this.promptMessage = "Please enter text:";
|
|
50
48
|
/** Force disable prompt on mobile device */
|
|
51
|
-
|
|
49
|
+
this.disableMobilePrompt = false;
|
|
52
50
|
/** Observable raised when the text changes */
|
|
53
|
-
|
|
51
|
+
this.onTextChangedObservable = new Observable();
|
|
54
52
|
/** Observable raised just before an entered character is to be added */
|
|
55
|
-
|
|
53
|
+
this.onBeforeKeyAddObservable = new Observable();
|
|
56
54
|
/** Observable raised when the control gets the focus */
|
|
57
|
-
|
|
55
|
+
this.onFocusObservable = new Observable();
|
|
58
56
|
/** Observable raised when the control loses the focus */
|
|
59
|
-
|
|
57
|
+
this.onBlurObservable = new Observable();
|
|
60
58
|
/**Observable raised when the text is highlighted */
|
|
61
|
-
|
|
59
|
+
this.onTextHighlightObservable = new Observable();
|
|
62
60
|
/**Observable raised when copy event is triggered */
|
|
63
|
-
|
|
61
|
+
this.onTextCopyObservable = new Observable();
|
|
64
62
|
/** Observable raised when cut event is triggered */
|
|
65
|
-
|
|
63
|
+
this.onTextCutObservable = new Observable();
|
|
66
64
|
/** Observable raised when paste event is triggered */
|
|
67
|
-
|
|
65
|
+
this.onTextPasteObservable = new Observable();
|
|
68
66
|
/** Observable raised when a key event was processed */
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return _this;
|
|
67
|
+
this.onKeyboardEventProcessedObservable = new Observable();
|
|
68
|
+
this.text = text;
|
|
69
|
+
this.isPointerBlocker = true;
|
|
73
70
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
enumerable: false,
|
|
88
|
-
configurable: true
|
|
89
|
-
});
|
|
90
|
-
Object.defineProperty(InputText.prototype, "maxWidthInPixels", {
|
|
91
|
-
/** Gets the maximum width allowed by the control in pixels */
|
|
92
|
-
get: function () {
|
|
93
|
-
return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
|
|
94
|
-
},
|
|
95
|
-
enumerable: false,
|
|
96
|
-
configurable: true
|
|
97
|
-
});
|
|
98
|
-
Object.defineProperty(InputText.prototype, "highligherOpacity", {
|
|
99
|
-
/** Gets or sets the text highlighter transparency; default: 0.4 */
|
|
100
|
-
get: function () {
|
|
101
|
-
return this._highligherOpacity;
|
|
102
|
-
},
|
|
103
|
-
set: function (value) {
|
|
104
|
-
if (this._highligherOpacity === value) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
this._highligherOpacity = value;
|
|
108
|
-
this._markAsDirty();
|
|
109
|
-
},
|
|
110
|
-
enumerable: false,
|
|
111
|
-
configurable: true
|
|
112
|
-
});
|
|
113
|
-
Object.defineProperty(InputText.prototype, "onFocusSelectAll", {
|
|
114
|
-
/** Gets or sets a boolean indicating whether to select complete text by default on input focus */
|
|
115
|
-
get: function () {
|
|
116
|
-
return this._onFocusSelectAll;
|
|
117
|
-
},
|
|
118
|
-
set: function (value) {
|
|
119
|
-
if (this._onFocusSelectAll === value) {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
this._onFocusSelectAll = value;
|
|
123
|
-
this._markAsDirty();
|
|
124
|
-
},
|
|
125
|
-
enumerable: false,
|
|
126
|
-
configurable: true
|
|
127
|
-
});
|
|
128
|
-
Object.defineProperty(InputText.prototype, "textHighlightColor", {
|
|
129
|
-
/** Gets or sets the text hightlight color */
|
|
130
|
-
get: function () {
|
|
131
|
-
return this._textHighlightColor;
|
|
132
|
-
},
|
|
133
|
-
set: function (value) {
|
|
134
|
-
if (this._textHighlightColor === value) {
|
|
135
|
-
return;
|
|
136
|
-
}
|
|
137
|
-
this._textHighlightColor = value;
|
|
138
|
-
this._markAsDirty();
|
|
139
|
-
},
|
|
140
|
-
enumerable: false,
|
|
141
|
-
configurable: true
|
|
142
|
-
});
|
|
143
|
-
Object.defineProperty(InputText.prototype, "margin", {
|
|
144
|
-
/** Gets or sets control margin */
|
|
145
|
-
get: function () {
|
|
146
|
-
return this._margin.toString(this._host);
|
|
147
|
-
},
|
|
148
|
-
set: function (value) {
|
|
149
|
-
if (this._margin.toString(this._host) === value) {
|
|
150
|
-
return;
|
|
151
|
-
}
|
|
152
|
-
if (this._margin.fromString(value)) {
|
|
153
|
-
this._markAsDirty();
|
|
154
|
-
}
|
|
155
|
-
},
|
|
156
|
-
enumerable: false,
|
|
157
|
-
configurable: true
|
|
158
|
-
});
|
|
159
|
-
Object.defineProperty(InputText.prototype, "marginInPixels", {
|
|
160
|
-
/** Gets control margin in pixels */
|
|
161
|
-
get: function () {
|
|
162
|
-
return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
|
|
163
|
-
},
|
|
164
|
-
enumerable: false,
|
|
165
|
-
configurable: true
|
|
166
|
-
});
|
|
167
|
-
Object.defineProperty(InputText.prototype, "autoStretchWidth", {
|
|
168
|
-
/** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
|
|
169
|
-
get: function () {
|
|
170
|
-
return this._autoStretchWidth;
|
|
171
|
-
},
|
|
172
|
-
set: function (value) {
|
|
173
|
-
if (this._autoStretchWidth === value) {
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
this._autoStretchWidth = value;
|
|
177
|
-
this._markAsDirty();
|
|
178
|
-
},
|
|
179
|
-
enumerable: false,
|
|
180
|
-
configurable: true
|
|
181
|
-
});
|
|
182
|
-
Object.defineProperty(InputText.prototype, "thickness", {
|
|
183
|
-
/** Gets or sets border thickness */
|
|
184
|
-
get: function () {
|
|
185
|
-
return this._thickness;
|
|
186
|
-
},
|
|
187
|
-
set: function (value) {
|
|
188
|
-
if (this._thickness === value) {
|
|
189
|
-
return;
|
|
190
|
-
}
|
|
191
|
-
this._thickness = value;
|
|
192
|
-
this._markAsDirty();
|
|
193
|
-
},
|
|
194
|
-
enumerable: false,
|
|
195
|
-
configurable: true
|
|
196
|
-
});
|
|
197
|
-
Object.defineProperty(InputText.prototype, "focusedBackground", {
|
|
198
|
-
/** Gets or sets the background color when focused */
|
|
199
|
-
get: function () {
|
|
200
|
-
return this._focusedBackground;
|
|
201
|
-
},
|
|
202
|
-
set: function (value) {
|
|
203
|
-
if (this._focusedBackground === value) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
this._focusedBackground = value;
|
|
207
|
-
this._markAsDirty();
|
|
208
|
-
},
|
|
209
|
-
enumerable: false,
|
|
210
|
-
configurable: true
|
|
211
|
-
});
|
|
212
|
-
Object.defineProperty(InputText.prototype, "focusedColor", {
|
|
213
|
-
/** Gets or sets the background color when focused */
|
|
214
|
-
get: function () {
|
|
215
|
-
return this._focusedColor;
|
|
216
|
-
},
|
|
217
|
-
set: function (value) {
|
|
218
|
-
if (this._focusedColor === value) {
|
|
219
|
-
return;
|
|
220
|
-
}
|
|
221
|
-
this._focusedColor = value;
|
|
222
|
-
this._markAsDirty();
|
|
223
|
-
},
|
|
224
|
-
enumerable: false,
|
|
225
|
-
configurable: true
|
|
226
|
-
});
|
|
227
|
-
Object.defineProperty(InputText.prototype, "background", {
|
|
228
|
-
/** Gets or sets the background color */
|
|
229
|
-
get: function () {
|
|
230
|
-
return this._background;
|
|
231
|
-
},
|
|
232
|
-
set: function (value) {
|
|
233
|
-
if (this._background === value) {
|
|
234
|
-
return;
|
|
235
|
-
}
|
|
236
|
-
this._background = value;
|
|
237
|
-
this._markAsDirty();
|
|
238
|
-
},
|
|
239
|
-
enumerable: false,
|
|
240
|
-
configurable: true
|
|
241
|
-
});
|
|
242
|
-
Object.defineProperty(InputText.prototype, "placeholderColor", {
|
|
243
|
-
/** Gets or sets the placeholder color */
|
|
244
|
-
get: function () {
|
|
245
|
-
return this._placeholderColor;
|
|
246
|
-
},
|
|
247
|
-
set: function (value) {
|
|
248
|
-
if (this._placeholderColor === value) {
|
|
249
|
-
return;
|
|
250
|
-
}
|
|
251
|
-
this._placeholderColor = value;
|
|
252
|
-
this._markAsDirty();
|
|
253
|
-
},
|
|
254
|
-
enumerable: false,
|
|
255
|
-
configurable: true
|
|
256
|
-
});
|
|
257
|
-
Object.defineProperty(InputText.prototype, "placeholderText", {
|
|
258
|
-
/** Gets or sets the text displayed when the control is empty */
|
|
259
|
-
get: function () {
|
|
260
|
-
return this._placeholderText;
|
|
261
|
-
},
|
|
262
|
-
set: function (value) {
|
|
263
|
-
if (this._placeholderText === value) {
|
|
264
|
-
return;
|
|
265
|
-
}
|
|
266
|
-
this._placeholderText = value;
|
|
71
|
+
/** Gets or sets the maximum width allowed by the control */
|
|
72
|
+
get maxWidth() {
|
|
73
|
+
return this._maxWidth.toString(this._host);
|
|
74
|
+
}
|
|
75
|
+
/** Gets the maximum width allowed by the control in pixels */
|
|
76
|
+
get maxWidthInPixels() {
|
|
77
|
+
return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
|
|
78
|
+
}
|
|
79
|
+
set maxWidth(value) {
|
|
80
|
+
if (this._maxWidth.toString(this._host) === value) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
if (this._maxWidth.fromString(value)) {
|
|
267
84
|
this._markAsDirty();
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/** Gets or sets the text highlighter transparency; default: 0.4 */
|
|
88
|
+
get highligherOpacity() {
|
|
89
|
+
return this._highligherOpacity;
|
|
90
|
+
}
|
|
91
|
+
set highligherOpacity(value) {
|
|
92
|
+
if (this._highligherOpacity === value) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
this._highligherOpacity = value;
|
|
96
|
+
this._markAsDirty();
|
|
97
|
+
}
|
|
98
|
+
/** Gets or sets a boolean indicating whether to select complete text by default on input focus */
|
|
99
|
+
get onFocusSelectAll() {
|
|
100
|
+
return this._onFocusSelectAll;
|
|
101
|
+
}
|
|
102
|
+
set onFocusSelectAll(value) {
|
|
103
|
+
if (this._onFocusSelectAll === value) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
this._onFocusSelectAll = value;
|
|
107
|
+
this._markAsDirty();
|
|
108
|
+
}
|
|
109
|
+
/** Gets or sets the text hightlight color */
|
|
110
|
+
get textHighlightColor() {
|
|
111
|
+
return this._textHighlightColor;
|
|
112
|
+
}
|
|
113
|
+
set textHighlightColor(value) {
|
|
114
|
+
if (this._textHighlightColor === value) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
this._textHighlightColor = value;
|
|
118
|
+
this._markAsDirty();
|
|
119
|
+
}
|
|
120
|
+
/** Gets or sets control margin */
|
|
121
|
+
get margin() {
|
|
122
|
+
return this._margin.toString(this._host);
|
|
123
|
+
}
|
|
124
|
+
/** Gets control margin in pixels */
|
|
125
|
+
get marginInPixels() {
|
|
126
|
+
return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
|
|
127
|
+
}
|
|
128
|
+
set margin(value) {
|
|
129
|
+
if (this._margin.toString(this._host) === value) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
if (this._margin.fromString(value)) {
|
|
293
133
|
this._markAsDirty();
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
/** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
|
|
137
|
+
get autoStretchWidth() {
|
|
138
|
+
return this._autoStretchWidth;
|
|
139
|
+
}
|
|
140
|
+
set autoStretchWidth(value) {
|
|
141
|
+
if (this._autoStretchWidth === value) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
this._autoStretchWidth = value;
|
|
145
|
+
this._markAsDirty();
|
|
146
|
+
}
|
|
147
|
+
/** Gets or sets border thickness */
|
|
148
|
+
get thickness() {
|
|
149
|
+
return this._thickness;
|
|
150
|
+
}
|
|
151
|
+
set thickness(value) {
|
|
152
|
+
if (this._thickness === value) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
this._thickness = value;
|
|
156
|
+
this._markAsDirty();
|
|
157
|
+
}
|
|
158
|
+
/** Gets or sets the background color when focused */
|
|
159
|
+
get focusedBackground() {
|
|
160
|
+
return this._focusedBackground;
|
|
161
|
+
}
|
|
162
|
+
set focusedBackground(value) {
|
|
163
|
+
if (this._focusedBackground === value) {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
this._focusedBackground = value;
|
|
167
|
+
this._markAsDirty();
|
|
168
|
+
}
|
|
169
|
+
/** Gets or sets the background color when focused */
|
|
170
|
+
get focusedColor() {
|
|
171
|
+
return this._focusedColor;
|
|
172
|
+
}
|
|
173
|
+
set focusedColor(value) {
|
|
174
|
+
if (this._focusedColor === value) {
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
this._focusedColor = value;
|
|
178
|
+
this._markAsDirty();
|
|
179
|
+
}
|
|
180
|
+
/** Gets or sets the background color */
|
|
181
|
+
get background() {
|
|
182
|
+
return this._background;
|
|
183
|
+
}
|
|
184
|
+
set background(value) {
|
|
185
|
+
if (this._background === value) {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
this._background = value;
|
|
189
|
+
this._markAsDirty();
|
|
190
|
+
}
|
|
191
|
+
/** Gets or sets the placeholder color */
|
|
192
|
+
get placeholderColor() {
|
|
193
|
+
return this._placeholderColor;
|
|
194
|
+
}
|
|
195
|
+
set placeholderColor(value) {
|
|
196
|
+
if (this._placeholderColor === value) {
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
this._placeholderColor = value;
|
|
200
|
+
this._markAsDirty();
|
|
201
|
+
}
|
|
202
|
+
/** Gets or sets the text displayed when the control is empty */
|
|
203
|
+
get placeholderText() {
|
|
204
|
+
return this._placeholderText;
|
|
205
|
+
}
|
|
206
|
+
set placeholderText(value) {
|
|
207
|
+
if (this._placeholderText === value) {
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
this._placeholderText = value;
|
|
211
|
+
this._markAsDirty();
|
|
212
|
+
}
|
|
213
|
+
/** Gets or sets the dead key flag */
|
|
214
|
+
get deadKey() {
|
|
215
|
+
return this._deadKey;
|
|
216
|
+
}
|
|
217
|
+
set deadKey(flag) {
|
|
218
|
+
this._deadKey = flag;
|
|
219
|
+
}
|
|
220
|
+
/** Gets or sets the highlight text */
|
|
221
|
+
get highlightedText() {
|
|
222
|
+
return this._highlightedText;
|
|
223
|
+
}
|
|
224
|
+
set highlightedText(text) {
|
|
225
|
+
if (this._highlightedText === text) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
this._highlightedText = text;
|
|
229
|
+
this._markAsDirty();
|
|
230
|
+
}
|
|
231
|
+
/** Gets or sets if the current key should be added */
|
|
232
|
+
get addKey() {
|
|
233
|
+
return this._addKey;
|
|
234
|
+
}
|
|
235
|
+
set addKey(flag) {
|
|
236
|
+
this._addKey = flag;
|
|
237
|
+
}
|
|
238
|
+
/** Gets or sets the value of the current key being entered */
|
|
239
|
+
get currentKey() {
|
|
240
|
+
return this._currentKey;
|
|
241
|
+
}
|
|
242
|
+
set currentKey(key) {
|
|
243
|
+
this._currentKey = key;
|
|
244
|
+
}
|
|
245
|
+
/** Gets or sets the text displayed in the control */
|
|
246
|
+
get text() {
|
|
247
|
+
return this._textWrapper.text;
|
|
248
|
+
}
|
|
249
|
+
set text(value) {
|
|
250
|
+
const valueAsString = value.toString(); // Forcing convertion
|
|
251
|
+
if (!this._textWrapper) {
|
|
252
|
+
this._textWrapper = new TextWrapper();
|
|
253
|
+
}
|
|
254
|
+
if (this._textWrapper.text === valueAsString) {
|
|
255
|
+
return;
|
|
256
|
+
}
|
|
257
|
+
this._textWrapper.text = valueAsString;
|
|
258
|
+
this._textHasChanged();
|
|
259
|
+
}
|
|
260
|
+
_textHasChanged() {
|
|
340
261
|
this._markAsDirty();
|
|
341
262
|
this.onTextChangedObservable.notifyObservers(this);
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
},
|
|
357
|
-
enumerable: false,
|
|
358
|
-
configurable: true
|
|
359
|
-
});
|
|
263
|
+
}
|
|
264
|
+
/** Gets or sets control width */
|
|
265
|
+
get width() {
|
|
266
|
+
return this._width.toString(this._host);
|
|
267
|
+
}
|
|
268
|
+
set width(value) {
|
|
269
|
+
if (this._width.toString(this._host) === value) {
|
|
270
|
+
return;
|
|
271
|
+
}
|
|
272
|
+
if (this._width.fromString(value)) {
|
|
273
|
+
this._markAsDirty();
|
|
274
|
+
}
|
|
275
|
+
this.autoStretchWidth = false;
|
|
276
|
+
}
|
|
360
277
|
/** @hidden */
|
|
361
|
-
|
|
278
|
+
onBlur() {
|
|
362
279
|
this._isFocused = false;
|
|
363
280
|
this._scrollLeft = null;
|
|
364
281
|
this._cursorOffset = 0;
|
|
@@ -369,14 +286,13 @@ var InputText = /** @class */ (function (_super) {
|
|
|
369
286
|
if (this._onClipboardObserver) {
|
|
370
287
|
this._host.onClipboardObservable.remove(this._onClipboardObserver);
|
|
371
288
|
}
|
|
372
|
-
|
|
289
|
+
const scene = this._host.getScene();
|
|
373
290
|
if (this._onPointerDblTapObserver && scene) {
|
|
374
291
|
scene.onPointerObservable.remove(this._onPointerDblTapObserver);
|
|
375
292
|
}
|
|
376
|
-
}
|
|
293
|
+
}
|
|
377
294
|
/** @hidden */
|
|
378
|
-
|
|
379
|
-
var _this = this;
|
|
295
|
+
onFocus() {
|
|
380
296
|
if (!this._isEnabled) {
|
|
381
297
|
return;
|
|
382
298
|
}
|
|
@@ -387,7 +303,7 @@ var InputText = /** @class */ (function (_super) {
|
|
|
387
303
|
this._markAsDirty();
|
|
388
304
|
this.onFocusObservable.notifyObservers(this);
|
|
389
305
|
if (this._focusedBy === "touch" && !this.disableMobilePrompt) {
|
|
390
|
-
|
|
306
|
+
const value = prompt(this.promptMessage);
|
|
391
307
|
if (value !== null) {
|
|
392
308
|
this.text = value;
|
|
393
309
|
}
|
|
@@ -395,73 +311,73 @@ var InputText = /** @class */ (function (_super) {
|
|
|
395
311
|
return;
|
|
396
312
|
}
|
|
397
313
|
this._host.registerClipboardEvents();
|
|
398
|
-
this._onClipboardObserver = this._host.onClipboardObservable.add(
|
|
314
|
+
this._onClipboardObserver = this._host.onClipboardObservable.add((clipboardInfo) => {
|
|
399
315
|
// process clipboard event, can be configured.
|
|
400
316
|
switch (clipboardInfo.type) {
|
|
401
317
|
case ClipboardEventTypes.COPY:
|
|
402
|
-
|
|
403
|
-
|
|
318
|
+
this._onCopyText(clipboardInfo.event);
|
|
319
|
+
this.onTextCopyObservable.notifyObservers(this);
|
|
404
320
|
break;
|
|
405
321
|
case ClipboardEventTypes.CUT:
|
|
406
|
-
|
|
407
|
-
|
|
322
|
+
this._onCutText(clipboardInfo.event);
|
|
323
|
+
this.onTextCutObservable.notifyObservers(this);
|
|
408
324
|
break;
|
|
409
325
|
case ClipboardEventTypes.PASTE:
|
|
410
|
-
|
|
411
|
-
|
|
326
|
+
this._onPasteText(clipboardInfo.event);
|
|
327
|
+
this.onTextPasteObservable.notifyObservers(this);
|
|
412
328
|
break;
|
|
413
329
|
default:
|
|
414
330
|
return;
|
|
415
331
|
}
|
|
416
332
|
});
|
|
417
|
-
|
|
333
|
+
const scene = this._host.getScene();
|
|
418
334
|
if (scene) {
|
|
419
335
|
//register the pointer double tap event
|
|
420
|
-
this._onPointerDblTapObserver = scene.onPointerObservable.add(
|
|
421
|
-
if (!
|
|
336
|
+
this._onPointerDblTapObserver = scene.onPointerObservable.add((pointerInfo) => {
|
|
337
|
+
if (!this._isFocused) {
|
|
422
338
|
return;
|
|
423
339
|
}
|
|
424
340
|
if (pointerInfo.type === PointerEventTypes.POINTERDOUBLETAP) {
|
|
425
|
-
|
|
341
|
+
this._processDblClick(pointerInfo);
|
|
426
342
|
}
|
|
427
343
|
});
|
|
428
344
|
}
|
|
429
345
|
if (this._onFocusSelectAll) {
|
|
430
346
|
this._selectAllText();
|
|
431
347
|
}
|
|
432
|
-
}
|
|
348
|
+
}
|
|
433
349
|
/**
|
|
434
350
|
* Function to focus an inputText programmatically
|
|
435
351
|
*/
|
|
436
|
-
|
|
352
|
+
focus() {
|
|
437
353
|
this._host.moveFocusToControl(this);
|
|
438
|
-
}
|
|
354
|
+
}
|
|
439
355
|
/**
|
|
440
356
|
* Function to unfocus an inputText programmatically
|
|
441
357
|
*/
|
|
442
|
-
|
|
358
|
+
blur() {
|
|
443
359
|
this._host.focusedControl = null;
|
|
444
|
-
}
|
|
445
|
-
|
|
360
|
+
}
|
|
361
|
+
_getTypeName() {
|
|
446
362
|
return "InputText";
|
|
447
|
-
}
|
|
363
|
+
}
|
|
448
364
|
/**
|
|
449
365
|
* Function called to get the list of controls that should not steal the focus from this control
|
|
450
366
|
* @returns an array of controls
|
|
451
367
|
*/
|
|
452
|
-
|
|
368
|
+
keepsFocusWith() {
|
|
453
369
|
if (!this._connectedVirtualKeyboard) {
|
|
454
370
|
return null;
|
|
455
371
|
}
|
|
456
372
|
return [this._connectedVirtualKeyboard];
|
|
457
|
-
}
|
|
373
|
+
}
|
|
458
374
|
/**
|
|
459
375
|
* @param keyCode
|
|
460
376
|
* @param key
|
|
461
377
|
* @param evt
|
|
462
378
|
* @hidden
|
|
463
379
|
*/
|
|
464
|
-
|
|
380
|
+
processKey(keyCode, key, evt) {
|
|
465
381
|
if (this.isReadOnly) {
|
|
466
382
|
return;
|
|
467
383
|
}
|
|
@@ -504,7 +420,7 @@ var InputText = /** @class */ (function (_super) {
|
|
|
504
420
|
this.text = this._textWrapper.substr(0, this._textWrapper.length - 1);
|
|
505
421
|
}
|
|
506
422
|
else {
|
|
507
|
-
|
|
423
|
+
const deletePosition = this._textWrapper.length - this._cursorOffset;
|
|
508
424
|
if (deletePosition > 0) {
|
|
509
425
|
this._textWrapper.removePart(deletePosition - 1, deletePosition);
|
|
510
426
|
this._textHasChanged();
|
|
@@ -527,7 +443,7 @@ var InputText = /** @class */ (function (_super) {
|
|
|
527
443
|
return;
|
|
528
444
|
}
|
|
529
445
|
if (this._textWrapper.text && this._textWrapper.length > 0 && this._cursorOffset > 0) {
|
|
530
|
-
|
|
446
|
+
const deletePosition = this._textWrapper.length - this._cursorOffset;
|
|
531
447
|
this._textWrapper.removePart(deletePosition, deletePosition + 1);
|
|
532
448
|
this._textHasChanged();
|
|
533
449
|
this._cursorOffset--;
|
|
@@ -731,18 +647,18 @@ var InputText = /** @class */ (function (_super) {
|
|
|
731
647
|
this.text += key;
|
|
732
648
|
}
|
|
733
649
|
else {
|
|
734
|
-
|
|
650
|
+
const insertPosition = this._textWrapper.length - this._cursorOffset;
|
|
735
651
|
this._textWrapper.removePart(insertPosition, insertPosition, key);
|
|
736
652
|
this._textHasChanged();
|
|
737
653
|
}
|
|
738
654
|
}
|
|
739
655
|
}
|
|
740
|
-
}
|
|
656
|
+
}
|
|
741
657
|
/**
|
|
742
658
|
* @param offset
|
|
743
659
|
* @hidden
|
|
744
660
|
*/
|
|
745
|
-
|
|
661
|
+
_updateValueFromCursorIndex(offset) {
|
|
746
662
|
//update the cursor
|
|
747
663
|
this._blinkIsEven = false;
|
|
748
664
|
if (this._cursorIndex === -1) {
|
|
@@ -765,17 +681,17 @@ var InputText = /** @class */ (function (_super) {
|
|
|
765
681
|
}
|
|
766
682
|
this._isTextHighlightOn = true;
|
|
767
683
|
this._markAsDirty();
|
|
768
|
-
}
|
|
684
|
+
}
|
|
769
685
|
/**
|
|
770
686
|
* @param evt
|
|
771
687
|
* @hidden
|
|
772
688
|
*/
|
|
773
689
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
774
|
-
|
|
690
|
+
_processDblClick(evt) {
|
|
775
691
|
//pre-find the start and end index of the word under cursor, speeds up the rendering
|
|
776
692
|
this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
|
|
777
693
|
this._endHighlightIndex = this._startHighlightIndex;
|
|
778
|
-
|
|
694
|
+
let moveLeft, moveRight;
|
|
779
695
|
do {
|
|
780
696
|
moveRight = this._endHighlightIndex < this._textWrapper.length && this._textWrapper.isWord(this._endHighlightIndex) ? ++this._endHighlightIndex : 0;
|
|
781
697
|
moveLeft = this._startHighlightIndex > 0 && this._textWrapper.isWord(this._startHighlightIndex - 1) ? --this._startHighlightIndex : 0;
|
|
@@ -787,9 +703,9 @@ var InputText = /** @class */ (function (_super) {
|
|
|
787
703
|
this._blinkIsEven = true;
|
|
788
704
|
this._cursorIndex = -1;
|
|
789
705
|
this._markAsDirty();
|
|
790
|
-
}
|
|
706
|
+
}
|
|
791
707
|
/** @hidden */
|
|
792
|
-
|
|
708
|
+
_selectAllText() {
|
|
793
709
|
this._blinkIsEven = true;
|
|
794
710
|
this._isTextHighlightOn = true;
|
|
795
711
|
this._startHighlightIndex = 0;
|
|
@@ -797,34 +713,34 @@ var InputText = /** @class */ (function (_super) {
|
|
|
797
713
|
this._cursorOffset = this._textWrapper.length;
|
|
798
714
|
this._cursorIndex = -1;
|
|
799
715
|
this._markAsDirty();
|
|
800
|
-
}
|
|
716
|
+
}
|
|
801
717
|
/**
|
|
802
718
|
* Handles the keyboard event
|
|
803
719
|
* @param evt Defines the KeyboardEvent
|
|
804
720
|
*/
|
|
805
|
-
|
|
721
|
+
processKeyboard(evt) {
|
|
806
722
|
// process pressed key
|
|
807
723
|
this.processKey(evt.keyCode, evt.key, evt);
|
|
808
724
|
this.onKeyboardEventProcessedObservable.notifyObservers(evt);
|
|
809
|
-
}
|
|
725
|
+
}
|
|
810
726
|
/**
|
|
811
727
|
* @param ev
|
|
812
728
|
* @hidden
|
|
813
729
|
*/
|
|
814
|
-
|
|
730
|
+
_onCopyText(ev) {
|
|
815
731
|
this._isTextHighlightOn = false;
|
|
816
732
|
//when write permission to clipbaord data is denied
|
|
817
733
|
try {
|
|
818
734
|
ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
|
|
819
735
|
}
|
|
820
|
-
catch
|
|
736
|
+
catch { } //pass
|
|
821
737
|
this._host.clipboardData = this._highlightedText;
|
|
822
|
-
}
|
|
738
|
+
}
|
|
823
739
|
/**
|
|
824
740
|
* @param ev
|
|
825
741
|
* @hidden
|
|
826
742
|
*/
|
|
827
|
-
|
|
743
|
+
_onCutText(ev) {
|
|
828
744
|
if (!this._highlightedText) {
|
|
829
745
|
return;
|
|
830
746
|
}
|
|
@@ -836,16 +752,16 @@ var InputText = /** @class */ (function (_super) {
|
|
|
836
752
|
try {
|
|
837
753
|
ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
|
|
838
754
|
}
|
|
839
|
-
catch
|
|
755
|
+
catch { } //pass
|
|
840
756
|
this._host.clipboardData = this._highlightedText;
|
|
841
757
|
this._highlightedText = "";
|
|
842
|
-
}
|
|
758
|
+
}
|
|
843
759
|
/**
|
|
844
760
|
* @param ev
|
|
845
761
|
* @hidden
|
|
846
762
|
*/
|
|
847
|
-
|
|
848
|
-
|
|
763
|
+
_onPasteText(ev) {
|
|
764
|
+
let data = "";
|
|
849
765
|
if (ev.clipboardData && ev.clipboardData.types.indexOf("text/plain") !== -1) {
|
|
850
766
|
data = ev.clipboardData.getData("text/plain");
|
|
851
767
|
}
|
|
@@ -853,12 +769,11 @@ var InputText = /** @class */ (function (_super) {
|
|
|
853
769
|
//get the cached data; returns blank string by default
|
|
854
770
|
data = this._host.clipboardData;
|
|
855
771
|
}
|
|
856
|
-
|
|
772
|
+
const insertPosition = this._textWrapper.length - this._cursorOffset;
|
|
857
773
|
this._textWrapper.removePart(insertPosition, insertPosition, data);
|
|
858
774
|
this._textHasChanged();
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
var _this = this;
|
|
775
|
+
}
|
|
776
|
+
_draw(context) {
|
|
862
777
|
context.save();
|
|
863
778
|
this._applyStates(context);
|
|
864
779
|
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
|
|
@@ -887,11 +802,11 @@ var InputText = /** @class */ (function (_super) {
|
|
|
887
802
|
this._fontOffset = Control._GetFontOffset(context.font);
|
|
888
803
|
}
|
|
889
804
|
// Text
|
|
890
|
-
|
|
805
|
+
const clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._tempParentMeasure.width);
|
|
891
806
|
if (this.color) {
|
|
892
807
|
context.fillStyle = this.color;
|
|
893
808
|
}
|
|
894
|
-
|
|
809
|
+
let text = this._beforeRenderText(this._textWrapper);
|
|
895
810
|
if (!this._isFocused && !this._textWrapper.text && this._placeholderText) {
|
|
896
811
|
text = new TextWrapper();
|
|
897
812
|
text.text = this._placeholderText;
|
|
@@ -900,19 +815,19 @@ var InputText = /** @class */ (function (_super) {
|
|
|
900
815
|
}
|
|
901
816
|
}
|
|
902
817
|
this._textWidth = context.measureText(text.text).width;
|
|
903
|
-
|
|
818
|
+
const marginWidth = this._margin.getValueInPixel(this._host, this._tempParentMeasure.width) * 2;
|
|
904
819
|
if (this._autoStretchWidth) {
|
|
905
820
|
this.width = Math.min(this._maxWidth.getValueInPixel(this._host, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
|
|
906
821
|
this._autoStretchWidth = true; // setting the width will have reset _autoStretchWidth to false!
|
|
907
822
|
}
|
|
908
|
-
|
|
909
|
-
|
|
823
|
+
const rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
|
|
824
|
+
const availableWidth = this._width.getValueInPixel(this._host, this._tempParentMeasure.width) - marginWidth;
|
|
910
825
|
context.save();
|
|
911
826
|
context.beginPath();
|
|
912
827
|
context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);
|
|
913
828
|
context.clip();
|
|
914
829
|
if (this._isFocused && this._textWidth > availableWidth) {
|
|
915
|
-
|
|
830
|
+
const textLeft = clipTextLeft - this._textWidth + availableWidth;
|
|
916
831
|
if (!this._scrollLeft) {
|
|
917
832
|
this._scrollLeft = textLeft;
|
|
918
833
|
}
|
|
@@ -925,11 +840,11 @@ var InputText = /** @class */ (function (_super) {
|
|
|
925
840
|
if (this._isFocused) {
|
|
926
841
|
// Need to move cursor
|
|
927
842
|
if (this._clickedCoordinate) {
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
843
|
+
const rightPosition = this._scrollLeft + this._textWidth;
|
|
844
|
+
const absoluteCursorPosition = rightPosition - this._clickedCoordinate;
|
|
845
|
+
let currentSize = 0;
|
|
931
846
|
this._cursorOffset = 0;
|
|
932
|
-
|
|
847
|
+
let previousDist = 0;
|
|
933
848
|
do {
|
|
934
849
|
if (this._cursorOffset) {
|
|
935
850
|
previousDist = Math.abs(absoluteCursorPosition - currentSize);
|
|
@@ -946,9 +861,9 @@ var InputText = /** @class */ (function (_super) {
|
|
|
946
861
|
}
|
|
947
862
|
// Render cursor
|
|
948
863
|
if (!this._blinkIsEven) {
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
864
|
+
const cursorOffsetText = text.substr(text.length - this._cursorOffset);
|
|
865
|
+
const cursorOffsetWidth = context.measureText(cursorOffsetText).width;
|
|
866
|
+
let cursorLeft = this._scrollLeft + this._textWidth - cursorOffsetWidth;
|
|
952
867
|
if (cursorLeft < clipTextLeft) {
|
|
953
868
|
this._scrollLeft += clipTextLeft - cursorLeft;
|
|
954
869
|
cursorLeft = clipTextLeft;
|
|
@@ -964,17 +879,17 @@ var InputText = /** @class */ (function (_super) {
|
|
|
964
879
|
}
|
|
965
880
|
}
|
|
966
881
|
clearTimeout(this._blinkTimeout);
|
|
967
|
-
this._blinkTimeout = setTimeout(
|
|
968
|
-
|
|
969
|
-
|
|
882
|
+
this._blinkTimeout = setTimeout(() => {
|
|
883
|
+
this._blinkIsEven = !this._blinkIsEven;
|
|
884
|
+
this._markAsDirty();
|
|
970
885
|
}, 500);
|
|
971
886
|
//show the highlighted text
|
|
972
887
|
if (this._isTextHighlightOn) {
|
|
973
888
|
clearTimeout(this._blinkTimeout);
|
|
974
|
-
|
|
975
|
-
|
|
889
|
+
const highlightCursorOffsetWidth = context.measureText(text.substring(this._startHighlightIndex)).width;
|
|
890
|
+
let highlightCursorLeft = this._scrollLeft + this._textWidth - highlightCursorOffsetWidth;
|
|
976
891
|
this._highlightedText = text.substring(this._startHighlightIndex, this._endHighlightIndex);
|
|
977
|
-
|
|
892
|
+
let width = context.measureText(text.substring(this._startHighlightIndex, this._endHighlightIndex)).width;
|
|
978
893
|
if (highlightCursorLeft < clipTextLeft) {
|
|
979
894
|
width = width - (clipTextLeft - highlightCursorLeft);
|
|
980
895
|
if (!width) {
|
|
@@ -1008,9 +923,9 @@ var InputText = /** @class */ (function (_super) {
|
|
|
1008
923
|
context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
|
|
1009
924
|
}
|
|
1010
925
|
context.restore();
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
if (!
|
|
926
|
+
}
|
|
927
|
+
_onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
|
|
928
|
+
if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
|
|
1014
929
|
return false;
|
|
1015
930
|
}
|
|
1016
931
|
if (this.isReadOnly) {
|
|
@@ -1034,25 +949,25 @@ var InputText = /** @class */ (function (_super) {
|
|
|
1034
949
|
}
|
|
1035
950
|
this._host.focusedControl = this;
|
|
1036
951
|
return true;
|
|
1037
|
-
}
|
|
1038
|
-
|
|
952
|
+
}
|
|
953
|
+
_onPointerMove(target, coordinates, pointerId, pi) {
|
|
1039
954
|
if (this._host.focusedControl === this && this._isPointerDown && !this.isReadOnly) {
|
|
1040
955
|
this._clickedCoordinate = coordinates.x;
|
|
1041
956
|
this._markAsDirty();
|
|
1042
957
|
this._updateValueFromCursorIndex(this._cursorOffset);
|
|
1043
958
|
}
|
|
1044
|
-
|
|
1045
|
-
}
|
|
1046
|
-
|
|
959
|
+
super._onPointerMove(target, coordinates, pointerId, pi);
|
|
960
|
+
}
|
|
961
|
+
_onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick) {
|
|
1047
962
|
this._isPointerDown = false;
|
|
1048
963
|
delete this._host._capturingControl[pointerId];
|
|
1049
|
-
|
|
1050
|
-
}
|
|
1051
|
-
|
|
964
|
+
super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick);
|
|
965
|
+
}
|
|
966
|
+
_beforeRenderText(textWrapper) {
|
|
1052
967
|
return textWrapper;
|
|
1053
|
-
}
|
|
1054
|
-
|
|
1055
|
-
|
|
968
|
+
}
|
|
969
|
+
dispose() {
|
|
970
|
+
super.dispose();
|
|
1056
971
|
this.onBlurObservable.clear();
|
|
1057
972
|
this.onFocusObservable.clear();
|
|
1058
973
|
this.onTextChangedObservable.clear();
|
|
@@ -1061,60 +976,58 @@ var InputText = /** @class */ (function (_super) {
|
|
|
1061
976
|
this.onTextPasteObservable.clear();
|
|
1062
977
|
this.onTextHighlightObservable.clear();
|
|
1063
978
|
this.onKeyboardEventProcessedObservable.clear();
|
|
1064
|
-
}
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
}(Control));
|
|
1118
|
-
export { InputText };
|
|
979
|
+
}
|
|
980
|
+
}
|
|
981
|
+
__decorate([
|
|
982
|
+
serialize()
|
|
983
|
+
], InputText.prototype, "promptMessage", void 0);
|
|
984
|
+
__decorate([
|
|
985
|
+
serialize()
|
|
986
|
+
], InputText.prototype, "disableMobilePrompt", void 0);
|
|
987
|
+
__decorate([
|
|
988
|
+
serialize()
|
|
989
|
+
], InputText.prototype, "maxWidth", null);
|
|
990
|
+
__decorate([
|
|
991
|
+
serialize()
|
|
992
|
+
], InputText.prototype, "highligherOpacity", null);
|
|
993
|
+
__decorate([
|
|
994
|
+
serialize()
|
|
995
|
+
], InputText.prototype, "onFocusSelectAll", null);
|
|
996
|
+
__decorate([
|
|
997
|
+
serialize()
|
|
998
|
+
], InputText.prototype, "textHighlightColor", null);
|
|
999
|
+
__decorate([
|
|
1000
|
+
serialize()
|
|
1001
|
+
], InputText.prototype, "margin", null);
|
|
1002
|
+
__decorate([
|
|
1003
|
+
serialize()
|
|
1004
|
+
], InputText.prototype, "autoStretchWidth", null);
|
|
1005
|
+
__decorate([
|
|
1006
|
+
serialize()
|
|
1007
|
+
], InputText.prototype, "thickness", null);
|
|
1008
|
+
__decorate([
|
|
1009
|
+
serialize()
|
|
1010
|
+
], InputText.prototype, "focusedBackground", null);
|
|
1011
|
+
__decorate([
|
|
1012
|
+
serialize()
|
|
1013
|
+
], InputText.prototype, "focusedColor", null);
|
|
1014
|
+
__decorate([
|
|
1015
|
+
serialize()
|
|
1016
|
+
], InputText.prototype, "background", null);
|
|
1017
|
+
__decorate([
|
|
1018
|
+
serialize()
|
|
1019
|
+
], InputText.prototype, "placeholderColor", null);
|
|
1020
|
+
__decorate([
|
|
1021
|
+
serialize()
|
|
1022
|
+
], InputText.prototype, "placeholderText", null);
|
|
1023
|
+
__decorate([
|
|
1024
|
+
serialize()
|
|
1025
|
+
], InputText.prototype, "deadKey", null);
|
|
1026
|
+
__decorate([
|
|
1027
|
+
serialize()
|
|
1028
|
+
], InputText.prototype, "text", null);
|
|
1029
|
+
__decorate([
|
|
1030
|
+
serialize()
|
|
1031
|
+
], InputText.prototype, "width", null);
|
|
1119
1032
|
RegisterClass("BABYLON.GUI.InputText", InputText);
|
|
1120
1033
|
//# sourceMappingURL=inputText.js.map
|