rexrainbow / phaser3-rex-notes

Notes of phaser3 engine
MIT License
1.22k stars 263 forks source link

It should be adjustable whether the text in Text area should start at the top or at the bottom. #251

Closed rexrainbow closed 2 years ago

rexrainbow commented 2 years ago

It should be adjustable whether the text in Text area should start at the top or at the bottom.

Originally posted by @robinheidrich in https://github.com/rexrainbow/phaser3-rex-notes/discussions/248

rexrainbow commented 2 years ago

@robinheidrich

Two possible solutions to shift text lines down :

  1. Add new lines above first line.

  2. Set top margin in constructor's config parameter space.text.top

robinheidrich commented 2 years ago

The 2nd method doesn't seem to work, anything above 0 puts the slider at the bottom and no longer shows the text.

The 1st method might work, but would be more of a hacky workaround.

rexrainbow commented 2 years ago

See this demo, line 44-46. It will add a space above first line.

You might get latest version of rexui minifiy file for your project.

robinheidrich commented 2 years ago

But that isn't the way I want it to be. I want the text to start at the bottom instead of the top.

As if you would apply bottom: 0; in CSS.

rexrainbow commented 2 years ago

Don't get it. Could you explain more detail? Might post a css demo or an image.

robinheidrich commented 2 years ago

The text should go from bottom to top, not top to bottom.

Something like this, where the text is aligned at the bottom instead of the top.

robinheidrich commented 2 years ago

I found out that the valign: bottom option in BBCode Text is what I was looking for.

However, this does not work properly in use with Text area. The text is outside the mask and the scroller's thumb is still on top.

I have prepared an example: https://jsfiddle.net/4nyb38hg/

On the left side you can see that the text is under the text area and would not be visible without textMask: false.

On the right side you can see how it should look. It works correctly only if the text is scrollable.

rexrainbow commented 2 years ago

Add scrollLastLineToButtom method, see this demo

robinheidrich commented 2 years ago

That's not quite what I was thinking of. The starting point of the text should be at the bottom instead of the top. So also the thumb of the slider should be at the bottom by default (and always be there).

But in the meantime I decided to just let the text start normally from the top. So from my side there is no need for this addition anymore, but maybe it would be helpful for others.

Thanks for the efforts anyway!

Edit: However, it would be helpful to determine the default alignment of the slider thumb. I would like to have it always at the bottom until the text becomes scrollable (where I can then use scrollToBottom).

Maybe scrollToBottom could align the slider thumb at the bottom even if the text is not scrollable?

rexrainbow commented 2 years ago

It might be inconsistent that text starts at bottom.

Moreover, from this example post before. The text element is span, not textarea. After searching, I did not find easy way to align text at bottom on textarea element. Text always starts at top.

robinheidrich commented 2 years ago

That's right and makes more sense, I now let the text start normally from the top.

Does the function "scrollLastLineToButtom" remain now? If so there is a typo in it, it should be Bottom.

And what about using scrollToBottom to set only the slider thumb to the bottom even if there is no scrollable text?

rexrainbow commented 2 years ago

Ah, typo again.

I will remove scrollLastLineToButtom method BTW.

rexrainbow commented 2 years ago

Add alwaysScrollable parameter

Set alwaysScrollable to true, to scroll last line to bottom in any case. Demo

robinheidrich commented 2 years ago

I didn't want it to always be scrollable, I just wanted the slider thumb at the bottom even if it wasn't scrollable. This is sadly not quite the behavior I need.

Could you adjust that again? I just want to be able to use scrollToBottom, even if it is not scrollable. The text should not change in any way, only the slider should be aligned at the bottom.

rexrainbow commented 2 years ago

We both agree that starting of content is aligning first line to top of window. The issue is, should last line end at bottom of window? Basically, content less then a page won't be scrollable. the last line might not align at bottom of window.

Then I scrollLastLineToBottom() method at previous version, but did not changing scrolling length. Once scrollLastLineToBottom() method called, it will scroll above first line, to pull down content. i.e. the scrolling is out of range.

To solve this issue, I try to changing scrolling length. If content is less then a page, it can scroll down until last line is at bottom (alwaysScrollable property). Thus scrollLastLineToBottom() can be replaced by scrollToBottom().

robinheidrich commented 2 years ago

I just want the slider thumb aligned at the bottom by default. The text should not be affected in any way.

I don't know to what extent that would be possible, if it is not possible it would be nothing bad, I'm just trying to recreate a UI and there the scroll thumb is at the bottom by default.

rexrainbow commented 2 years ago

Thumb at bottom means t=1, on the other word, content is scrolled to bottom. Since the content still align at top (t=0), the logic will be broken, or it can't cover this case.

robinheidrich commented 2 years ago

I see. I think this issue can be closed. Thanks for your effort!