follow zoom POC

src/components/App.tsx

@@ -1502,6 +1502,11 @@ class App extends React.Component<AppProps, AppState> {
 
     // TODO follow-participant
     // add zoom change
+
+    if (prevState.zoom.value !== this.state.zoom.value) {
+      this.props?.onZoomChange?.(this.state.zoom);
+    }
+
     if (
       prevState.scrollX !== this.state.scrollX ||
       prevState.scrollY !== this.state.scrollY

src/excalidraw-app/collab/Collab.tsx

@@ -90,6 +90,7 @@ export interface CollabAPI {
   isCollaborating: () => boolean;
   onPointerUpdate: CollabInstance["onPointerUpdate"];
   onScrollChange: CollabInstance["onScrollChange"];
+  onZoomChange: CollabInstance["onZoomChange"];
   startCollaboration: CollabInstance["startCollaboration"];
   stopCollaboration: CollabInstance["stopCollaboration"];
   syncElements: CollabInstance["syncElements"];
@@ -164,6 +165,7 @@ class Collab extends PureComponent<Props, CollabState> {
       isCollaborating: this.isCollaborating,
       onPointerUpdate: this.onPointerUpdate,
       onScrollChange: this.onScrollChange,
+      onZoomChange: this.onZoomChange,
       startCollaboration: this.startCollaboration,
       syncElements: this.syncElements,
       fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
@@ -542,7 +544,7 @@ class Collab extends PureComponent<Props, CollabState> {
           // case "ZOOM_VALUE"
           // if following someone, update scroll and zoom
 
-          case "SCROLL_LOCATION":
+          case "SCROLL_LOCATION": {
             const {
               scroll: { x, y },
             } = decryptedData.payload;
@@ -565,6 +567,26 @@ class Collab extends PureComponent<Props, CollabState> {
             }
 
             break;
+          }
+
+          case "ZOOM_VALUE": {
+            const { zoom } = decryptedData.payload;
+
+            console.log({ decryptedData });
+
+            const socketId: SocketUpdateDataSource["ZOOM_VALUE"]["payload"]["socketId"] =
+              decryptedData.payload.socketId;
+
+            const appState = this.excalidrawAPI.getAppState();
+
+            if (appState.userToFollow === socketId) {
+              this.excalidrawAPI.updateScene({
+                appState: { zoom },
+              });
+            }
+
+            break;
+          }
 
           case "IDLE_STATUS": {
             const { userState, socketId, username } = decryptedData.payload;
@@ -806,6 +828,14 @@ class Collab extends PureComponent<Props, CollabState> {
   // - onZoomChange
   // -- broadCastZoomValue
 
+  onZoomChange = throttle(
+    (payload: {
+      zoom: SocketUpdateDataSource["ZOOM_VALUE"]["payload"]["zoom"];
+    }) => {
+      this.portal.socket && this.portal.broadcastZoomValue(payload);
+    },
+  );
+
   onScrollChange = throttle(
     (payload: {
       scrollX: SocketUpdateDataSource["SCROLL_LOCATION"]["payload"]["scroll"]["x"];

src/excalidraw-app/collab/Portal.tsx

@@ -249,6 +249,28 @@ class Portal {
       );
     }
   };
+
+  broadcastZoomValue = (payload: {
+    zoom: SocketUpdateDataSource["ZOOM_VALUE"]["payload"]["zoom"];
+  }) => {
+    if (this.socket?.id) {
+      const data: SocketUpdateDataSource["ZOOM_VALUE"] = {
+        type: "ZOOM_VALUE",
+        payload: {
+          socketId: this.socket.id,
+          zoom: payload.zoom,
+          username: this.collab.state.username,
+        },
+      };
+
+      console.log("broadcastZoomValue data", data);
+
+      return this._broadcastSocketData(
+        data as SocketUpdateData,
+        true, // volatile
+      );
+    }
+  };
 }
 
 export default Portal;

src/excalidraw-app/data/index.ts

@@ -121,6 +121,14 @@ export type SocketUpdateDataSource = {
       username: string;
     };
   };
+  ZOOM_VALUE: {
+    type: "ZOOM_VALUE";
+    payload: {
+      socketId: string;
+      zoom: AppState["zoom"];
+      username: string;
+    };
+  };
   IDLE_STATUS: {
     type: "IDLE_STATUS";
     payload: {

src/excalidraw-app/index.tsx

@@ -651,6 +651,10 @@ const ExcalidrawWrapper = () => {
       <Excalidraw
         // TODO follow-participant
         // add onZoomChange
+        onZoomChange={(zoom) => {
+          console.log({ zoom });
+          collabAPI?.onZoomChange({ zoom });
+        }}
         onScrollChange={(x, y) => {
           // console.log({ x, y });
 

src/packages/excalidraw/index.tsx

@@ -41,6 +41,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     onLinkOpen,
     onPointerDown,
     onScrollChange,
+    onZoomChange,
     children,
   } = props;
 
@@ -115,6 +116,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onLinkOpen={onLinkOpen}
           onPointerDown={onPointerDown}
           onScrollChange={onScrollChange}
+          onZoomChange={onZoomChange}
         >
           {children}
         </App>

src/types.ts

@@ -361,6 +361,7 @@ export interface ExcalidrawProps {
     pointerDownState: PointerDownState,
   ) => void;
   onScrollChange?: (scrollX: number, scrollY: number) => void;
+  onZoomChange?: (zoom: Zoom) => void;
   children?: React.ReactNode;
 }