add config

Added multiply config for component DEMO and lib mode.
Added excel formula support
2023-11-10 17:48:19 +03:00 · 2023-11-10 17:48:15 +03:00 · 2023-07-28 19:30:59 +03:00 · 2023-07-27 15:54:36 +03:00 · 2023-07-27 12:45:53 +03:00 · 2023-07-27 12:45:53 +03:00
45 changed files with 2109 additions and 353 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -4,7 +4,11 @@ module.exports = {
    es2021: true,
    node: true,
  },
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
  overrides: [
    {
      env: {
--- a/README.md
+++ b/README.md
@ -1,9 +1,15 @@
 # Modern Spreadsheet

+<img src="https://raw.githubusercontent.com/yazmeyaa/modern_spreadsheet/6dc20f92e769210c076600c7fcfacd4ed528f085/repo_assets/spreadsheet_preview.png?raw=true" alt="spreadsheet_preview">
+
+## Features:
 - High performance spreadsheet based on CanvasAPI.
 - TypeScript supported
+- Native scrolling
+- Customizable
+- Copy & Paste support

-## Basic usage
+### Basic usage

 ```ts
 import Spreadsheet from "modern_spreadsheet";
@ -14,7 +20,7 @@ const sheet = new Spreadsheet(target);
 //...
 ```

-## Save and load data
+### Save and load data

 ```ts
 function saveData() {
@ -30,10 +36,39 @@ function loadData() {
 }
 ```

-## Roadmap
+#### Supported events
+- onCellClick
+- onSelectionChange
+- onCellChange
+- onCopy

- Custom event functions (ex.: onSelectionChange, onCellEdit...). Full list of supported events will available on this page
- Rows number and columns heading render
+### Using events examples
+```ts
+import Spreadsheet, { SpreadsheetConstructorProperties } from "./main";
+
+const options: SpreadsheetConstructorProperties = {
+  onCellClick: (event, cell) => {
+    console.log("Cell click", event, cell);
+  },
+  onSelectionChange: (selection) => {
+    console.log("Changed selection: ", selection);
+  },
+  onCellChange = (cell) => {
+    console.log("Cell changed: ", cell);
+  },
+  onCopy: (range, data, dataAsString) => {
+    console.log("Copy event: ", range, data, dataAsString)
+  }
+};
+
+const sheet = new Spreadsheet("#spreadsheet", options);
+```
+
+### Roadmap
+
+- ~~Rows number and columns heading render~~
+- ~~Custom event functions (ex.: onSelectionChange, onCellEdit...). Full list of supported events will available on this page~~
+- ~~Copy & Paste support~~
 - Rows and columns resizing
 - Toolbar
 - Context menu
@ -41,4 +76,3 @@ function loadData() {
 - Selected cell depends cells highlight
 - Async formulas support
 - Mutlisheets (?)
-
--- a/dist/components/columnsBar.d.ts
+++ b/dist/components/columnsBar.d.ts
@ -0,0 +1,16 @@
+import Spreadsheet from "../main";
+export declare class ColumnsBar {
+    element: HTMLCanvasElement;
+    private root;
+    height: number;
+    width: number;
+    ctx: CanvasRenderingContext2D;
+    constructor(root: Spreadsheet);
+    private createElement;
+    setElementPosition(top: number, left: number): void;
+    private isColumnSelected;
+    private renderText;
+    private renderRect;
+    private renderSingleColumn;
+    renderBar(): void;
+}
--- a/dist/components/header.d.ts
+++ b/dist/components/header.d.ts
@ -1,6 +0,0 @@
-import Spreadsheet from "../main";
-export declare class Header {
-    element: HTMLHeadElement;
-    root: Spreadsheet;
-    constructor(root: Spreadsheet);
-}
--- a/dist/components/rowsBar.d.ts
+++ b/dist/components/rowsBar.d.ts
@ -0,0 +1,17 @@
+import Spreadsheet from "../main";
+export declare class RowsBar {
+    element: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    root: Spreadsheet;
+    width: number;
+    height: number;
+    resizerHeight: number;
+    constructor(root: Spreadsheet);
+    private createElement;
+    setElementPosition(top: number, left: number): void;
+    private isRowSelected;
+    private renderText;
+    private renderRect;
+    private renderSingleRow;
+    renderBar(): void;
+}
--- a/dist/components/scroller.d.ts
+++ b/dist/components/scroller.d.ts
@ -12,6 +12,7 @@ export declare class Scroller {
    private root;
    private isSelecting;
    constructor(root: Spreadsheet);
+    setSelectingMode(mode: boolean): void;
    private handleMouseMove;
    private handleMouseUp;
    private handleDoubleClick;
--- a/dist/components/sheet.d.ts
+++ b/dist/components/sheet.d.ts
@ -10,5 +10,8 @@ export declare class Sheet {
    constructor(root: Spreadsheet);
    getCellByCoords(x: number, y: number): Position;
    renderCell(position: Position): void;
+    private getSelectionRange;
+    private renderSelectionRange;
+    renderSelection(): void;
    renderSheet(): void;
 }
--- a/dist/components/toolbar.d.ts
+++ b/dist/components/toolbar.d.ts
@ -2,5 +2,6 @@ import Spreadsheet from "../main";
 export declare class Toolbar {
    element: HTMLDivElement;
    root: Spreadsheet;
+    height: number;
    constructor(root: Spreadsheet);
 }
--- a/dist/main.cjs
+++ b/dist/main.cjs
--- a/dist/main.cjs.map
+++ b/dist/main.cjs.map
--- a/dist/main.d.ts
+++ b/dist/main.d.ts
@ -1,20 +1,26 @@
 import { Cell, CellConstructorProps, CellStyles, Position, SerializableCell } from "./modules/cell";
-import { Config, ViewProperties } from "./modules/config";
+import { CellChangeEvent, CellClickEvent, Config, CopyEvent, SelectionChangeEvent, ViewProperties } from "./modules/config";
 import { RangeSelectionType, Selection } from "./modules/selection";
 import { Styles } from "./modules/styles";
 import { Viewport } from "./modules/viewport";
-import './scss/main.scss';
+import "./scss/main.scss";
 import { Cache } from "./modules/cache";
-interface SpreadsheetConstructorProperties {
-    config?: Omit<Config, 'view'>;
+import { Events } from "./modules/events";
+import { Clipboard } from "./modules/clipboard";
+export interface SpreadsheetConstructorProperties {
    view?: ViewProperties;
+    onCellClick?: CellClickEvent | null;
+    onSelectionChange?: SelectionChangeEvent | null;
+    onCellChange?: CellChangeEvent | null;
+    onCopy?: CopyEvent | null;
 }
 export declare const CSS_PREFIX = "modern_sc_";
 export default class Spreadsheet {
    private table;
    private scroller;
    private toolbar;
-    private header;
+    private rowsBar;
+    private columnsBar;
    private sheet;
    private editor;
    styles: Styles;
@ -23,7 +29,12 @@ export default class Spreadsheet {
    viewport: Viewport;
    selection: Selection;
    cache: Cache;
+    events: Events;
+    clipboard: Clipboard;
    constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties);
+    private setRowsBarPosition;
+    private setColumnsBarPosition;
+    private setElementsPositions;
    private getInitialCache;
    private buildComponent;
    /**Destroy spreadsheet DOM element.
@ -38,28 +49,34 @@ export default class Spreadsheet {
     */
    get ctx(): CanvasRenderingContext2D;
    get viewProps(): ViewProperties;
+    get columnsBarHeight(): number;
+    get rowsBarWidth(): number;
+    get toolbarHeight(): number;
    /** Focusing on interactive part of spreadsheet */
    focusTable(): void;
    getCellByCoords(x: number, y: number): Position;
    getCell(position: Position): Cell;
-    changeCellValues(position: Position, values: Partial<Omit<CellConstructorProps, 'position'>>): void;
+    changeCellValues(position: Position, values: Partial<Omit<CellConstructorProps, "position">>, enableCallback?: boolean): void;
    changeCellStyles(position: Position, styles: CellStyles): void;
-    applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => any): void;
+    applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => void): void;
    deleteSelectedCellsValues(): void;
    showEditor(position: Position, initialString?: string): void;
    renderSheet(): void;
+    renderSelection(): void;
+    renderColumnsBar(): void;
+    renderRowsBar(): void;
    renderCell(row: number, col: number): void;
    loadData(data: Cell[][] | SerializableCell[][]): Spreadsheet;
    private makeConfigFromData;
    serializeData(): SerializableCell[][];
 }
-export * from './modules/cache';
-export * from './modules/cell';
-export * from './modules/column';
-export * from './modules/config';
-export * from './modules/renderBox';
-export * from './modules/row';
-export * from './modules/selection';
-export * from './modules/styles';
-export * from './modules/viewport';
-export * from './utils/createData';
+export * from "./modules/cache";
+export * from "./modules/cell";
+export * from "./modules/column";
+export * from "./modules/config";
+export * from "./modules/renderBox";
+export * from "./modules/row";
+export * from "./modules/selection";
+export * from "./modules/styles";
+export * from "./modules/viewport";
+export * from "./utils/createData";
--- a/dist/main.js
+++ b/dist/main.js
--- a/dist/main.js.map
+++ b/dist/main.js.map
--- a/dist/modules/cell.d.ts
+++ b/dist/modules/cell.d.ts
@ -41,15 +41,14 @@ export declare class Cell {
    value: string;
    /** Value to render */
    displayValue: string;
-    /** This refers to the values that were obtained by calculations, for example, after calculating the formula  */
+    /** This refers to the values that were obtained by calculations, for example, after calculating the formula  */
    resultValue: string;
    position: Position;
    style: CellStyles | null;
    constructor(props: CellConstructorProps);
    getSerializableCell(): SerializableCell;
    changeStyles(styles: CellStyles): void;
-    changeValues(values: Partial<Omit<CellConstructorProps, 'position'>>): void;
-    private isCellInRange;
+    changeValues(values: Partial<Omit<CellConstructorProps, "position">>): void;
    render(root: Spreadsheet): void;
 }
 export {};
--- a/dist/modules/clipboard.d.ts
+++ b/dist/modules/clipboard.d.ts
@ -0,0 +1,9 @@
+import Spreadsheet, { RangeSelectionType } from "../main";
+import { Cell, Position } from "./cell";
+export declare class Clipboard {
+    saved: Cell[][] | null;
+    root: Spreadsheet;
+    constructor(root: Spreadsheet);
+    copy(data: Cell[][], range: RangeSelectionType): void;
+    paste(root: Spreadsheet, { column, row }: Position, event: ClipboardEvent): void;
+}
--- a/dist/modules/config.d.ts
+++ b/dist/modules/config.d.ts
@ -1,9 +1,15 @@
+import { Cell } from "./cell";
 import { Column } from "./column";
 import { Row } from "./row";
+import { RangeSelectionType, Selection } from "./selection";
 export interface ViewProperties {
    width: number;
    height: number;
 }
+export type CellClickEvent = (event: MouseEvent, cell: Cell) => void;
+export type SelectionChangeEvent = (selection: Selection) => void;
+export type CellChangeEvent = (cell: Cell) => void;
+export type CopyEvent = (range: RangeSelectionType, data: Cell[][], dataAsString: string) => void;
 export type ConfigProperties = {
    /** Please, end it with '_' symbol.
     *
@ -14,6 +20,10 @@ export type ConfigProperties = {
    rows: Row[];
    columns: Column[];
    view: ViewProperties;
+    onCellClick?: CellClickEvent | null;
+    onSelectionChange?: SelectionChangeEvent | null;
+    onCellChange?: CellChangeEvent | null;
+    onCopy?: CopyEvent | null;
 };
 export type SheetConfigConstructorProps = {
    rows: Row[];
@ -23,5 +33,9 @@ export declare class Config {
    rows: Row[];
    columns: Column[];
    view: ViewProperties;
+    onCellClick: CellClickEvent | null;
+    onSelectonChange: SelectionChangeEvent | null;
+    onCellChange: CellChangeEvent | null;
+    onCopy: CopyEvent | null;
    constructor(props: ConfigProperties);
 }
--- a/dist/modules/events.d.ts
+++ b/dist/modules/events.d.ts
@ -0,0 +1,39 @@
+import { Scroller } from "../components/scroller";
+import Spreadsheet, { Cell, RangeSelectionType, Selection } from "../main";
+export declare enum EventTypes {
+    CELL_CLICK = "CELL_CLICK",
+    SELECTION_CHANGE = "CHANGE_SELECTION",
+    CELL_CHANGE = "CELL_CHANGE",
+    COPY_CELLS = "COPY_CELLS"
+}
+export type CellClickEvent = {
+    type: EventTypes.CELL_CLICK;
+    event: MouseEvent;
+    scroller: Scroller;
+};
+export type ChangeSelectionEvent = {
+    type: EventTypes.SELECTION_CHANGE;
+    selection: Selection;
+    enableCallback?: boolean;
+};
+export type ChangeCellEvent = {
+    type: EventTypes.CELL_CHANGE;
+    cell: Cell;
+    enableCallback?: boolean;
+};
+export type CopyAction = {
+    type: EventTypes.COPY_CELLS;
+    range: RangeSelectionType;
+    data: Cell[][];
+    dataAsString: string;
+};
+export type ActionTypes = CellClickEvent | ChangeSelectionEvent | ChangeCellEvent | CopyAction;
+export declare class Events {
+    root: Spreadsheet;
+    constructor(root: Spreadsheet);
+    dispatch(action: ActionTypes): void;
+    private cellClick;
+    private changeSelection;
+    private changeCellValues;
+    private copy;
+}
--- a/dist/style.css
+++ b/dist/style.css
@ -1 +1 @@
-body{padding:0;margin:0}.modern_sc_content{position:absolute;top:0;left:0}.modern_sc_spreadsheet_container{position:relative;isolation:isolate;border:2px solid black}.modern_sc_sheet{display:block;contain:strict}.modern_sc_scroller{overflow:scroll;box-sizing:border-box;transform:translateZ(0)}.modern_sc_scroller:focus{outline:none}.modern_sc_editor{position:absolute;box-sizing:border-box;font-size:16px;font-family:Arial,Helvetica,sans-serif}.modern_sc_hide{visibility:hidden}
+body{padding:0;margin:0}.modern_sc_spreadsheet_container{position:relative;isolation:isolate;border:2px solid black}.modern_sc_content{position:absolute}.modern_sc_sheet{display:block;contain:strict}.modern_sc_scroller{position:absolute;overflow:scroll;box-sizing:border-box;transform:translateZ(0)}.modern_sc_scroller:focus{outline:none}.modern_sc_editor{position:absolute;box-sizing:border-box;font-size:16px;font-family:Arial,Helvetica,sans-serif}.modern_sc_hide{visibility:hidden}
--- a/dist/utils/position.d.ts
+++ b/dist/utils/position.d.ts
@ -0,0 +1,3 @@
+import { BaseSelectionType, RangeSelectionType } from "../main";
+export declare function checkEqualRanges(range1: RangeSelectionType, range2: RangeSelectionType): boolean;
+export declare function checkEqualCellSelections(selection1: BaseSelectionType, selection2: BaseSelectionType): boolean;
--- a/index.html
+++ b/index.html
@ -6,9 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spreadsheet example</title>
  </head>
-  <body>
+  <body style="padding: 2rem;">
    <div id="spreadsheet"></div>
-    <div id="spreadsheet_2"></div>
    <button id="save_button">Save sheet</button>
    <button id="load_button">Load sheet</button>
    <script type="module" src="/src/index.ts"></script>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "modern_spreadsheet",
  "private": false,
-  "version": "0.0.25",
+  "version": "0.0.33",
  "exports": {
    ".": {
      "import": "./dist/main.js",
@ -33,18 +33,21 @@
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
+    "build:HTML": "tsc && cross-env BUILD_BROWSER=true vite build",
    "build:watch": "tsc && vite build --watch",
    "preview": "vite preview",
    "predeploy": "npm run dist",
    "deploy": "gh-pages -d dist",
    "lint": "eslint src --ext .ts",
-    "lint:fix": "eslint src --ext .ts --fix"
+    "lint:fix": "eslint src --ext .ts --fix",
+    "format": "prettier --write ./src/**/*.ts"
  },
  "devDependencies": {
    "@rollup/plugin-typescript": "^11.1.2",
    "@types/node": "^20.4.4",
    "@typescript-eslint/eslint-plugin": "^6.2.0",
    "@typescript-eslint/parser": "^6.2.0",
+    "cross-env": "^7.0.3",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^8.8.0",
    "gh-pages": "^5.0.0",
@ -53,6 +56,10 @@
    "sass": "^1.63.6",
    "tslib": "^2.6.0",
    "typescript": "^5.0.2",
-    "vite": "^4.4.0"
+    "vite": "^4.4.0",
+    "vite-plugin-html": "^3.2.0"
+  },
+  "dependencies": {
+    "fast-formula-parser": "^1.0.19"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -4,6 +4,11 @@ settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

+dependencies:
+  fast-formula-parser:
+    specifier: ^1.0.19
+    version: 1.0.19
+
 devDependencies:
  '@rollup/plugin-typescript':
    specifier: ^11.1.2
@ -17,6 +22,9 @@ devDependencies:
  '@typescript-eslint/parser':
    specifier: ^6.2.0
    version: 6.2.0(eslint@8.45.0)(typescript@5.0.2)
+  cross-env:
+    specifier: ^7.0.3
+    version: 7.0.3
  eslint:
    specifier: ^8.45.0
    version: 8.45.0
@ -44,6 +52,9 @@ devDependencies:
  vite:
    specifier: ^4.4.0
    version: 4.4.0(@types/node@20.4.4)(sass@1.63.6)
+  vite-plugin-html:
+    specifier: ^3.2.0
+    version: 3.2.0(vite@4.4.0)

 packages:

@ -307,6 +318,43 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.20
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.1:
+    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/source-map@0.3.5:
+    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.20
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
+  /@jridgewell/trace-mapping@0.3.20:
+    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
  /@nodelib/fs.scandir@2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -347,6 +395,14 @@ packages:
      typescript: 5.0.2
    dev: true

+  /@rollup/pluginutils@4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
  /@rollup/pluginutils@5.0.2:
    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
    engines: {node: '>=14.0.0'}
@ -577,15 +633,28 @@ packages:
    resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
    dev: true

+  /bahttext@1.1.0:
+    resolution: {integrity: sha512-3g7DbmCwYhLnnN5hJFB+Mtbst4q2gfXpAdqOMK6tz6FmgtlrhX1n1uhuzkIhEr+WcnFR6eRvebIE5msGuEtA7Q==}
+    dev: false
+
  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
    dev: true

+  /bessel@1.0.2:
+    resolution: {integrity: sha512-Al3nHGQGqDYqqinXhQzmwmcRToe/3WyBv4N8aZc5Pef8xw2neZlR9VPi84Sa23JtgWcucu18HxVZrnI0fn2etw==}
+    engines: {node: '>=0.8'}
+    dev: false
+
  /binary-extensions@2.2.0:
    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
    engines: {node: '>=8'}
    dev: true

+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
    dependencies:
@ -593,6 +662,12 @@ packages:
      concat-map: 0.0.1
    dev: true

+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
  /braces@3.0.2:
    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
    engines: {node: '>=8'}
@ -600,11 +675,22 @@ packages:
      fill-range: 7.0.1
    dev: true

+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
+
  /callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}
    dev: true

+  /camel-case@4.1.2:
+    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.6.0
+    dev: true
+
  /chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@ -613,6 +699,12 @@ packages:
      supports-color: 7.2.0
    dev: true

+  /chevrotain@7.1.2:
+    resolution: {integrity: sha512-9bQsXVQ7UAvzMs7iUBBJ9Yv//exOy7bIR3PByOEk4M64vIE/LsiOiX7VIkMF/vEMlrSStwsaE884Bp9CpjtC5g==}
+    dependencies:
+      regexp-to-ast: 0.5.0
+    dev: false
+
  /chokidar@3.5.3:
    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
    engines: {node: '>= 8.10.0'}
@ -628,6 +720,13 @@ packages:
      fsevents: 2.3.2
    dev: true

+  /clean-css@5.3.2:
+    resolution: {integrity: sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==}
+    engines: {node: '>= 10.0'}
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@ -639,10 +738,19 @@ packages:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: true

+  /colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    dev: true
+
  /commander@2.20.3:
    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
    dev: true

+  /commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: true
+
  /commondir@1.0.1:
    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
    dev: true
@ -651,6 +759,23 @@ packages:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true

+  /connect-history-api-fallback@1.6.0:
+    resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
+    engines: {node: '>=0.8'}
+    dev: true
+
+  /consola@2.15.3:
+    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
+    dev: true
+
+  /cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: true
+
  /cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@ -660,6 +785,21 @@ packages:
      which: 2.0.2
    dev: true

+  /css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+    dev: true
+
+  /css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+    dev: true
+
  /debug@4.3.4:
    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
    engines: {node: '>=6.0'}
@ -690,10 +830,66 @@ packages:
      esutils: 2.0.3
    dev: true

+  /dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+    dev: true
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+    dev: true
+
+  /dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.0
+    dev: true
+
+  /dotenv-expand@8.0.3:
+    resolution: {integrity: sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /dotenv@16.3.1:
+    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /ejs@3.1.9:
+    resolution: {integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    dependencies:
+      jake: 10.8.7
+    dev: true
+
  /email-addresses@5.0.0:
    resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
    dev: true

+  /entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+    dev: true
+
  /esbuild@0.18.14:
    resolution: {integrity: sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==}
    engines: {node: '>=12'}
@ -843,6 +1039,15 @@ packages:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
    dev: true

+  /fast-formula-parser@1.0.19:
+    resolution: {integrity: sha512-8Roq7V1XjuYj3cWZ9tILyqBHGjS7NkejRaHxSWePu0qjIcvimZwe6WfeA9che03dgWrykZqrw691qg3lwiIkMg==}
+    dependencies:
+      bahttext: 1.1.0
+      bessel: 1.0.2
+      chevrotain: 7.1.2
+      jstat: 1.9.6
+    dev: false
+
  /fast-glob@3.3.1:
    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
    engines: {node: '>=8.6.0'}
@ -875,6 +1080,12 @@ packages:
      flat-cache: 3.0.4
    dev: true

+  /filelist@1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
  /filename-reserved-regex@2.0.0:
    resolution: {integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==}
    engines: {node: '>=4'}
@ -933,6 +1144,15 @@ packages:
    resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
    dev: true

+  /fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+    dev: true
+
  /fs-extra@8.1.0:
    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
    engines: {node: '>=6 <7 || >=8'}
@ -1047,6 +1267,25 @@ packages:
      function-bind: 1.1.1
    dev: true

+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
+  /html-minifier-terser@6.1.0:
+    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.2
+      commander: 8.3.0
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.24.0
+    dev: true
+
  /ignore@5.2.4:
    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
    engines: {node: '>= 4'}
@ -1119,6 +1358,17 @@ packages:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true

+  /jake@10.8.7:
+    resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      async: 3.2.4
+      chalk: 4.1.2
+      filelist: 1.0.4
+      minimatch: 3.1.2
+    dev: true
+
  /js-yaml@4.1.0:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true
@ -1140,6 +1390,18 @@ packages:
      graceful-fs: 4.2.11
    dev: true

+  /jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
+  /jstat@1.9.6:
+    resolution: {integrity: sha512-rPBkJbK2TnA8pzs93QcDDPlKcrtZWuuCo2dVR0TFLOJSxhqfWOVCSp8aV3/oSbn+4uY4yw1URtLpHQedtmXfug==}
+    dev: false
+
  /levn@0.4.1:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}
@ -1166,6 +1428,12 @@ packages:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: true

+  /lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+    dependencies:
+      tslib: 2.6.0
+    dev: true
+
  /lru-cache@6.0.0:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
    engines: {node: '>=10'}
@ -1199,6 +1467,13 @@ packages:
      brace-expansion: 1.1.11
    dev: true

+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
  /ms@2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
    dev: true
@ -1217,11 +1492,31 @@ packages:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true

+  /no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.6.0
+    dev: true
+
+  /node-html-parser@5.4.2:
+    resolution: {integrity: sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==}
+    dependencies:
+      css-select: 4.3.0
+      he: 1.2.0
+    dev: true
+
  /normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}
    dev: true

+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
@ -1278,6 +1573,13 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /param-case@3.0.4:
+    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.0
+    dev: true
+
  /parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
@ -1285,6 +1587,13 @@ packages:
      callsites: 3.1.0
    dev: true

+  /pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.0
+    dev: true
+
  /path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@ -1309,6 +1618,10 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /pathe@0.2.0:
+    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
+    dev: true
+
  /picocolors@1.0.0:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
    dev: true
@ -1378,6 +1691,15 @@ packages:
      picomatch: 2.3.1
    dev: true

+  /regexp-to-ast@0.5.0:
+    resolution: {integrity: sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==}
+    dev: false
+
+  /relateurl@0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
  /resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@ -1471,6 +1793,18 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /strip-ansi@6.0.1:
    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
    engines: {node: '>=8'}
@ -1502,6 +1836,17 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

+  /terser@5.24.0:
+    resolution: {integrity: sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.10.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: true
+
  /text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
    dev: true
@ -1556,12 +1901,37 @@ packages:
    engines: {node: '>= 4.0.0'}
    dev: true

+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
  /uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies:
      punycode: 2.3.0
    dev: true

+  /vite-plugin-html@3.2.0(vite@4.4.0):
+    resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      colorette: 2.0.20
+      connect-history-api-fallback: 1.6.0
+      consola: 2.15.3
+      dotenv: 16.3.1
+      dotenv-expand: 8.0.3
+      ejs: 3.1.9
+      fast-glob: 3.3.1
+      fs-extra: 10.1.0
+      html-minifier-terser: 6.1.0
+      node-html-parser: 5.4.2
+      pathe: 0.2.0
+      vite: 4.4.0(@types/node@20.4.4)(sass@1.63.6)
+    dev: true
+
  /vite@4.4.0(@types/node@20.4.4)(sass@1.63.6):
    resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==}
    engines: {node: ^14.18.0 || >=16.0.0}
--- a/repo_assets/spreadsheet_preview.png
+++ b/repo_assets/spreadsheet_preview.png
--- a/src/components/columnsBar.ts
+++ b/src/components/columnsBar.ts
@ -0,0 +1,122 @@
+import Spreadsheet, { RenderBox } from "../main";
+
+export class ColumnsBar {
+  public element: HTMLCanvasElement;
+  private root: Spreadsheet;
+  public height: number = 35;
+  public width: number;
+  // private resizerWidth = 1;
+  ctx: CanvasRenderingContext2D;
+
+  constructor(root: Spreadsheet) {
+    this.root = root;
+    this.element = this.createElement();
+    const ctx = this.element.getContext("2d");
+    if (!ctx) throw new Error("Enable hardware acceleration");
+    this.ctx = ctx;
+
+    this.width = this.root.viewProps.width;
+  }
+
+  private createElement(): HTMLCanvasElement {
+    const element = document.createElement("canvas");
+    element.style.position = "absolute";
+    element.style.height = this.height + "px";
+    element.style.width = this.root.viewProps.width + "px";
+    element.style.display = "block";
+    element.style.borderLeft = "1px solid black";
+    // element.style.boxSizing = 'border-box'
+
+    element.width = this.root.viewProps.width;
+    element.height = this.height;
+    return element;
+  }
+
+  public setElementPosition(top: number, left: number) {
+    this.element.style.top = top + "px";
+    this.element.style.left = left + "px";
+  }
+
+  private isColumnSelected(column: number): boolean {
+    const { selectedCell, selectedRange } = this.root.selection;
+    if (selectedCell && selectedCell.column === column) return true;
+    if (selectedRange) {
+      const inRange =
+        column >=
+          Math.min(selectedRange.from.column, selectedRange.to.column) &&
+        column <= Math.max(selectedRange.from.column, selectedRange.to.column);
+
+      return inRange;
+    }
+    return false;
+  }
+
+  // private getYCoordWithOffset(renderBox: RenderBox): number {
+  //     const {y} = renderBox
+
+  //     return y + this.root.toolbarHeight
+  // }
+
+  // private getXCoordWithOffset(renderBox: RenderBox): number {
+  //     const {x} = renderBox
+
+  //     return x
+  // }
+
+  private renderText(column: number, renderBox: RenderBox) {
+    const { width, x } = renderBox;
+
+    this.ctx.fillStyle = "black";
+    this.ctx.textAlign = "center";
+    this.ctx.textBaseline = "middle";
+    this.ctx.font = "12px Arial";
+    this.ctx.fillText(
+      this.root.config.columns[column].title,
+      x + width / 2 - this.root.viewport.left,
+      0 + this.height / 2,
+    );
+  }
+
+  private renderRect(column: number, renderBox: RenderBox) {
+    const { width, x } = renderBox;
+
+    const isColSelected = this.isColumnSelected(column);
+
+    this.ctx.fillStyle = isColSelected ? "#c7ebff" : "white";
+    this.ctx.strokeStyle = "black";
+    this.ctx.lineWidth = 1;
+
+    const specialX = x - this.root.viewport.left;
+
+    this.ctx.fillRect(specialX - 1, 0, width, this.height);
+    this.ctx.strokeRect(specialX - 1, 0, width, this.height);
+  }
+
+  private renderSingleColumn(column: number) {
+    const renderBox = new RenderBox(this.root.config, {
+      row: 0,
+      column: column,
+    });
+
+    this.renderRect(column, renderBox);
+    this.renderText(column, renderBox);
+  }
+
+  public renderBar() {
+    const lastColIdx = this.root.viewport.lastCol + 3;
+    const firstColIdx = this.root.viewport.firstCol;
+
+    this.ctx.beginPath();
+    this.ctx.strokeStyle = "black";
+    this.ctx.lineWidth = 1;
+    this.ctx.moveTo(0, 0);
+    this.ctx.lineTo(0, this.height);
+    this.ctx.closePath();
+    this.ctx.stroke();
+
+    for (let col = firstColIdx; col <= lastColIdx; col++) {
+      if (!this.root.config.columns[col]) break;
+      this.renderSingleColumn(col);
+    }
+  }
+}
--- a/src/components/editor.ts
+++ b/src/components/editor.ts
@ -1,5 +1,6 @@
 import Spreadsheet, { CSS_PREFIX } from "../main";
 import { Position } from "../modules/cell";
+import { EventTypes } from "../modules/events";
 import { RenderBox } from "../modules/renderBox";

 export class Editor {
@ -28,8 +29,10 @@ export class Editor {
    const cell = this.root.getCell(position);
    this.element.classList.remove("hide");

-    this.element.style.top = y - this.root.viewport.top + "px";
-    this.element.style.left = x - this.root.viewport.left + "px";
+    this.element.style.top =
+      y - this.root.viewport.top + this.root.columnsBarHeight + "px";
+    this.element.style.left =
+      x - this.root.viewport.left + this.root.rowsBarWidth + "px";
    this.element.style.width = width + "px";
    this.element.style.height = height + "px";
    this.element.style.display = "block";
@ -50,11 +53,20 @@ export class Editor {
        break;
      }
      case "Enter": {
-        this.root.changeCellValues(this.root.selection.selectedCell!, {
+        if (!this.root.selection.selectedCell) return;
+
+        this.root.changeCellValues(this.root.selection.selectedCell, {
          value: this.element.value,
          displayValue: this.element.value,
        });
+
+        this.root.events.dispatch({
+          type: EventTypes.CELL_CHANGE,
+          cell: this.root.getCell(this.root.selection.selectedCell),
+        });
+
        this.hide();
+        this.root.renderSelection();
      }
    }
  };
--- a/src/components/header.ts
+++ b/src/components/header.ts
@ -1,12 +0,0 @@
-import Spreadsheet from "../main";
-
-export class Header {
-  element: HTMLHeadElement;
-  root: Spreadsheet;
-  constructor(root: Spreadsheet) {
-    this.root = root;
-    const headerElement = document.createElement("header");
-    headerElement.classList.add();
-    this.element = headerElement;
-  }
-}
--- a/src/components/rowsBar.ts
+++ b/src/components/rowsBar.ts
@ -0,0 +1,109 @@
+import Spreadsheet, { RenderBox } from "../main";
+
+export class RowsBar {
+  element: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+  root: Spreadsheet;
+  width: number = 35;
+  height: number;
+  resizerHeight = 1;
+  constructor(root: Spreadsheet) {
+    this.root = root;
+    this.element = this.createElement();
+    const ctx = this.element.getContext("2d");
+    if (!ctx) throw new Error("Enable hardware acceleration");
+    this.ctx = ctx;
+
+    this.height = this.root.viewProps.height;
+  }
+
+  private createElement() {
+    const element = document.createElement("canvas");
+
+    element.style.position = "absolute";
+    element.style.height = this.root.viewProps.height + "px";
+    element.style.width = this.width + "px";
+    element.style.display = "block";
+    element.style.borderTop = "1px solid black";
+    // element.style.boxSizing = 'border-box'
+
+    element.width = this.width;
+    element.height = this.root.viewProps.height;
+    return element;
+  }
+
+  public setElementPosition(top: number, left: number) {
+    this.element.style.top = top + "px";
+    this.element.style.left = left + "px";
+  }
+
+  private isRowSelected(row: number): boolean {
+    const { selectedCell, selectedRange } = this.root.selection;
+    if (selectedCell && selectedCell.row === row) return true;
+    if (selectedRange) {
+      const inRange =
+        row >= Math.min(selectedRange.from.row, selectedRange.to.row) &&
+        row <= Math.max(selectedRange.from.row, selectedRange.to.row);
+
+      return inRange;
+    }
+    return false;
+  }
+
+  private renderText(row: number, renderBox: RenderBox) {
+    const { y, height } = renderBox;
+
+    this.ctx.fillStyle = "black";
+    this.ctx.textAlign = "center";
+    this.ctx.textBaseline = "middle";
+    this.ctx.font = "12px Arial";
+    this.ctx.fillText(
+      this.root.config.rows[row].title,
+      this.width / 2,
+      y - this.root.viewport.top + height / 2,
+    );
+  }
+
+  private renderRect(column: number, renderBox: RenderBox) {
+    const { y, height } = renderBox;
+
+    const isRowSeleted = this.isRowSelected(column);
+
+    this.ctx.fillStyle = isRowSeleted ? "#c7ebff" : "white";
+    this.ctx.strokeStyle = "black";
+    this.ctx.lineWidth = this.resizerHeight;
+
+    const specialY = y - this.root.viewport.top;
+
+    this.ctx.fillRect(0, specialY - 1, this.width, height);
+    this.ctx.strokeRect(0, specialY - 1, this.width, height);
+  }
+
+  private renderSingleRow(row: number) {
+    const renderBox = new RenderBox(this.root.config, {
+      column: 0,
+      row: row,
+    });
+
+    this.renderRect(row, renderBox);
+    this.renderText(row, renderBox);
+  }
+
+  public renderBar() {
+    const lastRowIdx = this.root.viewport.lastRow + 3;
+    const firstRowIdx = this.root.viewport.firstRow;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, 0);
+    this.ctx.strokeStyle = "black";
+    this.ctx.lineWidth = 16;
+    this.ctx.lineTo(35, 0);
+    this.ctx.closePath();
+    this.ctx.stroke();
+
+    for (let row = firstRowIdx; row <= lastRowIdx; row++) {
+      if (!this.root.config.rows[row]) break;
+      this.renderSingleRow(row);
+    }
+  }
+}
--- a/src/components/scroller.ts
+++ b/src/components/scroller.ts
@ -1,4 +1,6 @@
-import Spreadsheet, { CSS_PREFIX } from "../main";
+import Spreadsheet, { CSS_PREFIX, Cell, Selection } from "../main";
+import { EventTypes } from "../modules/events";
+import { checkEqualCellSelections } from "../utils/position";

 export interface ViewportRect {
  top: number;
@ -12,7 +14,6 @@ export class Scroller {
  private verticalScroller: HTMLDivElement;
  private horizontalScroller: HTMLDivElement;
  private root: Spreadsheet;
-
  private isSelecting = false;

  constructor(root: Spreadsheet) {
@ -25,6 +26,8 @@ export class Scroller {

    this.element.style.height = this.root.config.view.height + "px";
    this.element.style.width = this.root.config.view.width + "px";
+    this.element.style.top = this.root.columnsBarHeight + "px";
+    this.element.style.left = this.root.rowsBarWidth + "px";
    this.element.tabIndex = -1;

    this.updateScrollerSize(); //* Init size set
@ -37,33 +40,67 @@ export class Scroller {
    this.element.addEventListener("dblclick", this.handleDoubleClick);

    this.element.addEventListener("keydown", this.handleKeydown);
+    this.element.addEventListener("paste", (event) => {
+      if (!this.root.selection.selectedCell) return;
+      this.root.clipboard.paste(
+        this.root,
+        this.root.selection.selectedCell,
+        event,
+      );
+    });
+  }
+
+  public setSelectingMode(mode: boolean) {
+    this.isSelecting = mode;
  }

  private handleMouseMove = (event: MouseEvent) => {
    if (!this.isSelecting) return;
    const { offsetX, offsetY } = event;
    const lastSelectedCell = this.root.getCellByCoords(offsetX, offsetY);
+
+    let isRangeChanged = false;
+
    if (this.root.selection.selectedRange) {
+      isRangeChanged = !checkEqualCellSelections(
+        this.root.selection.selectedRange.to,
+        lastSelectedCell,
+      );
+
+      if (isRangeChanged) {
        this.root.selection.selectedRange.to = lastSelectedCell;
+        this.root.events.dispatch({
+          type: EventTypes.SELECTION_CHANGE,
+          selection: this.root.selection,
+          enableCallback: true,
+        });
+      }
    }
-    this.root.renderSheet();
  };

  private handleMouseUp = () => {
    this.isSelecting = false;
+    const newSelection = { ...this.root.selection };

    if (this.root.selection.selectedRange) {
      if (
-        this.root.selection.selectedRange.from.row ===
-          this.root.selection.selectedRange.to.row &&
-        this.root.selection.selectedRange.from.column ===
-          this.root.selection.selectedRange.to.column
+        checkEqualCellSelections(
+          this.root.selection.selectedRange.from,
+          this.root.selection.selectedRange.to,
+        )
      ) {
-        this.root.selection.selectedRange = null;
+        newSelection.selectedRange = null;
+        this.root.events.dispatch({
+          type: EventTypes.SELECTION_CHANGE,
+          selection: newSelection,
+          enableCallback: false,
+        });
      }
    }

    this.root.renderSheet();
+    this.root.renderColumnsBar();
+    this.root.renderRowsBar();
  };

  private handleDoubleClick = (event: MouseEvent) => {
@ -73,8 +110,8 @@ export class Scroller {
  };

  private handleKeydown = (event: KeyboardEvent) => {
-    console.log(event);
    //* Navigation
+
    if (
      ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)
    ) {
@ -86,9 +123,8 @@ export class Scroller {
            this.root.selection.selectedCell &&
            this.root.selection.selectedCell.column > 0
          ) {
-            console.log("tick");
            this.root.selection.selectedCell.column -= 1;
-            this.root.renderSheet();
+            // this.root.renderSheet();
          }
          break;
        }
@ -99,7 +135,7 @@ export class Scroller {
              this.root.config.columns.length - 1
          ) {
            this.root.selection.selectedCell.column += 1;
-            this.root.renderSheet();
+            // this.root.renderSheet();
          }
          break;
        }
@ -109,7 +145,7 @@ export class Scroller {
            this.root.selection.selectedCell.row > 0
          ) {
            this.root.selection.selectedCell.row -= 1;
-            this.root.renderSheet();
+            // this.root.renderSheet();
          }
          break;
        }
@ -120,13 +156,20 @@ export class Scroller {
              this.root.config.rows.length - 1
          ) {
            this.root.selection.selectedCell.row += 1;
-            this.root.renderSheet();
+            // this.root.renderSheet();
          }
          break;
        }
      }
+      this.root.events.dispatch({
+        type: EventTypes.SELECTION_CHANGE,
+        selection: this.root.selection,
+        enableCallback: true,
+      });
    }
-    const keysRegex = /^([a-z]|[а-я])$/;
+
+    //* Start typings
+    const keysRegex = /^([a-z]|[а-я]|[0-9]|=)$/;
    if (!event.metaKey && !event.ctrlKey) {
      //* Prevent handle shortcutrs
      const isPressedLetterKey = keysRegex.test(event.key.toLowerCase());
@ -148,20 +191,51 @@ export class Scroller {
      this.root.deleteSelectedCellsValues();
      this.root.renderSheet();
    }
+
+    if (event.metaKey || event.ctrlKey) {
+      if (event.code === "KeyC") {
+        let cells: Cell[][] = undefined!;
+        const selection = new Selection();
+
+        if (this.root.selection.selectedRange) {
+          const { from, to } = this.root.selection.selectedRange;
+
+          selection.selectedRange = this.root.selection.selectedRange;
+
+          const subArrByRows = this.root.data.slice(from.row, to.row + 1);
+
+          const subArrByCols = subArrByRows.map((row) => {
+            return row.slice(from.column, to.column + 1);
+          });
+
+          cells = [...subArrByCols];
+        } else if (this.root.selection.selectedCell) {
+          const { column, row } = this.root.selection.selectedCell;
+          cells = [[this.root.data[row][column]]];
+          selection.selectedRange = {
+            from: this.root.selection.selectedCell,
+            to: this.root.selection.selectedCell,
+          };
+        } else {
+          return;
+        }
+
+        this.root.clipboard.copy(cells, selection.selectedRange);
+        return;
+      }
+      if (event.code === "KeyV") {
+        // if (!this.root.selection.selectedCell) return;
+        // this.root.clipboard.paste(this.root, this.root.selection.selectedCell);
+      }
+    }
  };

  private handleClick = (event: MouseEvent) => {
-    if (event.button !== 0) return; // Left mouse button
-    const { offsetX, offsetY } = event;
-    const clickedCell = this.root.getCellByCoords(offsetX, offsetY);
-    this.isSelecting = true;
-    this.root.selection.selectedRange = {
-      from: clickedCell,
-      to: clickedCell,
-    };
-    this.root.selection.selectedCell = clickedCell;
-
-    this.root.renderSheet();
+    this.root.events.dispatch({
+      type: EventTypes.CELL_CLICK,
+      event,
+      scroller: this,
+    });
  };

  private handleScroll = () => {
@ -169,6 +243,9 @@ export class Scroller {
    this.root.viewport.updateValues(rect);

    this.root.renderSheet();
+    this.root.renderColumnsBar();
+
+    this.root.renderRowsBar();
  };

  public getViewportBoundlingRect(): ViewportRect {
@ -205,6 +282,7 @@ export class Scroller {
    this.verticalScroller = verticalScroller;
    this.horizontalScroller = horizontalScroller;
    scroller.appendChild(groupScrollers);
+    scroller.contentEditable = "false";
    scroller.classList.add(CSS_PREFIX + "scroller");

    return { scroller, verticalScroller, horizontalScroller };
--- a/src/components/sheet.ts
+++ b/src/components/sheet.ts
@ -1,4 +1,4 @@
-import Spreadsheet, { CSS_PREFIX } from "../main";
+import Spreadsheet, { CSS_PREFIX, RenderBox } from "../main";
 import { Position } from "../modules/cell";

 /**
@ -18,6 +18,7 @@ export class Sheet {
    canvas.width = this.root.config.view.width;
    canvas.style.width = this.root.config.view.width + "px";
    canvas.style.height = this.root.config.view.height + "px";
+    canvas.style.left = "0px";

    this.element = canvas;

@ -51,12 +52,79 @@ export class Sheet {
    this.root.data[row][column].render(this.root);
  }

+  private getSelectionRange() {
+    const { selectedCell, selectedRange } = this.root.selection;
+
+    if (!selectedCell && !selectedRange) return;
+    if (selectedRange) {
+      const startRow = Math.min(selectedRange.from.row, selectedRange.to.row);
+      const startCol = Math.min(
+        selectedRange.from.column,
+        selectedRange.to.column,
+      );
+      const lastRow = Math.max(selectedRange.from.row, selectedRange.to.row);
+      const lastCol = Math.max(
+        selectedRange.from.column,
+        selectedRange.to.column,
+      );
+
+      const startCellBox = new RenderBox(this.root.config, {
+        row: startRow,
+        column: startCol,
+      });
+
+      let width = 0;
+      for (let col = startCol; col <= lastCol; col++) {
+        width += this.root.config.columns[col].width;
+      }
+
+      let height = 0;
+      for (let row = startRow; row <= lastRow; row++) {
+        height += this.root.config.rows[row].height;
+      }
+
+      const x = startCellBox.x - this.root.viewport.left;
+      const y = startCellBox.y - this.root.viewport.top;
+
+      return { x, y, height, width };
+    }
+    if (!selectedRange && selectedCell) {
+      const box = new RenderBox(this.root.config, selectedCell);
+      box.x -= this.root.viewport.left;
+      box.y -= this.root.viewport.top;
+      return box;
+    }
+  }
+
+  private renderSelectionRange(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ) {
+    this.ctx.save();
+    this.ctx.strokeStyle = "#7da8ff";
+    this.ctx.lineWidth = 3;
+    this.ctx.strokeRect(x, y, width, height);
+    this.ctx.fillStyle = "#7da8ff35";
+    this.ctx.fillRect(x, y, width, height);
+    this.ctx.restore();
+  }
+
+  renderSelection() {
+    const box = this.getSelectionRange();
+    if (!box) return;
+    const { height, width, x, y } = box;
+    this.renderSelectionRange(x, y, width, height);
+  }
+
  renderSheet() {
    const firstRowIdx = this.root.viewport.firstRow;
    const lastColIdx = this.root.viewport.lastCol + 3;
    const lastRowIdx = this.root.viewport.lastRow + 3;
    const firstColIdx = this.root.viewport.firstCol;

+
    for (let row = firstRowIdx; row <= lastRowIdx; row++) {
      for (let col = firstColIdx; col <= lastColIdx; col++) {
        if (!this.root.config.columns[col] || !this.root.config.rows[row])
@ -65,5 +133,6 @@ export class Sheet {
        this.renderCell({ column: col, row });
      }
    }
+    this.renderSelection();
  }
 }
--- a/src/components/table.ts
+++ b/src/components/table.ts
@ -16,7 +16,7 @@ export class Table {

  changeElementSizes(sizes: ViewProperties) {
    const { height, width } = sizes;
-    this.element.style.width = width + "px";
-    this.element.style.height = height + "px";
+    this.element.style.width = width + this.root.rowsBarWidth + "px";
+    this.element.style.height = height + this.root.columnsBarHeight + "px";
  }
 }
--- a/src/components/toolbar.ts
+++ b/src/components/toolbar.ts
@ -3,6 +3,7 @@ import Spreadsheet, { CSS_PREFIX } from "../main";
 export class Toolbar {
  element: HTMLDivElement;
  root: Spreadsheet;
+  height: number = 0;
  constructor(root: Spreadsheet) {
    this.root = root;
    const toolbarElement = document.createElement("div");
--- a/src/index.ts
+++ b/src/index.ts
@ -1,14 +1,21 @@
-import Spreadsheet from "./main";
+import Spreadsheet, { SpreadsheetConstructorProperties } from "./main";

-const saveButton = document.querySelector("#save_button");
-const loadButton = document.querySelector("#load_button");
+const options: SpreadsheetConstructorProperties = {
+  onCellClick: (event, cell) => {
+    console.log("Cell click", event, cell);
+  },
+  onSelectionChange: (selection) => {
+    console.log("Changed selection: ", selection);
+  },
+  onCellChange(cell) {
+    console.log("Cell changed: ", cell);
+  },
+  onCopy: (range, data, dataAsString) => {
+    console.log("Copy event: ", range, data, dataAsString)
+  }
+};

-if (!saveButton || !loadButton) throw new Error("LOST");
-
-const sheet = new Spreadsheet("#spreadsheet");
-const sheet2 = new Spreadsheet("#spreadsheet_2");
-
-console.log(sheet2);
+const sheet = new Spreadsheet("#spreadsheet", options);

 function saveDataToLS() {
  const serializableData = sheet.serializeData();
@ -22,16 +29,10 @@ function loadDataFromLS() {
  sheet.loadData(json);
 }

+const saveButton = document.querySelector("#save_button");
+const loadButton = document.querySelector("#load_button");
+
+if (!saveButton || !loadButton) throw new Error("LOST");
+
 saveButton.addEventListener("click", saveDataToLS);
 loadButton.addEventListener("click", loadDataFromLS);
-sheet.changeCellStyles(
-  { column: 1, row: 1 },
-  {
-    background: "black",
-    borderColor: "white",
-    fontColor: "white",
-    fontSize: 20,
-    selectedBackground: "green",
-    selectedFontColor: "black",
-  },
-);
--- a/src/main.ts
+++ b/src/main.ts
@ -1,5 +1,4 @@
 import { Editor } from "./components/editor";
-import { Header } from "./components/header";
 import { Scroller } from "./components/scroller";
 import { Sheet } from "./components/sheet";
 import { Table } from "./components/table";
@ -11,7 +10,14 @@ import {
  Position,
  SerializableCell,
 } from "./modules/cell";
-import { Config, ViewProperties } from "./modules/config";
+import {
+  CellChangeEvent,
+  CellClickEvent,
+  Config,
+  CopyEvent,
+  SelectionChangeEvent,
+  ViewProperties,
+} from "./modules/config";
 import { RangeSelectionType, Selection } from "./modules/selection";
 import { Styles } from "./modules/styles";
 import { Viewport } from "./modules/viewport";
@ -20,6 +26,11 @@ import { createSampleData } from "./utils/createData";
 import { Cache, CachedColumn, CachedRow } from "./modules/cache";
 import { Row } from "./modules/row";
 import { Column } from "./modules/column";
+import { ColumnsBar } from "./components/columnsBar";
+import { RowsBar } from "./components/rowsBar";
+import { EventTypes, Events } from "./modules/events";
+import { Clipboard } from "./modules/clipboard";
+import { FormulaParser } from "./modules/formulaParser";

 /*
 ! Component structure
@ -33,9 +44,12 @@ import { Column } from "./modules/column";
    </Table>
 */

-interface SpreadsheetConstructorProperties {
-  config?: Omit<Config, "view">; // Not optional.
+export interface SpreadsheetConstructorProperties {
  view?: ViewProperties;
+  onCellClick?: CellClickEvent | null;
+  onSelectionChange?: SelectionChangeEvent | null;
+  onCellChange?: CellChangeEvent | null;
+  onCopy?: CopyEvent | null
 }

 export const CSS_PREFIX = "modern_sc_";
@ -44,7 +58,8 @@ export default class Spreadsheet {
  private table: Table;
  private scroller: Scroller;
  private toolbar: Toolbar;
-  private header: Header;
+  private rowsBar: RowsBar;
+  private columnsBar: ColumnsBar;
  private sheet: Sheet;
  private editor: Editor;
  public styles: Styles;
@ -53,6 +68,9 @@ export default class Spreadsheet {
  public viewport: Viewport;
  public selection: Selection;
  public cache: Cache;
+  public events: Events;
+  public clipboard: Clipboard;
+  public formulaParser: FormulaParser

  constructor(
    target: string | HTMLElement,
@ -68,12 +86,18 @@ export default class Spreadsheet {
    }

    this.config = new Config(config);
-    this.sheet = new Sheet(this);

+    this.config.onCellClick = props?.onCellClick ?? null;
+    this.config.onSelectonChange = props?.onSelectionChange ?? null;
+    this.config.onCellChange = props?.onCellChange ?? null;
+    this.config.onCopy = props?.onCopy ?? null
+
+    this.rowsBar = new RowsBar(this);
+    this.columnsBar = new ColumnsBar(this);
+    this.sheet = new Sheet(this);
    this.table = new Table(this);
    this.scroller = new Scroller(this);
    this.toolbar = new Toolbar(this);
-    this.header = new Header(this);
    this.editor = new Editor(this);
    this.cache = this.getInitialCache();
    this.viewport = new Viewport(
@ -81,12 +105,34 @@ export default class Spreadsheet {
      this.scroller.getViewportBoundlingRect(),
    );
    this.selection = new Selection();
+    this.events = new Events(this);
+    this.clipboard = new Clipboard(this);
+    this.formulaParser = new FormulaParser(this)

    this.data = data;
    this.styles = new Styles();
    this.buildComponent();
+    this.setElementsPositions();
    this.appendTableToTarget(target);
    this.renderSheet();
+    this.renderColumnsBar();
+    this.renderRowsBar();
+  }
+
+  private setRowsBarPosition() {
+    const top = this.columnsBar.height + this.toolbar.height;
+    const left = 0;
+    this.rowsBar.setElementPosition(top, left);
+  }
+  private setColumnsBarPosition() {
+    const top = this.toolbar.height;
+    const left = this.rowsBar.width;
+    this.columnsBar.setElementPosition(top, left);
+  }
+
+  private setElementsPositions() {
+    this.setRowsBarPosition();
+    this.setColumnsBarPosition();
  }

  private getInitialCache(): Cache {
@ -119,19 +165,21 @@ export default class Spreadsheet {
      rows: cachedRows,
    });

-    console.log("CACHE: ", cache);
-    console.log("CONFIG: ", this.config);
    return cache;
  }

  private buildComponent(): void {
    const content = document.createElement("div"); //* Abstract
-    content.appendChild(this.header.element);
+    content.style.top = this.columnsBarHeight + "px";
+    content.style.left = this.rowsBarWidth + "px";
+
    content.appendChild(this.sheet.element);

    content.classList.add(CSS_PREFIX + "content");

    this.table.element.appendChild(this.toolbar.element);
+    this.table.element.appendChild(this.rowsBar.element);
+    this.table.element.appendChild(this.columnsBar.element);
    this.table.element.appendChild(content);
    this.table.element.appendChild(this.scroller.element);
    this.table.element.append(this.editor.element);
@ -171,6 +219,18 @@ export default class Spreadsheet {
    return this.config.view;
  }

+  get columnsBarHeight() {
+    return this.columnsBar.height;
+  }
+
+  get rowsBarWidth() {
+    return this.rowsBar.width;
+  }
+
+  get toolbarHeight() {
+    return this.toolbar.height;
+  }
+
  /** Focusing on interactive part of spreadsheet */
  focusTable() {
    this.scroller.element.focus();
@ -188,10 +248,19 @@ export default class Spreadsheet {
  changeCellValues(
    position: Position,
    values: Partial<Omit<CellConstructorProps, "position">>,
+    enableCallback: boolean = true
  ) {
    const { column, row } = position;

+
    this.data[row][column].changeValues(values);
+
+    this.events.dispatch({
+      type: EventTypes.CELL_CHANGE,
+      cell: this.data[row][column],
+      enableCallback: enableCallback
+    })
+
    this.renderCell(row, column);
  }

@ -246,17 +315,29 @@ export default class Spreadsheet {
    this.sheet.renderSheet();
  }

+  renderSelection() {
+    this.sheet.renderSelection();
+  }
+
+  renderColumnsBar() {
+    this.columnsBar.renderBar();
+  }
+
+  renderRowsBar() {
+    this.rowsBar.renderBar();
+  }
+
  renderCell(row: number, col: number) {
    this.data[row][col].render(this);
  }

  public loadData(data: Cell[][] | SerializableCell[][]): Spreadsheet {
    const rowsLength = data.length;
-    const colsLength = data[0] ? this.data[0].length : 0;
+    const colsLength = data[0] ? data[0].length : 0;
    this.data = [];

    const formattedData: Cell[][] = [];
-
+    // Transform serialized objects to Cells
    for (let row = 0; row < rowsLength; row++) {
      const innerRow: Cell[] = [];
      for (let col = 0; col < colsLength; col++) {
@ -274,11 +355,17 @@ export default class Spreadsheet {
      formattedData.push(innerRow);
    }

-    this.data = formattedData;
+    const config = this.makeConfigFromData(formattedData, this.config.view);
+    config.onCellChange = this.config.onCellChange
+    config.onCellClick = this.config.onCellClick
+    config.onCopy = this.config.onCopy
+    config.onSelectonChange = this.config.onSelectonChange

+
+    this.data = formattedData;
    this.selection.selectedCell = null;
    this.selection.selectedRange = null;
-    this.config = this.makeConfigFromData(formattedData, this.config.view);
+    this.config = config
    this.cache = this.getInitialCache();
    this.scroller.updateScrollerSize();
    this.viewport = new Viewport(
@ -319,6 +406,7 @@ export default class Spreadsheet {
      view,
      rows,
      columns,
+      onCellClick: null,
    });

    return config;
--- a/src/modules/cache.ts
+++ b/src/modules/cache.ts
@ -44,21 +44,21 @@ export class Cache {
  public getRowByYCoord(y: number): number {
    let rowIdx = 0;
    for (let i = 0; i < this.rows.length; i++) {
-      if (y <= this.rows[i].yPos) {
-        //* Intersection detect
-        rowIdx = i;
+      rowIdx = i
+      if (y <= this.rows[i].yPos) {        //* Intersection detect
        break;
      }
+
    }
+
    return rowIdx;
  }

  public getColumnByXCoord(x: number): number {
    let colIdx = 0;
    for (let i = 0; i < this.columns.length; i++) {
-      if (x <= this.columns[i].xPos) {
-        //* Intersection detect
-        colIdx = i;
+      colIdx = i
+      if (x <= this.columns[i].xPos) {        //* Intersection detect
        break;
      }
    }
--- a/src/modules/cell.ts
+++ b/src/modules/cell.ts
@ -1,4 +1,5 @@
 import Spreadsheet from "../main";
+import { FormulaParser } from "./formulaParser";
 import { RenderBox } from "./renderBox";

 export type CellConstructorProps = {
@ -69,6 +70,9 @@ export class Cell {
  position: Position;
  style: CellStyles | null = null;

+  cellsDependsOnThisCell: Position[] = []
+  dependedFromCells: Position[] = []
+
  constructor(props: CellConstructorProps) {
    this.value = props.value;
    this.displayValue = props.displayValue;
@ -96,50 +100,53 @@ export class Cell {
    Object.assign(this, values);
  }

-  private isCellInRange(root: Spreadsheet): boolean {
-    const { column, row } = this.position;
-    const { selectedRange } = root.selection;
+  evalFormula(parser: FormulaParser) {
+    if (this.value.substring(0, 1) !== '=') return;

-    if (!selectedRange) return false;
-
-    const isCellInRow =
-      row >= Math.min(selectedRange.from.row, selectedRange.to.row) &&
-      row <= Math.max(selectedRange.to.row, selectedRange.from.row);
-    const isCellInCol =
-      column >= Math.min(selectedRange.from.column, selectedRange.to.column) &&
-      column <= Math.max(selectedRange.to.column, selectedRange.from.column);
-
-    return isCellInCol && isCellInRow;
+    this.resultValue = parser.parser.parse(this.value.slice(1), {
+      col: this.position.column,
+      row: this.position.row
+    })
  }

+  // private isCellInRange(root: Spreadsheet): boolean {
+  //   const { column, row } = this.position;
+  //   const { selectedRange } = root.selection;
+
+  //   if (!selectedRange) return false;
+
+  //   const isCellInRow =
+  //     row >= Math.min(selectedRange.from.row, selectedRange.to.row) &&
+  //     row <= Math.max(selectedRange.to.row, selectedRange.from.row);
+  //   const isCellInCol =
+  //     column >= Math.min(selectedRange.from.column, selectedRange.to.column) &&
+  //     column <= Math.max(selectedRange.to.column, selectedRange.from.column);
+
+  //   return isCellInCol && isCellInRow;
+  // }
+
  render(root: Spreadsheet) {
    const renderBox = new RenderBox(root.config, this.position);
-    let {x, y} = renderBox
-    const {height, width} = renderBox
+    let { x, y } = renderBox;
+    const { height, width } = renderBox;
    const { ctx } = root;

-    const isCellSelected =
-      root.selection.selectedCell?.row === this.position.row &&
-      root.selection.selectedCell.column === this.position.column;
-    const isCellInRange = this.isCellInRange(root);
+    // const isCellSelected =
+    //   root.selection.selectedCell?.row === this.position.row &&
+    //   root.selection.selectedCell.column === this.position.column;
+    // const isCellInRange = this.isCellInRange(root);
    y -= root.viewport.top;
    x -= root.viewport.left;

    const styles = this.style ?? root.styles.cells;

    ctx.clearRect(x, y, width, height);
-    ctx.fillStyle =
-      isCellSelected || isCellInRange
-        ? styles.selectedBackground
-        : styles.background;
+    ctx.fillStyle = styles.background;
    ctx.strokeStyle = "black";
    ctx.fillRect(x, y, width - 1, height - 1);
    ctx.strokeRect(x, y, width, height);

-    ctx.fillStyle =
-      isCellSelected || isCellInRange
-        ? styles.selectedFontColor
-        : styles.fontColor;
+    ctx.fillStyle = styles.fontColor;
    ctx.textAlign = "left";
    ctx.font = `${styles.fontSize}px Arial`;
    ctx.textBaseline = "middle";
--- a/src/modules/clipboard.ts
+++ b/src/modules/clipboard.ts
@ -0,0 +1,106 @@
+import Spreadsheet, { RangeSelectionType } from "../main";
+import { Cell, CellConstructorProps, CellStyles, Position } from "./cell";
+import { EventTypes } from "./events";
+
+export class Clipboard {
+  saved: Cell[][] | null = null;
+  root: Spreadsheet;
+  constructor(root: Spreadsheet) {
+    this.root = root;
+  }
+
+  copy(data: Cell[][], range: RangeSelectionType) {
+    const mapedData = data
+      .map((row) => {
+        return row
+          .map((item) => {
+            return item.displayValue;
+          })
+          .join("\t");
+      })
+      .join("\n");
+
+    this.saved = data;
+    navigator.clipboard.writeText(mapedData);
+
+    this.root.events.dispatch({
+      type: EventTypes.COPY_CELLS,
+      data,
+      dataAsString: mapedData,
+      range,
+    });
+  }
+
+  paste(root: Spreadsheet, { column, row }: Position, event: ClipboardEvent) {
+    if (!this.saved) {
+      if (!event.clipboardData) return;
+      const data = event.clipboardData.getData("text");
+      try {
+        const arr = data.split("\n").map((item) => item.split("\t"));
+        const arrayOfCells = arr.map((innerRow) => {
+          return innerRow.map((item) => {
+            const cellProps: CellConstructorProps = {
+              displayValue: item,
+              position: {
+                column,
+                row,
+              },
+              resultValue: item,
+              style: new CellStyles(),
+              value: item,
+            };
+            return new Cell(cellProps);
+          });
+        });
+
+        const rowsLength = arrayOfCells.length;
+        const colsLength = arrayOfCells[0] ? arrayOfCells[0].length : 0;
+
+        for (let i = 0; i < rowsLength; i++) {
+          for (let j = 0; j < colsLength; j++) {
+            const savedCell = arrayOfCells[i][j];
+
+            const position = {
+              column: column + j,
+              row: row + i,
+            };
+
+            const values = {
+              displayValue: savedCell.displayValue,
+              value: savedCell.value,
+              style: savedCell.style,
+            };
+
+            root.changeCellValues(position, values, false);
+          }
+        }
+      } catch (err) {
+        console.error("Cannot read clipboard. ", err);
+      }
+      root.renderSheet();
+      return;
+    }
+
+    const rowsLength = this.saved.length;
+    const colsLength = this.saved[0] ? this.saved[0].length : 0;
+
+    for (let i = 0; i < rowsLength; i++) {
+      for (let j = 0; j < colsLength; j++) {
+        const savedCell = this.saved[i][j];
+
+        const position = {
+          column: column + j,
+          row: row + i,
+        };
+
+        const values = {
+          displayValue: savedCell.displayValue,
+          value: savedCell.value,
+          style: savedCell.style,
+        };
+
+        root.changeCellValues(position, values, false);
+      }
+    }
+  }
+}
--- a/src/modules/config.ts
+++ b/src/modules/config.ts
@ -1,10 +1,20 @@
+import { Cell } from "./cell";
 import { Column } from "./column";
 import { Row } from "./row";
+import { RangeSelectionType, Selection } from "./selection";

 export interface ViewProperties {
  width: number;
  height: number;
 }
+export type CellClickEvent = (event: MouseEvent, cell: Cell) => void;
+export type SelectionChangeEvent = (selection: Selection) => void;
+export type CellChangeEvent = (cell: Cell) => void;
+export type CopyEvent = (
+  range: RangeSelectionType,
+  data: Cell[][],
+  dataAsString: string,
+) => void;

 export type ConfigProperties = {
  /** Please, end it with '_' symbol.
@ -16,6 +26,10 @@ export type ConfigProperties = {
  rows: Row[];
  columns: Column[];
  view: ViewProperties;
+  onCellClick?: CellClickEvent | null;
+  onSelectionChange?: SelectionChangeEvent | null;
+  onCellChange?: CellChangeEvent | null;
+  onCopy?: CopyEvent | null;
 };

 export type SheetConfigConstructorProps = {
@ -30,9 +44,20 @@ export class Config {
    width: 800,
    height: 600,
  };
+
+  onCellClick: CellClickEvent | null = null;
+  onSelectonChange: SelectionChangeEvent | null = null;
+  onCellChange: CellChangeEvent | null = null;
+  onCopy: CopyEvent | null;
+
  constructor(props: ConfigProperties) {
    this.columns = props.columns;
    this.rows = props.rows;
    this.view = props.view;
+
+    this.onCellClick = props.onCellClick ?? null;
+    this.onSelectonChange = props.onSelectionChange ?? null;
+    this.onCellChange = props.onCellChange ?? null;
+    this.onCopy = props.onCopy ?? null;
  }
 }
--- a/src/modules/events.ts
+++ b/src/modules/events.ts
@ -0,0 +1,142 @@
+import { Scroller } from "../components/scroller";
+import Spreadsheet, { Cell, RangeSelectionType, Selection } from "../main";
+
+export enum EventTypes {
+  CELL_CLICK = "CELL_CLICK",
+  SELECTION_CHANGE = "CHANGE_SELECTION",
+  CELL_CHANGE = "CELL_CHANGE",
+  COPY_CELLS = "COPY_CELLS",
+}
+
+export type CellClickEvent = {
+  type: EventTypes.CELL_CLICK;
+  event: MouseEvent;
+  scroller: Scroller;
+};
+
+export type ChangeSelectionEvent = {
+  type: EventTypes.SELECTION_CHANGE;
+  selection: Selection;
+  enableCallback?: boolean;
+};
+
+export type ChangeCellEvent = {
+  type: EventTypes.CELL_CHANGE;
+  cell: Cell;
+  enableCallback?: boolean;
+};
+
+export type CopyAction = {
+  type: EventTypes.COPY_CELLS;
+  range: RangeSelectionType;
+  data: Cell[][];
+  dataAsString: string;
+};
+
+export type ActionTypes =
+  | CellClickEvent
+  | ChangeSelectionEvent
+  | ChangeCellEvent
+  | CopyAction;
+
+
+export class Events {
+  root: Spreadsheet;
+
+  constructor(root: Spreadsheet) {
+    this.root = root;
+  }
+
+  async dispatch(action: ActionTypes) {
+    switch (action.type) {
+      case EventTypes.CELL_CLICK: {
+        const { event, scroller } = action;
+        //
+        //* Here may be side effects
+        //
+        this.cellClick(event, scroller);
+        break;
+      }
+
+      case EventTypes.SELECTION_CHANGE: {
+        const { selection, enableCallback } = action;
+        //
+        //* Here may be side effects
+        //
+        this.changeSelection(selection, enableCallback);
+        break;
+      }
+
+      case EventTypes.CELL_CHANGE: {
+        const { cell, enableCallback } = action;
+        if (cell.value.substring(0, 1).startsWith('=')) {
+          try {
+            await cell.evalFormula(this.root.formulaParser)
+            cell.displayValue = cell.resultValue
+            this.root.renderCell(cell.position.row, cell.position.column)
+            this.changeCellValues(cell, enableCallback);
+            return;
+          }
+          catch (err) {
+            console.error(err)
+          }
+        }
+
+        this.root.renderCell(cell.position.row, cell.position.column)
+        this.changeCellValues(cell, enableCallback);
+        break;
+      }
+
+      case EventTypes.COPY_CELLS: {
+        const { data, dataAsString, range } = action;
+        this.copy(range, data, dataAsString);
+        break;
+      }
+
+      default: {
+        break;
+      }
+    }
+  }
+
+  private cellClick = (event: MouseEvent, scroller: Scroller) => {
+    if (event.button !== 0) return; // Left mouse button
+    const { offsetX, offsetY } = event;
+    const clickedCell = this.root.getCellByCoords(offsetX, offsetY);
+    const cell = this.root.getCell(clickedCell);
+
+    const selection = new Selection();
+    selection.selectedCell = clickedCell;
+    selection.selectedRange = {
+      from: clickedCell,
+      to: clickedCell,
+    };
+
+    scroller.setSelectingMode(true);
+
+    this.changeSelection(selection, true);
+
+    this.root.config.onCellClick?.(event, cell);
+  };
+
+  private changeSelection = (selection: Selection, enableCallback = false) => {
+    this.root.selection = selection;
+
+    if (enableCallback) this.root.config.onSelectonChange?.(selection);
+    this.root.renderSheet();
+    this.root.renderColumnsBar();
+    this.root.renderRowsBar();
+  };
+
+  private changeCellValues(cell: Cell, enableCallback: boolean = true) {
+    if (enableCallback) this.root.config.onCellChange?.(cell);
+  }
+
+  private copy = (
+    range: RangeSelectionType,
+    data: Cell[][],
+    dataAsString: string,
+  ) => {
+    this.root.config.onCopy?.(range, data, dataAsString);
+  };
+}
--- a/src/modules/formulaParser.ts
+++ b/src/modules/formulaParser.ts
@ -0,0 +1,23 @@
+import Parser, { DepParser } from 'fast-formula-parser'
+import Spreadsheet from '../main'
+
+export class FormulaParser {
+    parser: Parser
+    depParser: DepParser
+    root: Spreadsheet
+    constructor(root: Spreadsheet) {
+        this.root = root
+
+        this.parser = new Parser({
+            onCell: ({col, row}) => {
+                const cell = this.root.data[row - 1][col - 1]
+                const cellValue = cell.resultValue.length > 0 ? cell.resultValue : cell.value
+                if( cellValue &&  isNaN(Number(cellValue)) === false) return Number(cellValue)
+                return this.root.data[row - 1][col - 1].resultValue ?? ''
+            },
+        })
+
+        this.depParser = new DepParser({})
+        this.depParser
+    }
+}
--- a/src/modules/renderBox.ts
+++ b/src/modules/renderBox.ts
@ -6,6 +6,7 @@ export class RenderBox {
  y: number;
  width: number;
  height: number;
+
  constructor(config: Config, cellPosition: Position) {
    this.x = this.getXCoord(cellPosition.column, config);
    this.y = this.getYCoord(cellPosition.row, config);
--- a/src/scss/_spreadsheet.scss
+++ b/src/scss/_spreadsheet.scss
@ -1,26 +1,26 @@
 $css_prefix: "modern_sc_";

-.#{$css_prefix}content {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .#{$css_prefix}spreadsheet_container {
  position: relative;
  isolation: isolate;
  border: 2px solid black;
 }

+.#{$css_prefix}content {
+  position: absolute;
+}
+
 .#{$css_prefix}sheet {
  display: block;
  contain: strict;
 }

 .#{$css_prefix}scroller {
+  position: absolute;
  overflow: scroll;
  box-sizing: border-box;
  transform: translateZ(0);
+
  &:focus {
    outline: none;
  }
--- a/src/types/fast-formula-parser.d.ts
+++ b/src/types/fast-formula-parser.d.ts
@ -0,0 +1,68 @@
+declare module 'fast-formula-parser' {
+    export type PositionWithSheet = {
+        sheet?: string
+        row: number
+        col: number
+    }
+
+    export type FunctionArgument = {
+        isArray: boolean
+        isCellRef: boolean
+        isRangeRef: boolean
+        value: string | number
+    }
+
+    export type Position = {
+        col: number
+        row: number
+    }
+
+    export type RangeReference = {
+        sheet?: string
+        from: Position,
+        to: Position
+    }
+
+    export type Config = {
+        functions?: Record<string, (...args: FunctionArgument[]) => string>
+        functionsNeedContext?: (context: Parser, ...args: FunctionArgument[]) => string
+        onCell?: (position: PositionWithSheet) => number | string
+        onRange?: (ref) => Array<string|number>[]
+        onVariable?: (name: string, sheetName: string) => RangeReference
+    }
+
+    export const Types = {
+        NUMBER: 0,
+        ARRAY: 1,
+        BOOLEAN: 2,
+        STRING: 3,
+        RANGE_REF: 4, // can be 'A:C' or '1:4', not only 'A1:C3'
+        CELL_REF: 5,
+        COLLECTIONS: 6, // Unions of references
+        NUMBER_NO_BOOLEAN: 10,
+    };
+
+    export const Factorials: number[]
+
+    export default class Parser {
+        constructor(config: Config)
+        parse: (expression: string, position: PositionWithSheet) => string
+        parseAsync: (expression: string, position: PositionWithSheet) => Promise<string>
+
+    }
+
+
+    type FormulaHelpersType = {
+        accept: (param: FunctionArgument, type?: number, defValue?: number | string, flat?: boolean, allowSingleValue?: boolean) => number | string
+        type: (variable) => number
+        isRangeRef: (param) => boolean
+        isCellRef: (param) => boolean 
+    }
+
+    export class DepParser {
+        constructor(config?: {onVariable?: (name: string, sheetName: string) => RangeReference})
+        parse(expression: string, position: PositionWithSheet): PositionWithSheet[]
+    }
+
+    export const FormulaHelpers: FormulaHelpersType
+}
--- a/src/utils/position.ts
+++ b/src/utils/position.ts
@ -0,0 +1,20 @@
+import { BaseSelectionType, RangeSelectionType } from "../main";
+
+export function checkEqualRanges(
+  range1: RangeSelectionType,
+  range2: RangeSelectionType,
+) {
+  const equalRows = range1.from.row === range2.to.row;
+  const equalColumns = range1.from.column === range2.to.column;
+
+  return equalRows && equalColumns;
+}
+
+export function checkEqualCellSelections(
+  selection1: BaseSelectionType,
+  selection2: BaseSelectionType,
+) {
+  return (
+    selection1.column === selection2.column && selection1.row === selection2.row
+  );
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -5,7 +5,7 @@
    "types": ["vite/client", "node"],
    "allowJs": false,
    "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,14 +2,16 @@ import { defineConfig } from "vite";
 import path from "path";
 import typescript from "@rollup/plugin-typescript";
 import { typescriptPaths } from "rollup-plugin-typescript-paths";
-import { fileURLToPath } from "node:url";

-export default defineConfig({
+const BROWSER_MODE = process.env.BUILD_BROWSER === 'true';
+console.log({ BROWSER_MODE });
+
+const libConfig = defineConfig({
  base: "/modern_spreadsheet/",
  plugins: [],
  resolve: {},
  server: {
-    port: 3000,
+    port: 5179,
    open: true,
  },
  build: {
@ -37,3 +39,23 @@ export default defineConfig({
    },
  },
 });
+
+const browserConfig = defineConfig({
+  base: "/modern_spreadsheet/",
+  resolve: {},
+  build: {
+    manifest: true,
+    minify: true,
+    reportCompressedSize: true,
+    sourcemap: true,
+    lib: {
+      entry: path.resolve(__dirname, 'index.html'),
+      fileName: 'demo',
+      formats: ['es']
+    }
+  }
+})
+
+const config = BROWSER_MODE ? browserConfig : libConfig;
+
+export default config;
Author	SHA1	Message	Date
Eugene	41bae423c3	add config	2023-11-10 17:48:19 +03:00
Eugene	47f2163124	Added multiply config for component DEMO and lib mode.	2023-11-10 17:48:15 +03:00
Eugene	ae0f8b49e6	Added excel formula support Not reactive now.	2023-07-28 19:30:59 +03:00
Eugene	c26c166295	Fixed bugs in Chrome browser Fixed on load data config listeners reassigning	2023-07-27 15:54:36 +03:00
Eugene	cddfc134f8	Formatted & Linted Dist update Updated version of spreadsheet	2023-07-27 12:45:53 +03:00
Eugene	1e2847f7f2	Removed unused console logs	2023-07-27 12:45:53 +03:00
Eugene Antonenkov	d8c5e4343f	Update README.md	2023-07-27 12:24:46 +03:00
Eugene Antonenkov	997e8f086b	Update README.md	2023-07-27 12:23:59 +03:00
Eugene	6dc20f92e7	Updated styles Updated README	2023-07-27 12:22:15 +03:00
Eugene	8aed4c81b9	Fixed some render bugs	2023-07-27 11:54:06 +03:00
Eugene	ca67d409d5	Added selection highlight with alpha	2023-07-27 11:42:51 +03:00
Eugene Antonenkov	8bdaff0521	Merge pull request #1 from yazmeyaa/clipboard Clipboard	2023-07-27 00:31:52 +03:00
Eugene	651fea95e4	Dist update	2023-07-26 21:43:46 +03:00
Eugene	954b3b8260	Linted&fromatted	2023-07-26 21:43:22 +03:00
Eugene	022435103b	Added copy&paste support Added copy event	2023-07-26 21:42:27 +03:00
Eugene	3a1367a901	Dist update	2023-07-26 15:19:26 +03:00
Eugene	fc9a0df38d	Linted & Formatted project	2023-07-26 15:18:56 +03:00
Eugene	322378904c	Added "Cell change" event	2023-07-26 15:08:47 +03:00
Eugene	8596220e85	Added click on cell event Added selection change event	2023-07-26 14:29:51 +03:00
Eugene	9dd64b9a77	Little styles fixes for columns and rows bars	2023-07-26 11:05:43 +03:00
Eugene	50b3c3986f	Updated package version	2023-07-25 23:59:34 +03:00
Eugene	35cb54e23e	dist update	2023-07-25 23:58:11 +03:00
Eugene	06dd0a0cdf	Linted code	2023-07-25 23:57:19 +03:00
Eugene	0f277badb9	Fixed view of col&row bars	2023-07-25 23:54:25 +03:00
Eugene	22e238087c	Fixed rects	2023-07-25 23:54:25 +03:00
Eugene	53e081435b	Added rows bar	2023-07-25 23:54:25 +03:00
Eugene	1ef3ae3de4	Added new component ColumnsBar Added render of ColumnsBar methods Added selection condition render styling	2023-07-25 23:54:24 +03:00
Eugene	c34d913619	Readme update	2023-07-25 17:29:27 +03:00