@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/src/model.ts

@@ -1,261 +0,0 @@
-import * as owl from "@odoo/owl";
-import { BasePlugin } from "./base_plugin";
-import { createEmptyWorkbook, createEmptyWorkbookData, load } from "./data";
-import { DEBUG } from "./helpers/index";
-import { WHistory } from "./history";
-import { pluginRegistry } from "./plugins/index";
-import { _lt } from "./translation";
-import {
-  Command,
-  CommandDispatcher,
-  CommandHandler,
-  CommandSuccess,
-  EvalContext,
-  Getters,
-  GridRenderingContext,
-  LAYERS,
-  Workbook,
-  WorkbookData,
-} from "./types/index";
-
-/**
- * Model
- *
- * The Model class is the owner of the state of the Spreadsheet. However, it
- * has more a coordination role: it defers the actual state manipulation work to
- * plugins.
- *
- * At creation, the Model instantiates all necessary plugins.  They each have
- * a private state (for example, the Selection plugin has the current selection),
- * and share a common core state (named workbook).
- *
- * State changes are then performed through commands.  Commands are dispatched
- * to the model, which will then relay them to each plugins (and the history
- * handler). Then, the model will trigger an 'update' event to notify whoever
- * is concerned that the command was applied (if it was not cancelled).
- *
- * Also, the model has an unconventional responsibility: it actually renders the
- * visible viewport on a canvas. This is because each plugins actually manage a
- * specific concern about the content of the spreadsheet, and it is more natural
- * if they are able to read data from their internal state to represent it on the
- * screen.
- *
- * Note that the Model can be used in a standalone way to manipulate
- * programmatically a spreadsheet.
- */
-
-export type Mode = "normal" | "headless" | "readonly";
-export interface ModelConfig {
-  mode: Mode;
-  openSidePanel: (panel: string, panelProps?: any) => void;
-  notifyUser: (content: string) => any;
-  askConfirmation: (content: string, confirm: () => any, cancel?: () => any) => any;
-  editText: (title: string, placeholder: string, callback: (text: string | null) => any) => any;
-  evalContext: EvalContext;
-}
-
-const enum Status {
-  Ready,
-  Running,
-  Finalizing,
-  Interactive,
-}
-
-export class Model extends owl.core.EventBus implements CommandDispatcher {
-  /**
-   * Handlers are classes that can handle a command. In practice, this is
-   * basically a list of all plugins and the history manager (not a plugin)
-   */
-  private handlers: CommandHandler[];
-
-  /**
-   * A plugin can draw some contents on the canvas. But even better: it can do
-   * so multiple times.  The order of the render calls will determine a list of
-   * "layers" (i.e., earlier calls will be obviously drawn below later calls).
-   * This list simply keeps the renderers+layer information so the drawing code
-   * can just iterate on it
-   */
-  private renderers: [BasePlugin, LAYERS][] = [];
-
-  /**
-   * Internal status of the model. Important for command handling coordination
-   */
-  private status: Status = Status.Ready;
-
-  /**
-   * The config object contains some configuration flag and callbacks
-   */
-  private config: ModelConfig;
-
-  /**
-   * The workbook is the core state, shared between all plugins.
-   */
-  private workbook: Workbook;
-
-  /**
-   * Getters are the main way the rest of the UI read data from the model. Also,
-   * it is shared between all plugins, so they can also communicate with each
-   * other.
-   */
-  getters: Getters;
-
-  constructor(data: any = {}, config: Partial<ModelConfig> = {}) {
-    super();
-    DEBUG.model = this;
-
-    const workbookData = load(data);
-    this.workbook = createEmptyWorkbook();
-    const history = new WHistory(this.workbook);
-
-    this.getters = {
-      canUndo: history.canUndo.bind(history),
-      canRedo: history.canRedo.bind(history),
-    } as Getters;
-    this.handlers = [history];
-
-    this.config = {
-      mode: config.mode || "normal",
-      openSidePanel: config.openSidePanel || (() => {}),
-      notifyUser: config.notifyUser || (() => {}),
-      askConfirmation: config.askConfirmation || (() => {}),
-      editText: config.editText || (() => {}),
-      evalContext: config.evalContext || {},
-    };
-
-    // registering plugins
-    for (let Plugin of pluginRegistry.getAll()) {
-      this.setupPlugin(Plugin, workbookData);
-    }
-
-    // starting plugins
-    this.dispatch("START");
-  }
-
-  destroy() {
-    delete DEBUG.model;
-  }
-
-  /**
-   * Initialise and properly configure a plugin.
-   *
-   * This method is private for now, but if the need arise, there is no deep
-   * reason why the model could not add dynamically a plugin while it is running.
-   */
-  private setupPlugin(Plugin: typeof BasePlugin, data: WorkbookData) {
-    const dispatch = this.dispatch.bind(this);
-    const history = this.handlers.find((p) => p instanceof WHistory)! as WHistory;
-    if (Plugin.modes.includes(this.config.mode)) {
-      const plugin = new Plugin(this.workbook, this.getters, history, dispatch, this.config);
-      plugin.import(data);
-      for (let name of Plugin.getters) {
-        if (!(name in plugin)) {
-          throw new Error(`Invalid getter name: ${name} for plugin ${plugin.constructor}`);
-        }
-        this.getters[name] = plugin[name].bind(plugin);
-      }
-      this.handlers.push(plugin);
-      const layers = Plugin.layers.map((l) => [plugin, l] as [BasePlugin, LAYERS]);
-      this.renderers.push(...layers);
-      this.renderers.sort((p1, p2) => p1[1] - p2[1]);
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Command Handling
-  // ---------------------------------------------------------------------------
-
-  /**
-   * The dispatch method is the only entry point to manipulate date in the model.
-   * This is through this method that commands are dispatched, most of the time
-   * recursively until no plugin want to react anymore.
-   *
-   * Small technical detail: it is defined as an arrow function.  There are two
-   * reasons for this:
-   * 1. this means that the dispatch method can be "detached" from the model,
-   *    which is done when it is put in the environment (see the Spreadsheet
-   *    component)
-   * 2. This allows us to define its type by using the interface CommandDispatcher
-   */
-  dispatch: CommandDispatcher["dispatch"] = (type: string, payload?: any) => {
-    const command: Command = Object.assign({ type }, payload);
-    let status: Status = command.interactive ? Status.Interactive : this.status;
-    switch (status) {
-      case Status.Ready:
-        for (let handler of this.handlers) {
-          const allowDispatch = handler.allowDispatch(command);
-          if (allowDispatch.status === "CANCELLED") {
-            return allowDispatch;
-          }
-        }
-        this.status = Status.Running;
-        for (const h of this.handlers) {
-          h.beforeHandle(command);
-        }
-        for (const h of this.handlers) {
-          h.handle(command);
-        }
-        this.status = Status.Finalizing;
-        for (const h of this.handlers) {
-          h.finalize(command);
-        }
-        this.status = Status.Ready;
-        if (this.config.mode !== "headless") {
-          this.trigger("update");
-        }
-        break;
-      case Status.Running:
-      case Status.Interactive:
-        for (const h of this.handlers) {
-          h.beforeHandle(command);
-        }
-        for (const h of this.handlers) {
-          h.handle(command);
-        }
-        break;
-      case Status.Finalizing:
-        throw new Error(_lt("Nope. Don't do that"));
-    }
-    return { status: "SUCCESS" } as CommandSuccess;
-  };
-
-  // ---------------------------------------------------------------------------
-  // Grid Rendering
-  // ---------------------------------------------------------------------------
-
-  /**
-   * When the Grid component is ready (= mounted), it has a reference to its
-   * canvas and need to draw the grid on it.  This is then done by calling this
-   * method, which will dispatch the call to all registered plugins.
-   *
-   * Note that nothing prevent multiple grid components from calling this method
-   * each, or one grid component calling it multiple times with a different
-   * context. This is probably the way we should do if we want to be able to
-   * freeze a part of the grid (so, we would need to render different zones)
-   */
-  drawGrid(context: GridRenderingContext) {
-    // we make sure here that the viewport is properly positioned: the offsets
-    // correspond exactly to a cell
-    context.viewport = this.getters.snapViewportToCell(context.viewport);
-    for (let [renderer, layer] of this.renderers) {
-      renderer.drawGrid(context, layer);
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Data Export
-  // ---------------------------------------------------------------------------
-
-  /**
-   * As the name of this method strongly implies, it is useful when we need to
-   * export date out of the model.
-   */
-  exportData(): WorkbookData {
-    const data = createEmptyWorkbookData();
-    for (let handler of this.handlers) {
-      if (handler instanceof BasePlugin) {
-        handler.export(data);
-      }
-    }
-    return data;
-  }
-}

package/src/plugins/autofill.ts

@@ -1,412 +0,0 @@
-import { BasePlugin } from "../base_plugin";
-import { clip, isInside, toCartesian, toXC, union } from "../helpers/index";
-import { Mode } from "../model";
-import { autofillModifiersRegistry, autofillRulesRegistry } from "../registries/index";
-import {
-  AutofillModifier,
-  AutofillResult,
-  CancelledReason,
-  Cell,
-  Command,
-  CommandResult,
-  DIRECTION,
-  GeneratorCell,
-  Getters,
-  GridRenderingContext,
-  LAYERS,
-  Tooltip,
-  Zone,
-} from "../types/index";
-
-/**
- * This plugin manage the autofill.
- *
- * The way it works is the next one:
- * For each line (row if the direction is left/right, col otherwise), we create
- * a "AutofillGenerator" object which is used to compute the cells to
- * autofill.
- *
- * When we need to autofill a cell, we compute the origin cell in the source.
- *  EX: from A1:A2, autofill A3->A6.
- *      Target | Origin cell
- *        A3   |   A1
- *        A4   |   A2
- *        A5   |   A1
- *        A6   |   A2
- * When we have the origin, we take the associated cell in the AutofillGenerator
- * and we apply the modifier (AutofillModifier) associated to the content of the
- * cell.
- */
-
-/**
- * This class is used to generate the next values to autofill.
- * It's done from a selection (the source) and describe how the next values
- * should be computed.
- */
-class AutofillGenerator {
-  private cells: GeneratorCell[];
-  private getters: Getters;
-  private index: number = 0;
-  private direction: DIRECTION;
-
-  constructor(cells: GeneratorCell[], getters: Getters, direction: DIRECTION) {
-    this.cells = cells;
-    this.getters = getters;
-    this.direction = direction;
-  }
-
-  /**
-   * Get the next value to autofill
-   */
-  next(): AutofillResult {
-    const genCell = this.cells[this.index++ % this.cells.length];
-    if (!genCell.rule) {
-      return {
-        cellData: genCell.data,
-        tooltip: genCell.data.content ? { props: genCell.data.content } : undefined,
-      };
-    }
-    const rule = genCell.rule;
-    const { cellData, tooltip } = autofillModifiersRegistry
-      .get(rule.type)
-      .apply(rule, genCell.data, this.getters, this.direction);
-    return {
-      cellData: Object.assign({}, genCell.data, cellData),
-      tooltip,
-    };
-  }
-}
-
-/**
- * Autofill Plugin
- *
- */
-export class AutofillPlugin extends BasePlugin {
-  static layers = [LAYERS.Autofill];
-  static getters = ["getAutofillTooltip"];
-  static modes: Mode[] = ["normal", "readonly"];
-
-  private autofillZone: Zone | undefined;
-  private lastCellSelected: { col?: number; row?: number } = {};
-  private direction: DIRECTION | undefined;
-  private tooltip: Tooltip | undefined;
-
-  // ---------------------------------------------------------------------------
-  // Command Handling
-  // ---------------------------------------------------------------------------
-
-  allowDispatch(cmd: Command): CommandResult {
-    switch (cmd.type) {
-      case "AUTOFILL_SELECT":
-        const sheetId = this.getters.getActiveSheet();
-        this.lastCellSelected.col =
-          cmd.col === -1
-            ? this.lastCellSelected.col
-            : clip(cmd.col, 0, this.getters.getNumberCols(sheetId));
-        this.lastCellSelected.row =
-          cmd.row === -1
-            ? this.lastCellSelected.row
-            : clip(cmd.row, 0, this.getters.getNumberRows(sheetId));
-        if (this.lastCellSelected.col !== undefined && this.lastCellSelected.row !== undefined) {
-          return { status: "SUCCESS" };
-        }
-        return { status: "CANCELLED", reason: CancelledReason.InvalidAutofillSelection };
-      case "AUTOFILL_AUTO":
-        const zone = this.getters.getSelectedZone();
-        return zone.top === zone.bottom
-          ? { status: "SUCCESS" }
-          : { status: "CANCELLED", reason: CancelledReason.Unknown };
-    }
-    return { status: "SUCCESS" };
-  }
-
-  handle(cmd: Command) {
-    switch (cmd.type) {
-      case "AUTOFILL":
-        this.autofill(true);
-        break;
-      case "AUTOFILL_SELECT":
-        this.select(cmd.col, cmd.row);
-        break;
-      case "AUTOFILL_AUTO":
-        this.autofillAuto();
-        break;
-      case "AUTOFILL_CELL":
-        const sheet = this.getters.getActiveSheet();
-        this.dispatch("UPDATE_CELL", {
-          sheet,
-          col: cmd.col,
-          row: cmd.row,
-          style: cmd.style,
-          border: cmd.border,
-          content: cmd.content,
-          format: cmd.format,
-        });
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Getters
-  // ---------------------------------------------------------------------------
-
-  getAutofillTooltip(): Tooltip | undefined {
-    return this.tooltip;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private methods
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Autofill the autofillZone from the current selection
-   * @param apply Flag set to true to apply the autofill in the model. It's
-   *              usefull to set it to false when we need to fill the tooltip
-   */
-  private autofill(apply: boolean) {
-    if (!this.autofillZone || this.direction === undefined) {
-      this.tooltip = undefined;
-      return;
-    }
-    const source = this.getters.getSelectedZone();
-    const target = this.autofillZone;
-
-    switch (this.direction) {
-      case DIRECTION.DOWN:
-        for (let col = source.left; col <= source.right; col++) {
-          const xcs: string[] = [];
-          for (let row = source.top; row <= source.bottom; row++) {
-            xcs.push(toXC(col, row));
-          }
-          const generator = this.createGenerator(xcs);
-          for (let row = target.top; row <= target.bottom; row++) {
-            this.computeNewCell(generator, col, row, apply);
-          }
-        }
-        break;
-      case DIRECTION.UP:
-        for (let col = source.left; col <= source.right; col++) {
-          const xcs: string[] = [];
-          for (let row = source.bottom; row >= source.top; row--) {
-            xcs.push(toXC(col, row));
-          }
-          const generator = this.createGenerator(xcs);
-          for (let row = target.bottom; row >= target.top; row--) {
-            this.computeNewCell(generator, col, row, apply);
-          }
-        }
-        break;
-      case DIRECTION.LEFT:
-        for (let row = source.top; row <= source.bottom; row++) {
-          const xcs: string[] = [];
-          for (let col = source.right; col >= source.left; col--) {
-            xcs.push(toXC(col, row));
-          }
-          const generator = this.createGenerator(xcs);
-          for (let col = target.right; col >= target.left; col--) {
-            this.computeNewCell(generator, col, row, apply);
-          }
-        }
-        break;
-      case DIRECTION.RIGHT:
-        for (let row = source.top; row <= source.bottom; row++) {
-          const xcs: string[] = [];
-          for (let col = source.left; col <= source.right; col++) {
-            xcs.push(toXC(col, row));
-          }
-          const generator = this.createGenerator(xcs);
-          for (let col = target.left; col <= target.right; col++) {
-            this.computeNewCell(generator, col, row, apply);
-          }
-        }
-        break;
-    }
-
-    if (apply) {
-      const zone = union(this.getters.getSelectedZone(), this.autofillZone);
-      this.autofillZone = undefined;
-      this.lastCellSelected = {};
-      this.direction = undefined;
-      this.tooltip = undefined;
-      this.dispatch("SET_SELECTION", {
-        zones: [zone],
-        anchor: [zone.left, zone.top],
-      });
-    }
-  }
-
-  /**
-   * Select a cell which becomes the last cell of the autofillZone
-   */
-  private select(col: number, row: number) {
-    const source = this.getters.getSelectedZone();
-    if (isInside(col, row, source)) {
-      this.autofillZone = undefined;
-      return;
-    }
-    this.direction = this.getDirection(col, row);
-    switch (this.direction) {
-      case DIRECTION.UP:
-        this.saveZone(row, source.top - 1, source.left, source.right);
-        break;
-      case DIRECTION.DOWN:
-        this.saveZone(source.bottom + 1, row, source.left, source.right);
-        break;
-      case DIRECTION.LEFT:
-        this.saveZone(source.top, source.bottom, col, source.left - 1);
-        break;
-      case DIRECTION.RIGHT:
-        this.saveZone(source.top, source.bottom, source.right + 1, col);
-        break;
-    }
-    this.autofill(false);
-  }
-
-  /**
-   * Computes the autofillZone to autofill when the user double click on the
-   * autofiller
-   */
-  private autofillAuto() {
-    const zone = this.getters.getSelectedZone();
-    let col = zone.left;
-    let row = zone.bottom;
-    if (col > 0) {
-      let left = this.getters.getCell(col - 1, row);
-      while (left && left.content) {
-        row += 1;
-        left = this.getters.getCell(col - 1, row);
-      }
-    }
-    if (row === zone.bottom) {
-      col = zone.right;
-      if (col <= this.getters.getNumberCols(this.getters.getActiveSheet())) {
-        let right = this.getters.getCell(col + 1, row);
-        while (right && right.content) {
-          row += 1;
-          right = this.getters.getCell(col + 1, row);
-        }
-      }
-    }
-    if (row !== zone.bottom) {
-      this.select(zone.left, row - 1);
-      this.autofill(true);
-    }
-  }
-
-  /**
-   * Generate the next cell
-   */
-  private computeNewCell(generator: AutofillGenerator, col: number, row: number, apply: boolean) {
-    const { cellData, tooltip } = generator.next();
-    const { col: originCol, row: originRow, content, style, border, format } = cellData;
-    this.tooltip = tooltip;
-    if (apply) {
-      this.dispatch("AUTOFILL_CELL", {
-        originCol,
-        originRow,
-        col,
-        row,
-        content,
-        style,
-        border,
-        format,
-      });
-    }
-  }
-
-  /**
-   * Get the rule associated to the current cell
-   */
-  private getRule(cell: Cell, cells: (Cell | null)[]): AutofillModifier | undefined {
-    const rules = autofillRulesRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-    const rule = rules.find((rule) => rule.condition(cell, cells));
-    return rule && rule.generateRule(cell, cells);
-  }
-
-  /**
-   * Create the generator to be able to autofill the next cells.
-   */
-  private createGenerator(source: string[]): AutofillGenerator {
-    const nextCells: GeneratorCell[] = [];
-
-    const cellsData: { col: number; row: number; cell: Cell | null }[] = [];
-    for (let xc of source) {
-      const [col, row] = toCartesian(xc);
-      const cell = this.getters.getCell(col, row);
-      let cellData: { col: number; row: number; cell: Cell | null } = {
-        col,
-        row,
-        cell,
-      };
-      cellsData.push(cellData);
-    }
-    const cells = cellsData.map((cellData) => cellData.cell);
-    for (let cellData of cellsData) {
-      let rule: AutofillModifier | undefined;
-      if (cellData && cellData.cell && cellData.cell.content) {
-        rule = this.getRule(cellData.cell, cells);
-      } else {
-        rule = { type: "COPY_MODIFIER" };
-      }
-      const data = {
-        row: cellData.row,
-        col: cellData.col,
-        content: cellData.cell ? cellData.cell.content : undefined,
-        style: cellData.cell ? cellData.cell.style : undefined,
-        border: cellData.cell ? cellData.cell.border : undefined,
-        format: cellData.cell ? cellData.cell.format : undefined,
-      };
-      nextCells.push({ data, rule });
-    }
-    return new AutofillGenerator(nextCells, this.getters, this.direction!);
-  }
-
-  private saveZone(top: number, bottom: number, left: number, right: number) {
-    this.autofillZone = { top, bottom, left, right };
-  }
-
-  /**
-   * Compute the direction of the autofill from the last selected zone and
-   * a given cell (col, row)
-   */
-  private getDirection(col: number, row: number): DIRECTION {
-    const source = this.getters.getSelectedZone();
-    const position = {
-      up: { number: source.top - row, value: DIRECTION.UP },
-      down: { number: row - source.bottom, value: DIRECTION.DOWN },
-      left: { number: source.left - col, value: DIRECTION.LEFT },
-      right: { number: col - source.right, value: DIRECTION.RIGHT },
-    };
-    if (
-      Object.values(position)
-        .map((x) => (x.number > 0 ? 1 : 0) as number)
-        .reduce((acc, value) => acc + value) === 1
-    ) {
-      return Object.values(position).find((x) => (x.number > 0 ? 1 : 0))!.value;
-    }
-
-    const first = position.up.number > 0 ? "up" : "down";
-    const second = position.left.number > 0 ? "left" : "right";
-    return Math.abs(position[first].number) >= Math.abs(position[second].number)
-      ? position[first].value
-      : position[second].value;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Grid rendering
-  // ---------------------------------------------------------------------------
-
-  drawGrid(renderingContext: GridRenderingContext) {
-    if (!this.autofillZone) {
-      return;
-    }
-    const { viewport, ctx, thinLineWidth } = renderingContext;
-    const [x, y, width, height] = this.getters.getRect(this.autofillZone, viewport);
-    if (width > 0 && height > 0) {
-      ctx.strokeStyle = "black";
-      ctx.lineWidth = thinLineWidth;
-      ctx.setLineDash([3]);
-      ctx.strokeRect(x, y, width, height);
-      ctx.setLineDash([]);
-    }
-  }
-}