fix: collab

Author: nusr

package.json

@@ -58,6 +58,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "ssf": "https://cdn.sheetjs.com/ssf-0.11.3/ssf-0.11.3.tgz",
+    "y-indexeddb": "^9.0.12",
     "yjs": "13.6.20"
   },
   "engines": {

rsbuild.config.ts

@@ -3,6 +3,9 @@ import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   plugins: [pluginReact()],
+  dev: {
+    hmr: true,
+  },
   source: {
     entry: {
       index: './src/index.tsx',
@@ -17,6 +20,10 @@ export default defineConfig({
     },
   },
   output: {
+    sourceMap: {
+      js: 'source-map',
+      css: true,
+    },
     assetPrefix: process.env.CI ? '/excel/' : '',
     distPath: {
       js: '',

src/collaboration/index.ts

@@ -1,11 +1,29 @@
 import type { Doc } from 'yjs';
 import { initProvider } from './provider';
 import * as Y from 'yjs';
+import { collaborationLog } from '@/util';
+
+function areUint8ArraysEqual(arr1: Uint8Array, arr2: Uint8Array) {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
 
 export async function initCollaboration(doc: Doc) {
   const provider = initProvider(doc);
   doc.on('update', (update: Uint8Array) => {
-    provider.addHistory(doc.guid, update);
+    const stateVector = Y.encodeStateVector(doc);
+    const diff = Y.encodeStateAsUpdate(doc, stateVector);
+    console.log(`areUint8ArraysEqual: ${areUint8ArraysEqual(diff, update)}`);
+    collaborationLog('doc update', update);
+
+    provider.addHistory(doc.guid, diff);
   });
   const result = await provider.retrieveHistory(doc.guid);
   if (result.length > 0) {

src/collaboration/provider/local.ts

@@ -1,26 +1,37 @@
 import { CollaborationProvider, HistoryItem } from '@/types';
 import * as Y from 'yjs';
-// import { eventEmitter } from '@/util';
+import { collaborationLog, generateUUID } from '@/util';
+// import { IndexeddbPersistence } from 'y-indexeddb';
 
 export class LocalProvider implements CollaborationProvider {
   private readonly broadcastChannel: BroadcastChannel;
+  // private readonly db: IndexeddbPersistence;
+  private readonly peerId = generateUUID();
   constructor(doc: Y.Doc) {
-    const docId = doc.guid;
-    this.broadcastChannel = new BroadcastChannel(docId);
+    this.broadcastChannel = new BroadcastChannel(doc.guid);
     this.broadcastChannel.onmessage = (
-      event: MessageEvent<{ docId: string; update: Uint8Array }>,
+      event: MessageEvent<{
+        docId: string;
+        update: Uint8Array;
+        peerId: string;
+      }>,
     ) => {
-      const { update } = event.data;
-      console.log(docId, event);
-      Y.applyUpdate(doc, update);
+      const { update, peerId } = event.data;
+      collaborationLog('onmessage', event, this.peerId);
+      if (peerId === this.peerId) {
+        return;
+      }
+      Y.applyUpdate(doc, update, peerId);
       // eventEmitter.emit('modelChange', { changeSet: new Set(['rangeMap']) });
     };
+    // this.db = new IndexeddbPersistence('excel', doc);
   }
   addHistory = async (docId: string, update: Uint8Array) => {
-    this.broadcastChannel.postMessage({ docId, update });
+    this.broadcastChannel.postMessage({ docId, update, peerId: this.peerId });
   };
-  retrieveHistory = async (docId: string): Promise<HistoryItem[]> => {
-    console.log(docId);
+  retrieveHistory = async (_docId: string): Promise<HistoryItem[]> => {
+    // await this.db.whenSynced;
+    // console.log('load db success')
     return [];
   };
 }

src/containers/canvas/util.ts

@@ -209,7 +209,6 @@ const handleStateChange = (
     canRedo: controller.canRedo(),
     canUndo: controller.canUndo(),
   };
-
   if (changeSet.has('currentSheetId')) {
     core.activeUuid = '';
     core.currentSheetId = controller.getCurrentSheetId();

src/containers/hooks/useClickOutSide.ts

@@ -7,8 +7,13 @@ export function useClickOutside(
   const ref = useRef<HTMLDivElement>(null);
 
   function handleEvent(event: Event) {
-    const node = event.target! as Node;
-    if (ref?.current && (ref.current === node || ref.current.contains(node))) {
+    const node = event.target as any;
+    if (
+      ref?.current &&
+      (ref.current === node ||
+        (typeof ref.current.contains === 'function' &&
+          ref.current.contains(node)))
+    ) {
       return;
     }
     handler();

src/controller/Controller.ts

@@ -257,10 +257,12 @@ export class Controller implements IController {
   }
   undo() {
     this.model.undo();
+    this.changeSet.add('undo')
     this.emitChange();
   }
   redo() {
     this.model.redo();
+    this.changeSet.add('redo')
     this.emitChange();
   }
   getColWidth(col: number, sheetId?: string) {

src/index.tsx

@@ -63,6 +63,7 @@ const controller = initController(
 );
 window.controller = controller;
 window.doc = doc;
+
 // controller.fromJSON(MOCK_MODEL);
 initCollaboration(doc).then(() => {
   createRoot(document.getElementById('root')!).render(

src/model/Model.ts

@@ -68,7 +68,7 @@ export class Model implements IModel {
     const root = doc.getMap('excel');
     this.doc = doc;
     root.observeDeep((event) => {
-      console.log(event)
+      modelLog('observeDeep', event);
       const changeSet = modelToChangeSet(event);
       for (const item of this.changeSet.keys()) {
         changeSet.add(item);
@@ -81,6 +81,10 @@ export class Model implements IModel {
     });
     this.root = root as ModelRoot;
     this.undoManager = new Y.UndoManager(this.root, { doc });
+    this.undoManager.on('stack-item-popped', (event) => {
+      modelLog('stack-item-popped', event);
+      this.changeSet.add(event.type);
+    });
     this.workbookManager = new Workbook(this);
     this.rangeMapManager = new RangeMap(this);
     this.drawingsManager = new Drawing(this);
@@ -92,9 +96,6 @@ export class Model implements IModel {
     this.filterManager = new FilterManger(this);
   }
   transaction = (fn: () => boolean, _isNoHistory?: boolean) => {
-    // if (isNoHistory) {
-    //   this.stopCapturing();
-    // }
     this.doc.transact(fn);
   };
   getRoot() {
@@ -114,7 +115,12 @@ export class Model implements IModel {
     this.undoManager.stopCapturing();
   }
   async emitChange(changeSet: Set<ChangeEventType>) {
-    const localChangeList: ChangeEventType[] = ['scroll', 'antLine'];
+    const localChangeList: ChangeEventType[] = [
+      'scroll',
+      'antLine',
+      'undo',
+      'redo',
+    ];
     for (const item of localChangeList) {
       if (changeSet.has(item)) {
         this.changeSet.add(item);

src/types/model.ts

@@ -123,7 +123,9 @@ export type ChangeEventType =
   | 'cellValue'
   | 'cellStyle'
   | 'antLine'
-  | 'scroll';
+  | 'scroll'
+  | 'redo'
+  | 'undo';
 export interface EventType {
   changeSet: Set<ChangeEventType>;
 }