charCoords(, "local") returns inconsistent results

[petasis]

Hi all,

I am facing a problem regarding the values returned by charCoords().
I am using the result of charCoords() to draw a rectangle over some characters. And I have identified 3 cases (two of them shown in the following image):

1. Case 1 is where everything works, as for the green, brown & gray marks, where my green rectange exactly matches the mark in codemirror.

2. Case 2, when there are differences in detecting the mark end. In this case, I have noticed that always capital letters are involved in the underlying codemirror mark I want to reproduce.

3. Case 3 (not shown in the image), is when a long line is involved. In this case I get return values that can be moved horizontally almost half a window, like in the following image:

The code that draws all rectangles is the same. In the case of the long line, the return value from charCoords({line:1, ch:0}, “page”) can have a left property in the range of 400-500 pixels.

Am I doing anything wrong?

(The function that draws the green boxes is here: clarin-el-annotation-tool/text-widget.js at 01e41c5f2f2d02715d61d43444225e68e47c6d91 · iit-Demokritos/clarin-el-annotation-tool · GitHub)

[marijn]

You’ll need to at least reduce the problem to a minimal setup in order to determine where the problem lies. The editor’s cursor drawing uses the same code as charCoords, so if the cursor is in the correct place at a given character, the library is able to determine its proper coordinates.

[petasis]

I do not use the cursor (my editor is in readonly mode). I removed the readonly flag, and the cursor is now visible. The results are mixed:

If I use the mouse, the cursor goes correctly where I have clicked.

If I use the arrows to move the cursor, I get errors (the cursor jumps to irrelevant positions).

[marijn]

Did the editior get initialized without being visible in the dom, or did any fonts or styles load or change after the editor initialized? It may be necessary to call refresh() on the editor object to make it clear its layout caches.

[petasis]

I am calling refresh in many cases. My typical usage is to intialise codemirror while it is not visible (it is an angularjs application so I am not sure when the directive gets run), but I call refresh just after I put my content, and when a resize happens. I think this is not a problem, but I will check more into this.
(I will put a button to call resize() just to be sure).

[petasis]

I have mapped cm.refresh() to a key (Space), so when I press space refresh() is called.
So, my editor is visible, I press space, refresh() gets called, and then:

editor.charCoords({line:1, ch:0}, "page") 
Object { left: 1172.4166412353516, right: 1172.4166412353516, top: 1492.2666625976562, bottom: 1521.5333251953125 }

charCoords() for the first character returns something wild. The first character cannot be in this position o the page…

[petasis]

I think I have found the problem: line numbering.

According to the documentation, codemirror has a configuration option:

firstLineNumber: integer
At which number to start counting lines. Default is 1.

To make sure, I have added this option, set to 1 (which according to the documentation is by default 1).

And then, I get this:

editor.firstLine(): 0
editor.charCoords({line:1, ch:0}, "page") Object { left: 1172.4166412353516, right: 172.4166412353516, top: 1492.2666625976562, bottom: 1521.5333251953125 }
editor.charCoords({line:1, ch:0}, "window") Object { left: 1172.4166412353516, right: 172.4166412353516, top: 1492.2666625976562, bottom: 1521.5333251953125 }
editor.charCoords({line:1, ch:0}, "local") Object { left: 1142.4166412353516, right: 1142.4166412353516, top: 1350.2666625976562, bottom: 1379.5333251953125 }
editor.charCoords({line:0, ch:0}, "page") Object { left: 41.91667175292969, right: 52.19999694824219, top: 146, bottom: 175.26666259765625 }
editor.charCoords({line:0, ch:0}, "window") Object { left: 41.91667175292969, right: 52.19999694824219, top: 146, bottom: 175.26666259765625 }
editor.charCoords({line:0, ch:0}, "local") Object { left: 11.916671752929688, right: 22.199996948242188, top: 4, bottom: 33.26666259765625 }

The coordinates are correct for line 0. The wrong coordinates are for line 1.
If lines start from 0, this is reasonable: there is no line 1, so I get the last character of line 0?

But why am I getting lines starting from 0, since my option & the documentation suggest otherwise?

[marijn]

The firstLineNumber option only affects the numbers shown in the gutter. Locations still count lines from 0, regardless of what you set this option to.