Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement scrollable text input #9393

Open
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

felix642
Copy link
Contributor

@felix642 felix642 commented Dec 30, 2024

Improved the editable text field in the save menu. When overflowing, the textbox would previously display the beginning of the text and complete with '...' for the overflowing text. The user could continue typing but would not get any feedback. With those changes the input box now scrolls when the text overflows.

save.webm

The changes were also applied to the virtual keyboard, but since this keyboard does not have any arrow key the user is not able to scroll left or right. This is still an improvement from the current implementation since the user it at least able to see what he is typing, but ideally we should also add some arrow keys or similar feature to be able to move the cursor left and right.

The changes are related to : #7275 and #1318 both issues are already fixed but with the current feedback it's hard to know the actual character limit.

@oleg-derevenetz oleg-derevenetz added improvement New feature, request or improvement ui UI/GUI related stuff labels Dec 30, 2024
@oleg-derevenetz oleg-derevenetz added this to the 1.1.6 milestone Dec 30, 2024
@ihhub ihhub requested review from ihhub and Districh-ru December 31, 2024 04:11
Copy link
Owner

@ihhub ihhub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @felix642 , I put few comments here. Would you mind to check them?

Comment on lines 406 to 527
while ( _textOffset + maxCharacterCount <= _cursorPosition ) {
// If the cursor is to the right of the textBox
++_textOffset;
maxCharacterCount = getMaxCharacterCount( reinterpret_cast<const uint8_t *>( _text.data() + _textOffset ), static_cast<int32_t>( _text.size() - _textOffset ),
charHandler, maxWidth );
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it correct to say that the complexity of this loop is O(N * (N / 2)) where N is the number of characters present in the string? Is there a way to avoid recalculating all the character lengths?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we could always call getMaxCharacterCount() right before the while loop and then compute the new maximum character count using the characters' width at the beginning / end of the loop. This should give us better performances.

I don't know if the added complexity is really needed though. This while loop is only used to make sure that the cursor is always visible if it overflows to the right. This means that the while loop should, on average, be executed only once or twice (moving the view by one character should be enough for most scenarios).
The only cases where the while loop might be executed more than once is when a large character is added to the right of the string and small characters are removed to the left.

@felix642 felix642 force-pushed the scrollable-text-input branch 2 times, most recently from c619c4e to f829da9 Compare January 3, 2025 18:35
@ihhub ihhub self-requested a review January 4, 2025 03:10
Copy link
Collaborator

@Districh-ru Districh-ru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, @felix642, the scrollable text input is an important improvement to fheroes2 GUI and for the save file dialog it works good. 👍

  1. Unfortunately the Virtual Keyboard has not left/right arrow keys so an Android user will not be able to scroll the text.
  2. Also now we lack of ... and there is no extra symbol to show user that there is some text beyond the input text border.

We can try to make it a bit better. :)

What do you think about the next logic?

  1. If the cursor will be positioned less than 4 chars (this value is discussible) closer to the field border then scroll the text so that the cursor will be the 4th character from that border. (If there is no text to scroll then place the cursor at its place closer to the border).
  2. When there is more then one char beyond the input field then display .... (We will need to take its width into account in setting cursor position when ... is displayed at the beginning).

@Districh-ru Districh-ru self-requested a review January 25, 2025 18:07
Copy link
Owner

@ihhub ihhub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @felix642 , I left several comments here. Could you please take a look at them?

@ihhub ihhub marked this pull request as draft January 30, 2025 23:02
@felix642 felix642 marked this pull request as ready for review February 8, 2025 18:34
@ihhub ihhub modified the milestones: 1.1.6, 1.1.7 Feb 9, 2025
@ihhub ihhub changed the title Scrollable text input Implement scrollable text input Feb 17, 2025
@ihhub ihhub self-requested a review February 17, 2025 13:02
Copy link
Owner

@ihhub ihhub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @felix642 , I put few more comments here. Can you please check them?


void fitToOneRow( const int32_t maxWidth ) override;

size_t getOffset() const
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What kind of offset it is? Position of the current symbol position in the text? Usually offset means either index offset in 1D array or multi-dimensional vector.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the offset from the beginning of the text, so technically, an index offset in 1D array, do you want me to change it for something else ?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's change it to getOffsetX() as well as the member class to _textOffsetX so it would be obvious what this is for.

@ihhub ihhub self-requested a review February 23, 2025 04:21
@ihhub
Copy link
Owner

ihhub commented Feb 23, 2025

Hi @felix642 , can you please rebase this brach from master branch?

Changed logic a bit to keep the cursor 4 chars from the ends of the text.
Readded truncation symbols whenever the text overflows
@felix642 felix642 force-pushed the scrollable-text-input branch from 0485292 to 8aa221c Compare February 24, 2025 01:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement New feature, request or improvement ui UI/GUI related stuff
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants