TextEdit2D

The TextEdit2D node is a multiline text editor. When enabled, it provides core functionalities for text insertion and manipulation, such as: caret movement, text area selection, scrolling, text alignment (left, center, right or justify), margins, and interline offset.

While inserting text, the lines are appropriately split at the last word that fits within the container's width and margins.

The TextEdit2D node inherits from RectBase2D.

Note: Multiple TextEdit2D require proper management of the enabled field in order to focus on the desired node. When two TextEdit2D nodes are enabled, the text input happens on both.

Platform support

This element is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-P WASM platforms.

Text formatting and appearance

The appearance of the text can be customized primarly through adjustments to the font, size and color (font, fontColor and fontColorDisabled fields). Additionally, text formatting can be adjusted using margin, interlineOffset and alignment fields.

To facilitate specific scenario, such as password input, maxCharacters, password, passwordChar and returnInText fields are provided. When password field is set to true, the copy and cut functions are disabled.

Note: Currently, the formatting and appearance settings are applied uniformly to the entire text.

Caret management

TextEdit2D supports caret visualization and movement. Its aspect is determined by the textFont size, caretColor and caretThickness values.

The supported caret actions are:

• Arrow keys move the caret in the arrow direction;

• Home and End keys move the caret at the beginning or the end of the text, respectively;

• PageUp and PageDown keys move the caret 10 lines up and down, respectively;

• Paste the text from the global clipboard field by pressing the Ctrl + V shortcut or by executing the pasteTextFromClipboard SFunction.

The caret can also be positioned by left clicking with the mouse or tapping with a finger on touchscreen devices.

Text area selection

When the enabled field is set to true, the TextEdit2D node allows to select a portion of the visible text by dragging the mouse while holding the left click, or by dragging a finger on touchscreen devices. The color of the area selection can be personalized through the selectionColor field. Additionally, the selectedText field dynamically provides the selected text.

When the text has been selected, it is possible to perform the following actions:

• Delete the selection with either its respective keys or any other text input. After, the caret will be properly positioned;

• Cut the selection by pressing the Ctrl + X shortcut or by executing the cutSelectedTextToClipboard SFunction which sets both the global clipboard field and the clipboardText field to the selected text. Finally, the selection is deleted;

• Copy the selection by pressing the Ctrl + C shortcut or by executing the copySelectedTextToClipboard SFunction which sets both the global clipboard field and the clipboardText field to the selected text.

Any caret movement or positioning cancels the current selection.

Scrolling

Text may exceed the TextEdit2D height, in which case it is possible to navigate with the caret over the upper and lower boundaries. When a boundary is reached, the scrollOffset field is internally calculated to properly visualize the text.

Exploiting the Slider2D node functionalities, it is possible to manually set the scrollOffset value without exceeding its upper limit, which is provided by the maxScrollOffset field and internally calculated.

Given a Slider2D node named Slider and a TextEdit2D node named TextEdit, the following is a sample code for coupling the two components:

<route from="TextEdit.maxScrollOffset" to="Slider.valueScale" />

<route from="Slider.value" to="TextEdit.scrollOffset" />

<route from="TextEdit.scrollOffset" to="Slider.value" />

The Slider2D node's style must be adjusted accordingly.

Code example

This is a code example for the TextEdit2D node.

<TextEdit2D name="myTextEdit2D"

visible="true"

enabled="true"

position="300 300"

fontColor="1 1 1 1"

text="This is the TextEdit2D node in action"

fontColorDisabled="0.5 0.5 0.5 1"

size="300 150"

alignment="left" />

TextEdit2D fields

These are the fields for TextEdit2D node. Only the node-specific fields are indicated, not fields obtained by inheritance.

Field inheritance: NodeBase > RectBase2D > TextEdit2D