UI - Input: Cursor should not shift text content

[aweary]

The issue seems to be that the cursor View is part of the normal content flow, so when it moves it also shifts the characters around. I checked oni2 and it doesn't have this problem since it uses absolute positioning for the cursor and manually calculates the offset. It seems like something similar should be done here for the Input component.

[bryphe]

Thanks for the report & gif, @aweary! Confirmed on Windows - it seems like we're including the cursor in the text calculation (which is shifting the text).

[aweary]

@bryphe I’m happy to work on this if you can give a few code pointers to get started with 🙂

[akinsho]

Would be great to have some help with the input 😍, at the moment the cursor is in the flow which causes this issue. We began discussing some of the ongoing issues with the input in #203. Something we haven't done yet is expose a way of finding out where a character is in the text which would allow us able to position the cursor absolutely

[bryphe]

Definitely, would be awesome to have help @aweary ! 💯

Some ideas for starting out - this code here is important:

revery/src/UI_Components/Input.re

Line 240 in 41f97bd

let (startStr, endStr) = getStringParts(cursorPosition, inputString);

(This is where we split the text and put a cursor in the middle).

We actually have an API to measure text size here:

revery/src/Draw/Text.re

Line 38 in 41f97bd

let measure = (~fontFamily, ~fontSize, text) => {

Instead of rendering the cursor 'in the flow' - we could measure the startStr with this API (getting the fontFamily/fontSize, and the text which we already have with `startStr) - this would give us the size of the string before the cursor in pixels. Then, we could render the cursor absolutely positioned, out of the flow, based on the width of that measurement.

This will get a bit more complicated in the case of multi-line text, but I believe our inputs only handle the single-line case (something we'll have to think about as we extend them to support multi-line!).

[bryphe]

Just a heads up @aweary - looks like @tatchi started this in #419 (don't want to duplicate work 😄 )