Merge pull request #264 from logisky/jh/fix

fix: highlighted cells and selected cells position

src/components/canvas/store/highlights.ts

@@ -64,13 +64,17 @@ export class Highlights {
             const oldCell = find(newCell)
             if (oldCell) newCell.style = oldCell.style
             else {
+                const canvasPosition = this.store.convertToCanvasPosition(
+                    cell.position,
+                    'Cell'
+                )
                 const currColors = newCells.map((c) => c.style.bgColor)
                 newCell.style = {
                     bgColor: StandardColor.randomColor(currColors),
-                    x: cell.position.startCol,
-                    y: cell.position.startRow,
-                    height: cell.height,
-                    width: cell.width,
+                    x: canvasPosition.startCol,
+                    y: canvasPosition.startRow,
+                    height: canvasPosition.height,
+                    width: canvasPosition.width,
                 }
             }
             newCells.push(newCell)

src/components/canvas/store/renderer/renderer.ts

@@ -96,6 +96,7 @@ export class Renderer {
                 this._offscreen.drawCells(v, drawCellsFn)
 
                 if (!hasDrawn) draw()
+                this.store.updateStartAndEndCells(v.data)
             })
     }
 

src/components/canvas/store/selector.ts

@@ -51,7 +51,6 @@ export class Selector {
         }
         this.selector = new SelectorProps()
         this.updateSelector(this.startCell, this.endCell)
-        this._aftetUpdateSelector()
     }
 
     @action
@@ -64,7 +63,6 @@ export class Selector {
         }
         this.selector = new SelectorProps()
         this.updateSelector(this.startCell, this.endCell)
-        this._aftetUpdateSelector()
     }
 
     @action
@@ -73,22 +71,19 @@ export class Selector {
         this.endCell = undefined
         this.selector = new SelectorProps()
         this.updateSelector(this.startCell, this.endCell)
-        this._aftetUpdateSelector()
     }
 
     @action
     onMouseMove(matchCell: Cell) {
         this.endCell = matchCell
         this.updateSelector(this.startCell, this.endCell)
-        this._aftetUpdateSelector()
     }
 
     @action
     onScroll(startCell: Cell) {
         this.startCell = startCell
         this.endCell = undefined
         this.updateSelector(this.startCell, this.endCell)
-        this._aftetUpdateSelector()
     }
 
     @action
@@ -110,6 +105,7 @@ export class Selector {
         if (!this.selector) return
         const selector = this.getSelector(start, end)
         this.selector = selector
+        this._aftetUpdateSelector()
         return selector
     }
 

src/components/canvas/store/store.ts

@@ -80,6 +80,36 @@ export class CanvasStore {
         return match(x, y, this.anchorX, this.anchorY, cellView.data)
     }
 
+    /**
+     * Due to the change of column width or row height, selector should be
+     * updated
+     */
+    updateStartAndEndCells(data: CellView) {
+        if (!this.startCell) return
+        // const data = this.getCurrentCellView()
+        const updatePosition = (cell: Cell) => {
+            if (cell.type === 'FixedLeftHeader') {
+                const newRow = data.rows.find((r) => {
+                    return r.coordinate.equals(cell.coordinate)
+                })
+                if (newRow) cell.position = newRow.position
+            } else if (cell.type === 'FixedTopHeader') {
+                const newCol = data.cols.find((r) => {
+                    return r.coordinate.equals(cell.coordinate)
+                })
+                if (newCol) cell.position = newCol.position
+            } else if (cell.type === 'Cell') {
+                const newCell = data.cells.find((r) => {
+                    return r.coordinate.equals(cell.coordinate)
+                })
+                if (newCell) cell.position = newCell.position
+            }
+        }
+        updatePosition(this.startCell)
+        if (this.endCell) updatePosition(this.endCell)
+        this.selector.updateSelector(this.startCell, this.endCell)
+    }
+
     convertToCanvasPosition(p: Range, ty: CellType): Range {
         if (ty === 'LeftTop') return p
 

src/core/data/render.ts

@@ -1,7 +1,6 @@
 import {Range, StandardCell} from '@/core/standable'
 import {CellInfo, Value} from 'logisheets-web'
 import {StandardValue} from '../standable/value'
-import {LeftTop} from '../settings'
 import {StandardStyle} from '../standable/style'
 
 export class RenderCell {