UPDATE: Adds web app

webapp/src/components/workbookState.ts

@@ -0,0 +1,158 @@
+export interface Cell {
+  row: number;
+  column: number;
+}
+
+export interface Area {
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+interface Scroll {
+  left: number;
+  top: number;
+}
+
+type FocusType = 'cell' | 'formula-bar';
+
+
+/**
+ *  In Excel there are two "modes" of editing
+ *   * `init`: When you start typing in a cell. In this mode arrow keys will move away from the cell
+ *   * `edit`: If you double click on a cell or click in the cell while editing.
+ *     In this mode arrow keys will move within the cell.
+ *
+ * In a formula bar mode is always `edit`.
+ */
+type CellEditMode = 'init' | 'edit';
+
+interface Editor {
+  id: number;
+  sheet: number;
+  row: number;
+  column: number;
+  text: string;
+  base: string;
+  mode: CellEditMode;
+  focus: FocusType;
+}
+
+export class WorkbookState {
+  private selectedSheet: number;
+  private selectedCell: Cell;
+  private selectedArea: Area;
+  private scroll: Scroll;
+  private extendToArea: Area | null;
+  private editor: Editor | null;
+  private id;
+
+  constructor() {
+    const row = 1;
+    const column = 1;
+    const sheet = 0;
+    this.selectedSheet = sheet;
+    this.selectedCell = { row, column };
+    this.selectedArea = {
+      rowStart: row,
+      rowEnd: row,
+      columnStart: column,
+      columnEnd: column,
+    };
+    this.extendToArea = null;
+    this.scroll = {
+      left: 0,
+      top: 0,
+    };
+    this.editor = null;
+    this.id = Math.floor(Math.random()*1000);
+  }
+
+  startEditing(focus: FocusType, text: string) {
+    const {row, column} = this.selectedCell;
+    this.editor = {
+      id: 0,
+      sheet: this.selectedSheet,
+      row,
+      column,
+      base: '',
+      text,
+      mode: 'init',
+      focus
+    }
+  }
+
+  setEditorText(text: string) {
+    if (!this.editor) {
+      return;
+    }
+    this.editor.text = text;
+  }
+
+  endEditing() {
+    this.editor = null;
+  }
+
+  getEditor(): Editor | null {
+    console.log('getEditor', this.id);
+    return this.editor;
+  }
+
+  getSelectedSheet(): number {
+    return this.selectedSheet;
+  }
+
+  setSelectedSheet(sheet: number): void {
+    this.selectedSheet = sheet;
+  }
+
+  getSelectedCell(): Cell {
+    return this.selectedCell;
+  }
+
+  setSelectedCell(cell: Cell): void {
+    this.selectedCell = cell;
+  }
+
+  getSelectedArea(): Area {
+    return this.selectedArea;
+  }
+
+  setSelectedArea(area: Area): void {
+    this.selectedArea = area;
+  }
+
+  selectCell(cell: { row: number; column: number }): void {
+    console.log('selectCell: ', this.id)
+    const { row, column } = cell;
+    this.selectedArea = {
+      rowStart: row,
+      rowEnd: row,
+      columnStart: column,
+      columnEnd: column,
+    };
+    this.selectedCell = { row, column };
+    this.editor = null;
+  }
+
+  getScroll(): Scroll {
+    return this.scroll;
+  }
+
+  setScroll(scroll: Scroll): void {
+    this.scroll = scroll;
+  }
+
+  getExtendToArea(): Area | null {
+    return this.extendToArea;
+  }
+  
+  clearExtendToArea(): void {
+    this.extendToArea = null;
+  }
+
+  setExtendToArea(area: Area): void {
+    this.extendToArea = area;
+  }
+}