diff --git a/src/core/event/events.ts b/src/core/event/events.ts index a4e56291..6852ad69 100644 --- a/src/core/event/events.ts +++ b/src/core/event/events.ts @@ -2,7 +2,7 @@ import EventType from "./eventType"; import Event from "./event"; import EventState from "./eventState"; -type ListenerFunction = (event: Event) => void; +export type ListenerFunction = (event: Event) => void; type EventListener = { callback: ListenerFunction; diff --git a/src/main.ts b/src/main.ts index 2c8480a0..cffb1eb4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,17 +3,23 @@ import { LightSheetOptions } from "./main.types.ts"; import Sheet from "./core/structure/sheet.ts"; import { CellInfo } from "./core/structure/sheet.types.ts"; import Events from "./core/event/events.ts"; +import { ListenerFunction } from "./core/event/events.ts"; +import EventState from "./core/event/eventState.ts"; +import EventType from "./core/event/eventType.ts"; import SheetHolder from "./core/structure/sheetHolder.ts"; import { DefaultColCount, DefaultRowCount } from "./utils/constants.ts"; import ExpressionHandler from "./core/evaluation/expressionHandler.ts"; import { CellReference } from "./core/structure/cell/types.cell.ts"; +import { RowKey, ColumnKey } from "./core/structure/key/keyTypes.ts"; +import CellStyle from "./core/structure/cellStyle.ts"; +import { Coordinate } from "./utils/common.types.ts"; export default class LightSheet { - #ui: UI | undefined; + private ui: UI | undefined; options: LightSheetOptions; - sheet: Sheet; + private sheet: Sheet; sheetHolder: SheetHolder; - events: Events; + private events: Events; onCellChange?; isReady: boolean = false; @@ -33,7 +39,7 @@ export default class LightSheet { this.sheet = new Sheet(options.sheetName, this.events); if (targetElement) { - this.#ui = new UI(targetElement, this, this.options.toolbarOptions); + this.ui = new UI(targetElement, this.options, this.events); if (this.options.data && this.options.data.length > 0) { for (let rowI = 0; rowI < this.options.data.length; rowI++) { @@ -44,10 +50,10 @@ export default class LightSheet { } } else { for (let index = 0; index < this.options.defaultColCount!; index++) { - this.#ui.addColumn(); + this.ui.addColumn(); } for (let index = 0; index < this.options.defaultRowCount!; index++) { - this.#ui.addRow(); + this.ui.addRow(); } } } @@ -67,18 +73,35 @@ export default class LightSheet { ExpressionHandler.registerFunction(name, func); } + addEventListener( + eventType: EventType, + callback: ListenerFunction, + eventState: EventState = EventState.POST_EVENT, + once: boolean = false, + ): void { + this.events.addEventListener(eventType, callback, eventState, once); + } + + removeEventListener( + eventType: EventType, + callback: ListenerFunction, + eventState: EventState = EventState.POST_EVENT, + ): void { + this.events.removeEventListener(eventType, callback, eventState); + } + onTableReady() { this.isReady = true; if (this.options.onReady) this.options.onReady(); } setReadOnly(isReadOnly: boolean) { - this.#ui?.setReadOnly(isReadOnly); + this.ui?.setReadOnly(isReadOnly); this.options.isReadOnly = isReadOnly; } showToolbar(isShown: boolean) { - this.#ui?.showToolbar(isShown); + this.ui?.showToolbar(isShown); } getKey() { @@ -92,4 +115,72 @@ export default class LightSheet { setCellAt(columnIndex: number, rowIndex: number, value: any): CellInfo { return this.sheet.setCellAt(columnIndex, rowIndex, value.toString()); } + + setCell(colKey: ColumnKey, rowKey: RowKey, formula: string): CellInfo | null { + return this.sheet.setCell(colKey, rowKey, formula); + } + + getCellInfoAt(colPos: number, rowPos: number): CellInfo | null { + return this.sheet.getCellInfoAt(colPos, rowPos); + } + + getRowIndex(rowKey: RowKey): number | undefined { + return this.sheet.getRowIndex(rowKey); + } + + getColumnIndex(colKey: ColumnKey): number | undefined { + return this.sheet.getColumnIndex(colKey); + } + + getCellStyle(colKey?: ColumnKey, rowKey?: RowKey): CellStyle { + return this.sheet.getCellStyle(colKey, rowKey); + } + + setCellStyle( + colKey: ColumnKey, + rowKey: RowKey, + style: CellStyle | null, + ): boolean { + return this.sheet.setCellStyle(colKey, rowKey, style); + } + + setRowStyle(rowkey: RowKey, cellStyle: CellStyle): boolean { + return this.sheet.setRowStyle(rowkey, cellStyle); + } + + setColumnStyle(columnKey: ColumnKey, cellStyle: CellStyle): boolean { + return this.sheet.setColumnStyle(columnKey, cellStyle); + } + + moveColumn(from: number, to: number): boolean { + return this.sheet.moveColumn(from, to); + } + + moveRow(from: number, to: number): boolean { + return this.sheet.moveRow(from, to); + } + + moveCell(from: Coordinate, to: Coordinate, moveStyling: boolean = true) { + this.sheet.moveCell(from, to, moveStyling); + } + + insertColumn(position: number): boolean { + return this.sheet.insertColumn(position); + } + + insertRow(position: number): boolean { + return this.sheet.insertRow(position); + } + + deleteColumn(position: number): boolean { + return this.sheet.deleteColumn(position); + } + + deleteRow(position: number): boolean { + return this.sheet.deleteRow(position); + } + + exportData(): Map> { + return this.sheet.exportData(); + } } diff --git a/src/ui/render.ts b/src/ui/render.ts index 85eb398b..c8b23eb0 100644 --- a/src/ui/render.ts +++ b/src/ui/render.ts @@ -1,4 +1,3 @@ -import LightSheet from "../main"; import { SelectionContainer } from "./render.types.ts"; import LightsheetEvent from "../core/event/event.ts"; import { @@ -6,10 +5,11 @@ import { UISetCellPayload, } from "../core/event/events.types.ts"; import EventType from "../core/event/eventType.ts"; -import { ToolbarOptions } from "../main.types"; +import { LightSheetOptions, ToolbarOptions } from "../main.types"; import LightSheetHelper from "../utils/helpers.ts"; import { ToolbarItems } from "../utils/constants.ts"; import { Coordinate } from "../utils/common.types.ts"; +import Events from "../core/event/events.ts"; export default class UI { tableEl!: Element; @@ -19,7 +19,6 @@ export default class UI { selectedCellDisplay!: HTMLElement; tableHeadDom!: Element; tableBodyDom!: Element; - lightSheet: LightSheet; selectedCell: number[]; selectedRowNumberCell: HTMLElement | null = null; selectedHeaderCell: HTMLElement | null = null; @@ -28,27 +27,28 @@ export default class UI { isReadOnly: boolean; singleSelectedCell: Coordinate | undefined; tableContainerDom: Element; + private events: Events; constructor( lightSheetContainerDom: Element, - lightSheet: LightSheet, - toolbarOptions?: ToolbarOptions, + lightSheetOptions: LightSheetOptions, + events: Events | null = null, ) { - this.lightSheet = lightSheet; this.selectedCell = []; this.selectedCellsContainer = { selectionStart: null, selectionEnd: null, }; this.singleSelectedCell = undefined; + this.events = events ?? new Events(); this.registerEvents(); this.toolbarOptions = { showToolbar: false, element: undefined, items: ToolbarItems, - ...toolbarOptions, + ...lightSheetOptions.toolbarOptions, }; - this.isReadOnly = lightSheet.options.isReadOnly || false; + this.isReadOnly = lightSheetOptions.isReadOnly || false; this.tableContainerDom = lightSheetContainerDom; lightSheetContainerDom.classList.add("lightsheet_table_container"); @@ -410,13 +410,11 @@ export default class UI { indexPosition: { column: colIndex, row: rowIndex }, rawValue, }; - this.lightSheet.events.emit( - new LightsheetEvent(EventType.UI_SET_CELL, payload), - ); + this.events.emit(new LightsheetEvent(EventType.UI_SET_CELL, payload)); } private registerEvents() { - this.lightSheet.events.on(EventType.CORE_SET_CELL, (event) => { + this.events.on(EventType.CORE_SET_CELL, (event) => { this.onCoreSetCell(event); }); }