Improve the way the IText hidden textarea is positioned.

[KJTsanaktsidis]

Previously, it was positioned as position: fixed at the bottom of
the window. However, on iOS, this has the effect of scrolling the
page all the way to the bottom when the user types. This is because
position: fixed in iOS allows the page to scroll behind the fixed
element if there is a focused input in it.

Now, we put the textarea off to the left at the same height as the
top of the iText; there should be no scrolling. We also make some
attempt to update the position when the text moves on the screen.

Fixes #1985

[asturur]

why width 8888px?
also could you try a situation in wich the page is scrolled to the right, if editing itext scroll.page to left? this would revert to old behavior.

Also i do not know if you can move or resize the itext while editing.

[KJTsanaktsidis]

I found the hidden textarea needed a width, because otherwise the cursor could wind up quite far down the page while doing selections on the iText. As for why 8888px, just because it was smaller than 99999px.

You raise a very valid point about what happens during horizontal scrolling. I have not tested this scenario, so I will do so tomorrow. Unfortunately if you put the textarea within the page viewport, even if it is behind everything, it will still show the cursor on iOS. This seemed to be the best solution I found, but I'll have to do something about horizontal scrolling.

I'm more concerned about what happens when the canvas is resized/zoomed while editing text than what happens if the text is moved. I'm not sure what events to hook to fix this, what would you suggest?

[asturur]

i do not know if canvas zooming trigger any event on objects ( fabric zoom ).

would not standard width of textbox be enough?
maybe 0 was to aggressive, it was a try to have ot on the page but to not click it by chance.

so bad fixed position is not going on ios! it looke like a problem gone :(

@kangax has an ipad

[KJTsanaktsidis]

@asturur you are indeed correct; this solution had problems with horizontal scrolling.

I have now found a way to hide the cursor on iOS (you need to set the font-size to zero). Thus, we can position the hidden textarea directly behind the iText object without having the flashing cursor. I have updated my PR to do this.

I have tested this approach on iOS 7 & 8, Chrome & Firefox on OSX, and IE9 & 11. I saw no unexpected scrolling happening. In some browsers, typing when the textarea is not on the screen caused scrolling to the textarea to occur, but since the textarea now where the iText is, this behaviour is absolutely fine.

[KJTsanaktsidis]

@asturur What do you think of this updated solution?

[KJTsanaktsidis]

It occurs to me that the hidden textarea position should also be updated on canvas scale. I will include something to this effect tomorrow.

[KJTsanaktsidis]

@coulix The cursor mis timing is fixed by #1989

[KJTsanaktsidis]

@kangax @asturur is there any prospect of having this looked at & merged?

[kangax]

@KJTsanaktsidis sorry to keep you waiting! Before merging, I really want to dig into this a little more and try it out myself to see how it works. Hopefully in the next few days!

[asturur]

I was looking into it also, and was aking myself if it was possibile to position the hidden textarea using the mouse coorditanes of the user click event userd to enter editing.

Would it not be simpler? or am i wrong?

We are positioning the textarea in the same position of iText right?
Why we need to update it? there is way to move the itext without exiting and entering edit?

[KJTsanaktsidis]

The idea of putting the hidden textarea in the position the mouse was clicked is probably not a bad one. One thing that worries me is what happens if you have a big iText, click the top, and type many lines, so that eventually you cannot fit the initial textarea location and the place where the cursor is on the same screen. Whenever you type into the iText in this situation, I think it will scroll you back to the top of the iText. Do we therefore need to update the position of the textarea when the cursor moves to always be behind the current cursor location?

[KJTsanaktsidis]

I believe on an iPad this would also have the effect of keeping the current line you are typing on the screen, and scrolling the page behind it as you type lines.

[asturur]

replaced with #2868