commit 179d775b88d2f000111a2d4fe24d96c60f5fd271 Author: Eugene Date: Wed Jul 19 17:34:15 2023 +0300 Init commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/index.html b/index.html new file mode 100644 index 0000000..fecfbe5 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + TS + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..d9c2b26 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "spreadsheet", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "devDependencies": { + "typescript": "^5.0.2", + "vite": "^4.4.0" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..6cd244b --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,324 @@ +lockfileVersion: '6.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +devDependencies: + typescript: + specifier: ^5.0.2 + version: 5.0.2 + vite: + specifier: ^4.4.0 + version: 4.4.0 + +packages: + + /@esbuild/android-arm64@0.18.14: + resolution: {integrity: sha512-rZ2v+Luba5/3D6l8kofWgTnqE+qsC/L5MleKIKFyllHTKHrNBMqeRCnZI1BtRx8B24xMYxeU32iIddRQqMsOsg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-arm@0.18.14: + resolution: {integrity: sha512-blODaaL+lngG5bdK/t4qZcQvq2BBqrABmYwqPPcS5VRxrCSGHb9R/rA3fqxh7R18I7WU4KKv+NYkt22FDfalcg==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-x64@0.18.14: + resolution: {integrity: sha512-qSwh8y38QKl+1Iqg+YhvCVYlSk3dVLk9N88VO71U4FUjtiSFylMWK3Ugr8GC6eTkkP4Tc83dVppt2n8vIdlSGg==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/darwin-arm64@0.18.14: + resolution: {integrity: sha512-9Hl2D2PBeDYZiNbnRKRWuxwHa9v5ssWBBjisXFkVcSP5cZqzZRFBUWEQuqBHO4+PKx4q4wgHoWtfQ1S7rUqJ2Q==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@esbuild/darwin-x64@0.18.14: + resolution: {integrity: sha512-ZnI3Dg4ElQ6tlv82qLc/UNHtFsgZSKZ7KjsUNAo1BF1SoYDjkGKHJyCrYyWjFecmXpvvG/KJ9A/oe0H12odPLQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@esbuild/freebsd-arm64@0.18.14: + resolution: {integrity: sha512-h3OqR80Da4oQCIa37zl8tU5MwHQ7qgPV0oVScPfKJK21fSRZEhLE4IIVpmcOxfAVmqjU6NDxcxhYaM8aDIGRLw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/freebsd-x64@0.18.14: + resolution: {integrity: sha512-ha4BX+S6CZG4BoH9tOZTrFIYC1DH13UTCRHzFc3GWX74nz3h/N6MPF3tuR3XlsNjMFUazGgm35MPW5tHkn2lzQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-arm64@0.18.14: + resolution: {integrity: sha512-IXORRe22In7U65NZCzjwAUc03nn8SDIzWCnfzJ6t/8AvGx5zBkcLfknI+0P+hhuftufJBmIXxdSTbzWc8X/V4w==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-arm@0.18.14: + resolution: {integrity: sha512-5+7vehI1iqru5WRtJyU2XvTOvTGURw3OZxe3YTdE9muNNIdmKAVmSHpB3Vw2LazJk2ifEdIMt/wTWnVe5V98Kg==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-ia32@0.18.14: + resolution: {integrity: sha512-BfHlMa0nibwpjG+VXbOoqJDmFde4UK2gnW351SQ2Zd4t1N3zNdmUEqRkw/srC1Sa1DRBE88Dbwg4JgWCbNz/FQ==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-loong64@0.18.14: + resolution: {integrity: sha512-j2/Ex++DRUWIAaUDprXd3JevzGtZ4/d7VKz+AYDoHZ3HjJzCyYBub9CU1wwIXN+viOP0b4VR3RhGClsvyt/xSw==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-mips64el@0.18.14: + resolution: {integrity: sha512-qn2+nc+ZCrJmiicoAnJXJJkZWt8Nwswgu1crY7N+PBR8ChBHh89XRxj38UU6Dkthl2yCVO9jWuafZ24muzDC/A==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-ppc64@0.18.14: + resolution: {integrity: sha512-aGzXzd+djqeEC5IRkDKt3kWzvXoXC6K6GyYKxd+wsFJ2VQYnOWE954qV2tvy5/aaNrmgPTb52cSCHFE+Z7Z0yg==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-riscv64@0.18.14: + resolution: {integrity: sha512-8C6vWbfr0ygbAiMFLS6OPz0BHvApkT2gCboOGV76YrYw+sD/MQJzyITNsjZWDXJwPu9tjrFQOVG7zijRzBCnLw==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-s390x@0.18.14: + resolution: {integrity: sha512-G/Lf9iu8sRMM60OVGOh94ZW2nIStksEcITkXdkD09/T6QFD/o+g0+9WVyR/jajIb3A0LvBJ670tBnGe1GgXMgw==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-x64@0.18.14: + resolution: {integrity: sha512-TBgStYBQaa3EGhgqIDM+ECnkreb0wkcKqL7H6m+XPcGUoU4dO7dqewfbm0mWEQYH3kzFHrzjOFNpSAVzDZRSJw==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/netbsd-x64@0.18.14: + resolution: {integrity: sha512-stvCcjyCQR2lMTroqNhAbvROqRjxPEq0oQ380YdXxA81TaRJEucH/PzJ/qsEtsHgXlWFW6Ryr/X15vxQiyRXVg==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/openbsd-x64@0.18.14: + resolution: {integrity: sha512-apAOJF14CIsN5ht1PA57PboEMsNV70j3FUdxLmA2liZ20gEQnfTG5QU0FhENo5nwbTqCB2O3WDsXAihfODjHYw==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/sunos-x64@0.18.14: + resolution: {integrity: sha512-fYRaaS8mDgZcGybPn2MQbn1ZNZx+UXFSUoS5Hd2oEnlsyUcr/l3c6RnXf1bLDRKKdLRSabTmyCy7VLQ7VhGdOQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-arm64@0.18.14: + resolution: {integrity: sha512-1c44RcxKEJPrVj62XdmYhxXaU/V7auELCmnD+Ri+UCt+AGxTvzxl9uauQhrFso8gj6ZV1DaORV0sT9XSHOAk8Q==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-ia32@0.18.14: + resolution: {integrity: sha512-EXAFttrdAxZkFQmpvcAQ2bywlWUsONp/9c2lcfvPUhu8vXBBenCXpoq9YkUvVP639ld3YGiYx0YUQ6/VQz3Maw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-x64@0.18.14: + resolution: {integrity: sha512-K0QjGbcskx+gY+qp3v4/940qg8JitpXbdxFhRDA1aYoNaPff88+aEwoq45aqJ+ogpxQxmU0ZTjgnrQD/w8iiUg==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /esbuild@0.18.14: + resolution: {integrity: sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.18.14 + '@esbuild/android-arm64': 0.18.14 + '@esbuild/android-x64': 0.18.14 + '@esbuild/darwin-arm64': 0.18.14 + '@esbuild/darwin-x64': 0.18.14 + '@esbuild/freebsd-arm64': 0.18.14 + '@esbuild/freebsd-x64': 0.18.14 + '@esbuild/linux-arm': 0.18.14 + '@esbuild/linux-arm64': 0.18.14 + '@esbuild/linux-ia32': 0.18.14 + '@esbuild/linux-loong64': 0.18.14 + '@esbuild/linux-mips64el': 0.18.14 + '@esbuild/linux-ppc64': 0.18.14 + '@esbuild/linux-riscv64': 0.18.14 + '@esbuild/linux-s390x': 0.18.14 + '@esbuild/linux-x64': 0.18.14 + '@esbuild/netbsd-x64': 0.18.14 + '@esbuild/openbsd-x64': 0.18.14 + '@esbuild/sunos-x64': 0.18.14 + '@esbuild/win32-arm64': 0.18.14 + '@esbuild/win32-ia32': 0.18.14 + '@esbuild/win32-x64': 0.18.14 + dev: true + + /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 + + /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 + + /picocolors@1.0.0: + resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + dev: true + + /postcss@8.4.26: + resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: true + + /rollup@3.26.3: + resolution: {integrity: sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==} + engines: {node: '>=14.18.0', npm: '>=8.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + dev: true + + /source-map-js@1.0.2: + resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + engines: {node: '>=0.10.0'} + dev: true + + /typescript@5.0.2: + resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==} + engines: {node: '>=12.20'} + hasBin: true + dev: true + + /vite@4.4.0: + resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.18.14 + postcss: 8.4.26 + rollup: 3.26.3 + optionalDependencies: + fsevents: 2.3.2 + dev: true diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/header.ts b/src/components/header.ts new file mode 100644 index 0000000..63d359f --- /dev/null +++ b/src/components/header.ts @@ -0,0 +1,7 @@ +export class Header { + element: HTMLHeadElement + constructor() { + const headerElement = document.createElement('header') + this.element = headerElement + } +} \ No newline at end of file diff --git a/src/components/scroller.ts b/src/components/scroller.ts new file mode 100644 index 0000000..9cc493d --- /dev/null +++ b/src/components/scroller.ts @@ -0,0 +1,7 @@ +export class Scroller { + element: HTMLDivElement + constructor() { + const scroller = document.createElement('div') + this.element = scroller + } +} \ No newline at end of file diff --git a/src/components/sheet.ts b/src/components/sheet.ts new file mode 100644 index 0000000..ee84363 --- /dev/null +++ b/src/components/sheet.ts @@ -0,0 +1,11 @@ + +/** + * Display (CANVAS) element where cells render + */ +export class Sheet { + element: HTMLCanvasElement + constructor() { + const canvas = document.createElement('canvas') + this.element = canvas + } +} \ No newline at end of file diff --git a/src/components/table.ts b/src/components/table.ts new file mode 100644 index 0000000..3129d91 --- /dev/null +++ b/src/components/table.ts @@ -0,0 +1,8 @@ +/** Base (root) component */ +export class Table { + element: HTMLDivElement + constructor() { + const container = document.createElement('div') + this.element = container + } +} \ No newline at end of file diff --git a/src/components/toolbar.ts b/src/components/toolbar.ts new file mode 100644 index 0000000..3b13406 --- /dev/null +++ b/src/components/toolbar.ts @@ -0,0 +1,7 @@ +export class Toolbar { + element: HTMLDivElement + constructor() { + const toolbarElement = document.createElement('div') + this.element = toolbarElement + } +} \ No newline at end of file diff --git a/src/components/viewport.ts b/src/components/viewport.ts new file mode 100644 index 0000000..0366bc8 --- /dev/null +++ b/src/components/viewport.ts @@ -0,0 +1,3 @@ +export class Viewport { + +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..e10580c --- /dev/null +++ b/src/main.ts @@ -0,0 +1,73 @@ +import { Header } from "./components/header"; +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"; + +/* + * Component structure + + + //* Abstract +
+ + + +
+*/ + +export class Spreadsheet { + private table: Table + private scroller: Scroller + private toolbar: Toolbar + private header: Header + private sheet: Sheet + // private viewport: Viewport + public styles: Styles + private config: Config + + get cssPrefix() { + return this.config.css_prefix + } + + constructor(target: string | HTMLElement, config?: ConfigProperties) { + this.table = new Table() + this.scroller = new Scroller() + this.toolbar = new Toolbar() + this.header = new Header() + this.sheet = new Sheet() + // this.viewport = new Viewport() + this.styles = new Styles() + this.config = new Config(config) + + this.buildComponent() + this.appendTableToTarget(target) + } + + private buildComponent(): void { + const content = document.createElement('div') //* Abstract + content.appendChild(this.header.element) + content.appendChild(this.sheet.element) + + this.table.element.appendChild(this.toolbar.element) + this.table.element.appendChild(content) + this.table.element.appendChild(this.scroller.element) + } + + private appendTableToTarget(target: string | HTMLElement) { + if (typeof target === 'string') { + const element = document.querySelector(target) + if (!element) throw new Error(`Element with selector ${target} is not finded in DOM.\n Make sure it exists.`) + element?.appendChild(this.table.element) + } + if (target instanceof HTMLElement) { + target.append(this.table.element) + } + } +} + +const spreadsheet = new Spreadsheet('#spreadsheet') +console.log(spreadsheet.cssPrefix) diff --git a/src/modules/config.ts b/src/modules/config.ts new file mode 100644 index 0000000..0633b80 --- /dev/null +++ b/src/modules/config.ts @@ -0,0 +1,17 @@ +export type ConfigProperties = { + /** Please, end it with '_' symbol. + * + * *Example:* + * + * 'test_' + * 'google_' */ + css_prefix?: string +} + +export class Config { + css_prefix: string = 'zmeya_' + constructor(props?: ConfigProperties) { + // Override default config by users config + Object.assign(this, props) + } +} \ No newline at end of file diff --git a/src/modules/selection.ts b/src/modules/selection.ts new file mode 100644 index 0000000..14a1db2 --- /dev/null +++ b/src/modules/selection.ts @@ -0,0 +1,14 @@ +export type BaseSelectionType = { + row: number + column: number +} + +export type RangeSelectionType = { + from: BaseSelectionType + to: BaseSelectionType +} + +export class Selection { + selectedCell: BaseSelectionType | null = null + selectedRange: RangeSelectionType | null = null +} \ No newline at end of file diff --git a/src/modules/styles.ts b/src/modules/styles.ts new file mode 100644 index 0000000..84936de --- /dev/null +++ b/src/modules/styles.ts @@ -0,0 +1,3 @@ +export class Styles { + +} \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..75abdef --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +}