alpheios-project / arethusa

Arethusa: Annotation Environment
http://sosol.perseids.org/tools/arethusa
MIT License
34 stars 26 forks source link

Mobile: easy to loose the diagram when scrolling up and down #814

Open monzug opened 4 years ago

monzug commented 4 years ago

mobile: the new treebank diagram looks better in portrait view rather than landscape (at least in my mobile iPhone XR) - one funny thing about the diagram is that I can scroll it down for ever and also up for ever, easy to get lost in the scrolling and to get a blank page. I think we should fix the size of the scrolling area, if possible.

balmas commented 4 years ago

Hmm, yes I see what you mean about the scrolling. This is reproducible on the desktop too.

@kirlat this isn't really in the Alpheios core code I don't think - but in the Arethusa application, but I'm wondering if you can advise me what I need to do there to fix it.

You can reproduce by loading the tree for the word animus at https://texts-test.alpheios.net/text/urn:cts:latinLit:phi0959.phi006.alpheios-text-lat1/passage/1.1-1.30 and then dragging the tree as in the video at

https://www.awesomescreenshot.com/video/185527?key=8faa0afc1491306dc0088c15e8992c59

kirlat commented 4 years ago

What's interesting is that when I open a tree, in both Chrome and FF, it is displayed enlarged: image It is shown as if the "perfect width" display option is on by default. It applies to all words from the same sentence clause: In nova fert animus mutatas dicere formas corpora. It is not surprising because all those words are within the same tree.

Words form other clauses are shown correctly: image This is an example for a word from a second clause of the same sentence, di , coeptis (nam vos mutastis et illas) adspirate meis primaque ab origine mundi ad mea perpetuum deducite tempora carmen.

Is it the same for you or is it just me?

balmas commented 4 years ago

yeah I noticed this too. The refreshView normally tries to reset the tree to the "perfect width" but it doesn't seem to be working right for this sentence for some reason.

kirlat commented 4 years ago

I've noticed that when we drag the tree with the mouse, its transform: translate positions are changing: image I don't know how is this happening but probably there is some JS somewhere that tracks mouse moves and adjusts CSS rules for the SVG element.

The solution would be, I think, to adjust that JS code so that coordinates would always be within a certain range. It should obtain the current size of an SVG element (because it can be scaled), the size of a parent div (because a panel can be scaled) and set limits on translate values so that a full diagram, or a part of it, be always visible on the screen.

That is to the best of my understanding.

balmas commented 4 years ago

ok, thank you. I'll move this to the Arethusa repo. I don't think it will make the release, but I will look into it post-release.