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 23:58:11 +03:00
parent 06dd0a0cdf
commit 35cb54e23e
12 changed files with 379 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dist/components/columnsBar.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
import Spreadsheet from "../main";
export declare class ColumnsBar {
element: HTMLCanvasElement;
private root;
height: number;
width: number;
ctx: CanvasRenderingContext2D;
constructor(root: Spreadsheet);
private createElement;
setElementPosition(top: number, left: number): void;
private isColumnSelected;
private renderText;
private renderRect;
private renderSingleColumn;
renderBar(): void;
}

6
dist/components/header.d.ts vendored
View File

@ -1,6 +0,0 @@
import Spreadsheet from "../main";
export declare class Header {
element: HTMLHeadElement;
root: Spreadsheet;
constructor(root: Spreadsheet);
}

17
dist/components/rowsBar.d.ts vendored Normal file
View File

@ -0,0 +1,17 @@
import Spreadsheet from "../main";
export declare class RowsBar {
element: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
root: Spreadsheet;
width: number;
height: number;
resizerHeight: number;
constructor(root: Spreadsheet);
private createElement;
setElementPosition(top: number, left: number): void;
private isRowSelected;
private renderText;
private renderRect;
private renderSingleRow;
renderBar(): void;
}

1
dist/components/toolbar.d.ts vendored
View File

@ -2,5 +2,6 @@ import Spreadsheet from "../main";
export declare class Toolbar { export declare class Toolbar {
element: HTMLDivElement; element: HTMLDivElement;
root: Spreadsheet; root: Spreadsheet;
height: number;
constructor(root: Spreadsheet); constructor(root: Spreadsheet);
} }

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

39
dist/main.d.ts vendored
View File

@ -3,10 +3,10 @@ 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";
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";
interface SpreadsheetConstructorProperties { interface SpreadsheetConstructorProperties {
config?: Omit<Config, 'view'>; config?: Omit<Config, "view">;
view?: ViewProperties; view?: ViewProperties;
} }
export declare const CSS_PREFIX = "modern_sc_"; export declare const CSS_PREFIX = "modern_sc_";
@ -14,7 +14,8 @@ export default class Spreadsheet {
private table; private table;
private scroller; private scroller;
private toolbar; private toolbar;
private header; private rowsBar;
private columnsBar;
private sheet; private sheet;
private editor; private editor;
styles: Styles; styles: Styles;
@ -24,6 +25,9 @@ export default class Spreadsheet {
selection: Selection; selection: Selection;
cache: Cache; cache: Cache;
constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties); constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties);
private setRowsBarPosition;
private setColumnsBarPosition;
private setElementsPositions;
private getInitialCache; private getInitialCache;
private buildComponent; private buildComponent;
/**Destroy spreadsheet DOM element. /**Destroy spreadsheet DOM element.
@ -38,28 +42,33 @@ export default class Spreadsheet {
*/ */
get ctx(): CanvasRenderingContext2D; get ctx(): CanvasRenderingContext2D;
get viewProps(): ViewProperties; get viewProps(): ViewProperties;
get columnsBarHeight(): number;
get rowsBarWidth(): number;
get toolbarHeight(): number;
/** Focusing on interactive part of spreadsheet */ /** Focusing on interactive part of 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">>): void;
changeCellStyles(position: Position, styles: CellStyles): void; changeCellStyles(position: Position, styles: CellStyles): void;
applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => any): void; applyActionToRange(range: RangeSelectionType, callback: (cell: Cell) => void): void;
deleteSelectedCellsValues(): void; deleteSelectedCellsValues(): void;
showEditor(position: Position, initialString?: string): void; showEditor(position: Position, initialString?: string): void;
renderSheet(): void; renderSheet(): void;
renderColumnsBar(): void;
renderRowsBar(): void;
renderCell(row: number, col: number): void; renderCell(row: number, col: number): void;
loadData(data: Cell[][] | SerializableCell[][]): Spreadsheet; loadData(data: Cell[][] | SerializableCell[][]): Spreadsheet;
private makeConfigFromData; private makeConfigFromData;
serializeData(): SerializableCell[][]; serializeData(): SerializableCell[][];
} }
export * from './modules/cache'; export * from "./modules/cache";
export * from './modules/cell'; export * from "./modules/cell";
export * from './modules/column'; export * from "./modules/column";
export * from './modules/config'; export * from "./modules/config";
export * from './modules/renderBox'; export * from "./modules/renderBox";
export * from './modules/row'; export * from "./modules/row";
export * from './modules/selection'; export * from "./modules/selection";
export * from './modules/styles'; export * from "./modules/styles";
export * from './modules/viewport'; export * from "./modules/viewport";
export * from './utils/createData'; export * from "./utils/createData";

498
dist/main.js vendored
View File

@ -1,7 +1,7 @@
var v = Object.defineProperty; var R = Object.defineProperty;
var S = (r, t, e) => t in r ? v(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e; var v = (n, t, e) => t in n ? R(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var s = (r, t, e) => (S(r, typeof t != "symbol" ? t + "" : t, e), e); var s = (n, t, e) => (v(n, typeof t != "symbol" ? t + "" : t, e), e);
class m { class w {
constructor(t, e) { constructor(t, e) {
s(this, "x"); s(this, "x");
s(this, "y"); s(this, "y");
@ -11,18 +11,18 @@ class m {
} }
getXCoord(t, e) { getXCoord(t, e) {
let o = 0; let o = 0;
for (let l = 0; l < t; l++) for (let i = 0; i < t; i++)
o += e.columns[l].width; o += e.columns[i].width;
return o; return o;
} }
getYCoord(t, e) { getYCoord(t, e) {
let o = 0; let o = 0;
for (let l = 0; l < t; l++) for (let i = 0; i < t; i++)
o += e.rows[l].height; o += e.rows[i].height;
return o; return o;
} }
} }
class x { class S {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "root"); s(this, "root");
@ -46,23 +46,14 @@ class x {
}); });
this.root = t; this.root = t;
const e = document.createElement("input"); const e = document.createElement("input");
e.classList.add(d + "editor"), this.element = e, this.hide(); e.classList.add(a + "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: n, y: i } = new m(this.root.config, t), c = this.root.getCell(t); const { height: o, width: i, x: r, y: l } = new w(this.root.config, t), h = this.root.getCell(t);
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(); 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();
}
}
class R {
constructor(t) {
s(this, "element");
s(this, "root");
this.root = t;
const e = document.createElement("header");
e.classList.add(), this.element = e;
} }
} }
class b { class b {
@ -75,11 +66,11 @@ class b {
s(this, "handleMouseMove", (t) => { s(this, "handleMouseMove", (t) => {
if (!this.isSelecting) if (!this.isSelecting)
return; return;
const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o); const { offsetX: e, offsetY: o } = t, i = 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 = i), this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
}); });
s(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(), this.root.renderColumnsBar(), this.root.renderRowsBar();
}); });
s(this, "handleDoubleClick", (t) => { s(this, "handleDoubleClick", (t) => {
t.preventDefault(); t.preventDefault();
@ -120,32 +111,32 @@ class b {
s(this, "handleClick", (t) => { s(this, "handleClick", (t) => {
if (t.button !== 0) if (t.button !== 0)
return; return;
const { offsetX: e, offsetY: o } = t, l = this.root.getCellByCoords(e, o); const { offsetX: e, offsetY: o } = t, i = this.root.getCellByCoords(e, o);
this.isSelecting = !0, this.root.selection.selectedRange = { this.isSelecting = !0, this.root.selection.selectedRange = {
from: l, from: i,
to: l to: i
}, this.root.selection.selectedCell = l, this.root.renderSheet(); }, this.root.selection.selectedCell = i, this.root.renderSheet(), this.root.renderColumnsBar(), this.root.renderRowsBar();
}); });
s(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.renderColumnsBar(), this.root.renderRowsBar();
}); });
this.root = t; this.root = t;
const { horizontalScroller: e, scroller: o, verticalScroller: l } = this.buildComponent(); const { horizontalScroller: e, scroller: o, verticalScroller: i } = 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.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 = 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);
} }
getViewportBoundlingRect() { getViewportBoundlingRect() {
const { scrollTop: t, scrollLeft: e } = this.element, { height: o, width: l } = this.element.getBoundingClientRect(), n = t + o, i = e + l; const { scrollTop: t, scrollLeft: e } = this.element, { height: o, width: i } = this.element.getBoundingClientRect(), r = t + o, l = e + i;
return { return {
top: t, top: t,
left: e, left: e,
bottom: n, bottom: r,
right: i right: l
}; };
} }
buildComponent() { buildComponent() {
const t = document.createElement("div"), e = document.createElement("div"), o = document.createElement("div"), l = document.createElement("div"), n = document.createElement("div"); const t = document.createElement("div"), e = document.createElement("div"), o = document.createElement("div"), i = document.createElement("div"), r = document.createElement("div");
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 }; 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 };
} }
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);
@ -164,7 +155,7 @@ class b {
this.horizontalScroller.style.width = t + "px"; this.horizontalScroller.style.width = t + "px";
} }
} }
class k { class B {
constructor(t) { constructor(t) {
s(this, "fontSize", 16); s(this, "fontSize", 16);
s(this, "fontColor", "black"); s(this, "fontColor", "black");
@ -175,7 +166,7 @@ class k {
t && Object.assign(this, t); t && Object.assign(this, t);
} }
} }
class V { class k {
constructor(t, e) { constructor(t, e) {
s(this, "row"); s(this, "row");
s(this, "column"); s(this, "column");
@ -192,13 +183,13 @@ class E {
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 f { class C {
constructor(t) { constructor(t) {
/** True value (data) */ /** True value (data) */
s(this, "value"); s(this, "value");
/** Value to render */ /** Value to render */
s(this, "displayValue"); 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 */
s(this, "resultValue"); s(this, "resultValue");
s(this, "position"); s(this, "position");
s(this, "style", null); s(this, "style", null);
@ -220,77 +211,79 @@ class f {
Object.assign(this, t); Object.assign(this, t);
} }
isCellInRange(t) { isCellInRange(t) {
const { column: e, row: o } = this.position, { selectedRange: l } = t.selection; const { column: e, row: o } = this.position, { selectedRange: i } = t.selection;
if (!l) if (!i)
return !1; return !1;
const n = o >= Math.min(l.from.row, l.to.row) && o <= Math.max(l.to.row, l.from.row); const r = o >= Math.min(i.from.row, i.to.row) && o <= Math.max(i.to.row, i.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(i.from.column, i.to.column) && e <= Math.max(i.to.column, i.from.column) && r;
} }
render(t) { render(t) {
var w; var g;
let { height: e, width: o, x: l, y: n } = new m(t.config, this.position); const e = new w(t.config, this.position);
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); let { x: o, y: i } = e;
n -= t.viewport.top, l -= t.viewport.left; 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 a = this.style ?? t.styles.cells; i -= t.viewport.top, o -= t.viewport.left;
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); const d = 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);
} }
} }
class I { class V {
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(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; 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;
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");
this.ctx = o; this.ctx = o;
} }
getCellByCoords(t, e) { getCellByCoords(t, e) {
let o = 0, l = 0; let o = 0, i = 0;
for (; l <= e && (l += this.root.config.rows[o].height, !(l >= e)); ) for (; i <= e && (i += this.root.config.rows[o].height, !(i >= e)); )
o++; o++;
let n = 0, i = 0; let r = 0, l = 0;
for (; i <= t && (i += this.root.config.columns[n].width, !(i >= t)); ) for (; l <= t && (l += this.root.config.columns[r].width, !(l >= t)); )
n++; r++;
return new V(o, n); return new k(o, r);
} }
renderCell(t) { renderCell(t) {
const { column: e, row: o } = t; const { column: e, row: o } = t;
this.root.data[o][e].render(this.root); this.root.data[o][e].render(this.root);
} }
renderSheet() { renderSheet() {
const t = this.root.viewport.firstRow, e = this.root.viewport.lastCol + 3, o = this.root.viewport.lastRow + 3, l = this.root.viewport.firstCol; const t = this.root.viewport.firstRow, e = this.root.viewport.lastCol + 3, o = this.root.viewport.lastRow + 3, i = this.root.viewport.firstCol;
for (let n = t; n <= o; n++) for (let r = t; r <= o; r++)
for (let i = l; i <= e && !(!this.root.config.columns[i] || !this.root.config.rows[n]); i++) for (let l = i; l <= e && !(!this.root.config.columns[l] || !this.root.config.rows[r]); l++)
this.renderCell({ column: i, row: n }); this.renderCell({ column: l, row: r });
}
}
class I {
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);
}
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 L {
constructor(t) { constructor(t) {
s(this, "element"); s(this, "element");
s(this, "root"); s(this, "root");
s(this, "height", 0);
this.root = t; this.root = t;
const e = document.createElement("div"); const e = document.createElement("div");
e.classList.add(d + "spreadsheet_container"), this.element = e, this.changeElementSizes(this.root.viewProps); e.classList.add(a + "toolbar"), this.element = e;
}
changeElementSizes(t) {
const { height: e, width: o } = t;
this.element.style.width = o + "px", this.element.style.height = e + "px";
} }
} }
class A { class m {
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) { constructor(t) {
s(this, "rows"); s(this, "rows");
s(this, "columns"); s(this, "columns");
@ -301,19 +294,19 @@ class u {
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 B { class P {
constructor() { constructor() {
s(this, "selectedCell", null); s(this, "selectedCell", null);
s(this, "selectedRange", null); s(this, "selectedRange", null);
} }
} }
class z { class T {
constructor() { constructor() {
s(this, "cells"); s(this, "cells");
this.cells = new k(); this.cells = new B();
} }
} }
class g { class f {
constructor(t, e) { constructor(t, e) {
s(this, "root"); s(this, "root");
s(this, "top"); s(this, "top");
@ -352,59 +345,59 @@ class g {
return this.root.cache.getColumnByXCoord(this.right); return this.root.cache.getColumnByXCoord(this.right);
} }
} }
class C { class x {
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 y { class p {
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 p(r, t, e = !1) { function y(n, t, e = !1) {
const o = []; const o = [];
for (let l = 0; l <= r; l++) { for (let i = 0; i <= n; i++) {
const n = []; const r = [];
for (let i = 0; i <= t; i++) { for (let l = 0; l <= t; l++) {
const c = e ? `${l}:${i}` : "", h = new f({ const h = e ? `${i}:${l}` : "", c = new C({
displayValue: c, displayValue: h,
resultValue: c, resultValue: h,
value: c, value: h,
position: { position: {
column: i, column: l,
row: l row: i
}, },
style: null style: null
}); });
n.push(h); r.push(c);
} }
o.push(n); o.push(r);
} }
return o; return o;
} }
function D(r, t) { function A(n, t) {
const e = []; const e = [];
for (let n = 0; n <= r; n++) { for (let r = 0; r <= n; r++) {
const i = new y({ const l = new p({
height: 40, height: 40,
title: String(n) title: String(r)
}); });
e.push(i); e.push(l);
} }
const o = []; const o = [];
for (let n = 0; n <= t; n++) { for (let r = 0; r <= t; r++) {
const i = new C({ const l = new x({
title: String(n), title: String(r),
width: 150 width: 150
}); });
o.push(i); o.push(l);
} }
return new u({ return new m({
columns: o, columns: o,
rows: e, rows: e,
view: { view: {
@ -413,8 +406,8 @@ function D(r, t) {
} }
}); });
} }
function H(r, t) { function X(n, t) {
const e = p(r, t), o = D(r, t); const e = y(n, t), o = A(n, t);
return { data: e, config: o }; return { data: e, config: o };
} }
class M { class M {
@ -424,14 +417,14 @@ class M {
this.xPos = t.xPos, this.colIdx = t.colIdx; this.xPos = t.xPos, this.colIdx = t.colIdx;
} }
} }
class F { class z {
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 T { class D {
constructor(t) { constructor(t) {
s(this, "columns"); s(this, "columns");
s(this, "rows"); s(this, "rows");
@ -456,13 +449,120 @@ class T {
return e; return e;
} }
} }
const d = "modern_sc_"; class H {
class X { constructor(t) {
s(this, "element");
s(this, "root");
s(this, "height", 32);
s(this, "width");
// private resizerWidth = 1;
s(this, "ctx");
this.root = t, this.element = this.createElement();
const e = this.element.getContext("2d");
if (!e)
throw new Error("Enable hardware acceleration");
this.ctx = e, this.width = this.root.viewProps.width;
}
createElement() {
const t = document.createElement("canvas");
return t.style.position = "absolute", t.style.height = this.height + "px", t.style.width = this.root.viewProps.width + "px", t.style.display = "block", t.style.borderLeft = "1px solid black", t.width = this.root.viewProps.width, t.height = this.height, t;
}
setElementPosition(t, e) {
this.element.style.top = t + "px", this.element.style.left = e + "px";
}
isColumnSelected(t) {
const { selectedCell: e, selectedRange: o } = this.root.selection;
return e && e.column === t ? !0 : o ? t >= Math.min(o.from.column, o.to.column) && t <= Math.max(o.from.column, o.to.column) : !1;
}
// private getYCoordWithOffset(renderBox: RenderBox): number {
// const {y} = renderBox
// return y + this.root.toolbarHeight
// }
// private getXCoordWithOffset(renderBox: RenderBox): number {
// const {x} = renderBox
// return x
// }
renderText(t, e) {
const { width: o, x: i } = 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);
}
renderRect(t, e) {
const { width: o, x: i } = e, r = this.isColumnSelected(t);
this.ctx.fillStyle = r ? this.root.styles.cells.selectedBackground : "white", this.ctx.strokeStyle = "black", this.ctx.lineWidth = 1;
const l = i - this.root.viewport.left;
this.ctx.fillRect(l - 1, 0, o, this.height), this.ctx.strokeRect(l - 1, 0, o, this.height);
}
renderSingleColumn(t) {
const e = new w(this.root.config, {
row: 0,
column: t
});
this.renderRect(t, e), this.renderText(t, e);
}
renderBar() {
const t = this.root.viewport.lastCol + 3, e = this.root.viewport.firstCol;
this.ctx.beginPath(), this.ctx.strokeStyle = "black", this.ctx.lineWidth = 1, this.ctx.moveTo(0, 0), this.ctx.lineTo(0, this.height), this.ctx.closePath(), this.ctx.stroke();
for (let o = e; o <= t && this.root.config.columns[o]; o++)
this.renderSingleColumn(o);
}
}
class F {
constructor(t) {
s(this, "element");
s(this, "ctx");
s(this, "root");
s(this, "width", 30);
s(this, "height");
s(this, "resizerHeight", 1);
this.root = t, this.element = this.createElement();
const e = this.element.getContext("2d");
if (!e)
throw new Error("Enable hardware acceleration");
this.ctx = e, this.height = this.root.viewProps.height;
}
createElement() {
const t = document.createElement("canvas");
return t.style.position = "absolute", t.style.height = this.root.viewProps.height + "px", t.style.width = this.width + "px", t.style.display = "block", t.style.borderTop = "1px solid black", t.width = this.width, t.height = this.root.viewProps.height, t;
}
setElementPosition(t, e) {
this.element.style.top = t + "px", this.element.style.left = e + "px";
}
isRowSelected(t) {
const { selectedCell: e, selectedRange: o } = this.root.selection;
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;
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);
}
renderRect(t, e) {
const { y: o, height: i } = e, r = this.isRowSelected(t);
this.ctx.fillStyle = r ? this.root.styles.cells.selectedBackground : "white", this.ctx.strokeStyle = "black", this.ctx.lineWidth = this.resizerHeight;
const l = o - this.root.viewport.top;
this.ctx.fillRect(0, l - 1, this.width, i), this.ctx.strokeRect(0, l - 1, this.width, i);
}
renderSingleRow(t) {
const e = new w(this.root.config, {
column: 0,
row: t
});
this.renderRect(t, e), this.renderText(t, e);
}
renderBar() {
const t = this.root.viewport.lastRow + 3, e = this.root.viewport.firstRow;
this.ctx.beginPath(), this.ctx.moveTo(0, 0), this.ctx.strokeStyle = "black", this.ctx.lineWidth = 16, this.ctx.lineTo(35, 0), this.ctx.closePath(), this.ctx.stroke();
for (let o = e; o <= t && this.root.config.rows[o]; o++)
this.renderSingleRow(o);
}
}
const a = "modern_sc_";
class Y {
constructor(t, e) { constructor(t, e) {
s(this, "table"); s(this, "table");
s(this, "scroller"); s(this, "scroller");
s(this, "toolbar"); s(this, "toolbar");
s(this, "header"); s(this, "rowsBar");
s(this, "columnsBar");
s(this, "sheet"); s(this, "sheet");
s(this, "editor"); s(this, "editor");
s(this, "styles"); s(this, "styles");
@ -471,41 +571,52 @@ class X {
s(this, "viewport"); s(this, "viewport");
s(this, "selection"); s(this, "selection");
s(this, "cache"); s(this, "cache");
const o = p(40, 40), l = this.makeConfigFromData(o, (e == null ? void 0 : e.view) ?? { height: 600, width: 800 }); const o = y(40, 40), i = this.makeConfigFromData(o, (e == null ? void 0 : e.view) ?? { height: 600, width: 800 });
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(); 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();
}
setRowsBarPosition() {
const t = this.columnsBar.height + this.toolbar.height, e = 0;
this.rowsBar.setElementPosition(t, e);
}
setColumnsBarPosition() {
const t = this.toolbar.height, e = this.rowsBar.width;
console.log(t, e), this.columnsBar.setElementPosition(t, e);
}
setElementsPositions() {
this.setRowsBarPosition(), this.setColumnsBarPosition();
} }
getInitialCache() { getInitialCache() {
const t = []; const t = [];
let e = 0; let e = 0;
for (let i = 0; i <= this.config.columns.length - 1; i++) { for (let l = 0; l <= this.config.columns.length - 1; l++) {
const c = this.config.columns[i]; const h = this.config.columns[l];
e += c.width; e += h.width;
const h = new M({ const c = new M({
xPos: e, xPos: e,
colIdx: i colIdx: l
}); });
t.push(h); t.push(c);
} }
const o = []; const o = [];
let l = 0; let i = 0;
for (let i = 0; i <= this.config.rows.length - 1; i++) { for (let l = 0; l <= this.config.rows.length - 1; l++) {
const c = this.config.rows[i]; const h = this.config.rows[l];
l += c.height; i += h.height;
const h = new F({ const c = new z({
yPos: l, yPos: i,
rowIdx: i rowIdx: l
}); });
o.push(h); o.push(c);
} }
const n = new T({ const r = new D({
columns: t, columns: t,
rows: o rows: o
}); });
return console.log("CACHE: ", n), console.log("CONFIG: ", this.config), n; return console.log("CACHE: ", r), console.log("CONFIG: ", this.config), r;
} }
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(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); 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);
} }
/**Destroy spreadsheet DOM element. /**Destroy spreadsheet DOM element.
* *
@ -534,6 +645,15 @@ class X {
get viewProps() { get viewProps() {
return this.config.view; return this.config.view;
} }
get columnsBarHeight() {
return this.columnsBar.height;
}
get rowsBarWidth() {
return this.rowsBar.width;
}
get toolbarHeight() {
return this.toolbar.height;
}
/** Focusing on interactive part of spreadsheet */ /** Focusing on interactive part of spreadsheet */
focusTable() { focusTable() {
this.scroller.element.focus(); this.scroller.element.focus();
@ -546,19 +666,19 @@ class X {
return this.data[o][e]; return this.data[o][e];
} }
changeCellValues(t, e) { changeCellValues(t, e) {
const { column: o, row: l } = t; const { column: o, row: i } = t;
this.data[l][o].changeValues(e), this.renderCell(l, o); this.data[i][o].changeValues(e), this.renderCell(i, o);
} }
changeCellStyles(t, e) { changeCellStyles(t, e) {
const { column: o, row: l } = t; const { column: o, row: i } = t;
this.data[l][o].changeStyles(e), this.renderCell(l, o); this.data[i][o].changeStyles(e), this.renderCell(i, o);
} }
applyActionToRange(t, e) { applyActionToRange(t, e) {
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); 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);
for (let c = o; c <= l; c++) for (let h = o; h <= i; h++)
for (let h = n; h <= i; h++) { for (let c = r; c <= l; c++) {
const a = this.data[c][h]; const u = this.data[h][c];
e(a); e(u);
} }
} }
deleteSelectedCellsValues() { deleteSelectedCellsValues() {
@ -586,78 +706,84 @@ class X {
renderSheet() { renderSheet() {
this.sheet.renderSheet(); this.sheet.renderSheet();
} }
renderColumnsBar() {
this.columnsBar.renderBar();
}
renderRowsBar() {
this.rowsBar.renderBar();
}
renderCell(t, e) { renderCell(t, e) {
this.data[t][e].render(this); this.data[t][e].render(this);
} }
loadData(t) { loadData(t) {
const e = t.length, o = 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 i = [];
for (let n = 0; n < e; n++) { for (let r = 0; r < e; r++) {
const i = []; const l = [];
for (let c = 0; c < o; c++) { for (let h = 0; h < o; h++) {
const h = t[n][c]; const c = t[r][h];
i.push(new f({ l.push(new C({
displayValue: h.displayValue, displayValue: c.displayValue,
position: h.position, position: c.position,
resultValue: h.resultValue, resultValue: c.resultValue,
value: h.value, value: c.value,
style: h.style style: c.style
})); }));
} }
l.push(i); i.push(l);
} }
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; 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;
} }
makeConfigFromData(t, e) { makeConfigFromData(t, e) {
const o = t.length - 1, l = t[0] ? t[0].length : 0, n = []; const o = t.length - 1, i = t[0] ? t[0].length : 0, r = [];
for (let h = 0; h < o; h++) for (let c = 0; c < o; c++)
n.push(new y({ r.push(new p({
height: 40, height: 40,
title: String(h) title: String(c)
})); }));
const i = []; const l = [];
for (let h = 0; h < l; h++) for (let c = 0; c < i; c++)
i.push(new C({ l.push(new x({
width: 150, width: 150,
title: String(h) title: String(c)
})); }));
return new u({ return new m({
view: e, view: e,
rows: n, rows: r,
columns: i columns: l
}); });
} }
serializeData() { serializeData() {
const t = this.data.length, e = this.data[0] ? this.data[0].length : 0, o = []; const t = this.data.length, e = this.data[0] ? this.data[0].length : 0, o = [];
for (let l = 0; l < t; l++) { for (let i = 0; i < t; i++) {
const n = []; const r = [];
for (let i = 0; i < e; i++) for (let l = 0; l < e; l++)
n.push(this.data[l][i].getSerializableCell()); r.push(this.data[i][l].getSerializableCell());
o.push(n); o.push(r);
} }
return o; return o;
} }
} }
export { export {
d as CSS_PREFIX, a as CSS_PREFIX,
T as Cache, D as Cache,
M as CachedColumn, M as CachedColumn,
F as CachedRow, z as CachedRow,
f as Cell, C as Cell,
k as CellStyles, B as CellStyles,
C as Column, x as Column,
u as Config, m as Config,
V as Position, k as Position,
m as RenderBox, w as RenderBox,
y as Row, p as Row,
B as Selection, P as Selection,
E as SerializableCell, E as SerializableCell,
z as Styles, T as Styles,
g as Viewport, f as Viewport,
D as createSampleConfig, A as createSampleConfig,
p as createSampleData, y as createSampleData,
X as default, Y as default,
H as makeSpreadsheetConfigAndData X 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

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

@ -41,14 +41,14 @@ export declare class Cell {
value: string; value: string;
/** Value to render */ /** 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 | null; style: CellStyles | null;
constructor(props: CellConstructorProps); constructor(props: CellConstructorProps);
getSerializableCell(): SerializableCell; getSerializableCell(): SerializableCell;
changeStyles(styles: CellStyles): void; 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;
} }

2
dist/style.css vendored
View File

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

2
src/components/columnsBar.ts
View File

@ -5,7 +5,7 @@ export class ColumnsBar {
private root: Spreadsheet; private root: Spreadsheet;
public height: number = 32; public height: number = 32;
public width: number; public width: number;
private resizerWidth = 1; // private resizerWidth = 1;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
constructor(root: Spreadsheet) { constructor(root: Spreadsheet) {