diff --git a/src/components/scroller.ts b/src/components/scroller.ts index 4ec0f9d..ad9c700 100644 --- a/src/components/scroller.ts +++ b/src/components/scroller.ts @@ -70,7 +70,6 @@ export class Scroller { } private handleKeydown = (event: KeyboardEvent) => { - console.log(event.key) //* Navigation if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) { event.preventDefault() @@ -108,7 +107,7 @@ export class Scroller { } } - if (event.key === 'F2') { + if (event.key === 'F2' || /^([a-z]|[а-я])$/.test(event.key.toLowerCase())) { //* English and Russian keyboard. Or F2 button event.preventDefault() if (!this.root.selection.selectedCell) return; this.root.showEditor(this.root.selection.selectedCell) diff --git a/src/main.ts b/src/main.ts index 07dec92..bc45719 100644 --- a/src/main.ts +++ b/src/main.ts @@ -45,14 +45,14 @@ export class Spreadsheet { public cache: Cache constructor(target: string | HTMLElement, props?: SpreadsheetConstructorProperties) { - const config = createSampleConfig(10000, 600) + const config = createSampleConfig(2000, 600) if (props?.view) { config.view = props.view } this.config = new Config(config) this.sheet = new Sheet(this) - const data = createSampleData(10000, 600) + const data = createSampleData(2000, 600) this.table = new Table(this) this.scroller = new Scroller(this) this.toolbar = new Toolbar(this) @@ -67,6 +67,7 @@ export class Spreadsheet { this.styles = new Styles() this.buildComponent() this.appendTableToTarget(target) + this.renderSheet() } private getInitialCache(): Cache { @@ -211,9 +212,8 @@ export class Spreadsheet { const spreadsheet = new Spreadsheet('#spreadsheet', { view: { - height: 600, - width: 800 + height: 768, + width: 1366 }, }) -spreadsheet.renderSheet() console.log(spreadsheet) diff --git a/src/modules/cell.ts b/src/modules/cell.ts index b206270..2180fb0 100644 --- a/src/modules/cell.ts +++ b/src/modules/cell.ts @@ -8,6 +8,16 @@ export type CellConstructorProps = { position: Position } +interface CellStylesConstructorProps { + fontSize: number + fontColor: string + background: string + borderColor: string + + selectedBackground: string + selectedFontColor: string +} + export class CellStyles { fontSize: number = 16 fontColor: string = 'black' @@ -16,6 +26,12 @@ export class CellStyles { selectedBackground = '#4287f5' selectedFontColor = '#ffffff' + + constructor(props?: CellStylesConstructorProps) { + if (props) { + Object.assign(this, props) // Override default styles + } + } } export class Position {