Added helpers for creating data

Added data field to spreadsheet

src/components/sheet.ts

@@ -5,11 +5,28 @@ import { Spreadsheet } from "../main"
  */
 export class Sheet {
     element: HTMLCanvasElement
+    ctx: CanvasRenderingContext2D
     root: Spreadsheet
     constructor(root: Spreadsheet) {
         this.root = root
         const canvas = document.createElement('canvas')
         canvas.classList.add('sheet')
         this.element = canvas
+
+        const ctx = this.element.getContext('2d')
+        if(!ctx) throw new Error('Enable hardware acceleration')
+        this.ctx = ctx
+    }
+
+    renderSheet() {
+        const {columns, rows} = this.root.config
+        const lastColIdx = columns.length - 1
+        const lastRowIdx = rows.length - 1
+
+        for(let row = 0; row <= lastRowIdx; row++) {
+            for(let col = 0; col <= lastColIdx; col++ ) {
+                this.root.data[row][col].render(this.root.ctx, this.root.config)
+            }
+        }
     }
 }

src/components/toolbar.ts

@@ -6,7 +6,7 @@ export class Toolbar {
     constructor(root: Spreadsheet) {
         this.root = root
         const toolbarElement = document.createElement('div')
-        toolbarElement.classList.add(this.root.cssPrefix + 'toolbar')
+        toolbarElement.classList.add('toolbar')
         this.element = toolbarElement
     }
 }

src/main.ts

@@ -4,9 +4,11 @@ import { Scroller } from "./components/scroller";
 import { Sheet } from "./components/sheet";
 import { Table } from "./components/table";
 import { Toolbar } from "./components/toolbar";
+import { Cell } from "./modules/cell";
 import { Config, ConfigProperties } from "./modules/config";
 import { Styles } from "./modules/styles";
 import './scss/main.scss'
+import { createSampleConfig, createSampleData, makeSpreadsheetConfigAndData } from "./utils/createData";
 
 /*
  * Component structure
@@ -28,19 +30,17 @@ export class Spreadsheet {
     private sheet: Sheet
     private editor: Editor
     public styles: Styles
-    private config: Config
+    public config: Config
+    public data: Cell[][]
 
 
-    get viewProps() {
-        return this.config.view
-    }
 
     constructor(target: string | HTMLElement, config?: ConfigProperties) {
-        let defaultConfig: ConfigProperties = {
-            columns: [],
-            rows: []
-        }
-        this.config = new Config(config ? config : defaultConfig)
+        const data = createSampleData(40, 40)
+        this.data = data
+
+        this.config = new Config(config ?? createSampleConfig(40, 40))
+
         this.styles = new Styles()
 
         this.table = new Table(this)
@@ -49,7 +49,6 @@ export class Spreadsheet {
         this.header = new Header(this)
         this.sheet = new Sheet(this)
         this.editor = new Editor(this)
-        // this.viewport = new Viewport()
 
         this.buildComponent()
         this.appendTableToTarget(target)
@@ -77,9 +76,26 @@ export class Spreadsheet {
             target.append(this.table.element)
         }
     }
+
+    get ctx() {
+        return this.sheet.ctx
+    }
+
+    get viewProps() {
+        return this.config.view
+    }
+
+    renderSheet() {
+        this.sheet.renderSheet()
+    }
+
+    renderCell(row: number, col: number) {
+        this.data[row][col].render(this.ctx, this.config)
+    }
 }
 
-const spreadsheet = new Spreadsheet('#spreadsheet', {
-})
 
+
+const spreadsheet = new Spreadsheet('#spreadsheet')
+spreadsheet.renderSheet()
 console.log(spreadsheet)

src/modules/cell.ts

@@ -0,0 +1,36 @@
+import { Config } from "./config"
+
+export type CellConstructorProps = {
+    value: string
+    displayValue: string
+    resultValue: string
+    position: Position
+}
+
+export class Position {
+    row: number
+    column: number
+    constructor(row: number, column: number) {
+        this.row = row
+        this.column = column
+    }
+}
+
+export class Cell {
+    value: string
+    displayValue: string
+    /** This refers to the values ​​​​that were obtained by calculations, for example, after calculating the formula  */
+    resultValue: string
+    position: Position
+    constructor(props: CellConstructorProps) {
+        this.value = props.value
+        this.displayValue = props.displayValue
+        this.resultValue = props.resultValue
+        this.position = props.position
+    }
+
+    render(ctx: CanvasRenderingContext2D, config: Config) {
+        ctx.fillStyle = 'black'
+        ctx.fillRect(0, 0, 20, 20)
+    }
+}

src/modules/config.ts

@@ -13,9 +13,9 @@ export type ConfigProperties = {
      * 
      *      'test_'
      *      'google_' */
-    rows?: Row[]
-    columns?: Column[]
-    view?: ViewProperties
+    rows: Row[]
+    columns: Column[]
+    view: ViewProperties
 }
 
 
@@ -32,9 +32,8 @@ export class Config {
         height: 600,
     }
     constructor(props: ConfigProperties) {
-        // Override default config by users config
-        Object.assign(this, props)
-        this.rows = props.rows ?? []
-        this.columns = props.columns ?? []
+            this.columns = props.columns
+            this.rows = props.rows
+            this.view = props.view
     }
 }

src/utils/createData.ts

@@ -0,0 +1,73 @@
+import { Cell } from "../modules/cell";
+import { Column } from "../modules/column";
+import { Config } from "../modules/config";
+import { Row } from "../modules/row";
+
+export function createSampleData(rows: number, columns: number): Cell[][] {
+    const data: Cell[][] = []
+
+    for (let row = 0; row <= rows; row++) {
+        const innerRow: Cell[] = []
+        for (let col = 0; col <= columns; col++) {
+            const value = `${row}:${col}`
+
+            const cell = new Cell({
+                displayValue: value,
+                resultValue: value,
+                value,
+                position: {
+                    column: col,
+                    row: row
+                }
+            })
+
+            innerRow.push(cell)
+        }
+        data.push(innerRow)
+    }
+    return data
+}
+
+export function createSampleConfig(rows: number, columns: number): Config {
+
+    const rowsArr: Row[] = []
+    for(let i = 0; i <= rows; i++) {
+        const rowItem = new Row({
+            height: 40,
+            title: String(i)
+        })
+        rowsArr.push(rowItem)
+    }
+
+    const colsArr: Column[] = []
+    for(let i = 0; i <= columns; i++) {
+        const colItem = new Column({
+            title: String(i),
+            width: 150
+        })
+        colsArr.push(colItem)
+    }
+
+    const config = new Config({
+        columns: colsArr,
+        rows: rowsArr,
+        view: {
+            height: 600,
+            width: 800
+        }
+    })
+
+    return config
+}
+
+type SpreadsheetConfigAndDataReturnType = {
+    config: Config,
+    data: Cell[][]
+}
+
+export function makeSpreadsheetConfigAndData(rows: number, columns: number): SpreadsheetConfigAndDataReturnType {
+    const data = createSampleData(rows, columns)
+    const config = createSampleConfig(rows, columns)
+
+    return {data, config}
+}