From e12efe60b130822fd0269318a0a12c46ab011ee3 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Thu, 14 Jul 2022 16:59:02 +0500
Subject: [PATCH] little fix selection

---
 src/components/table/Table.ts                 | 26 +++++++++---------
 src/components/table/TableSelection.ts        |  8 +++---
 .../table/handlers/table.select.handler.ts    | 27 ++++++++++++++++---
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts
index 43b1a84..e2d86f1 100644
--- a/src/components/table/Table.ts
+++ b/src/components/table/Table.ts
@@ -61,7 +61,7 @@ export class Table extends ExcelComponent {
 
     this.initTable();
 
-    this.$onEventFromObserver('formula:input', this.updateCurrentText);
+    this.$onEventFromObserver('formula:input', this.updateTextInCell);
     this.$onEventFromObserver('formula:enter-press', () => this.selection.$currentCell.focus());
     this.$onEventFromObserver('toolbar:applyStyle', this.updateCurrentStyles);
     this.$onEventFromObserver('toolbar:add-row', this.addNewRowHandler);
@@ -147,16 +147,6 @@ export class Table extends ExcelComponent {
     }
   }
 
-  updateCurrentText = (text: string) => {
-    this.selection.$currentCell.attr('data-value', text);
-    this.selection.$currentCell.text = parse(text);
-
-    this.dispatchToStore(actions.changeText({
-      text,
-      id: this.selection.$currentCell.data.id || startCellId,
-    }));
-  };
-
   updateCurrentStyles = (style: Partial<CSSStyleDeclaration>) => {
     this.selection.applyStyle(style);
     this.dispatchToStore(actions.applyStyle({
@@ -165,6 +155,18 @@ export class Table extends ExcelComponent {
     }));
   };
 
+  updateTextInCell = (text: string, $cell = this.selection.$focusedCell) => {
+    // eslint-disable-next-line no-param-reassign
+    $cell.attr('data-value', text);
+    // eslint-disable-next-line no-param-reassign
+    $cell.text = parse(text);
+
+    this.dispatchToStore(actions.changeText({
+      text,
+      id: $cell.data.id || startCellId,
+    }));
+  };
+
   addNewRowHandler = () => {
     this.tableSize.row++;
     this.$root.$el.insertAdjacentHTML('beforeend', getNewRowHTML(this.tableSize.row, this.tableSize.col));
@@ -185,7 +187,7 @@ export class Table extends ExcelComponent {
   }
 
   onInput(event: InputEvent) {
-    this.updateCurrentText((event.target as HTMLElement).innerText);
+    this.updateTextInCell((event.target as HTMLElement).innerText);
   }
 
   onMouseover(event: MouseEvent) {
diff --git a/src/components/table/TableSelection.ts b/src/components/table/TableSelection.ts
index 58fcba6..987044d 100644
--- a/src/components/table/TableSelection.ts
+++ b/src/components/table/TableSelection.ts
@@ -5,7 +5,7 @@ import { initialStyleState } from 'src/constants';
 
 export class TableSelection {
   static selectedClassName = 'selected';
-  private selectedCellsGroup: Dom[];
+  public selectedCellsGroup: Dom[];
   // TODO remove focus, when selection
   // $focusedCell and $currentCell can be different, f.e. if select cells with Shift key, currentCell
   // will be last cell, focusedCell will start cell, and can be different from selectedCellsGroup first item
@@ -25,6 +25,8 @@ export class TableSelection {
   // TODO make a focus manager
   focusToCell($cell: Dom) {
     try {
+      this.$focusedCell = $cell;
+
       const range = new Range();
       const node = $cell.$el;
 
@@ -33,7 +35,7 @@ export class TableSelection {
       window.getSelection()?.removeAllRanges();
       window.getSelection()?.addRange(range);
     } catch (e) {
-      console.log('Error focus', e.message);
+      $cell.$el.focus();
     }
   }
 
@@ -41,10 +43,10 @@ export class TableSelection {
     this.clearSelection();
     this.selectedCellsGroup = [$cell];
     this.$currentCell = $cell;
+    this.$focusedCell = $cell;
     $cell.addClass(TableSelection.selectedClassName);
     this.focusToCell($cell);
     this.selectHeader($cell);
-    this.$focusedCell = $cell;
   }
 
   selectByCellId(cellID: { col: number, row: number }) {
diff --git a/src/components/table/handlers/table.select.handler.ts b/src/components/table/handlers/table.select.handler.ts
index 01be984..d30c55c 100644
--- a/src/components/table/handlers/table.select.handler.ts
+++ b/src/components/table/handlers/table.select.handler.ts
@@ -61,6 +61,7 @@ export function selectHandler(event: MouseEvent | KeyboardEvent, selection: Tabl
       'ArrowLeft',
       'Enter',
       'Tab',
+      'Delete',
     ];
 
     if (!selection?.$currentCell || !handleKeys.includes(key)) return;
@@ -89,24 +90,44 @@ export function selectHandler(event: MouseEvent | KeyboardEvent, selection: Tabl
         break;
       }
       case 'Enter': {
-        if (event.shiftKey) return;
         event.preventDefault();
-        row++;
+
+        if (event.shiftKey) row--;
+        else row++;
         if (row === selection.rootTable.tableSize.row) selection.rootTable.addNewRowHandler();
         break;
       }
       case 'Tab': {
         event.preventDefault();
 
+        // Tab in selection must save focus in inner selection cells
+        if (selection.selectedCellsGroup.length > 1) {
+          const idxInSelection = selection.selectedCellsGroup.findIndex(el => el.$el === selection.$focusedCell.$el);
+          const nextIdx = idxInSelection + 1 === selection.selectedCellsGroup.length ? 0 : idxInSelection + 1;
+
+          selection.focusToCell(selection.selectedCellsGroup[nextIdx]);
+
+          break;
+        }
+
         if (event.shiftKey) col--;
         else col++;
 
         break;
       }
+      case 'Delete': {
+        if (selection.selectedCellsGroup.length > 1) {
+          event.preventDefault();
+
+          selection.selectedCellsGroup.forEach($cell => selection.rootTable.updateTextInCell('', $cell));
+        }
+
+        break;
+      }
       default: break;
     }
 
-    if (event.shiftKey) selection.addGroupToSelectionById({ row, col });
+    if (event.shiftKey && key !== 'Tab' && key !== 'Enter') selection.addGroupToSelectionById({ row, col });
     else selection.selectByCellId({ row, col });
   }