@odoo/o-spreadsheet 1.0.1

package/src/plugins/selection_inputs.ts

@@ -0,0 +1,326 @@
+import { BasePlugin } from "../base_plugin";
+import { rangeReference } from "../formulas/index";
+import { getNextColor, uuidv4 } from "../helpers/index";
+import { Mode } from "../model";
+import { CancelledReason, Command, CommandResult, Highlight, LAYERS } from "../types/index";
+import { SelectionMode } from "./selection";
+
+interface RangeInputValue {
+  id: string;
+  xc: string;
+  color?: string | null;
+}
+
+/**
+ * Selection input Plugin
+ *
+ * The SelectionInput component input and output are both arrays of strings, but
+ * it requires an intermediary internal state to work.
+ * This plugin handles this internal state.
+ */
+export class SelectionInputPlugin extends BasePlugin {
+  static modes: Mode[] = ["normal", "readonly"];
+  static layers = [LAYERS.Highlights];
+  static getters = ["getSelectionInput", "getSelectionInputValue"];
+
+  private inputs: {
+    [id: string]: RangeInputValue[];
+  } = {};
+  private inputMaximums: { [id: string]: number } = {};
+  private focusedInput: string | null = null;
+  private focusedRange: number | null = null;
+  private willAddNewRange: boolean = false;
+
+  // ---------------------------------------------------------------------------
+  // Command Handling
+  // ---------------------------------------------------------------------------
+
+  allowDispatch(cmd: Command): CommandResult {
+    switch (cmd.type) {
+      case "FOCUS_RANGE":
+        const index = this.getIndex(cmd.id, cmd.rangeId);
+        if (this.focusedInput === cmd.id && this.focusedRange === index) {
+          return { status: "CANCELLED", reason: CancelledReason.InputAlreadyFocused };
+        }
+        break;
+      case "ADD_EMPTY_RANGE":
+        if (this.inputs[cmd.id].length === this.inputMaximums[cmd.id]) {
+          return { status: "CANCELLED", reason: CancelledReason.MaximumRangesReached };
+        }
+        break;
+    }
+    return { status: "SUCCESS" };
+  }
+
+  handle(cmd: Command) {
+    switch (cmd.type) {
+      case "ENABLE_NEW_SELECTION_INPUT":
+        this.initInput(cmd.id, cmd.initialRanges || [], cmd.maximumRanges);
+        break;
+      case "DISABLE_SELECTION_INPUT":
+        if (this.focusedInput === cmd.id) {
+          this.dispatch("HIGHLIGHT_SELECTION", { enabled: false });
+          this.dispatch("REMOVE_ALL_HIGHLIGHTS");
+          this.focusedRange = null;
+          this.focusedInput = null;
+        }
+        delete this.inputs[cmd.id];
+        delete this.inputMaximums[cmd.id];
+        break;
+      case "FOCUS_RANGE":
+        this.focus(cmd.id, this.getIndex(cmd.id, cmd.rangeId));
+        break;
+      case "CHANGE_RANGE": {
+        const index = this.getIndex(cmd.id, cmd.rangeId);
+        if (index !== null) {
+          this.changeRange(cmd.id, index, cmd.value);
+        }
+        break;
+      }
+      case "ADD_EMPTY_RANGE":
+        this.inputs[cmd.id] = [...this.inputs[cmd.id], Object.freeze({ xc: "", id: uuidv4() })];
+        this.focusLast(cmd.id);
+        break;
+      case "REMOVE_RANGE":
+        const index = this.getIndex(cmd.id, cmd.rangeId);
+        if (index !== null) {
+          this.removeRange(cmd.id, index);
+        }
+        break;
+      case "ADD_HIGHLIGHTS":
+        const highlights = this.getters.getHighlights();
+        this.add(highlights.slice(highlights.length - Object.keys(cmd.ranges).length));
+        break;
+      case "START_SELECTION_EXPANSION":
+        if (this.willAddNewRange) {
+          this.dispatch("RESET_PENDING_HIGHLIGHT");
+        }
+        break;
+      case "PREPARE_SELECTION_EXPANSION": {
+        const [id, index] = [this.focusedInput, this.focusedRange];
+        if (id !== null && index !== null) {
+          this.willAddNewRange = this.inputs[id][index].xc.trim() !== "";
+        }
+        break;
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Getters
+  // ---------------------------------------------------------------------------
+
+  getSelectionInput(id: string): (RangeInputValue & { isFocused: boolean })[] {
+    if (!this.inputs[id]) {
+      return [];
+    }
+    return this.inputs[id].map((input, index) =>
+      Object.assign({}, input, {
+        color: this.focusedInput === id && this.focusedRange !== null ? input.color : null,
+        isFocused: this.focusedInput === id && this.focusedRange === index,
+      })
+    );
+  }
+
+  getSelectionInputValue(id: string): string[] {
+    return this.cleanInputs(this.inputs[id].map((range) => range.xc));
+  }
+
+  // ---------------------------------------------------------------------------
+  // Other
+  // ---------------------------------------------------------------------------
+
+  private initInput(id: string, initialRanges: string[], maximumRanges?: number) {
+    this.inputs[id] = initialRanges.map((r) =>
+      Object.freeze({
+        xc: r,
+        id: uuidv4(),
+      })
+    ) as RangeInputValue[];
+    if (maximumRanges !== undefined) {
+      this.inputMaximums[id] = maximumRanges;
+    }
+    if (this.inputs[id].length === 0) {
+      this.dispatch("ADD_EMPTY_RANGE", { id });
+    }
+  }
+
+  /**
+   * Focus a given range or remove the focus.
+   */
+  private focus(id: string, index: number | null) {
+    const currentFocusedInput = this.focusedInput;
+    const currentFocusedRange = this.focusedInput && this.focusedRange;
+    this.focusedInput = id;
+
+    if (currentFocusedRange !== null && index == null) {
+      this.dispatch("HIGHLIGHT_SELECTION", { enabled: false });
+      this.removeAllHighlights();
+    }
+    if (currentFocusedInput !== null && id !== null && currentFocusedInput !== id) {
+      this.removeAllHighlights();
+    }
+    if ((currentFocusedRange === null && index !== null) || currentFocusedInput !== id) {
+      this.dispatch("HIGHLIGHT_SELECTION", { enabled: true });
+      this.highlightAllRanges(id);
+    }
+
+    this.setPendingRange(id, index);
+    if (index !== null) {
+      const color = this.inputs[id][index].color || getNextColor();
+      this.dispatch("SET_HIGHLIGHT_COLOR", { color });
+    }
+    this.focusedRange = index;
+  }
+
+  private focusLast(id: string) {
+    this.focus(id, this.inputs[id].length - 1);
+  }
+
+  private removeAllHighlights() {
+    this.dispatch("REMOVE_ALL_HIGHLIGHTS");
+  }
+
+  /**
+   * Highlight all valid ranges.
+   */
+  private highlightAllRanges(id: string) {
+    const inputs = this.inputs[id];
+    for (const [index, input] of inputs.entries()) {
+      this.focusedRange = index;
+      const ranges = this.inputToHighlights(input);
+      if (Object.keys(ranges).length > 0) {
+        this.dispatch("ADD_HIGHLIGHTS", { ranges });
+      }
+    }
+  }
+
+  private add(newHighlights: Highlight[]) {
+    if (
+      this.focusedInput === null ||
+      this.focusedRange === null ||
+      this.getters.getEditionMode() === "selecting" ||
+      newHighlights.length === 0
+    ) {
+      return;
+    }
+    const mode = this.getters.getSelectionMode();
+    if (mode === SelectionMode.expanding && this.willAddNewRange) {
+      this.addNewRange(this.focusedInput, newHighlights);
+      this.willAddNewRange = false;
+    } else {
+      this.setRange(this.focusedInput, this.focusedRange, newHighlights);
+    }
+  }
+
+  /**
+   * Add a new input at the end and focus it.
+   */
+  private addNewRange(id: string, highlights: Highlight[]) {
+    if (this.inputMaximums[id] < this.inputs[id].length + highlights.length) {
+      return;
+    }
+    this.inputs[id] = this.inputs[id].concat(this.highlightsToInput(highlights));
+    this.focusLast(id);
+  }
+
+  private setRange(id: string, index: number, highlights: Highlight[]) {
+    let [existingRange, ...newRanges] = this.highlightsToInput(highlights);
+    const additionalRanges = this.inputs[id].length + newRanges.length - this.inputMaximums[id];
+    if (additionalRanges) {
+      newRanges = newRanges.slice(0, newRanges.length - additionalRanges);
+    }
+    this.inputs[id].splice(index, 1, existingRange, ...newRanges);
+    // focus the last newly added range
+    if (newRanges.length) {
+      this.focus(id, index + newRanges.length);
+    }
+  }
+
+  private changeRange(id: string, index: number, value: string) {
+    if (this.focusedInput !== id || this.focusedRange !== index) {
+      this.dispatch("FOCUS_RANGE", { id, rangeId: this.inputs[id][index].id });
+    }
+    const input = this.inputs[id][index];
+    this.dispatch("REMOVE_HIGHLIGHTS", { ranges: this.inputToHighlights(input) });
+    this.dispatch("ADD_HIGHLIGHTS", {
+      ranges: this.inputToHighlights({
+        color: input.color,
+        xc: value,
+      }),
+    });
+  }
+
+  private removeRange(id: string, index: number) {
+    const [removedRange] = this.inputs[id].splice(index, 1);
+    if (this.focusedInput === id && this.focusedRange !== null) {
+      this.dispatch("REMOVE_HIGHLIGHTS", {
+        ranges: this.inputToHighlights(removedRange),
+      });
+      this.focusLast(id);
+    }
+  }
+
+  private setPendingRange(id: string, index: number | null) {
+    this.dispatch("RESET_PENDING_HIGHLIGHT");
+    if (index !== null && this.inputs[id][index].xc) {
+      this.dispatch("ADD_PENDING_HIGHLIGHTS", {
+        ranges: this.inputToHighlights(this.inputs[id][index]),
+      });
+    }
+  }
+
+  /**
+   * Convert highlights to the input format
+   */
+  private highlightsToInput(highlights: Highlight[]): RangeInputValue[] {
+    return highlights.map((h) =>
+      Object.freeze({
+        xc: this.getters.zoneToXC(h.zone),
+        id: uuidv4(),
+        color: h.color,
+      })
+    );
+  }
+
+  /**
+   * Convert highlights input format to the command format.
+   * The first xc in the input range will keep its color.
+   */
+  private inputToHighlights({ xc, color }: Pick<RangeInputValue, "xc" | "color">): {
+    [range: string]: string;
+  } {
+    const ranges = this.cleanInputs([xc]);
+    if (ranges.length === 0) return {};
+    const [fromInput, ...otherRanges] = ranges;
+    const highlights: { [range: string]: string } = {
+      [fromInput]: color || getNextColor(),
+    };
+    for (const range of otherRanges) {
+      highlights[range] = getNextColor();
+    }
+    return highlights;
+  }
+
+  private isRangeValid(xc: string): boolean {
+    return xc.match(rangeReference) !== null;
+  }
+
+  private cleanInputs(ranges: string[]): string[] {
+    return ranges
+      .map((xc) => xc.split(","))
+      .flat()
+      .map((xc) => xc.trim())
+      .filter((xc) => xc !== "")
+      .filter(this.isRangeValid);
+  }
+
+  /**
+   * Return the index of a range given its id
+   * or `null` if the range is not found.
+   */
+  private getIndex(id: string, rangeId: string | null): number | null {
+    const index = this.inputs[id].findIndex((range) => range.id === rangeId);
+    return index >= 0 ? index : null;
+  }
+}

package/src/registries/autofill_modifiers.ts

@@ -0,0 +1,76 @@
+import { Registry } from "../registry";
+import {
+  AutofillModifier,
+  CellData,
+  CopyModifier,
+  DIRECTION,
+  FormulaModifier,
+  Getters,
+  IncrementModifier,
+  Tooltip,
+} from "../types/index";
+
+/**
+ * An AutofillModifierImplementation is used to describe how to handle a
+ * AutofillModifier.
+ */
+interface AutofillModifierImplementation {
+  apply: (
+    rule: AutofillModifier,
+    data: CellData,
+    getters: Getters,
+    direction: DIRECTION
+  ) => { cellData: CellData; tooltip?: Tooltip };
+}
+
+export const autofillModifiersRegistry = new Registry<AutofillModifierImplementation>();
+
+autofillModifiersRegistry
+  .add("INCREMENT_MODIFIER", {
+    apply: (rule: IncrementModifier, data: CellData) => {
+      rule.current += rule.increment;
+      const content = (parseFloat(data.content!) + rule.current).toString();
+      return {
+        cellData: Object.assign({}, data, { content }),
+        tooltip: content ? { props: { content } } : undefined,
+      };
+    },
+  })
+  .add("COPY_MODIFIER", {
+    apply: (rule: CopyModifier, data: CellData) => {
+      return {
+        cellData: data,
+        tooltip: data.content ? { props: { content: data.content } } : undefined,
+      };
+    },
+  })
+  .add("FORMULA_MODIFIER", {
+    apply: (rule: FormulaModifier, data: CellData, getters: Getters, direction: DIRECTION) => {
+      rule.current += rule.increment;
+      let x = 0;
+      let y = 0;
+      switch (direction) {
+        case DIRECTION.UP:
+          x = 0;
+          y = -rule.current;
+          break;
+        case DIRECTION.DOWN:
+          x = 0;
+          y = rule.current;
+          break;
+        case DIRECTION.LEFT:
+          x = -rule.current;
+          y = 0;
+          break;
+        case DIRECTION.RIGHT:
+          x = rule.current;
+          y = 0;
+          break;
+      }
+      const content = getters.applyOffset(data.content!, x, y);
+      return {
+        cellData: Object.assign({}, data, { content }),
+        tooltip: content ? { props: { content } } : undefined,
+      };
+    },
+  });

package/src/registries/autofill_rules.ts

@@ -0,0 +1,98 @@
+import { Registry } from "../registry";
+import { AutofillModifier, Cell } from "../types/index";
+
+/**
+ * An AutofillRule is used to generate what to do when we need to autofill
+ * a cell. (In a AutofillGenerator, see plugins/autofill.ts)
+ *
+ * When we generate the rules to autofill, we take the first matching rule
+ * (ordered by sequence), and we generate the AutofillModifier with generateRule
+ */
+interface AutofillRule {
+  condition: (cell: Cell, cells: (Cell | null)[]) => boolean;
+  generateRule: (cell: Cell, cells: (Cell | null)[]) => AutofillModifier;
+  sequence: number;
+}
+
+export const autofillRulesRegistry = new Registry<AutofillRule>();
+
+/**
+ * Get the consecutive xc that are of type "number".
+ * Return the one which contains the given cell
+ */
+function getGroup(cell: Cell, cells: (Cell | null)[]): string[] {
+  let group: string[] = [];
+  let found: boolean = false;
+  for (let x of cells) {
+    if (x === cell) {
+      found = true;
+    }
+    if (!x || x.type !== "number") {
+      if (found) {
+        return group;
+      }
+      group = [];
+    }
+    if (x && x.type === "number" && x.content) {
+      group.push(x.content);
+    }
+  }
+  return group;
+}
+
+/**
+ * Get the average steps between numbers
+ */
+function getAverageIncrement(group: string[]) {
+  const averages: number[] = [];
+  let last = parseFloat(group[0]);
+  for (let i = 1; i < group.length; i++) {
+    const current = parseFloat(group[i]);
+    averages.push(current - last);
+    last = current;
+  }
+  return averages.reduce((a, b) => a + b, 0) / averages.length;
+}
+
+autofillRulesRegistry
+  .add("simple_value_copy", {
+    condition: (cell: Cell, cells: (Cell | null)[]) => {
+      return cells.length === 1 && ["text", "date", "number"].includes(cell.type);
+    },
+    generateRule: () => {
+      return { type: "COPY_MODIFIER" };
+    },
+    sequence: 10,
+  })
+  .add("copy_text", {
+    condition: (cell: Cell) => cell.type === "text",
+    generateRule: () => {
+      return { type: "COPY_MODIFIER" };
+    },
+    sequence: 20,
+  })
+  .add("update_formula", {
+    condition: (cell: Cell) => cell.type === "formula",
+    generateRule: (_, cells: (Cell | null)[]) => {
+      return { type: "FORMULA_MODIFIER", increment: cells.length, current: 0 };
+    },
+    sequence: 30,
+  })
+  .add("increment_number", {
+    condition: (cell: Cell) => cell.type === "number",
+    generateRule: (cell: Cell, cells: (Cell | null)[]) => {
+      const group = getGroup(cell, cells);
+      let increment: number = 1;
+      if (group.length == 2) {
+        increment = (parseFloat(group[1]) - parseFloat(group[0])) * 2;
+      } else if (group.length > 2) {
+        increment = getAverageIncrement(group) * group.length;
+      }
+      return {
+        type: "INCREMENT_MODIFIER",
+        increment,
+        current: 0,
+      };
+    },
+    sequence: 40,
+  });

package/src/registries/figure_registry.ts

@@ -0,0 +1,30 @@
+import { ChartFigure } from "../components/figures/chart";
+import { TextFigure } from "../components/figures/text_figure";
+import { Registry } from "../registry";
+
+//------------------------------------------------------------------------------
+// Figure Registry
+//------------------------------------------------------------------------------
+
+/**
+ * This registry is intended to map a type of figure (tag) to a class of
+ * component, that will be used in the UI to represent the figure.
+ *
+ * The most important type of figure will be the Chart
+ */
+
+export interface FigureContent {
+  Component: any;
+  SidePanelComponent?: string;
+}
+
+export const figureRegistry = new Registry<FigureContent>();
+
+// figureRegistry.add("ConditionalFormatting", {
+//   title: "Conditional formatting",
+//   Body: ConditionalFormattingPanel,
+// });
+//
+
+figureRegistry.add("text", { Component: TextFigure });
+figureRegistry.add("chart", { Component: ChartFigure, SidePanelComponent: "ChartPanel" });

package/src/registries/index.ts

@@ -0,0 +1,7 @@
+export * from "./autofill_modifiers";
+export * from "./autofill_rules";
+export * from "./figure_registry";
+export * from "./menus/index";
+export * from "./menu_items_registry";
+export * from "./side_panel_registry";
+export * from "./topbar_component_registry";

package/src/registries/menu_items_registry.ts

@@ -0,0 +1,110 @@
+import { Registry } from "../registry";
+import { SpreadsheetEnv } from "../types/env";
+
+//------------------------------------------------------------------------------
+// Menu Item Registry
+//------------------------------------------------------------------------------
+
+/**
+ * An ActionMenuItem represent a menu item for the menus of the topbar.
+ * Later, it will be reused for the context menu items as well.
+ *
+ * An ActionMenuItem has:
+ * - id, used for example to add child
+ * - name, which can be a string or a function to compute it
+ * - sequence, which represents its position inside the
+ *   menus (the lower sequence it has, the upper it is in the menu)
+ * - isVisible, which can be defined to compute the visibility of the item
+ * - action, the action associated to this item
+ * - children, subitems associated to this item
+ *    NB: an item without action or children is not displayed !
+ * - separator, whether it should add a separator below the item
+ *    NB: a separator defined on the last item is not displayed !
+ *
+ */
+export interface MenuItem {
+  name: string | ((env: SpreadsheetEnv) => string);
+  sequence: number;
+  id?: string;
+  isVisible?: (env: SpreadsheetEnv) => boolean;
+  isEnabled?: (env: SpreadsheetEnv) => boolean;
+  action?: (env: SpreadsheetEnv) => void;
+  children?: menuChildren;
+  separator?: boolean;
+}
+
+export type FullMenuItem = Required<MenuItem>;
+
+type menuChildren = FullMenuItem[] | ((env: SpreadsheetEnv) => FullMenuItem[]);
+
+const DEFAULT_MENU_ITEM = (key: string) => ({
+  isVisible: () => true,
+  isEnabled: () => true,
+  action: false,
+  children: [],
+  separator: false,
+  id: key,
+});
+
+export function createFullMenuItem(key: string, value: MenuItem): FullMenuItem {
+  return Object.assign({}, DEFAULT_MENU_ITEM(key), value);
+}
+/**
+ * The class Registry is extended in order to add the function addChild
+ *
+ */
+export class MenuItemRegistry extends Registry<FullMenuItem> {
+  /**
+   * @override
+   */
+  add(key: string, value: MenuItem): MenuItemRegistry {
+    this.content[key] = createFullMenuItem(key, value);
+    return this;
+  }
+  /**
+   * Add a subitem to an existing item
+   * @param path Path of items to add this subitem
+   * @param value Subitem to add
+   */
+  addChild(key: string, path: string[], value: MenuItem): MenuItemRegistry {
+    const root = path.splice(0, 1)[0];
+    let node: FullMenuItem | undefined = this.content[root];
+    if (!node) {
+      throw new Error(`Path ${root + ":" + path.join(":")} not found`);
+    }
+    for (let p of path) {
+      if (typeof node.children === "function") {
+        node = undefined;
+      } else {
+        node = node.children.find((elt) => elt.id === p);
+      }
+      if (!node) {
+        throw new Error(`Path ${root + ":" + path.join(":")} not found`);
+      }
+    }
+    (node.children as FullMenuItem[]).push(createFullMenuItem(key, value));
+    return this;
+  }
+
+  getChildren(node: FullMenuItem, env: SpreadsheetEnv): FullMenuItem[] {
+    if (typeof node.children === "function") {
+      return node.children(env).sort((a, b) => a.sequence - b.sequence);
+    }
+    return node.children.sort((a, b) => a.sequence - b.sequence);
+  }
+
+  getName(node: FullMenuItem, env: SpreadsheetEnv): string {
+    if (typeof node.name === "function") {
+      return node.name(env);
+    }
+    return node.name;
+  }
+
+  /**
+   * Get a list of all elements in the registry, ordered by sequence
+   * @override
+   */
+  getAll(): FullMenuItem[] {
+    return super.getAll().sort((a, b) => a.sequence - b.sequence);
+  }
+}