canvu-react 0.3.7 → 0.3.9

package/dist/realtime.cjs

@@ -235,6 +235,19 @@ function parseCursor(value) {
   if (x == null || y == null) return void 0;
   return { x, y };
 }
+function parseCamera(value) {
+  if (value === null) return null;
+  if (!isRecord(value)) return void 0;
+  const x = getNumber(value.x);
+  const y = getNumber(value.y);
+  const zoom = getNumber(value.zoom);
+  const viewportWidth = getNumber(value.viewportWidth);
+  const viewportHeight = getNumber(value.viewportHeight);
+  if (x == null || y == null || zoom == null || viewportWidth == null || viewportHeight == null) {
+    return void 0;
+  }
+  return { x, y, zoom, viewportWidth, viewportHeight };
+}
 function parseMarkupStroke(value) {
   if (value === null) return null;
   if (!isRecord(value) || !Array.isArray(value.points)) return void 0;
@@ -258,9 +271,12 @@ function parsePresencePayload(value) {
   const markupStroke = parseMarkupStroke(value.markupStroke);
   if (markupStroke === void 0 && value.markupStroke !== void 0)
     return void 0;
+  const camera = parseCamera(value.camera);
+  if (camera === void 0 && value.camera !== void 0) return void 0;
   return {
     cursor,
     ...markupStroke !== void 0 ? { markupStroke } : {},
+    ...camera !== void 0 ? { camera } : {},
     ...getString(value.activeTool) ? { activeTool: getString(value.activeTool) } : {}
   };
 }
@@ -294,6 +310,8 @@ function parseRealtimeSessionPeer(value) {
   const markupStroke = parseMarkupStroke(value.markupStroke);
   if (markupStroke === void 0 && value.markupStroke !== void 0)
     return void 0;
+  const camera = parseCamera(value.camera);
+  if (camera === void 0 && value.camera !== void 0) return void 0;
   const isSelf = value.isSelf === true;
   const connectionState = getString(value.connectionState);
   return {
@@ -309,6 +327,7 @@ function parseRealtimeSessionPeer(value) {
     ...getString(value.color) ? { color: getString(value.color) } : {},
     ...getString(value.image) ? { image: getString(value.image) } : {},
     ...markupStroke !== void 0 ? { markupStroke } : {},
+    ...camera !== void 0 ? { camera } : {},
     ...getString(value.activeTool) ? { activeTool: getString(value.activeTool) } : {},
     ...connectionState ? { connectionState } : {}
   };
@@ -1520,20 +1539,21 @@ function useRealtimeComments({
     }),
     [author.color]
   );
-  const onViewportItemsChange = react.useCallback(
-    (nextItems) => {
+  const handleViewportItemsChange = react.useCallback(
+    (nextItems, overrideOnItemsChange) => {
+      const applyItemsChange = overrideOnItemsChange ?? onItemsChange;
       const currentIds = new Set(items.map((item) => item.id));
       const draftItem = nextItems.find(
         (item) => !currentIds.has(item.id) && isRealtimeCommentDraftItem(item)
       );
       if (!draftItem) {
-        onItemsChange(nextItems);
+        applyItemsChange(nextItems);
         return;
       }
       const filteredItems = nextItems.filter((item) => item.id !== draftItem.id);
       const shouldPersistFiltered = filteredItems.length !== items.length || filteredItems.some((item, index) => items[index]?.id !== item.id);
       if (shouldPersistFiltered) {
-        onItemsChange(filteredItems);
+        applyItemsChange(filteredItems);
       }
       setCommentComposer({
         worldX: draftItem.bounds.x + draftItem.bounds.width / 2,
@@ -1633,22 +1653,159 @@ function useRealtimeComments({
   const viewport = react.useMemo(
     () => ({
       customPlacement,
-      onItemsChange: onViewportItemsChange,
+      onItemsChange: (nextItems) => handleViewportItemsChange(nextItems),
       onCameraChange
     }),
-    [customPlacement, onCameraChange, onViewportItemsChange]
+    [customPlacement, handleViewportItemsChange, onCameraChange]
   );
   return react.useMemo(
     () => ({
       tools,
       overlay,
       viewport,
+      handleViewportItemsChange,
       isComposerOpen: commentComposer != null,
       closeComposer
     }),
-    [closeComposer, commentComposer, overlay, tools, viewport]
+    [
+      closeComposer,
+      commentComposer,
+      handleViewportItemsChange,
+      overlay,
+      tools,
+      viewport
+    ]
   );
 }
+var viewportFollowSyncSnapshots = /* @__PURE__ */ new WeakMap();
+function getFollowedPeer(sessionPeers, followedPeerId) {
+  return sessionPeers.find(
+    (peerState) => peerState.peerId === followedPeerId || peerState.id === followedPeerId
+  );
+}
+function getCameraKey(peer) {
+  if (!peer.camera) return null;
+  return [
+    peer.peerId,
+    peer.camera.x,
+    peer.camera.y,
+    peer.camera.zoom,
+    peer.camera.viewportWidth,
+    peer.camera.viewportHeight
+  ].join(":");
+}
+function getViewportSizeKey(viewport) {
+  if (!viewport) return null;
+  const viewportSize = viewport.getViewportSize();
+  return [viewportSize.width, viewportSize.height].join(":");
+}
+function getFollowedCameraPosition(viewport, peer) {
+  if (!peer.camera) return null;
+  const viewportSize = viewport.getViewportSize();
+  return {
+    x: peer.camera.x + (viewportSize.width - peer.camera.viewportWidth) / 2,
+    y: peer.camera.y + (viewportSize.height - peer.camera.viewportHeight) / 2,
+    zoom: peer.camera.zoom
+  };
+}
+function applyPeerCamera(viewport, peer) {
+  const camera = viewport.getCamera();
+  const nextCamera = getFollowedCameraPosition(viewport, peer);
+  const viewportSize = viewport.getViewportSize();
+  if (!camera || !nextCamera) return false;
+  if (camera.x === nextCamera.x && camera.y === nextCamera.y && camera.zoom === nextCamera.zoom) {
+    return true;
+  }
+  markViewportFollowSync(viewport, {
+    x: nextCamera.x,
+    y: nextCamera.y,
+    zoom: nextCamera.zoom,
+    viewportWidth: viewportSize.width,
+    viewportHeight: viewportSize.height
+  });
+  camera.x = nextCamera.x;
+  camera.y = nextCamera.y;
+  camera.zoom = nextCamera.zoom;
+  viewport.requestRender();
+  return true;
+}
+function markViewportFollowSync(viewport, snapshot) {
+  viewportFollowSyncSnapshots.set(viewport, snapshot);
+}
+function consumeViewportFollowSync(viewport, snapshot) {
+  const currentSnapshot = viewportFollowSyncSnapshots.get(viewport);
+  if (!currentSnapshot || currentSnapshot.x !== snapshot.x || currentSnapshot.y !== snapshot.y || currentSnapshot.zoom !== snapshot.zoom || currentSnapshot.viewportWidth !== snapshot.viewportWidth || currentSnapshot.viewportHeight !== snapshot.viewportHeight) {
+    return false;
+  }
+  viewportFollowSyncSnapshots.delete(viewport);
+  return true;
+}
+function useRealtimePeerFollow(options) {
+  const { viewportRef, sessionPeers, followedPeerId, onFollowEnd } = options;
+  const endedPeerIdRef = react.useRef(null);
+  const lastAppliedCameraKeyRef = react.useRef(null);
+  const [viewportSizeVersion, setViewportSizeVersion] = react.useState(0);
+  react.useEffect(() => {
+    if (!followedPeerId) return;
+    let animationFrameId = 0;
+    let lastViewportSizeKey = getViewportSizeKey(viewportRef.current ?? null);
+    const checkViewportSize = () => {
+      const nextViewportSizeKey = getViewportSizeKey(viewportRef.current ?? null);
+      if (nextViewportSizeKey !== lastViewportSizeKey) {
+        lastViewportSizeKey = nextViewportSizeKey;
+        setViewportSizeVersion((value) => value + 1);
+      }
+      animationFrameId = window.requestAnimationFrame(checkViewportSize);
+    };
+    animationFrameId = window.requestAnimationFrame(checkViewportSize);
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [followedPeerId, viewportRef]);
+  react.useEffect(() => {
+    if (!followedPeerId) {
+      endedPeerIdRef.current = null;
+      lastAppliedCameraKeyRef.current = null;
+      return;
+    }
+    const followedPeer = getFollowedPeer(sessionPeers, followedPeerId);
+    if (!followedPeer) {
+      lastAppliedCameraKeyRef.current = null;
+      if (endedPeerIdRef.current === followedPeerId) {
+        return;
+      }
+      endedPeerIdRef.current = followedPeerId;
+      onFollowEnd?.();
+      return;
+    }
+    if (!followedPeer.camera) {
+      endedPeerIdRef.current = null;
+      lastAppliedCameraKeyRef.current = null;
+      return;
+    }
+    endedPeerIdRef.current = null;
+    const viewport = viewportRef.current;
+    const nextCameraKey = [
+      getCameraKey(followedPeer),
+      getViewportSizeKey(viewport ?? null)
+    ].join(":");
+    if (nextCameraKey && nextCameraKey === lastAppliedCameraKeyRef.current) {
+      return;
+    }
+    if (!viewport || !applyPeerCamera(viewport, followedPeer)) {
+      return;
+    }
+    lastAppliedCameraKeyRef.current = nextCameraKey;
+  }, [
+    followedPeerId,
+    onFollowEnd,
+    sessionPeers,
+    viewportRef,
+    viewportSizeVersion
+  ]);
+}
+
+// src/react/plugins/realtime/use-realtime-session.ts
 function createClientId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
@@ -1691,6 +1848,19 @@ function sameSerializedItems(left, right) {
 function nowMs() {
   return Date.now();
 }
+function getViewportCameraSnapshot(viewport) {
+  if (!viewport) return null;
+  const camera = viewport.getCamera();
+  if (!camera) return null;
+  const viewportSize = viewport.getViewportSize();
+  return {
+    x: camera.x,
+    y: camera.y,
+    zoom: camera.zoom,
+    viewportWidth: viewportSize.width,
+    viewportHeight: viewportSize.height
+  };
+}
 function useRealtimeSession(options) {
   const {
     url,
@@ -1717,6 +1887,9 @@ function useRealtimeSession(options) {
   const subscriberRefs = react.useRef(/* @__PURE__ */ new Set());
   const lastCursorRef = react.useRef(null);
   const lastMarkupStrokeRef = react.useRef(null);
+  const lastCameraRef = react.useRef(
+    null
+  );
   const lastActiveToolRef = react.useRef(void 0);
   const latestDocumentRef = react.useRef(null);
   const connectionStateRef = react.useRef(
@@ -1841,6 +2014,7 @@ function useRealtimeSession(options) {
       presence: {
         cursor: lastCursorRef.current,
         markupStroke: lastMarkupStrokeRef.current ?? null,
+        camera: lastCameraRef.current ?? null,
         ...lastActiveToolRef.current ? { activeTool: lastActiveToolRef.current } : {}
       }
     });
@@ -2166,6 +2340,18 @@ function useRealtimeSession(options) {
     () => sessionPeers.filter((peerState) => !peerState.isSelf),
     [sessionPeers]
   );
+  const syncViewportPresence = react.useCallback(
+    (bindingOptions) => {
+      const viewport = bindingOptions?.viewportRef?.current;
+      const cameraSnapshot = getViewportCameraSnapshot(viewport);
+      if (!cameraSnapshot) return false;
+      lastCameraRef.current = cameraSnapshot;
+      lastActiveToolRef.current = bindingOptions?.activeTool;
+      sendPresenceUpdate();
+      return true;
+    },
+    [sendPresenceUpdate]
+  );
   const bindViewportPresence = react.useCallback(
     (bindingOptions) => ({
       remotePresence,
@@ -2183,6 +2369,18 @@ function useRealtimeSession(options) {
         lastMarkupStrokeRef.current = remoteMarkupStrokeFromPlacementPreview(preview);
         lastActiveToolRef.current = bindingOptions?.activeTool;
         sendPresenceUpdate();
+      },
+      onCameraChange() {
+        const viewport = bindingOptions?.viewportRef?.current;
+        const cameraSnapshot = getViewportCameraSnapshot(viewport);
+        if (!cameraSnapshot) return;
+        if (viewport && consumeViewportFollowSync(viewport, cameraSnapshot)) {
+          lastCameraRef.current = cameraSnapshot;
+          return;
+        }
+        lastCameraRef.current = cameraSnapshot;
+        lastActiveToolRef.current = bindingOptions?.activeTool;
+        sendPresenceUpdate();
       }
     }),
     [remotePresence, sendPresenceUpdate]
@@ -2194,6 +2392,7 @@ function useRealtimeSession(options) {
     remoteAdapter,
     document: document2,
     bindViewportPresence,
+    syncViewportPresence,
     disconnect,
     reconnectNow
   };
@@ -2238,9 +2437,37 @@ function RealtimeCollaborationPluginComponent({
     ...commentOptions ?? {}
   });
   const presenceBindings = react.useMemo(
-    () => session.bindViewportPresence({ activeTool: viewport.toolId }),
-    [session.bindViewportPresence, viewport.toolId]
+    () => session.bindViewportPresence({
+      activeTool: viewport.toolId,
+      viewportRef
+    }),
+    [session.bindViewportPresence, viewport.toolId, viewportRef]
   );
+  const onViewportCameraChange = react.useCallback(() => {
+    presenceBindings.onCameraChange?.();
+    comments.viewport.onCameraChange?.();
+  }, [comments.viewport, presenceBindings]);
+  react.useEffect(() => {
+    if (!session.connection.connected) return;
+    let animationFrameId = 0;
+    const syncViewportPresence = () => {
+      const didSync = session.syncViewportPresence({
+        activeTool: viewport.toolId,
+        viewportRef
+      });
+      if (didSync) return;
+      animationFrameId = window.requestAnimationFrame(syncViewportPresence);
+    };
+    syncViewportPresence();
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [
+    session.connection.connected,
+    session.syncViewportPresence,
+    viewport.toolId,
+    viewportRef
+  ]);
   react.useEffect(() => {
     if (!onItemsChange || !session.document) return;
     if (session.document.updatedByClientId === session.connection.clientId) return;
@@ -2257,11 +2484,14 @@ function RealtimeCollaborationPluginComponent({
         onWorldPointerMove: presenceBindings.onWorldPointerMove,
         onWorldPointerLeave: presenceBindings.onWorldPointerLeave,
         onPlacementPreviewChange: presenceBindings.onPlacementPreviewChange,
-        onCameraChange: commentOptions ? comments.viewport.onCameraChange : void 0
+        onCameraChange: onViewportCameraChange
       },
       wrapOnItemsChange: (nextItems, ctx) => {
         if (commentOptions) {
-          comments.viewport.onItemsChange?.(nextItems);
+          comments.handleViewportItemsChange(nextItems, (processedItems) => {
+            ctx.next(processedItems);
+            session.remoteAdapter.send?.([...processedItems]);
+          });
           return;
         }
         ctx.next(nextItems);
@@ -2272,6 +2502,8 @@ function RealtimeCollaborationPluginComponent({
       commentOptions,
       comments.tools,
       comments.viewport,
+      comments.handleViewportItemsChange,
+      onViewportCameraChange,
       presenceBindings,
       session.remoteAdapter
     ]
@@ -2332,6 +2564,7 @@ exports.realtimeCommentsPlugin = realtimeCommentsPlugin;
 exports.realtimeSessionPlugin = realtimeSessionPlugin;
 exports.remoteMarkupStrokeFromPlacementPreview = remoteMarkupStrokeFromPlacementPreview;
 exports.useRealtimeComments = useRealtimeComments;
+exports.useRealtimePeerFollow = useRealtimePeerFollow;
 exports.useRealtimeSession = useRealtimeSession;
 exports.withRealtimeCommentTool = withRealtimeCommentTool;
 //# sourceMappingURL=realtime.cjs.map