Canvas Collaboration: View Other Editors' Mouse

[theroinaochieng]

As a user on the collaborative editor, I would like to be able to see other editors' mouse as they move around the canvas.

[doc-han]

Additional Context

Just sharing x,y positions will obviously not work.
will have to normalize the position values with zoom level and pan to be able to transmit the real position and also represent on the other end well.

Things to deal with to get mouse positioning right.

Normalizing user mouse positioning based on

1. zoom level
2. pan
3. viewport & pixel ratio

[doc-han]

Showing the actual mouse positions wouldn't be an easy task. I suggest we show other users actions based on their selection.

eg. user A selects node "Transform data". then user B's screen has that node colored in user A color with a simple text saying "Editing by user A"

[doc-han]

I've noticed @stuartc already has something in place for connected users current selection.

[stuartc]

@doc-han thats right, there is something called CollaborativeMonaco or something. It should “just work”, like I’m surprised it’s not wired up already, like that was part of the prototype and was waiting to be mounted.

[taylordowns2000]

@stuartc , to be clear, this is to see their MOUSE position, not their cursor. It's on the canvas, not on Monaco. Does this still seem super easy, or was this a language confusion here?

we're talking about miro

[doc-han]

Yeah a bit of confusion.
cursor is to monaco which is already implement.
pointer is to the canvas. (this issue)

After several thought we can normalize user pointer position to the react-flow coordinate position before transmission.
On the other users side, showing this normalized value should just work. with the help of https://v9.reactflow.dev/examples/use-zoom-pan-helper-hook/