fix: resizer

crates/wasms/server/src/controller.rs

@@ -3,7 +3,7 @@ use logisheets_controller::edit_action::{
     AsyncFuncResult, BlockInput, CellClear, CellInput, CreateBlock, CreateSheet, DeleteCols,
     DeleteColsInBlock, DeleteRows, DeleteRowsInBlock, DeleteSheet, EditAction, EditPayload,
     InsertCols, InsertColsInBlock, InsertRows, InsertRowsInBlock, MoveBlock, PayloadsAction,
-    SheetRename, StyleUpdate, StyleUpdateType,
+    SetColWidth, SetRowHeight, SheetRename, StyleUpdate, StyleUpdateType,
 };
 use logisheets_controller::{AsyncCalcResult, AsyncErr, RowInfo, SaveFileResult, Workbook};
 use logisheets_controller::{ColInfo, ErrorMessage};
@@ -518,6 +518,20 @@ pub fn cell_clear(id: usize, sheet_idx: usize, row: usize, col: usize) {
     );
 }
 
+#[wasm_bindgen]
+pub fn set_row_height(id: usize, sheet_idx: usize, row: usize, height: f64) {
+    init();
+    let mut manager = MANAGER.get_mut();
+    manager.add_payload(
+        id,
+        EditPayload::SetRowHeight(SetRowHeight {
+            sheet_idx,
+            row,
+            height,
+        }),
+    );
+}
+
 #[wasm_bindgen]
 pub fn row_insert(id: usize, sheet_idx: usize, start: usize, count: usize) {
     init();
@@ -574,6 +588,20 @@ pub fn col_delete(id: usize, sheet_idx: usize, start: usize, count: usize) {
     );
 }
 
+#[wasm_bindgen]
+pub fn set_col_width(id: usize, sheet_idx: usize, col: usize, width: f64) {
+    init();
+    let mut manager = MANAGER.get_mut();
+    manager.add_payload(
+        id,
+        EditPayload::SetColWidth(SetColWidth {
+            sheet_idx,
+            col,
+            width,
+        }),
+    );
+}
+
 #[wasm_bindgen]
 pub fn create_block(
     id: usize,

packages/web/src/api/workbook.ts

@@ -21,7 +21,9 @@ import {
     row_delete,
     row_insert,
     set_border,
+    set_col_width,
     set_font,
+    set_row_height,
     sheet_rename_by_idx,
     sheet_rename_by_name,
     transaction_end,
@@ -259,8 +261,12 @@ export class Workbook {
             return create_sheet(this._id, p.sheetIdx, p.name)
         if (p.type === 'cellClear')
             return cell_clear(this._id, p.sheetIdx, p.row, p.col)
+        if (p.type === 'setColWidth')
+            return set_col_width(this._id, p.sheetIdx, p.col, p.width)
+        if (p.type === 'setRowHeight')
+            return set_row_height(this._id, p.sheetIdx, p.row, p.height)
         // eslint-disable-next-line no-console
-        console.log('Unimplemented!')
+        console.log(`Unimplemented!: ${p.type}`)
     }
 
     private _inputAsyncResult(r: AsyncFuncResult): ActionEffect {

src/components/canvas/component.tsx

@@ -11,7 +11,7 @@ import {
     useEffect,
     useContext,
 } from 'react'
-import {debounceTime} from 'rxjs/operators'
+import {debounceTime, take, takeUntil} from 'rxjs/operators'
 import {Cell} from './defs'
 import {ScrollbarComponent} from '@/components/scrollbar'
 import {EventType, KeyboardEventCode, on} from '@/core/events'
@@ -87,34 +87,6 @@ const Internal: FC<CanvasProps> = observer((props: CanvasProps) => {
     }, [activeSheet])
 
     useEffect(() => {
-        const sub = on(window, EventType.MOUSE_MOVE).subscribe((mme) => {
-            mme.preventDefault()
-            if (store.type !== 'mousedown') return
-            const startCell = store.match(mme.clientX, mme.clientY)
-            if (!startCell) return
-            const isResize = store.resizer.mousemove(mme)
-            if (isResize) return
-            if (store.startCell?.equals(startCell) === false) {
-                const isDnd = store.dnd.onMouseMove(
-                    mme,
-                    startCell,
-                    store.selector.endCell ?? startCell
-                )
-                if (isDnd) return
-            }
-            store.selector.onMouseMove(startCell)
-        })
-        return () => {
-            sub.unsubscribe()
-        }
-    }, [])
-
-    useEffect(() => {
-        const sub = on(window, EventType.MOUSE_UP).subscribe(() => {
-            store.type = undefined
-            store.dnd.onMouseUp()
-            store.resizer.mouseup()
-        })
         const resizeSub = on(window, EventType.RESIZE)
             .pipe(debounceTime(100))
             .subscribe(() => {
@@ -124,7 +96,6 @@ const Internal: FC<CanvasProps> = observer((props: CanvasProps) => {
                 store.scrollbar.onResize()
             })
         return () => {
-            sub.unsubscribe()
             resizeSub.unsubscribe()
         }
     }, [])
@@ -157,12 +128,43 @@ const Internal: FC<CanvasProps> = observer((props: CanvasProps) => {
         }
         store.render.canvas.focus()
         if (e.buttons !== Buttons.LEFT) return
-        const matchCell = store.match(e.clientX, e.clientY)
-        if (!matchCell) return
+
+        const mouseMove$ = on(window, EventType.MOUSE_MOVE)
+        const mouseUp$ = on(window, EventType.MOUSE_UP)
+
+        const sub = mouseMove$
+            .pipe(takeUntil(on(window, EventType.MOUSE_UP)))
+            .subscribe((mme) => {
+                mme.preventDefault()
+                const isResize = store.resizer.mousemove(mme)
+                if (isResize) return
+                const startCell = store.match(mme.clientX, mme.clientY)
+                if (!startCell) return
+                if (store.startCell?.equals(startCell) === false) {
+                    const isDnd = store.dnd.onMouseMove(
+                        mme,
+                        startCell,
+                        store.selector.endCell ?? startCell
+                    )
+                    if (isDnd) return
+                }
+                store.selector.onMouseMove(startCell)
+            })
+        mouseUp$.pipe(take(1)).subscribe(() => {
+            store.type = undefined
+            store.dnd.onMouseUp()
+            store.resizer.mouseup()
+            sub.unsubscribe()
+        })
+
         const isResize = store.resizer.mousedown(e.nativeEvent)
         if (isResize) return
+
         const isDnd = store.dnd.onMouseDown(e.nativeEvent)
         if (isDnd) return
+
+        const matchCell = store.match(e.clientX, e.clientY)
+        if (!matchCell) return
         store.mousedown(e, matchCell)
         if (matchCell?.type !== 'Cell') return
         const {startRow: row, startCol: col} = matchCell.coordinate
@@ -328,8 +330,8 @@ const Internal: FC<CanvasProps> = observer((props: CanvasProps) => {
                 return (
                     <ResizerComponent
                         hoverText={store.resizer.hoverText}
-                        x={!isRow ? x : 0}
-                        y={!isRow ? 0 : y}
+                        x={!isRow ? x + width / 2 : 0}
+                        y={!isRow ? 0 : y + height / 2}
                         width={width}
                         height={height}
                         key={i}

src/components/canvas/store/resizer.ts

@@ -2,7 +2,7 @@ import {action, makeObservable, observable} from 'mobx'
 import {CanvasStore} from './store'
 import {RenderCell} from '@/core/data2'
 import {Range} from '@/core/standable'
-import {pxToPt} from '@/core'
+import {pxToPt, pxToWidth} from '@/core'
 import {
     SetColWidthBuilder,
     SetRowHeightBuilder,
@@ -14,9 +14,9 @@ import {getOffset} from '../defs'
 interface ResizerProps {
     readonly range: Range
     readonly isRow: boolean
-    readonly leftCell: RenderCell
+    readonly cell: RenderCell
 }
-const RESIZER_SIZE = 4
+const RESIZER_SIZE = 6
 
 export class Resizer {
     constructor(public readonly store: CanvasStore) {
@@ -42,28 +42,36 @@ export class Resizer {
         const data = this.store.getCurrentCellView()
         const rowResizers = data
             .flatMap((d) => d.rows)
-            .map((cell) => {
+            .map((c) => {
+                const cell = this.store.convertToCanvasPosition(
+                    c.position,
+                    'FixedLeftHeader'
+                )
                 return {
                     range: new Range()
-                        .setStartRow(cell.position.endRow)
-                        .setEndRow(cell.position.endRow + RESIZER_SIZE)
-                        .setStartCol(cell.position.startCol)
-                        .setEndCol(cell.position.endCol),
+                        .setStartRow(cell.endRow - RESIZER_SIZE)
+                        .setEndRow(cell.endRow + RESIZER_SIZE)
+                        .setStartCol(cell.startCol)
+                        .setEndCol(cell.endCol),
                     isRow: true,
-                    leftCell: cell,
+                    cell: c,
                 }
             })
         const colResizers = data
             .flatMap((d) => d.cols)
-            .map((cell) => {
+            .map((c) => {
+                const cell = this.store.convertToCanvasPosition(
+                    c.position,
+                    'FixedTopHeader'
+                )
                 return {
                     range: new Range()
-                        .setStartCol(cell.position.endCol)
-                        .setStartRow(cell.position.startRow)
-                        .setEndCol(cell.position.endCol + RESIZER_SIZE)
-                        .setEndRow(cell.position.endRow),
+                        .setStartCol(cell.endCol - RESIZER_SIZE)
+                        .setStartRow(cell.startRow)
+                        .setEndCol(cell.endCol + RESIZER_SIZE)
+                        .setEndRow(cell.endRow),
                     isRow: false,
-                    leftCell: cell,
+                    cell: c,
                 }
             })
         this.updateResizers(rowResizers.concat(colResizers))
@@ -78,22 +86,18 @@ export class Resizer {
             .setEndRow(y)
             .setStartCol(x)
             .setEndCol(x)
-        const i = this.resizers.findIndex((r) => r.range.cover(mousedownRange))
+        const i = this.resizers.findIndex((r) => {
+            return r.range.cover(mousedownRange)
+        })
         if (i === -1) return false
         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 info = activeResizer.isRow
+            ? activeResizer.cell.height
+            : activeResizer.cell.width
+        const result = Math.round(info * 10) / 10
+        this.hoverText = `${result}px`
         this.active = activeResizer
         this.moving = {x: 0, y: 0}
         return true
@@ -104,7 +108,7 @@ export class Resizer {
         if (!this.active || !this.movingStart) return false
         const {
             isRow,
-            leftCell: {
+            cell: {
                 position: {startCol, startRow, endCol, endRow},
             },
         } = this.active
@@ -130,13 +134,13 @@ export class Resizer {
         if (this.active) {
             const {
                 isRow,
-                leftCell: {coordinate: coodinate, width, height},
+                cell: {coordinate: coodinate, width, height},
             } = this.active
             const payload = !isRow
                 ? new SetColWidthBuilder()
                       .sheetIdx(this.store.currSheetIdx)
                       .col(coodinate.startCol)
-                      .width(pxToPt(this.moving.x + width))
+                      .width(pxToWidth(this.moving.x + width))
                       .build()
                 : new SetRowHeightBuilder()
                       .sheetIdx(this.store.currSheetIdx)

src/components/resize/index.tsx

@@ -45,15 +45,17 @@ export const ResizerComponent: FC<ResizerProps> = ({
                     cursor: type === 'row' ? 'row-resize' : 'col-resize',
                 }}
             />
-            <div
-                className={Styles['hover-text']}
-                style={{
-                    left: type === 'row' ? `${width}px` : 0,
-                    top: type === 'col' ? `${height}px` : 0,
-                }}
-            >
-                {hoverText}
-            </div>
+            {hoverText && (
+                <div
+                    className={Styles['hover-text']}
+                    style={{
+                        left: type === 'row' ? `${width}px` : 0,
+                        top: type === 'col' ? `${height}px` : 0,
+                    }}
+                >
+                    {hoverText}
+                </div>
+            )}
             <div
                 className={Styles.moving}
                 style={{

src/components/suggest/details.tsx

@@ -4,5 +4,5 @@ export interface Details {
     close$: () => void
 }
 export const SuggestDetailsComponent: FC<Details> = () => {
-    return <div className={styles.details}></div>
+    return <div className={styles.details} />
 }

src/core/events/event.ts

@@ -15,7 +15,6 @@ export const enum EventType {
     POINTER_DOWN = 'pointerdown',
     POINTER_MOVE = 'pointermove',
     CONTEXT_MENU = 'contextmenu',
-    WHEEL = 'wheel',
     // Keyboard
     KEY_DOWN = 'keydown',
     KEY_PRESS = 'keypress',