fix: scroll page

nusr · nusr · commit 7d33bf933954 · 2024-12-03T22:02:25.000+08:00
diff --git a/packages/demo/src/index.tsx b/packages/demo/src/index.tsx
@@ -20,13 +20,16 @@ async function initView() {
   const docId = getDocId(import.meta.env.VITE_DEFAULT_EXCEL_ID);
   location.hash = `#${docId}`;
   const doc = initDoc({ guid: docId });
-  const { isServer, provider } = await initCollaboration(doc);
+  const { isServer, provider, isInit } = await initCollaboration(doc);
   const controller = initController({
     copyOrCut,
     paste,
     worker: workerInstance,
     doc,
   });
+  if (isInit) {
+    controller.setCurrentSheetId(controller.getCurrentSheetId());
+  }
 
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
@@ -42,9 +45,7 @@ async function initView() {
       </StateContext.Provider>
     </StrictMode>,
   );
-  document.body.append(`<!-- ${process.env.COMMIT_LOG} --> `);
-  setTimeout(() => {
-    document.getElementById('loading')?.remove();
-  }, 0);
+  document.head.append(`<!-- ${process.env.COMMIT_LOG} --> `);
+  document.getElementById('loading')?.remove();
 }
 initView();
diff --git a/packages/formula/package.json b/packages/formula/package.json
@@ -19,7 +19,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "vite --port 5000",
     "type-check": "tsc"
   },
   "files": [
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -26,7 +26,7 @@
   "scripts": {
     "build": "vite build",
     "type-check": "tsc",
-    "dev": "vite --force --host"
+    "dev": "vite --force --host --port 4000"
   },
   "peerDependencies": {
     "react": "18.3.1",
diff --git a/packages/react/src/canvas/index.ts b/packages/react/src/canvas/index.ts
@@ -9,6 +9,7 @@ export {
   scrollBar,
   scrollToView,
   scrollSheetToView,
+  computeScrollPosition,
 } from './shortcut';
 
 let instance: MainCanvas;
diff --git a/packages/react/src/canvas/offScreenWorker.ts b/packages/react/src/canvas/offScreenWorker.ts
@@ -280,22 +280,30 @@ export default class OffScreenWorker implements WorkerMainView {
     const pointList: Point[] = [];
     let y = 0;
     let x = 0;
+    const xTemp: Point[] = [];
+    const yTemp: Point[] = [];
     for (let i = rowIndex; i < rowCount && y <= height; i++) {
       while (i < rowCount && this.getRowHeight(i) === 0) {
         i++;
       }
-      pointList.push([0, y], [width, y]);
+      yTemp.push([0, y]);
       const h = this.getRowHeight(i);
       y += h;
     }
     for (let i = colIndex; i < colCount && x <= width; i++) {
       while (i < colCount && this.getColWidth(i) === 0) {
         i++;
       }
-      pointList.push([x, 0], [x, y]);
+      xTemp.push([x, 0]);
       const w = this.getColWidth(i);
       x += w;
     }
+    for (const item of xTemp) {
+      pointList.push(item, [item[0], y]);
+    }
+    for (const item of yTemp) {
+      pointList.push(item, [x, item[1]]);
+    }
     pointList.push([0, y], [x, y]);
     pointList.push([x, 0], [x, y]);
     drawLines(this.ctx, pointList);
diff --git a/packages/react/src/canvas/shortcut.ts b/packages/react/src/canvas/shortcut.ts
@@ -11,15 +11,13 @@ import {
   SHEET_ITEM_TEST_ID_PREFIX,
   sheetViewSizeSet,
   headerSizeSet,
-  computeScrollPosition,
   canvasSizeSet,
   FORMULA_EDITOR_ROLE,
   MERGE_CELL_LINE_BREAK,
   LINE_BREAK,
   isMergeContent,
 } from '@excel/shared';
 import { coreStore } from '../containers/store';
-export const BOTTOM_BUFF = 200;
 
 export function handleTabClick(controller: IController) {
   controller.transaction(() => {
@@ -129,6 +127,24 @@ export function scrollToView(controller: IController, range: IRange) {
   });
 }
 
+export function computeScrollPosition() {
+  const contentSize = 30;
+  const BOTTOM_BUFF = 200;
+  const canvasRect = canvasSizeSet.get();
+  const viewSize = sheetViewSizeSet.get();
+  const maxHeight = viewSize.height - canvasRect.height + BOTTOM_BUFF;
+  const maxWidth = viewSize.width - canvasRect.width + BOTTOM_BUFF;
+  const maxScrollHeight = canvasRect.height - contentSize;
+  const maxScrollWidth = canvasRect.width - contentSize;
+
+  return {
+    maxHeight,
+    maxWidth,
+    maxScrollHeight,
+    maxScrollWidth,
+  };
+}
+
 export function scrollBar(
   controller: IController,
   scrollX: number,
diff --git a/packages/react/src/collaboration/index.ts b/packages/react/src/collaboration/index.ts
@@ -1,6 +1,6 @@
-import { initProvider, ResultData } from './provider';
+import { initProvider } from './provider';
 import * as Y from 'yjs';
-import { collaborationLog } from '@excel/shared';
+import { collaborationLog, CollaborationProvider } from '@excel/shared';
 import { SYNC_FLAG } from '@excel/shared';
 import { DEFAULT_UPDATE } from './provider/util';
 
@@ -11,7 +11,13 @@ function shouldSkip(isServer: boolean, tran: Y.Transaction) {
   return false;
 }
 
-export async function initCollaboration(doc: Y.Doc): Promise<ResultData> {
+export async function initCollaboration(
+  doc: Y.Doc,
+): Promise<{
+  provider: CollaborationProvider;
+  isServer: boolean;
+  isInit: boolean;
+}> {
   const { provider, isServer } = initProvider(doc);
 
   doc.on('update', (update: Uint8Array, _b, _c, tran) => {
@@ -24,11 +30,13 @@ export async function initCollaboration(doc: Y.Doc): Promise<ResultData> {
   provider.subscribe();
 
   const result = await provider.retrieveHistory();
+  let isInit = false;
   if (result.length > 0) {
     Y.applyUpdate(doc, Y.mergeUpdates(result), SYNC_FLAG.SKIP_UPDATE);
   } else {
+    isInit = true;
     Y.applyUpdate(doc, DEFAULT_UPDATE, SYNC_FLAG.SKIP_UNDO_REDO);
   }
 
-  return { isServer, provider };
+  return { isServer, provider, isInit };
 }
diff --git a/packages/react/src/collaboration/provider/index.ts b/packages/react/src/collaboration/provider/index.ts
@@ -5,12 +5,7 @@ import { LocalProvider } from './local';
 import { CollaborationProvider } from '@excel/shared';
 import { type Doc } from 'yjs';
 
-export type ResultData = {
-  provider: CollaborationProvider;
-  isServer: boolean;
-};
-
-export function initProvider(doc: Doc): ResultData {
+export function initProvider(doc: Doc) {
   const url = import.meta.env.VITE_SUPABASE_URL;
   const key = import.meta.env.VITE_SUPABASE_ANON_KEY;
   let isServer = false;
diff --git a/packages/react/src/containers/canvas/BottomBar.tsx b/packages/react/src/containers/canvas/BottomBar.tsx
@@ -3,7 +3,11 @@ import { Button } from '../../components';
 import styles from './index.module.css';
 import { scrollBar } from '../../canvas';
 import { $ } from '../../i18n';
-import { classnames, sheetViewSizeSet, MAX_ADD_ROW_THRESHOLD } from '@excel/shared';
+import {
+  classnames,
+  sheetViewSizeSet,
+  MAX_ADD_ROW_THRESHOLD,
+} from '@excel/shared';
 import { scrollStore, useExcel } from '../store';
 
 const defaultData = 10;
diff --git a/packages/react/src/containers/canvas/ScrollBar.tsx b/packages/react/src/containers/canvas/ScrollBar.tsx
@@ -8,10 +8,9 @@ import React, {
   useMemo,
 } from 'react';
 import { type IController, ScrollStatus } from '@excel/shared';
-import { computeScrollRowAndCol } from '../../canvas';
+import { computeScrollRowAndCol, computeScrollPosition } from '../../canvas';
 import styles from './index.module.css';
 import { scrollStore, useExcel } from '../store';
-import { computeScrollPosition } from '@excel/shared';
 
 interface State {
   prevPageY: number;
diff --git a/packages/react/src/controller/Controller.ts b/packages/react/src/controller/Controller.ts
@@ -160,6 +160,7 @@ export class Controller implements IController {
   setCurrentSheetId(id: string): void {
     this.model.setCurrentSheetId(id);
     this.changeSet.add('currentSheetId');
+    this.changeSet.add('customHeight');
     this.emitChange();
   }
 
@@ -178,31 +179,36 @@ export class Controller implements IController {
   addSheet() {
     const result = this.model.addSheet();
     this.changeSet.add('workbook');
+    this.changeSet.add('customHeight');
     this.emitChange();
     return result;
   }
   @transaction()
   deleteSheet(sheetId?: string) {
     this.model.deleteSheet(sheetId);
     this.changeSet.add('workbook');
+    this.changeSet.add('customHeight');
     this.emitChange();
   }
   @transaction()
   updateSheetInfo(data: Partial<WorksheetType>, sheetId?: string): void {
     this.model.updateSheetInfo(data, sheetId);
     this.changeSet.add('workbook');
+    this.changeSet.add('customHeight');
     this.emitChange();
   }
   @transaction()
   hideSheet(sheetId?: string): void {
     this.model.hideSheet(sheetId);
     this.changeSet.add('workbook');
+    this.changeSet.add('customHeight');
     this.emitChange();
   }
   @transaction()
   unhideSheet(sheetId: string): void {
     this.model.unhideSheet(sheetId);
     this.changeSet.add('workbook');
+    this.changeSet.add('customHeight');
     this.emitChange();
   }
   @transaction()
@@ -833,6 +839,8 @@ export class Controller implements IController {
     this.changeSet.add('cellStyle');
     this.changeSet.add('autoFilter');
     this.changeSet.add('drawings');
+    this.changeSet.add('customHeight');
+    this.changeSet.add('customWidth');
     this.emitChange();
   }
   getDefineName(range: IRange): string {
diff --git a/packages/react/src/model/Model.ts b/packages/react/src/model/Model.ts
@@ -20,7 +20,6 @@ import {
 import {
   XLSX_MAX_ROW_COUNT,
   XLSX_MAX_COL_COUNT,
-  modelToChangeSet,
   eventEmitter,
   sheetViewSizeSet,
   headerSizeSet,
@@ -40,6 +39,38 @@ import { FilterManger } from './filter';
 import { ScrollManager } from './scroll';
 import * as Y from 'yjs';
 
+export function modelToChangeSet(list: Y.YEvent<any>[]) {
+  const result = new Set<ChangeEventType>();
+  const set = new Set<keyof ModelJSON>(KEY_LIST);
+  for (const item of list) {
+    if (!item) {
+      continue;
+    }
+    const keySet = new Set(item?.changes?.keys?.keys?.() || []);
+    const pathSet = new Set(item.path || []);
+    for (const key of keySet.keys()) {
+      if (set.has(key as any)) {
+        result.add(key as any);
+      }
+    }
+    for (const key of pathSet.keys()) {
+      if (set.has(key as any)) {
+        result.add(key as any);
+      }
+    }
+    if (pathSet.has('worksheets') || keySet.has('worksheets')) {
+      if (keySet.has('formula') || keySet.has('value')) {
+        result.add('cellValue');
+      } else {
+        result.add('cellStyle');
+      }
+    } else {
+      result.add('cellStyle');
+    }
+  }
+  return result;
+}
+
 export class Model implements IModel {
   private workbookManager: Workbook;
   private rangeMapManager: RangeMap;
@@ -59,14 +90,11 @@ export class Model implements IModel {
     this.doc = doc;
     const root = this.getRoot();
     root.observeDeep((event) => {
-      modelLog('observeDeep', event);
       const changeSet = modelToChangeSet(event);
       for (const item of this.changeSet.keys()) {
         changeSet.add(item);
       }
-      if (changeSet.has('customHeight') || changeSet.has('customWidth')) {
-        this.computeViewSize();
-      }
+      modelLog('observeDeep', event, changeSet);
       this.render(changeSet);
       this.changeSet = new Set<ChangeEventType>();
     });
@@ -104,6 +132,10 @@ export class Model implements IModel {
   }
   async emitChange(changeSet: Set<ChangeEventType>) {
     const localChangeList: ChangeEventType[] = ['antLine', 'undo', 'redo'];
+    if (changeSet.has('customHeight') || changeSet.has('customWidth')) {
+      this.computeViewSize();
+    }
+
     for (const item of localChangeList) {
       if (changeSet.has(item)) {
         this.changeSet.add(item);
@@ -159,7 +191,6 @@ export class Model implements IModel {
     const result = this.workbookManager.addSheet();
     this.worksheetManager.setWorksheet([]);
     this.workbookManager.setCurrentSheetId(result.sheetId);
-    this.computeViewSize();
     return result;
   }
   deleteSheet(sheetId?: string): void {
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -20,7 +20,7 @@
   "scripts": {
     "build": "vite build",
     "type-check": "tsc",
-    "dev": "vite"
+    "dev": "npm run build"
   },
   "files": [
     "dist"
diff --git a/packages/shared/src/util/set.ts b/packages/shared/src/util/set.ts
@@ -30,21 +30,3 @@ export const headerSizeSet = new BaseSet<IWindowSize>({
   width: COL_TITLE_WIDTH,
   height: ROW_TITLE_HEIGHT,
 });
-export const BOTTOM_BUFF = 200;
-export function computeScrollPosition() {
-  // TODO
-  const contentSize = 30;
-  const canvasRect = canvasSizeSet.get();
-  const viewSize = sheetViewSizeSet.get();
-  const maxHeight = viewSize.height - canvasRect.height + BOTTOM_BUFF;
-  const maxWidth = viewSize.width - canvasRect.width + BOTTOM_BUFF;
-  const maxScrollHeight = canvasRect.height - contentSize;
-  const maxScrollWidth = canvasRect.width - contentSize;
-
-  return {
-    maxHeight,
-    maxWidth,
-    maxScrollHeight,
-    maxScrollWidth,
-  };
-}
diff --git a/packages/shared/src/util/util.ts b/packages/shared/src/util/util.ts
