education/course-mini-excel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor select

Browse Source
This commit is contained in:
Sergey Krylov 2022-06-27 10:53:01 +05:00
parent e77b41f8c6
commit 011508b72e
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/table/Table.ts
View File

@ -1,6 +1,5 @@
import { $ } from '../../core/dom';
import { ExcelComponent } from '../../core/ExcelComponent'; import { ExcelComponent } from '../../core/ExcelComponent';
import { isCell } from './table.functions'; import { selectHandler } from './handlers/table.select.handler';
import { TableSelection } from './TableSelection'; import { TableSelection } from './TableSelection';
import { createTable } from './table.template'; import { createTable } from './table.template';
import { resizeHandler } from './handlers/table.resize'; import { resizeHandler } from './handlers/table.resize';
@ -8,7 +7,7 @@ import { resizeHandler } from './handlers/table.resize';
export class Table extends ExcelComponent { export class Table extends ExcelComponent {
static className = 'excel__table'; static className = 'excel__table';
private selection: any; private selection: TableSelection;
constructor($root: any) { constructor($root: any) {
super($root, { super($root, {
@ -33,13 +32,7 @@ export class Table extends ExcelComponent {
} }
onMousedown(event: MouseEvent) { onMousedown(event: MouseEvent) {
if (isCell(event)) { selectHandler(event, this.selection);
if (event.shiftKey) this.selection.selectGroup($(event.target as HTMLElement));
else this.selection.select($(event.target as HTMLElement));
return;
}
resizeHandler(this.$root, event); resizeHandler(this.$root, event);
} }
} }

17
src/components/table/TableSelection.ts
View File

@ -3,14 +3,17 @@ import { $, Dom } from '../../core/dom';
export class TableSelection { export class TableSelection {
static selectedClassName = 'selected'; static selectedClassName = 'selected';
private group: Dom[]; private group: Dom[];
private current: Dom;
constructor() { constructor() {
this.group = []; this.group = [];
this.current = null;
} }
select($el: Dom) { select($el: Dom) {
this.clearSelection(); this.clearSelection();
this.group = [$el]; this.group = [$el];
this.current = $el;
$el.addClass(TableSelection.selectedClassName); $el.addClass(TableSelection.selectedClassName);
} }
@ -20,13 +23,13 @@ export class TableSelection {
} }
selectGroup($el: Dom) { selectGroup($el: Dom) {
const startCellParams = this.getParamsFromCellId(this.group[0].data.id); const startCellParams = this.getParamsFromCellId(this.current.data.id);
const selectedCellParams = this.getParamsFromCellId($el.data.id); const selectedCellParams = this.getParamsFromCellId($el.data.id);
const startCol = Math.min(+startCellParams.col, +selectedCellParams.col); const startCol = Math.min(startCellParams.col, selectedCellParams.col);
const endCol = Math.max(+startCellParams.col, +selectedCellParams.col); const endCol = Math.max(startCellParams.col, selectedCellParams.col);
const startRow = Math.min(+startCellParams.row, +selectedCellParams.row); const startRow = Math.min(startCellParams.row, selectedCellParams.row);
const endRow = Math.max(+startCellParams.row, +selectedCellParams.row); const endRow = Math.max(startCellParams.row, selectedCellParams.row);
this.clearSelection(); this.clearSelection();
@ -41,8 +44,8 @@ export class TableSelection {
} }
getParamsFromCellId(cellId: string) { getParamsFromCellId(cellId: string) {
const row = cellId.split(':')[0]; const row = +cellId.split(':')[0];
const col = cellId.split(':')[1]; const col = +cellId.split(':')[1];
return { col, row }; return { col, row };
} }

10
src/components/table/handlers/table.select.handler.ts Normal file
View File

@ -0,0 +1,10 @@
import { $ } from '../../../core/dom';
import { isCell } from '../table.functions';
import { TableSelection } from '../TableSelection';
export function selectHandler(event: MouseEvent, selection: TableSelection) {
if (isCell(event)) {
if (event.shiftKey) selection.selectGroup($(event.target as HTMLElement));
else selection.select($(event.target as HTMLElement));
}
}