Various TextBox / UI issues

[martin-t]

This is a summary of the issues i can into when implementing an in-game console. Most have already been mentioned on discord.

TextBox:

• [x] Ctrl+C panics when trying to copy text selected right-to-left.
• [x] TextBox doesn't render cursor when at the end
• [x] Shift+home/end doesn't select first/last letter
• [x] After focusing a TextBox by clicking on it, the first backspace/delete get ignored. Seems like it happens every time after changing the cursor location by mouse but not by keyboard. EDIT after afa4ad0: now delete seems ignored entirely.
• [x] (Hmm, can't repro this now) TextBox: the cursor disappears after pressing enter (without inserting a newline).
• [x] Selecting text doesn't properly sync with the cursor's position if there are spaces in the text. E.g. type "he lp" and try to select "e l" (both mouse and keyboard, forwards and backwards) - the highlighted part is wrong.
• [x] It's impossible to get the cursor to the end by clicking after the current text - clicking at the end of the last letter puts it before it.
  • [x] It only works if i click on the last letter but if i increase the TextBox's width and click to the right of the text, it doesn't move the cursor.

Text:

• [ ] Word wrap doesn't wrap if a word is too long, it should fall back to letter wrap. I can't tell exactly how long it has to be, it obviously happens for words longer than the widget but there are also some cases where it happens for sequences of shorter words.

The whole UI:

• [x] It doesn't receive keyboard events until a mouse click. This is intentional in that no widget has focus. However, it literally means that those events won't show up in engine.user_interface.poll_message() which can be confusing for new devs. Perhaps the root canvas should have focus by default?
• [ ] There should be a warning when sending messages of the wrong type to widgets - e.g. sending TextMessage to TextBox (instead of TextBoxMessage).

Nice to have:

• Textbox:
  • [x] CTRL+arrow to skip words
  • [x] CTRL+SHIFT+arrow to select words
  • [x] Double click to select a word
  • [ ] Triple click to select everything (or just the line/paragraph)
  • [x] A way to set which chars are considered non-word chars.
  • [x] Shadows
• [x] StackPanel: stacking from the bottom up
  • [ ] Should be mentioned in docs
• [x] UI: A way to request focus.

The Fyrox book:

• [ ] I was told this on discord: "The root element of the UI is Canvas, it has infinite constraints so it does not stretch its contents. If you'll have some complex UI, I'd advise you to create either a window-sized Border or Grid and attach all your ui elements to it, instead of root canvas." I don't think this is explained in the book currently but it's pretty useful to know.
• [x] Explicitly state that there's no way to subscribe to events when creating widgets (like in most? other UI toolkits) - the user is supposed to write their own dispatcher.

[mrDIMAS]

@martin-t Could you please re-check issues with text box (and maybe other stuff) and mark them with Fixed (or similar) tag? I think I fixed most (if not all) of them.

As for StackPanel: stacking from the bottom up - it is already possible: set vertical alignment of the panel to Bottom and stack panel's orientation to Vertical.

[martin-t]

I updated the issue. All major issues are fixed, the rest is mostly papercuts, my console is fully usable (and i'll soon separate it into a reusable crate).

Thanks for the info about stack panel, that works too.

[mrDIMAS]

It only works if i click on the last letter but if i increase the TextBox's width and click to the right of the text, it doesn't move the cursor. should be fixed now.

CTRL+arrow to skip words is added too.

[mrDIMAS]

@martin-t what is meant by A way to set which chars are considered non-word chars.?

[martin-t]

@martin-t what is meant by A way to set which chars are considered non-word chars.?

I'd like to be able to set chars like - and _ to be treated like whitespace. It could be hardcoded but some people might not like that so i figured it would be best to make it configurable. Motivation is so that when i have cvars named such as g_balance_machine_gun_explosion_damage, it would be nice to skip words with ctrl+arrow.

BTW noticed a tiny annoyance with ctrl+arrow - it doesn't reset the cursor's blinking state to visible - if you press ctrl+arrow several times when the cursor is not visible, it feels like it disappeared completely because each press seems to reset the timer.

[mrDIMAS]

It turned out that you found not all issues 😄 . There were tons of them, text box was bugged as hell.

[martin-t]

If it makes you feel any better, just recently i ran across this quote:

There’s so much work involved in making a fully functional text input box that it is something of a litmus test for how far along a UI toolkit has gotten.

Anyway, one of your commit messages mentioned wrap which reminded me that word wrap is also broken (i tested text widget but likely also for textbox). :P

[mrDIMAS]

CTRL+SHIFT+arrow to select words done in https://github.com/FyroxEngine/Fyrox/commit/a6038b2c2bb38a4536f17013b1b926bad8c06b84

Explicitly state that there's no way to subscribe to events when creating widgets is done in https://fyrox-book.github.io/fyrox/ui/basic_concepts/basic_concepts.html#message-passing

[mrDIMAS]

@martin-t What do you mean by Shadows in one of your requests?

[martin-t]

@martin-t What do you mean by Shadows in one of your requests?

Drawing the text one more time with an offset like this

It's useful to make text stand out because no matter what color there are always gonna be environments where it's hard to see. Some games even draw an outline around the whole text:

I am not sure which would be better or easier to implement.

[mrDIMAS]

Wouldn't it be enough to just use a font with built-in outline? You can check one from here for example.

[mrDIMAS]

@martin-t I added shadows, please check if that's what you need.

[mrDIMAS]

Skip chars list is added too.

[mrDIMAS]

Alright, major issues are fixed, the rest of improvements will be done later. I'm already a bit tired of fixing these issues, wanna focus on something else.

[martin-t]

@martin-t I added shadows, please check if that's what you need.

Yup. I am using dilation 0 and offset [1,1] because that seems to give the most legible results for me.

I don't think dilation can be used to achieve the effect in my second example if that's what you intended. Dilation just makes the shadow bigger, the outline effect would require some kind of filter to make neighboring pixels dark. It could be hacked together by applying 4 shadows with the 4 possible diagonal offsets, maybe... But it's not important, the single 1 pixel shadow is what i wanted originally anyway, i only gave this as an example how it makes the text easier to read.

I'm already a bit tired of fixing these issues, wanna focus on something else.

That's understandable. I didn't expect you to fix so many of them at such a speed. :)

My console works pretty well now, so when i publish the crate hopefully it'll bring some more attention to fyrox.

[mrDIMAS]

The rest of the issues (most of them) should be fixed by now.