Updated styles

Updated README

README.md

@@ -1,9 +1,13 @@
 # Modern Spreadsheet
 
+## Features:
 - High performance spreadsheet based on CanvasAPI.
 - TypeScript supported
+- Native scrolling
+- Customizable
+- Copy & Paste support
 
-## Basic usage
+### Basic usage
 
 ```ts
 import Spreadsheet from "modern_spreadsheet";
@@ -14,7 +18,7 @@ const sheet = new Spreadsheet(target);
 //...
 ```
 
-## Save and load data
+### Save and load data
 
 ```ts
 function saveData() {
@@ -30,7 +34,7 @@ function loadData() {
 }
 ```
 
-## Supported events
+#### Supported events
 - onCellClick
 - onSelectionChange
 - onCellChange
@@ -58,7 +62,7 @@ const options: SpreadsheetConstructorProperties = {
 const sheet = new Spreadsheet("#spreadsheet", options);
 ```
 
-## Roadmap
+### Roadmap
 
 - ~~Rows number and columns heading render~~
 - ~~Custom event functions (ex.: onSelectionChange, onCellEdit...). Full list of supported events will available on this page~~

src/components/columnsBar.ts

@@ -83,7 +83,7 @@ export class ColumnsBar {
     const isColSelected = this.isColumnSelected(column);
 
     this.ctx.fillStyle = isColSelected
-      ? this.root.styles.cells.selectedBackground
+      ? "#c7ebff"
       : "white";
     this.ctx.strokeStyle = "black";
     this.ctx.lineWidth = 1;

src/components/rowsBar.ts

@@ -70,7 +70,7 @@ export class RowsBar {
     const isRowSeleted = this.isRowSelected(column);
 
     this.ctx.fillStyle = isRowSeleted
-      ? this.root.styles.cells.selectedBackground
+      ? "#c7ebff"
       : "white";
     this.ctx.strokeStyle = "black";
     this.ctx.lineWidth = this.resizerHeight;

src/components/sheet.ts

@@ -81,7 +81,10 @@ export class Sheet {
       return { x, y, height, width }
     }
     if (!selectedRange && selectedCell) {
-      return new RenderBox(this.root.config, selectedCell)
+      const box = new RenderBox(this.root.config, selectedCell)
+      box.x -= this.root.viewport.left
+      box.y -= this.root.viewport.top
+      return box
     }
   }
 

src/index.ts

@@ -1,4 +1,4 @@
-import Spreadsheet, { SpreadsheetConstructorProperties } from "./main";
+import Spreadsheet, { SpreadsheetConstructorProperties, createSampleData } from "./main";
 
 const options: SpreadsheetConstructorProperties = {
   onCellClick: (event, cell) => {
@@ -17,6 +17,9 @@ const options: SpreadsheetConstructorProperties = {
 
 const sheet = new Spreadsheet("#spreadsheet", options);
 
+const data = createSampleData(600, 800, true)
+sheet.loadData(data)
+
 function saveDataToLS() {
   const serializableData = sheet.serializeData();
   localStorage.setItem("sheet", JSON.stringify(serializableData));