yazmeyaa
/
modern_spreadsheet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dist update

This commit is contained in:
Eugene 2023-07-26 21:43:46 +03:00
parent 954b3b8260
commit 651fea95e4
8 changed files with 256 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/main.cjs vendored
View File

File diff suppressed because one or more lines are too long

2
dist/main.cjs.map vendored
View File

File diff suppressed because one or more lines are too long

7
dist/main.d.ts vendored
View File

@ -1,16 +1,18 @@
import { Cell, CellConstructorProps, CellStyles, Position, SerializableCell } from "./modules/cell"; import { Cell, CellConstructorProps, CellStyles, Position, SerializableCell } from "./modules/cell";
import { CellChangeEvent, CellClickEvent, Config, SelectionChangeEvent, ViewProperties } from "./modules/config"; import { CellChangeEvent, CellClickEvent, Config, CopyEvent, SelectionChangeEvent, ViewProperties } from "./modules/config";
import { RangeSelectionType, Selection } from "./modules/selection"; import { RangeSelectionType, Selection } from "./modules/selection";
import { Styles } from "./modules/styles"; import { Styles } from "./modules/styles";
import { Viewport } from "./modules/viewport"; import { Viewport } from "./modules/viewport";
import "./scss/main.scss"; import "./scss/main.scss";
import { Cache } from "./modules/cache"; import { Cache } from "./modules/cache";
import { Events } from "./modules/events"; import { Events } from "./modules/events";
import { Clipboard } from "./modules/clipboard";
export interface SpreadsheetConstructorProperties { export interface SpreadsheetConstructorProperties {
view?: ViewProperties; view?: ViewProperties;
onCellClick?: CellClickEvent | null; onCellClick?: CellClickEvent | null;
onSelectionChange?: SelectionChangeEvent | null; onSelectionChange?: SelectionChangeEvent | null;
onCellChange?: CellChangeEvent | null; onCellChange?: CellChangeEvent | null;
onCopy?: CopyEvent | null;
} }
export declare const CSS_PREFIX = "modern_sc_"; export declare const CSS_PREFIX = "modern_sc_";
export default class Spreadsheet { export default class Spreadsheet {
@ -28,6 +30,7 @@ export default class Spreadsheet {
selection: Selection; selection: Selection;
cache: Cache; cache: Cache;
events: Events; events: Events;
clipboard: Clipboard;
constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties); constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties);
private setRowsBarPosition; private setRowsBarPosition;
private setColumnsBarPosition; private setColumnsBarPosition;
@ -53,7 +56,7 @@ export default class Spreadsheet {
focusTable(): void; focusTable(): void;
getCellByCoords(x: number, y: number): Position; getCellByCoords(x: number, y: number): Position;
getCell(position: Position): Cell; 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; changeCellStyles(position: Position, styles: CellStyles): void;
applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => void): void; applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => void): void;
deleteSelectedCellsValues(): void; deleteSelectedCellsValues(): void;

329
dist/main.js vendored
View File

@ -1,54 +1,63 @@
var R = Object.defineProperty; var I = Object.defineProperty;
var k = (r, t, e) => t in r ? R(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e; var A = (r, t, e) => t in r ? I(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
var s = (r, t, e) => (k(r, typeof t != "symbol" ? t + "" : t, e), e); var s = (r, t, e) => (A(r, typeof t != "symbol" ? t + "" : t, e), e);
var a; var d;
(function(r) { (function(r) {
r.CELL_CLICK = "CELL_CLICK", r.SELECTION_CHANGE = "CHANGE_SELECTION", r.CELL_CHANGE = "CELL_CHANGE"; r.CELL_CLICK = "CELL_CLICK", r.SELECTION_CHANGE = "CHANGE_SELECTION", r.CELL_CHANGE = "CELL_CHANGE", r.COPY_CELLS = "COPY_CELLS";
})(a || (a = {})); })(d || (d = {}));
class E { class P {
constructor(t) { constructor(t) {
s(this, "root"); s(this, "root");
s(this, "cellClick", (t, e) => { s(this, "cellClick", (t, e) => {
var c, d; var c, a;
if (t.button !== 0) if (t.button !== 0)
return; return;
const { offsetX: o, offsetY: l } = t, i = this.root.getCellByCoords(o, l), n = this.root.getCell(i), h = new p(); const { offsetX: o, offsetY: l } = t, i = this.root.getCellByCoords(o, l), n = this.root.getCell(i), h = new v();
h.selectedCell = i, h.selectedRange = { h.selectedCell = i, h.selectedRange = {
from: i, from: i,
to: i to: i
}, e.setSelectingMode(!0), this.changeSelection(h, !0), (d = (c = this.root.config).onCellClick) == null || d.call(c, t, n); }, e.setSelectingMode(!0), this.changeSelection(h, !0), (a = (c = this.root.config).onCellClick) == null || a.call(c, t, n);
}); });
s(this, "changeSelection", (t, e = !1) => { s(this, "changeSelection", (t, e = !1) => {
var o, l; 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.selection = t, e && ((l = (o = this.root.config).onSelectonChange) == null || l.call(o, t)), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
}); });
s(this, "copy", (t, e, o) => {
var l, i;
(i = (l = this.root.config).onCopy) == null || i.call(l, t, e, o);
});
this.root = t; this.root = t;
} }
dispatch(t) { dispatch(t) {
switch (t.type) { switch (t.type) {
case a.CELL_CLICK: { case d.CELL_CLICK: {
const { event: e, scroller: o } = t; const { event: e, scroller: o } = t;
this.cellClick(e, o); this.cellClick(e, o);
break; break;
} }
case a.SELECTION_CHANGE: { case d.SELECTION_CHANGE: {
const { selection: e, enableCallback: o } = t; const { selection: e, enableCallback: o } = t;
this.changeSelection(e, o); this.changeSelection(e, o);
break; break;
} }
case a.CELL_CHANGE: { case d.CELL_CHANGE: {
const { cell: e, values: o } = t; const { cell: e, enableCallback: o } = t;
this.changeCellValues(e, o); this.changeCellValues(e, o);
break; break;
} }
case d.COPY_CELLS: {
const { data: e, dataAsString: o, range: l } = t;
this.copy(l, e, o);
break;
}
} }
} }
changeCellValues(t, e) { changeCellValues(t, e = !0) {
var o, l; var o, l;
this.root.changeCellValues(t.position, e), (l = (o = this.root.config).onCellChange) == null || l.call(o, t); e && ((l = (o = this.root.config).onCellChange) == null || l.call(o, t));
} }
} }
class g { class y {
constructor(t, e) { constructor(t, e) {
s(this, "x"); s(this, "x");
s(this, "y"); s(this, "y");
@ -69,7 +78,7 @@ class g {
return o; return o;
} }
} }
class B { class T {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "root"); s(this, "root");
@ -83,13 +92,12 @@ class B {
case "Enter": { case "Enter": {
if (!this.root.selection.selectedCell) if (!this.root.selection.selectedCell)
return; return;
this.root.events.dispatch({ this.root.changeCellValues(this.root.selection.selectedCell, {
type: a.CELL_CHANGE,
cell: this.root.getCell(this.root.selection.selectedCell),
values: {
value: this.element.value, value: this.element.value,
displayValue: this.element.value displayValue: this.element.value
} }), this.root.events.dispatch({
type: d.CELL_CHANGE,
cell: this.root.getCell(this.root.selection.selectedCell)
}), this.hide(); }), this.hide();
} }
} }
@ -100,20 +108,20 @@ class B {
}); });
this.root = t; this.root = t;
const e = document.createElement("input"); const e = document.createElement("input");
e.classList.add(u + "editor"), this.element = e, this.hide(); e.classList.add(m + "editor"), this.element = e, this.hide();
} }
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(); 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) { show(t, e) {
const { height: o, width: l, x: i, y: n } = new g(this.root.config, t), h = this.root.getCell(t); const { height: o, width: l, x: i, y: n } = new y(this.root.config, t), h = this.root.getCell(t);
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(); 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();
} }
} }
function f(r, t) { function b(r, t) {
return r.column === t.column && r.row === t.row; return r.column === t.column && r.row === t.row;
} }
class L { class H {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "verticalScroller"); s(this, "verticalScroller");
@ -125,8 +133,8 @@ class L {
return; return;
const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o); const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o);
let i = !1; 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({ this.root.selection.selectedRange && (i = !b(this.root.selection.selectedRange.to, l), i && (this.root.selection.selectedRange.to = l, this.root.events.dispatch({
type: a.SELECTION_CHANGE, type: d.SELECTION_CHANGE,
selection: this.root.selection, selection: this.root.selection,
enableCallback: !0 enableCallback: !0
}))); })));
@ -134,8 +142,8 @@ class L {
s(this, "handleMouseUp", () => { s(this, "handleMouseUp", () => {
this.isSelecting = !1; this.isSelecting = !1;
const t = { ...this.root.selection }; 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({ this.root.selection.selectedRange && b(this.root.selection.selectedRange.from, this.root.selection.selectedRange.to) && (t.selectedRange = null, this.root.events.dispatch({
type: a.SELECTION_CHANGE, type: d.SELECTION_CHANGE,
selection: t, selection: t,
enableCallback: !1 enableCallback: !1
})), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar(); })), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
@ -166,12 +174,12 @@ class L {
} }
} }
this.root.events.dispatch({ this.root.events.dispatch({
type: a.SELECTION_CHANGE, type: d.SELECTION_CHANGE,
selection: this.root.selection, selection: this.root.selection,
enableCallback: !0 enableCallback: !0
}); });
} }
const e = /^([a-z]|[а-я])$/; const e = /^([a-z]|[а-я]|[0-9])$/;
if (!t.metaKey && !t.ctrlKey) { if (!t.metaKey && !t.ctrlKey) {
const o = e.test(t.key.toLowerCase()); const o = e.test(t.key.toLowerCase());
if (t.key === "F2" || o) { if (t.key === "F2" || o) {
@ -180,11 +188,30 @@ class L {
this.root.showEditor(this.root.selection.selectedCell, o ? t.key : void 0); this.root.showEditor(this.root.selection.selectedCell, o ? t.key : void 0);
} }
} }
t.key === "Delete" && (t.preventDefault(), this.root.deleteSelectedCellsValues(), this.root.renderSheet()); if (t.key === "Delete" && (t.preventDefault(), this.root.deleteSelectedCellsValues(), this.root.renderSheet()), t.metaKey || t.ctrlKey) {
if (console.log(t.code), t.code === "KeyC") {
let o;
const l = new v();
if (this.root.selection.selectedRange) {
const { from: i, to: n } = this.root.selection.selectedRange;
l.selectedRange = this.root.selection.selectedRange, o = [...this.root.data.slice(i.row, n.row + 1).map((a) => a.slice(i.column, n.column + 1))];
} else if (this.root.selection.selectedCell) {
const { column: i, row: n } = this.root.selection.selectedCell;
o = [[this.root.data[n][i]]], l.selectedRange = {
from: this.root.selection.selectedCell,
to: this.root.selection.selectedCell
};
} else
return;
this.root.clipboard.copy(o, l.selectedRange);
return;
}
t.code;
}
}); });
s(this, "handleClick", (t) => { s(this, "handleClick", (t) => {
this.root.events.dispatch({ this.root.events.dispatch({
type: a.CELL_CLICK, type: d.CELL_CLICK,
event: t, event: t,
scroller: this scroller: this
}); });
@ -195,7 +222,9 @@ class L {
}); });
this.root = t; this.root = t;
const { horizontalScroller: e, scroller: o, verticalScroller: l } = this.buildComponent(); const { horizontalScroller: e, scroller: o, verticalScroller: l } = this.buildComponent();
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); 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), this.element.addEventListener("paste", (i) => {
this.root.selection.selectedCell && this.root.clipboard.paste(this.root, this.root.selection.selectedCell, i);
});
} }
setSelectingMode(t) { setSelectingMode(t) {
this.isSelecting = t; this.isSelecting = t;
@ -211,7 +240,7 @@ class L {
} }
buildComponent() { buildComponent() {
const t = document.createElement("div"), e = document.createElement("div"), o = document.createElement("div"), l = document.createElement("div"), i = 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", 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 }; 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.contentEditable = "false", t.classList.add(m + "scroller"), { scroller: t, verticalScroller: e, horizontalScroller: o };
} }
getActualHeight() { getActualHeight() {
return this.root.config.rows.reduce((t, e) => (t += e.height, t), 0); return this.root.config.rows.reduce((t, e) => (t += e.height, t), 0);
@ -230,7 +259,7 @@ class L {
this.horizontalScroller.style.width = t + "px"; this.horizontalScroller.style.width = t + "px";
} }
} }
class I { class R {
constructor(t) { constructor(t) {
s(this, "fontSize", 16); s(this, "fontSize", 16);
s(this, "fontColor", "black"); s(this, "fontColor", "black");
@ -241,14 +270,14 @@ class I {
t && Object.assign(this, t); t && Object.assign(this, t);
} }
} }
class V { class M {
constructor(t, e) { constructor(t, e) {
s(this, "row"); s(this, "row");
s(this, "column"); s(this, "column");
this.row = t, this.column = e; this.row = t, this.column = e;
} }
} }
class A { class _ {
constructor(t) { constructor(t) {
s(this, "value"); s(this, "value");
s(this, "displayValue"); s(this, "displayValue");
@ -258,7 +287,7 @@ class A {
this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style; this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style;
} }
} }
class y { class x {
constructor(t) { constructor(t) {
/** True value (data) */ /** True value (data) */
s(this, "value"); s(this, "value");
@ -271,7 +300,7 @@ class y {
this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style; this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style;
} }
getSerializableCell() { getSerializableCell() {
return new A({ return new _({
displayValue: this.displayValue, displayValue: this.displayValue,
position: this.position, position: this.position,
resultValue: this.resultValue, resultValue: this.resultValue,
@ -294,22 +323,22 @@ class y {
} }
render(t) { render(t) {
var C; var C;
const e = new g(t.config, this.position); const e = new y(t.config, this.position);
let { x: o, y: l } = e; let { x: o, y: l } = e;
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); 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, a = this.isCellInRange(t);
l -= t.viewport.top, o -= t.viewport.left; l -= t.viewport.top, o -= t.viewport.left;
const w = this.style ?? t.styles.cells; const u = this.style ?? t.styles.cells;
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); h.clearRect(o, l, n, i), h.fillStyle = c || a ? u.selectedBackground : u.background, h.strokeStyle = "black", h.fillRect(o, l, n - 1, i - 1), h.strokeRect(o, l, n, i), h.fillStyle = c || a ? u.selectedFontColor : u.fontColor, h.textAlign = "left", h.font = `${u.fontSize}px Arial`, h.textBaseline = "middle", h.fillText(this.displayValue, o + 2, l + i / 2);
} }
} }
class P { class D {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "ctx"); s(this, "ctx");
s(this, "root"); s(this, "root");
this.root = t; this.root = t;
const e = document.createElement("canvas"); const e = document.createElement("canvas");
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; e.classList.add(m + "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"); const o = this.element.getContext("2d");
if (!o) if (!o)
throw new Error("Enable hardware acceleration"); throw new Error("Enable hardware acceleration");
@ -322,7 +351,7 @@ class P {
let i = 0, n = 0; let i = 0, n = 0;
for (; n <= t && (n += this.root.config.columns[i].width, !(n >= t)); ) for (; n <= t && (n += this.root.config.columns[i].width, !(n >= t)); )
i++; i++;
return new V(o, i); return new M(o, i);
} }
renderCell(t) { renderCell(t) {
const { column: e, row: o } = t; const { column: e, row: o } = t;
@ -335,30 +364,30 @@ class P {
this.renderCell({ column: n, row: i }); this.renderCell({ column: n, row: i });
} }
} }
class T { class z {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "root"); s(this, "root");
this.root = t; this.root = t;
const e = document.createElement("div"); const e = document.createElement("div");
e.classList.add(u + "spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps); e.classList.add(m + "spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps);
} }
changeElementSizes(t) { changeElementSizes(t) {
const { height: e, width: o } = 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"; this.element.style.width = o + this.root.rowsBarWidth + "px", this.element.style.height = e + this.root.columnsBarHeight + "px";
} }
} }
class H { class N {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "root"); s(this, "root");
s(this, "height", 0); s(this, "height", 0);
this.root = t; this.root = t;
const e = document.createElement("div"); const e = document.createElement("div");
e.classList.add(u + "toolbar"), this.element = e; e.classList.add(m + "toolbar"), this.element = e;
} }
} }
class m { class p {
constructor(t) { constructor(t) {
s(this, "rows"); s(this, "rows");
s(this, "columns"); s(this, "columns");
@ -369,22 +398,23 @@ class m {
s(this, "onCellClick", null); s(this, "onCellClick", null);
s(this, "onSelectonChange", null); s(this, "onSelectonChange", null);
s(this, "onCellChange", 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; s(this, "onCopy");
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, this.onCopy = t.onCopy ?? null;
} }
} }
class p { class v {
constructor() { constructor() {
s(this, "selectedCell", null); s(this, "selectedCell", null);
s(this, "selectedRange", null); s(this, "selectedRange", null);
} }
} }
class M { class O {
constructor() { constructor() {
s(this, "cells"); s(this, "cells");
this.cells = new I(); this.cells = new R();
} }
} }
class x { class S {
constructor(t, e) { constructor(t, e) {
s(this, "root"); s(this, "root");
s(this, "top"); s(this, "top");
@ -423,26 +453,26 @@ class x {
return this.root.cache.getColumnByXCoord(this.right); return this.root.cache.getColumnByXCoord(this.right);
} }
} }
class S { class E {
constructor(t) { constructor(t) {
s(this, "width"); s(this, "width");
s(this, "title"); s(this, "title");
this.width = t.width, this.title = t.title; this.width = t.width, this.title = t.title;
} }
} }
class v { class k {
constructor(t) { constructor(t) {
s(this, "height"); s(this, "height");
s(this, "title"); s(this, "title");
this.height = t.height, this.title = t.title; this.height = t.height, this.title = t.title;
} }
} }
function b(r, t, e = !1) { function B(r, t, e = !1) {
const o = []; const o = [];
for (let l = 0; l <= r; l++) { for (let l = 0; l <= r; l++) {
const i = []; const i = [];
for (let n = 0; n <= t; n++) { for (let n = 0; n <= t; n++) {
const h = e ? `${l}:${n}` : "", c = new y({ const h = e ? `${l}:${n}` : "", c = new x({
displayValue: h, displayValue: h,
resultValue: h, resultValue: h,
value: h, value: h,
@ -458,10 +488,10 @@ function b(r, t, e = !1) {
} }
return o; return o;
} }
function z(r, t) { function K(r, t) {
const e = []; const e = [];
for (let i = 0; i <= r; i++) { for (let i = 0; i <= r; i++) {
const n = new v({ const n = new k({
height: 40, height: 40,
title: String(i) title: String(i)
}); });
@ -469,13 +499,13 @@ function z(r, t) {
} }
const o = []; const o = [];
for (let i = 0; i <= t; i++) { for (let i = 0; i <= t; i++) {
const n = new S({ const n = new E({
title: String(i), title: String(i),
width: 150 width: 150
}); });
o.push(n); o.push(n);
} }
return new m({ return new p({
columns: o, columns: o,
rows: e, rows: e,
view: { view: {
@ -484,25 +514,25 @@ function z(r, t) {
} }
}); });
} }
function K(r, t) { function U(r, t) {
const e = b(r, t), o = z(r, t); const e = B(r, t), o = K(r, t);
return { data: e, config: o }; return { data: e, config: o };
} }
class D { class F {
constructor(t) { constructor(t) {
s(this, "xPos"); s(this, "xPos");
s(this, "colIdx"); s(this, "colIdx");
this.xPos = t.xPos, this.colIdx = t.colIdx; this.xPos = t.xPos, this.colIdx = t.colIdx;
} }
} }
class _ { class W {
constructor(t) { constructor(t) {
s(this, "yPos"); s(this, "yPos");
s(this, "rowIdx"); s(this, "rowIdx");
this.yPos = t.yPos, this.rowIdx = t.rowIdx; this.yPos = t.yPos, this.rowIdx = t.rowIdx;
} }
} }
class N { class Y {
constructor(t) { constructor(t) {
s(this, "columns"); s(this, "columns");
s(this, "rows"); s(this, "rows");
@ -527,7 +557,7 @@ class N {
return e; return e;
} }
} }
class F { class G {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "root"); s(this, "root");
@ -571,7 +601,7 @@ class F {
this.ctx.fillRect(n - 1, 0, o, this.height), this.ctx.strokeRect(n - 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) { renderSingleColumn(t) {
const e = new g(this.root.config, { const e = new y(this.root.config, {
row: 0, row: 0,
column: t column: t
}); });
@ -584,7 +614,7 @@ class F {
this.renderSingleColumn(o); this.renderSingleColumn(o);
} }
} }
class W { class X {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "ctx"); s(this, "ctx");
@ -620,7 +650,7 @@ class W {
this.ctx.fillRect(0, n - 1, this.width, l), this.ctx.strokeRect(0, n - 1, this.width, l); this.ctx.fillRect(0, n - 1, this.width, l), this.ctx.strokeRect(0, n - 1, this.width, l);
} }
renderSingleRow(t) { renderSingleRow(t) {
const e = new g(this.root.config, { const e = new y(this.root.config, {
column: 0, column: 0,
row: t row: t
}); });
@ -633,8 +663,76 @@ class W {
this.renderSingleRow(o); this.renderSingleRow(o);
} }
} }
const u = "modern_sc_"; class j {
class G { constructor(t) {
s(this, "saved", null);
s(this, "root");
this.root = t;
}
copy(t, e) {
const o = t.map((l) => l.map((i) => i.displayValue).join(" ")).join(`
`);
this.saved = t, navigator.clipboard.writeText(o), this.root.events.dispatch({
type: d.COPY_CELLS,
data: t,
dataAsString: o,
range: e
});
}
paste(t, { column: e, row: o }, l) {
if (!this.saved) {
if (!l.clipboardData)
return;
const h = l.clipboardData.getData("text");
try {
const a = h.split(`
`).map((w) => w.split(" ")).map((w) => w.map((g) => {
const f = {
displayValue: g,
position: {
column: e,
row: o
},
resultValue: g,
style: new R(),
value: g
};
return new x(f);
})), u = a.length, C = a[0] ? a[0].length : 0;
for (let w = 0; w < u; w++)
for (let g = 0; g < C; g++) {
const f = a[w][g], L = {
column: e + g,
row: o + w
}, V = {
displayValue: f.displayValue,
value: f.value,
style: f.style
};
t.changeCellValues(L, V, !1);
}
} catch (c) {
console.error("Cannot read clipboard. ", c);
}
return;
}
const i = this.saved.length, n = this.saved[0] ? this.saved[0].length : 0;
for (let h = 0; h < i; h++)
for (let c = 0; c < n; c++) {
const a = this.saved[h][c], u = {
column: e + c,
row: o + h
}, C = {
displayValue: a.displayValue,
value: a.value,
style: a.style
};
t.changeCellValues(u, C, !1);
}
}
}
const m = "modern_sc_";
class q {
constructor(t, e) { constructor(t, e) {
s(this, "table"); s(this, "table");
s(this, "scroller"); s(this, "scroller");
@ -650,8 +748,9 @@ class G {
s(this, "selection"); s(this, "selection");
s(this, "cache"); s(this, "cache");
s(this, "events"); s(this, "events");
const o = b(40, 40), l = this.makeConfigFromData(o, (e == null ? void 0 : e.view) ?? { height: 600, width: 800 }); s(this, "clipboard");
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(); 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 p(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.config.onCopy = (e == null ? void 0 : e.onCopy) ?? null, this.rowsBar = new X(this), this.columnsBar = new G(this), this.sheet = new D(this), this.table = new z(this), this.scroller = new H(this), this.toolbar = new N(this), this.editor = new T(this), this.cache = this.getInitialCache(), this.viewport = new S(this, this.scroller.getViewportBoundlingRect()), this.selection = new v(), this.events = new P(this), this.clipboard = new j(this), this.data = o, this.styles = new O(), this.buildComponent(), this.setElementsPositions(), this.appendTableToTarget(t), this.renderSheet(), this.renderColumnsBar(), this.renderRowsBar();
} }
setRowsBarPosition() { setRowsBarPosition() {
const t = this.columnsBar.height + this.toolbar.height, e = 0; const t = this.columnsBar.height + this.toolbar.height, e = 0;
@ -670,7 +769,7 @@ class G {
for (let n = 0; n <= this.config.columns.length - 1; n++) { for (let n = 0; n <= this.config.columns.length - 1; n++) {
const h = this.config.columns[n]; const h = this.config.columns[n];
e += h.width; e += h.width;
const c = new D({ const c = new F({
xPos: e, xPos: e,
colIdx: n colIdx: n
}); });
@ -681,13 +780,13 @@ class G {
for (let n = 0; n <= this.config.rows.length - 1; n++) { for (let n = 0; n <= this.config.rows.length - 1; n++) {
const h = this.config.rows[n]; const h = this.config.rows[n];
l += h.height; l += h.height;
const c = new _({ const c = new W({
yPos: l, yPos: l,
rowIdx: n rowIdx: n
}); });
o.push(c); o.push(c);
} }
const i = new N({ const i = new Y({
columns: t, columns: t,
rows: o rows: o
}); });
@ -695,7 +794,7 @@ class G {
} }
buildComponent() { buildComponent() {
const t = document.createElement("div"); 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(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); t.style.top = this.columnsBarHeight + "px", t.style.left = this.rowsBarWidth + "px", t.appendChild(this.sheet.element), t.classList.add(m + "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. /**Destroy spreadsheet DOM element.
* *
@ -744,9 +843,13 @@ class G {
const { column: e, row: o } = t; const { column: e, row: o } = t;
return this.data[o][e]; return this.data[o][e];
} }
changeCellValues(t, e) { changeCellValues(t, e, o = !0) {
const { column: o, row: l } = t; const { column: l, row: i } = t;
this.data[l][o].changeValues(e), this.renderCell(l, o); this.data[i][l].changeValues(e), this.events.dispatch({
type: d.CELL_CHANGE,
cell: this.data[i][l],
enableCallback: o
}), this.renderCell(i, l);
} }
changeCellStyles(t, e) { changeCellStyles(t, e) {
const { column: o, row: l } = t; const { column: o, row: l } = t;
@ -756,8 +859,8 @@ class G {
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); 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 <= l; h++) for (let h = o; h <= l; h++)
for (let c = i; c <= n; c++) { for (let c = i; c <= n; c++) {
const d = this.data[h][c]; const a = this.data[h][c];
e(d); e(a);
} }
} }
deleteSelectedCellsValues() { deleteSelectedCellsValues() {
@ -802,7 +905,7 @@ class G {
const n = []; const n = [];
for (let h = 0; h < o; h++) { for (let h = 0; h < o; h++) {
const c = t[i][h]; const c = t[i][h];
n.push(new y({ n.push(new x({
displayValue: c.displayValue, displayValue: c.displayValue,
position: c.position, position: c.position,
resultValue: c.resultValue, resultValue: c.resultValue,
@ -812,22 +915,22 @@ class G {
} }
l.push(n); l.push(n);
} }
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; 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 S(this, this.scroller.getViewportBoundlingRect()), this.renderSheet(), this;
} }
makeConfigFromData(t, e) { makeConfigFromData(t, e) {
const o = t.length - 1, l = t[0] ? t[0].length : 0, i = []; const o = t.length - 1, l = t[0] ? t[0].length : 0, i = [];
for (let c = 0; c < o; c++) for (let c = 0; c < o; c++)
i.push(new v({ i.push(new k({
height: 40, height: 40,
title: String(c) title: String(c)
})); }));
const n = []; const n = [];
for (let c = 0; c < l; c++) for (let c = 0; c < l; c++)
n.push(new S({ n.push(new E({
width: 150, width: 150,
title: String(c) title: String(c)
})); }));
return new m({ return new p({
view: e, view: e,
rows: i, rows: i,
columns: n, columns: n,
@ -846,24 +949,24 @@ class G {
} }
} }
export { export {
u as CSS_PREFIX, m as CSS_PREFIX,
N as Cache, Y as Cache,
D as CachedColumn, F as CachedColumn,
_ as CachedRow, W as CachedRow,
y as Cell, x as Cell,
I as CellStyles, R as CellStyles,
S as Column, E as Column,
m as Config, p as Config,
V as Position, M as Position,
g as RenderBox, y as RenderBox,
v as Row, k as Row,
p as Selection, v as Selection,
A as SerializableCell, _ as SerializableCell,
M as Styles, O as Styles,
x as Viewport, S as Viewport,
z as createSampleConfig, K as createSampleConfig,
b as createSampleData, B as createSampleData,
G as default, q as default,
K as makeSpreadsheetConfigAndData U as makeSpreadsheetConfigAndData
}; };
//# sourceMappingURL=main.js.map //# sourceMappingURL=main.js.map

2
dist/main.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
dist/modules/clipboard.d.ts vendored Normal file
View File

@ -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;
}

7
dist/modules/config.d.ts vendored
View File

@ -1,7 +1,7 @@
import { Cell } from "./cell"; import { Cell } from "./cell";
import { Column } from "./column"; import { Column } from "./column";
import { Row } from "./row"; import { Row } from "./row";
import { Selection } from "./selection"; import { RangeSelectionType, Selection } from "./selection";
export interface ViewProperties { export interface ViewProperties {
width: number; width: number;
height: number; height: number;
@ -9,6 +9,7 @@ export interface ViewProperties {
export type CellClickEvent = (event: MouseEvent, cell: Cell) => void; export type CellClickEvent = (event: MouseEvent, cell: Cell) => void;
export type SelectionChangeEvent = (selection: Selection) => void; export type SelectionChangeEvent = (selection: Selection) => void;
export type CellChangeEvent = (cell: Cell) => void; export type CellChangeEvent = (cell: Cell) => void;
export type CopyEvent = (range: RangeSelectionType, data: Cell[][], dataAsString: string) => void;
export type ConfigProperties = { export type ConfigProperties = {
/** Please, end it with '_' symbol. /** Please, end it with '_' symbol.
* *
@ -22,6 +23,7 @@ export type ConfigProperties = {
onCellClick?: CellClickEvent | null; onCellClick?: CellClickEvent | null;
onSelectionChange?: SelectionChangeEvent | null; onSelectionChange?: SelectionChangeEvent | null;
onCellChange?: CellChangeEvent | null; onCellChange?: CellChangeEvent | null;
onCopy?: CopyEvent | null;
}; };
export type SheetConfigConstructorProps = { export type SheetConfigConstructorProps = {
rows: Row[]; rows: Row[];
@ -31,8 +33,9 @@ export declare class Config {
rows: Row[]; rows: Row[];
columns: Column[]; columns: Column[];
view: ViewProperties; view: ViewProperties;
onCellClick: ((event: MouseEvent, cell: Cell) => void) | null; onCellClick: CellClickEvent | null;
onSelectonChange: SelectionChangeEvent | null; onSelectonChange: SelectionChangeEvent | null;
onCellChange: CellChangeEvent | null; onCellChange: CellChangeEvent | null;
onCopy: CopyEvent | null;
constructor(props: ConfigProperties); constructor(props: ConfigProperties);
} }

16
dist/modules/events.d.ts vendored
View File

@ -1,9 +1,10 @@
import { Scroller } from "../components/scroller"; import { Scroller } from "../components/scroller";
import Spreadsheet, { Cell, CellConstructorProps, Selection } from "../main"; import Spreadsheet, { Cell, RangeSelectionType, Selection } from "../main";
export declare enum EventTypes { export declare enum EventTypes {
CELL_CLICK = "CELL_CLICK", CELL_CLICK = "CELL_CLICK",
SELECTION_CHANGE = "CHANGE_SELECTION", SELECTION_CHANGE = "CHANGE_SELECTION",
CELL_CHANGE = "CELL_CHANGE" CELL_CHANGE = "CELL_CHANGE",
COPY_CELLS = "COPY_CELLS"
} }
export type CellClickEvent = { export type CellClickEvent = {
type: EventTypes.CELL_CLICK; type: EventTypes.CELL_CLICK;
@ -18,9 +19,15 @@ export type ChangeSelectionEvent = {
export type ChangeCellEvent = { export type ChangeCellEvent = {
type: EventTypes.CELL_CHANGE; type: EventTypes.CELL_CHANGE;
cell: Cell; cell: Cell;
values: Partial<Omit<CellConstructorProps, "position">>; enableCallback?: boolean;
}; };
export type ActionTypes = CellClickEvent | ChangeSelectionEvent | ChangeCellEvent; export type CopyAction = {
type: EventTypes.COPY_CELLS;
range: RangeSelectionType;
data: Cell[][];
dataAsString: string;
};
export type ActionTypes = CellClickEvent | ChangeSelectionEvent | ChangeCellEvent | CopyAction;
export declare class Events { export declare class Events {
root: Spreadsheet; root: Spreadsheet;
constructor(root: Spreadsheet); constructor(root: Spreadsheet);
@ -28,4 +35,5 @@ export declare class Events {
private cellClick; private cellClick;
private changeSelection; private changeSelection;
private changeCellValues; private changeCellValues;
private copy;
} }