@odoo/o-spreadsheet 1.0.1

package/src/types/conditional_formatting.ts

@@ -0,0 +1,124 @@
+import { Style } from "./misc";
+
+// -----------------------------------------------------------------------------
+// Conditional Formatting
+// -----------------------------------------------------------------------------
+
+/**
+ * https://docs.microsoft.com/en-us/openspecs/office_standards/ms-xlsx/025ea6e4-ad42-43ea-a016-16f4e4688ac8
+ */
+
+export interface ConditionalFormat {
+  id: string;
+  rule: SingleColorRules | ColorScaleRule; //| DataBarRule | IconSetRule; // the rules to apply, in order;
+  stopIfTrue?: boolean; // the next rules must not be evaluated/applied if this rule is true
+  ranges: string[]; // the cells/ranges on which to apply this conditional formatting
+}
+
+export type SingleColorRules =
+  | CellIsRule
+  | ExpressionRule
+  | ContainsTextRule
+  | NotContainsTextRule
+  | BeginsWithRule
+  | EndsWithRule
+  | containsBlanksRule
+  | notContainsBlanksRule
+  | containsErrorsRule
+  | notContainsErrorsRule
+  | TimePeriodRule
+  | AboveAverageRule
+  | Top10Rule;
+
+export interface SingleColorRule {
+  style: Style;
+}
+
+export interface TextRule extends SingleColorRule {
+  text: string;
+}
+export interface CellIsRule extends SingleColorRule {
+  type: "CellIsRule";
+  operator: ConditionalFormattingOperatorValues;
+  // can be one value for all operator except between, then it is 2 values
+  values: string[];
+}
+export interface ExpressionRule extends SingleColorRule {
+  type: "ExpressionRule";
+}
+
+export type ThresholdTypes = "value" | "number" | "percent" | "percentile" | "formula";
+export type ColorScaleThreshold = { color: number; type: ThresholdTypes; value?: number };
+
+export interface ColorScaleRule {
+  type: "ColorScaleRule";
+  minimum: ColorScaleThreshold;
+  maximum: ColorScaleThreshold;
+  midpoint?: ColorScaleThreshold;
+}
+// for future use
+// export interface DataBarRule {
+//   type: "ColorScaleRule";
+// }
+// export interface IconSetRule {
+//   type: "IconSetRule";
+// }
+export interface ContainsTextRule extends TextRule {
+  type: "ContainsTextRule";
+}
+export interface NotContainsTextRule extends TextRule {
+  type: "NotContainsTextRule";
+}
+export interface BeginsWithRule extends TextRule {
+  type: "BeginsWithRule";
+}
+export interface EndsWithRule extends TextRule {
+  type: "EndsWithRule";
+}
+export interface containsBlanksRule extends TextRule {
+  type: "containsBlanksRule";
+}
+export interface notContainsBlanksRule extends TextRule {
+  type: "notContainsBlanksRule";
+}
+export interface containsErrorsRule extends SingleColorRule {
+  type: "containsErrorsRule";
+}
+export interface notContainsErrorsRule extends SingleColorRule {
+  type: "notContainsErrorsRule";
+}
+export interface TimePeriodRule extends SingleColorRule {
+  type: "TimePeriodRule";
+  timePeriod: string;
+}
+export interface AboveAverageRule extends SingleColorRule {
+  type: "AboveAverageRule";
+  /*"true" The conditional formatting rule is applied to cells with values above the average value of all cells in the range.
+    "false" The conditional formatting rule is applied to cells with values below the average value of all cells in the range.*/
+  aboveAverage: boolean;
+  equalAverage: boolean;
+}
+
+export interface Top10Rule extends SingleColorRule {
+  type: "Top10Rule";
+  percent: boolean;
+  bottom: boolean;
+  /*  specifies how many cells are formatted by this conditional formatting rule. The value of percent specifies whether
+      rank is a percentage or a quantity of cells. When percent is "true", rank MUST be greater than or equal to zero and
+      less than or equal to 100. Otherwise, rank MUST be greater than or equal to 1 and less than or equal to 1,000 */
+  rank: number;
+}
+//https://docs.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.conditionalformattingoperatorvalues?view=openxml-2.8.1
+export type ConditionalFormattingOperatorValues =
+  | "BeginsWith"
+  | "Between"
+  | "ContainsText"
+  | "EndsWith"
+  | "Equal"
+  | "GreaterThan"
+  | "GreaterThanOrEqual"
+  | "LessThan"
+  | "LessThanOrEqual"
+  | "NotBetween"
+  | "NotContains"
+  | "NotEqual";

package/src/types/env.ts

@@ -0,0 +1,13 @@
+import { Env } from "@odoo/owl/dist/types/component/component";
+import { TranslationFunction } from "../translation";
+import { CommandDispatcher } from "./commands";
+import { Getters } from "./getters";
+
+export interface SpreadsheetEnv extends Env {
+  openSidePanel: (panel: string, panelProps?: any) => void;
+  toggleSidePanel: (panel: string, panelProps?: any) => void;
+  dispatch: CommandDispatcher["dispatch"];
+  getters: Getters;
+  clipboard: Clipboard;
+  _t: TranslationFunction;
+}

package/src/types/functions.ts

@@ -0,0 +1,35 @@
+export type ArgType =
+  | "ANY"
+  | "BOOLEAN"
+  | "NUMBER"
+  | "STRING"
+  | "DATE"
+  | "RANGE"
+  | "RANGE<BOOLEAN>"
+  | "RANGE<NUMBER>"
+  | "RANGE<STRING>"
+  | "RANGE<DATE>";
+
+export interface Arg {
+  repeating?: boolean;
+  optional?: boolean;
+  lazy?: boolean;
+  description: string;
+  name: string;
+  type: ArgType[];
+  default?: any;
+}
+
+export interface FunctionDescription {
+  description: string;
+  compute: (this: EvalContext, ...args: any[]) => any;
+  async?: boolean;
+  category?: string;
+  args: Arg[];
+  returns: [ArgType];
+}
+
+export interface EvalContext {
+  __lastFnCalled?: string;
+  [key: string]: any;
+}

package/src/types/getters.ts

@@ -0,0 +1,103 @@
+import { WHistory } from "../history";
+import { AutofillPlugin } from "../plugins/autofill";
+import { ChartPlugin } from "../plugins/chart";
+import { ClipboardPlugin } from "../plugins/clipboard";
+import { ConditionalFormatPlugin } from "../plugins/conditional_format";
+import { CorePlugin } from "../plugins/core";
+import { EditionPlugin } from "../plugins/edition";
+import { EvaluationPlugin } from "../plugins/evaluation";
+import { FigurePlugin } from "../plugins/figures";
+import { FormattingPlugin } from "../plugins/formatting";
+import { HighlightPlugin } from "../plugins/highlight";
+import { MergePlugin } from "../plugins/merge";
+import { RendererPlugin } from "../plugins/renderer";
+import { SelectionPlugin } from "../plugins/selection";
+import { SelectionInputPlugin } from "../plugins/selection_inputs";
+
+// -----------------------------------------------------------------------------
+// Getters
+// -----------------------------------------------------------------------------
+export interface Getters {
+  applyOffset: CorePlugin["applyOffset"];
+  getCell: CorePlugin["getCell"];
+  getCellText: CorePlugin["getCellText"];
+  zoneToXC: CorePlugin["zoneToXC"];
+
+  getActiveSheet: CorePlugin["getActiveSheet"];
+  getSheetName: CorePlugin["getSheetName"];
+  getSheetIdByName: CorePlugin["getSheetIdByName"];
+  getSheets: CorePlugin["getSheets"];
+  getCol: CorePlugin["getCol"];
+  getRow: CorePlugin["getRow"];
+  getColCells: CorePlugin["getColCells"];
+  getNumberCols: CorePlugin["getNumberCols"];
+  getNumberRows: CorePlugin["getNumberRows"];
+  getColsZone: CorePlugin["getColsZone"];
+  getRowsZone: CorePlugin["getRowsZone"];
+  getGridSize: CorePlugin["getGridSize"];
+  getRangeValues: CorePlugin["getRangeValues"];
+  getRangeFormattedValues: CorePlugin["getRangeFormattedValues"];
+  shouldShowFormulas: CorePlugin["shouldShowFormulas"];
+
+  getClipboardContent: ClipboardPlugin["getClipboardContent"];
+  isPaintingFormat: ClipboardPlugin["isPaintingFormat"];
+  getPasteZones: ClipboardPlugin["getPasteZones"];
+
+  getCellWidth: FormattingPlugin["getCellWidth"];
+  getTextWidth: FormattingPlugin["getTextWidth"];
+  getCellHeight: FormattingPlugin["getCellHeight"];
+
+  expandZone: MergePlugin["expandZone"];
+  isMergeDestructive: MergePlugin["isMergeDestructive"];
+  isInMerge: MergePlugin["isInMerge"];
+  getMainCell: MergePlugin["getMainCell"];
+  doesIntersectMerge: MergePlugin["doesIntersectMerge"];
+
+  getActiveCell: SelectionPlugin["getActiveCell"];
+  getActiveCols: SelectionPlugin["getActiveCols"];
+  getActiveRows: SelectionPlugin["getActiveRows"];
+  getSelectedZones: SelectionPlugin["getSelectedZones"];
+  getSelectedZone: SelectionPlugin["getSelectedZone"];
+  getSelection: SelectionPlugin["getSelection"];
+  getPosition: SelectionPlugin["getPosition"];
+  getAggregate: SelectionPlugin["getAggregate"];
+  getSelectionMode: SelectionPlugin["getSelectionMode"];
+  isSelected: SelectionPlugin["isSelected"];
+
+  getHighlights: HighlightPlugin["getHighlights"];
+
+  getConditionalFormats: ConditionalFormatPlugin["getConditionalFormats"];
+  getConditionalStyle: ConditionalFormatPlugin["getConditionalStyle"];
+  getRulesSelection: ConditionalFormatPlugin["getRulesSelection"];
+
+  getColIndex: RendererPlugin["getColIndex"];
+  getRowIndex: RendererPlugin["getRowIndex"];
+  getRect: RendererPlugin["getRect"];
+  snapViewportToCell: RendererPlugin["snapViewportToCell"];
+  adjustViewportPosition: RendererPlugin["adjustViewportPosition"];
+  adjustViewportZone: RendererPlugin["adjustViewportZone"];
+
+  getCurrentStyle: FormattingPlugin["getCurrentStyle"];
+  getCellStyle: FormattingPlugin["getCellStyle"];
+  getCellBorder: FormattingPlugin["getCellBorder"];
+
+  canUndo: WHistory["canUndo"];
+  canRedo: WHistory["canRedo"];
+
+  evaluateFormula: EvaluationPlugin["evaluateFormula"];
+  isIdle: EvaluationPlugin["isIdle"];
+
+  getEditionMode: EditionPlugin["getEditionMode"];
+  getCurrentContent: EditionPlugin["getCurrentContent"];
+  getEditionSheet: EditionPlugin["getEditionSheet"];
+
+  getAutofillTooltip: AutofillPlugin["getAutofillTooltip"];
+
+  getSelectionInput: SelectionInputPlugin["getSelectionInput"];
+  getSelectionInputValue: SelectionInputPlugin["getSelectionInputValue"];
+  getFigures: FigurePlugin["getFigures"];
+  getSelectedFigureId: FigurePlugin["getSelectedFigureId"];
+  getFigure: FigurePlugin["getFigure"];
+
+  getChartRuntime: ChartPlugin["getChartRuntime"];
+}

package/src/types/index.ts

@@ -0,0 +1,20 @@
+/**
+ * State
+ *
+ * This file defines the basic types involved in maintaining the running state
+ * of a o-spreadsheet.
+ *
+ * The most important exported values are:
+ * - interface GridState: the internal type of the state managed by the model
+ */
+
+export * from "./autofill";
+export * from "./chart";
+export * from "./commands";
+export * from "./conditional_formatting";
+export * from "./env";
+export * from "./functions";
+export * from "./getters";
+export * from "./misc";
+export * from "./rendering";
+export * from "./workbook_data";

package/src/types/misc.ts

@@ -0,0 +1,143 @@
+// -----------------------------------------------------------------------------
+
+import { Dependencies } from ".";
+
+// -----------------------------------------------------------------------------
+export type UID = string;
+export interface Zone {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export type Align = "left" | "right" | "center" | undefined;
+
+export interface Style {
+  bold?: boolean;
+  italic?: boolean;
+  strikethrough?: boolean;
+  align?: Align;
+  fillColor?: string;
+  textColor?: string;
+  fontSize?: number; // in pt, not in px!
+}
+
+export interface Sheet {
+  id: string;
+  name: string;
+  cells: { [key: string]: Cell };
+  colNumber: number;
+  rowNumber: number;
+  merges: { [key: number]: Merge };
+  mergeCellMap: { [key: string]: number };
+  cols: Col[];
+  rows: Row[];
+}
+
+// A border description is a pair [style, ]
+export type BorderStyle = "thin" | "medium" | "thick" | "dashed" | "dotted" | "double";
+export type BorderDescr = [BorderStyle, string];
+
+export interface Border {
+  top?: BorderDescr;
+  left?: BorderDescr;
+  bottom?: BorderDescr;
+  right?: BorderDescr;
+}
+
+export interface NewCell {
+  content?: string;
+  style?: number;
+  border?: number;
+  format?: string;
+}
+
+export type ReferenceDenormalizer = (
+  position: number,
+  references: string[],
+  sheetId: UID,
+  functionName: string,
+  paramNumber: number
+) => any | any[][];
+
+export type EnsureRange = (position: number, references: string[], sheetId: UID) => any[][];
+
+export type NumberParser = (str: string) => number;
+
+export type _CompiledFormula = (
+  deps: Dependencies,
+  sheetId: UID,
+  refFn: ReferenceDenormalizer,
+  range: EnsureRange,
+  ctx: {}
+) => any;
+
+export interface CompiledFormula extends _CompiledFormula {
+  async: boolean;
+}
+
+export interface Cell extends NewCell {
+  col: number;
+  row: number;
+  xc: string;
+  error?: string;
+  pending?: boolean;
+  value: any;
+  formula?: {
+    text: string;
+    dependencies: Dependencies;
+    compiledFormula: CompiledFormula;
+  };
+  type: "formula" | "text" | "number" | "date";
+}
+
+export interface Header {
+  start: number;
+  end: number;
+  name: string;
+  size: number;
+}
+
+export interface Row extends Header {
+  cells: { [col: number]: Cell };
+}
+
+export type Col = Header;
+
+export interface Merge extends Zone {
+  id: number;
+  topLeft: string;
+}
+
+export interface Highlight {
+  zone: Zone;
+  sheet: string;
+  color: string | null;
+}
+
+export type BorderCommand =
+  | "all"
+  | "hv"
+  | "h"
+  | "v"
+  | "external"
+  | "left"
+  | "top"
+  | "right"
+  | "bottom"
+  | "clear";
+
+export interface Workbook {
+  // sheets
+  visibleSheets: string[]; // ids of visible sheets
+  sheets: { [id: string]: Sheet };
+  activeSheet: Sheet;
+}
+
+export const enum DIRECTION {
+  UP,
+  DOWN,
+  LEFT,
+  RIGHT,
+}

package/src/types/rendering.ts

@@ -0,0 +1,41 @@
+import { Align, Border, Style, Zone } from "./misc";
+
+export type Rect = [number, number, number, number];
+
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  text: string;
+  textWidth: number;
+  style: Style | null;
+  border: Border | null;
+  align: Align;
+  clipRect: Rect | null;
+  error?: string;
+}
+
+export interface Viewport extends Zone {
+  width: number;
+  height: number;
+  offsetX: number;
+  offsetY: number;
+}
+
+export interface GridRenderingContext {
+  ctx: CanvasRenderingContext2D;
+  viewport: Viewport;
+  dpr: number;
+  thinLineWidth: number;
+}
+
+export const enum LAYERS {
+  Background,
+  Highlights,
+  Clipboard,
+  Chart,
+  Selection,
+  Autofill,
+  Headers, // Probably keep this at the end
+}

package/src/types/workbook_data.ts

@@ -0,0 +1,62 @@
+import { ConditionalFormat } from "./conditional_formatting";
+import { Border, Style } from "./misc";
+
+export type Dependencies = (string | number)[];
+
+/**
+ * Represents a string in which all range references, strings and numbers are
+ * replaced by dependencies references.
+ */
+export type NormalizedFormulaString = string;
+
+export type NormalizedFormula = {
+  // if the content is a formula (ex. =sum(  a1:b3, 3) + a1, should be stored as
+  // {formula: "=sum(  |ref1|, |ref2|) + |ref3|"), ["a1:b3","a1"]
+  // This normalization applies to range references, numbers and string values
+  text: NormalizedFormulaString;
+  dependencies: Dependencies;
+};
+
+export interface CellData {
+  content?: string;
+  formula?: NormalizedFormula;
+  style?: number;
+  border?: number;
+  format?: string;
+}
+
+export interface HeaderData {
+  size?: number;
+}
+
+export interface Figure<T> {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  tag: string;
+  data: T;
+}
+
+export interface SheetData {
+  id: string;
+  name: string;
+  colNumber: number;
+  rowNumber: number;
+  cells: { [key: string]: CellData };
+  merges: string[];
+  figures: Figure<any>[];
+  cols: { [key: number]: HeaderData };
+  rows: { [key: number]: HeaderData };
+  conditionalFormats: ConditionalFormat[];
+}
+
+export interface WorkbookData {
+  version: number;
+  sheets: SheetData[];
+  activeSheet: string;
+  styles: { [key: number]: Style };
+  borders: { [key: number]: Border };
+  entities: { [key: string]: { [key: string]: any } };
+}

package/tests/__mocks__/uuid.ts

@@ -0,0 +1,7 @@
+let nextId = 1;
+
+export function uuidv4(): string {
+  return String(nextId++);
+}
+
+export const setNextId = (i) => (nextId = i);

package/tests/canvas.mock.ts

@@ -0,0 +1,34 @@
+let size = 1000;
+export function setMockSize(s) {
+  size = s;
+}
+
+export class MockCanvasRenderingContext2D {
+  translate() {}
+  scale() {}
+  clearRect() {}
+  beginPath() {}
+  moveTo() {}
+  lineTo() {}
+  stroke() {}
+  fillRect() {}
+  strokeRect() {}
+  fillText() {}
+  fill() {}
+  save() {}
+  rect() {}
+  clip() {}
+  restore() {}
+  setLineDash() {}
+  measureText(text: string) {
+    return { width: size };
+  }
+}
+
+const patch = {
+  getContext: function () {
+    return new MockCanvasRenderingContext2D() as any as CanvasRenderingContext2D;
+  },
+};
+/* js-ignore */
+Object.assign(HTMLCanvasElement.prototype, patch);

package/tests/components/__mocks__/content_editable_helper.ts

@@ -0,0 +1,79 @@
+export class ContentEditableHelper {
+  currentState = {
+    cursorStart: 0,
+    cursorEnd: 0,
+  };
+  colors = {};
+  el: HTMLElement | null = null;
+  manualRange: boolean = false;
+
+  constructor() {}
+
+  updateEl(el: HTMLElement) {
+    this.el = el;
+    this.el.focus();
+    this.currentState = {
+      cursorStart: 0,
+      cursorEnd: 0,
+    };
+
+    this.colors = {};
+  }
+  selectRange(start, end) {
+    this.manualRange = true;
+    this.currentState.cursorStart = start;
+    this.currentState.cursorEnd = end;
+  }
+  selectLast() {
+    const text = this.el!.textContent!;
+    this.currentState.cursorStart = text.length - 1;
+    this.currentState.cursorEnd = text.length - 1;
+  }
+  insertText(value, color) {
+    const text = this.el!.textContent!;
+
+    if (this.manualRange) {
+      let start = text.substring(0, this.currentState.cursorStart);
+      let end = text.substring(this.currentState.cursorEnd);
+      let newValue = start + value + end;
+      while (this.el!.firstChild) {
+        this.el!.removeChild(this.el!.firstChild);
+      }
+      this.el!.append(newValue);
+    } else {
+      this.el!.append(value);
+    }
+    if (this.currentState.cursorStart === this.currentState.cursorEnd) {
+      const position = this.currentState.cursorStart + value.length;
+      this.currentState.cursorEnd = position;
+      this.currentState.cursorStart = position;
+    } else {
+      this.currentState.cursorEnd = this.currentState.cursorStart + value.length;
+      this.manualRange = false;
+    }
+    this.colors[value] = color;
+
+    this.el!.dispatchEvent(new Event("input"));
+  }
+  removeSelection() {
+    this.currentState.cursorStart = 0;
+    this.currentState.cursorEnd = 0;
+  }
+  removeAll() {
+    this.currentState.cursorStart = 0;
+    this.currentState.cursorEnd = 0;
+    while (this.el!.firstChild) {
+      this.el!.removeChild(this.el!.firstChild);
+    }
+  }
+  getCurrentSelection() {
+    if (this.manualRange) {
+      return { start: this.currentState.cursorStart, end: this.currentState.cursorEnd };
+    }
+    const v = this.el!.textContent || "";
+    return {
+      start: v.length,
+      end: v.length,
+    };
+  }
+}

package/tests/components/__mocks__/scrollbar.ts

@@ -0,0 +1,18 @@
+import { ScrollDirection } from "../../../src/components/scrollbar";
+
+export class ScrollBar {
+  private scrollValue: number;
+  el: HTMLElement;
+  constructor(el: HTMLElement | null, direction: ScrollDirection) {
+    this.el = el!;
+    this.scrollValue = 0;
+  }
+
+  get scroll(): number {
+    return this.scrollValue;
+  }
+
+  set scroll(value: number) {
+    this.scrollValue = value;
+  }
+}