search

ggerganov / imtui

ImTui: Immediate Mode Text-based User Interface C++ Library
https://imtui.ggerganov.com
MIT License
2.94k stars 123 forks source link

Cursor position desync after moving a window #4

Closed FrankvdStam closed 4 years ago

FrankvdStam commented 4 years ago

After moving a window, the cursor selects buttons slightly higher then were the cursor is drawn. I'm talking about moving an ImTui window, not the whole browser window. Having the issue on Firefox 71.0 (64-bit).

FrankvdStam commented 4 years ago

Looks like other windows work fine, only the window I moved is affected.

ggerganov commented 4 years ago

This looks like a problem with the Emscripten port. I had to find a way to calculate the mouse position in the "terminal" based on the mouse position in the browser. To do this, I assumed a fixed font size is used in the browser. The relevant code is here:

https://github.com/ggerganov/imtui/blob/e047a695c61c073a00fc475d753bfd82121fa00f/examples/emscripten0/index-tmpl.html#L28-L33

and later:

https://github.com/ggerganov/imtui/blob/e047a695c61c073a00fc475d753bfd82121fa00f/examples/emscripten0/index-tmpl.html#L71-L74

I knew this is a "hacky" way, and it won't always work, but I couldn't figure out a way to get the actual character size for the current browser.

I believe this should not happen when used in the terminal. As for the browser - suggestions are welcome.

FrankvdStam commented 4 years ago

It's a scaling issue - if you move the window back to the top left corner, the cursor is back in the correct place. Move it down and you can see it desyncing from the cursor position. Move it back up and you see it matching up again.

Also notice how only height is affected; if you move the window right instead of down, the positions don't desyc.

I bet the character height is slightly off.

ggerganov commented 4 years ago

I bet the character height is slightly off.

That is correct. The question is how to determine the character height/width correctly. I also tried Firefox 71.0 (64-bit) on Ubuntu 18.04 and I don't observe a vertical offset. However, I do observe a horizontal offset. Maybe the character spacing is not a function of just the browser, but also some other factors.

Here is a Stack Overflow thread that might turn out to be useful in solving this problem.

FrankvdStam commented 4 years ago

I see someone posted a solution, converting every letter to an element seems excessive. Don't know what this will do to performance in the long run/if you have a lot of text. Calculating the position scales better. I'll see if I can find a better solution tomorrow.

FrankvdStam commented 4 years ago

Can't get build to work. Will have to postpone.

ggerganov commented 4 years ago

@FrankvdStam I believe I found the right way to calculate the character size with 789c3a6. I create a single-character <span> element and get it's size with getBoundingClientRect()

FrankvdStam commented 4 years ago

I still can't build and therefore can't test. Let me know when you have this live somewhere?

ggerganov commented 4 years ago

It's live at imtui.ggerganov.com

FrankvdStam commented 4 years ago

Yes, works properly now. Well done. Also works on Firefox android.