// Here is the implementation of the live cursor component:
import { FC, useEffect } from "react";
import { useReactFlow } from "reactflow"
import useLiveBlocksStore from "@/stores/useLiveBlocksStore";
interface LiveCursorProps {
cursorPos: { x: number, y: number };
}
const LiveCursor: FC<LiveCursorProps> = ({cursorPos }) => {
const reactFlowInstance = useReactFlow()
const {
updateMyPresence,
liveblocks: { others },
} = useLiveBlocksStore()
useEffect(() => {
const position = reactFlowInstance.project({ x: cursorPos.x, y: cursorPos.y });
//Method to set the current cursor position using Liveblocks
updateMyPresence({
cursor: { x: Math.round(position.x), y: Math.round(position.y) }
})
}, [cursorPos])
return (
<>
{
others.map((other) => {
if (other.presence.cursor == null) {
return null
}
// get current Reactflow screen viewPort
const otherViewPort = reactFlowInstance.getViewport();
let xPos = other.presence.cursor.x * otherViewPort.zoom + otherViewPort.x;
let yPos = other.presence.cursor.y * otherViewPort.zoom + otherViewPort.y;
return (
/* The cursor component takes the x and y coordinates of the cursor
and displays it accurately on other users' screens. */
<Cursor key={other.id} x={xPos} y={yPos} />
)
})
}
</>
}
export default LiveCursor
Include your component as a child component within the ReactFlow component, ensuring its position is set to absolute.
const [cursorPos, setCurosrPos] = useState({ x: 0, y: 0 })
const handleMouseMove = (event: React.MouseEvent) => {
setCurosrPos({ x: event.clientX, y: event.clientY });
};
return <div style={{position:"absolute",left:0, top:0, overflowY:"auto", width:"100vw" height:"100vh"}} >
<ReactFlow
fitView
nodes={nodes}
edges={edges}
onMouseMove={handleMouseMove}
>
<div style={{zIndex:10,position:"absolute"}} >
<LiveCursors cursorPos={cursorPos} />
</div>
</ReactFlow>
</div>