add group selection

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     "import/prefer-default-export": "off",
     "no-console": "off",
     "no-plusplus": "off",
+    "max-len": "off",
   },
   env: {
     browser: true,

src/components/table/Table.ts

@@ -34,7 +34,9 @@ export class Table extends ExcelComponent {
 
   onMousedown(event: MouseEvent) {
     if (isCell(event)) {
-      this.selection.select($(event.target as HTMLElement));
+      if (event.shiftKey) this.selection.selectGroup($(event.target as HTMLElement));
+      else this.selection.select($(event.target as HTMLElement));
+
       return;
     }
 

src/components/table/TableSelection.ts

@@ -1,4 +1,4 @@
-import { Dom } from '../../core/dom';
+import { $, Dom } from '../../core/dom';
 
 export class TableSelection {
   static selectedClassName = 'selected';
@@ -19,7 +19,31 @@ export class TableSelection {
     this.group = [];
   }
 
-  selectGroup() {
+  selectGroup($el: Dom) {
+    const startCellParams = this.getParamsFromCellId(this.group[0].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);
+
+    this.clearSelection();
+
+    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);
+      }
+    }
+  }
+
+  getParamsFromCellId(cellId: string) {
+    const row = cellId.split(':')[0];
+    const col = cellId.split(':')[1];
+
+    return { col, row };
   }
 }