WIP: use web worker

packages/web/src/api/index.ts

@@ -1,6 +1,7 @@
 export * from './workbook'
 export * from './worksheet'
-export {CalcException, CustomFunc} from './calculator'
+export {CalcException, CustomFunc, Calculator} from './calculator'
 export type {Executor} from './calculator'
 export * from './cell'
 export {isErrorMessage} from './utils'
+export type {Result} from './utils'

packages/web/src/index.ts

@@ -7,22 +7,24 @@ export type {
     BlockInfo,
     Border,
     BorderPr,
+    CellInfo,
+    CellPosition,
     ColInfo,
     Color,
     Comment,
     CtCellAlignment,
-    CellInfo,
     CtCellProtection,
     CtFontFamily,
     CtFontName,
     CtFontScheme,
     CtUnderlineProperty,
     DisplayPatch,
-    DisplaySheetRequest,
     DisplayResponse,
+    DisplaySheetRequest,
     DisplayWindow,
     DisplayWindowWithStartPoint,
     EditAction,
+    ErrorMessage,
     Fill,
     Font,
     MergeCell,

src/components/canvas/contextmenu.tsx

@@ -54,12 +54,12 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
         )
         setBlockMenuOpened(true)
     }
-    const _addCol = () => {
+    const _addCol = async () => {
         const sheet = DATA_SERVICE.getCurrentSheetIdx()
         const {
             coordinate: {startCol: start},
         } = startCell
-        const blocks = _checkBlock()
+        const blocks = await _checkBlock()
         if (blocks.length !== 0) {
             _blockProcess(blocks, (blks) =>
                 blks.map((block): Payload => {
@@ -82,12 +82,12 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
         DATA_SERVICE.handleTransaction(new Transaction([payload], true))
     }
 
-    const _removeCol = () => {
+    const _removeCol = async () => {
         const {
             coordinate: {startCol: start},
         } = startCell
         const sheet = DATA_SERVICE.getCurrentSheetIdx()
-        const blocks = _checkBlock()
+        const blocks = await _checkBlock()
         if (blocks.length !== 0) {
             _blockProcess(blocks, (blks) =>
                 blks.map((block): Payload => {
@@ -110,12 +110,12 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
         DATA_SERVICE.handleTransaction(new Transaction([payload], true))
     }
 
-    const _addRow = () => {
+    const _addRow = async () => {
         const {
             coordinate: {startRow: start},
         } = startCell
         const sheet = DATA_SERVICE.getCurrentSheetIdx()
-        const blocks = _checkBlock()
+        const blocks = await _checkBlock()
         if (blocks.length !== 0) {
             _blockProcess(blocks, (blks) =>
                 blks.map((block): Payload => {
@@ -137,12 +137,12 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
         DATA_SERVICE.handleTransaction(new Transaction([payload], true))
     }
 
-    const _removeRow = () => {
+    const _removeRow = async () => {
         const {
             coordinate: {startRow: start},
         } = startCell
         const sheet = DATA_SERVICE.getCurrentSheetIdx()
-        const blocks = _checkBlock()
+        const blocks = await _checkBlock()
         if (blocks.length !== 0) {
             _blockProcess(blocks, (blks) =>
                 blks.map((block): Payload => {
@@ -164,7 +164,7 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
         DATA_SERVICE.handleTransaction(new Transaction([payload], true))
     }
 
-    const _addBlock = () => {
+    const _addBlock = async () => {
         const endCellTruthy = endCell ?? startCell
         const start = startCell.coordinate
         const end = endCellTruthy.coordinate
@@ -179,10 +179,11 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
         DATA_SERVICE.handleTransaction(new Transaction([payload], true))
     }
 
-    const _checkBlock = () => {
+    const _checkBlock = async () => {
         const {coordinate: start} = startCell
         const {coordinate: end} = endCell ?? startCell
-        const result = DATA_SERVICE.getActiveSheet().getFullyCoveredBlocks(
+        const result = await DATA_SERVICE.getFullyCoveredBlocks(
+            DATA_SERVICE.getCurrentSheetIdx(),
             start.startRow,
             start.startCol,
             end.endRow - start.startRow + 1,

src/components/canvas/store/render.ts

@@ -11,7 +11,7 @@ import {
 import {LeftTop, SETTINGS} from '@/core/settings'
 import {StandardColor, Range, StandardCell} from '@/core/standable'
 import {StandardStyle} from '@/core/standable/style'
-import {PatternFill} from 'logisheets-web'
+import {isErrorMessage, PatternFill} from 'logisheets-web'
 export const CANVAS_ID = simpleUuid()
 const BUFFER_SIZE = 0
 
@@ -32,17 +32,20 @@ export class Render {
             rect.height + BUFFER_SIZE * 2,
             rect.width
         )
-        this._painterService.setupCanvas(this.canvas)
-        this._painterService.clear()
-        const data = resp.data
-        this._renderGrid(data)
-        this._renderContent(data)
-        this._renderLeftHeader(data)
-        this._renderTopHeader(data)
-        this._renderLeftTop()
+        resp.then((r) => {
+            if (isErrorMessage(r)) return
+            const data = r.data
+            this._painterService.setupCanvas(this.canvas)
+            this._painterService.clear()
+            this._renderGrid(data)
+            this._renderContent(data)
+            this._renderLeftHeader(data)
+            this._renderTopHeader(data)
+            this._renderLeftTop()
 
-        // rerender resizer
-        this.store.resizer.init()
+            // rerender resizer
+            this.store.resizer.init()
+        })
     }
 
     private _painterService = new PainterService()

src/components/canvas/store/resizer.ts

@@ -83,17 +83,17 @@ export class Resizer {
         const activeResizer = this.resizers[i]
         if (!activeResizer) return false
         this.movingStart = {x: e.clientX, y: e.clientY}
-        const sheet = this.store.dataSvc
-            .getWorkbook()
-            .getWorksheet(this.store.currSheetIdx)
-        const {startCol, startRow} = activeResizer.leftCell.coordinate
-        const info = activeResizer.isRow
-            ? sheet.getRowHeight(startCol)
-            : sheet.getColWidth(startRow)
-        if (isErrorMessage(info)) {
-            throw Error(info.msg)
-        }
-        const value = (this.hoverText = `${info}px`)
+        // const sheet = this.store.dataSvc
+        //     .getWorkbook()
+        //     .getWorksheet(this.store.currSheetIdx)
+        // const {startCol, startRow} = activeResizer.leftCell.coordinate
+        // const info = activeResizer.isRow
+        //     ? sheet.getRowHeight(startCol)
+        //     : sheet.getColWidth(startRow)
+        // if (isErrorMessage(info)) {
+        //     throw Error(info.msg)
+        // }
+        // const value = (this.hoverText = `${info}px`)
         this.active = activeResizer
         this.moving = {x: 0, y: 0}
         return true

src/components/canvas/store/textarea.ts

@@ -75,29 +75,30 @@ export class Textarea {
             coordinate: {startRow: row, startCol: col},
             position: {startCol: x, startRow: y},
         } = startCell
-        const info = this.store.dataSvc.getActiveSheet().getCell(row, col)
-        if (isErrorMessage(info)) {
-            return
-        }
-        const text =
-            info.getFormula() === '' ? info.getFormula() : info.getText() ?? ''
-        const rect = this.store.render.canvas.getBoundingClientRect()
-        const [clientX, clientY] = [rect.x + x, rect.y + y]
-        const context = new Context()
-        context.text = text
-        context.canvasOffsetX = x
-        context.canvasOffsetY = y
-        context.clientX = clientX ?? -1
-        context.clientY = clientY ?? -1
-        context.cellHeight = height
-        context.cellWidth = width
-        context.bindingData = startCell
-        context.textareaOffsetX =
-            (event as globalThis.MouseEvent).clientX - clientX
-        context.textareaOffsetY =
-            (event as globalThis.MouseEvent).clientY - clientY
-        context.bindingData = startCell
-        this._setEditing(true, context)
+        const sheet = this.store.dataSvc.getCurrentSheetIdx()
+        const info = this.store.dataSvc.getCellInfo(sheet, row, col)
+        info.then((c) => {
+            if (isErrorMessage(c)) return
+            const text =
+                c.getFormula() === '' ? c.getFormula() : c.getText() ?? ''
+            const rect = this.store.render.canvas.getBoundingClientRect()
+            const [clientX, clientY] = [rect.x + x, rect.y + y]
+            const context = new Context()
+            context.text = text
+            context.canvasOffsetX = x
+            context.canvasOffsetY = y
+            context.clientX = clientX ?? -1
+            context.clientY = clientY ?? -1
+            context.cellHeight = height
+            context.cellWidth = width
+            context.bindingData = startCell
+            context.textareaOffsetX =
+                (event as globalThis.MouseEvent).clientX - clientX
+            context.textareaOffsetY =
+                (event as globalThis.MouseEvent).clientY - clientY
+            context.bindingData = startCell
+            this._setEditing(true, context)
+        })
     }
 
     @action

src/components/content/edit-bar.tsx

@@ -23,11 +23,12 @@ export const EditBarComponent: FC<EditBarProps> = ({
         const {row, col} = selectedCell
         const notation = toA1notation(selectedCell.col)
         setCoordinate(`${notation}${row + 1}`)
-        const sheet = dataSvc.getActiveSheet()
-        const cell = sheet.getCell(row, col)
-        if (isErrorMessage(cell)) return
-        if (cell.getFormula() === '') setFormula(cell.getText())
-        else setFormula(cell.getFormula())
+        const cell = dataSvc.getCellInfo(dataSvc.getCurrentSheetIdx(), row, col)
+        cell.then((c) => {
+            if (isErrorMessage(c)) return
+            if (c.getFormula() === '') setFormula(c.getText())
+            else setFormula(c.getFormula())
+        })
     }, [selectedCell])
     const formulaTextChange = (newText: string) => {
         const payload = new CellInputBuilder()

src/components/sheets-tab/index.tsx

@@ -4,6 +4,7 @@ import {ContextMenuComponent} from './contextmenu'
 import {
     DeleteSheetBuilder,
     InsertSheetBuilder,
+    isErrorMessage,
     Transaction,
 } from 'logisheets-web'
 import {useInjection} from '@/core/ioc/provider'
@@ -16,16 +17,23 @@ export type SheetsTabprops = Record<string, unknown>
 
 export const SheetsTabComponent: FC<SheetsTabprops> = () => {
     const DATA_SERVICE = useInjection<DataService>(TYPES.Data)
-    const getSheets = () => DATA_SERVICE.getAllSheetInfo().map((s) => s.name)
-    const [sheets, setSheets] = useState(getSheets())
+    const getSheets = () => {
+        const sheetInfo = DATA_SERVICE.getAllSheetInfo().then((info) => {
+            if (!isErrorMessage(info)) return info.map((s) => s.name)
+        })
+        return sheetInfo
+    }
+    const [sheets, setSheets] = useState([] as string[])
     const [active, setActive] = useState(0)
     const [isOpen, setIsOpen] = useState(false)
 
     useEffect(() => {
         const subs = new Subscription()
         subs.add(
             DATA_SERVICE.registrySheetUpdatedCallback(() => {
-                setSheets(getSheets())
+                getSheets().then((v) => {
+                    if (v) setSheets(v)
+                })
             })
         )
         return () => {

src/components/top-bar/content/index.tsx

@@ -62,12 +62,14 @@ export const StartComponent = ({selectedCell}: StartProps) => {
     const _initStyle = () => {
         if (!selectedCell) return
         const {row, col} = selectedCell
-        const sheet = DATA_SERVICE.getActiveSheet()
-        const cellInfo = sheet.getCell(row, col)
-        if (isErrorMessage(cellInfo)) return
-        const style = cellInfo.getStyle()
-        const font = StandardFont.from(style.font)
-        setFontColor(font.standardColor.css())
+        const sheet = DATA_SERVICE.getCurrentSheetIdx()
+        const cellInfo = DATA_SERVICE.getCellInfo(sheet, row, col)
+        cellInfo.then((c) => {
+            if (isErrorMessage(c)) return
+            const style = c.getStyle()
+            const font = StandardFont.from(style.font)
+            setFontColor(font.standardColor.css())
+        })
     }
 
     // private _getPayloadType(
@@ -78,7 +80,7 @@ export const StartComponent = ({selectedCell}: StartProps) => {
     //     const col = this._selectedCell.col
     //     const sheet = this._dataSvc.sheetSvc.getActiveSheet()
     //     const item = this._itemMap.get(type)
-    //     if (item === undefined)
+    //     ifx item === undefined)
     //         return
     //     item.setOpened(false)
     //     if (row === -1 || col === -1 || sheet === -1)

src/core/data2/index.ts

@@ -1,5 +1,5 @@
 export * from './render'
 export * from './service'
 export * from './view_manager'
-export * from './workbook'
+export * from './workbook_service'
 export * from './types'