@babylonjs/gui 9.15.0 → 9.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/2D/controls/checkbox.pure.js +164 -153
  2. package/2D/controls/checkbox.pure.js.map +1 -1
  3. package/2D/controls/colorpicker.pure.js +1300 -1289
  4. package/2D/controls/colorpicker.pure.js.map +1 -1
  5. package/2D/controls/container.pure.js +597 -582
  6. package/2D/controls/container.pure.js.map +1 -1
  7. package/2D/controls/control.pure.js +2474 -2434
  8. package/2D/controls/control.pure.js.map +1 -1
  9. package/2D/controls/displayGrid.pure.js +201 -190
  10. package/2D/controls/displayGrid.pure.js.map +1 -1
  11. package/2D/controls/ellipse.pure.js +96 -85
  12. package/2D/controls/ellipse.pure.js.map +1 -1
  13. package/2D/controls/grid.pure.js +511 -500
  14. package/2D/controls/grid.pure.js.map +1 -1
  15. package/2D/controls/image.pure.js +888 -877
  16. package/2D/controls/image.pure.js.map +1 -1
  17. package/2D/controls/inputText.pure.js +988 -973
  18. package/2D/controls/inputText.pure.js.map +1 -1
  19. package/2D/controls/inputTextArea.pure.js +955 -944
  20. package/2D/controls/inputTextArea.pure.js.map +1 -1
  21. package/2D/controls/line.pure.js +237 -226
  22. package/2D/controls/line.pure.js.map +1 -1
  23. package/2D/controls/multiLine.pure.js +233 -222
  24. package/2D/controls/multiLine.pure.js.map +1 -1
  25. package/2D/controls/radioButton.pure.js +182 -169
  26. package/2D/controls/radioButton.pure.js.map +1 -1
  27. package/2D/controls/rectangle.pure.js +211 -200
  28. package/2D/controls/rectangle.pure.js.map +1 -1
  29. package/2D/controls/scrollViewers/scrollViewer.pure.js +579 -567
  30. package/2D/controls/scrollViewers/scrollViewer.pure.js.map +1 -1
  31. package/2D/controls/sliders/baseSlider.js +291 -280
  32. package/2D/controls/sliders/baseSlider.js.map +1 -1
  33. package/2D/controls/sliders/imageBasedSlider.pure.js +158 -147
  34. package/2D/controls/sliders/imageBasedSlider.pure.js.map +1 -1
  35. package/2D/controls/sliders/imageScrollBar.js +237 -223
  36. package/2D/controls/sliders/imageScrollBar.js.map +1 -1
  37. package/2D/controls/sliders/scrollBar.pure.js +169 -158
  38. package/2D/controls/sliders/scrollBar.pure.js.map +1 -1
  39. package/2D/controls/sliders/slider.pure.js +251 -240
  40. package/2D/controls/sliders/slider.pure.js.map +1 -1
  41. package/2D/controls/stackPanel.pure.js +236 -221
  42. package/2D/controls/stackPanel.pure.js.map +1 -1
  43. package/2D/controls/textBlock.pure.js +637 -626
  44. package/2D/controls/textBlock.pure.js.map +1 -1
  45. package/3D/materials/fluent/fluentMaterial.pure.d.ts +4 -4
  46. package/3D/materials/fluent/fluentMaterial.pure.js +322 -273
  47. package/3D/materials/fluent/fluentMaterial.pure.js.map +1 -1
  48. package/3D/materials/fluentBackplate/fluentBackplateMaterial.pure.js +510 -454
  49. package/3D/materials/fluentBackplate/fluentBackplateMaterial.pure.js.map +1 -1
  50. package/3D/materials/fluentButton/fluentButtonMaterial.pure.js +612 -529
  51. package/3D/materials/fluentButton/fluentButtonMaterial.pure.js.map +1 -1
  52. package/3D/materials/mrdl/mrdlBackglowMaterial.pure.js +313 -274
  53. package/3D/materials/mrdl/mrdlBackglowMaterial.pure.js.map +1 -1
  54. package/3D/materials/mrdl/mrdlBackplateMaterial.pure.js +462 -405
  55. package/3D/materials/mrdl/mrdlBackplateMaterial.pure.js.map +1 -1
  56. package/3D/materials/mrdl/mrdlFrontplateMaterial.pure.js +583 -501
  57. package/3D/materials/mrdl/mrdlFrontplateMaterial.pure.js.map +1 -1
  58. package/3D/materials/mrdl/mrdlInnerquadMaterial.pure.js +226 -203
  59. package/3D/materials/mrdl/mrdlInnerquadMaterial.pure.js.map +1 -1
  60. package/3D/materials/mrdl/mrdlSliderBarMaterial.pure.js +961 -825
  61. package/3D/materials/mrdl/mrdlSliderBarMaterial.pure.js.map +1 -1
  62. package/3D/materials/mrdl/mrdlSliderThumbMaterial.pure.js +961 -825
  63. package/3D/materials/mrdl/mrdlSliderThumbMaterial.pure.js.map +1 -1
  64. package/package.json +2 -2
@@ -1,4 +1,4 @@
1
- import { __decorate } from "@babylonjs/core/tslib.es6.js";
1
+ import { __esDecorate, __runInitializers } 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,522 +10,690 @@ import { serialize } from "@babylonjs/core/Misc/decorators.js";
10
10
  /**
11
11
  * Class used to create input text control
12
12
  */
13
- export class InputText extends Control {
14
- /**
15
- * Gets or sets outlineWidth of the text to display
16
- */
17
- get outlineWidth() {
18
- return this._outlineWidth;
19
- }
20
- set outlineWidth(value) {
21
- if (this._outlineWidth === value) {
22
- return;
23
- }
24
- this._outlineWidth = value;
25
- this._markAsDirty();
26
- }
27
- /**
28
- * Gets or sets outlineColor of the text to display
29
- */
30
- get outlineColor() {
31
- return this._outlineColor;
32
- }
33
- set outlineColor(value) {
34
- if (this._outlineColor === value) {
35
- return;
36
- }
37
- this._outlineColor = value;
38
- this._markAsDirty();
39
- }
40
- /** Gets or sets the maximum width allowed by the control */
41
- get maxWidth() {
42
- return this._maxWidth.toString(this._host);
43
- }
44
- /** Gets the maximum width allowed by the control in pixels */
45
- get maxWidthInPixels() {
46
- return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
47
- }
48
- set maxWidth(value) {
49
- if (this._maxWidth.toString(this._host) === value) {
50
- return;
51
- }
52
- if (this._maxWidth.fromString(value)) {
53
- this._markAsDirty();
54
- }
55
- }
56
- /**
57
- * Gets or sets the text highlighter transparency; default: 0.4
58
- * @deprecated Please use highlighterOpacity instead
59
- */
60
- get highligherOpacity() {
61
- return this.highlighterOpacity;
62
- }
63
- set highligherOpacity(value) {
64
- this.highlighterOpacity = value;
65
- }
66
- /**
67
- * Gets or sets the text highlighter transparency; default: 0.4
68
- */
69
- get highlighterOpacity() {
70
- return this._highlighterOpacity;
71
- }
72
- set highlighterOpacity(value) {
73
- if (this._highlighterOpacity === value) {
74
- return;
75
- }
76
- this._highlighterOpacity = value;
77
- this._markAsDirty();
78
- }
79
- /** Gets or sets a boolean indicating whether to select complete text by default on input focus */
80
- get onFocusSelectAll() {
81
- return this._onFocusSelectAll;
82
- }
83
- set onFocusSelectAll(value) {
84
- if (this._onFocusSelectAll === value) {
85
- return;
86
- }
87
- this._onFocusSelectAll = value;
88
- this._markAsDirty();
89
- }
90
- /** Gets or sets the text hightlight color */
91
- get textHighlightColor() {
92
- return this._textHighlightColor;
93
- }
94
- set textHighlightColor(value) {
95
- if (this._textHighlightColor === value) {
96
- return;
97
- }
98
- this._textHighlightColor = value;
99
- this._markAsDirty();
100
- }
101
- /** Gets or sets control margin */
102
- get margin() {
103
- return this._margin.toString(this._host);
104
- }
105
- /** Gets control margin in pixels */
106
- get marginInPixels() {
107
- return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
108
- }
109
- set margin(value) {
110
- if (this._margin.toString(this._host) === value) {
111
- return;
112
- }
113
- if (this._margin.fromString(value)) {
114
- this._markAsDirty();
115
- }
116
- }
117
- /** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
118
- get autoStretchWidth() {
119
- return this._autoStretchWidth;
120
- }
121
- set autoStretchWidth(value) {
122
- if (this._autoStretchWidth === value) {
123
- return;
124
- }
125
- this._autoStretchWidth = value;
126
- this._markAsDirty();
127
- }
128
- /** Gets or sets border thickness */
129
- get thickness() {
130
- return this._thickness;
131
- }
132
- set thickness(value) {
133
- if (this._thickness === value) {
134
- return;
135
- }
136
- this._thickness = value;
137
- this._markAsDirty();
138
- }
139
- /** Gets or sets the background color when focused */
140
- get focusedBackground() {
141
- return this._focusedBackground;
142
- }
143
- set focusedBackground(value) {
144
- if (this._focusedBackground === value) {
145
- return;
146
- }
147
- this._focusedBackground = value;
148
- this._markAsDirty();
149
- }
150
- /** Gets or sets the background color when focused */
151
- set focusedColor(value) {
152
- if (this._focusedColor === value) {
153
- return;
154
- }
155
- this._focusedColor = value;
156
- this._markAsDirty();
157
- }
158
- /** Gets or sets the background color */
159
- get background() {
160
- return this._background;
161
- }
162
- set background(value) {
163
- if (this._background === value) {
164
- return;
165
- }
166
- this._background = value;
167
- this._markAsDirty();
168
- }
169
- /** Gets or sets the placeholder color */
170
- get placeholderColor() {
171
- return this._placeholderColor;
172
- }
173
- set placeholderColor(value) {
174
- if (this._placeholderColor === value) {
175
- return;
176
- }
177
- this._placeholderColor = value;
178
- this._markAsDirty();
179
- }
180
- /** Gets or sets the text displayed when the control is empty */
181
- get placeholderText() {
182
- return this._placeholderText;
183
- }
184
- set placeholderText(value) {
185
- if (this._placeholderText === value) {
186
- return;
187
- }
188
- this._placeholderText = value;
189
- this._markAsDirty();
190
- }
191
- /** Gets or sets the dead key. 0 to disable. */
192
- get deadKey() {
193
- return this._deadKey;
194
- }
195
- set deadKey(flag) {
196
- this._deadKey = flag;
197
- }
198
- /** Gets or sets the highlight text */
199
- get highlightedText() {
200
- return this._highlightedText;
201
- }
202
- set highlightedText(text) {
203
- if (this._highlightedText === text) {
204
- return;
205
- }
206
- this._highlightedText = text;
207
- this._markAsDirty();
208
- }
209
- /** Gets or sets if the current key should be added */
210
- get addKey() {
211
- return this._addKey;
212
- }
213
- set addKey(flag) {
214
- this._addKey = flag;
215
- }
216
- /** Gets or sets the value of the current key being entered */
217
- get currentKey() {
218
- return this._currentKey;
219
- }
220
- set currentKey(key) {
221
- this._currentKey = key;
222
- }
223
- /** Gets or sets the text displayed in the control */
224
- get text() {
225
- return this._textWrapper.text;
226
- }
227
- set text(value) {
228
- const valueAsString = value.toString(); // Forcing convertion
229
- if (!this._textWrapper) {
230
- this._textWrapper = new TextWrapper();
231
- }
232
- if (this._textWrapper.text === valueAsString) {
233
- return;
234
- }
235
- this._textWrapper.text = valueAsString;
236
- this._textHasChanged();
237
- }
238
- _textHasChanged() {
239
- this._markAsDirty();
240
- this.onTextChangedObservable.notifyObservers(this);
241
- }
242
- _applyStates(context) {
243
- super._applyStates(context);
244
- if (this.outlineWidth) {
245
- context.lineWidth = this.outlineWidth;
246
- context.strokeStyle = this.outlineColor;
247
- }
248
- }
249
- /** Gets or sets control width */
250
- get width() {
251
- return this._width.toString(this._host);
252
- }
253
- set width(value) {
254
- if (this._width.toString(this._host) === value && !this._autoStretchWidth) {
255
- return;
256
- }
257
- if (this._width.fromString(value)) {
258
- this._markAsDirty();
259
- }
260
- this.autoStretchWidth = false;
261
- }
262
- /**
263
- * Creates a new InputText
264
- * @param name defines the control name
265
- * @param text defines the text of the control
266
- */
267
- constructor(name, text = "") {
268
- super(name);
269
- this.name = name;
270
- this._placeholderText = "";
271
- this._background = "#222222";
272
- this._focusedBackground = "#000000";
273
- this._placeholderColor = "gray";
274
- this._thickness = 1;
275
- this._margin = new ValueAndUnit(10, ValueAndUnit.UNITMODE_PIXEL);
276
- this._autoStretchWidth = true;
277
- this._maxWidth = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
278
- this._blinkIsEven = false;
279
- this._cursorOffset = 0;
280
- this._deadKey = false;
281
- this._addKey = true;
282
- this._currentKey = "";
283
- this._isTextHighlightOn = false;
284
- this._textHighlightColor = "#d5e0ff";
285
- this._highlighterOpacity = 0.4;
286
- this._highlightedText = "";
287
- this._startHighlightIndex = 0;
288
- this._endHighlightIndex = 0;
289
- this._cursorIndex = -1;
290
- this._outlineWidth = 0;
291
- this._outlineColor = "white";
292
- this._onFocusSelectAll = false;
293
- this._isPointerDown = false;
294
- /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
295
- this.promptMessage = "Please enter text:";
296
- /** Force disable prompt on mobile device */
297
- this.disableMobilePrompt = false;
298
- /** Observable raised when the text changes */
299
- this.onTextChangedObservable = new Observable();
300
- /** Observable raised just before an entered character is to be added */
301
- this.onBeforeKeyAddObservable = new Observable();
302
- /** Observable raised when the text is highlighted */
303
- this.onTextHighlightObservable = new Observable();
304
- /** Observable raised when copy event is triggered */
305
- this.onTextCopyObservable = new Observable();
306
- /** Observable raised when cut event is triggered */
307
- this.onTextCutObservable = new Observable();
308
- /** Observable raised when paste event is triggered */
309
- this.onTextPasteObservable = new Observable();
310
- this.text = text;
311
- this.isPointerBlocker = true;
312
- this._focusedColor = "white";
313
- }
314
- /** @internal */
315
- onBlur() {
316
- this._isFocused = false;
317
- this._scrollLeft = null;
318
- this._cursorOffset = 0;
319
- clearTimeout(this._blinkTimeout);
320
- this._markAsDirty();
321
- this.onBlurObservable.notifyObservers(this);
322
- this._host.unRegisterClipboardEvents();
323
- if (this._onClipboardObserver) {
324
- this._host.onClipboardObservable.remove(this._onClipboardObserver);
325
- }
326
- const scene = this._host.getScene();
327
- if (this._onPointerDblTapObserver && scene) {
328
- scene.onPointerObservable.remove(this._onPointerDblTapObserver);
329
- }
330
- }
331
- /** @internal */
332
- onFocus() {
333
- if (!this._isEnabled) {
334
- return;
335
- }
336
- this._scrollLeft = null;
337
- this._isFocused = true;
338
- this._blinkIsEven = false;
339
- this._cursorOffset = 0;
340
- this._markAsDirty();
341
- this.onFocusObservable.notifyObservers(this);
342
- if (this._focusedBy === "touch" && !this.disableMobilePrompt) {
343
- const value = prompt(this.promptMessage);
344
- if (value !== null) {
345
- this.text = value;
346
- }
347
- this._host.focusedControl = null;
348
- return;
349
- }
350
- this._host.registerClipboardEvents();
351
- this._onClipboardObserver = this._host.onClipboardObservable.add((clipboardInfo) => {
352
- // process clipboard event, can be configured.
353
- switch (clipboardInfo.type) {
354
- case ClipboardEventTypes.COPY:
355
- this._onCopyText(clipboardInfo.event);
356
- this.onTextCopyObservable.notifyObservers(this);
357
- break;
358
- case ClipboardEventTypes.CUT:
359
- this._onCutText(clipboardInfo.event);
360
- this.onTextCutObservable.notifyObservers(this);
361
- break;
362
- case ClipboardEventTypes.PASTE:
363
- this._onPasteText(clipboardInfo.event);
364
- this.onTextPasteObservable.notifyObservers(this);
365
- break;
366
- default:
13
+ let InputText = (() => {
14
+ var _a;
15
+ let _classSuper = Control;
16
+ let _instanceExtraInitializers = [];
17
+ let _promptMessage_decorators;
18
+ let _promptMessage_initializers = [];
19
+ let _promptMessage_extraInitializers = [];
20
+ let _disableMobilePrompt_decorators;
21
+ let _disableMobilePrompt_initializers = [];
22
+ let _disableMobilePrompt_extraInitializers = [];
23
+ let _get_maxWidth_decorators;
24
+ let _get_highligherOpacity_decorators;
25
+ let _get_highlighterOpacity_decorators;
26
+ let _get_onFocusSelectAll_decorators;
27
+ let _get_textHighlightColor_decorators;
28
+ let _get_margin_decorators;
29
+ let _get_autoStretchWidth_decorators;
30
+ let _get_thickness_decorators;
31
+ let _get_focusedBackground_decorators;
32
+ let _get_background_decorators;
33
+ let _get_placeholderColor_decorators;
34
+ let _get_placeholderText_decorators;
35
+ let _get_deadKey_decorators;
36
+ let _get_text_decorators;
37
+ let _get_width_decorators;
38
+ return _a = class InputText extends _classSuper {
39
+ /**
40
+ * Gets or sets outlineWidth of the text to display
41
+ */
42
+ get outlineWidth() {
43
+ return this._outlineWidth;
44
+ }
45
+ set outlineWidth(value) {
46
+ if (this._outlineWidth === value) {
367
47
  return;
48
+ }
49
+ this._outlineWidth = value;
50
+ this._markAsDirty();
368
51
  }
369
- });
370
- const scene = this._host.getScene();
371
- if (scene) {
372
- //register the pointer double tap event
373
- this._onPointerDblTapObserver = scene.onPointerObservable.add((pointerInfo) => {
374
- if (!this._isFocused) {
52
+ /**
53
+ * Gets or sets outlineColor of the text to display
54
+ */
55
+ get outlineColor() {
56
+ return this._outlineColor;
57
+ }
58
+ set outlineColor(value) {
59
+ if (this._outlineColor === value) {
375
60
  return;
376
61
  }
377
- if (pointerInfo.type === PointerEventTypes.POINTERDOUBLETAP) {
378
- this._processDblClick(pointerInfo);
62
+ this._outlineColor = value;
63
+ this._markAsDirty();
64
+ }
65
+ /** Gets or sets the maximum width allowed by the control */
66
+ get maxWidth() {
67
+ return this._maxWidth.toString(this._host);
68
+ }
69
+ /** Gets the maximum width allowed by the control in pixels */
70
+ get maxWidthInPixels() {
71
+ return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
72
+ }
73
+ set maxWidth(value) {
74
+ if (this._maxWidth.toString(this._host) === value) {
75
+ return;
379
76
  }
380
- });
381
- }
382
- if (this._onFocusSelectAll) {
383
- this.selectAllText();
384
- }
385
- }
386
- _getTypeName() {
387
- return "InputText";
388
- }
389
- /**
390
- * Function called to get the list of controls that should not steal the focus from this control
391
- * @returns an array of controls
392
- */
393
- keepsFocusWith() {
394
- if (!this._connectedVirtualKeyboard) {
395
- return null;
396
- }
397
- return [this._connectedVirtualKeyboard];
398
- }
399
- /**
400
- * @internal
401
- */
402
- processKey(keyCode, key, evt) {
403
- if (this.isReadOnly) {
404
- return;
405
- }
406
- //return if clipboard event keys (i.e -ctr/cmd + c,v,x)
407
- if (evt && (evt.ctrlKey || evt.metaKey) && (keyCode === 67 || keyCode === 86 || keyCode === 88)) {
408
- return;
409
- }
410
- //select all
411
- if (evt && (evt.ctrlKey || evt.metaKey) && keyCode === 65) {
412
- this.selectAllText();
413
- evt.preventDefault();
414
- return;
415
- }
416
- // Specific cases
417
- switch (keyCode) {
418
- case 32: //SPACE
419
- key = " "; //ie11 key for space is "Spacebar"
420
- break;
421
- case 191: //SLASH
422
- if (evt) {
423
- evt.preventDefault();
77
+ if (this._maxWidth.fromString(value)) {
78
+ this._markAsDirty();
424
79
  }
425
- break;
426
- case 8: // BACKSPACE
427
- if (this._textWrapper.text && this._textWrapper.length > 0) {
428
- //delete the highlighted text
429
- if (this.isTextHighlightOn) {
430
- this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
431
- this._textHasChanged();
432
- this.isTextHighlightOn = false;
433
- this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
434
- this._blinkIsEven = false;
435
- if (evt) {
436
- evt.preventDefault();
437
- }
438
- return;
439
- }
440
- //delete single character
441
- if (this._cursorOffset === 0) {
442
- this.text = this._textWrapper.substring(0, this._textWrapper.length - 1);
443
- }
444
- else {
445
- const deletePosition = this._textWrapper.length - this._cursorOffset;
446
- if (deletePosition > 0) {
447
- this._textWrapper.removePart(deletePosition - 1, deletePosition);
448
- this._textHasChanged();
449
- }
450
- }
80
+ }
81
+ /**
82
+ * Gets or sets the text highlighter transparency; default: 0.4
83
+ * @deprecated Please use highlighterOpacity instead
84
+ */
85
+ get highligherOpacity() {
86
+ return this.highlighterOpacity;
87
+ }
88
+ set highligherOpacity(value) {
89
+ this.highlighterOpacity = value;
90
+ }
91
+ /**
92
+ * Gets or sets the text highlighter transparency; default: 0.4
93
+ */
94
+ get highlighterOpacity() {
95
+ return this._highlighterOpacity;
96
+ }
97
+ set highlighterOpacity(value) {
98
+ if (this._highlighterOpacity === value) {
99
+ return;
451
100
  }
452
- if (evt) {
453
- evt.preventDefault();
101
+ this._highlighterOpacity = value;
102
+ this._markAsDirty();
103
+ }
104
+ /** Gets or sets a boolean indicating whether to select complete text by default on input focus */
105
+ get onFocusSelectAll() {
106
+ return this._onFocusSelectAll;
107
+ }
108
+ set onFocusSelectAll(value) {
109
+ if (this._onFocusSelectAll === value) {
110
+ return;
454
111
  }
455
- return;
456
- case 46: // DELETE
457
- if (this.isTextHighlightOn) {
458
- this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
459
- this._textHasChanged();
460
- this.isTextHighlightOn = false;
461
- this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
462
- if (evt) {
463
- evt.preventDefault();
464
- }
112
+ this._onFocusSelectAll = value;
113
+ this._markAsDirty();
114
+ }
115
+ /** Gets or sets the text hightlight color */
116
+ get textHighlightColor() {
117
+ return this._textHighlightColor;
118
+ }
119
+ set textHighlightColor(value) {
120
+ if (this._textHighlightColor === value) {
465
121
  return;
466
122
  }
467
- if (this._textWrapper.text && this._textWrapper.length > 0 && this._cursorOffset > 0) {
468
- const deletePosition = this._textWrapper.length - this._cursorOffset;
469
- this._textWrapper.removePart(deletePosition, deletePosition + 1);
470
- this._textHasChanged();
471
- this._cursorOffset--;
123
+ this._textHighlightColor = value;
124
+ this._markAsDirty();
125
+ }
126
+ /** Gets or sets control margin */
127
+ get margin() {
128
+ return this._margin.toString(this._host);
129
+ }
130
+ /** Gets control margin in pixels */
131
+ get marginInPixels() {
132
+ return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
133
+ }
134
+ set margin(value) {
135
+ if (this._margin.toString(this._host) === value) {
136
+ return;
472
137
  }
473
- if (evt) {
474
- evt.preventDefault();
138
+ if (this._margin.fromString(value)) {
139
+ this._markAsDirty();
475
140
  }
476
- return;
477
- case 13: // RETURN
478
- this._host.focusedControl = null;
479
- this.isTextHighlightOn = false;
480
- return;
481
- case 35: // END
482
- this._cursorOffset = 0;
141
+ }
142
+ /** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
143
+ get autoStretchWidth() {
144
+ return this._autoStretchWidth;
145
+ }
146
+ set autoStretchWidth(value) {
147
+ if (this._autoStretchWidth === value) {
148
+ return;
149
+ }
150
+ this._autoStretchWidth = value;
151
+ this._markAsDirty();
152
+ }
153
+ /** Gets or sets border thickness */
154
+ get thickness() {
155
+ return this._thickness;
156
+ }
157
+ set thickness(value) {
158
+ if (this._thickness === value) {
159
+ return;
160
+ }
161
+ this._thickness = value;
162
+ this._markAsDirty();
163
+ }
164
+ /** Gets or sets the background color when focused */
165
+ get focusedBackground() {
166
+ return this._focusedBackground;
167
+ }
168
+ set focusedBackground(value) {
169
+ if (this._focusedBackground === value) {
170
+ return;
171
+ }
172
+ this._focusedBackground = value;
173
+ this._markAsDirty();
174
+ }
175
+ /** Gets or sets the background color when focused */
176
+ set focusedColor(value) {
177
+ if (this._focusedColor === value) {
178
+ return;
179
+ }
180
+ this._focusedColor = value;
181
+ this._markAsDirty();
182
+ }
183
+ /** Gets or sets the background color */
184
+ get background() {
185
+ return this._background;
186
+ }
187
+ set background(value) {
188
+ if (this._background === value) {
189
+ return;
190
+ }
191
+ this._background = value;
192
+ this._markAsDirty();
193
+ }
194
+ /** Gets or sets the placeholder color */
195
+ get placeholderColor() {
196
+ return this._placeholderColor;
197
+ }
198
+ set placeholderColor(value) {
199
+ if (this._placeholderColor === value) {
200
+ return;
201
+ }
202
+ this._placeholderColor = value;
203
+ this._markAsDirty();
204
+ }
205
+ /** Gets or sets the text displayed when the control is empty */
206
+ get placeholderText() {
207
+ return this._placeholderText;
208
+ }
209
+ set placeholderText(value) {
210
+ if (this._placeholderText === value) {
211
+ return;
212
+ }
213
+ this._placeholderText = value;
214
+ this._markAsDirty();
215
+ }
216
+ /** Gets or sets the dead key. 0 to disable. */
217
+ get deadKey() {
218
+ return this._deadKey;
219
+ }
220
+ set deadKey(flag) {
221
+ this._deadKey = flag;
222
+ }
223
+ /** Gets or sets the highlight text */
224
+ get highlightedText() {
225
+ return this._highlightedText;
226
+ }
227
+ set highlightedText(text) {
228
+ if (this._highlightedText === text) {
229
+ return;
230
+ }
231
+ this._highlightedText = text;
232
+ this._markAsDirty();
233
+ }
234
+ /** Gets or sets if the current key should be added */
235
+ get addKey() {
236
+ return this._addKey;
237
+ }
238
+ set addKey(flag) {
239
+ this._addKey = flag;
240
+ }
241
+ /** Gets or sets the value of the current key being entered */
242
+ get currentKey() {
243
+ return this._currentKey;
244
+ }
245
+ set currentKey(key) {
246
+ this._currentKey = key;
247
+ }
248
+ /** Gets or sets the text displayed in the control */
249
+ get text() {
250
+ return this._textWrapper.text;
251
+ }
252
+ set text(value) {
253
+ const valueAsString = value.toString(); // Forcing convertion
254
+ if (!this._textWrapper) {
255
+ this._textWrapper = new TextWrapper();
256
+ }
257
+ if (this._textWrapper.text === valueAsString) {
258
+ return;
259
+ }
260
+ this._textWrapper.text = valueAsString;
261
+ this._textHasChanged();
262
+ }
263
+ _textHasChanged() {
264
+ this._markAsDirty();
265
+ this.onTextChangedObservable.notifyObservers(this);
266
+ }
267
+ _applyStates(context) {
268
+ super._applyStates(context);
269
+ if (this.outlineWidth) {
270
+ context.lineWidth = this.outlineWidth;
271
+ context.strokeStyle = this.outlineColor;
272
+ }
273
+ }
274
+ /** Gets or sets control width */
275
+ get width() {
276
+ return this._width.toString(this._host);
277
+ }
278
+ set width(value) {
279
+ if (this._width.toString(this._host) === value && !this._autoStretchWidth) {
280
+ return;
281
+ }
282
+ if (this._width.fromString(value)) {
283
+ this._markAsDirty();
284
+ }
285
+ this.autoStretchWidth = false;
286
+ }
287
+ /**
288
+ * Creates a new InputText
289
+ * @param name defines the control name
290
+ * @param text defines the text of the control
291
+ */
292
+ constructor(name, text = "") {
293
+ super(name);
294
+ this.name = (__runInitializers(this, _instanceExtraInitializers), name);
295
+ this._placeholderText = "";
296
+ this._background = "#222222";
297
+ this._focusedBackground = "#000000";
298
+ this._placeholderColor = "gray";
299
+ this._thickness = 1;
300
+ this._margin = new ValueAndUnit(10, ValueAndUnit.UNITMODE_PIXEL);
301
+ this._autoStretchWidth = true;
302
+ this._maxWidth = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
483
303
  this._blinkIsEven = false;
484
- this.isTextHighlightOn = false;
304
+ this._cursorOffset = 0;
305
+ this._deadKey = false;
306
+ this._addKey = true;
307
+ this._currentKey = "";
308
+ this._isTextHighlightOn = false;
309
+ this._textHighlightColor = "#d5e0ff";
310
+ this._highlighterOpacity = 0.4;
311
+ this._highlightedText = "";
312
+ this._startHighlightIndex = 0;
313
+ this._endHighlightIndex = 0;
314
+ this._cursorIndex = -1;
315
+ this._outlineWidth = 0;
316
+ this._outlineColor = "white";
317
+ this._onFocusSelectAll = false;
318
+ this._isPointerDown = false;
319
+ /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
320
+ this.promptMessage = __runInitializers(this, _promptMessage_initializers, "Please enter text:");
321
+ /** Force disable prompt on mobile device */
322
+ this.disableMobilePrompt = (__runInitializers(this, _promptMessage_extraInitializers), __runInitializers(this, _disableMobilePrompt_initializers, false));
323
+ /** Observable raised when the text changes */
324
+ this.onTextChangedObservable = (__runInitializers(this, _disableMobilePrompt_extraInitializers), new Observable());
325
+ /** Observable raised just before an entered character is to be added */
326
+ this.onBeforeKeyAddObservable = new Observable();
327
+ /** Observable raised when the text is highlighted */
328
+ this.onTextHighlightObservable = new Observable();
329
+ /** Observable raised when copy event is triggered */
330
+ this.onTextCopyObservable = new Observable();
331
+ /** Observable raised when cut event is triggered */
332
+ this.onTextCutObservable = new Observable();
333
+ /** Observable raised when paste event is triggered */
334
+ this.onTextPasteObservable = new Observable();
335
+ this.text = text;
336
+ this.isPointerBlocker = true;
337
+ this._focusedColor = "white";
338
+ }
339
+ /** @internal */
340
+ onBlur() {
341
+ this._isFocused = false;
342
+ this._scrollLeft = null;
343
+ this._cursorOffset = 0;
344
+ clearTimeout(this._blinkTimeout);
485
345
  this._markAsDirty();
486
- return;
487
- case 36: // HOME
488
- this._cursorOffset = this._textWrapper.length;
346
+ this.onBlurObservable.notifyObservers(this);
347
+ this._host.unRegisterClipboardEvents();
348
+ if (this._onClipboardObserver) {
349
+ this._host.onClipboardObservable.remove(this._onClipboardObserver);
350
+ }
351
+ const scene = this._host.getScene();
352
+ if (this._onPointerDblTapObserver && scene) {
353
+ scene.onPointerObservable.remove(this._onPointerDblTapObserver);
354
+ }
355
+ }
356
+ /** @internal */
357
+ onFocus() {
358
+ if (!this._isEnabled) {
359
+ return;
360
+ }
361
+ this._scrollLeft = null;
362
+ this._isFocused = true;
489
363
  this._blinkIsEven = false;
490
- this.isTextHighlightOn = false;
364
+ this._cursorOffset = 0;
491
365
  this._markAsDirty();
492
- return;
493
- case 37: // LEFT
494
- this._cursorOffset++;
495
- if (this._cursorOffset > this._textWrapper.length) {
496
- this._cursorOffset = this._textWrapper.length;
366
+ this.onFocusObservable.notifyObservers(this);
367
+ if (this._focusedBy === "touch" && !this.disableMobilePrompt) {
368
+ const value = prompt(this.promptMessage);
369
+ if (value !== null) {
370
+ this.text = value;
371
+ }
372
+ this._host.focusedControl = null;
373
+ return;
497
374
  }
498
- if (evt && evt.shiftKey) {
499
- // update the cursor
500
- this._blinkIsEven = false;
501
- // shift + ctrl/cmd + <-
502
- if (evt.ctrlKey || evt.metaKey) {
503
- if (!this.isTextHighlightOn) {
504
- if (this._textWrapper.length === this._cursorOffset) {
375
+ this._host.registerClipboardEvents();
376
+ this._onClipboardObserver = this._host.onClipboardObservable.add((clipboardInfo) => {
377
+ // process clipboard event, can be configured.
378
+ switch (clipboardInfo.type) {
379
+ case ClipboardEventTypes.COPY:
380
+ this._onCopyText(clipboardInfo.event);
381
+ this.onTextCopyObservable.notifyObservers(this);
382
+ break;
383
+ case ClipboardEventTypes.CUT:
384
+ this._onCutText(clipboardInfo.event);
385
+ this.onTextCutObservable.notifyObservers(this);
386
+ break;
387
+ case ClipboardEventTypes.PASTE:
388
+ this._onPasteText(clipboardInfo.event);
389
+ this.onTextPasteObservable.notifyObservers(this);
390
+ break;
391
+ default:
392
+ return;
393
+ }
394
+ });
395
+ const scene = this._host.getScene();
396
+ if (scene) {
397
+ //register the pointer double tap event
398
+ this._onPointerDblTapObserver = scene.onPointerObservable.add((pointerInfo) => {
399
+ if (!this._isFocused) {
400
+ return;
401
+ }
402
+ if (pointerInfo.type === PointerEventTypes.POINTERDOUBLETAP) {
403
+ this._processDblClick(pointerInfo);
404
+ }
405
+ });
406
+ }
407
+ if (this._onFocusSelectAll) {
408
+ this.selectAllText();
409
+ }
410
+ }
411
+ _getTypeName() {
412
+ return "InputText";
413
+ }
414
+ /**
415
+ * Function called to get the list of controls that should not steal the focus from this control
416
+ * @returns an array of controls
417
+ */
418
+ keepsFocusWith() {
419
+ if (!this._connectedVirtualKeyboard) {
420
+ return null;
421
+ }
422
+ return [this._connectedVirtualKeyboard];
423
+ }
424
+ /**
425
+ * @internal
426
+ */
427
+ processKey(keyCode, key, evt) {
428
+ if (this.isReadOnly) {
429
+ return;
430
+ }
431
+ //return if clipboard event keys (i.e -ctr/cmd + c,v,x)
432
+ if (evt && (evt.ctrlKey || evt.metaKey) && (keyCode === 67 || keyCode === 86 || keyCode === 88)) {
433
+ return;
434
+ }
435
+ //select all
436
+ if (evt && (evt.ctrlKey || evt.metaKey) && keyCode === 65) {
437
+ this.selectAllText();
438
+ evt.preventDefault();
439
+ return;
440
+ }
441
+ // Specific cases
442
+ switch (keyCode) {
443
+ case 32: //SPACE
444
+ key = " "; //ie11 key for space is "Spacebar"
445
+ break;
446
+ case 191: //SLASH
447
+ if (evt) {
448
+ evt.preventDefault();
449
+ }
450
+ break;
451
+ case 8: // BACKSPACE
452
+ if (this._textWrapper.text && this._textWrapper.length > 0) {
453
+ //delete the highlighted text
454
+ if (this.isTextHighlightOn) {
455
+ this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
456
+ this._textHasChanged();
457
+ this.isTextHighlightOn = false;
458
+ this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
459
+ this._blinkIsEven = false;
460
+ if (evt) {
461
+ evt.preventDefault();
462
+ }
505
463
  return;
506
464
  }
465
+ //delete single character
466
+ if (this._cursorOffset === 0) {
467
+ this.text = this._textWrapper.substring(0, this._textWrapper.length - 1);
468
+ }
507
469
  else {
508
- this._endHighlightIndex = this._textWrapper.length - this._cursorOffset + 1;
470
+ const deletePosition = this._textWrapper.length - this._cursorOffset;
471
+ if (deletePosition > 0) {
472
+ this._textWrapper.removePart(deletePosition - 1, deletePosition);
473
+ this._textHasChanged();
474
+ }
509
475
  }
510
476
  }
511
- this._startHighlightIndex = 0;
512
- this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
477
+ if (evt) {
478
+ evt.preventDefault();
479
+ }
480
+ return;
481
+ case 46: // DELETE
482
+ if (this.isTextHighlightOn) {
483
+ this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
484
+ this._textHasChanged();
485
+ this.isTextHighlightOn = false;
486
+ this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
487
+ if (evt) {
488
+ evt.preventDefault();
489
+ }
490
+ return;
491
+ }
492
+ if (this._textWrapper.text && this._textWrapper.length > 0 && this._cursorOffset > 0) {
493
+ const deletePosition = this._textWrapper.length - this._cursorOffset;
494
+ this._textWrapper.removePart(deletePosition, deletePosition + 1);
495
+ this._textHasChanged();
496
+ this._cursorOffset--;
497
+ }
498
+ if (evt) {
499
+ evt.preventDefault();
500
+ }
501
+ return;
502
+ case 13: // RETURN
503
+ this._host.focusedControl = null;
504
+ this.isTextHighlightOn = false;
505
+ return;
506
+ case 35: // END
507
+ this._cursorOffset = 0;
508
+ this._blinkIsEven = false;
509
+ this.isTextHighlightOn = false;
510
+ this._markAsDirty();
511
+ return;
512
+ case 36: // HOME
513
513
  this._cursorOffset = this._textWrapper.length;
514
- this.isTextHighlightOn = true;
514
+ this._blinkIsEven = false;
515
+ this.isTextHighlightOn = false;
515
516
  this._markAsDirty();
516
517
  return;
518
+ case 37: // LEFT
519
+ this._cursorOffset++;
520
+ if (this._cursorOffset > this._textWrapper.length) {
521
+ this._cursorOffset = this._textWrapper.length;
522
+ }
523
+ if (evt && evt.shiftKey) {
524
+ // update the cursor
525
+ this._blinkIsEven = false;
526
+ // shift + ctrl/cmd + <-
527
+ if (evt.ctrlKey || evt.metaKey) {
528
+ if (!this.isTextHighlightOn) {
529
+ if (this._textWrapper.length === this._cursorOffset) {
530
+ return;
531
+ }
532
+ else {
533
+ this._endHighlightIndex = this._textWrapper.length - this._cursorOffset + 1;
534
+ }
535
+ }
536
+ this._startHighlightIndex = 0;
537
+ this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
538
+ this._cursorOffset = this._textWrapper.length;
539
+ this.isTextHighlightOn = true;
540
+ this._markAsDirty();
541
+ return;
542
+ }
543
+ //store the starting point
544
+ if (!this.isTextHighlightOn) {
545
+ this.isTextHighlightOn = true;
546
+ this._cursorIndex = this._cursorOffset >= this._textWrapper.length ? this._textWrapper.length : this._cursorOffset - 1;
547
+ }
548
+ //if text is already highlighted
549
+ else if (this._cursorIndex === -1) {
550
+ this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
551
+ this._cursorOffset = this._startHighlightIndex === 0 ? this._textWrapper.length : this._textWrapper.length - this._startHighlightIndex + 1;
552
+ }
553
+ //set the highlight indexes
554
+ if (this._cursorIndex < this._cursorOffset) {
555
+ this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
556
+ this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
557
+ }
558
+ else if (this._cursorIndex > this._cursorOffset) {
559
+ this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
560
+ this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
561
+ }
562
+ else {
563
+ this.isTextHighlightOn = false;
564
+ }
565
+ this._markAsDirty();
566
+ return;
567
+ }
568
+ if (this.isTextHighlightOn) {
569
+ this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
570
+ this.isTextHighlightOn = false;
571
+ }
572
+ if (evt && (evt.ctrlKey || evt.metaKey)) {
573
+ this._cursorOffset = this._textWrapper.length;
574
+ evt.preventDefault();
575
+ }
576
+ this._blinkIsEven = false;
577
+ this.isTextHighlightOn = false;
578
+ this._cursorIndex = -1;
579
+ this._markAsDirty();
580
+ return;
581
+ case 39: // RIGHT
582
+ this._cursorOffset--;
583
+ if (this._cursorOffset < 0) {
584
+ this._cursorOffset = 0;
585
+ }
586
+ if (evt && evt.shiftKey) {
587
+ //update the cursor
588
+ this._blinkIsEven = false;
589
+ //shift + ctrl/cmd + ->
590
+ if (evt.ctrlKey || evt.metaKey) {
591
+ if (!this.isTextHighlightOn) {
592
+ if (this._cursorOffset === 0) {
593
+ return;
594
+ }
595
+ else {
596
+ this._startHighlightIndex = this._textWrapper.length - this._cursorOffset - 1;
597
+ }
598
+ }
599
+ this._endHighlightIndex = this._textWrapper.length;
600
+ this.isTextHighlightOn = true;
601
+ this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
602
+ this._cursorOffset = 0;
603
+ this._markAsDirty();
604
+ return;
605
+ }
606
+ if (!this.isTextHighlightOn) {
607
+ this.isTextHighlightOn = true;
608
+ this._cursorIndex = this._cursorOffset <= 0 ? 0 : this._cursorOffset + 1;
609
+ }
610
+ //if text is already highlighted
611
+ else if (this._cursorIndex === -1) {
612
+ this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
613
+ this._cursorOffset = this._textWrapper.length === this._endHighlightIndex ? 0 : this._textWrapper.length - this._endHighlightIndex - 1;
614
+ }
615
+ //set the highlight indexes
616
+ if (this._cursorIndex < this._cursorOffset) {
617
+ this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
618
+ this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
619
+ }
620
+ else if (this._cursorIndex > this._cursorOffset) {
621
+ this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
622
+ this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
623
+ }
624
+ else {
625
+ this.isTextHighlightOn = false;
626
+ }
627
+ this._markAsDirty();
628
+ return;
629
+ }
630
+ if (this.isTextHighlightOn) {
631
+ this._cursorOffset = this._textWrapper.length - this._endHighlightIndex;
632
+ this.isTextHighlightOn = false;
633
+ }
634
+ //ctr + ->
635
+ if (evt && (evt.ctrlKey || evt.metaKey)) {
636
+ this._cursorOffset = 0;
637
+ evt.preventDefault();
638
+ }
639
+ this._blinkIsEven = false;
640
+ this.isTextHighlightOn = false;
641
+ this._cursorIndex = -1;
642
+ this._markAsDirty();
643
+ return;
644
+ }
645
+ if (keyCode === 32) {
646
+ key = evt?.key ?? " ";
647
+ }
648
+ this._deadKey = key === "Dead";
649
+ // Printable characters
650
+ if (key &&
651
+ (keyCode === -1 || // Direct access
652
+ keyCode === 32 || // Space
653
+ keyCode === 34 || // " add support for single and double quotes
654
+ keyCode === 39 || // '
655
+ (keyCode > 47 && keyCode < 64) || // Numbers
656
+ (keyCode > 64 && keyCode < 91) || // Letters
657
+ (keyCode > 159 && keyCode < 193) || // Special characters
658
+ (keyCode > 218 && keyCode < 223) || // Special characters
659
+ (keyCode > 95 && keyCode < 112))) {
660
+ // Numpad
661
+ this._currentKey = key;
662
+ this.onBeforeKeyAddObservable.notifyObservers(this);
663
+ key = this._currentKey;
664
+ if (this._addKey && !this._deadKey) {
665
+ if (this.isTextHighlightOn) {
666
+ this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex, key);
667
+ this._textHasChanged();
668
+ this._cursorOffset = this._textWrapper.length - (this._startHighlightIndex + 1);
669
+ this.isTextHighlightOn = false;
670
+ this._blinkIsEven = false;
671
+ this._markAsDirty();
672
+ }
673
+ else if (this._cursorOffset === 0) {
674
+ this.text += this._deadKey && evt?.key ? evt.key : key;
675
+ }
676
+ else {
677
+ const insertPosition = this._textWrapper.length - this._cursorOffset;
678
+ this._textWrapper.removePart(insertPosition, insertPosition, key);
679
+ this._textHasChanged();
680
+ }
681
+ if (evt) {
682
+ evt.preventDefault();
683
+ }
517
684
  }
518
- //store the starting point
519
- if (!this.isTextHighlightOn) {
520
- this.isTextHighlightOn = true;
521
- this._cursorIndex = this._cursorOffset >= this._textWrapper.length ? this._textWrapper.length : this._cursorOffset - 1;
522
- }
523
- //if text is already highlighted
524
- else if (this._cursorIndex === -1) {
525
- this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
526
- this._cursorOffset = this._startHighlightIndex === 0 ? this._textWrapper.length : this._textWrapper.length - this._startHighlightIndex + 1;
527
- }
528
- //set the highlight indexes
685
+ }
686
+ }
687
+ /**
688
+ * @internal
689
+ */
690
+ _updateValueFromCursorIndex(offset) {
691
+ //update the cursor
692
+ this._blinkIsEven = false;
693
+ if (this._cursorIndex === -1) {
694
+ this._cursorIndex = offset;
695
+ }
696
+ else {
529
697
  if (this._cursorIndex < this._cursorOffset) {
530
698
  this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
531
699
  this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
@@ -536,519 +704,366 @@ export class InputText extends Control {
536
704
  }
537
705
  else {
538
706
  this.isTextHighlightOn = false;
707
+ this._markAsDirty();
708
+ return;
539
709
  }
540
- this._markAsDirty();
541
- return;
542
710
  }
543
- if (this.isTextHighlightOn) {
544
- this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
545
- this.isTextHighlightOn = false;
711
+ this.isTextHighlightOn = true;
712
+ this._markAsDirty();
713
+ }
714
+ /**
715
+ * @internal
716
+ */
717
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
718
+ _processDblClick(evt) {
719
+ //pre-find the start and end index of the word under cursor, speeds up the rendering
720
+ this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
721
+ this._endHighlightIndex = this._startHighlightIndex;
722
+ let moveLeft, moveRight;
723
+ do {
724
+ moveRight = this._endHighlightIndex < this._textWrapper.length && this._textWrapper.isWord(this._endHighlightIndex) ? ++this._endHighlightIndex : 0;
725
+ moveLeft = this._startHighlightIndex > 0 && this._textWrapper.isWord(this._startHighlightIndex - 1) ? --this._startHighlightIndex : 0;
726
+ } while (moveLeft || moveRight);
727
+ this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
728
+ this.isTextHighlightOn = true;
729
+ this._clickedCoordinate = null;
730
+ this._blinkIsEven = true;
731
+ this._cursorIndex = -1;
732
+ this._markAsDirty();
733
+ }
734
+ /**
735
+ * Allow the user to select all text
736
+ */
737
+ selectAllText() {
738
+ this._blinkIsEven = true;
739
+ this.isTextHighlightOn = true;
740
+ this._startHighlightIndex = 0;
741
+ this._endHighlightIndex = this._textWrapper.length;
742
+ this._cursorOffset = this._textWrapper.length;
743
+ this._cursorIndex = -1;
744
+ this._markAsDirty();
745
+ }
746
+ /**
747
+ * Handles the keyboard event
748
+ * @param evt Defines the KeyboardEvent
749
+ */
750
+ processKeyboard(evt) {
751
+ // process pressed key
752
+ this.processKey(evt.keyCode, evt.key, evt);
753
+ super.processKeyboard(evt);
754
+ }
755
+ /**
756
+ * @internal
757
+ */
758
+ _onCopyText(ev) {
759
+ this.isTextHighlightOn = false;
760
+ //when write permission to clipbaord data is denied
761
+ try {
762
+ ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
546
763
  }
547
- if (evt && (evt.ctrlKey || evt.metaKey)) {
548
- this._cursorOffset = this._textWrapper.length;
549
- evt.preventDefault();
764
+ catch { } //pass
765
+ this._host.clipboardData = this._highlightedText;
766
+ }
767
+ /**
768
+ * @internal
769
+ */
770
+ _onCutText(ev) {
771
+ if (!this._highlightedText) {
772
+ return;
550
773
  }
551
- this._blinkIsEven = false;
774
+ this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
775
+ this._textHasChanged();
552
776
  this.isTextHighlightOn = false;
553
- this._cursorIndex = -1;
554
- this._markAsDirty();
555
- return;
556
- case 39: // RIGHT
557
- this._cursorOffset--;
558
- if (this._cursorOffset < 0) {
559
- this._cursorOffset = 0;
777
+ this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
778
+ //when write permission to clipbaord data is denied
779
+ try {
780
+ ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
560
781
  }
561
- if (evt && evt.shiftKey) {
562
- //update the cursor
563
- this._blinkIsEven = false;
564
- //shift + ctrl/cmd + ->
565
- if (evt.ctrlKey || evt.metaKey) {
566
- if (!this.isTextHighlightOn) {
567
- if (this._cursorOffset === 0) {
568
- return;
569
- }
570
- else {
571
- this._startHighlightIndex = this._textWrapper.length - this._cursorOffset - 1;
782
+ catch { } //pass
783
+ this._host.clipboardData = this._highlightedText;
784
+ this._highlightedText = "";
785
+ }
786
+ /**
787
+ * @internal
788
+ */
789
+ _onPasteText(ev) {
790
+ let data;
791
+ if (ev.clipboardData && ev.clipboardData.types.indexOf("text/plain") !== -1) {
792
+ data = ev.clipboardData.getData("text/plain");
793
+ }
794
+ else {
795
+ //get the cached data; returns blank string by default
796
+ data = this._host.clipboardData;
797
+ }
798
+ const insertPosition = this._textWrapper.length - this._cursorOffset;
799
+ this._textWrapper.removePart(insertPosition, insertPosition, data);
800
+ this._textHasChanged();
801
+ }
802
+ _draw(context) {
803
+ context.save();
804
+ this._applyStates(context);
805
+ if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
806
+ context.shadowColor = this.shadowColor;
807
+ context.shadowBlur = this.shadowBlur;
808
+ context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
809
+ context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
810
+ }
811
+ // Background
812
+ if (this._isFocused) {
813
+ if (this._focusedBackground) {
814
+ context.fillStyle = this._isEnabled ? this._focusedBackground : this._disabledColor;
815
+ context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
816
+ }
817
+ }
818
+ else if (this._background) {
819
+ context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
820
+ context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
821
+ }
822
+ if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
823
+ context.shadowBlur = 0;
824
+ context.shadowOffsetX = 0;
825
+ context.shadowOffsetY = 0;
826
+ }
827
+ if (!this._fontOffset || this._wasDirty) {
828
+ this._fontOffset = Control._GetFontOffset(context.font, this._host.getScene()?.getEngine());
829
+ }
830
+ // Text
831
+ const clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._tempParentMeasure.width);
832
+ if (this.color) {
833
+ context.fillStyle = this.color;
834
+ }
835
+ let text = this._beforeRenderText(this._textWrapper);
836
+ if (!this._isFocused && !this._textWrapper.text && this._placeholderText) {
837
+ text = new TextWrapper();
838
+ text.text = this._placeholderText;
839
+ if (this._placeholderColor) {
840
+ context.fillStyle = this._placeholderColor;
841
+ }
842
+ }
843
+ this._textWidth = context.measureText(text.text).width;
844
+ const marginWidth = this._margin.getValueInPixel(this._host, this._tempParentMeasure.width) * 2;
845
+ if (this._autoStretchWidth) {
846
+ this.width = Math.min(this._maxWidth.getValueInPixel(this._host, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
847
+ this._autoStretchWidth = true; // setting the width will have reset _autoStretchWidth to false!
848
+ }
849
+ const rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
850
+ const availableWidth = this._width.getValueInPixel(this._host, this._tempParentMeasure.width) - marginWidth;
851
+ context.save();
852
+ context.beginPath();
853
+ context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);
854
+ context.clip();
855
+ if (this._isFocused && this._textWidth > availableWidth) {
856
+ const textLeft = clipTextLeft - this._textWidth + availableWidth;
857
+ if (!this._scrollLeft) {
858
+ this._scrollLeft = textLeft;
859
+ }
860
+ }
861
+ else {
862
+ this._scrollLeft = clipTextLeft;
863
+ }
864
+ if (this.outlineWidth) {
865
+ context.strokeText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
866
+ }
867
+ context.fillText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
868
+ // Cursor
869
+ if (this._isFocused) {
870
+ // Need to move cursor
871
+ if (this._clickedCoordinate) {
872
+ const rightPosition = this._scrollLeft + this._textWidth;
873
+ const absoluteCursorPosition = rightPosition - this._clickedCoordinate;
874
+ let currentSize = 0;
875
+ this._cursorOffset = 0;
876
+ let previousDist = 0;
877
+ do {
878
+ if (this._cursorOffset) {
879
+ previousDist = Math.abs(absoluteCursorPosition - currentSize);
572
880
  }
881
+ this._cursorOffset++;
882
+ currentSize = context.measureText(text.substr(text.length - this._cursorOffset, this._cursorOffset)).width;
883
+ } while (currentSize < absoluteCursorPosition && text.length >= this._cursorOffset);
884
+ // Find closest move
885
+ if (Math.abs(absoluteCursorPosition - currentSize) > previousDist) {
886
+ this._cursorOffset--;
573
887
  }
574
- this._endHighlightIndex = this._textWrapper.length;
575
- this.isTextHighlightOn = true;
576
- this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
577
- this._cursorOffset = 0;
578
- this._markAsDirty();
579
- return;
580
- }
581
- if (!this.isTextHighlightOn) {
582
- this.isTextHighlightOn = true;
583
- this._cursorIndex = this._cursorOffset <= 0 ? 0 : this._cursorOffset + 1;
888
+ this._blinkIsEven = false;
889
+ this._clickedCoordinate = null;
584
890
  }
585
- //if text is already highlighted
586
- else if (this._cursorIndex === -1) {
587
- this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
588
- this._cursorOffset = this._textWrapper.length === this._endHighlightIndex ? 0 : this._textWrapper.length - this._endHighlightIndex - 1;
891
+ // Render cursor
892
+ if (!this._blinkIsEven) {
893
+ const cursorOffsetText = text.substr(text.length - this._cursorOffset);
894
+ const cursorOffsetWidth = context.measureText(cursorOffsetText).width;
895
+ let cursorLeft = this._scrollLeft + this._textWidth - cursorOffsetWidth;
896
+ if (cursorLeft < clipTextLeft) {
897
+ this._scrollLeft += clipTextLeft - cursorLeft;
898
+ cursorLeft = clipTextLeft;
899
+ this._markAsDirty();
900
+ }
901
+ else if (cursorLeft > clipTextLeft + availableWidth) {
902
+ this._scrollLeft += clipTextLeft + availableWidth - cursorLeft;
903
+ cursorLeft = clipTextLeft + availableWidth;
904
+ this._markAsDirty();
905
+ }
906
+ if (!this.isTextHighlightOn) {
907
+ context.fillRect(cursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, 2, this._fontOffset.height);
908
+ }
589
909
  }
590
- //set the highlight indexes
591
- if (this._cursorIndex < this._cursorOffset) {
592
- this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
593
- this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
910
+ clearTimeout(this._blinkTimeout);
911
+ this._blinkTimeout = setTimeout(() => {
912
+ this._blinkIsEven = !this._blinkIsEven;
913
+ this._markAsDirty();
914
+ }, 500);
915
+ //show the highlighted text
916
+ if (this.isTextHighlightOn) {
917
+ clearTimeout(this._blinkTimeout);
918
+ const highlightCursorOffsetWidth = context.measureText(text.substring(this._startHighlightIndex)).width;
919
+ let highlightCursorLeft = this._scrollLeft + this._textWidth - highlightCursorOffsetWidth;
920
+ this._highlightedText = text.substring(this._startHighlightIndex, this._endHighlightIndex);
921
+ let width = context.measureText(text.substring(this._startHighlightIndex, this._endHighlightIndex)).width;
922
+ if (highlightCursorLeft < clipTextLeft) {
923
+ width = width - (clipTextLeft - highlightCursorLeft);
924
+ if (!width) {
925
+ // when using left arrow on text.length > availableWidth;
926
+ // assigns the width of the first letter after clipTextLeft
927
+ width = context.measureText(text.charAt(text.length - this._cursorOffset)).width;
928
+ }
929
+ highlightCursorLeft = clipTextLeft;
930
+ }
931
+ //for transparancy
932
+ context.globalAlpha = this._highlighterOpacity;
933
+ context.fillStyle = this._textHighlightColor;
934
+ context.fillRect(highlightCursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, width, this._fontOffset.height);
935
+ context.globalAlpha = 1.0;
594
936
  }
595
- else if (this._cursorIndex > this._cursorOffset) {
596
- this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
597
- this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
937
+ }
938
+ context.restore();
939
+ // Border
940
+ if (this._thickness) {
941
+ if (this._isFocused) {
942
+ if (this.focusedColor) {
943
+ context.strokeStyle = this.focusedColor;
944
+ }
598
945
  }
599
946
  else {
600
- this.isTextHighlightOn = false;
947
+ if (this.color) {
948
+ context.strokeStyle = this.color;
949
+ }
601
950
  }
602
- this._markAsDirty();
603
- return;
951
+ context.lineWidth = this._thickness;
952
+ context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
604
953
  }
605
- if (this.isTextHighlightOn) {
606
- this._cursorOffset = this._textWrapper.length - this._endHighlightIndex;
607
- this.isTextHighlightOn = false;
954
+ context.restore();
955
+ }
956
+ _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
957
+ if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
958
+ return false;
608
959
  }
609
- //ctr + ->
610
- if (evt && (evt.ctrlKey || evt.metaKey)) {
611
- this._cursorOffset = 0;
612
- evt.preventDefault();
960
+ if (this.isReadOnly) {
961
+ return true;
613
962
  }
614
- this._blinkIsEven = false;
963
+ this._clickedCoordinate = coordinates.x;
615
964
  this.isTextHighlightOn = false;
965
+ this._highlightedText = "";
616
966
  this._cursorIndex = -1;
617
- this._markAsDirty();
618
- return;
619
- }
620
- if (keyCode === 32) {
621
- key = evt?.key ?? " ";
622
- }
623
- this._deadKey = key === "Dead";
624
- // Printable characters
625
- if (key &&
626
- (keyCode === -1 || // Direct access
627
- keyCode === 32 || // Space
628
- keyCode === 34 || // " add support for single and double quotes
629
- keyCode === 39 || // '
630
- (keyCode > 47 && keyCode < 64) || // Numbers
631
- (keyCode > 64 && keyCode < 91) || // Letters
632
- (keyCode > 159 && keyCode < 193) || // Special characters
633
- (keyCode > 218 && keyCode < 223) || // Special characters
634
- (keyCode > 95 && keyCode < 112))) {
635
- // Numpad
636
- this._currentKey = key;
637
- this.onBeforeKeyAddObservable.notifyObservers(this);
638
- key = this._currentKey;
639
- if (this._addKey && !this._deadKey) {
640
- if (this.isTextHighlightOn) {
641
- this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex, key);
642
- this._textHasChanged();
643
- this._cursorOffset = this._textWrapper.length - (this._startHighlightIndex + 1);
644
- this.isTextHighlightOn = false;
645
- this._blinkIsEven = false;
967
+ this._isPointerDown = true;
968
+ this._host._capturingControl[pointerId] = this;
969
+ this._focusedBy = pi.event.pointerType;
970
+ if (this._host.focusedControl === this) {
971
+ // Move cursor
972
+ clearTimeout(this._blinkTimeout);
646
973
  this._markAsDirty();
974
+ return true;
647
975
  }
648
- else if (this._cursorOffset === 0) {
649
- this.text += this._deadKey && evt?.key ? evt.key : key;
650
- }
651
- else {
652
- const insertPosition = this._textWrapper.length - this._cursorOffset;
653
- this._textWrapper.removePart(insertPosition, insertPosition, key);
654
- this._textHasChanged();
976
+ if (!this._isEnabled) {
977
+ return false;
655
978
  }
656
- if (evt) {
657
- evt.preventDefault();
979
+ this._host.focusedControl = this;
980
+ return true;
981
+ }
982
+ _onPointerMove(target, coordinates, pointerId, pi) {
983
+ if (this._host.focusedControl === this && this._isPointerDown && !this.isReadOnly) {
984
+ this._clickedCoordinate = coordinates.x;
985
+ this._markAsDirty();
986
+ this._updateValueFromCursorIndex(this._cursorOffset);
658
987
  }
988
+ super._onPointerMove(target, coordinates, pointerId, pi);
659
989
  }
660
- }
661
- }
662
- /**
663
- * @internal
664
- */
665
- _updateValueFromCursorIndex(offset) {
666
- //update the cursor
667
- this._blinkIsEven = false;
668
- if (this._cursorIndex === -1) {
669
- this._cursorIndex = offset;
670
- }
671
- else {
672
- if (this._cursorIndex < this._cursorOffset) {
673
- this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
674
- this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
990
+ _onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick) {
991
+ this._isPointerDown = false;
992
+ delete this._host._capturingControl[pointerId];
993
+ super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick);
675
994
  }
676
- else if (this._cursorIndex > this._cursorOffset) {
677
- this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
678
- this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
995
+ _beforeRenderText(textWrapper) {
996
+ return textWrapper;
679
997
  }
680
- else {
681
- this.isTextHighlightOn = false;
682
- this._markAsDirty();
683
- return;
684
- }
685
- }
686
- this.isTextHighlightOn = true;
687
- this._markAsDirty();
688
- }
689
- /**
690
- * @internal
691
- */
692
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
693
- _processDblClick(evt) {
694
- //pre-find the start and end index of the word under cursor, speeds up the rendering
695
- this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
696
- this._endHighlightIndex = this._startHighlightIndex;
697
- let moveLeft, moveRight;
698
- do {
699
- moveRight = this._endHighlightIndex < this._textWrapper.length && this._textWrapper.isWord(this._endHighlightIndex) ? ++this._endHighlightIndex : 0;
700
- moveLeft = this._startHighlightIndex > 0 && this._textWrapper.isWord(this._startHighlightIndex - 1) ? --this._startHighlightIndex : 0;
701
- } while (moveLeft || moveRight);
702
- this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
703
- this.isTextHighlightOn = true;
704
- this._clickedCoordinate = null;
705
- this._blinkIsEven = true;
706
- this._cursorIndex = -1;
707
- this._markAsDirty();
708
- }
709
- /**
710
- * Allow the user to select all text
711
- */
712
- selectAllText() {
713
- this._blinkIsEven = true;
714
- this.isTextHighlightOn = true;
715
- this._startHighlightIndex = 0;
716
- this._endHighlightIndex = this._textWrapper.length;
717
- this._cursorOffset = this._textWrapper.length;
718
- this._cursorIndex = -1;
719
- this._markAsDirty();
720
- }
721
- /**
722
- * Handles the keyboard event
723
- * @param evt Defines the KeyboardEvent
724
- */
725
- processKeyboard(evt) {
726
- // process pressed key
727
- this.processKey(evt.keyCode, evt.key, evt);
728
- super.processKeyboard(evt);
729
- }
730
- /**
731
- * @internal
732
- */
733
- _onCopyText(ev) {
734
- this.isTextHighlightOn = false;
735
- //when write permission to clipbaord data is denied
736
- try {
737
- ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
738
- }
739
- catch { } //pass
740
- this._host.clipboardData = this._highlightedText;
741
- }
742
- /**
743
- * @internal
744
- */
745
- _onCutText(ev) {
746
- if (!this._highlightedText) {
747
- return;
748
- }
749
- this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
750
- this._textHasChanged();
751
- this.isTextHighlightOn = false;
752
- this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
753
- //when write permission to clipbaord data is denied
754
- try {
755
- ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
756
- }
757
- catch { } //pass
758
- this._host.clipboardData = this._highlightedText;
759
- this._highlightedText = "";
760
- }
761
- /**
762
- * @internal
763
- */
764
- _onPasteText(ev) {
765
- let data;
766
- if (ev.clipboardData && ev.clipboardData.types.indexOf("text/plain") !== -1) {
767
- data = ev.clipboardData.getData("text/plain");
768
- }
769
- else {
770
- //get the cached data; returns blank string by default
771
- data = this._host.clipboardData;
772
- }
773
- const insertPosition = this._textWrapper.length - this._cursorOffset;
774
- this._textWrapper.removePart(insertPosition, insertPosition, data);
775
- this._textHasChanged();
776
- }
777
- _draw(context) {
778
- context.save();
779
- this._applyStates(context);
780
- if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
781
- context.shadowColor = this.shadowColor;
782
- context.shadowBlur = this.shadowBlur;
783
- context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
784
- context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
785
- }
786
- // Background
787
- if (this._isFocused) {
788
- if (this._focusedBackground) {
789
- context.fillStyle = this._isEnabled ? this._focusedBackground : this._disabledColor;
790
- context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
791
- }
792
- }
793
- else if (this._background) {
794
- context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
795
- context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
796
- }
797
- if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
798
- context.shadowBlur = 0;
799
- context.shadowOffsetX = 0;
800
- context.shadowOffsetY = 0;
801
- }
802
- if (!this._fontOffset || this._wasDirty) {
803
- this._fontOffset = Control._GetFontOffset(context.font, this._host.getScene()?.getEngine());
804
- }
805
- // Text
806
- const clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._tempParentMeasure.width);
807
- if (this.color) {
808
- context.fillStyle = this.color;
809
- }
810
- let text = this._beforeRenderText(this._textWrapper);
811
- if (!this._isFocused && !this._textWrapper.text && this._placeholderText) {
812
- text = new TextWrapper();
813
- text.text = this._placeholderText;
814
- if (this._placeholderColor) {
815
- context.fillStyle = this._placeholderColor;
816
- }
817
- }
818
- this._textWidth = context.measureText(text.text).width;
819
- const marginWidth = this._margin.getValueInPixel(this._host, this._tempParentMeasure.width) * 2;
820
- if (this._autoStretchWidth) {
821
- this.width = Math.min(this._maxWidth.getValueInPixel(this._host, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
822
- this._autoStretchWidth = true; // setting the width will have reset _autoStretchWidth to false!
823
- }
824
- const rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
825
- const availableWidth = this._width.getValueInPixel(this._host, this._tempParentMeasure.width) - marginWidth;
826
- context.save();
827
- context.beginPath();
828
- context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);
829
- context.clip();
830
- if (this._isFocused && this._textWidth > availableWidth) {
831
- const textLeft = clipTextLeft - this._textWidth + availableWidth;
832
- if (!this._scrollLeft) {
833
- this._scrollLeft = textLeft;
834
- }
835
- }
836
- else {
837
- this._scrollLeft = clipTextLeft;
838
- }
839
- if (this.outlineWidth) {
840
- context.strokeText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
841
- }
842
- context.fillText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
843
- // Cursor
844
- if (this._isFocused) {
845
- // Need to move cursor
846
- if (this._clickedCoordinate) {
847
- const rightPosition = this._scrollLeft + this._textWidth;
848
- const absoluteCursorPosition = rightPosition - this._clickedCoordinate;
849
- let currentSize = 0;
850
- this._cursorOffset = 0;
851
- let previousDist = 0;
852
- do {
853
- if (this._cursorOffset) {
854
- previousDist = Math.abs(absoluteCursorPosition - currentSize);
855
- }
856
- this._cursorOffset++;
857
- currentSize = context.measureText(text.substr(text.length - this._cursorOffset, this._cursorOffset)).width;
858
- } while (currentSize < absoluteCursorPosition && text.length >= this._cursorOffset);
859
- // Find closest move
860
- if (Math.abs(absoluteCursorPosition - currentSize) > previousDist) {
861
- this._cursorOffset--;
862
- }
863
- this._blinkIsEven = false;
864
- this._clickedCoordinate = null;
865
- }
866
- // Render cursor
867
- if (!this._blinkIsEven) {
868
- const cursorOffsetText = text.substr(text.length - this._cursorOffset);
869
- const cursorOffsetWidth = context.measureText(cursorOffsetText).width;
870
- let cursorLeft = this._scrollLeft + this._textWidth - cursorOffsetWidth;
871
- if (cursorLeft < clipTextLeft) {
872
- this._scrollLeft += clipTextLeft - cursorLeft;
873
- cursorLeft = clipTextLeft;
874
- this._markAsDirty();
875
- }
876
- else if (cursorLeft > clipTextLeft + availableWidth) {
877
- this._scrollLeft += clipTextLeft + availableWidth - cursorLeft;
878
- cursorLeft = clipTextLeft + availableWidth;
879
- this._markAsDirty();
998
+ /** @internal */
999
+ // eslint-disable-next-line @typescript-eslint/naming-convention
1000
+ set isTextHighlightOn(value) {
1001
+ if (this._isTextHighlightOn === value) {
1002
+ return;
880
1003
  }
881
- if (!this.isTextHighlightOn) {
882
- context.fillRect(cursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, 2, this._fontOffset.height);
1004
+ if (value) {
1005
+ this.onTextHighlightObservable.notifyObservers(this);
883
1006
  }
1007
+ this._isTextHighlightOn = value;
884
1008
  }
885
- clearTimeout(this._blinkTimeout);
886
- this._blinkTimeout = setTimeout(() => {
887
- this._blinkIsEven = !this._blinkIsEven;
888
- this._markAsDirty();
889
- }, 500);
890
- //show the highlighted text
891
- if (this.isTextHighlightOn) {
892
- clearTimeout(this._blinkTimeout);
893
- const highlightCursorOffsetWidth = context.measureText(text.substring(this._startHighlightIndex)).width;
894
- let highlightCursorLeft = this._scrollLeft + this._textWidth - highlightCursorOffsetWidth;
895
- this._highlightedText = text.substring(this._startHighlightIndex, this._endHighlightIndex);
896
- let width = context.measureText(text.substring(this._startHighlightIndex, this._endHighlightIndex)).width;
897
- if (highlightCursorLeft < clipTextLeft) {
898
- width = width - (clipTextLeft - highlightCursorLeft);
899
- if (!width) {
900
- // when using left arrow on text.length > availableWidth;
901
- // assigns the width of the first letter after clipTextLeft
902
- width = context.measureText(text.charAt(text.length - this._cursorOffset)).width;
903
- }
904
- highlightCursorLeft = clipTextLeft;
905
- }
906
- //for transparancy
907
- context.globalAlpha = this._highlighterOpacity;
908
- context.fillStyle = this._textHighlightColor;
909
- context.fillRect(highlightCursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, width, this._fontOffset.height);
910
- context.globalAlpha = 1.0;
911
- }
912
- }
913
- context.restore();
914
- // Border
915
- if (this._thickness) {
916
- if (this._isFocused) {
917
- if (this.focusedColor) {
918
- context.strokeStyle = this.focusedColor;
919
- }
1009
+ /** @internal */
1010
+ // eslint-disable-next-line @typescript-eslint/naming-convention
1011
+ get isTextHighlightOn() {
1012
+ return this._isTextHighlightOn;
920
1013
  }
921
- else {
922
- if (this.color) {
923
- context.strokeStyle = this.color;
924
- }
1014
+ dispose() {
1015
+ super.dispose();
1016
+ this.onBlurObservable.clear();
1017
+ this.onFocusObservable.clear();
1018
+ this.onTextChangedObservable.clear();
1019
+ this.onTextCopyObservable.clear();
1020
+ this.onTextCutObservable.clear();
1021
+ this.onTextPasteObservable.clear();
1022
+ this.onTextHighlightObservable.clear();
1023
+ this.onKeyboardEventProcessedObservable.clear();
925
1024
  }
926
- context.lineWidth = this._thickness;
927
- context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
928
- }
929
- context.restore();
930
- }
931
- _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
932
- if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
933
- return false;
934
- }
935
- if (this.isReadOnly) {
936
- return true;
937
- }
938
- this._clickedCoordinate = coordinates.x;
939
- this.isTextHighlightOn = false;
940
- this._highlightedText = "";
941
- this._cursorIndex = -1;
942
- this._isPointerDown = true;
943
- this._host._capturingControl[pointerId] = this;
944
- this._focusedBy = pi.event.pointerType;
945
- if (this._host.focusedControl === this) {
946
- // Move cursor
947
- clearTimeout(this._blinkTimeout);
948
- this._markAsDirty();
949
- return true;
950
- }
951
- if (!this._isEnabled) {
952
- return false;
953
- }
954
- this._host.focusedControl = this;
955
- return true;
956
- }
957
- _onPointerMove(target, coordinates, pointerId, pi) {
958
- if (this._host.focusedControl === this && this._isPointerDown && !this.isReadOnly) {
959
- this._clickedCoordinate = coordinates.x;
960
- this._markAsDirty();
961
- this._updateValueFromCursorIndex(this._cursorOffset);
962
- }
963
- super._onPointerMove(target, coordinates, pointerId, pi);
964
- }
965
- _onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick) {
966
- this._isPointerDown = false;
967
- delete this._host._capturingControl[pointerId];
968
- super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick);
969
- }
970
- _beforeRenderText(textWrapper) {
971
- return textWrapper;
972
- }
973
- /** @internal */
974
- // eslint-disable-next-line @typescript-eslint/naming-convention
975
- set isTextHighlightOn(value) {
976
- if (this._isTextHighlightOn === value) {
977
- return;
978
- }
979
- if (value) {
980
- this.onTextHighlightObservable.notifyObservers(this);
981
- }
982
- this._isTextHighlightOn = value;
983
- }
984
- /** @internal */
985
- // eslint-disable-next-line @typescript-eslint/naming-convention
986
- get isTextHighlightOn() {
987
- return this._isTextHighlightOn;
988
- }
989
- dispose() {
990
- super.dispose();
991
- this.onBlurObservable.clear();
992
- this.onFocusObservable.clear();
993
- this.onTextChangedObservable.clear();
994
- this.onTextCopyObservable.clear();
995
- this.onTextCutObservable.clear();
996
- this.onTextPasteObservable.clear();
997
- this.onTextHighlightObservable.clear();
998
- this.onKeyboardEventProcessedObservable.clear();
999
- }
1000
- }
1001
- __decorate([
1002
- serialize()
1003
- ], InputText.prototype, "promptMessage", void 0);
1004
- __decorate([
1005
- serialize()
1006
- ], InputText.prototype, "disableMobilePrompt", void 0);
1007
- __decorate([
1008
- serialize()
1009
- ], InputText.prototype, "maxWidth", null);
1010
- __decorate([
1011
- serialize()
1012
- ], InputText.prototype, "highligherOpacity", null);
1013
- __decorate([
1014
- serialize()
1015
- ], InputText.prototype, "highlighterOpacity", null);
1016
- __decorate([
1017
- serialize()
1018
- ], InputText.prototype, "onFocusSelectAll", null);
1019
- __decorate([
1020
- serialize()
1021
- ], InputText.prototype, "textHighlightColor", null);
1022
- __decorate([
1023
- serialize()
1024
- ], InputText.prototype, "margin", null);
1025
- __decorate([
1026
- serialize()
1027
- ], InputText.prototype, "autoStretchWidth", null);
1028
- __decorate([
1029
- serialize()
1030
- ], InputText.prototype, "thickness", null);
1031
- __decorate([
1032
- serialize()
1033
- ], InputText.prototype, "focusedBackground", null);
1034
- __decorate([
1035
- serialize()
1036
- ], InputText.prototype, "background", null);
1037
- __decorate([
1038
- serialize()
1039
- ], InputText.prototype, "placeholderColor", null);
1040
- __decorate([
1041
- serialize()
1042
- ], InputText.prototype, "placeholderText", null);
1043
- __decorate([
1044
- serialize()
1045
- ], InputText.prototype, "deadKey", null);
1046
- __decorate([
1047
- serialize()
1048
- ], InputText.prototype, "text", null);
1049
- __decorate([
1050
- serialize()
1051
- ], InputText.prototype, "width", null);
1025
+ },
1026
+ (() => {
1027
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
1028
+ _promptMessage_decorators = [serialize()];
1029
+ _disableMobilePrompt_decorators = [serialize()];
1030
+ _get_maxWidth_decorators = [serialize()];
1031
+ _get_highligherOpacity_decorators = [serialize()];
1032
+ _get_highlighterOpacity_decorators = [serialize()];
1033
+ _get_onFocusSelectAll_decorators = [serialize()];
1034
+ _get_textHighlightColor_decorators = [serialize()];
1035
+ _get_margin_decorators = [serialize()];
1036
+ _get_autoStretchWidth_decorators = [serialize()];
1037
+ _get_thickness_decorators = [serialize()];
1038
+ _get_focusedBackground_decorators = [serialize()];
1039
+ _get_background_decorators = [serialize()];
1040
+ _get_placeholderColor_decorators = [serialize()];
1041
+ _get_placeholderText_decorators = [serialize()];
1042
+ _get_deadKey_decorators = [serialize()];
1043
+ _get_text_decorators = [serialize()];
1044
+ _get_width_decorators = [serialize()];
1045
+ __esDecorate(_a, null, _get_maxWidth_decorators, { kind: "getter", name: "maxWidth", static: false, private: false, access: { has: obj => "maxWidth" in obj, get: obj => obj.maxWidth }, metadata: _metadata }, null, _instanceExtraInitializers);
1046
+ __esDecorate(_a, null, _get_highligherOpacity_decorators, { kind: "getter", name: "highligherOpacity", static: false, private: false, access: { has: obj => "highligherOpacity" in obj, get: obj => obj.highligherOpacity }, metadata: _metadata }, null, _instanceExtraInitializers);
1047
+ __esDecorate(_a, null, _get_highlighterOpacity_decorators, { kind: "getter", name: "highlighterOpacity", static: false, private: false, access: { has: obj => "highlighterOpacity" in obj, get: obj => obj.highlighterOpacity }, metadata: _metadata }, null, _instanceExtraInitializers);
1048
+ __esDecorate(_a, null, _get_onFocusSelectAll_decorators, { kind: "getter", name: "onFocusSelectAll", static: false, private: false, access: { has: obj => "onFocusSelectAll" in obj, get: obj => obj.onFocusSelectAll }, metadata: _metadata }, null, _instanceExtraInitializers);
1049
+ __esDecorate(_a, null, _get_textHighlightColor_decorators, { kind: "getter", name: "textHighlightColor", static: false, private: false, access: { has: obj => "textHighlightColor" in obj, get: obj => obj.textHighlightColor }, metadata: _metadata }, null, _instanceExtraInitializers);
1050
+ __esDecorate(_a, null, _get_margin_decorators, { kind: "getter", name: "margin", static: false, private: false, access: { has: obj => "margin" in obj, get: obj => obj.margin }, metadata: _metadata }, null, _instanceExtraInitializers);
1051
+ __esDecorate(_a, null, _get_autoStretchWidth_decorators, { kind: "getter", name: "autoStretchWidth", static: false, private: false, access: { has: obj => "autoStretchWidth" in obj, get: obj => obj.autoStretchWidth }, metadata: _metadata }, null, _instanceExtraInitializers);
1052
+ __esDecorate(_a, null, _get_thickness_decorators, { kind: "getter", name: "thickness", static: false, private: false, access: { has: obj => "thickness" in obj, get: obj => obj.thickness }, metadata: _metadata }, null, _instanceExtraInitializers);
1053
+ __esDecorate(_a, null, _get_focusedBackground_decorators, { kind: "getter", name: "focusedBackground", static: false, private: false, access: { has: obj => "focusedBackground" in obj, get: obj => obj.focusedBackground }, metadata: _metadata }, null, _instanceExtraInitializers);
1054
+ __esDecorate(_a, null, _get_background_decorators, { kind: "getter", name: "background", static: false, private: false, access: { has: obj => "background" in obj, get: obj => obj.background }, metadata: _metadata }, null, _instanceExtraInitializers);
1055
+ __esDecorate(_a, null, _get_placeholderColor_decorators, { kind: "getter", name: "placeholderColor", static: false, private: false, access: { has: obj => "placeholderColor" in obj, get: obj => obj.placeholderColor }, metadata: _metadata }, null, _instanceExtraInitializers);
1056
+ __esDecorate(_a, null, _get_placeholderText_decorators, { kind: "getter", name: "placeholderText", static: false, private: false, access: { has: obj => "placeholderText" in obj, get: obj => obj.placeholderText }, metadata: _metadata }, null, _instanceExtraInitializers);
1057
+ __esDecorate(_a, null, _get_deadKey_decorators, { kind: "getter", name: "deadKey", static: false, private: false, access: { has: obj => "deadKey" in obj, get: obj => obj.deadKey }, metadata: _metadata }, null, _instanceExtraInitializers);
1058
+ __esDecorate(_a, null, _get_text_decorators, { kind: "getter", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text }, metadata: _metadata }, null, _instanceExtraInitializers);
1059
+ __esDecorate(_a, null, _get_width_decorators, { kind: "getter", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width }, metadata: _metadata }, null, _instanceExtraInitializers);
1060
+ __esDecorate(null, null, _promptMessage_decorators, { kind: "field", name: "promptMessage", static: false, private: false, access: { has: obj => "promptMessage" in obj, get: obj => obj.promptMessage, set: (obj, value) => { obj.promptMessage = value; } }, metadata: _metadata }, _promptMessage_initializers, _promptMessage_extraInitializers);
1061
+ __esDecorate(null, null, _disableMobilePrompt_decorators, { kind: "field", name: "disableMobilePrompt", static: false, private: false, access: { has: obj => "disableMobilePrompt" in obj, get: obj => obj.disableMobilePrompt, set: (obj, value) => { obj.disableMobilePrompt = value; } }, metadata: _metadata }, _disableMobilePrompt_initializers, _disableMobilePrompt_extraInitializers);
1062
+ if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
1063
+ })(),
1064
+ _a;
1065
+ })();
1066
+ export { InputText };
1052
1067
  let _Registered = false;
1053
1068
  /**
1054
1069
  * Registers the InputText class with the type store for serialization support.