GUI TextInput with multiple lines

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

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?

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.

1 Like

@Wingnut @Deltakosh

That’s how it looks in the moment.

What do you think?

4 Likes

Man! This looks awesome!

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.

1 Like

@Oswald

I will still continue to work on that,because I need it :smiley: 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

1 Like

@Oswald @Deltakosh @Necips @Wingnut @sebavan

Sorry for the delay.

Here is the current state as described above.

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

Best

2 Likes

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.

2 Likes

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

1 Like

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

@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 :smiley:

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 :slight_smile:

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

1 Like

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

1 Like

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 !

1 Like

Hey @VPW, thanks a lot for bringing this to Babylon,

@RaananW and @DarraghBurke will be able to help and review :slight_smile:

1 Like

Bumping this so I can close once the PR is merged :smiley:

Hi @carolhmj!

You can close, the PR is merged! :partying_face:

Woohoooo CONGRATS! It’s a wonderful addition :heart_eyes: