//如下实现live cursor组件：

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 });
        //Liveblocks method to set the curren cursor positon
        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();

                    //fixing the x, y position of cursor in other screen inside of react flow
                    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 accurately displays it in the correct position on     other users' screens. */
                    <Cursor key={other.id} x={xPos} y={yPos} />
                    )
                })
            }
        </>
}
export default LiveCursor

字符串
将组件作为子组件传递给ReactFlow组件，并确保此组件的位置设置为绝对位置。

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>

型