add font-size tool, little fixes and refactor

src/components/excel/Excel.ts

@@ -1,9 +1,9 @@
 import { $ } from 'core/dom';
 import { Emitter } from 'core/Emitter';
 import { ExcelComponent } from 'core/ExcelComponent';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
 import { StoreSubscriber } from 'core/StoreSubscriber';
-import { updateOpenDate } from 'redux/actions';
+import { updateOpenDate } from 'redux/action-creators';
 
 interface ExcelOptionsType {
   components: any[],
@@ -48,7 +48,7 @@ export class Excel {
     this.subscriber.subscribeComponents(this.components);
     this.components.forEach(component => component.init());
 
-    this.store.dispatch(updateOpenDate(Date.now().toString()));
+    this.store.dispatchToStore(updateOpenDate(Date.now().toString()));
   }
 
   destroy() {

src/components/formula/Formula.ts

@@ -1,15 +1,18 @@
 import { Dom } from 'core/dom';
-import { ExcelComponent } from 'core/ExcelComponent';
+import { ExcelComponent, ComponentOptionsType } from 'core/ExcelComponent';
 
 export class Formula extends ExcelComponent {
   static className = 'excel__formula';
 
   private formulaInput: Dom;
 
-  constructor($root: Dom, options: any) {
+  constructor($root: Dom, options: ComponentOptionsType) {
     super($root, {
-      listeners: ['input', 'keydown'],
+      // @ts-ignore next-line
+      eventListeners: ['input', 'keydown'],
+      // @ts-ignore next-line
       name: 'Formula',
+      // @ts-ignore next-line
       subscribe: ['currentText'],
       ...options,
     });
@@ -27,8 +30,8 @@ export class Formula extends ExcelComponent {
 
     this.formulaInput = this.$root.find('#formula-input');
 
-    this.$on('table:select-cell', text => {
+    this.$on('table:select-cell', (cell: Dom) => {
-      this.formulaInput.text = text || '';
+      this.formulaInput.text = cell.data.value || '';
     });
   }
 

src/components/header/Header.ts

@@ -1,16 +1,16 @@
-import * as actions from 'redux/actions';
+import * as actions from 'redux/action-creators';
 import { $, Dom } from 'core/dom';
 import { ActiveRoute } from 'core/routes/ActiveRoute';
-import { ExcelStateComponent } from 'core/ExcelStateComponent';
+import { ExcelComponentState } from 'core/ExcelComponentState';
-import { deleteTable } from 'redux/actions';
+import { deleteTable } from 'redux/action-creators';
 
-export class Header extends ExcelStateComponent {
+export class Header extends ExcelComponentState {
   static className = 'excel__header';
 
   constructor($root: Dom, options: any) {
     super($root, {
       name: 'Header',
-      listeners: ['input', 'click'],
+      eventListeners: ['input', 'click'],
       subscribe: ['title'],
       ...options,
     });
@@ -35,7 +35,7 @@ export class Header extends ExcelStateComponent {
   onInput(event: InputEvent) {
     const $target = $(event.target as HTMLInputElement);
 
-    this.$dispatch(actions.changeTitle($target.text));
+    this.dispatchToStore(actions.changeTitle($target.text));
   }
 
   onClick(event: MouseEvent) {
@@ -54,7 +54,7 @@ export class Header extends ExcelStateComponent {
       }
 
       case 'delete-table': {
-        confirm('Действительно хочешь удалить ?') && this.$dispatch(deleteTable(this.store.getState().id));
+        confirm('Действительно хочешь удалить ?') && this.dispatchToStore(deleteTable(this.store.getState().id));
         break;
       }
 

src/components/table/Table.ts

@@ -1,9 +1,9 @@
 import { startCellId } from 'components/table/table.functions';
-import * as actions from 'redux/actions';
+import * as actions from 'redux/action-creators';
 import { $, Dom } from 'core/dom';
 import { ExcelComponent } from 'core/ExcelComponent';
 import { TableSelection } from 'components/table/TableSelection';
-import { changeCurrentStyles } from 'redux/actions';
+import { changeCurrentStyles } from 'redux/action-creators';
 import { createTable } from 'components/table/table.template';
 import { initialStyleState } from 'src/constants';
 import { parse } from 'core/utils';
@@ -18,7 +18,7 @@ export class Table extends ExcelComponent {
   constructor($root: Dom, options: any) {
     super($root, {
       name: 'Table',
-      listeners: ['mousedown', 'keydown', 'input'],
+      eventListeners: ['mousedown', 'keydown', 'input'],
       ...options,
     });
   }
@@ -34,36 +34,17 @@ export class Table extends ExcelComponent {
   init() {
     super.init();
 
-    const $cell = this.$root.find(`[data-id="${startCellId}"]`);
-    this.selection.select($cell);
-
-    this.$emit('table:select-cell', $cell.data.value);
-
-    this.$on('formula:input', (data) => {
-      this.selection.current.attr('data-value', data);
-      this.selection.current.text = parse(data);
-      this.updateCurrentTextInStore(data);
-    });
-
-    this.$on('formula:enter-press', () => {
-      this.selection.current.focus();
-    });
-
-    this.$on('toolbar:applyStyle', (value) => {
-      this.selection.applyStyle(value);
-
-      this.$dispatch(actions.applyStyle({
-        value,
-        ids: this.selection.selectedIds,
-      }));
-    });
-
     this.initTable();
+
+    this.$on('formula:input', this.updateCurrentText);
+    this.$on('formula:enter-press', () => this.selection.current.focus());
+    this.$on('toolbar:applyStyle', this.updateCurrentStyles);
   }
 
   initTable() {
     this.initTableSize();
     this.initTableContentAndStyles();
+    this.initStartCellFocus();
   }
 
   initTableSize() {
@@ -87,6 +68,7 @@ export class Table extends ExcelComponent {
     const tableState = this.store.getState();
     const tableContent = tableState?.dataState;
     const tableStyles = tableState?.stylesState;
+
     Object.keys(tableContent).forEach(cellId => {
       const $cell = this.$root.find(`[data-id="${cellId}"]`);
       const styles = tableStyles[cellId];
@@ -97,28 +79,46 @@ export class Table extends ExcelComponent {
     });
   }
 
+  initStartCellFocus() {
+    const $cell = this.$root.find(`[data-id="${startCellId}"]`);
+    this.selection.select($cell);
+
+    this.$emit('table:select-cell', $cell);
+  }
+
   emitSelectCallback() {
-    this.$emit('table:select-cell', this.selection.current.data.value);
+    this.$emit('table:select-cell', this.selection.current);
 
     const styles = this.selection.current?.getStyles(Object.keys(initialStyleState));
-    this.$dispatch(changeCurrentStyles(styles));
+    this.dispatchToStore(changeCurrentStyles(styles));
   }
 
   async resizeTable(event: MouseEvent) {
     try {
       const resizeData = await resizeHandler(this.$root, event);
-      this.$dispatch(actions.tableResize({ resizeData }));
+      this.dispatchToStore(actions.tableResize({ resizeData }));
     } catch (e) {
       console.warn('Resize error', e.message);
     }
   }
 
-  updateCurrentTextInStore(text: string) {
+  updateCurrentText = (text: string) => {
-    this.$dispatch(actions.changeText({
+    this.selection.current.attr('data-value', text);
+    this.selection.current.text = parse(text);
+
+    this.dispatchToStore(actions.changeText({
       text,
       id: this.selection.current.data.id || startCellId,
     }));
-  }
+  };
+
+  updateCurrentStyles = (style: CSSStyleRule) => {
+    this.selection.applyStyle(style);
+    this.dispatchToStore(actions.applyStyle({
+      value: style,
+      ids: this.selection.selectedIds,
+    }));
+  };
 
   onMousedown(event: MouseEvent) {
     selectHandler(event, this.selection, this.emitSelectCallback.bind(this));
@@ -130,6 +130,6 @@ export class Table extends ExcelComponent {
   }
 
   onInput(event: InputEvent) {
-    this.updateCurrentTextInStore((event.target as HTMLElement).innerText.trim());
+    this.updateCurrentText((event.target as HTMLElement).innerText.trim());
   }
 }

src/components/toolbar/Toolbar.ts

@@ -1,17 +1,17 @@
 import { startCellId } from 'components/table/table.functions';
 import { $, Dom } from 'core/dom';
-import { ExcelStateComponent } from 'core/ExcelStateComponent';
+import { ExcelComponentState } from 'core/ExcelComponentState';
-import { OptionsType } from 'core/ExcelComponent';
+import { ComponentOptionsType } from 'core/ExcelComponent';
 import { createToolbar } from 'components/toolbar/toolbar.template';
 import { initialStyleState } from 'src/constants';
 
-export class Toolbar extends ExcelStateComponent {
+export class Toolbar extends ExcelComponentState {
   static className = 'excel__toolbar';
 
-  constructor($root: Dom, options: OptionsType) {
+  constructor($root: Dom, options: ComponentOptionsType) {
     super($root, {
       ...options,
-      listeners: ['click'],
+      eventListeners: ['click', 'change'],
       name: 'Toolbar',
       subscribe: ['currentStyles'],
     });
@@ -20,7 +20,7 @@ export class Toolbar extends ExcelStateComponent {
   prepare() {
     const currentToolbarState = this.toolbarState;
 
-    this.initState(currentToolbarState);
+    this.initComponentState(currentToolbarState);
   }
 
   get toolbarState() {
@@ -31,7 +31,7 @@ export class Toolbar extends ExcelStateComponent {
   }
 
   get template(): string {
-    return createToolbar(this.state);
+    return createToolbar(this.componentState);
   }
 
   toHTML(): string {
@@ -39,7 +39,7 @@ export class Toolbar extends ExcelStateComponent {
   }
 
   storeChanged(args?: any) {
-    this.setState(args.currentStyles);
+    this.setComponentState(args.currentStyles);
   }
 
   onClick(event: MouseEvent) {
@@ -51,7 +51,13 @@ export class Toolbar extends ExcelStateComponent {
     const key = Object.keys(value)[0];
 
     this.$emit('toolbar:applyStyle', value);
+    this.setComponentState({ [key]: value[key] });
+  }
 
-    this.setState({ [key]: value[key] });
+  onChange(e: any) {
+    const value = `${e.target.value.toString()}px`;
+
+    this.$emit('toolbar:applyStyle', { fontSize: value });
+    this.setComponentState({ fontSize: value });
   }
 }

src/components/toolbar/toolbar-types.ts

@@ -4,4 +4,5 @@ export type ToolbarStateType = {
   textDecoration?: 'none' | 'underline';
   justifyContent?: 'start' | 'center' | 'end';
   alignItems?: 'start' | 'center' | 'end';
+  fontSize?: any;
 };

src/components/toolbar/toolbar.template.ts

@@ -80,7 +80,25 @@ export function createToolbar(state: ToolbarStateType): string {
     ],
   ];
 
-  return btns.map(btn => (Array.isArray(btn) ? toButtonGroup(btn) : toButton(btn))).join(' ');
+  const buttons = btns.map(btn => (Array.isArray(btn) ? toButtonGroup(btn) : toButton(btn)));
+  buttons.push(createFontSizeButton(state.fontSize));
+  return buttons.join(' ');
+}
+
+function createFontSizeButton(currentSize: string) {
+  const fontSizeInPixels = +currentSize.slice(0, -2);
+  const options = [];
+
+  for (let i = 8; i <= 24; i += 2) {
+    if (fontSizeInPixels === i) options.push(`<option value="${i}" selected>${i}</option>`);
+    else options.push(`<option value="${i}">${i}</option>`);
+  }
+
+  return `
+    <select class="button__size" id="button-size">
+      ${options.join('')}
+    </select>
+  `;
 }
 
 function toButtonGroup(buttons: ButtonConfigType[]) {

src/constants.ts

@@ -8,6 +8,7 @@ export const initialStyleState: ToolbarStateType = {
   fontWeight: 'normal',
   textDecoration: 'none',
   fontStyle: 'normal',
+  fontSize: '12px',
 };
 
 export function getNormalizeInitialState(params: string): StateType {
@@ -15,12 +16,12 @@ export function getNormalizeInitialState(params: string): StateType {
     colState: {},
     rowState: {},
     dataState: {},
-    currentText: '',
     stylesState: {},
     title: 'New excel table',
     id: params,
     openDate: Date.now(),
     ...storage(`excel:${params}`),
     currentStyles: { ...storage(`excel:${params}`)?.stylesState?.[startCellId] },
+    currentText: { ...storage(`excel:${params}`)?.dataState?.[startCellId] },
   };
 }

src/core/Clients.ts

@@ -1,3 +1,4 @@
+import { startCellId } from 'components/table/table.functions';
 import { storage } from 'core/utils';
 import { storageName } from 'pages/ExcelPage';
 import { StateType } from 'redux/types';
@@ -21,7 +22,7 @@ export class LocalStorageClient implements ClientDataType {
   }
 
   get() {
-    const data = storage(storageName(this.name)) || getNormalizeInitialState(this.name);
+    const data = this.norm(storage(storageName(this.name))) || getNormalizeInitialState(this.name);
 
     return new Promise(resolve => {
       setTimeout(() => {
@@ -29,4 +30,12 @@ export class LocalStorageClient implements ClientDataType {
       }, 1500);
     });
   }
+
+  norm(state) {
+    return {
+      ...state,
+      currentStyles: { ...state.stylesState?.[startCellId] },
+      currentText: state.dataState?.[startCellId],
+    };
+  }
 }

src/core/DomListener.ts

@@ -3,19 +3,19 @@ import { capitalize } from 'core/utils';
 
 export class DomListener {
   $root: Dom;
-  listeners: string[];
+  eventListeners: string[];
 
-  constructor($root: Dom, listeners: string[]) {
+  constructor($root: Dom, eventNames: string[]) {
     if (!$root) throw new Error('Не передали корневой элемент');
 
     this.$root = $root;
-    this.listeners = listeners;
+    this.eventListeners = eventNames;
   }
 
   initDOMListeners() {
-    if (!this.listeners) return;
+    if (!this.eventListeners) return;
 
-    this.listeners.forEach((listener: string) => {
+    this.eventListeners.forEach((listener: string) => {
       const method: any = getMethodName(listener);
       // @ts-ignore FIXME:
       this[method] = this[method]?.bind(this);
@@ -27,7 +27,7 @@ export class DomListener {
   }
 
   removeDOMListeners() {
-    this.listeners.forEach(listener => {
+    this.eventListeners.forEach(listener => {
       // @ts-ignore FIXME:
       const method: any = getMethodName(listener);
       // @ts-ignore FIXME:

src/core/ExcelComponent.ts

@@ -2,7 +2,7 @@ import { ActionType } from 'redux/types';
 import { Dom } from 'core/dom';
 import { DomListener } from 'core/DomListener';
 import { Emitter } from 'core/Emitter';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
 
 interface ExcelComponentClass {
   toHTML: () => string;
@@ -10,8 +10,8 @@ interface ExcelComponentClass {
   storeChanged?: (args: any) => void;
 }
 
-export type OptionsType = {
+export type ComponentOptionsType = {
-  listeners: string[];
+  eventListeners: string[];
   name: string;
   emitter: Emitter;
   store: Store;
@@ -25,8 +25,8 @@ export abstract class ExcelComponent extends DomListener implements ExcelCompone
   private subscribe: string[];
   private unsubscribers: ((args?: any) => any)[];
 
-  constructor($root: Dom, options: OptionsType) {
+  constructor($root: Dom, options: ComponentOptionsType) {
-    super($root, options.listeners);
+    super($root, options.eventListeners);
     this.name = options.name;
     this.emitter = options.emitter;
     this.store = options.store;
@@ -53,8 +53,8 @@ export abstract class ExcelComponent extends DomListener implements ExcelCompone
     unsub && this.unsubscribers.push(unsub);
   }
 
-  $dispatch(action: ActionType) {
+  dispatchToStore(action: ActionType) {
-    this.store?.dispatch(action);
+    this.store?.dispatchToStore(action);
   }
 
   storeChanged(args?: any) {

src/core/ExcelComponentState.ts

@@ -0,0 +1,27 @@
+import { Dom } from 'core/dom';
+import { ExcelComponent, ComponentOptionsType } from 'core/ExcelComponent';
+
+type ExcelComponentStateType = {
+  [k: string]: any;
+};
+
+export abstract class ExcelComponentState extends ExcelComponent {
+  componentState: ExcelComponentStateType;
+
+  protected constructor(root: Dom, options: ComponentOptionsType) {
+    super(root, options);
+  }
+
+  get template(): string {
+    return JSON.stringify(this.componentState, null, 2);
+  }
+
+  initComponentState(initialState = {}) {
+    this.componentState = { ...initialState };
+  }
+
+  setComponentState(newState: ExcelComponentStateType) {
+    this.componentState = { ...this.componentState, ...newState };
+    this.$root.html(this.template);
+  }
+}

src/core/ExcelStateComponent.ts

@@ -1,27 +0,0 @@
-import { Dom } from 'core/dom';
-import { ExcelComponent, OptionsType } from 'core/ExcelComponent';
-
-type ExcelComponentStateType = {
-  [k: string]: any;
-};
-
-export abstract class ExcelStateComponent extends ExcelComponent {
-  state: ExcelComponentStateType;
-
-  protected constructor(root: Dom, options: OptionsType) {
-    super(root, options);
-  }
-
-  get template(): string {
-    return JSON.stringify(this.state, null, 2);
-  }
-
-  initState(initialState = {}) {
-    this.state = { ...initialState };
-  }
-
-  setState(newState: ExcelComponentStateType) {
-    this.state = { ...this.state, ...newState };
-    this.$root.html(this.template);
-  }
-}

src/core/StoreSubscriber.ts

@@ -1,5 +1,5 @@
 import { StateType } from 'redux/types';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
 import { isEqual } from 'core/utils';
 
 export class StoreSubscriber {
@@ -14,7 +14,7 @@ export class StoreSubscriber {
   subscribeComponents(components: any[]) {
     this.prevState = this.store.getState();
 
-    this.sub = this.store.subscribe((state: StateType) => {
+    this.sub = this.store.subscribeFromStore((state: StateType) => {
       if (!state) return;
 
       Object.keys(state).forEach(key => {

src/core/store/Store.ts

@@ -9,7 +9,7 @@ export class Store {
     this.listeners = [];
   }
 
-  subscribe(fn: (state: StateType) => void): SubscribeType {
+  subscribeFromStore(fn: (state: StateType) => void): SubscribeType {
     this.listeners.push(fn);
     return {
       unsubscribe: () => {
@@ -18,7 +18,7 @@ export class Store {
     };
   }
 
-  dispatch(action: ActionType) {
+  dispatchToStore(action: ActionType) {
     this.state = this.reducer(this.state, action);
     this.listeners.forEach(listener => listener(this.state));
   }

src/pages/ExcelPage.ts

@@ -4,7 +4,7 @@ import { Formula } from 'components/formula/Formula';
 import { Header } from 'components/header/Header';
 import { LocalStorageClient } from 'core/Clients';
 import { StateProcessor } from 'core/StateProcessor';
-import { Store } from 'core/store/createStore';
+import { Store } from 'core/store/Store';
 import { SubscribeType } from 'redux/types';
 import { Table } from 'components/table/Table';
 import { Toolbar } from 'components/toolbar/Toolbar';
@@ -32,7 +32,7 @@ export class ExcelPage extends AbstractPage {
     const state = await this.processor.get();
     const store = new Store(rootReducer, state);
 
-    this.storeSub = store.subscribe(this.processor.listen);
+    this.storeSub = store.subscribeFromStore(this.processor.listen);
 
     this.excel = new Excel({
       components: [Header, Toolbar, Formula, Table],

src/redux/action-creators.ts

@@ -7,7 +7,7 @@ import {
   CHANGE_TITLE,
   DELETE_TABLE,
   UPDATE_DATE,
-} from 'redux/constants';
+} from 'redux/action-constants';
 
 export function tableResize(resizeData: any) {
   return {
@@ -30,7 +30,7 @@ export function changeCurrentStyles(data: any) {
   };
 }
 
-export function applyStyle(data: any) {
+export function applyStyle(data: { ids: (string | undefined)[], value: CSSStyleRule }) {
   return {
     type: APPLY_STYLES,
     data,

src/redux/actions-types.d.ts

@@ -1,8 +0,0 @@
-export type ResizePayloadType = {
-  colState: {
-    [k in number]: number
-  },
-  rowState: {
-    [k in number]: number
-  },
-};

src/redux/rootReducer.ts

@@ -9,7 +9,7 @@ import {
   CHANGE_TITLE,
   DELETE_TABLE,
   UPDATE_DATE,
-} from 'redux/constants';
+} from 'redux/action-constants';
 
 export function rootReducer(state: StateType, action: ActionType) {
   switch (action.type) {

src/styles/_variables.scss

@@ -7,3 +7,4 @@ $info-cell-width: 40px;
 $row-height: 25px;
 $toolbar-height: 40px;
 $primary-color: #3c74ff;
+$default-cell-font-size: 12px;

src/styles/components/table.scss

@@ -7,6 +7,7 @@
   right: 0;
   top: $header-height + $toolbar-height + $formula-height;
   overflow: auto;
+  font-size: $default-cell-font-size;
   .row{
     display: flex;
     flex-direction: row;

src/styles/components/toolbar.scss

@@ -22,4 +22,8 @@
       border: none;
     }
   }
+
+  .button__size {
+    width: 50px;
+  }
 }

test/createStore.spec.js

@@ -23,8 +23,8 @@ describe('Create store', () => {
 
   test('should return store object', () => {
     expect(store).toBeDefined();
-    expect(store.dispatch).toBeDefined();
+    expect(store.dispatchToStore).toBeDefined();
-    expect(store.subscribe).toBeDefined();
+    expect(store.subscribeFromStore).toBeDefined();
     expect(store.getState).not.toBeUndefined();
   });
 
@@ -37,27 +37,27 @@ describe('Create store', () => {
   });
 
   test('should change state if actions exist', () => {
-    store.dispatch({ type: 'ADD' });
+    store.dispatchToStore({ type: 'ADD' });
     expect(store.getState().count).toBe(1);
   });
 
   test("should NOT change state if actions don't exist", () => {
-    store.dispatch({ type: 'NOT_EXISTING_TYPE' });
+    store.dispatchToStore({ type: 'NOT_EXISTING_TYPE' });
     expect(store.getState().count).toBe(0);
   });
 
   test('should call subscriber', () => {
-    store.subscribe(handler);
+    store.subscribeFromStore(handler);
-    store.dispatch({ type: 'ADD' });
+    store.dispatchToStore({ type: 'ADD' });
 
     expect(handler).toHaveBeenCalled();
     expect(handler).toHaveBeenCalledWith(store.getState());
   });
 
   test('should NOT call sub if unsubscribe', () => {
-    const unsub = store.subscribe(handler);
+    const unsub = store.subscribeFromStore(handler);
     unsub.unsubscribe();
-    store.dispatch({ type: 'ADD' });
+    store.dispatchToStore({ type: 'ADD' });
 
     expect(handler).not.toHaveBeenCalled();
   });
@@ -65,7 +65,7 @@ describe('Create store', () => {
   test('should dispatch in async way', () => {
     return new Promise(resolve => {
       setTimeout(() => {
-        store.dispatch({ type: 'ADD' });
+        store.dispatchToStore({ type: 'ADD' });
       }, 500);
 
       setTimeout(() => {