refactor select

src/components/table/Table.ts

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

src/components/table/TableSelection.ts

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

src/components/table/handlers/table.select.handler.ts

@@ -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));
+  }
+}