feat(web): add handle for keydown to select cell

src/components/canvas/contextmenu.tsx

@@ -56,7 +56,7 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
     const _addCol = () => {
         const sheet = SHEET_SERVICE.getActiveSheet()
         const {
-            coodinate: {startCol: start},
+            coordinate: {startCol: start},
         } = startCell
         const blocks = _checkBlock()
         if (blocks.length !== 0) {
@@ -83,7 +83,7 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
 
     const _removeCol = () => {
         const {
-            coodinate: {startCol: start},
+            coordinate: {startCol: start},
         } = startCell
         const sheet = SHEET_SERVICE.getActiveSheet()
         const blocks = _checkBlock()
@@ -111,7 +111,7 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
 
     const _addRow = () => {
         const {
-            coodinate: {startRow: start},
+            coordinate: {startRow: start},
         } = startCell
         const sheet = SHEET_SERVICE.getActiveSheet()
         const blocks = _checkBlock()
@@ -138,7 +138,7 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
 
     const _removeRow = () => {
         const {
-            coodinate: {startRow: start},
+            coordinate: {startRow: start},
         } = startCell
         const sheet = SHEET_SERVICE.getActiveSheet()
         const blocks = _checkBlock()
@@ -165,8 +165,8 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
 
     const _addBlock = () => {
         const endCellTruthy = endCell ?? startCell
-        const start = startCell.coodinate
-        const end = endCellTruthy.coodinate
+        const start = startCell.coordinate
+        const end = endCellTruthy.coordinate
         const payload = new CreateBlockBuilder()
             .blockId(1)
             .sheetIdx(SHEET_SERVICE.getActiveSheet())
@@ -179,8 +179,8 @@ export const ContextmenuComponent = (props: ContextmenuProps) => {
     }
 
     const _checkBlock = () => {
-        const {coodinate: start} = startCell
-        const {coodinate: end} = endCell ?? startCell
+        const {coordinate: start} = startCell
+        const {coordinate: end} = endCell ?? startCell
         const curr = new Range()
             .setStartRow(start.startRow)
             .setStartCol(start.startCol)

src/components/canvas/defs/cell.ts

@@ -21,8 +21,8 @@ export class Cell extends RenderCell {
 
 export function visibleCells(cell: Cell, end: Cell, sheetSvc: SheetService) {
     const cells: {readonly row: number; readonly col: number}[] = []
-    const {startCol, startRow} = cell.coodinate
-    const {endCol, endRow} = end.coodinate
+    const {startCol, startRow} = cell.coordinate
+    const {endCol, endRow} = end.coordinate
     for (let row = startRow; row <= endRow; row++) {
         for (let col = startCol; col < endCol; col++) {
             if (sheetSvc.getColInfo(col).hidden) continue

src/components/canvas/index.tsx

@@ -1,7 +1,15 @@
 import {SelectedCell} from './events'
 import {Subscription, Subject} from 'rxjs'
 import styles from './canvas.module.scss'
-import {MouseEvent, ReactElement, useRef, useState, FC, WheelEvent} from 'react'
+import {
+    MouseEvent,
+    ReactElement,
+    useRef,
+    useState,
+    FC,
+    WheelEvent,
+    KeyboardEvent,
+} from 'react'
 import {
     useSelector,
     useStartCell,
@@ -17,7 +25,7 @@ import {
 } from './widgets'
 import {Cell} from './defs'
 import {ScrollbarComponent} from '@/components/scrollbar'
-import {EventType, on} from '@/core/events'
+import {EventType, KeyboardEventCode, on} from '@/core/events'
 import {ContextmenuComponent} from './contextmenu'
 import {SelectorComponent} from '@/components/selector'
 import {ResizerComponent} from '@/components/resize'
@@ -28,7 +36,13 @@ import {Buttons} from '@/core'
 import {CellInputBuilder} from '@/api'
 import {DialogComponent} from '@/ui/dialog'
 import {useInjection} from '@/core/ioc/provider'
-import {Backend, DataService, SheetService} from '@/core/data'
+import {
+    Backend,
+    DataService,
+    MAX_COUNT,
+    RenderCell,
+    SheetService,
+} from '@/core/data'
 import {TYPES} from '@/core/ioc/types'
 export const OFFSET = 100
 
@@ -66,7 +80,7 @@ export const CanvasComponent: FC<CanvasProps> = ({selectedCell$}) => {
         textMng.startCellChange(e)
         if (e === undefined || e.same) return
         if (e?.cell?.type !== 'Cell') return
-        const {startRow: row, startCol: col} = e.cell.coodinate
+        const {startRow: row, startCol: col} = e.cell.coordinate
         selectedCell$({row, col})
     }
     const startCellMng = useStartCell({startCellChange})
@@ -106,10 +120,11 @@ export const CanvasComponent: FC<CanvasProps> = ({selectedCell$}) => {
         startCellMng.scroll()
     }
 
-    const onMousedown = async (e: MouseEvent) => {
+    const onMouseDown = async (e: MouseEvent) => {
         e.stopPropagation()
         e.preventDefault()
         const mousedown = async () => {
+            canvasEl.current?.focus()
             const isBlur = await textMng.blur()
             if (!isBlur) {
                 focus$.current.next()
@@ -163,6 +178,76 @@ export const CanvasComponent: FC<CanvasProps> = ({selectedCell$}) => {
         )
     }
 
+    const onKeyDown = async (e: KeyboardEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+
+        if (e.metaKey || e.altKey || e.shiftKey || e.ctrlKey) return
+
+        const currSelected = selectorMng.startCell
+
+        if (!currSelected || currSelected.type != 'Cell') return
+
+        const jumpTo = (row: number, col: number, keepHorizontal: boolean) => {
+            const result = DATA_SERVICE.tryJumpTo(row, col)
+
+            if (result instanceof RenderCell) return result
+
+            const scrollX = result[0]
+            const scrollY = result[1]
+
+            const scroll = SHEET_SERVICE.getSheet()?.scroll
+            if (!scroll) throw Error('No active sheet')
+
+            if (keepHorizontal) {
+                scroll.update('y', scrollY)
+            } else {
+                scroll.update('x', scrollX)
+            }
+
+            renderMng.render()
+            const newResult = DATA_SERVICE.jumpTo(row, col)
+            if (!newResult) throw Error('jump to function error')
+
+            return newResult
+        }
+
+        const startRow = currSelected.coordinate.startRow
+        const startCol = currSelected.coordinate.startCol
+        const endRow = currSelected.coordinate.endRow
+        const endCol = currSelected.coordinate.endCol
+
+        let renderCell: RenderCell | null = null
+        switch (e.key) {
+            case KeyboardEventCode.ARROW_UP: {
+                const newStartRow = Math.max(startRow - 1, 0)
+                renderCell = jumpTo(newStartRow, startCol, true)
+                break
+            }
+            case KeyboardEventCode.ARROW_DOWN: {
+                const newRow = Math.min(endRow + 1, MAX_COUNT)
+                renderCell = jumpTo(newRow, endCol, true)
+                break
+            }
+            case KeyboardEventCode.ARROW_LEFT: {
+                const newCol = Math.max(startCol - 1, 0)
+                renderCell = jumpTo(startRow, newCol, false)
+                break
+            }
+            case KeyboardEventCode.ARROW_RIGHT: {
+                const newCol = Math.min(endCol + 1, MAX_COUNT)
+                renderCell = jumpTo(startRow, newCol, false)
+                break
+            }
+            default:
+                return
+        }
+        if (renderCell) {
+            const c = new Cell('Cell').copyByRenderCell(renderCell)
+            startCellChange(new StartCellEvent(c, 'scroll'))
+        }
+    }
+
     const blur = (e: BlurEvent<Cell>) => {
         const oldText = textMng.context?.text ?? ''
         textMng.blur()
@@ -171,8 +256,8 @@ export const CanvasComponent: FC<CanvasProps> = ({selectedCell$}) => {
         const newText = textMng.currText.current.trim()
         if (oldText === newText) return
         const payload = new CellInputBuilder()
-            .row(e.bindingData.coodinate.startRow)
-            .col(e.bindingData.coodinate.startCol)
+            .row(e.bindingData.coordinate.startRow)
+            .col(e.bindingData.coordinate.startCol)
             .sheetIdx(SHEET_SERVICE.getActiveSheet())
             .input(newText)
             .build()
@@ -209,13 +294,15 @@ export const CanvasComponent: FC<CanvasProps> = ({selectedCell$}) => {
     return (
         <div
             onContextMenu={(e) => onContextMenu(e)}
-            onMouseDown={onMousedown}
+            onMouseDown={onMouseDown}
             className={styles.host}
         >
             <canvas
+                tabIndex={0}
                 className={styles.canvas}
                 ref={canvasEl}
                 onWheel={onMouseWheel}
+                onKeyDown={onKeyDown}
             >
                 你的浏览器不支持canvas，请升级浏览器
             </canvas>

src/components/canvas/widgets/highlight-cell.ts

@@ -77,7 +77,7 @@ export const useHighlightCell = () => {
                     .setStartRow(newCell.rowStart)
                     .setEndCol(newCell.colEnd ?? newCell.colStart)
                     .setEndRow(newCell.rowEnd ?? newCell.rowStart)
-                return c.coodinate.cover(range)
+                return c.coordinate.cover(range)
             })
             if (!cell) return
             const oldCell = find(newCell)
@@ -117,7 +117,7 @@ export const useHighlightCell = () => {
                     .setStartCol(newCell.colStart)
                     .setEndCol(newCell.colEnd ?? newCell.colStart)
                     .setEndRow(newCell.rowEnd ?? newCell.rowStart)
-                return c.coodinate.cover(range)
+                return c.coordinate.cover(range)
             })
             if (!cell) return
             const currColors = newCells.map((c) => c.style.bgColor)

src/components/canvas/widgets/render.ts

@@ -55,7 +55,7 @@ export const useRender = ({canvas, rendered}: RenderProps) => {
         rendered()
     }
     const _renderCell = (renderCell: RenderCell) => {
-        const {coodinate: range, position} = renderCell
+        const {coordinate: range, position} = renderCell
         const style = sheetSvc.getCell(range.startRow, range.startCol)?.style
         const box = new Box()
         box.position = position
@@ -90,7 +90,7 @@ export const useRender = ({canvas, rendered}: RenderProps) => {
             box.position = r.position
             const attr = new TextAttr()
             attr.font = SETTINGS.fixedHeader.font
-            const position = (r.coodinate.startRow + 1).toString()
+            const position = (r.coordinate.startRow + 1).toString()
             painterSvc.current.text(position, attr, box)
         })
         painterSvc.current.restore()
@@ -106,7 +106,7 @@ export const useRender = ({canvas, rendered}: RenderProps) => {
                 [startCol, endRow],
                 [startCol, startRow],
             ])
-            const a1Notation = toA1notation(c.coodinate.startCol)
+            const a1Notation = toA1notation(c.coordinate.startCol)
             const box = new Box()
             box.position = c.position
             const attr = new TextAttr()

src/components/canvas/widgets/resizer.ts

@@ -75,7 +75,7 @@ export const useResizers = (canvas: RefObject<HTMLCanvasElement>) => {
         if (!activeResizer) return false
         movingStart.current = {x: e.clientX, y: e.clientY}
         const sheet = SHEET_SERVICE
-        const {startCol, startRow} = activeResizer.leftCell.coodinate
+        const {startCol, startRow} = activeResizer.leftCell.coordinate
         const info = activeResizer.isRow
             ? sheet.getRowInfo(startCol)
             : sheet.getColInfo(startRow)
@@ -114,7 +114,7 @@ export const useResizers = (canvas: RefObject<HTMLCanvasElement>) => {
         if (_active.current) {
             const {
                 isRow,
-                leftCell: {coodinate, width, height},
+                leftCell: {coordinate: coodinate, width, height},
             } = _active.current
             const payload = !isRow
                 ? new SetColWidthBuilder()

src/components/canvas/widgets/selector.ts

@@ -119,6 +119,11 @@ export const useSelector = ({canvas, selectorChange}: UseSelectorProps) => {
         setStartCell(startCell)
     }
 
+    const selectCell = (cell: Cell) => {
+        setEndCell(undefined)
+        setStartCell(cell)
+    }
+
     const startCellChange = (e?: StartCellEvent) => {
         if (e?.cell === undefined) {
             _setSelector()
@@ -139,5 +144,6 @@ export const useSelector = ({canvas, selectorChange}: UseSelectorProps) => {
         onContextmenu,
         onMouseDown,
         onMouseMove,
+        selectCell,
     }
 }

src/components/canvas/widgets/start-cell.ts

@@ -41,15 +41,15 @@ export const useStartCell = ({startCellChange}: StartCellProps) => {
         const viewRange = DATA_SERVICE.cachedViewRange
         if (oldStartCell.type === 'FixedLeftHeader')
             renderCell = viewRange.rows.find((r) =>
-                r.coodinate.cover(oldStartCell.coodinate)
+                r.coordinate.cover(oldStartCell.coordinate)
             )
         else if (oldStartCell.type === 'FixedTopHeader')
             renderCell = viewRange.cols.find((c) =>
-                c.coodinate.cover(oldStartCell.coodinate)
+                c.coordinate.cover(oldStartCell.coordinate)
             )
         else if (oldStartCell.type === 'Cell')
             renderCell = viewRange.cells.find((c) =>
-                c.coodinate.cover(oldStartCell.coodinate)
+                c.coordinate.cover(oldStartCell.coordinate)
             )
         else return
         if (!renderCell) {

src/components/canvas/widgets/text.ts

@@ -70,7 +70,7 @@ export const useText = ({canvas, onEdit}: TextProps) => {
         const {
             height,
             width,
-            coodinate: {startRow: row, startCol: col},
+            coordinate: {startRow: row, startCol: col},
             position: {startCol: x, startRow: y},
         } = startCell
         const info = SHEET_SERVICE.getCell(row, col)

src/components/canvas/widgets/useMatch.ts

@@ -2,13 +2,9 @@ import {match} from '../defs'
 import {ViewRange} from '@/core/data'
 import {RefObject} from 'react'
 export const useMatch = (canvas: RefObject<HTMLCanvasElement>) => {
-    const _match = (
-        clientX: number,
-        clientY: number,
-        {rows, cols, cells}: ViewRange
-    ) => {
+    const _match = (clientX: number, clientY: number, viewRange: ViewRange) => {
         if (!canvas.current) return
-        return match(clientX, clientY, canvas.current, {rows, cols, cells})
+        return match(clientX, clientY, canvas.current, viewRange)
     }
     return {
         match: _match,

src/components/content/index.tsx

@@ -1,5 +1,5 @@
 import {SelectedCell, CanvasComponent} from '@/components/canvas'
-import {FC} from 'react'
+import {FC, useRef} from 'react'
 import styles from './content.module.scss'
 import {EditBarComponent} from './edit-bar'
 import {SheetsTabComponent} from '@/components/sheets-tab'