refactor: data service

logisky · Dec 9, 2024 · 9af05d6 · 9af05d6
1 parent 17d3f9a
commit 9af05d6
Show file tree

Hide file tree

Showing 25 changed files with 605 additions and 561 deletions.
diff --git a/crates/wasms/server/src/controller.rs b/crates/wasms/server/src/controller.rs
@@ -155,6 +155,20 @@ pub fn input_async_result(id: usize, result: JsValue) -> JsValue {
     serde_wasm_bindgen::to_value(&result).unwrap()
 }
 
+#[wasm_bindgen]
+pub fn get_cell_position(id: usize, sheet_idx: usize, row: usize, col: usize) -> JsValue {
+    init();
+    let manager = MANAGER.get();
+    let result = manager
+        .get_workbook(&id)
+        .unwrap()
+        .get_sheet_by_idx(sheet_idx)
+        .unwrap()
+        .get_cell_position(row, col);
+    handle_result!(result);
+    serde_wasm_bindgen::to_value(&result).unwrap()
+}
+
 #[wasm_bindgen]
 /// logisheets_controller::DisplayResponse
 pub fn get_patches(id: usize, sheet_idx: u32, version: u32) -> JsValue {

diff --git a/packages/node/package.json b/packages/node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logisheets",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Read and write the xlsx files",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logisheets-web",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Read and write the xlsx files",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/web/src/api/worksheet.ts b/packages/web/src/api/worksheet.ts
@@ -10,8 +10,10 @@ import {
     get_display_window,
     get_display_window_with_start_point,
     get_display_window_within_cell,
+    get_cell_position,
 } from '../../wasm'
 import {
+    CellPosition,
     ColInfo,
     DisplayWindow,
     DisplayWindowWithStartPoint,
@@ -60,6 +62,10 @@ export class Worksheet {
         )
     }
 
+    public getCellPosition(row: number, col: number): CellPosition {
+        return get_cell_position(this._id, this._sheetIdx, row, col)
+    }
+
     public getDisplayWindowWithCellPosition(
         row: number,
         col: number,

diff --git a/src/components/canvas/component.tsx b/src/components/canvas/component.tsx
@@ -24,7 +24,7 @@ import {InvalidFormulaComponent} from './invalid-formula'
 import {Buttons, simpleUuid} from '@/core'
 import {DialogComponent} from '@/ui/dialog'
 import {useInjection} from '@/core/ioc/provider'
-import {DataService, MAX_COUNT, RenderCell} from '@/core/data2'
+import {DataServiceImpl, MAX_COUNT, RenderCell} from '@/core/data2'
 import {TYPES} from '@/core/ioc/types'
 import {CANVAS_ID, CanvasStore, CanvasStoreContext} from './store'
 import {observer} from 'mobx-react'
@@ -38,7 +38,7 @@ export interface CanvasProps {
     selectedCell$: (e: SelectedCell) => void
 }
 export const CanvasComponent = (props: CanvasProps) => {
-    const DATA_SERVICE = useInjection<DataService>(TYPES.Data)
+    const DATA_SERVICE = useInjection<DataServiceImpl>(TYPES.Data)
     const store = useRef(new CanvasStore(DATA_SERVICE))
     return (
         <CanvasStoreContext.Provider value={store.current}>
@@ -127,11 +127,6 @@ const Internal: FC<CanvasProps> = observer(({selectedCell, selectedCell$}) => {
 
     const onMouseWheel = (e: WheelEvent) => {
         // only support y scrollbar currently
-        const delta = e.deltaY
-        const newScroll = store.scrollbar.mouseWheelScrolling(delta, 'y') ?? 0
-        const oldScroll = store.dataSvc.getScroll()?.y
-        if (oldScroll === newScroll) return
-        store.dataSvc.updateScroll('y', newScroll)
         store.render.render()
         store.scroll()
     }

diff --git a/src/components/canvas/defs/match.ts b/src/components/canvas/defs/match.ts
@@ -1,7 +1,7 @@
 import {SETTINGS} from '@/core/settings'
 import {Range} from '@/core/standable'
 import {Cell} from './cell'
-import {ViewRange} from '@/core/data2'
+import {CellViewData} from '@/core/data2'
 
 export function getOffset(
     clientX: number,
@@ -19,7 +19,7 @@ export function match(
     clientX: number,
     clientY: number,
     canvas: HTMLCanvasElement,
-    {rows, cols, cells}: ViewRange
+    data: readonly CellViewData[]
 ) {
     const {x, y} = getOffset(clientX, clientY, canvas)
     const clickPosition = new Range()
@@ -28,9 +28,16 @@ export function match(
         .setEndCol(x)
         .setEndRow(y)
     const {width: leftTopWidth, height: leftTopHeight} = SETTINGS.leftTop
-    const col = cols.find((c) => c.position.cover(clickPosition))
-    const row = rows.find((r) => r.position.cover(clickPosition))
-    const renderCell = cells.find((c) => c.position.cover(clickPosition))
+    const col = data
+        .flatMap((d) => d.cols)
+        .find((c) => c.position.cover(clickPosition))
+    const row = data
+        .flatMap((d) => d.rows)
+        .find((r) => r.position.cover(clickPosition))
+    const renderCell = data
+        .flatMap((d) => d.cols)
+        .flat()
+        .find((c) => c.position.cover(clickPosition))
     if (x <= leftTopWidth && y <= leftTopHeight) return new Cell('LeftTop')
     else if (row) return new Cell('FixedLeftHeader').copyByRenderCell(row)
     else if (col) return new Cell('FixedTopHeader').copyByRenderCell(col)

diff --git a/src/components/canvas/store/highlights.ts b/src/components/canvas/store/highlights.ts
@@ -37,7 +37,7 @@ export class Highlights {
     update(text: string) {
         const ranges = getRanges(text)
         const newCells: HighlightCell[] = []
-        const viewRange = this.store.dataSvc.cachedViewRange
+        const viewRange = this.store.getCurrentCellView()
         const find = (cell: HighlightCell) => {
             return this.highlightCells.find((c) => equal(c, cell))
         }
@@ -52,14 +52,16 @@ export class Highlights {
                 colEnd,
                 style: new HighlightCellStyle(),
             }
-            const cell = viewRange.cells.find((c) => {
-                const range = new Range()
-                    .setStartCol(newCell.colStart)
-                    .setStartRow(newCell.rowStart)
-                    .setEndCol(newCell.colEnd ?? newCell.colStart)
-                    .setEndRow(newCell.rowEnd ?? newCell.rowStart)
-                return c.coordinate.cover(range)
-            })
+            const cell = viewRange
+                .flatMap((d) => d.cells)
+                .find((c) => {
+                    const range = new Range()
+                        .setStartCol(newCell.colStart)
+                        .setStartRow(newCell.rowStart)
+                        .setEndCol(newCell.colEnd ?? newCell.colStart)
+                        .setEndRow(newCell.rowEnd ?? newCell.rowStart)
+                    return c.coordinate.cover(range)
+                })
             if (!cell) return
             const oldCell = find(newCell)
             if (oldCell) newCell.style = oldCell.style

diff --git a/src/components/canvas/store/render.ts b/src/components/canvas/store/render.ts
@@ -2,12 +2,13 @@ import {makeObservable} from 'mobx'
 import {CanvasStore} from './store'
 import {Box, CanvasAttr, PainterService, TextAttr} from '@/core/painter'
 import {simpleUuid, toA1notation} from '@/core'
-import {RenderCell} from '@/core/data2'
+import {CellViewData, CellViewRespType, RenderCell} from '@/core/data2'
 import {SETTINGS} from '@/core/settings'
 import {StandardColor, Range, StandardCell} from '@/core/standable'
 import {StandardStyle} from '@/core/standable/style'
 import {PatternFill} from '@logisheets_bg'
 export const CANVAS_ID = simpleUuid()
+const BUFFER_SIZE = 200
 
 export class Render {
     constructor(public readonly store: CanvasStore) {
@@ -18,16 +19,26 @@ export class Render {
     }
 
     render() {
-        this._painterService.setupCanvas(this.canvas)
-        this._painterService.clear()
         const rect = this.canvas.getBoundingClientRect()
-        this.store.dataSvc.setWindowSize(rect.height, rect.width)
-        this.store.dataSvc.getCellViewData()
-        this._renderGrid()
-        this._renderContent()
-        this._renderLeftHeader()
-        this._renderTopHeader()
-        this._renderLeftTop()
+        const resp = this.store.dataSvc.getCellView(
+            this.store.currSheetIdx,
+            rect.x - BUFFER_SIZE,
+            rect.y - BUFFER_SIZE,
+            rect.height + BUFFER_SIZE * 3,
+            rect.width + BUFFER_SIZE * 1.5
+        )
+        if (resp.type === CellViewRespType.New) {
+            this._painterService.setupCanvas(this.canvas)
+            this._painterService.clear()
+        }
+        if (resp.type !== CellViewRespType.Existed) {
+            const data = resp.data
+            this._renderGrid(data)
+            this._renderContent(data)
+            this._renderLeftHeader(data)
+            this._renderTopHeader(data)
+            this._renderLeftTop()
+        }
 
         // rerender resizer
         this.store.resizer.init()
@@ -51,50 +62,56 @@ export class Render {
     /**
      * main content + freeze content.
      */
-    private _renderContent() {
-        this.store.dataSvc.getCellViewData().cells.forEach((cell) => {
-            this._painterService.save()
-            this._renderCell(cell)
-            this._painterService.restore()
+    private _renderContent(data: readonly CellViewData[]) {
+        this._painterService.save()
+        data.forEach((d) => {
+            d.cells.forEach((cell) => {
+                this._renderCell(cell)
+            })
         })
+        this._painterService.restore()
     }
 
-    private _renderLeftHeader() {
+    private _renderLeftHeader(data: readonly CellViewData[]) {
         this._painterService.save()
-        this.store.dataSvc.getCellViewData().rows.forEach((r) => {
-            const {startRow, startCol, endRow, endCol} = r.position
-            this._painterService.line([
-                [startCol, startRow],
-                [endCol, startRow],
-                [endCol, endRow],
-                [startCol, endRow],
-            ])
-            const box = new Box()
-            box.position = r.position
-            const attr = new TextAttr()
-            attr.font = SETTINGS.fixedHeader.font
-            const position = (r.coordinate.startRow + 1).toString()
-            this._painterService.text(position, attr, box)
+        data.forEach((d) => {
+            d.rows.forEach((r) => {
+                const {startRow, startCol, endRow, endCol} = r.position
+                this._painterService.line([
+                    [startCol, startRow],
+                    [endCol, startRow],
+                    [endCol, endRow],
+                    [startCol, endRow],
+                ])
+                const box = new Box()
+                box.position = r.position
+                const attr = new TextAttr()
+                attr.font = SETTINGS.fixedHeader.font
+                const position = (r.coordinate.startRow + 1).toString()
+                this._painterService.text(position, attr, box)
+            })
         })
         this._painterService.restore()
     }
 
-    private _renderTopHeader() {
+    private _renderTopHeader(data: readonly CellViewData[]) {
         this._painterService.save()
-        this.store.dataSvc.getCellViewData().cols.forEach((c) => {
-            const {startRow, startCol, endRow, endCol} = c.position
-            this._painterService.line([
-                [endCol, startRow],
-                [endCol, endRow],
-                [startCol, endRow],
-                [startCol, startRow],
-            ])
-            const a1Notation = toA1notation(c.coordinate.startCol)
-            const box = new Box()
-            box.position = c.position
-            const attr = new TextAttr()
-            attr.font = SETTINGS.fixedHeader.font
-            this._painterService.text(a1Notation, attr, box)
+        data.forEach((d) => {
+            d.cols.forEach((c) => {
+                const {startRow, startCol, endRow, endCol} = c.position
+                this._painterService.line([
+                    [endCol, startRow],
+                    [endCol, endRow],
+                    [startCol, endRow],
+                    [startCol, startRow],
+                ])
+                const a1Notation = toA1notation(c.coordinate.startCol)
+                const box = new Box()
+                box.position = c.position
+                const attr = new TextAttr()
+                attr.font = SETTINGS.fixedHeader.font
+                this._painterService.text(a1Notation, attr, box)
+            })
         })
         this._painterService.restore()
     }
@@ -157,29 +174,32 @@ export class Render {
             ])
     }
 
-    private _renderGrid() {
-        const viewRange = this.store.dataSvc.getCellViewData()
+    private _renderGrid(data: readonly CellViewData[]) {
         const {grid, leftTop} = SETTINGS
         this._painterService.save()
         const attr = new CanvasAttr()
         attr.lineWidth = grid.lineWidth
         this._painterService.attr(attr)
         const rect = this.canvas.getBoundingClientRect()
         if (grid.showHorizontal)
-            viewRange.rows.forEach((r) => {
-                const y = r.position.startRow
-                this._painterService.line([
-                    [leftTop.width, y],
-                    [rect.width, y],
-                ])
+            data.forEach((d) => {
+                d.rows.forEach((r) => {
+                    const y = r.position.startRow
+                    this._painterService.line([
+                        [leftTop.width, y],
+                        [rect.width, y],
+                    ])
+                })
             })
         if (grid.showVertical)
-            viewRange.cols.forEach((c) => {
-                const x = c.position.startCol
-                this._painterService.line([
-                    [x, leftTop.height],
-                    [x, rect.height],
-                ])
+            data.forEach((d) => {
+                d.cols.forEach((c) => {
+                    const x = c.position.startCol
+                    this._painterService.line([
+                        [x, leftTop.height],
+                        [x, rect.height],
+                    ])
+                })
             })
         this._painterService.restore()
     }