Commit c867b220 authored by Ategon's avatar Ategon Committed by Grant
Browse files

Fix cursor positions while panning

parent 85e063a9

packages/client/src/components/CursorPresenceLayer.tsx

+16 −16
Original line number Diff line number Diff line
@@ -355,9 +355,6 @@ export const CursorPresenceLayer = () => { 
    let reactionBlockedUntil = 0;

    let reactionBlockedCooldown: CursorReactionCooldown | undefined;

    let reactionCooldownTimer: number | undefined;

    let lastSurfacePoint:

      | { active: boolean; clientX: number; clientY: number }

      | undefined;

    let pendingVisualPosition: { x: number; y: number } | undefined;



    const sendCursor = throttle(
@@ -459,7 +456,6 @@ export const CursorPresenceLayer = () => { 
      x?: number;

      y?: number;

    }) => {

      lastSurfacePoint = { active, clientX, clientY };

      if (!active || x === undefined || y === undefined) {

        const hasActiveReaction = Boolean(

          localElement.current?.querySelector(".collaborative-cursor-reaction"),
@@ -665,22 +661,25 @@ export const CursorPresenceLayer = () => { 
        lastPublishedZoom = scale;

        sendZoom(scale);

      }

      if (localActive.current && lastSurfacePoint?.active) {

        const [x, y] = canvas.screenToPos(

          lastSurfacePoint.clientX,

          lastSurfacePoint.clientY,

        );

        publishPresence(

          lastSurfacePoint.clientX,

          lastSurfacePoint.clientY,

          x,

          y,

        );

      }

      scheduleViewport();

    };

    const viewportTransformObserver = new MutationObserver(() => {

      handleViewportMove({ scale: PanZoom.transform.scale });

    });

    const observeViewportTransform = () => {

      const element = PanZoom.$move;

      if (!element) return;



      viewportTransformObserver.disconnect();

      viewportTransformObserver.observe(element, {

        attributes: true,

        attributeFilter: ["style"],

      });

    };

    observeViewportTransform();



    const handleInitialize = () => {

      observeViewportTransform();

      handleViewportMove({ scale: PanZoom.transform.scale });

      requestViewport(true);

    };
@@ -809,6 +808,7 @@ export const CursorPresenceLayer = () => { 
        window.clearTimeout(viewportRetryTimer);

      }

      resizeObserver.disconnect();

      viewportTransformObserver.disconnect();

      socket.emit("cursorUnsubscribe");

      socket.off("cursorFrame", applyFrame);

      socket.off("cursorRemove", handleRemove);