From 09ff3a751dc838ca21a1e6b80796caad464cab35 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Mon, 11 Jul 2022 21:04:39 +0500
Subject: [PATCH] add selection by mouse over

---
 src/components/table/Table.ts                      | 14 +++++++++++++-
 .../table/handlers/table.select.handler.ts         | 13 +++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts
index 47dceba..4268c23 100644
--- a/src/components/table/Table.ts
+++ b/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;
+  }
 }
diff --git a/src/components/table/handlers/table.select.handler.ts b/src/components/table/handlers/table.select.handler.ts
index 16dd108..c28dcbe 100644
--- a/src/components/table/handlers/table.select.handler.ts
+++ b/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));
+    }
+  }
 }