fix: rangeMap and scroll

Author: nusr

packages/demo/src/index.tsx

@@ -28,6 +28,8 @@ async function initView() {
     doc,
   });
   controller.setCurrentSheetId(controller.getCurrentSheetId());
+  (window as any).controller = controller;
+  (window as any).doc = doc;
 
   createRoot(document.getElementById('root')!).render(
     <StrictMode>

packages/react/src/collaboration/index.ts

@@ -11,9 +11,7 @@ function shouldSkip(isServer: boolean, tran: Y.Transaction) {
   return false;
 }
 
-export async function initCollaboration(
-  doc: Y.Doc,
-): Promise<{
+export async function initCollaboration(doc: Y.Doc): Promise<{
   provider: CollaborationProvider;
   isServer: boolean;
   isInit: boolean;
@@ -24,7 +22,7 @@ export async function initCollaboration(
     if (shouldSkip(isServer, tran)) {
       return;
     }
-    collaborationLog('doc update', tran);
+    collaborationLog('doc update', tran.doc.clientID, tran);
     provider.addHistory(update);
   });
   provider.subscribe();

packages/react/src/controller/Controller.ts

@@ -41,7 +41,11 @@ import {
   IMAGE_FORMAT,
   formatCustomData,
 } from '@excel/shared';
-import { numberFormat, isDateFormat, convertDateToNumber } from '@excel/formula';
+import {
+  numberFormat,
+  isDateFormat,
+  convertDateToNumber,
+} from '@excel/formula';
 import { transaction } from './decorator';
 
 const defaultScrollValue: Omit<ScrollValue, 'row' | 'col'> = {
@@ -97,7 +101,6 @@ export class Controller implements IController {
   getActiveRange(r?: IRange) {
     return this.model.getActiveRange(r);
   }
-  @transaction()
   setNextActiveCell(direction: 'left' | 'right' | 'down' | 'up') {
     const { range, isMerged } = this.getActiveRange();
     let startCol = range.col;
@@ -150,7 +153,6 @@ export class Controller implements IController {
     }
     this.setActiveRange(result);
   }
-  @transaction()
   setActiveRange(range: IRange): void {
     this.model.setActiveRange(range);
     this.changeSet.add('rangeMap');

packages/react/src/model/Model.ts

@@ -94,7 +94,7 @@ export class Model implements IModel {
       for (const item of this.changeSet.keys()) {
         changeSet.add(item);
       }
-      modelLog('observeDeep', event, changeSet);
+      modelLog('observeDeep', doc.clientID, event[0], changeSet);
       this.render(changeSet);
       this.changeSet = new Set<ChangeEventType>();
     });
@@ -131,7 +131,13 @@ export class Model implements IModel {
     eventEmitter.emit('modelChange', { changeSet });
   }
   async emitChange(changeSet: Set<ChangeEventType>) {
-    const localChangeList: ChangeEventType[] = ['antLine', 'undo', 'redo'];
+    const localChangeList: ChangeEventType[] = [
+      'antLine',
+      'undo',
+      'redo',
+      'scroll',
+      'rangeMap',
+    ];
     if (changeSet.has('customHeight') || changeSet.has('customWidth')) {
       this.computeViewSize();
     }
@@ -258,7 +264,11 @@ export class Model implements IModel {
 
       result[key] = typeof v === 'undefined' ? {} : v;
     }
-    return result;
+    return {
+      ...result,
+      rangeMap: this.rangeMapManager.toJSON(),
+      scroll: this.scrollManager.toJSON(),
+    };
   };
 
   setCell(

packages/react/src/model/rangeMap.ts

@@ -1,15 +1,11 @@
-import type { ModelJSON, IRangeMap, IRange, IModel, YjsModelJson } from '@excel/shared';
-import { isSameRange, toIRange } from '@excel/shared';
-import * as Y from 'yjs';
+import type { ModelJSON, IRangeMap, IRange, IModel } from '@excel/shared';
 
 export class RangeMap implements IRangeMap {
   private model: IModel;
+  private rangeMap: ModelJSON['rangeMap'] = {};
   constructor(model: IModel) {
     this.model = model;
   }
-  private get rangeMap() {
-    return this.model.getRoot().get('rangeMap');
-  }
   validateRange(range: IRange) {
     if (!range) {
       return false;
@@ -37,20 +33,23 @@ export class RangeMap implements IRangeMap {
   }
   fromJSON(json: ModelJSON): void {
     const data = json.rangeMap || {};
-    const rangeMap = new Y.Map() as YjsModelJson['rangeMap'];
+    const rangeMap: ModelJSON['rangeMap'] = {};
     for (const range of Object.values(data)) {
       range.sheetId = range.sheetId || this.model.getCurrentSheetId();
       if (!this.model.validateRange(range)) {
         continue;
       }
-      rangeMap.set(range.sheetId, range);
+      rangeMap[range.sheetId] = { ...range };
     }
-    this.model.getRoot().set('rangeMap', rangeMap);
+    this.rangeMap = rangeMap;
+  }
+  toJSON() {
+    return {...this.rangeMap}
   }
   getActiveRange() {
     const id = this.model.getCurrentSheetId();
 
-    const range = this.rangeMap?.get(id);
+    const range = this.rangeMap[id];
     if (range) {
       range.sheetId = range.sheetId || id;
       return {
@@ -74,18 +73,9 @@ export class RangeMap implements IRangeMap {
     if (!this.validateRange(newRange)) {
       return;
     }
-    let rangeMap = this.rangeMap;
-    if (!rangeMap) {
-      rangeMap = new Y.Map() as YjsModelJson['rangeMap'];
-      this.model.getRoot().set('rangeMap', rangeMap);
-    }
-    const oldValue = rangeMap.get(newRange.sheetId);
-    if (oldValue && isSameRange(oldValue, newRange)) {
-      return;
-    }
-    rangeMap.set(newRange.sheetId, toIRange(newRange));
+    this.rangeMap[newRange.sheetId] = { ...newRange };
   }
   deleteAll(sheetId?: string): void {
-    this.rangeMap?.delete(sheetId || this.model.getCurrentSheetId());
+    delete this.rangeMap[sheetId || this.model.getCurrentSheetId()];
   }
 }

packages/react/src/model/scroll.ts

@@ -1,50 +1,38 @@
-import type {
-  ModelJSON,
-  IScroll,
-  IModel,
-  YjsModelJson,
-  ModelScroll,
-  TypedMap,
-} from '@excel/shared';
-import * as Y from 'yjs';
+import type { ModelJSON, IScroll, IModel, ModelScroll } from '@excel/shared';
 
 export class ScrollManager implements IScroll {
   private model: IModel;
+  private scroll: ModelJSON['scroll'] = {};
   constructor(model: IModel) {
     this.model = model;
   }
-  private get scroll() {
-    return this.model.getRoot().get('scroll');
-  }
   fromJSON(json: ModelJSON): void {
     const data = json.scroll || {};
-    const scroll = new Y.Map() as YjsModelJson['scroll'];
+    const scroll: ModelJSON['scroll'] = {};
     for (const [sheetId, value] of Object.entries(data)) {
       if (!sheetId || value.row < 0 || value.col < 0) {
         continue;
       }
-      scroll.set(
-        sheetId,
-        new Y.Map(Object.entries(value)) as TypedMap<ModelScroll>,
-      );
+      scroll[sheetId] = value;
     }
-    this.model.getRoot().set('scroll', scroll);
+    this.scroll = scroll;
+  }
+  toJSON() {
+    return { ...this.scroll };
   }
   deleteAll(sheetId?: string): void {
-    this.scroll?.delete(sheetId || this.model.getCurrentSheetId());
+    const id = sheetId || this.model.getCurrentSheetId();
+    delete this.scroll[id];
   }
   getScroll(sheetId?: string): ModelScroll {
-    const t = this.scroll?.get(sheetId || this.model.getCurrentSheetId());
+    const t = this.scroll[sheetId || this.model.getCurrentSheetId()];
     if (!t) {
       return { row: 0, col: 0 };
     }
-    return t.toJSON();
+    return { ...t };
   }
   setScroll(value: ModelScroll, sheetId?: string) {
     const id = sheetId || this.model.getCurrentSheetId();
-    if (!this.scroll) {
-      this.model.getRoot().set('scroll', new Y.Map() as YjsModelJson['scroll']);
-    }
     const sheetInfo = this.model.getSheetInfo(id);
     if (!sheetInfo) {
       return false;
@@ -61,23 +49,7 @@ export class ScrollManager implements IScroll {
     } else if (value.col < 0) {
       value.col = 0;
     }
-    const item = this.scroll?.get(id);
-    if (!item) {
-      this.scroll!.set(
-        id,
-        new Y.Map(Object.entries(value)) as TypedMap<ModelScroll>,
-      );
-      return false;
-    }
-    let check = false;
-    if (item.get('row') !== value.row) {
-      check = true;
-      item.set('row', value.row);
-    }
-    if (item.get('col') !== value.col) {
-      check = true;
-      item.set('col', value.col);
-    }
-    return check;
+    this.scroll[id] = { ...value };
+    return true;
   }
 }