Dist update

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;

dist/main.d.ts

@@ -1,13 +1,16 @@
 import { Cell, CellConstructorProps, CellStyles, Position, SerializableCell } from "./modules/cell";
-import { Config, ViewProperties } from "./modules/config";
+import { CellChangeEvent, CellClickEvent, Config, 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 { Cache } from "./modules/cache";
-interface SpreadsheetConstructorProperties {
+import { Events } from "./modules/events";
-    config?: Omit<Config, "view">;
+export interface SpreadsheetConstructorProperties {
     view?: ViewProperties;
+    onCellClick?: CellClickEvent | null;
+    onSelectionChange?: SelectionChangeEvent | null;
+    onCellChange?: CellChangeEvent | null;
 }
 export declare const CSS_PREFIX = "modern_sc_";
 export default class Spreadsheet {
@@ -24,6 +27,7 @@ export default class Spreadsheet {
     viewport: Viewport;
     selection: Selection;
     cache: Cache;
+    events: Events;
     constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties);
     private setRowsBarPosition;
     private setColumnsBarPosition;

dist/main.js

@@ -1,7 +1,54 @@
 var R = Object.defineProperty;
-var v = (n, t, e) => t in n ? R(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var k = (r, t, e) => t in r ? R(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var s = (n, t, e) => (v(n, typeof t != "symbol" ? t + "" : t, e), e);
+var s = (r, t, e) => (k(r, typeof t != "symbol" ? t + "" : t, e), e);
-class w {
+var a;
+(function(r) {
+  r.CELL_CLICK = "CELL_CLICK", r.SELECTION_CHANGE = "CHANGE_SELECTION", r.CELL_CHANGE = "CELL_CHANGE";
+})(a || (a = {}));
+class E {
+  constructor(t) {
+    s(this, "root");
+    s(this, "cellClick", (t, e) => {
+      var c, d;
+      if (t.button !== 0)
+        return;
+      const { offsetX: o, offsetY: l } = t, i = this.root.getCellByCoords(o, l), n = this.root.getCell(i), h = new p();
+      h.selectedCell = i, h.selectedRange = {
+        from: i,
+        to: i
+      }, e.setSelectingMode(!0), this.changeSelection(h, !0), (d = (c = this.root.config).onCellClick) == null || d.call(c, t, n);
+    });
+    s(this, "changeSelection", (t, e = !1) => {
+      var o, l;
+      this.root.selection = t, e && ((l = (o = this.root.config).onSelectonChange) == null || l.call(o, t)), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
+    });
+    this.root = t;
+  }
+  dispatch(t) {
+    switch (t.type) {
+      case a.CELL_CLICK: {
+        const { event: e, scroller: o } = t;
+        this.cellClick(e, o);
+        break;
+      }
+      case a.SELECTION_CHANGE: {
+        const { selection: e, enableCallback: o } = t;
+        this.changeSelection(e, o);
+        break;
+      }
+      case a.CELL_CHANGE: {
+        const { cell: e, values: o } = t;
+        this.changeCellValues(e, o);
+        break;
+      }
+    }
+  }
+  changeCellValues(t, e) {
+    var o, l;
+    this.root.changeCellValues(t.position, e), (l = (o = this.root.config).onCellChange) == null || l.call(o, t);
+  }
+}
+class g {
   constructor(t, e) {
     s(this, "x");
     s(this, "y");
@@ -11,18 +58,18 @@ class w {
   }
   getXCoord(t, e) {
     let o = 0;
-    for (let i = 0; i < t; i++)
+    for (let l = 0; l < t; l++)
-      o += e.columns[i].width;
+      o += e.columns[l].width;
     return o;
   }
   getYCoord(t, e) {
     let o = 0;
-    for (let i = 0; i < t; i++)
+    for (let l = 0; l < t; l++)
-      o += e.rows[i].height;
+      o += e.rows[l].height;
     return o;
   }
 }
-class S {
+class B {
   constructor(t) {
     s(this, "element");
     s(this, "root");
@@ -33,12 +80,19 @@ class S {
           this.hide();
           break;
         }
-        case "Enter":
+        case "Enter": {
-          this.root.changeCellValues(this.root.selection.selectedCell, {
+          if (!this.root.selection.selectedCell)
+            return;
+          this.root.events.dispatch({
+            type: a.CELL_CHANGE,
+            cell: this.root.getCell(this.root.selection.selectedCell),
+            values: {
               value: this.element.value,
               displayValue: this.element.value
+            }
           }), this.hide();
         }
+      }
     });
     s(this, "handleClickOutside", (t) => {
       const e = t.target;
@@ -46,17 +100,20 @@ class S {
     });
     this.root = t;
     const e = document.createElement("input");
-    e.classList.add(a + "editor"), this.element = e, this.hide();
+    e.classList.add(u + "editor"), this.element = e, this.hide();
   }
   hide() {
     this.element.style.display = "none", this.element.classList.add("hide"), this.element.blur(), window.removeEventListener("click", this.handleClickOutside), this.element.removeEventListener("keydown", this.handleKeydown), this.root.focusTable();
   }
   show(t, e) {
-    const { height: o, width: i, x: r, y: l } = new w(this.root.config, t), h = this.root.getCell(t);
+    const { height: o, width: l, x: i, y: n } = new g(this.root.config, t), h = this.root.getCell(t);
-    this.element.classList.remove("hide"), this.element.style.top = l - this.root.viewport.top + this.root.columnsBarHeight + "px", this.element.style.left = r - this.root.viewport.left + this.root.rowsBarWidth + "px", this.element.style.width = i + "px", this.element.style.height = o + "px", this.element.style.display = "block", window.addEventListener("click", this.handleClickOutside), this.element.addEventListener("keydown", this.handleKeydown), this.element.value = e || h.value, this.element.focus(), e || this.element.select();
+    this.element.classList.remove("hide"), this.element.style.top = n - this.root.viewport.top + this.root.columnsBarHeight + "px", this.element.style.left = i - this.root.viewport.left + this.root.rowsBarWidth + "px", this.element.style.width = l + "px", this.element.style.height = o + "px", this.element.style.display = "block", window.addEventListener("click", this.handleClickOutside), this.element.addEventListener("keydown", this.handleKeydown), this.element.value = e || h.value, this.element.focus(), e || this.element.select();
   }
 }
-class b {
+function f(r, t) {
+  return r.column === t.column && r.row === t.row;
+}
+class L {
   constructor(t) {
     s(this, "element");
     s(this, "verticalScroller");
@@ -66,11 +123,22 @@ class b {
     s(this, "handleMouseMove", (t) => {
       if (!this.isSelecting)
         return;
-      const { offsetX: e, offsetY: o } = t, i = this.root.getCellByCoords(e, o);
+      const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o);
-      this.root.selection.selectedRange && (this.root.selection.selectedRange.to = i), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
+      let i = !1;
+      this.root.selection.selectedRange && (i = !f(this.root.selection.selectedRange.to, l), i && (this.root.selection.selectedRange.to = l, this.root.events.dispatch({
+        type: a.SELECTION_CHANGE,
+        selection: this.root.selection,
+        enableCallback: !0
+      })));
     });
     s(this, "handleMouseUp", () => {
-      this.isSelecting = !1, this.root.selection.selectedRange && this.root.selection.selectedRange.from.row === this.root.selection.selectedRange.to.row && this.root.selection.selectedRange.from.column === this.root.selection.selectedRange.to.column && (this.root.selection.selectedRange = null), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
+      this.isSelecting = !1;
+      const t = { ...this.root.selection };
+      this.root.selection.selectedRange && f(this.root.selection.selectedRange.from, this.root.selection.selectedRange.to) && (t.selectedRange = null, this.root.events.dispatch({
+        type: a.SELECTION_CHANGE,
+        selection: t,
+        enableCallback: !1
+      })), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
     });
     s(this, "handleDoubleClick", (t) => {
       t.preventDefault();
@@ -78,25 +146,31 @@ class b {
       this.root.showEditor(e);
     });
     s(this, "handleKeydown", (t) => {
-      if (console.log(t), ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t.key))
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t.key)) {
         switch (t.preventDefault(), this.root.selection.selectedRange = null, t.key) {
           case "ArrowLeft": {
-            this.root.selection.selectedCell && this.root.selection.selectedCell.column > 0 && (console.log("tick"), this.root.selection.selectedCell.column -= 1, this.root.renderSheet());
+            this.root.selection.selectedCell && this.root.selection.selectedCell.column > 0 && (this.root.selection.selectedCell.column -= 1);
             break;
           }
           case "ArrowRight": {
-            this.root.selection.selectedCell && this.root.selection.selectedCell.column < this.root.config.columns.length - 1 && (this.root.selection.selectedCell.column += 1, this.root.renderSheet());
+            this.root.selection.selectedCell && this.root.selection.selectedCell.column < this.root.config.columns.length - 1 && (this.root.selection.selectedCell.column += 1);
             break;
           }
           case "ArrowUp": {
-            this.root.selection.selectedCell && this.root.selection.selectedCell.row > 0 && (this.root.selection.selectedCell.row -= 1, this.root.renderSheet());
+            this.root.selection.selectedCell && this.root.selection.selectedCell.row > 0 && (this.root.selection.selectedCell.row -= 1);
             break;
           }
           case "ArrowDown": {
-            this.root.selection.selectedCell && this.root.selection.selectedCell.row < this.root.config.rows.length - 1 && (this.root.selection.selectedCell.row += 1, this.root.renderSheet());
+            this.root.selection.selectedCell && this.root.selection.selectedCell.row < this.root.config.rows.length - 1 && (this.root.selection.selectedCell.row += 1);
             break;
           }
         }
+        this.root.events.dispatch({
+          type: a.SELECTION_CHANGE,
+          selection: this.root.selection,
+          enableCallback: !0
+        });
+      }
       const e = /^([a-z]|[а-я])$/;
       if (!t.metaKey && !t.ctrlKey) {
         const o = e.test(t.key.toLowerCase());
@@ -109,34 +183,35 @@ class b {
       t.key === "Delete" && (t.preventDefault(), this.root.deleteSelectedCellsValues(), this.root.renderSheet());
     });
     s(this, "handleClick", (t) => {
-      if (t.button !== 0)
+      this.root.events.dispatch({
-        return;
+        type: a.CELL_CLICK,
-      const { offsetX: e, offsetY: o } = t, i = this.root.getCellByCoords(e, o);
+        event: t,
-      this.isSelecting = !0, this.root.selection.selectedRange = {
+        scroller: this
-        from: i,
+      });
-        to: i
-      }, this.root.selection.selectedCell = i, this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
     });
     s(this, "handleScroll", () => {
       const t = this.getViewportBoundlingRect();
       this.root.viewport.updateValues(t), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
     });
     this.root = t;
-    const { horizontalScroller: e, scroller: o, verticalScroller: i } = this.buildComponent();
+    const { horizontalScroller: e, scroller: o, verticalScroller: l } = this.buildComponent();
-    this.element = o, this.verticalScroller = i, this.horizontalScroller = e, 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(), this.element.addEventListener("scroll", this.handleScroll), this.element.addEventListener("mousedown", this.handleClick), this.element.addEventListener("mousemove", this.handleMouseMove), this.element.addEventListener("mouseup", this.handleMouseUp), this.element.addEventListener("dblclick", this.handleDoubleClick), this.element.addEventListener("keydown", this.handleKeydown);
+    this.element = o, this.verticalScroller = l, this.horizontalScroller = e, 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(), this.element.addEventListener("scroll", this.handleScroll), this.element.addEventListener("mousedown", this.handleClick), this.element.addEventListener("mousemove", this.handleMouseMove), this.element.addEventListener("mouseup", this.handleMouseUp), this.element.addEventListener("dblclick", this.handleDoubleClick), this.element.addEventListener("keydown", this.handleKeydown);
+  }
+  setSelectingMode(t) {
+    this.isSelecting = t;
   }
   getViewportBoundlingRect() {
-    const { scrollTop: t, scrollLeft: e } = this.element, { height: o, width: i } = this.element.getBoundingClientRect(), r = t + o, l = e + i;
+    const { scrollTop: t, scrollLeft: e } = this.element, { height: o, width: l } = this.element.getBoundingClientRect(), i = t + o, n = e + l;
     return {
       top: t,
       left: e,
-      bottom: r,
+      bottom: i,
-      right: l
+      right: n
     };
   }
   buildComponent() {
-    const t = document.createElement("div"), e = document.createElement("div"), o = document.createElement("div"), i = document.createElement("div"), r = document.createElement("div");
+    const t = document.createElement("div"), e = document.createElement("div"), o = document.createElement("div"), l = document.createElement("div"), i = document.createElement("div");
-    return e.style.width = "0px", e.style.pointerEvents = "none", o.style.pointerEvents = "none", i.style.display = "flex", r.appendChild(e), r.appendChild(o), i.appendChild(r), this.verticalScroller = e, this.horizontalScroller = o, t.appendChild(i), t.classList.add(a + "scroller"), { scroller: t, verticalScroller: e, horizontalScroller: o };
+    return e.style.width = "0px", e.style.pointerEvents = "none", o.style.pointerEvents = "none", l.style.display = "flex", i.appendChild(e), i.appendChild(o), l.appendChild(i), this.verticalScroller = e, this.horizontalScroller = o, t.appendChild(l), t.classList.add(u + "scroller"), { scroller: t, verticalScroller: e, horizontalScroller: o };
   }
   getActualHeight() {
     return this.root.config.rows.reduce((t, e) => (t += e.height, t), 0);
@@ -155,7 +230,7 @@ class b {
     this.horizontalScroller.style.width = t + "px";
   }
 }
-class B {
+class I {
   constructor(t) {
     s(this, "fontSize", 16);
     s(this, "fontColor", "black");
@@ -166,14 +241,14 @@ class B {
     t && Object.assign(this, t);
   }
 }
-class k {
+class V {
   constructor(t, e) {
     s(this, "row");
     s(this, "column");
     this.row = t, this.column = e;
   }
 }
-class E {
+class A {
   constructor(t) {
     s(this, "value");
     s(this, "displayValue");
@@ -183,7 +258,7 @@ class E {
     this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style;
   }
 }
-class C {
+class y {
   constructor(t) {
     /** True value (data) */
     s(this, "value");
@@ -196,7 +271,7 @@ class C {
     this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style;
   }
   getSerializableCell() {
-    return new E({
+    return new A({
       displayValue: this.displayValue,
       position: this.position,
       resultValue: this.resultValue,
@@ -211,76 +286,76 @@ class C {
     Object.assign(this, t);
   }
   isCellInRange(t) {
-    const { column: e, row: o } = this.position, { selectedRange: i } = t.selection;
+    const { column: e, row: o } = this.position, { selectedRange: l } = t.selection;
-    if (!i)
+    if (!l)
       return !1;
-    const r = o >= Math.min(i.from.row, i.to.row) && o <= Math.max(i.to.row, i.from.row);
+    const i = o >= Math.min(l.from.row, l.to.row) && o <= Math.max(l.to.row, l.from.row);
-    return e >= Math.min(i.from.column, i.to.column) && e <= Math.max(i.to.column, i.from.column) && r;
+    return e >= Math.min(l.from.column, l.to.column) && e <= Math.max(l.to.column, l.from.column) && i;
   }
   render(t) {
-    var g;
+    var C;
-    const e = new w(t.config, this.position);
+    const e = new g(t.config, this.position);
-    let { x: o, y: i } = e;
+    let { x: o, y: l } = e;
-    const { height: r, width: l } = e, { ctx: h } = t, c = ((g = t.selection.selectedCell) == null ? void 0 : g.row) === this.position.row && t.selection.selectedCell.column === this.position.column, u = this.isCellInRange(t);
+    const { height: i, width: n } = e, { ctx: h } = t, c = ((C = t.selection.selectedCell) == null ? void 0 : C.row) === this.position.row && t.selection.selectedCell.column === this.position.column, d = this.isCellInRange(t);
-    i -= t.viewport.top, o -= t.viewport.left;
+    l -= t.viewport.top, o -= t.viewport.left;
-    const d = this.style ?? t.styles.cells;
+    const w = this.style ?? t.styles.cells;
-    h.clearRect(o, i, l, r), h.fillStyle = c || u ? d.selectedBackground : d.background, h.strokeStyle = "black", h.fillRect(o, i, l - 1, r - 1), h.strokeRect(o, i, l, r), h.fillStyle = c || u ? d.selectedFontColor : d.fontColor, h.textAlign = "left", h.font = `${d.fontSize}px Arial`, h.textBaseline = "middle", h.fillText(this.displayValue, o + 2, i + r / 2);
+    h.clearRect(o, l, n, i), h.fillStyle = c || d ? w.selectedBackground : w.background, h.strokeStyle = "black", h.fillRect(o, l, n - 1, i - 1), h.strokeRect(o, l, n, i), h.fillStyle = c || d ? w.selectedFontColor : w.fontColor, h.textAlign = "left", h.font = `${w.fontSize}px Arial`, h.textBaseline = "middle", h.fillText(this.displayValue, o + 2, l + i / 2);
   }
 }
-class V {
+class P {
   constructor(t) {
     s(this, "element");
     s(this, "ctx");
     s(this, "root");
     this.root = t;
     const e = document.createElement("canvas");
-    e.classList.add(a + "sheet"), e.height = this.root.config.view.height, e.width = this.root.config.view.width, e.style.width = this.root.config.view.width + "px", e.style.height = this.root.config.view.height + "px", e.style.left = "0px", this.element = e;
+    e.classList.add(u + "sheet"), e.height = this.root.config.view.height, e.width = this.root.config.view.width, e.style.width = this.root.config.view.width + "px", e.style.height = this.root.config.view.height + "px", e.style.left = "0px", this.element = e;
     const o = this.element.getContext("2d");
     if (!o)
       throw new Error("Enable hardware acceleration");
     this.ctx = o;
   }
   getCellByCoords(t, e) {
-    let o = 0, i = 0;
+    let o = 0, l = 0;
-    for (; i <= e && (i += this.root.config.rows[o].height, !(i >= e)); )
+    for (; l <= e && (l += this.root.config.rows[o].height, !(l >= e)); )
       o++;
-    let r = 0, l = 0;
+    let i = 0, n = 0;
-    for (; l <= t && (l += this.root.config.columns[r].width, !(l >= t)); )
+    for (; n <= t && (n += this.root.config.columns[i].width, !(n >= t)); )
-      r++;
+      i++;
-    return new k(o, r);
+    return new V(o, i);
   }
   renderCell(t) {
     const { column: e, row: o } = t;
     this.root.data[o][e].render(this.root);
   }
   renderSheet() {
-    const t = this.root.viewport.firstRow, e = this.root.viewport.lastCol + 3, o = this.root.viewport.lastRow + 3, i = this.root.viewport.firstCol;
+    const t = this.root.viewport.firstRow, e = this.root.viewport.lastCol + 3, o = this.root.viewport.lastRow + 3, l = this.root.viewport.firstCol;
-    for (let r = t; r <= o; r++)
+    for (let i = t; i <= o; i++)
-      for (let l = i; l <= e && !(!this.root.config.columns[l] || !this.root.config.rows[r]); l++)
+      for (let n = l; n <= e && !(!this.root.config.columns[n] || !this.root.config.rows[i]); n++)
-        this.renderCell({ column: l, row: r });
+        this.renderCell({ column: n, row: i });
   }
 }
-class I {
+class T {
   constructor(t) {
     s(this, "element");
     s(this, "root");
     this.root = t;
     const e = document.createElement("div");
-    e.classList.add(a + "spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps);
+    e.classList.add(u + "spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps);
   }
   changeElementSizes(t) {
     const { height: e, width: o } = t;
     this.element.style.width = o + this.root.rowsBarWidth + "px", this.element.style.height = e + this.root.columnsBarHeight + "px";
   }
 }
-class L {
+class H {
   constructor(t) {
     s(this, "element");
     s(this, "root");
     s(this, "height", 0);
     this.root = t;
     const e = document.createElement("div");
-    e.classList.add(a + "toolbar"), this.element = e;
+    e.classList.add(u + "toolbar"), this.element = e;
   }
 }
 class m {
@@ -291,22 +366,25 @@ class m {
       width: 800,
       height: 600
     });
-    this.columns = t.columns, this.rows = t.rows, this.view = t.view;
+    s(this, "onCellClick", null);
+    s(this, "onSelectonChange", null);
+    s(this, "onCellChange", null);
+    this.columns = t.columns, this.rows = t.rows, this.view = t.view, this.onCellClick = t.onCellClick ?? null, this.onSelectonChange = t.onSelectionChange ?? null, this.onCellChange = t.onCellChange ?? null;
   }
 }
-class P {
+class p {
   constructor() {
     s(this, "selectedCell", null);
     s(this, "selectedRange", null);
   }
 }
-class T {
+class M {
   constructor() {
     s(this, "cells");
-    this.cells = new B();
+    this.cells = new I();
   }
 }
-class f {
+class x {
   constructor(t, e) {
     s(this, "root");
     s(this, "top");
@@ -345,57 +423,57 @@ class f {
     return this.root.cache.getColumnByXCoord(this.right);
   }
 }
-class x {
+class S {
   constructor(t) {
     s(this, "width");
     s(this, "title");
     this.width = t.width, this.title = t.title;
   }
 }
-class p {
+class v {
   constructor(t) {
     s(this, "height");
     s(this, "title");
     this.height = t.height, this.title = t.title;
   }
 }
-function y(n, t, e = !1) {
+function b(r, t, e = !1) {
   const o = [];
-  for (let i = 0; i <= n; i++) {
+  for (let l = 0; l <= r; l++) {
-    const r = [];
+    const i = [];
-    for (let l = 0; l <= t; l++) {
+    for (let n = 0; n <= t; n++) {
-      const h = e ? `${i}:${l}` : "", c = new C({
+      const h = e ? `${l}:${n}` : "", c = new y({
         displayValue: h,
         resultValue: h,
         value: h,
         position: {
-          column: l,
+          column: n,
-          row: i
+          row: l
         },
         style: null
       });
-      r.push(c);
+      i.push(c);
     }
-    o.push(r);
+    o.push(i);
   }
   return o;
 }
-function A(n, t) {
+function z(r, t) {
   const e = [];
-  for (let r = 0; r <= n; r++) {
+  for (let i = 0; i <= r; i++) {
-    const l = new p({
+    const n = new v({
       height: 40,
-      title: String(r)
+      title: String(i)
     });
-    e.push(l);
+    e.push(n);
   }
   const o = [];
-  for (let r = 0; r <= t; r++) {
+  for (let i = 0; i <= t; i++) {
-    const l = new x({
+    const n = new S({
-      title: String(r),
+      title: String(i),
       width: 150
     });
-    o.push(l);
+    o.push(n);
   }
   return new m({
     columns: o,
@@ -406,25 +484,25 @@ function A(n, t) {
     }
   });
 }
-function X(n, t) {
+function K(r, t) {
-  const e = y(n, t), o = A(n, t);
+  const e = b(r, t), o = z(r, t);
   return { data: e, config: o };
 }
-class M {
+class D {
   constructor(t) {
     s(this, "xPos");
     s(this, "colIdx");
     this.xPos = t.xPos, this.colIdx = t.colIdx;
   }
 }
-class z {
+class _ {
   constructor(t) {
     s(this, "yPos");
     s(this, "rowIdx");
     this.yPos = t.yPos, this.rowIdx = t.rowIdx;
   }
 }
-class D {
+class N {
   constructor(t) {
     s(this, "columns");
     s(this, "rows");
@@ -449,11 +527,11 @@ class D {
     return e;
   }
 }
-class H {
+class F {
   constructor(t) {
     s(this, "element");
     s(this, "root");
-    s(this, "height", 32);
+    s(this, "height", 35);
     s(this, "width");
     // private resizerWidth = 1;
     s(this, "ctx");
@@ -483,17 +561,17 @@ class H {
   //     return x
   // }
   renderText(t, e) {
-    const { width: o, x: i } = e;
+    const { width: o, x: l } = e;
-    this.ctx.fillStyle = "black", this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.ctx.font = "16px Arial", this.ctx.fillText(this.root.config.columns[t].title, i + o / 2 - this.root.viewport.left, 0 + this.height / 2);
+    this.ctx.fillStyle = "black", this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.ctx.font = "12px Arial", this.ctx.fillText(this.root.config.columns[t].title, l + o / 2 - this.root.viewport.left, 0 + this.height / 2);
   }
   renderRect(t, e) {
-    const { width: o, x: i } = e, r = this.isColumnSelected(t);
+    const { width: o, x: l } = e, i = this.isColumnSelected(t);
-    this.ctx.fillStyle = r ? this.root.styles.cells.selectedBackground : "white", this.ctx.strokeStyle = "black", this.ctx.lineWidth = 1;
+    this.ctx.fillStyle = i ? this.root.styles.cells.selectedBackground : "white", this.ctx.strokeStyle = "black", this.ctx.lineWidth = 1;
-    const l = i - this.root.viewport.left;
+    const n = l - this.root.viewport.left;
-    this.ctx.fillRect(l - 1, 0, o, this.height), this.ctx.strokeRect(l - 1, 0, o, this.height);
+    this.ctx.fillRect(n - 1, 0, o, this.height), this.ctx.strokeRect(n - 1, 0, o, this.height);
   }
   renderSingleColumn(t) {
-    const e = new w(this.root.config, {
+    const e = new g(this.root.config, {
       row: 0,
       column: t
     });
@@ -506,12 +584,12 @@ class H {
       this.renderSingleColumn(o);
   }
 }
-class F {
+class W {
   constructor(t) {
     s(this, "element");
     s(this, "ctx");
     s(this, "root");
-    s(this, "width", 30);
+    s(this, "width", 35);
     s(this, "height");
     s(this, "resizerHeight", 1);
     this.root = t, this.element = this.createElement();
@@ -532,17 +610,17 @@ class F {
     return e && e.row === t ? !0 : o ? t >= Math.min(o.from.row, o.to.row) && t <= Math.max(o.from.row, o.to.row) : !1;
   }
   renderText(t, e) {
-    const { y: o, height: i } = e;
+    const { y: o, height: l } = e;
-    this.ctx.fillStyle = "black", this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.ctx.font = "16px Arial", this.ctx.fillText(this.root.config.rows[t].title, this.width / 2, o - this.root.viewport.top + i / 2);
+    this.ctx.fillStyle = "black", this.ctx.textAlign = "center", this.ctx.textBaseline = "middle", this.ctx.font = "12px Arial", this.ctx.fillText(this.root.config.rows[t].title, this.width / 2, o - this.root.viewport.top + l / 2);
   }
   renderRect(t, e) {
-    const { y: o, height: i } = e, r = this.isRowSelected(t);
+    const { y: o, height: l } = e, i = this.isRowSelected(t);
-    this.ctx.fillStyle = r ? this.root.styles.cells.selectedBackground : "white", this.ctx.strokeStyle = "black", this.ctx.lineWidth = this.resizerHeight;
+    this.ctx.fillStyle = i ? this.root.styles.cells.selectedBackground : "white", this.ctx.strokeStyle = "black", this.ctx.lineWidth = this.resizerHeight;
-    const l = o - this.root.viewport.top;
+    const n = o - this.root.viewport.top;
-    this.ctx.fillRect(0, l - 1, this.width, i), this.ctx.strokeRect(0, l - 1, this.width, i);
+    this.ctx.fillRect(0, n - 1, this.width, l), this.ctx.strokeRect(0, n - 1, this.width, l);
   }
   renderSingleRow(t) {
-    const e = new w(this.root.config, {
+    const e = new g(this.root.config, {
       column: 0,
       row: t
     });
@@ -555,8 +633,8 @@ class F {
       this.renderSingleRow(o);
   }
 }
-const a = "modern_sc_";
+const u = "modern_sc_";
-class Y {
+class G {
   constructor(t, e) {
     s(this, "table");
     s(this, "scroller");
@@ -571,8 +649,9 @@ class Y {
     s(this, "viewport");
     s(this, "selection");
     s(this, "cache");
-    const o = y(40, 40), i = this.makeConfigFromData(o, (e == null ? void 0 : e.view) ?? { height: 600, width: 800 });
+    s(this, "events");
-    e != null && e.view && (i.view = e.view), this.config = new m(i), this.rowsBar = new F(this), this.columnsBar = new H(this), this.sheet = new V(this), this.table = new I(this), this.scroller = new b(this), this.toolbar = new L(this), this.editor = new S(this), this.cache = this.getInitialCache(), this.viewport = new f(this, this.scroller.getViewportBoundlingRect()), this.selection = new P(), this.data = o, this.styles = new T(), this.buildComponent(), this.setElementsPositions(), this.appendTableToTarget(t), this.renderSheet(), this.renderColumnsBar(), this.renderRowsBar();
+    const o = b(40, 40), l = this.makeConfigFromData(o, (e == null ? void 0 : e.view) ?? { height: 600, width: 800 });
+    e != null && e.view && (l.view = e.view), this.config = new m(l), this.config.onCellClick = (e == null ? void 0 : e.onCellClick) ?? null, this.config.onSelectonChange = (e == null ? void 0 : e.onSelectionChange) ?? null, this.config.onCellChange = (e == null ? void 0 : e.onCellChange) ?? null, this.rowsBar = new W(this), this.columnsBar = new F(this), this.sheet = new P(this), this.table = new T(this), this.scroller = new L(this), this.toolbar = new H(this), this.editor = new B(this), this.cache = this.getInitialCache(), this.viewport = new x(this, this.scroller.getViewportBoundlingRect()), this.selection = new p(), this.events = new E(this), this.data = o, this.styles = new M(), this.buildComponent(), this.setElementsPositions(), this.appendTableToTarget(t), this.renderSheet(), this.renderColumnsBar(), this.renderRowsBar();
   }
   setRowsBarPosition() {
     const t = this.columnsBar.height + this.toolbar.height, e = 0;
@@ -588,35 +667,35 @@ class Y {
   getInitialCache() {
     const t = [];
     let e = 0;
-    for (let l = 0; l <= this.config.columns.length - 1; l++) {
+    for (let n = 0; n <= this.config.columns.length - 1; n++) {
-      const h = this.config.columns[l];
+      const h = this.config.columns[n];
       e += h.width;
-      const c = new M({
+      const c = new D({
         xPos: e,
-        colIdx: l
+        colIdx: n
       });
       t.push(c);
     }
     const o = [];
-    let i = 0;
+    let l = 0;
-    for (let l = 0; l <= this.config.rows.length - 1; l++) {
+    for (let n = 0; n <= this.config.rows.length - 1; n++) {
-      const h = this.config.rows[l];
+      const h = this.config.rows[n];
-      i += h.height;
+      l += h.height;
-      const c = new z({
+      const c = new _({
-        yPos: i,
+        yPos: l,
-        rowIdx: l
+        rowIdx: n
       });
       o.push(c);
     }
-    const r = new D({
+    const i = new N({
       columns: t,
       rows: o
     });
-    return console.log("CACHE: ", r), console.log("CONFIG: ", this.config), r;
+    return console.log("CACHE: ", i), console.log("CONFIG: ", this.config), i;
   }
   buildComponent() {
     const t = document.createElement("div");
-    t.style.top = this.columnsBarHeight + "px", t.style.left = this.rowsBarWidth + "px", t.appendChild(this.sheet.element), t.classList.add(a + "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(t), this.table.element.appendChild(this.scroller.element), this.table.element.append(this.editor.element);
+    t.style.top = this.columnsBarHeight + "px", t.style.left = this.rowsBarWidth + "px", t.appendChild(this.sheet.element), t.classList.add(u + "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(t), this.table.element.appendChild(this.scroller.element), this.table.element.append(this.editor.element);
   }
   /**Destroy spreadsheet DOM element.
    *
@@ -666,19 +745,19 @@ class Y {
     return this.data[o][e];
   }
   changeCellValues(t, e) {
-    const { column: o, row: i } = t;
+    const { column: o, row: l } = t;
-    this.data[i][o].changeValues(e), this.renderCell(i, o);
+    this.data[l][o].changeValues(e), this.renderCell(l, o);
   }
   changeCellStyles(t, e) {
-    const { column: o, row: i } = t;
+    const { column: o, row: l } = t;
-    this.data[i][o].changeStyles(e), this.renderCell(i, o);
+    this.data[l][o].changeStyles(e), this.renderCell(l, o);
   }
   applyActionToRange(t, e) {
-    const o = Math.min(t.from.row, t.to.row), i = Math.max(t.from.row, t.to.row), r = Math.min(t.from.column, t.to.column), l = Math.max(t.from.column, t.to.column);
+    const o = Math.min(t.from.row, t.to.row), l = Math.max(t.from.row, t.to.row), i = Math.min(t.from.column, t.to.column), n = Math.max(t.from.column, t.to.column);
-    for (let h = o; h <= i; h++)
+    for (let h = o; h <= l; h++)
-      for (let c = r; c <= l; c++) {
+      for (let c = i; c <= n; c++) {
-        const u = this.data[h][c];
+        const d = this.data[h][c];
-        e(u);
+        e(d);
       }
   }
   deleteSelectedCellsValues() {
@@ -718,12 +797,12 @@ class Y {
   loadData(t) {
     const e = t.length, o = t[0] ? this.data[0].length : 0;
     this.data = [];
-    const i = [];
-    for (let r = 0; r < e; r++) {
     const l = [];
+    for (let i = 0; i < e; i++) {
+      const n = [];
       for (let h = 0; h < o; h++) {
-        const c = t[r][h];
+        const c = t[i][h];
-        l.push(new C({
+        n.push(new y({
           displayValue: c.displayValue,
           position: c.position,
           resultValue: c.resultValue,
@@ -731,59 +810,60 @@ class Y {
           style: c.style
         }));
       }
-      i.push(l);
+      l.push(n);
     }
-    return this.data = i, this.selection.selectedCell = null, this.selection.selectedRange = null, this.config = this.makeConfigFromData(i, this.config.view), this.cache = this.getInitialCache(), this.scroller.updateScrollerSize(), this.viewport = new f(this, this.scroller.getViewportBoundlingRect()), this.renderSheet(), this;
+    return this.data = l, this.selection.selectedCell = null, this.selection.selectedRange = null, this.config = this.makeConfigFromData(l, this.config.view), this.cache = this.getInitialCache(), this.scroller.updateScrollerSize(), this.viewport = new x(this, this.scroller.getViewportBoundlingRect()), this.renderSheet(), this;
   }
   makeConfigFromData(t, e) {
-    const o = t.length - 1, i = t[0] ? t[0].length : 0, r = [];
+    const o = t.length - 1, l = t[0] ? t[0].length : 0, i = [];
     for (let c = 0; c < o; c++)
-      r.push(new p({
+      i.push(new v({
         height: 40,
         title: String(c)
       }));
-    const l = [];
+    const n = [];
-    for (let c = 0; c < i; c++)
+    for (let c = 0; c < l; c++)
-      l.push(new x({
+      n.push(new S({
         width: 150,
         title: String(c)
       }));
     return new m({
       view: e,
-      rows: r,
+      rows: i,
-      columns: l
+      columns: n,
+      onCellClick: null
     });
   }
   serializeData() {
     const t = this.data.length, e = this.data[0] ? this.data[0].length : 0, o = [];
-    for (let i = 0; i < t; i++) {
+    for (let l = 0; l < t; l++) {
-      const r = [];
+      const i = [];
-      for (let l = 0; l < e; l++)
+      for (let n = 0; n < e; n++)
-        r.push(this.data[i][l].getSerializableCell());
+        i.push(this.data[l][n].getSerializableCell());
-      o.push(r);
+      o.push(i);
     }
     return o;
   }
 }
 export {
-  a as CSS_PREFIX,
+  u as CSS_PREFIX,
-  D as Cache,
+  N as Cache,
-  M as CachedColumn,
+  D as CachedColumn,
-  z as CachedRow,
+  _ as CachedRow,
-  C as Cell,
+  y as Cell,
-  B as CellStyles,
+  I as CellStyles,
-  x as Column,
+  S as Column,
   m as Config,
-  k as Position,
+  V as Position,
-  w as RenderBox,
+  g as RenderBox,
-  p as Row,
+  v as Row,
-  P as Selection,
+  p as Selection,
-  E as SerializableCell,
+  A as SerializableCell,
-  T as Styles,
+  M as Styles,
-  f as Viewport,
+  x as Viewport,
-  A as createSampleConfig,
+  z as createSampleConfig,
-  y as createSampleData,
+  b as createSampleData,
-  Y as default,
+  G as default,
-  X as makeSpreadsheetConfigAndData
+  K as makeSpreadsheetConfigAndData
 };
 //# sourceMappingURL=main.js.map

dist/modules/config.d.ts

@@ -1,9 +1,14 @@
+import { Cell } from "./cell";
 import { Column } from "./column";
 import { Row } from "./row";
+import { 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 ConfigProperties = {
     /** Please, end it with '_' symbol.
      *
@@ -14,6 +19,9 @@ export type ConfigProperties = {
     rows: Row[];
     columns: Column[];
     view: ViewProperties;
+    onCellClick?: CellClickEvent | null;
+    onSelectionChange?: SelectionChangeEvent | null;
+    onCellChange?: CellChangeEvent | null;
 };
 export type SheetConfigConstructorProps = {
     rows: Row[];
@@ -23,5 +31,8 @@ export declare class Config {
     rows: Row[];
     columns: Column[];
     view: ViewProperties;
+    onCellClick: ((event: MouseEvent, cell: Cell) => void) | null;
+    onSelectonChange: SelectionChangeEvent | null;
+    onCellChange: CellChangeEvent | null;
     constructor(props: ConfigProperties);
 }

dist/modules/events.d.ts

@@ -0,0 +1,31 @@
+import { Scroller } from "../components/scroller";
+import Spreadsheet, { Cell, CellConstructorProps, Selection } from "../main";
+export declare enum EventTypes {
+    CELL_CLICK = "CELL_CLICK",
+    SELECTION_CHANGE = "CHANGE_SELECTION",
+    CELL_CHANGE = "CELL_CHANGE"
+}
+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;
+    values: Partial<Omit<CellConstructorProps, "position">>;
+};
+export type ActionTypes = CellClickEvent | ChangeSelectionEvent | ChangeCellEvent;
+export declare class Events {
+    root: Spreadsheet;
+    constructor(root: Spreadsheet);
+    dispatch(action: ActionTypes): void;
+    private cellClick;
+    private changeSelection;
+    private changeCellValues;
+}

dist/style.css

@@ -1 +1 @@
-body{padding:0;margin:0}.modern_sc_content{position:absolute}.modern_sc_spreadsheet_container{position:relative;isolation:isolate;border:2px solid black}.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}
+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}

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;