From d80cb707fe07730933d0cf931cc26071465a1e1a Mon Sep 17 00:00:00 2001 From: Eugene Date: Fri, 21 Jul 2023 19:10:17 +0300 Subject: [PATCH] Added delete for range by press Del button --- src/components/scroller.ts | 63 +++++++++++++++++++++++++------------- src/main.ts | 48 +++++++++++++++++++++++++---- 2 files changed, 84 insertions(+), 27 deletions(-) diff --git a/src/components/scroller.ts b/src/components/scroller.ts index 4c8e7ed..5a9cf6f 100644 --- a/src/components/scroller.ts +++ b/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 => { - 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() - }) - 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('mousemove', this.handleMouseMove) + this.element.addEventListener('mouseup', this.handleMouseUp) + this.element.addEventListener('dblclick', this.handleDoubleClick) 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(!this.root.selection.selectedCell) return; - this.root.showEditor(this.root.selection.selectedCell) + if (event.key === 'F2') { + if (!this.root.selection.selectedCell) return; + this.root.showEditor(this.root.selection.selectedCell) + } + + if (event.key === 'Delete') { + this.root.deleteSelectedCellsValues() + this.root.renderSheet() } } diff --git a/src/main.ts b/src/main.ts index f8e047f..2be42a8 100644 --- a/src/main.ts +++ b/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>) { - 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) }