add selection by mouse over

src/components/table/Table.ts

@@ -14,13 +14,16 @@ export class Table extends ExcelComponent {
   static className = 'excel__table';
 
   private selection: TableSelection;
+  private isMouseDowned: boolean;
 
   constructor($root: Dom, options: ComponentOptionsType) {
     super($root, {
       ...options,
       name: 'Table',
-      eventListeners: ['mousedown', 'keydown', 'input'],
+      eventListeners: ['mousedown', 'keydown', 'input', 'mouseover', 'mouseup'],
     });
+
+    this.isMouseDowned = false;
   }
 
   toHTML(): string {
@@ -123,6 +126,7 @@ export class Table extends ExcelComponent {
   };
 
   onMousedown(event: MouseEvent) {
+    this.isMouseDowned = true;
     selectHandler(event, this.selection, this.emitSelectCallback.bind(this));
     this.resizeTable(event);
   }
@@ -134,4 +138,12 @@ export class Table extends ExcelComponent {
   onInput(event: InputEvent) {
     this.updateCurrentText((event.target as HTMLElement).innerText);
   }
+
+  onMouseover(event: MouseEvent) {
+    this.isMouseDowned && selectHandler(event, this.selection);
+  }
+
+  onMouseup() {
+    this.isMouseDowned = false;
+  }
 }

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

@@ -8,10 +8,17 @@ export function selectHandler(event: MouseEvent | KeyboardEvent, selection: Tabl
       onMouseDownHandler();
       break;
     }
+
     case 'keydown': {
       onKeyDownHandler();
       break;
     }
+
+    case 'mouseover': {
+      onMouseOverHandler();
+      break;
+    }
+
     default: break;
   }
 
@@ -99,4 +106,10 @@ export function selectHandler(event: MouseEvent | KeyboardEvent, selection: Tabl
 
     selection.selectByCellId({ row, col });
   }
+
+  function onMouseOverHandler() {
+    if (selection.current.$el) {
+      selection.selectTo($((event as any).toElement));
+    }
+  }
 }