Add text layer on top of the canvases

[lfoppiano]

At the moment we use canvas to build the pdf viewer, however in previous versions the text was selectable

https://github.com/lfoppiano/grobid-superconductors/blob/master/src/main/resources/web/grobid/grobid-superconductors.js

[lfoppiano]

@t29mato it seems that this issue might be useful if we want to allow people to copy-paste the rendered text from the viewer. Also in the view of perhaps a future integration in starry data, I was wondering, how much time might would be required to implement it, given we have a working prototype in the grobid JS?

[lfoppiano]

I've been trying to implement this: https://www.sitepoint.com/custom-pdf-rendering/#renderingtextlayers

but it's currently stuck due to a problem with the build

[lfoppiano]

@t29mato I did fix the scaling of the text layers in eb89aae6b6b137aae99d449e6a8fc25123b5da45 but now the annotations have disappeared... 😭

[t29mato]

I'll check it out

[t29mato]

Ah, you've already fixed it here 467fc8cb62c630106318b9ecd02d380553f7d5a1 But, the user experience of copy becomes bad...

[lfoppiano]

Yes, so the issue is that we want to see the annotations but we want to have the transparent text layers on top.

No idea how to do that. I'm already surprised I came this far 😅😅😅

[t29mato]

This is difficult. Setting the z-index of the textLayer class to 11 or higher improves the selection UI, but it prevents annotations from being clickable or hoverable...

[t29mato]

The final solution might be to separate the annotation click mode and text selection mode into different modes, but this is a compromise.

[lfoppiano]

I think with sparse annotations should be no problem. This example is full of annotations and does not respect the reality IMHO. 🤔