Closed mattkrick closed 4 years ago
i think we arrived at a good heuristic in the grouping phase. we can use that same heuristic for other areas where we want to share cursor position
I still think this is a good idea. Could we re-open this one @mattkrick ?
why sure!
Stale issue
shuttin er down
When i'm in a meeting, i want to share my mouse cursor with other folks whenever i hold down the shift key.
There are a few challenges with this:
solving for scroll position would require sharing the element that i'm on top of and the scrollTop of that element. Then, if that isn't visible for another client, we just show some down arrows like super smash bros. if you click those down arrows, it'll auto scroll to where i am.
the scroll coordinates problem is harder. imagine i'm in portrait & you're in landscape. it's not enough for you to know the %x and %y of the viewport that i'm at because you really want to know what i'm on top of. conversely, if i share the element that i'm on top of & i move 2px off of it, i should still be near that thing.for example, if i'm in between cards 2 & 3, my mouse is currently in the body, but i want to share that i'm between cards 2 and 3. my 2 & 3 might be LTR, and your 2 & 3 might be top to bottom. when i drag my mouse from the left of 2 to the right of 3, how can i transpose that to the top of 2 to the bottom of 3 for you? that's not possible, so we need to compromise somewhere. Priority number 1 is to put the cursor on top of the thing that i'm on top of.
SPEC - SERVER
Each mousemove sends the following data:
target
element. if the element does not have a class, it climbs recursively until it finds one. This becomes the reference node.node.__reactInternalIntersance$...
and recursively look at thereturn
prop until we find a nonnullkey
value or the absence of anotherreturn
prop. Record how many times we looked intoreturn
and the key at that time. That becomesancestorsToClimb, ancestorKey
.node.getBoundingClientRect()
to get theleft, top, width, height
of the reference node.x,y
from the mousemove event itselfelX, elY
coords tell you where within the element the cursor is:Math.abs(x - left), Math.abs(y - top)
.SPEC - CLIENT
document.getElementsByClassName(className)
to get a list of the possible elementsancenstorsToClimb
timesancestorKey
matches (it could be null), break. if it's never found, return & ignore the payloadnode.getBoundingClientRect()
to get theleft, top, width, height
of the reference node.elX / elWidth, elY / elHeight
. Memoize & record event in a stackxDiff = x(t) - x(t-1)
). if the cursor is within NEARBY_THRESHOLD (TBD), add the diff to the previous event to determine the location. Multiply it by an element area coefficient:myElementWidth / serverElementWidth) * xDiff + x(t-1)
. For example, if the server was 5 pixels away from the right border of a button & the next event shows 5 pixels to the right of that button & my screen is 90% the width of the server, this will find a diff of 10 * .9 = 9 pixels to the right of the previous location.@jordanh we're basically building a coordinate transposition engine here. any holes you can poke in this now will save a ton of time later!
use cases:
assumptions:
shortcomings:
Options considered to arrive at the spec:
effort: 13 points
acceptance criteria:
User A is in the group phase and the window is wide enough for 4 columns
User B is in the group phase and window is wide enough for 3 columns
[ ] User A: hold down the mouse cursor when in between card 1 and 2, it appears for User B
[ ] User A: move cursor to card 1, the movement is mirrored for User B
[ ] User A: draw a circle around card 1, the movement is mirrored for User B
[ ] User A: leave card 1 and without touching any other card, go below card 4. the cursor is under card 3 for User B
[ ] User A: move into card 4, the cursor jumps to card 4 for User B
[ ] scrolling behavior & alerts are NOT handled in this PR