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 ` -
+
${columnContent}
@@ -30,7 +30,7 @@ function createCol(columnContent = '', index = 1) { function createRow(dataContent = '', infoContent = '', needResize = true, rowIndex = -1) { return `
-
+
${infoContent} ${needResize ? '
' : ''}
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss index 255142b..2e6963d 100644 --- a/src/styles/components/table.scss +++ b/src/styles/components/table.scss @@ -8,6 +8,7 @@ top: $header-height + $toolbar-height + $formula-height; overflow: auto; font-size: $default-cell-font-size; + cursor: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Small_arrow_pointing_left.svg/1200px-Small_arrow_pointing_left.svg.png') !important; .row{ display: flex; flex-direction: row; @@ -75,7 +76,6 @@ opacity: 1 !important; } } - .row-resize{ position: absolute; bottom: 0; @@ -91,4 +91,10 @@ opacity: 1 !important; } } + [data-header="row"] { + cursor: e-resize; + } + [data-header="col"] { + cursor: n-resize; + } }