Skip to content

Fix edge case with Adder#486

Closed
jccr wants to merge 1 commit intohypothesis:masterfrom
evidentpoint:adder-edge-case
Closed

Fix edge case with Adder#486
jccr wants to merge 1 commit intohypothesis:masterfrom
evidentpoint:adder-edge-case

Conversation

@jccr
Copy link
Contributor

@jccr jccr commented Jul 6, 2017

An issue with the adder not showing up was encountered when testing the integration with the Readium EPUB reader.
The issue was caused by the way Readium renders the document content. CSS Multiple Columns properties are applied at the root element level which cause the body element to be "split" into columns with multiple left based offsets.

The fix is to query the body element's client rectangle geometry at the time the adder is being displayed and adjust by the left offsets.

@codecov
Copy link

codecov bot commented Jul 6, 2017

Codecov Report

Merging #486 into master will decrease coverage by 0.01%.
The diff coverage is 66.66%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #486      +/-   ##
==========================================
- Coverage    89.9%   89.89%   -0.02%     
==========================================
  Files         134      134              
  Lines        5241     5244       +3     
  Branches      905      906       +1     
==========================================
+ Hits         4712     4714       +2     
- Misses        529      530       +1
Impacted Files Coverage Δ
src/annotator/adder.js 87.5% <66.66%> (-0.68%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1d0f782...a07f816. Read the comment docs.

@robertknight
Copy link
Contributor

@jccr - What's the easiest way to test this with a standalone HTML page?

@jccr
Copy link
Contributor Author

jccr commented Jul 7, 2017

@robertknight
Give this HTML a shot: https://gist.github.com/JCCR/27f6dddf0f4341d68654409955361bb3
Press any key to "flip" the page, then you should be able to reproduce the issue.

@robertknight
Copy link
Contributor

Possibly related: #487

@robertknight
Copy link
Contributor

The problem here actually happened earlier before Adder#target was called. The input rect is supposed to be in coordinates relative to the document element, but the conversion from viewport coordinates to "document" coordinates in mapViewportRectToDocument is incorrect because it only takes into account the scrollLeft, scrollTop of the document element (via window.pageXOffset and window.pageYOffset) but not the top/left position of the document element.

Additionally, code in Adder#target then tries to adjust the adder to fit within the coordinates of the viewport but doesn't allow for the possibility of a document element with a top/left other than 0,0. In #487 I outline what I think will be the best solution which is to use viewport coordinates everywhere, but I need to investigate this in a little more detail. I'll get back to you on Monday.

@robertknight
Copy link
Contributor

I've investigated a couple of options for addressing the issue described in #486 (comment) and the related issue described in #487 and have created a follow-up PR in #493 which addresses both and adds some tests.

If you get a chance, could you please try out the PR (#493) and let me know if that works correctly with Readium?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants