Skip to content

Fix adder position when document or body position is offset.#493

Merged
robertknight merged 2 commits intomasterfrom
adder-positioning-fixes
Jul 11, 2017
Merged

Fix adder position when document or body position is offset.#493
robertknight merged 2 commits intomasterfrom
adder-positioning-fixes

Conversation

@robertknight
Copy link
Contributor

@robertknight robertknight commented Jul 10, 2017

Fix positioning of the adder when the document and/or body elements are
positioned and offset relative to their default position.

There were two problems:

  1. When converting from viewport to "document" coordinates, code in
    adder.js and range-util.js failed to account for the document
    element's position being offset from the default (0, 0) location.
  2. When setting the adder's top/left coords, Adder#showAt
    did not take into account the offset of the body element from the
    top-left corner of the document element.

This commit fixes the issue by:

  1. Using viewport coordinates as far as possible in the range-util and
    Adder functions to reduce the need for converting coordinates.

  2. Calculating the position of the adder by comparing the target
    viewport coordinates for the adder and the viewport coordinates of
    the adder's nearest positioned ancestor.

Fixes #487
Also fixes the issue described in #486

The easiest way to understand the changes is probably to look at the three tests added for Adder#showAt: https://github.com/hypothesis/client/pull/493/files#diff-a251082cf4ba541e58bd7fb2434e557bR135

Fix positioning of the adder when the document or body elements are
positioned and offset relative to their default position.

There were two problems:

 1. When converting from viewport to "document" coordinates, code in
    `adder.js` and `range-util.js` failed to account for the document
    element's position being offset from the default (0, 0) location.
 2. When setting the adder's top/left coords, `Adder#showAt`
    did not take into account the offset of the body element from the
    document.

This commit fixes the issue by:

 1. Using viewport coordinates as far as possible in the range-util and
    Adder functions to reduce the need for converting coordinates.

 2. Calculating the position of the adder by comparing the target
    viewport coordinates for the adder and the viewport coordinates of
    the adder's nearest positioned ancestor.

Fixes #487
@codecov
Copy link

codecov bot commented Jul 10, 2017

Codecov Report

Merging #493 into master will increase coverage by 0.42%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #493      +/-   ##
==========================================
+ Coverage    89.9%   90.33%   +0.42%     
==========================================
  Files         134      135       +1     
  Lines        5241     5399     +158     
  Branches      905      936      +31     
==========================================
+ Hits         4712     4877     +165     
+ Misses        529      522       -7
Impacted Files Coverage Δ
src/annotator/adder.js 97.05% <100%> (+8.88%) ⬆️
src/annotator/range-util.js 94.23% <100%> (-0.51%) ⬇️
src/sidebar/oauth-auth.js 99.08% <0%> (-0.92%) ⬇️
src/sidebar/host-config.js 100% <0%> (ø) ⬆️
src/sidebar/reducers/frames.js 100% <0%> (ø) ⬆️
src/sidebar/util/random.js 100% <0%> (ø)
src/sidebar/components/hypothesis-app.js 91.22% <0%> (+1.81%) ⬆️
src/sidebar/session.js 97.47% <0%> (+2.18%) ⬆️

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...fded65c. Read the comment docs.

@jccr
Copy link
Contributor

jccr commented Jul 10, 2017

@robertknight LGTM, fixes my issue. Thanks

@robertknight
Copy link
Contributor Author

Thanks for taking a look!

@robertknight robertknight merged commit 845eef5 into master Jul 11, 2017
@robertknight robertknight deleted the adder-positioning-fixes branch July 11, 2017 06:43
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.

Adder position incorrect on page with positioned, centered body.

2 participants