diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts index bd486db..47dceba 100644 --- a/src/components/table/Table.ts +++ b/src/components/table/Table.ts @@ -28,7 +28,7 @@ export class Table extends ExcelComponent { } prepare() { - this.selection = new TableSelection(); + this.selection = new TableSelection(this.$root); } init() { diff --git a/src/components/table/TableSelection.ts b/src/components/table/TableSelection.ts index 92fdabd..8c5658c 100644 --- a/src/components/table/TableSelection.ts +++ b/src/components/table/TableSelection.ts @@ -5,9 +5,11 @@ export class TableSelection { static selectedClassName = 'selected'; private group: Dom[]; public current: Dom; + public rootTable: Dom; - constructor() { + constructor(rootTable: Dom) { this.group = []; + this.rootTable = rootTable; } get selectedIds() { @@ -40,7 +42,7 @@ export class TableSelection { this.group = []; } - selectGroup($el: Dom) { + selectTo($el: Dom) { const startCellParams = getParamsFromCellId(this.current.data.id || startCellId); const selectedCellParams = getParamsFromCellId($el.data.id || startCellId); @@ -53,14 +55,22 @@ export class TableSelection { for (let row = startRow; row <= endRow; row++) { for (let col = startCol; col <= endCol; col++) { - const cell = $(`[data-id="${row}:${col}"]`); - - this.group.push(cell); - cell.addClass(TableSelection.selectedClassName); + const $cell = $(`[data-id="${row}:${col}"]`); + this.addCellToSelection($cell); } } } + selectGroupies($cells: Dom[]) { + this.clearSelection(); + $cells.forEach($cell => this.addCellToSelection($cell)); + } + + addCellToSelection($cell: Dom) { + this.group.push($cell); + $cell.addClass(TableSelection.selectedClassName); + } + applyStyle(style: CSSStyleRule) { this.group.forEach(el => el.css(style)); } diff --git a/src/components/table/handlers/table.select.handler.ts b/src/components/table/handlers/table.select.handler.ts index 2d05197..16dd108 100644 --- a/src/components/table/handlers/table.select.handler.ts +++ b/src/components/table/handlers/table.select.handler.ts @@ -19,9 +19,29 @@ export function selectHandler(event: MouseEvent | KeyboardEvent, selection: Tabl callback?.(); function onMouseDownHandler() { + const target = $(event.target as HTMLElement); + if (isCell(event)) { - if (event.shiftKey) selection.selectGroup($(event.target as HTMLElement)); - else selection.select($(event.target as HTMLElement)); + if (event.shiftKey) selection.selectTo(target); + else if (event.ctrlKey) selection.addCellToSelection(target); + else selection.select(target); + } else { + const row = target.closest('[data-header="row"]'); + const col = target.closest('[data-header="col"]'); + const resizer = target.closest('[data-resizer]'); + + if (row.$el && !resizer.$el) { + const cells = row.closest('[data-row]').findAll('[data-type="cell"]'); + const $cells = Array.from(cells).map(cell => $(cell as HTMLElement)); + + selection.selectGroupies($cells); + } else if (col.$el && !resizer.$el) { + const colNumber = col.data.col; + const colls = selection.rootTable.findAll(`[data-col="${colNumber}"]`); + const $cells = Array.from(colls).filter(el => el !== col.$el).map(el => $(el as HTMLElement)); + + selection.selectGroupies($cells); + } } } diff --git a/src/components/table/table.template.ts b/src/components/table/table.template.ts index 7b3f479..ae774f6 100644 --- a/src/components/table/table.template.ts +++ b/src/components/table/table.template.ts @@ -20,7 +20,7 @@ function createCell(cellContent = '', colIndex = 1, rowIndex = 1) { function createCol(columnContent = '', index = 1) { return ` -