lightning icon indicating copy to clipboard operation
lightning copied to clipboard

Canvas Collaboration: View Other Editors' Mouse

Open theroinaochieng opened this issue 5 months ago • 4 comments

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

theroinaochieng avatar Oct 22 '25 11:10 theroinaochieng

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 avatar Oct 31 '25 08:10 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 avatar Oct 31 '25 12:10 doc-han

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

doc-han avatar Oct 31 '25 12:10 doc-han

@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.

stuartc avatar Oct 31 '25 16:10 stuartc

@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

taylordowns2000 avatar Nov 18 '25 16:11 taylordowns2000

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/

doc-han avatar Nov 18 '25 17:11 doc-han