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-25 15:27:58 +03:00
parent a37401a28d
commit f49a836045
10 changed files with 297 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/components/editor.d.ts vendored
View File

@ -5,7 +5,7 @@ export declare class Editor {
root: Spreadsheet; root: Spreadsheet;
constructor(root: Spreadsheet); constructor(root: Spreadsheet);
hide(): void; hide(): void;
show(position: Position): void; show(position: Position, initialString?: string): void;
handleKeydown: (event: KeyboardEvent) => void; handleKeydown: (event: KeyboardEvent) => void;
handleClickOutside: (event: MouseEvent) => void; handleClickOutside: (event: MouseEvent) => void;
} }

6
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

6
dist/main.d.ts vendored
View File

@ -1,4 +1,4 @@
import { Cell, CellConstructorProps, Position, SerializableCell } from "./modules/cell"; import { Cell, CellConstructorProps, CellStyles, Position, SerializableCell } from "./modules/cell";
import { Config, ViewProperties } from "./modules/config"; import { Config, 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";
@ -9,6 +9,7 @@ interface SpreadsheetConstructorProperties {
config?: Omit<Config, 'view'>; config?: Omit<Config, 'view'>;
view?: ViewProperties; view?: ViewProperties;
} }
export declare const CSS_PREFIX = "modern_sc_";
export default class Spreadsheet { export default class Spreadsheet {
private table; private table;
private scroller; private scroller;
@ -42,9 +43,10 @@ export default class Spreadsheet {
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'>>): void;
changeCellStyles(position: Position, styles: CellStyles): void;
applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => any): void; applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => any): void;
deleteSelectedCellsValues(): void; deleteSelectedCellsValues(): void;
showEditor(position: Position): void; showEditor(position: Position, initialString?: string): void;
renderSheet(): void; renderSheet(): void;
renderCell(row: number, col: number): void; renderCell(row: number, col: number): void;
loadData(data: Cell[][] | SerializableCell[][]): Spreadsheet; loadData(data: Cell[][] | SerializableCell[][]): Spreadsheet;

523
dist/main.js vendored
View File

@ -1,32 +1,32 @@
var y = Object.defineProperty; var v = Object.defineProperty;
var p = (r, t, e) => t in r ? y(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e; var S = (r, t, e) => t in r ? v(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
var o = (r, t, e) => (p(r, typeof t != "symbol" ? t + "" : t, e), e); var s = (r, t, e) => (S(r, typeof t != "symbol" ? t + "" : t, e), e);
class w { class m {
constructor(t, e) { constructor(t, e) {
o(this, "x"); s(this, "x");
o(this, "y"); s(this, "y");
o(this, "width"); s(this, "width");
o(this, "height"); s(this, "height");
this.x = this.getXCoord(e.column, t), this.y = this.getYCoord(e.row, t), this.width = t.columns[e.column].width, this.height = t.rows[e.row].height; this.x = this.getXCoord(e.column, t), this.y = this.getYCoord(e.row, t), this.width = t.columns[e.column].width, this.height = t.rows[e.row].height;
} }
getXCoord(t, e) { getXCoord(t, e) {
let s = 0; let o = 0;
for (let l = 0; l < t; l++) for (let l = 0; l < t; l++)
s += e.columns[l].width; o += e.columns[l].width;
return s; return o;
} }
getYCoord(t, e) { getYCoord(t, e) {
let s = 0; let o = 0;
for (let l = 0; l < t; l++) for (let l = 0; l < t; l++)
s += e.rows[l].height; o += e.rows[l].height;
return s; return o;
} }
} }
class v { class x {
constructor(t) { constructor(t) {
o(this, "element"); s(this, "element");
o(this, "root"); s(this, "root");
o(this, "handleKeydown", (t) => { s(this, "handleKeydown", (t) => {
const { key: e } = t; const { key: e } = t;
switch (e) { switch (e) {
case "Escape": { case "Escape": {
@ -40,53 +40,53 @@ class v {
}), this.hide(); }), this.hide();
} }
}); });
o(this, "handleClickOutside", (t) => { s(this, "handleClickOutside", (t) => {
const e = t.target; const e = t.target;
this.element.contains(e) || this.hide(); this.element.contains(e) || this.hide();
}); });
this.root = t; this.root = t;
const e = document.createElement("input"); const e = document.createElement("input");
e.classList.add("editor"), this.element = e, this.hide(); e.classList.add(d + "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) { show(t, e) {
const { height: e, width: s, x: l, y: n } = new w(this.root.config, t), i = this.root.getCell(t); const { height: o, width: l, x: n, y: i } = new m(this.root.config, t), c = this.root.getCell(t);
this.element.classList.remove("hide"), this.element.style.top = n - this.root.viewport.top + "px", this.element.style.left = l - this.root.viewport.left + "px", this.element.style.width = s + "px", this.element.style.height = e + "px", this.element.style.display = "block", window.addEventListener("click", this.handleClickOutside), this.element.addEventListener("keydown", this.handleKeydown), this.element.value = i.value, this.element.focus(), this.element.select(); this.element.classList.remove("hide"), this.element.style.top = i - this.root.viewport.top + "px", this.element.style.left = n - this.root.viewport.left + "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 || c.value, this.element.focus(), e || this.element.select();
} }
} }
class S { class R {
constructor(t) { constructor(t) {
o(this, "element"); s(this, "element");
o(this, "root"); s(this, "root");
this.root = t; this.root = t;
const e = document.createElement("header"); const e = document.createElement("header");
e.classList.add(), this.element = e; e.classList.add(), this.element = e;
} }
} }
class x { class b {
constructor(t) { constructor(t) {
o(this, "element"); s(this, "element");
o(this, "verticalScroller"); s(this, "verticalScroller");
o(this, "horizontalScroller"); s(this, "horizontalScroller");
o(this, "root"); s(this, "root");
o(this, "isSelecting", !1); s(this, "isSelecting", !1);
o(this, "handleMouseMove", (t) => { s(this, "handleMouseMove", (t) => {
if (!this.isSelecting) if (!this.isSelecting)
return; return;
const { offsetX: e, offsetY: s } = t, l = this.root.getCellByCoords(e, s); const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o);
this.root.selection.selectedRange && (this.root.selection.selectedRange.to = l), this.root.renderSheet(); this.root.selection.selectedRange && (this.root.selection.selectedRange.to = l), this.root.renderSheet();
}); });
o(this, "handleMouseUp", () => { 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.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();
}); });
o(this, "handleDoubleClick", (t) => { s(this, "handleDoubleClick", (t) => {
t.preventDefault(); t.preventDefault();
const e = this.root.getCellByCoords(t.offsetX, t.offsetY); const e = this.root.getCellByCoords(t.offsetX, t.offsetY);
this.root.showEditor(e); this.root.showEditor(e);
}); });
o(this, "handleKeydown", (t) => { s(this, "handleKeydown", (t) => {
if (console.log(t), ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t.key)) if (console.log(t), ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t.key))
switch (t.preventDefault(), this.root.selection.selectedRange = null, t.key) { switch (t.preventDefault(), this.root.selection.selectedRange = null, t.key) {
case "ArrowLeft": { case "ArrowLeft": {
@ -106,32 +106,36 @@ class x {
break; break;
} }
} }
if (!t.metaKey && !t.ctrlKey && (t.key === "F2" || /^([a-z]|[а-я])$/.test(t.key.toLowerCase()))) { const e = /^([a-z]|[а-я])$/;
if (!t.metaKey && !t.ctrlKey) {
const o = e.test(t.key.toLowerCase());
if (t.key === "F2" || o) {
if (t.preventDefault(), !this.root.selection.selectedCell) if (t.preventDefault(), !this.root.selection.selectedCell)
return; return;
this.root.showEditor(this.root.selection.selectedCell); this.root.showEditor(this.root.selection.selectedCell, o ? t.key : void 0);
}
} }
t.key === "Delete" && (t.preventDefault(), this.root.deleteSelectedCellsValues(), this.root.renderSheet()); t.key === "Delete" && (t.preventDefault(), this.root.deleteSelectedCellsValues(), this.root.renderSheet());
}); });
o(this, "handleClick", (t) => { s(this, "handleClick", (t) => {
if (t.button !== 0) if (t.button !== 0)
return; return;
const { offsetX: e, offsetY: s } = t, l = this.root.getCellByCoords(e, s); const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o);
this.isSelecting = !0, this.root.selection.selectedRange = { this.isSelecting = !0, this.root.selection.selectedRange = {
from: l, from: l,
to: l to: l
}, this.root.selection.selectedCell = l, this.root.renderSheet(); }, this.root.selection.selectedCell = l, this.root.renderSheet();
}); });
o(this, "handleScroll", () => { s(this, "handleScroll", () => {
const t = this.getViewportBoundlingRect(); const t = this.getViewportBoundlingRect();
this.root.viewport.updateValues(t), this.root.renderSheet(); this.root.viewport.updateValues(t), this.root.renderSheet();
}); });
this.root = t; this.root = t;
const { horizontalScroller: e, scroller: s, verticalScroller: l } = this.buildComponent(); const { horizontalScroller: e, scroller: o, verticalScroller: l } = this.buildComponent();
this.element = s, 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.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.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);
} }
getViewportBoundlingRect() { getViewportBoundlingRect() {
const { scrollTop: t, scrollLeft: e } = this.element, { height: s, width: l } = this.element.getBoundingClientRect(), n = t + s, i = e + l; const { scrollTop: t, scrollLeft: e } = this.element, { height: o, width: l } = this.element.getBoundingClientRect(), n = t + o, i = e + l;
return { return {
top: t, top: t,
left: e, left: e,
@ -140,8 +144,8 @@ class x {
}; };
} }
buildComponent() { buildComponent() {
const t = document.createElement("div"), e = document.createElement("div"), s = document.createElement("div"), l = document.createElement("div"), n = document.createElement("div"); const t = document.createElement("div"), e = document.createElement("div"), o = document.createElement("div"), l = document.createElement("div"), n = document.createElement("div");
return e.style.width = "0px", e.style.pointerEvents = "none", s.style.pointerEvents = "none", l.style.display = "flex", n.appendChild(e), n.appendChild(s), l.appendChild(n), this.verticalScroller = e, this.horizontalScroller = s, t.appendChild(l), t.classList.add("scroller"), { scroller: t, verticalScroller: e, horizontalScroller: s }; return e.style.width = "0px", e.style.pointerEvents = "none", o.style.pointerEvents = "none", l.style.display = "flex", n.appendChild(e), n.appendChild(o), l.appendChild(n), this.verticalScroller = e, this.horizontalScroller = o, t.appendChild(l), t.classList.add(d + "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);
@ -160,46 +164,48 @@ class x {
this.horizontalScroller.style.width = t + "px"; this.horizontalScroller.style.width = t + "px";
} }
} }
class R { class k {
constructor(t) { constructor(t) {
o(this, "fontSize", 16); s(this, "fontSize", 16);
o(this, "fontColor", "black"); s(this, "fontColor", "black");
o(this, "background", "white"); s(this, "background", "white");
o(this, "borderColor", "black"); s(this, "borderColor", "black");
o(this, "selectedBackground", "#4287f5"); s(this, "selectedBackground", "#4287f5");
o(this, "selectedFontColor", "#ffffff"); s(this, "selectedFontColor", "#ffffff");
t && Object.assign(this, t); t && Object.assign(this, t);
} }
} }
class b { class V {
constructor(t, e) { constructor(t, e) {
o(this, "row"); s(this, "row");
o(this, "column"); s(this, "column");
this.row = t, this.column = e; this.row = t, this.column = e;
} }
} }
class k { class E {
constructor(t) { constructor(t) {
o(this, "value"); s(this, "value");
o(this, "displayValue"); s(this, "displayValue");
o(this, "resultValue"); s(this, "resultValue");
o(this, "position"); s(this, "position");
o(this, "style"); s(this, "style");
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 g { class f {
constructor(t) { constructor(t) {
o(this, "value"); /** True value (data) */
o(this, "displayValue"); s(this, "value");
/** Value to render */
s(this, "displayValue");
/** 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 */
o(this, "resultValue"); s(this, "resultValue");
o(this, "position"); s(this, "position");
o(this, "style", new R()); s(this, "style", null);
this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position; this.value = t.value, this.displayValue = t.displayValue, this.resultValue = t.resultValue, this.position = t.position, this.style = t.style;
} }
getSerializableCell() { getSerializableCell() {
return new k({ return new E({
displayValue: this.displayValue, displayValue: this.displayValue,
position: this.position, position: this.position,
resultValue: this.resultValue, resultValue: this.resultValue,
@ -207,108 +213,117 @@ class g {
value: this.value value: this.value
}); });
} }
changeStyles(t) {
this.style = t;
}
changeValues(t) { changeValues(t) {
Object.assign(this, t); Object.assign(this, t);
} }
isCellInRange(t) { isCellInRange(t) {
const { column: e, row: s } = this.position, { selectedRange: l } = t.selection; const { column: e, row: o } = this.position, { selectedRange: l } = t.selection;
if (!l) if (!l)
return !1; return !1;
const n = s >= Math.min(l.from.row, l.to.row) && s <= Math.max(l.to.row, l.from.row); const n = o >= Math.min(l.from.row, l.to.row) && o <= Math.max(l.to.row, l.from.row);
return e >= Math.min(l.from.column, l.to.column) && e <= Math.max(l.to.column, l.from.column) && n; return e >= Math.min(l.from.column, l.to.column) && e <= Math.max(l.to.column, l.from.column) && n;
} }
render(t) { render(t) {
var a; var w;
let { height: e, width: s, x: l, y: n } = new w(t.config, this.position); let { height: e, width: o, x: l, y: n } = new m(t.config, this.position);
const { ctx: i } = t, c = ((a = t.selection.selectedCell) == null ? void 0 : a.row) === this.position.row && t.selection.selectedCell.column === this.position.column, h = this.isCellInRange(t); const { ctx: i } = t, c = ((w = t.selection.selectedCell) == null ? void 0 : w.row) === this.position.row && t.selection.selectedCell.column === this.position.column, h = this.isCellInRange(t);
n -= t.viewport.top, l -= t.viewport.left, i.clearRect(l, n, s, e), i.fillStyle = c || h ? this.style.selectedBackground : this.style.background, i.strokeStyle = "black", i.fillRect(l, n, s - 1, e - 1), i.strokeRect(l, n, s, e), i.fillStyle = c || h ? this.style.selectedFontColor : this.style.fontColor, i.textAlign = "left", i.font = `${this.style.fontSize}px Arial`, i.textBaseline = "middle", i.fillText(this.displayValue, l + 2, n + e / 2); n -= t.viewport.top, l -= t.viewport.left;
} const a = this.style ?? t.styles.cells;
} i.clearRect(l, n, o, e), i.fillStyle = c || h ? a.selectedBackground : a.background, i.strokeStyle = "black", i.fillRect(l, n, o - 1, e - 1), i.strokeRect(l, n, o, e), i.fillStyle = c || h ? a.selectedFontColor : a.fontColor, i.textAlign = "left", i.font = `${a.fontSize}px Arial`, i.textBaseline = "middle", i.fillText(this.displayValue, l + 2, n + e / 2);
class V {
constructor(t) {
o(this, "element");
o(this, "ctx");
o(this, "root");
this.root = t;
const e = document.createElement("canvas");
e.classList.add("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", this.element = e;
const s = this.element.getContext("2d");
if (!s)
throw new Error("Enable hardware acceleration");
this.ctx = s;
}
getCellByCoords(t, e) {
let s = 0, l = 0;
for (; l <= e && (l += this.root.config.rows[s].height, !(l >= e)); )
s++;
let n = 0, i = 0;
for (; i <= t && (i += this.root.config.columns[n].width, !(i >= t)); )
n++;
return new b(s, n);
}
renderCell(t) {
const { column: e, row: s } = t;
this.root.data[s][e].render(this.root);
}
renderSheet() {
const t = this.root.viewport.firstRow, e = this.root.viewport.lastCol + 3, s = this.root.viewport.lastRow + 3, l = this.root.viewport.firstCol;
for (let n = t; n <= s; n++)
for (let i = l; i <= e && !(!this.root.config.columns[i] || !this.root.config.rows[n]); i++)
this.renderCell({ column: i, row: n });
}
}
class E {
constructor(t) {
o(this, "element");
o(this, "root");
this.root = t;
const e = document.createElement("div");
e.classList.add("spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps);
}
changeElementSizes(t) {
const { height: e, width: s } = t;
this.element.style.width = s + "px", this.element.style.height = e + "px";
} }
} }
class I { class I {
constructor(t) { constructor(t) {
o(this, "element"); s(this, "element");
o(this, "root"); s(this, "ctx");
s(this, "root");
this.root = t; this.root = t;
const e = document.createElement("div"); const e = document.createElement("canvas");
e.classList.add("toolbar"), this.element = e; e.classList.add(d + "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", 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, l = 0;
for (; l <= e && (l += this.root.config.rows[o].height, !(l >= e)); )
o++;
let n = 0, i = 0;
for (; i <= t && (i += this.root.config.columns[n].width, !(i >= t)); )
n++;
return new V(o, n);
}
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, l = this.root.viewport.firstCol;
for (let n = t; n <= o; n++)
for (let i = l; i <= e && !(!this.root.config.columns[i] || !this.root.config.rows[n]); i++)
this.renderCell({ column: i, row: n });
} }
} }
class d { class L {
constructor(t) { constructor(t) {
o(this, "rows"); s(this, "element");
o(this, "columns"); s(this, "root");
o(this, "view", { this.root = t;
const e = document.createElement("div");
e.classList.add(d + "spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps);
}
changeElementSizes(t) {
const { height: e, width: o } = t;
this.element.style.width = o + "px", this.element.style.height = e + "px";
}
}
class A {
constructor(t) {
s(this, "element");
s(this, "root");
this.root = t;
const e = document.createElement("div");
e.classList.add(d + "toolbar"), this.element = e;
}
}
class u {
constructor(t) {
s(this, "rows");
s(this, "columns");
s(this, "view", {
width: 800, width: 800,
height: 600 height: 600
}); });
this.columns = t.columns, this.rows = t.rows, this.view = t.view; this.columns = t.columns, this.rows = t.rows, this.view = t.view;
} }
} }
class L { class B {
constructor() { constructor() {
o(this, "selectedCell", null); s(this, "selectedCell", null);
o(this, "selectedRange", null); s(this, "selectedRange", null);
} }
} }
class A { class z {
constructor() {
s(this, "cells");
this.cells = new k();
}
} }
class u { class g {
constructor(t, e) { constructor(t, e) {
o(this, "root"); s(this, "root");
o(this, "top"); s(this, "top");
o(this, "left"); s(this, "left");
o(this, "right"); s(this, "right");
o(this, "bottom"); s(this, "bottom");
o(this, "firstRow"); s(this, "firstRow");
o(this, "lastRow"); s(this, "lastRow");
o(this, "firstCol"); s(this, "firstCol");
o(this, "lastCol"); s(this, "lastCol");
this.root = t, this.top = e.top, this.left = e.left, this.right = e.right, this.bottom = e.bottom, this.firstRow = this.getFirstRow(), this.lastCol = this.getFirstRow(); this.root = t, this.top = e.top, this.left = e.left, this.right = e.right, this.bottom = e.bottom, this.firstRow = this.getFirstRow(), this.lastCol = this.getFirstRow();
//!Temp //!Temp
this.firstCol = this.getFirstRow(); this.firstCol = this.getFirstRow();
@ -337,59 +352,60 @@ class u {
return this.root.cache.getColumnByXCoord(this.right); return this.root.cache.getColumnByXCoord(this.right);
} }
} }
class m { class C {
constructor(t) { constructor(t) {
o(this, "width"); s(this, "width");
o(this, "title"); s(this, "title");
this.width = t.width, this.title = t.title; this.width = t.width, this.title = t.title;
} }
} }
class f { class y {
constructor(t) { constructor(t) {
o(this, "height"); s(this, "height");
o(this, "title"); s(this, "title");
this.height = t.height, this.title = t.title; this.height = t.height, this.title = t.title;
} }
} }
function C(r, t, e = !1) { function p(r, t, e = !1) {
const s = []; const o = [];
for (let l = 0; l <= r; l++) { for (let l = 0; l <= r; l++) {
const n = []; const n = [];
for (let i = 0; i <= t; i++) { for (let i = 0; i <= t; i++) {
const c = e ? `${l}:${i}` : "", h = new g({ const c = e ? `${l}:${i}` : "", h = new f({
displayValue: c, displayValue: c,
resultValue: c, resultValue: c,
value: c, value: c,
position: { position: {
column: i, column: i,
row: l row: l
} },
style: null
}); });
n.push(h); n.push(h);
} }
s.push(n); o.push(n);
} }
return s; return o;
} }
function B(r, t) { function D(r, t) {
const e = []; const e = [];
for (let n = 0; n <= r; n++) { for (let n = 0; n <= r; n++) {
const i = new f({ const i = new y({
height: 40, height: 40,
title: String(n) title: String(n)
}); });
e.push(i); e.push(i);
} }
const s = []; const o = [];
for (let n = 0; n <= t; n++) { for (let n = 0; n <= t; n++) {
const i = new m({ const i = new C({
title: String(n), title: String(n),
width: 150 width: 150
}); });
s.push(i); o.push(i);
} }
return new d({ return new u({
columns: s, columns: o,
rows: e, rows: e,
view: { view: {
height: 600, height: 600,
@ -397,65 +413,66 @@ function B(r, t) {
} }
}); });
} }
function F(r, t) { function H(r, t) {
const e = C(r, t), s = B(r, t); const e = p(r, t), o = D(r, t);
return { data: e, config: s }; return { data: e, config: o };
}
class z {
constructor(t) {
o(this, "xPos");
o(this, "colIdx");
this.xPos = t.xPos, this.colIdx = t.colIdx;
}
}
class D {
constructor(t) {
o(this, "yPos");
o(this, "rowIdx");
this.yPos = t.yPos, this.rowIdx = t.rowIdx;
}
} }
class M { class M {
constructor(t) { constructor(t) {
o(this, "columns"); s(this, "xPos");
o(this, "rows"); s(this, "colIdx");
this.xPos = t.xPos, this.colIdx = t.colIdx;
}
}
class F {
constructor(t) {
s(this, "yPos");
s(this, "rowIdx");
this.yPos = t.yPos, this.rowIdx = t.rowIdx;
}
}
class T {
constructor(t) {
s(this, "columns");
s(this, "rows");
this.columns = t.columns, this.rows = t.rows; this.columns = t.columns, this.rows = t.rows;
} }
getRowByYCoord(t) { getRowByYCoord(t) {
let e = 0; let e = 0;
for (let s = 0; s < this.rows.length; s++) for (let o = 0; o < this.rows.length; o++)
if (t <= this.rows[s].yPos) { if (t <= this.rows[o].yPos) {
e = s; e = o;
break; break;
} }
return e; return e;
} }
getColumnByXCoord(t) { getColumnByXCoord(t) {
let e = 0; let e = 0;
for (let s = 0; s < this.columns.length; s++) for (let o = 0; o < this.columns.length; o++)
if (t <= this.columns[s].xPos) { if (t <= this.columns[o].xPos) {
e = s; e = o;
break; break;
} }
return e; return e;
} }
} }
class P { const d = "modern_sc_";
class X {
constructor(t, e) { constructor(t, e) {
o(this, "table"); s(this, "table");
o(this, "scroller"); s(this, "scroller");
o(this, "toolbar"); s(this, "toolbar");
o(this, "header"); s(this, "header");
o(this, "sheet"); s(this, "sheet");
o(this, "editor"); s(this, "editor");
o(this, "styles"); s(this, "styles");
o(this, "config"); s(this, "config");
o(this, "data"); s(this, "data");
o(this, "viewport"); s(this, "viewport");
o(this, "selection"); s(this, "selection");
o(this, "cache"); s(this, "cache");
const s = C(40, 40), l = this.makeConfigFromData(s, (e == null ? void 0 : e.view) ?? { height: 600, width: 800 }); const o = p(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 d(l), this.sheet = new V(this), this.table = new E(this), this.scroller = new x(this), this.toolbar = new I(this), this.header = new S(this), this.editor = new v(this), this.cache = this.getInitialCache(), this.viewport = new u(this, this.scroller.getViewportBoundlingRect()), this.selection = new L(), this.data = s, this.styles = new A(), this.buildComponent(), this.appendTableToTarget(t), this.renderSheet(); e != null && e.view && (l.view = e.view), this.config = new u(l), this.sheet = new I(this), this.table = new L(this), this.scroller = new b(this), this.toolbar = new A(this), this.header = new R(this), this.editor = new x(this), this.cache = this.getInitialCache(), this.viewport = new g(this, this.scroller.getViewportBoundlingRect()), this.selection = new B(), this.data = o, this.styles = new z(), this.buildComponent(), this.appendTableToTarget(t), this.renderSheet();
} }
getInitialCache() { getInitialCache() {
const t = []; const t = [];
@ -463,32 +480,32 @@ class P {
for (let i = 0; i <= this.config.columns.length - 1; i++) { for (let i = 0; i <= this.config.columns.length - 1; i++) {
const c = this.config.columns[i]; const c = this.config.columns[i];
e += c.width; e += c.width;
const h = new z({ const h = new M({
xPos: e, xPos: e,
colIdx: i colIdx: i
}); });
t.push(h); t.push(h);
} }
const s = []; const o = [];
let l = 0; let l = 0;
for (let i = 0; i <= this.config.rows.length - 1; i++) { for (let i = 0; i <= this.config.rows.length - 1; i++) {
const c = this.config.rows[i]; const c = this.config.rows[i];
l += c.height; l += c.height;
const h = new D({ const h = new F({
yPos: l, yPos: l,
rowIdx: i rowIdx: i
}); });
s.push(h); o.push(h);
} }
const n = new M({ const n = new T({
columns: t, columns: t,
rows: s rows: o
}); });
return console.log("CACHE: ", n), console.log("CONFIG: ", this.config), n; return console.log("CACHE: ", n), console.log("CONFIG: ", this.config), n;
} }
buildComponent() { buildComponent() {
const t = document.createElement("div"); const t = document.createElement("div");
t.appendChild(this.header.element), t.appendChild(this.sheet.element), t.classList.add("content"), this.table.element.appendChild(this.toolbar.element), this.table.element.appendChild(t), this.table.element.appendChild(this.scroller.element), this.table.element.append(this.editor.element); t.appendChild(this.header.element), t.appendChild(this.sheet.element), t.classList.add(d + "content"), this.table.element.appendChild(this.toolbar.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.
* *
@ -525,16 +542,20 @@ class P {
return this.sheet.getCellByCoords(t, e); return this.sheet.getCellByCoords(t, e);
} }
getCell(t) { getCell(t) {
const { column: e, row: s } = t; const { column: e, row: o } = t;
return this.data[s][e]; return this.data[o][e];
} }
changeCellValues(t, e) { changeCellValues(t, e) {
const { column: s, row: l } = t; const { column: o, row: l } = t;
this.data[l][s].changeValues(e), this.renderCell(l, s); this.data[l][o].changeValues(e), this.renderCell(l, o);
}
changeCellStyles(t, e) {
const { column: o, row: l } = t;
this.data[l][o].changeStyles(e), this.renderCell(l, o);
} }
applyActionToRange(t, e) { applyActionToRange(t, e) {
const s = Math.min(t.from.row, t.to.row), l = Math.max(t.from.row, t.to.row), n = Math.min(t.from.column, t.to.column), i = 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), n = Math.min(t.from.column, t.to.column), i = Math.max(t.from.column, t.to.column);
for (let c = s; c <= l; c++) for (let c = o; c <= l; c++)
for (let h = n; h <= i; h++) { for (let h = n; h <= i; h++) {
const a = this.data[c][h]; const a = this.data[c][h];
e(a); e(a);
@ -559,8 +580,8 @@ class P {
}); });
} }
} }
showEditor(t) { showEditor(t, e) {
this.editor.show(t); this.editor.show(t, e);
} }
renderSheet() { renderSheet() {
this.sheet.renderSheet(); this.sheet.renderSheet();
@ -569,72 +590,74 @@ class P {
this.data[t][e].render(this); this.data[t][e].render(this);
} }
loadData(t) { loadData(t) {
const e = t.length, s = t[0] ? this.data[0].length : 0; const e = t.length, o = t[0] ? this.data[0].length : 0;
this.data = []; this.data = [];
const l = []; const l = [];
for (let n = 0; n < e; n++) { for (let n = 0; n < e; n++) {
const i = []; const i = [];
for (let c = 0; c < s; c++) { for (let c = 0; c < o; c++) {
const h = t[n][c]; const h = t[n][c];
i.push(new g({ i.push(new f({
displayValue: h.displayValue, displayValue: h.displayValue,
position: h.position, position: h.position,
resultValue: h.resultValue, resultValue: h.resultValue,
value: h.value value: h.value,
style: h.style
})); }));
} }
l.push(i); l.push(i);
} }
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 u(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 g(this, this.scroller.getViewportBoundlingRect()), this.renderSheet(), this;
} }
makeConfigFromData(t, e) { makeConfigFromData(t, e) {
const s = t.length - 1, l = t[0] ? t[0].length : 0, n = []; const o = t.length - 1, l = t[0] ? t[0].length : 0, n = [];
for (let h = 0; h < s; h++) for (let h = 0; h < o; h++)
n.push(new f({ n.push(new y({
height: 40, height: 40,
title: String(h) title: String(h)
})); }));
const i = []; const i = [];
for (let h = 0; h < l; h++) for (let h = 0; h < l; h++)
i.push(new m({ i.push(new C({
width: 150, width: 150,
title: String(h) title: String(h)
})); }));
return new d({ return new u({
view: e, view: e,
rows: n, rows: n,
columns: i columns: i
}); });
} }
serializeData() { serializeData() {
const t = this.data.length, e = this.data[0] ? this.data[0].length : 0, s = []; const t = this.data.length, e = this.data[0] ? this.data[0].length : 0, o = [];
for (let l = 0; l < t; l++) { for (let l = 0; l < t; l++) {
const n = []; const n = [];
for (let i = 0; i < e; i++) for (let i = 0; i < e; i++)
n.push(this.data[l][i].getSerializableCell()); n.push(this.data[l][i].getSerializableCell());
s.push(n); o.push(n);
} }
return s; return o;
} }
} }
export { export {
M as Cache, d as CSS_PREFIX,
z as CachedColumn, T as Cache,
D as CachedRow, M as CachedColumn,
g as Cell, F as CachedRow,
R as CellStyles, f as Cell,
m as Column, k as CellStyles,
d as Config, C as Column,
b as Position, u as Config,
w as RenderBox, V as Position,
f as Row, m as RenderBox,
L as Selection, y as Row,
k as SerializableCell, B as Selection,
A as Styles, E as SerializableCell,
u as Viewport, z as Styles,
B as createSampleConfig, g as Viewport,
C as createSampleData, D as createSampleConfig,
P as default, p as createSampleData,
F as makeSpreadsheetConfigAndData X as default,
H 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

8
dist/modules/cell.d.ts vendored
View File

@ -4,6 +4,7 @@ export type CellConstructorProps = {
displayValue: string; displayValue: string;
resultValue: string; resultValue: string;
position: Position; position: Position;
style: CellStyles | null;
}; };
interface CellStylesConstructorProps { interface CellStylesConstructorProps {
fontSize: number; fontSize: number;
@ -32,18 +33,21 @@ export declare class SerializableCell {
displayValue: string; displayValue: string;
resultValue: string; resultValue: string;
position: Position; position: Position;
style: CellStyles; style: CellStyles | null;
constructor(props: SerializableCell | SerializableCell); constructor(props: SerializableCell | SerializableCell);
} }
export declare class Cell { export declare class Cell {
/** True value (data) */
value: string; value: string;
/** Value to render */
displayValue: string; 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; resultValue: string;
position: Position; position: Position;
style: CellStyles; style: CellStyles | null;
constructor(props: CellConstructorProps); constructor(props: CellConstructorProps);
getSerializableCell(): SerializableCell; getSerializableCell(): SerializableCell;
changeStyles(styles: CellStyles): void;
changeValues(values: Partial<Omit<CellConstructorProps, 'position'>>): void; changeValues(values: Partial<Omit<CellConstructorProps, 'position'>>): void;
private isCellInRange; private isCellInRange;
render(root: Spreadsheet): void; render(root: Spreadsheet): void;

3
dist/modules/styles.d.ts vendored
View File

@ -1,2 +1,5 @@
import { CellStyles } from "./cell";
export declare class Styles { export declare class Styles {
cells: CellStyles;
constructor();
} }

2
dist/style.css vendored
View File

@ -1 +1 @@
body{padding:0;margin:0}.content{position:absolute;top:0;left:0}.spreadsheet_container{position:relative;isolation:isolate;border:2px solid black}.sheet{display:block;contain:strict}.scroller{overflow:scroll;box-sizing:border-box;transform:translateZ(0)}.scroller:focus{outline:none}.editor{position:absolute;box-sizing:border-box;font-size:16px;font-family:Arial,Helvetica,sans-serif}.hide{visibility:hidden} 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}

3
src/utils/createData.ts
View File

@ -18,7 +18,8 @@ export function createSampleData(rows: number, columns: number, fillCellsByCoord
position: { position: {
column: col, column: col,
row: row row: row
} },
style: null
}) })
innerRow.push(cell) innerRow.push(cell)