Merge pull request #138 from lightsheet-team/implement-interface-meth…

…ods-in-lightsheet

Implement interface methods in lightsheet

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;

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<number, Map<number, string>> {
+    return this.sheet.exportData();
+  }
 }

src/ui/render.ts

@@ -1,15 +1,15 @@
-import LightSheet from "../main";
 import { SelectionContainer } from "./render.types.ts";
 import LightsheetEvent from "../core/event/event.ts";
 import {
   CoreSetCellPayload,
   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);
     });
   }