GUI TextInput with multiple lines

fneitzel · April 11, 2020, 6:39pm

I found https://doc.babylonjs.com/how_to/gui#inputtext

The InputText is a control used to let users insert text in a single line

What I’d like to use is a multiline inputtext field. Like a html <textarea>

Does anyone know how to achive this?

I am actually not that familiar with typescrypt and the GUI library yet, otherwise I would try to write it myself by modifying inputtext.

Thank you for your time!

Deltakosh · April 13, 2020, 3:10pm

Hello as I told you in your PM, I’m fine if someone wants to add the feature (which is not trivial because of all the cursor management)

Wingnut · April 13, 2020, 3:25pm

Hiya F!

No solution, but I have created a testing playground…

https://www.babylonjs-playground.com/#3EF49E#75

There we have a stackPanel (line 32) and it contains 4 “controls” as children. First 3 are inputText controls (slightly different from each other)… and the 4th is a ScrollViewer control… a type of multi-line text thing.

THIS scrollViewer is slightly different than normal. ScrollViewers can have TWO types of controls within them:

A single textBlock control
A single vertical StackPanel … which can contain MANY controls of MANY kinds.

Shown… is the 2nd version… a scrollViewer with a vertical stackPanel inside… which has 3 children… a textBlock, then a rectangleControl (a nice border-able container for nearly ANYTHING including more stackPanels)… and then another textBlock.

SO, by using a stackPanel in the ScrollViewer… we have super-powered the ScrollViewer… allowing us to live-update the scrollViewer… by adding and removing textBlocks/anyControls. We might have to markAsDirty after additions and deletions

The most important thing… we have a text “area” that is wordWrapping and vertical-scroll-bar ACTIVE… AND can be updated live.

Now, back to the 3 inputText controls… and in particular… look at line 39 of the FIRST inputText control. We have an “observer”… it can watch for keypresses, and can “notify” us/other-things… WHEN a key has been pressed. Hmm.

You know where this is going, now, right? We watch for keypresses… and possibly change the .text of ANY textBlock control… ANYWHERE (like one that is inside-of the scrollViewer)… EACH keypress.

A person MIGHT want to put that first inputText control… as the first child of the stackPanel that is INSIDE-OF the scrollViewer (and maybe just remark-out input1 and input2, which are simply included for us to look-at and learn-from).

I dunno IF input.onBeforeKeyAddObservable CAN be used to write text into a scrollViewer… but maybe. By using a combination of controls such as these… a person MIGHT be able to “fake” a wordwrapping, side-scroll-active multi-line textArea simulator.

I don’t know if I will continue working on the demo/testing today, because my town just got another 10 inches of snow from a spring storm, and I have snow-cleanup work to do… soon. Perhaps you and/or other helpers… would like to advance this possibility. It’s something to try… what the heck.

You might want to somewhat/somehow hide the single-line inputText control, or at least hide/delete its outputted text… as you feed each keypress from it… into the scrollViewer textBlock(s)… thx to the input.onBeforeKeyAddObservable.

Good luck! Attn: SNOW FOR SALE! CHEAP! FREE SHIPPING!

fneitzel · April 14, 2020, 9:36am

@Wingnut

I checked out your playground, but I prefer a WYSIWYG textarea input, instead of a workaround. But the scrollbar is needed, so I will take a look into the stackpanel.

@Wingnut @Deltakosh

So far I was able to reproduce wordwrap in the textinput field.
inputTextAsArea

Now I have to understand the cursor management.
I was thinking of focusing on line wrap first.
Because I see different implementation approaches, but so far I would try to go this way:

Calculate height ranges of lines.
Determine what coordinate was clicked
Map coordinate to according line range
Put cursor to position

On the other hand I wonder if it would make more sense to treat the input as one line for the cursor and put it accordingly by calculating heights and width ‘on-the-fly’? I never worked with cursors before, so best approaches are welcome

Deltakosh · April 14, 2020, 2:13pm

Well I like your “one line at a time” idea

fneitzel · April 17, 2020, 5:39pm

I run into a problem with:
context.measureText().width

The clipText of the Area starts after 312 px (scrollLeft)
The width of the area is 200px.

My problem is that, the first line is measured with 115 px, but obviously takes nearly all the 200 px of the box? This way the absolute cursor position is determined wrong, if I click into the line.

The code part looks like this:

if (this._clickedCoordinateX && this._clickedCoordinateY) {

            // measure line width
            var selectedLineText = this._lines[this._selectedLineIndex];
            var clickedLineWidth = context.measureText(selectedLineText).width;
            var rightPosition = this._scrollLeft + clickedLineWidth;
            var absoluteCursorPositionX = rightPosition - this._clickedCoordinateX;

I am aware that the text can be smaller than the width of the box, this way absoluteCursorPositionX could be negativ, if I click behind the text, but what happens here seems to me that context.measureText().width gives me the wrong number.

Any ideas or thoughts?

fneitzel · April 17, 2020, 6:25pm

AH! I figured that I have to use:

this._lines[this._selectedLineIndex].width;

which gives me the correct width! Now the cursor is at the right position.

fneitzel · April 20, 2020, 12:09am

@Wingnut @Deltakosh

That’s how it looks in the moment.

What do you think?

Deltakosh · April 20, 2020, 3:27pm

Man! This looks awesome!

Oswald · May 5, 2020, 12:14pm

Hey, I’m quite interested in this, can you let me know if this is getting implemented ?
Is anyone working on it ?

Thanks for the head up.

fneitzel · May 5, 2020, 8:03pm

@Oswald

I will still continue to work on that,because I need it but since my semester started I am kind of busy. I will try to put the code I adapted in a git, if someone wants to continue with this as soon as I have time.

In the moment its missing

margin
text selection

and do not forget the unforeseen issues.

Further I was thinking to use verticalStackPanel to add a scrollbar. But first I wanted to implement the other things.

So far

fneitzel · May 10, 2020, 12:14am

@Oswald @Deltakosh @Necips @Wingnut @sebavan

Sorry for the delay.

Here is the current state as described above.

github.com

fneitzel/Babylon.js/blob/master/gui/src/2D/controls/inputTextArea.ts

import { Nullable } from "babylonjs/types";
import { Observable, Observer } from "babylonjs/Misc/observable";
import { Vector2 } from "babylonjs/Maths/math.vector";
import { ClipboardEventTypes, ClipboardInfo } from "babylonjs/Events/clipboardEvents";
import { PointerInfo, PointerEventTypes } from 'babylonjs/Events/pointerEvents';

import { Control } from "./control";
import { IFocusableControl } from "../advancedDynamicTexture";
import { ValueAndUnit } from "../valueAndUnit";
import { VirtualKeyboard } from "./virtualKeyboard";
import { _TypeStore } from 'babylonjs/Misc/typeStore';
import { Measure } from '../measure';
import { type } from "os";

/**
 * Enum that determines the text-wrapping mode to use.
 */
export enum TextWrapping_ {
    /**
     * Clip the text when it's larger than Control.width; this is the default mode.

This file has been truncated. show original

I would be glad, about critical code reviews, so it may can be a PR if it’s done.

Best

JohnK · May 10, 2020, 9:16am

To be acceptable as a PR the opposite is true. A PR must contain comments following these guidelines https://doc.babylonjs.com/how_to/contribute_to_api#format-of-comments

Comments are stripped during compilation for the babylon.min.js file.

TechDreamer2 · May 26, 2020, 4:10pm

This is super cool. Please make it part of Babylon JS!

sebavan · May 27, 2020, 12:31pm

@fneitzel, totally agree, you should definitely create a PR with the current state and we can go from their

fneitzel · May 27, 2020, 12:37pm

@sebavan Seriously? I mean this is half baked code so far, which needs lots of improvements. But I will make a PR lets see what happens

sebavan · May 27, 2020, 1:13pm

You can mark the PR as draft and we ll have a look with @Deltakosh to provide all the required feedbacks. There is no rush and in the end you would have contributed a nice new controls which has been requested by the community

fneitzel · May 27, 2020, 1:34pm

Thanks for your advice and support. Sounds like a good plan and otherwise I will come back to it anyway

sebavan · May 27, 2020, 1:42pm

Yup we ll see where it goes but it is an open issue so I guess it is an amazing idea : Multi-line support for InputBox · Issue #5630 · BabylonJS/Babylon.js · GitHub

VPW · January 5, 2022, 10:18am

Hello !

My necrommancer skills allow me to revive this topic by adding my PR here : Improved prototype of InputTextArea by Valerian-Perez-Wanadev · Pull Request #11710 · BabylonJS/Babylon.js · GitHub

It’s not totaly perfet but now I’m lost how to finish the component. Maybe some of you have the spark of genius to complete it !

Topic		Replies	Views
Multi Line Support Questions gui	8	1173	January 25, 2022
How to make the TextWrapping / Mesh to editable text after clicking on it? Questions	14	1772	June 11, 2019
Mobile GUI Improvements Feature requests	6	380	June 15, 2022
GUI inputtext not getting keyboard input on multi canvas scene Bugs	12	1048	October 7, 2020
Help creating complex GUI Questions gui	36	2116	April 27, 2020

GUI TextInput with multiple lines

Related topics