From 90421f0b7c569f9f78aaaabd5f2eea70003b204c Mon Sep 17 00:00:00 2001 From: Eugene Date: Thu, 20 Jul 2023 10:35:21 +0300 Subject: [PATCH] Removed prefixes Added spreadsheet config Added SCSS support --- package.json | 3 ++ pnpm-lock.yaml | 107 +++++++++++++++++++++++++++++++++++-- src/components/editor.ts | 3 +- src/components/scroller.ts | 9 +++- src/components/sheet.ts | 23 +------- src/components/table.ts | 11 +++- src/main.ts | 27 +++++----- src/modules/config.ts | 29 ++++++++-- src/scss/_global.scss | 4 ++ src/scss/_spreadsheet.scss | 0 src/scss/main.scss | 2 + 11 files changed, 175 insertions(+), 43 deletions(-) create mode 100644 src/scss/_global.scss create mode 100644 src/scss/_spreadsheet.scss create mode 100644 src/scss/main.scss diff --git a/package.json b/package.json index d9c2b26..653a689 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,8 @@ "devDependencies": { "typescript": "^5.0.2", "vite": "^4.4.0" + }, + "dependencies": { + "sass": "^1.63.6" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6cd244b..3a2420a 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/editor.ts b/src/components/editor.ts index 2db17f8..9111b2a 100644 --- a/src/components/editor.ts +++ b/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' diff --git a/src/components/scroller.ts b/src/components/scroller.ts index 6499ec3..88f2f13 100644 --- a/src/components/scroller.ts +++ b/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' + } } \ No newline at end of file diff --git a/src/components/sheet.ts b/src/components/sheet.ts index 68242dc..5bedcae 100644 --- a/src/components/sheet.ts +++ b/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) } } \ No newline at end of file diff --git a/src/components/table.ts b/src/components/table.ts index df6d1c1..4e2b008 100644 --- a/src/components/table.ts +++ b/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' } } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index f320332..6c38849 100644 --- a/src/main.ts +++ b/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) diff --git a/src/modules/config.ts b/src/modules/config.ts index 0633b80..cedf03b 100644 --- a/src/modules/config.ts +++ b/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 ?? [] } } \ No newline at end of file diff --git a/src/scss/_global.scss b/src/scss/_global.scss new file mode 100644 index 0000000..7ea5983 --- /dev/null +++ b/src/scss/_global.scss @@ -0,0 +1,4 @@ +body { + padding: 0px; + margin: 0px; +} \ No newline at end of file diff --git a/src/scss/_spreadsheet.scss b/src/scss/_spreadsheet.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000..c080071 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,2 @@ +@import 'global.scss'; +@import 'spreadsheet.scss'; \ No newline at end of file