Removed prefixes

Added spreadsheet config
Added SCSS support

package.json

@@ -11,5 +11,8 @@
   "devDependencies": {
     "typescript": "^5.0.2",
     "vite": "^4.4.0"
+  },
+  "dependencies": {
+    "sass": "^1.63.6"
   }
 }

pnpm-lock.yaml

@@ -4,13 +4,18 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  sass:
+    specifier: ^1.63.6
+    version: 1.63.6
+
 devDependencies:
   typescript:
     specifier: ^5.0.2
     version: 5.0.2
   vite:
     specifier: ^4.4.0
-    version: 4.4.0
+    version: 4.4.0(sass@1.63.6)
 
 packages:
 
@@ -212,6 +217,37 @@ packages:
     dev: true
     optional: true
 
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   /esbuild@0.18.14:
     resolution: {integrity: sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==}
     engines: {node: '>=12'}
@@ -242,24 +278,66 @@ packages:
       '@esbuild/win32-x64': 0.18.14
     dev: true
 
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+
   /fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /immutable@4.3.1:
+    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
     dev: true
 
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
 
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
   /postcss@8.4.26:
     resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -269,6 +347,12 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+
   /rollup@3.26.3:
     resolution: {integrity: sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -277,10 +361,24 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /sass@1.63.6:
+    resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.1
+      source-map-js: 1.0.2
+
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
 
   /typescript@5.0.2:
     resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
@@ -288,7 +386,7 @@ packages:
     hasBin: true
     dev: true
 
-  /vite@4.4.0:
+  /vite@4.4.0(sass@1.63.6):
     resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -319,6 +417,7 @@ packages:
       esbuild: 0.18.14
       postcss: 8.4.26
       rollup: 3.26.3
+      sass: 1.63.6
     optionalDependencies:
       fsevents: 2.3.2
     dev: true

src/components/editor.ts

@@ -7,10 +7,11 @@ export class Editor {
         this.root = root
         const element = document.createElement('input')
         this.element = element
+        this.hide()
     }
     
     hide() {
-        this.element.style.display = 'hidden'
+        this.element.style.display = 'none'
     }
     show() {
         this.element.style.display = 'block'

src/components/scroller.ts

@@ -6,7 +6,14 @@ export class Scroller {
     constructor(root: Spreadsheet) {
         this.root = root
         const scroller = document.createElement('div')
-        scroller.classList.add(this.root.cssPrefix + 'scroller')
+        scroller.classList.add('scroller')
         this.element = scroller
     }
+    setScrollerHeight(height: number) {
+        this.element.style.height = height + 'px'
+    }
+
+    setScrollerWidth(width: number) {
+        this.element.style.width = width + 'px'
+    }
 }

src/components/sheet.ts

@@ -1,34 +1,15 @@
 import { Spreadsheet } from "../main"
-import { Column } from "../modules/column"
-import { Row } from "../modules/row"
-
-export type SheetConfigConstructorProps = {
-    rows: Row[]
-    columns: Column[]
-}
-
-export class SheetConfig {
-    rows: Row[]
-    columns: Column[]
-
-    constructor(props: SheetConfigConstructorProps) {
-        this.rows = props.rows
-        this.columns = props.columns
-    }
-}
 
 /**
  * Display (CANVAS) element where cells render
  */
 export class Sheet {
     element: HTMLCanvasElement
-    config: SheetConfig
     root: Spreadsheet
-    constructor(root: Spreadsheet, sheetConfig: SheetConfig) {
+    constructor(root: Spreadsheet) {
         this.root = root
         const canvas = document.createElement('canvas')
-        canvas.classList.add(this.root.cssPrefix + 'sheet')
+        canvas.classList.add('sheet')
         this.element = canvas
-        this.config = new SheetConfig(sheetConfig)
     }
 }

src/components/table.ts

@@ -1,4 +1,5 @@
 import { Spreadsheet } from "../main"
+import { ViewProperties } from "../modules/config"
 
 /** Base (root) component */
 export class Table {
@@ -7,7 +8,15 @@ export class Table {
     constructor(root: Spreadsheet) {
         this.root = root
         const container = document.createElement('div')
-        container.classList.add(this.root.cssPrefix + 'spreadsheet_container')
+        container.classList.add('spreadsheet_container')
         this.element = container
+
+        this.changeElementSizes(this.root.viewProps)
+    }
+
+    changeElementSizes(sizes: ViewProperties) {
+        const { height, width } = sizes
+        this.element.style.width = width + 'px'
+        this.element.style.height = height + 'px'
     }
 }

src/main.ts

@@ -4,9 +4,9 @@ import { Scroller } from "./components/scroller";
 import { Sheet } from "./components/sheet";
 import { Table } from "./components/table";
 import { Toolbar } from "./components/toolbar";
-// import { Viewport } from "./components/viewport";
 import { Config, ConfigProperties } from "./modules/config";
 import { Styles } from "./modules/styles";
+import './scss/main.scss'
 
 /*
  * Component structure
@@ -27,26 +27,27 @@ export class Spreadsheet {
     private header: Header
     private sheet: Sheet
     private editor: Editor
-    // private viewport: Viewport
     public styles: Styles
     private config: Config
 
-    get cssPrefix() {
-        return this.config.css_prefix
+
+    get viewProps() {
+        return this.config.view
     }
 
     constructor(target: string | HTMLElement, config?: ConfigProperties) {
-        this.config = new Config(config)
+        let defaultConfig: ConfigProperties = {
+            columns: [],
+            rows: []
+        }
+        this.config = new Config(config ? config : defaultConfig)
         this.styles = new Styles()
 
         this.table = new Table(this)
         this.scroller = new Scroller(this)
         this.toolbar = new Toolbar(this)
         this.header = new Header(this)
-        this.sheet = new Sheet(this, {
-            columns: [],
-            rows: []
-        })
+        this.sheet = new Sheet(this)
         this.editor = new Editor(this)
         // this.viewport = new Viewport()
 
@@ -56,7 +57,7 @@ export class Spreadsheet {
 
     private buildComponent(): void {
         const content = document.createElement('div')   //* Abstract
-        content.classList.add(this.cssPrefix + 'content')
+        content.classList.add('content')
         content.appendChild(this.header.element)
         content.appendChild(this.sheet.element)
 
@@ -78,5 +79,7 @@ export class Spreadsheet {
     }
 }
 
-const spreadsheet = new Spreadsheet('#spreadsheet')
-console.log(spreadsheet.cssPrefix)
+const spreadsheet = new Spreadsheet('#spreadsheet', {
+})
+
+console.log(spreadsheet)

src/modules/config.ts

@@ -1,3 +1,11 @@
+import { Column } from "./column"
+import { Row } from "./row"
+
+export interface ViewProperties {
+    width: number
+    height: number
+}
+
 export type ConfigProperties = {
     /** Please, end it with '_' symbol. 
      * 
@@ -5,13 +13,28 @@ export type ConfigProperties = {
      * 
      *      'test_'
      *      'google_' */
-    css_prefix?: string
+    rows?: Row[]
+    columns?: Column[]
+    view?: ViewProperties
+}
+
+
+export type SheetConfigConstructorProps = {
+    rows: Row[]
+    columns: Column[]
 }
 
 export class Config {
-    css_prefix: string = 'zmeya_'
-    constructor(props?: ConfigProperties) {
+    rows: Row[]
+    columns: Column[]
+    view: ViewProperties = {
+        width: 800,
+        height: 600,
+    }
+    constructor(props: ConfigProperties) {
         // Override default config by users config
         Object.assign(this, props)
+        this.rows = props.rows ?? []
+        this.columns = props.columns ?? []
     }
 }

src/scss/_global.scss

@@ -0,0 +1,4 @@
+body {
+    padding: 0px;
+    margin: 0px;
+}

src/scss/main.scss

@@ -0,0 +1,2 @@
+@import 'global.scss';
+@import 'spreadsheet.scss';