add selection

src/components/table/Table.ts

@@ -1,10 +1,15 @@
+import { $ } from '../../core/dom';
 import { ExcelComponent } from '../../core/ExcelComponent';
+import { isCell } from './table.functions';
+import { TableSelection } from './TableSelection';
 import { createTable } from './table.template';
-import { resizeHandler } from './table.resize';
+import { resizeHandler } from './handlers/table.resize';
 
 export class Table extends ExcelComponent {
   static className = 'excel__table';
 
+  private selection: any;
+
   constructor($root: any) {
     super($root, {
       name: 'Table',
@@ -16,7 +21,23 @@ export class Table extends ExcelComponent {
     return createTable(50, 24);
   }
 
+  prepare() {
+    this.selection = new TableSelection();
+  }
+
+  init() {
+    super.init();
+
+    const $cell = this.$root.find('[data-id="0:0"]');
+    this.selection.select($cell);
+  }
+
   onMousedown(event: MouseEvent) {
+    if (isCell(event)) {
+      this.selection.select($(event.target as HTMLElement));
+      return;
+    }
+
     resizeHandler(this.$root, event);
   }
 }

src/components/table/TableSelection.ts

@@ -0,0 +1,25 @@
+import { Dom } from '../../core/dom';
+
+export class TableSelection {
+  static selectedClassName = 'selected';
+  private group: Dom[];
+
+  constructor() {
+    this.group = [];
+  }
+
+  select($el: Dom) {
+    this.clearSelection();
+    this.group = [$el];
+    $el.addClass(TableSelection.selectedClassName);
+  }
+
+  clearSelection() {
+    this.group.forEach(el => el.removeClass(TableSelection.selectedClassName));
+    this.group = [];
+  }
+
+  selectGroup() {
+
+  }
+}

src/components/table/handlers/table.resize.ts

@@ -1,4 +1,4 @@
-import { $, Dom } from '../../core/dom';
+import { $, Dom } from '../../../core/dom';
 
 type CustomElementType = Element & { css: any };
 

src/components/table/table.functions.ts

@@ -0,0 +1,5 @@
+import { $ } from '../../core/dom';
+
+export function isCell(event: Event): boolean {
+  return $(event.target as HTMLElement).data.type === 'cell';
+}

src/components/table/table.template.ts

@@ -3,9 +3,19 @@ const CODES = {
   Z: 90,
 };
 
-function createCell(cellContent = '', index = 1) {
+function createCell(cellContent = '', colIndex = 1, rowIndex = 1) {
   return `
-    <div class="cell" contenteditable data-col="${index}">${cellContent}</div>
+    <div 
+      class="cell" 
+      contenteditable 
+      data-col="${colIndex}" 
+      data-row=${rowIndex}  
+      data-id="${rowIndex}:${colIndex}"
+      data-type="cell"
+    >
+      ${cellContent}
+    </div>
+    
   `;
 }
 
@@ -42,12 +52,13 @@ export function createTable(rowsCount = 10, columnCount = 10) {
 
   rows.push(createRow(cols, '', false));
 
-  for (let i = 0; i < rowsCount; i++) {
+  for (let row = 0; row < rowsCount; row++) {
     const cells = new Array(colsCount)
       .fill('')
-      .map((el, index) => createCell('', index))
+      .map((el, index) => createCell('', index, row))
       .join('');
-    rows.push(createRow(cells, `${i + 1}`));
+
+    rows.push(createRow(cells, `${row + 1}`));
   }
 
   return rows.join('');

src/core/ExcelComponent.ts

@@ -2,6 +2,7 @@ import { DomListener } from './DomListener';
 
 interface ExcelComponentClass {
   toHTML: () => string;
+  prepare: () => void;
 }
 
 type OptionsType = {
@@ -15,6 +16,12 @@ export class ExcelComponent extends DomListener implements ExcelComponentClass {
   constructor($root: any, options: OptionsType) {
     super($root, options?.listeners);
     this.name = options?.name;
+
+    this.prepare();
+  }
+
+  prepare() {
+
   }
 
   toHTML() {

src/core/dom.ts

@@ -65,6 +65,10 @@ export class Dom implements DomClass {
     return this.$el.getBoundingClientRect();
   }
 
+  find(selector: string): Dom {
+    return $(this.$el.querySelector(selector) as HTMLElement);
+  }
+
   findAll(selector: string) {
     return this.$el.querySelectorAll(selector);
   }
@@ -74,6 +78,14 @@ export class Dom implements DomClass {
       this.$el.style[key] = styles[key];
     });
   }
+
+  addClass(className: string) {
+    this.$el.classList.add(className);
+  }
+
+  removeClass(className: string) {
+    this.$el.classList.remove(className);
+  }
 }
 
 export function $(selector: SelectorType) {