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

Linted code

This commit is contained in:
Eugene 2023-07-25 23:57:19 +03:00
parent 0f277badb9
commit 06dd0a0cdf
14 changed files with 1351 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.cjs
View File

@ -4,7 +4,11 @@ module.exports = {
es2021: true,
node: true,
},
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
],
overrides: [
{
env: {

4
README.md
View File

@ -1,8 +1,10 @@
# Modern Spreadsheet
- High performance spreadsheet based on CanvasAPI.
- TypeScript supported
## Basic usage
```ts
import Spreadsheet from "modern_spreadsheet";
import "modern_spreadsheet/style.css"; // <= this is required
@ -13,6 +15,7 @@ const sheet = new Spreadsheet(target);
```
## Save and load data
```ts
function saveData() {
const serialized = sheet.serializeData();
@ -28,6 +31,7 @@ function loadData() {
```
## Roadmap
- ~~Rows number and columns heading render~~
- Custom event functions (ex.: onSelectionChange, onCellEdit...). Full list of supported events will available on this page
- Rows and columns resizing

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spreadsheet example</title>
</head>
<body style="padding: 2rem;">
<body style="padding: 2rem">
<div id="spreadsheet"></div>
<button id="save_button">Save sheet</button>
<button id="load_button">Load sheet</button>

1472
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

106
src/components/columnsBar.ts
View File

@ -1,54 +1,54 @@
import Spreadsheet, { RenderBox } from "../main"
import Spreadsheet, { RenderBox } from "../main";
export class ColumnsBar {
public element: HTMLCanvasElement
private root: Spreadsheet
public height: number = 32
public width: number
private resizerWidth = 1
ctx: CanvasRenderingContext2D
public element: HTMLCanvasElement;
private root: Spreadsheet;
public height: number = 32;
public width: number;
private resizerWidth = 1;
ctx: CanvasRenderingContext2D;
constructor(root: Spreadsheet) {
this.root = root
this.element = this.createElement()
const ctx = this.element.getContext('2d')
this.root = root;
this.element = this.createElement();
const ctx = this.element.getContext("2d");
if (!ctx) throw new Error("Enable hardware acceleration");
this.ctx = ctx
this.ctx = ctx;
this.width = this.root.viewProps.width
this.width = this.root.viewProps.width;
}
private createElement(): HTMLCanvasElement {
const element = document.createElement('canvas')
element.style.position = 'absolute'
element.style.height = this.height + 'px'
element.style.width = this.root.viewProps.width + 'px'
element.style.display = 'block'
element.style.borderLeft = '1px solid black'
const element = document.createElement("canvas");
element.style.position = "absolute";
element.style.height = this.height + "px";
element.style.width = this.root.viewProps.width + "px";
element.style.display = "block";
element.style.borderLeft = "1px solid black";
// element.style.boxSizing = 'border-box'
element.width = this.root.viewProps.width
element.height = this.height
return element
element.width = this.root.viewProps.width;
element.height = this.height;
return element;
}
public setElementPosition(top: number, left: number) {
this.element.style.top = top + 'px'
this.element.style.left = left + 'px'
this.element.style.top = top + "px";
this.element.style.left = left + "px";
}
private isColumnSelected(column: number): boolean {
const { selectedCell, selectedRange } = this.root.selection
if (selectedCell && selectedCell.column === column) return true
const { selectedCell, selectedRange } = this.root.selection;
if (selectedCell && selectedCell.column === column) return true;
if (selectedRange) {
const inRange =
column >= Math.min(selectedRange.from.column, selectedRange.to.column) &&
column <= Math.max(selectedRange.from.column, selectedRange.to.column)
column >=
Math.min(selectedRange.from.column, selectedRange.to.column) &&
column <= Math.max(selectedRange.from.column, selectedRange.to.column);
return inRange
return inRange;
}
return false
return false;
}
// private getYCoordWithOffset(renderBox: RenderBox): number {
@ -64,38 +64,44 @@ export class ColumnsBar {
// }
private renderText(column: number, renderBox: RenderBox) {
const { width, x } = renderBox
const { width, x } = renderBox;
this.ctx.fillStyle = 'black'
this.ctx.textAlign = 'center'
this.ctx.textBaseline = 'middle'
this.ctx.font = '16px Arial'
this.ctx.fillText(this.root.config.columns[column].title, x + (width / 2) - this.root.viewport.left, 0 + this.height / 2)
this.ctx.fillStyle = "black";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.font = "16px Arial";
this.ctx.fillText(
this.root.config.columns[column].title,
x + width / 2 - this.root.viewport.left,
0 + this.height / 2,
);
}
private renderRect(column: number, renderBox: RenderBox) {
const { width, x } = renderBox
const { width, x } = renderBox;
const isColSelected = this.isColumnSelected(column)
const isColSelected = this.isColumnSelected(column);
this.ctx.fillStyle = isColSelected ? this.root.styles.cells.selectedBackground : 'white'
this.ctx.strokeStyle = 'black'
this.ctx.lineWidth = 1
this.ctx.fillStyle = isColSelected
? this.root.styles.cells.selectedBackground
: "white";
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = 1;
const specialX = x - this.root.viewport.left
const specialX = x - this.root.viewport.left;
this.ctx.fillRect(specialX - 1 , 0, width, this.height)
this.ctx.strokeRect(specialX - 1, 0, width, this.height)
this.ctx.fillRect(specialX - 1, 0, width, this.height);
this.ctx.strokeRect(specialX - 1, 0, width, this.height);
}
private renderSingleColumn(column: number) {
const renderBox = new RenderBox(this.root.config, {
row: 0,
column: column
})
column: column,
});
this.renderRect(column, renderBox)
this.renderText(column, renderBox)
this.renderRect(column, renderBox);
this.renderText(column, renderBox);
}
public renderBar() {
@ -103,7 +109,7 @@ export class ColumnsBar {
const firstColIdx = this.root.viewport.firstCol;
this.ctx.beginPath();
this.ctx.strokeStyle = 'black';
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = 1;
this.ctx.moveTo(0, 0);
this.ctx.lineTo(0, this.height);
@ -112,7 +118,7 @@ export class ColumnsBar {
for (let col = firstColIdx; col <= lastColIdx; col++) {
if (!this.root.config.columns[col]) break;
this.renderSingleColumn(col)
this.renderSingleColumn(col);
}
}
}

6
src/components/editor.ts
View File

@ -28,8 +28,10 @@ export class Editor {
const cell = this.root.getCell(position);
this.element.classList.remove("hide");
this.element.style.top = y - this.root.viewport.top + this.root.columnsBarHeight + "px";
this.element.style.left = x - this.root.viewport.left + this.root.rowsBarWidth + "px";
this.element.style.top =
y - this.root.viewport.top + this.root.columnsBarHeight + "px";
this.element.style.left =
x - this.root.viewport.left + this.root.rowsBarWidth + "px";
this.element.style.width = width + "px";
this.element.style.height = height + "px";
this.element.style.display = "block";

104
src/components/rowsBar.ts
View File

@ -1,91 +1,94 @@
import Spreadsheet, { RenderBox } from "../main";
export class RowsBar {
element: HTMLCanvasElement
ctx: CanvasRenderingContext2D
root: Spreadsheet
width: number = 30
height: number
resizerHeight = 1
element: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
root: Spreadsheet;
width: number = 30;
height: number;
resizerHeight = 1;
constructor(root: Spreadsheet) {
this.root = root
this.element = this.createElement()
const ctx = this.element.getContext('2d')
this.root = root;
this.element = this.createElement();
const ctx = this.element.getContext("2d");
if (!ctx) throw new Error("Enable hardware acceleration");
this.ctx = ctx
this.ctx = ctx;
this.height = this.root.viewProps.height
this.height = this.root.viewProps.height;
}
private createElement() {
const element = document.createElement('canvas')
const element = document.createElement("canvas");
element.style.position = 'absolute'
element.style.height = this.root.viewProps.height + 'px'
element.style.width = this.width + 'px'
element.style.display = 'block'
element.style.borderTop = '1px solid black'
element.style.position = "absolute";
element.style.height = this.root.viewProps.height + "px";
element.style.width = this.width + "px";
element.style.display = "block";
element.style.borderTop = "1px solid black";
// element.style.boxSizing = 'border-box'
element.width = this.width
element.height = this.root.viewProps.height
return element
element.width = this.width;
element.height = this.root.viewProps.height;
return element;
}
public setElementPosition(top: number, left: number) {
this.element.style.top = top + 'px'
this.element.style.left = left + 'px'
this.element.style.top = top + "px";
this.element.style.left = left + "px";
}
private isRowSelected(row: number): boolean {
const { selectedCell, selectedRange } = this.root.selection
if (selectedCell && selectedCell.row === row) return true
const { selectedCell, selectedRange } = this.root.selection;
if (selectedCell && selectedCell.row === row) return true;
if (selectedRange) {
const inRange =
row >= Math.min(selectedRange.from.row, selectedRange.to.row) &&
row <= Math.max(selectedRange.from.row, selectedRange.to.row)
row <= Math.max(selectedRange.from.row, selectedRange.to.row);
return inRange
return inRange;
}
return false
return false;
}
private renderText(row: number, renderBox: RenderBox) {
const { y, height } = renderBox
const { y, height } = renderBox;
this.ctx.fillStyle = 'black'
this.ctx.textAlign = 'center'
this.ctx.textBaseline = 'middle'
this.ctx.font = '16px Arial'
this.ctx.fillText(this.root.config.rows[row].title, this.width / 2, y - this.root.viewport.top + height / 2)
this.ctx.fillStyle = "black";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.font = "16px Arial";
this.ctx.fillText(
this.root.config.rows[row].title,
this.width / 2,
y - this.root.viewport.top + height / 2,
);
}
private renderRect(column: number, renderBox: RenderBox) {
const { y, height } = renderBox
const { y, height } = renderBox;
const isRowSeleted = this.isRowSelected(column);
const isRowSeleted = this.isRowSelected(column)
this.ctx.fillStyle = isRowSeleted
? this.root.styles.cells.selectedBackground
: "white";
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = this.resizerHeight;
this.ctx.fillStyle = isRowSeleted ? this.root.styles.cells.selectedBackground : 'white'
this.ctx.strokeStyle = 'black'
this.ctx.lineWidth = this.resizerHeight
const specialY = y - this.root.viewport.top;
const specialY = y - this.root.viewport.top
this.ctx.fillRect(0, specialY - 1, this.width, height )
this.ctx.strokeRect(0, specialY - 1, this.width, height )
this.ctx.fillRect(0, specialY - 1, this.width, height);
this.ctx.strokeRect(0, specialY - 1, this.width, height);
}
private renderSingleRow(row: number) {
const renderBox = new RenderBox(this.root.config, {
column: 0,
row: row
})
row: row,
});
this.renderRect(row, renderBox)
this.renderText(row, renderBox)
this.renderRect(row, renderBox);
this.renderText(row, renderBox);
}
public renderBar() {
@ -94,7 +97,7 @@ export class RowsBar {
this.ctx.beginPath();
this.ctx.moveTo(0, 0);
this.ctx.strokeStyle = 'black';
this.ctx.strokeStyle = "black";
this.ctx.lineWidth = 16;
this.ctx.lineTo(35, 0);
this.ctx.closePath();
@ -102,8 +105,7 @@ export class RowsBar {
for (let row = firstRowIdx; row <= lastRowIdx; row++) {
if (!this.root.config.rows[row]) break;
this.renderSingleRow(row)
this.renderSingleRow(row);
}
}
}

14
src/components/scroller.ts
View File

@ -25,8 +25,8 @@ export class Scroller {
this.element.style.height = this.root.config.view.height + "px";
this.element.style.width = this.root.config.view.width + "px";
this.element.style.top = this.root.columnsBarHeight + 'px'
this.element.style.left = this.root.rowsBarWidth + 'px'
this.element.style.top = this.root.columnsBarHeight + "px";
this.element.style.left = this.root.rowsBarWidth + "px";
this.element.tabIndex = -1;
this.updateScrollerSize(); //* Init size set
@ -168,18 +168,20 @@ export class Scroller {
this.root.selection.selectedCell = clickedCell;
this.root.renderSheet();
this.root.renderColumnsBar()
this.root.renderColumnsBar();
this.root.renderRowsBar(); };
this.root.renderRowsBar();
};
private handleScroll = () => {
const rect = this.getViewportBoundlingRect();
this.root.viewport.updateValues(rect);
this.root.renderSheet();
this.root.renderColumnsBar()
this.root.renderColumnsBar();
this.root.renderRowsBar(); };
this.root.renderRowsBar();
};
public getViewportBoundlingRect(): ViewportRect {
const { scrollTop, scrollLeft } = this.element;

2
src/components/sheet.ts
View File

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

2
src/components/toolbar.ts
View File

@ -3,7 +3,7 @@ import Spreadsheet, { CSS_PREFIX } from "../main";
export class Toolbar {
element: HTMLDivElement;
root: Spreadsheet;
height: number = 0
height: number = 0;
constructor(root: Spreadsheet) {
this.root = root;
const toolbarElement = document.createElement("div");

50
src/main.ts
View File

@ -45,8 +45,8 @@ export default class Spreadsheet {
private table: Table;
private scroller: Scroller;
private toolbar: Toolbar;
private rowsBar: RowsBar
private columnsBar: ColumnsBar
private rowsBar: RowsBar;
private columnsBar: ColumnsBar;
private sheet: Sheet;
private editor: Editor;
public styles: Styles;
@ -71,8 +71,8 @@ export default class Spreadsheet {
this.config = new Config(config);
this.rowsBar = new RowsBar(this)
this.columnsBar = new ColumnsBar(this)
this.rowsBar = new RowsBar(this);
this.columnsBar = new ColumnsBar(this);
this.sheet = new Sheet(this);
this.table = new Table(this);
this.scroller = new Scroller(this);
@ -88,28 +88,28 @@ export default class Spreadsheet {
this.data = data;
this.styles = new Styles();
this.buildComponent();
this.setElementsPositions()
this.setElementsPositions();
this.appendTableToTarget(target);
this.renderSheet();
this.renderColumnsBar()
this.renderRowsBar()
this.renderColumnsBar();
this.renderRowsBar();
}
private setRowsBarPosition() {
const top = this.columnsBar.height + this.toolbar.height
const left = 0
this.rowsBar.setElementPosition(top, left)
const top = this.columnsBar.height + this.toolbar.height;
const left = 0;
this.rowsBar.setElementPosition(top, left);
}
private setColumnsBarPosition() {
const top = this.toolbar.height
const left = this.rowsBar.width
console.log(top,left)
this.columnsBar.setElementPosition(top, left)
const top = this.toolbar.height;
const left = this.rowsBar.width;
console.log(top, left);
this.columnsBar.setElementPosition(top, left);
}
private setElementsPositions() {
this.setRowsBarPosition()
this.setColumnsBarPosition()
this.setRowsBarPosition();
this.setColumnsBarPosition();
}
private getInitialCache(): Cache {
@ -149,16 +149,16 @@ export default class Spreadsheet {
private buildComponent(): void {
const content = document.createElement("div"); //* Abstract
content.style.top = this.columnsBarHeight + 'px'
content.style.left = this.rowsBarWidth + 'px'
content.style.top = this.columnsBarHeight + "px";
content.style.left = this.rowsBarWidth + "px";
content.appendChild(this.sheet.element);
content.classList.add(CSS_PREFIX + "content");
this.table.element.appendChild(this.toolbar.element);
this.table.element.appendChild(this.rowsBar.element)
this.table.element.appendChild(this.columnsBar.element)
this.table.element.appendChild(this.rowsBar.element);
this.table.element.appendChild(this.columnsBar.element);
this.table.element.appendChild(content);
this.table.element.appendChild(this.scroller.element);
this.table.element.append(this.editor.element);
@ -199,15 +199,15 @@ export default class Spreadsheet {
}
get columnsBarHeight() {
return this.columnsBar.height
return this.columnsBar.height;
}
get rowsBarWidth() {
return this.rowsBar.width
return this.rowsBar.width;
}
get toolbarHeight() {
return this.toolbar.height
return this.toolbar.height;
}
/** Focusing on interactive part of spreadsheet */
@ -286,11 +286,11 @@ export default class Spreadsheet {
}
renderColumnsBar() {
this.columnsBar.renderBar()
this.columnsBar.renderBar();
}
renderRowsBar() {
this.rowsBar.renderBar()
this.rowsBar.renderBar();
}
renderCell(row: number, col: number) {

4
src/modules/cell.ts
View File

@ -114,8 +114,8 @@ export class Cell {
render(root: Spreadsheet) {
const renderBox = new RenderBox(root.config, this.position);
let {x, y} = renderBox
const {height, width} = renderBox
let { x, y } = renderBox;
const { height, width } = renderBox;
const { ctx } = root;
const isCellSelected =