pixel-react-excel-sheet 1.2.0

package/src/components/ExcelFile/ExcelFile/Excel/actions.ts

@@ -0,0 +1,302 @@
+import { Matrix } from "./matrix";
+import { Point } from "./point";
+import {
+  CellBase,
+  Dimensions,
+  CommitChanges,
+  CreateFormulaParser,
+} from "./types";
+import { Selection } from "./selection";
+
+export const SET_DATA = "SET_DATA";
+export const SET_CREATE_FORMULA_PARSER = "SET_CREATE_FORMULA_PARSER";
+export const SELECT_ENTIRE_ROW = "SELECT_ENTIRE_ROW";
+export const SELECT_ENTIRE_COLUMN = "SELECT_ENTIRE_COLUMN";
+export const SELECT_ENTIRE_WORKSHEET = "SELECT_ENTIRE_WORKSHEET";
+export const SET_SELECTION = "SET_SELECTION";
+export const SELECT = "SELECT";
+export const ACTIVATE = "ACTIVATE";
+export const SET_CELL_DATA = "SET_CELL_DATA";
+export const SET_CELL_DIMENSIONS = "SET_CELL_DIMENSIONS";
+export const COPY = "COPY";
+export const CUT = "CUT";
+export const PASTE = "PASTE";
+export const EDIT = "EDIT";
+export const VIEW = "VIEW";
+export const CLEAR = "CLEAR";
+export const BLUR = "BLUR";
+export const KEY_PRESS = "KEY_PRESS";
+export const KEY_DOWN = "KEY_DOWN";
+export const DRAG_START = "DRAG_START";
+export const DRAG_END = "DRAG_END";
+export const COMMIT = "COMMIT";
+
+export type BaseAction<T extends string> = {
+  type: T;
+};
+
+export type SetDataAction = BaseAction<typeof SET_DATA> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function setData(data: Matrix<CellBase>): SetDataAction {
+  return {
+    type: SET_DATA,
+    payload: { data },
+  };
+}
+
+export type SetCreateFormulaParserAction = BaseAction<
+  typeof SET_CREATE_FORMULA_PARSER
+> & {
+  payload: {
+    createFormulaParser: CreateFormulaParser;
+  };
+};
+
+export function setCreateFormulaParser(
+  createFormulaParser: CreateFormulaParser
+): SetCreateFormulaParserAction {
+  return {
+    type: SET_CREATE_FORMULA_PARSER,
+    payload: { createFormulaParser },
+  };
+}
+
+export type SelectEntireRowAction = BaseAction<typeof SELECT_ENTIRE_ROW> & {
+  payload: {
+    row: number;
+    extend: boolean;
+  };
+};
+
+export function selectEntireRow(
+  row: number,
+  extend: boolean
+): SelectEntireRowAction {
+  return {
+    type: SELECT_ENTIRE_ROW,
+    payload: { row, extend },
+  };
+}
+
+export type SelectEntireColumnAction = BaseAction<
+  typeof SELECT_ENTIRE_COLUMN
+> & {
+  payload: {
+    column: number;
+    extend: boolean;
+  };
+};
+
+export function selectEntireColumn(
+  column: number,
+  extend: boolean
+): SelectEntireColumnAction {
+  return {
+    type: SELECT_ENTIRE_COLUMN,
+    payload: { column, extend },
+  };
+}
+
+export type SelectEntireWorksheetAction = BaseAction<
+  typeof SELECT_ENTIRE_WORKSHEET
+>;
+
+export function selectEntireWorksheet(): SelectEntireWorksheetAction {
+  return { type: SELECT_ENTIRE_WORKSHEET };
+}
+
+export type SetSelectionAction = BaseAction<typeof SET_SELECTION> & {  
+  payload: {
+    selection: Selection;
+  };
+};
+
+export function setSelection(selection: Selection): SetSelectionAction {  
+  return { type: SET_SELECTION, payload: { selection } };
+}
+
+export type SelectAction = BaseAction<typeof SELECT> & {
+  payload: {
+    point: Point;
+  };
+};
+
+export function select(point: Point): SelectAction {
+  return {
+    type: SELECT,
+    payload: { point },
+  };
+}
+
+export type ActivateAction = BaseAction<typeof ACTIVATE> & {
+  
+  payload: {
+    point: Point;
+  };
+};
+
+export function activate(point: Point): ActivateAction {
+  return {
+    type: ACTIVATE,
+    payload: { point },
+  };
+}
+
+export type SetCellDataAction = BaseAction<typeof SET_CELL_DATA> & {
+  payload: {
+    active: Point;
+    data: CellBase;
+  };
+};
+
+export function setCellData(active: Point, data: CellBase): SetCellDataAction {
+  return {
+    type: SET_CELL_DATA,
+    payload: { active, data },
+  };
+}
+
+export type SetCellDimensionsAction = BaseAction<typeof SET_CELL_DIMENSIONS> & {
+  payload: {
+    point: Point;
+    dimensions: Dimensions;
+  };
+};
+
+export function setCellDimensions(
+  point: Point,
+  dimensions: Dimensions
+): SetCellDimensionsAction {
+  return {
+    type: SET_CELL_DIMENSIONS,
+    payload: { point, dimensions },
+  };
+}
+
+export type PasteAction = BaseAction<typeof PASTE> & {  
+  payload: {
+    data: string;
+  };
+};
+
+export function paste(data: string): PasteAction {
+  return {
+    type: PASTE,
+    payload: { data },
+  };
+}
+
+export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
+  payload: {
+    event: React.KeyboardEvent;
+  };
+};
+
+export function keyPress(event: React.KeyboardEvent): KeyPressAction {
+  return {
+    type: KEY_PRESS,
+    payload: { event },
+  };
+}
+
+export type KeyDownAction = BaseAction<typeof KEY_DOWN> & {
+  payload: {
+    event: React.KeyboardEvent;
+  };
+};
+
+export function keyDown(event: React.KeyboardEvent): KeyDownAction {
+  return {
+    type: KEY_DOWN,
+    payload: { event },
+  };
+}
+
+export type DragStartAction = BaseAction<typeof DRAG_START>;
+
+export function dragStart(): DragStartAction {
+  return { type: DRAG_START };
+}
+
+export type DragEndAction = BaseAction<typeof DRAG_END>;
+
+export function dragEnd(): DragEndAction {
+  return { type: DRAG_END };
+}
+
+export type CommitAction = BaseAction<typeof COMMIT> & {
+  payload: {
+    changes: CommitChanges;
+  };
+};
+
+export function commit(changes: CommitChanges): CommitAction {
+  return {
+    type: COMMIT,
+    payload: { changes },
+  };
+}
+
+export type CopyAction = BaseAction<typeof COPY>;
+
+export function copy(): CopyAction {
+  return { type: COPY };
+}
+
+export type CutAction = BaseAction<typeof CUT>;
+
+export function cut(): CutAction {
+  return { type: CUT };
+}
+
+export type EditAction = BaseAction<typeof EDIT>;
+
+export function edit(): EditAction {
+  return { type: EDIT };
+}
+
+export type ViewAction = BaseAction<typeof VIEW>;
+
+export function view(): ViewAction {
+  return { type: VIEW };
+}
+
+export type ClearAction = BaseAction<typeof CLEAR>;
+
+export function clear(): ClearAction {
+  return { type: CLEAR };
+}
+
+export type BlurAction = BaseAction<typeof BLUR>;
+
+export function blur(): BlurAction {
+  return { type: BLUR };
+}
+
+export type Action =
+  | SetDataAction
+  | SetCreateFormulaParserAction
+  | SelectEntireRowAction
+  | SelectEntireColumnAction
+  | SelectEntireWorksheetAction
+  | SetSelectionAction
+  | SelectAction
+  | ActivateAction
+  | SetCellDataAction
+  | SetCellDimensionsAction
+  | PasteAction
+  | KeyPressAction
+  | KeyDownAction
+  | DragStartAction
+  | DragEndAction
+  | CommitAction
+  | CopyAction
+  | CutAction
+  | EditAction
+  | ViewAction
+  | ClearAction
+  | BlurAction;

package/src/components/ExcelFile/ExcelFile/Excel/areModelsEqual.ts

@@ -0,0 +1,18 @@
+import { Model } from "./engine";
+
+function areModelsEqual(a: unknown, b: unknown): boolean | undefined {
+  const isAModule = a instanceof Model;
+  const isBModule = b instanceof Model;
+
+  if (isAModule && isBModule) {
+    // @ts-expect-error
+    return this.equals(a, b);
+  } else if (isAModule !== isBModule) {
+    return false;
+  } else {
+    return undefined;
+  }
+}
+
+// @ts-expect-error
+expect.addEqualityTesters([areModelsEqual]);

package/src/components/ExcelFile/ExcelFile/Excel/context.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { createContext } from "use-context-selector";
+import reducer, { INITIAL_STATE } from "./reducer";
+import { Action } from "./actions";
+
+export type ReducerState = React.ReducerState<typeof reducer>;
+export type Dispatch = React.Dispatch<Action>;
+export type Value = [ReducerState, Dispatch];
+
+const context = createContext<Value>([INITIAL_STATE, () => {}]);
+
+export default context;

package/src/components/ExcelFile/ExcelFile/Excel/engine/engine.ts

@@ -0,0 +1,200 @@
+import FormulaParser, { FormulaError, Value } from "fast-formula-parser";
+import * as Matrix from "../matrix";
+import { Point } from "../point";
+import { CellBase, CreateFormulaParser } from "../types";
+import * as Formula from "./formula";
+import { PointGraph } from "./point-graph";
+import { PointSet } from "./point-set";
+
+export class Model<Cell extends CellBase> {
+  readonly data!: Matrix.Matrix<Cell>;
+  readonly evaluatedData!: Matrix.Matrix<Cell>;
+  readonly referenceGraph!: PointGraph;
+  readonly createFormulaParser!: CreateFormulaParser;
+
+  constructor(
+    createFormulaParser: CreateFormulaParser,
+    data: Matrix.Matrix<Cell>,
+    referenceGraph?: PointGraph,
+    evaluatedData?: Matrix.Matrix<Cell>
+  ) {
+    this.createFormulaParser = createFormulaParser;
+    this.data = data;
+    this.referenceGraph = referenceGraph || createReferenceGraph(data);
+    this.evaluatedData =
+      evaluatedData ||
+      createEvaluatedData(data, this.referenceGraph, this.createFormulaParser);
+  }
+}
+
+export function updateCellValue<Cell extends CellBase>(
+  model: Model<Cell>,
+  point: Point,
+  cell: Cell
+): Model<Cell> {
+  const nextData = Matrix.set(point, cell, model.data);
+  const nextReferenceGraph = Formula.isFormulaValue(cell.value)
+    ? updateReferenceGraph(model.referenceGraph, point, cell, nextData)
+    : model.referenceGraph;
+
+  const formulaParser = model.createFormulaParser(nextData);
+  const nextEvaluatedData = evaluateCell(
+    model.evaluatedData,
+    nextData,
+    nextReferenceGraph,
+    point,
+    cell,
+    formulaParser
+  );
+  return new Model(
+    model.createFormulaParser,
+    nextData,
+    nextReferenceGraph,
+    nextEvaluatedData
+  );
+}
+
+function updateReferenceGraph(
+  referenceGraph: PointGraph,
+  point: Point,
+  cell: CellBase<string>,
+  data: Matrix.Matrix<CellBase>
+): PointGraph {
+  const references = Formula.getReferences(
+    Formula.extractFormula(cell.value),
+    point,
+    data
+  );
+  const nextReferenceGraph = referenceGraph.set(point, references);
+  return nextReferenceGraph;
+}
+
+function evaluateCell<Cell extends CellBase>(
+  prevEvaluatedData: Matrix.Matrix<Cell>,
+  data: Matrix.Matrix<Cell>,
+  referenceGraph: PointGraph,
+  point: Point,
+  cell: Cell,
+  formulaParser: FormulaParser
+): Matrix.Matrix<Cell> {
+  if (referenceGraph.hasCircularDependency(point)) {
+    let visited = PointSet.from([point]);
+    let nextEvaluatedData = Matrix.set(
+      point,
+      { ...cell, value: FormulaError.REF },
+      prevEvaluatedData
+    );
+    for (const referrer of referenceGraph.getBackwardsRecursive(point)) {
+      if (visited.has(referrer)) {
+        break;
+      }
+      visited = visited.add(referrer);
+      const referrerCell = Matrix.get(referrer, data);
+      if (!referrerCell) {
+        continue;
+      }
+      nextEvaluatedData = Matrix.set(
+        referrer,
+        { ...referrerCell, value: FormulaError.REF },
+        nextEvaluatedData
+      );
+    }
+    return nextEvaluatedData;
+  }
+
+  let nextEvaluatedData = prevEvaluatedData;
+
+  const evaluatedValue = Formula.isFormulaValue(cell.value)
+    ? getFormulaComputedValue(cell.value, point, formulaParser)
+    : cell.value;
+
+  const evaluatedCell = { ...cell, value: evaluatedValue };
+
+  nextEvaluatedData = Matrix.set(point, evaluatedCell, nextEvaluatedData);
+
+  // for every formula cell that references the cell re-evaluate (recursive)
+  for (const referrer of referenceGraph.getBackwardsRecursive(point)) {
+    const referrerCell = Matrix.get(referrer, data);
+    if (!referrerCell) {
+      continue;
+    }
+    const evaluatedValue = Formula.isFormulaValue(referrerCell.value)
+      ? getFormulaComputedValue(referrerCell.value, point, formulaParser)
+      : referrerCell.value;
+    const evaluatedCell = { ...referrerCell, value: evaluatedValue };
+    nextEvaluatedData = Matrix.set(referrer, evaluatedCell, nextEvaluatedData);
+  }
+
+  return nextEvaluatedData;
+}
+
+/**
+ *
+ * @param data - the spreadsheet data
+ * @returns the spreadsheet reference graph
+ */
+export function createReferenceGraph(
+  data: Matrix.Matrix<CellBase>
+): PointGraph {
+  const entries: Array<[Point, PointSet]> = [];
+  for (const [point, cell] of Matrix.entries(data)) {
+    if (cell && Formula.isFormulaValue(cell.value)) {
+      const references = Formula.getReferences(
+        Formula.extractFormula(cell.value),
+        point,
+        data
+      );
+      entries.push([point, references]);
+    }
+  }
+  return PointGraph.from(entries);
+}
+
+export function createEvaluatedData<Cell extends CellBase>(
+  data: Matrix.Matrix<Cell>,
+  referenceGraph: PointGraph,
+  createFormulaParser: CreateFormulaParser
+): Matrix.Matrix<Cell> {
+  let evaluatedData = data;
+  let formulaParser = createFormulaParser(evaluatedData);
+
+  // Iterate over the points in the reference graph, starting from the leaves
+  for (const point of referenceGraph.traverseBFSBackwards()) {
+    // Get the cell at the current point in the data Matrix
+    const cell = Matrix.get(point, data);
+    if (!cell) {
+      continue;
+    }
+
+    // If the cell is a formula cell, evaluate it
+    if (Formula.isFormulaValue(cell.value)) {
+      const evaluatedValue = getFormulaComputedValue(
+        cell.value,
+        point,
+        formulaParser
+      );
+      evaluatedData = Matrix.set(
+        point,
+        { ...cell, value: evaluatedValue },
+        evaluatedData
+      );
+      formulaParser = createFormulaParser(evaluatedData);
+    }
+  }
+
+  return evaluatedData;
+}
+
+/** Get the computed value of a formula cell */
+export function getFormulaComputedValue(
+  value: string,
+  point: Point,
+  formulaParser: FormulaParser
+): Value {
+  const formula = Formula.extractFormula(value);
+  try {
+    return Formula.evaluate(formula, point, formulaParser);
+  } catch (e) {
+    return FormulaError.REF;
+  }
+}

package/src/components/ExcelFile/ExcelFile/Excel/engine/formula.ts

@@ -0,0 +1,137 @@
+import FormulaParser, {
+  CellRef,
+  DepParser,
+  FormulaError,
+  FormulaParserConfig,
+  Value,
+} from "fast-formula-parser";
+import { PointRange } from "../point-range";
+import { Point } from "../point";
+import * as Matrix from "../matrix";
+import { CellBase } from "../types";
+import { PointSet } from "./point-set";
+
+export const FORMULA_VALUE_PREFIX = "=";
+
+/** Returns whether given value is a formula */
+export function isFormulaValue(value: unknown): value is string {
+  return (
+    typeof value === "string" &&
+    value.startsWith(FORMULA_VALUE_PREFIX) &&
+    value.length > 1
+  );
+}
+
+/** Extracts formula from value  */
+export function extractFormula(value: string): string {
+  return value.slice(1);
+}
+
+export function createFormulaParser(
+  data: Matrix.Matrix<CellBase>,
+  config?: Omit<FormulaParserConfig, "onCell" | "onRange">
+): FormulaParser {
+  return new FormulaParser({
+    ...config,
+    onCell: (ref) => {
+      const point: Point = {
+        row: ref.row - 1,
+        column: ref.col - 1,
+      };
+      const cell = Matrix.get(point, data);
+      if (!isNaN(cell?.value as number)) return Number(cell?.value);
+      return cell?.value;
+    },
+    onRange: (ref) => {
+      const size = Matrix.getSize(data);
+      const start: Point = {
+        row: ref.from.row - 1,
+        column: ref.from.col - 1,
+      };
+      const end: Point = {
+        row: Math.min(ref.to.row - 1, size.rows - 1),
+        column: Math.min(ref.to.col - 1, size.columns - 1),
+      };
+      const dataSlice = Matrix.slice(start, end, data);
+      return Matrix.toArray(dataSlice, (cell) => {
+        if (!isNaN(cell?.value as number)) return Number(cell?.value);
+        return cell?.value;
+      });
+    },
+  });
+}
+
+const depParser = new DepParser();
+
+/**
+ * For given formula returns the cell references
+ * @param formula - formula to get references for
+ */
+export function getReferences(
+  formula: string,
+  point: Point,
+  data: Matrix.Matrix<CellBase>
+): PointSet {
+  const { rows, columns } = Matrix.getSize(data);
+  try {
+    const dependencies = depParser.parse(formula, convertPointToCellRef(point));
+
+    const references = PointSet.from(
+      dependencies.flatMap((reference) => {
+        const isRange = "from" in reference;
+        if (isRange) {
+          const { from, to } = reference;
+
+          const normalizedFrom: Point = {
+            row: from.row - 1,
+            column: from.col - 1,
+          };
+
+          const normalizedTo: Point = {
+            row: Math.min(to.row - 1, rows - 1),
+            column: Math.min(to.col - 1, columns - 1),
+          };
+
+          const range = new PointRange(normalizedFrom, normalizedTo);
+
+          return Array.from(range);
+        }
+        return { row: reference.row - 1, column: reference.col - 1 };
+      })
+    );
+
+    return references;
+  } catch (error) {
+    if (error instanceof FormulaError) {
+      return PointSet.from([]);
+    } else {
+      throw error;
+    }
+  }
+}
+
+export function evaluate(
+  formula: string,
+  point: Point,
+  formulaParser: FormulaParser
+): Value {
+  try {
+    const position = convertPointToCellRef(point);
+    const returned = formulaParser.parse(formula, position);
+    return returned instanceof FormulaError ? returned.toString() : returned;
+  } catch (error) {
+    if (error instanceof FormulaError) {
+      return error.toString();
+    }
+    throw error;
+  }
+}
+
+function convertPointToCellRef(point: Point): CellRef {
+  return {
+    row: point.row + 1,
+    col: point.column + 1,
+    // TODO: fill once we support multiple sheets
+    sheet: "Sheet1",
+  };
+}

package/src/components/ExcelFile/ExcelFile/Excel/engine/index.ts

@@ -0,0 +1,2 @@
+export { Model, updateCellValue } from "./engine";
+export { createFormulaParser } from "./formula";