Added delete for range by press Del button

src/components/scroller.ts

@@ -31,28 +31,44 @@ export class Scroller {
         this.element.addEventListener('scroll', this.handleScroll)
 
         this.element.addEventListener('mousedown', this.handleClick)
-        this.element.addEventListener('mousemove', event => {
+        this.element.addEventListener('mousemove', this.handleMouseMove)
-            if (!this.isSelecting) return;
+        this.element.addEventListener('mouseup', this.handleMouseUp)
-            const { offsetX, offsetY } = event
+        this.element.addEventListener('dblclick', this.handleDoubleClick)
-            const lastSelectedCell = this.root.getCellByCoords(offsetX, offsetY)
-            if (this.root.selection.selectedRange) {
-                this.root.selection.selectedRange.to = lastSelectedCell
-            }
-            this.root.renderSheet()
-        })
-        this.element.addEventListener('mouseup', () => {
-            this.isSelecting = false
-            this.root.renderSheet()
-        })
-        this.element.addEventListener('dblclick', event => {
-            event.preventDefault();
-            const position = this.root.getCellByCoords(event.offsetX, event.offsetY)
-            this.root.showEditor(position)
-        })
 
         this.element.addEventListener('keydown', this.handleKeydown)
     }
 
+    private handleMouseMove = (event: MouseEvent) => {
+        if (!this.isSelecting) return;
+        const { offsetX, offsetY } = event
+        const lastSelectedCell = this.root.getCellByCoords(offsetX, offsetY)
+        if (this.root.selection.selectedRange) {
+            this.root.selection.selectedRange.to = lastSelectedCell
+        }
+        this.root.renderSheet()
+    }
+
+    private handleMouseUp = () => {
+        this.isSelecting = false
+
+        if (this.root.selection.selectedRange) {
+            if (
+                (this.root.selection.selectedRange.from.row === this.root.selection.selectedRange.to.row) &&
+                (this.root.selection.selectedRange.from.column === this.root.selection.selectedRange.to.column)
+            ) {
+                this.root.selection.selectedRange = null
+            }
+        }
+
+        this.root.renderSheet()
+    }
+    
+    private handleDoubleClick = (event: MouseEvent) => {
+        event.preventDefault();
+        const position = this.root.getCellByCoords(event.offsetX, event.offsetY)
+        this.root.showEditor(position)
+    }
+
     private handleKeydown = (event: KeyboardEvent) => {
         event.preventDefault()
         console.log(event.key)
@@ -92,9 +108,14 @@ export class Scroller {
             }
         }
 
-        if(event.key === 'F2') {
+        if (event.key === 'F2') {
-            if(!this.root.selection.selectedCell) return;
+            if (!this.root.selection.selectedCell) return;
-            this.root.showEditor(this.root.selection.selectedCell)    
+            this.root.showEditor(this.root.selection.selectedCell)
+        }
+
+        if (event.key === 'Delete') {
+            this.root.deleteSelectedCellsValues()
+            this.root.renderSheet()
         }
     }
 

src/main.ts

@@ -6,7 +6,7 @@ import { Table } from "./components/table";
 import { Toolbar } from "./components/toolbar";
 import { Cell, CellConstructorProps, Position } from "./modules/cell";
 import { Config, ViewProperties } from "./modules/config";
-import { Selection } from "./modules/selection";
+import { RangeSelectionType, Selection } from "./modules/selection";
 import { Styles } from "./modules/styles";
 import { Viewport } from "./modules/viewport";
 import './scss/main.scss'
@@ -44,10 +44,10 @@ export class Spreadsheet {
 
     constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties) {
         const config = createSampleConfig(750, 750)
-        if(props?.view) {
+        if (props?.view) {
             config.view = props.view
         }
-        
+
         this.config = new Config(config)
         this.sheet = new Sheet(this)
         const data = createSampleData(750, 750)
@@ -108,17 +108,53 @@ export class Spreadsheet {
     }
 
     getCell(position: Position): Cell {
-        const {column, row} = position
+        const { column, row } = position
         return this.data[row][column]
     }
 
     changeCellValues(position: Position, values: Partial<Omit<CellConstructorProps, 'position'>>) {
-        const {column, row} = position
+        const { column, row } = position
 
         this.data[row][column].changeValues(values)
         this.renderCell(row, column)
     }
-    
+
+    applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => any): void {
+        const fromRow = Math.min(range.from.row, range.to.row)
+        const toRow = Math.max(range.from.row, range.to.row)
+
+        const fromCol = Math.min(range.from.column, range.to.column)
+        const toCol = Math.max(range.from.column, range.to.column)
+
+        for (let row = fromRow; row <= toRow; row++) {
+            for (let col = fromCol; col <= toCol; col++) {
+                const cell = this.data[row][col]
+                callback(cell)
+            }
+        }
+    }
+
+    deleteSelectedCellsValues() {
+        if (this.selection.selectedRange !== null) {
+
+            this.applyActionToRange(this.selection.selectedRange, cell => {
+                this.changeCellValues(cell.position, {
+                    displayValue: '',
+                    resultValue: '',
+                    value: ''
+                })
+            })
+
+        } else {
+            if (!this.selection.selectedCell) return;
+            this.changeCellValues(this.selection.selectedCell, {
+                displayValue: '',
+                resultValue: '',
+                value: ''
+            })
+        }
+    }
+
     showEditor(position: Position) {
         this.editor.show(position)
     }