lightsheet-team · rafinutshaw · Mar 6, 2024 · Mar 17, 2024 · Mar 20, 2024 · Mar 20, 2024
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="stylesheet" href="src/ui/ui.css" type="text/css" />
+  <link rel="stylesheet" href="src/view/view.css" type="text/css" />
   <!--api for the icons in tool bar-->
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/index.js b/index.js
@@ -1,23 +1,40 @@
 import Lightsheet from "./src/main.ts";
 var data = [
-  ["", "=1+2/3*6+A1+test(1,2)", "img/nophoto.jpg", "Marketing"],
-  ["2", "Jorge", "img/nophoto.jpg", "Marketing", "3120"],
-  ["3", "Jorge", "img/nophoto.jpg", "Marketing", "3120"],
+  ["1", "=1+2/3*6+A1+test(1,2)", "img/nophoto.jpg", "Marketing"],
+  ["2.44445", "400000.000000", "img/nophoto.jpg", "Marketing", "3120"],
+  ["3.555555", "312", "43", "64", "3120"],
 ];
 
 const toolbar = ["undo", "redo", "save"];
 
 new Lightsheet(
   {
-    sheetName: "Sheet1",
     data,
     onCellChange: (colIndex, rowIndex, newValue) => {
       console.log(colIndex, rowIndex, newValue);
     },
     toolbarOptions: {
-      showToolbar: true,
+      showToolbar: false,
       items: toolbar,
+      element: document.getElementById("toolbar-dom-id"),
     },
+    style: [
+      {
+        position: "A",
+        css: "font-weight: bold;",
+        format: { type: "number", options: { decimal: 2 } },
+      },
+      {
+        position: "B2",
+        css: "background-color: yellow;",
+        format: { type: "number", options: { decimal: 2 } },
+      },
+      {
+        position: "3",
+        css: "background-color: gray;",
+        format: { type: "number", options: { decimal: 0 } },
+      },
+    ],
   },
   document.getElementById("lightsheet"),
 );
diff --git a/src/core/evaluation/expressionHandler.ts b/src/core/evaluation/expressionHandler.ts
@@ -18,8 +18,8 @@ import {
 } from "./expressionHandler.types.ts";
 
 import { CellState } from "../structure/cell/cellState.ts";
-import LightsheetHelper from "../../utils/helpers.ts";
-import { Coordinate } from "../../utils/common.types.ts";
+import { GenerateColumnLabel } from "../../utils/helpers.ts";
+import { IndexPosition } from "../../utils/common.types.ts";
 import { CellReference } from "../structure/cell/types.cell.ts";
 import SheetHolder from "../structure/sheetHolder.ts";
 
@@ -86,16 +86,16 @@ export default class ExpressionHandler {
     }
   }
 
-  updatePositionalReferences(from: Coordinate, to: Coordinate) {
+  updatePositionalReferences(from: IndexPosition, to: IndexPosition) {
     if (!this.rawValue.startsWith("=")) return this.rawValue;
 
     const expression = this.rawValue.substring(1);
     const parseResult = math.parse(expression);
 
     const fromSymbol =
-      LightsheetHelper.generateColumnLabel(from.column + 1) + (from.row + 1);
+      GenerateColumnLabel(from.columnIndex! + 1) + (from.rowIndex! + 1);
     const toSymbol =
-      LightsheetHelper.generateColumnLabel(to.column + 1) + (to.row + 1);
+      GenerateColumnLabel(to.columnIndex! + 1) + (to.rowIndex! + 1);
 
     // Update each symbol in the expression.
     const transform = parseResult.transform((node) =>
@@ -212,7 +212,7 @@ export default class ExpressionHandler {
 
           this.cellRefHolder.push({
             sheetKey: targetSheet.key,
-            position: { column: j, row: i },
+            position: { columnIndex: j, rowIndex: i },
           });
           values.push(cellInfo?.resolvedValue ?? "");
         }
@@ -230,8 +230,8 @@ export default class ExpressionHandler {
     this.cellRefHolder.push({
       sheetKey: targetSheet.key,
       position: {
-        column: colIndex,
-        row: rowIndex,
+        columnIndex: colIndex,
+        rowIndex: rowIndex,
       },
     });
     return cellInfo?.resolvedValue ?? "";

diff --git a/src/core/evaluation/expressionHandler.types.ts b/src/core/evaluation/expressionHandler.types.ts
@@ -1,9 +1,9 @@
+import { IndexPosition } from "../../utils/common.types.ts";
 import { SheetKey } from "../structure/key/keyTypes.ts";
-import { Coordinate } from "../../utils/common.types.ts";
 
 export type CellSheetPosition = {
   sheetKey: SheetKey;
-  position: Coordinate;
+  position: IndexPosition;
 };
 
 export type EvaluationResult = {

diff --git a/src/core/event/event.ts b/src/core/event/event.ts
@@ -1,5 +1,5 @@
-import EventType from "./eventType";
 import EventState from "./eventState";
+import { EventType } from "./events.types";
 
 export default class Event {
   eventType: EventType;

diff --git a/src/core/event/eventType.ts b/src/core/event/eventType.ts
diff --git a/src/core/event/events.ts b/src/core/event/events.ts
@@ -1,6 +1,6 @@
-import EventType from "./eventType";
 import Event from "./event";
 import EventState from "./eventState";
+import { EventType } from "./events.types";
 
 export type ListenerFunction = (event: Event) => void;
 

diff --git a/src/core/event/events.types.ts b/src/core/event/events.types.ts
@@ -1,18 +1,29 @@
-import { PositionInfo } from "../structure/sheet.types.ts";
-import { Coordinate } from "../../utils/common.types.ts";
+import { IndexPosition } from "../../utils/common.types.ts";
+import { KeyPosition } from "../structure/sheet.types.ts";
 
 export type UISetCellPayload = {
-  keyPosition?: PositionInfo;
-  indexPosition?: Coordinate;
+  keyPosition?: KeyPosition;
+  indexPosition?: IndexPosition;
   rawValue: string;
 };
 
 export type CoreSetCellPayload = {
-  keyPosition: PositionInfo;
-  indexPosition: Coordinate;
+  keyPosition?: KeyPosition;
+  indexPosition: IndexPosition;
   rawValue: string;
   formattedValue: string;
 
-  clearCell: boolean;
-  clearRow: boolean;
+  clearCell?: boolean;
+  clearRow?: boolean;
 };
+
+export type CoreSetStylePayload = {
+  indexPosition: IndexPosition;
+  value: string;
+};
+
+export enum EventType {
+  VIEW_SET_CELL = 0,
+  CORE_SET_CELL = 1,
+  VIEW_SET_STYLE = 2,
+}
diff --git a/src/core/structure/cellStyle.ts b/src/core/structure/cellStyle.ts
@@ -3,24 +3,24 @@ import Cloneable from "../cloneable.ts";
 
 export default class CellStyle extends Cloneable<CellStyle> {
   formatter: Formatter | null;
-  styling: Map<string, string>;
+  css: Map<string, string>;
 
   constructor(
-    styling: Map<string, string> | null = null,
+    css: Map<string, string> | null = null,
     formatter: Formatter | null = null,
   ) {
     super();
     this.formatter = formatter;
-    this.styling = new Map(styling);
+    this.css = new Map(css);
   }
 
   applyStylesOf(other: CellStyle | null): CellStyle {
     if (!other) return this;
 
     // If a style is set in other but not in this, apply it to this.
-    for (const [key, value] of other.styling) {
-      if (!this.styling.has(key)) {
-        this.styling.set(key, value);
+    for (const [key, value] of other.css) {
+      if (!this.css.has(key)) {
+        this.css.set(key, value);
       }
     }
 
@@ -31,19 +31,30 @@ export default class CellStyle extends Cloneable<CellStyle> {
     return this;
   }
 
+  applyCss(css: Map<string, string>): CellStyle {
+    // If a style is set in other but not in this, apply it to this.
+    for (const [key, value] of css) {
+      if (!this.css.has(key)) {
+        this.css.set(key, value);
+      }
+    }
+
+    return this;
+  }
+
   clearStylingSetBy(other: CellStyle | null) {
     if (!other) return false;
     let isEmpty = true;
 
     // If a property is set in other, clear it from this.
-    for (const key in other.styling) {
-      if (this.styling.has(key)) {
-        this.styling.delete(key);
+    for (const key in other.css) {
+      if (this.css.has(key)) {
+        this.css.delete(key);
       }
 
       if (other.formatter) this.formatter = null;
 
-      if (isEmpty && (this.styling.has(key) || this.formatter)) isEmpty = false;
+      if (isEmpty && (this.css.has(key) || this.formatter)) isEmpty = false;
     }
 
     return isEmpty;