@odoo/o-spreadsheet 14.0.0 → 14.0.1

package/src/plugins/highlight.ts

@@ -0,0 +1,187 @@
+import { BasePlugin } from "../base_plugin";
+import { getNextColor, isEqual, toZone } from "../helpers/index";
+import { Mode } from "../model";
+import { Command, GridRenderingContext, Highlight, LAYERS, Zone } from "../types/index";
+
+/**
+ * HighlightPlugin
+ */
+export class HighlightPlugin extends BasePlugin {
+  static modes: Mode[] = ["normal", "readonly"];
+  static layers = [LAYERS.Highlights];
+  static getters = ["getHighlights"];
+  private highlights: Highlight[] = [];
+  private color: string = "#000";
+  private highlightSelectionEnabled = false;
+  private pendingHighlights: Highlight[] = [];
+
+  // ---------------------------------------------------------------------------
+  // Command Handling
+  // ---------------------------------------------------------------------------
+
+  handle(cmd: Command) {
+    switch (cmd.type) {
+      case "ADD_HIGHLIGHTS":
+        this.addHighlights(cmd.ranges);
+        break;
+      case "REMOVE_ALL_HIGHLIGHTS":
+        this.highlights = [];
+        break;
+      case "REMOVE_HIGHLIGHTS":
+        this.removeHighlights(cmd.ranges);
+        break;
+      case "SELECT_CELL":
+      case "SET_SELECTION":
+        if (this.highlightSelectionEnabled) {
+          this.highlightSelection();
+        }
+        break;
+      case "START_SELECTION_EXPANSION":
+        this.color = getNextColor();
+        break;
+      case "HIGHLIGHT_SELECTION":
+        this.highlightSelectionEnabled = cmd.enabled;
+        if (!cmd.enabled) {
+          this.dispatch("RESET_PENDING_HIGHLIGHT");
+        }
+        break;
+      case "RESET_PENDING_HIGHLIGHT":
+        this.pendingHighlights = [];
+        break;
+      case "ADD_PENDING_HIGHLIGHTS":
+        this.addPendingHighlight(cmd.ranges);
+        break;
+      case "SET_HIGHLIGHT_COLOR":
+        this.color = cmd.color;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Getters
+  // ---------------------------------------------------------------------------
+
+  getHighlights(): Highlight[] {
+    return this.highlights;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Other
+  // ---------------------------------------------------------------------------
+
+  private addHighlights(ranges: { [range: string]: string }) {
+    let highlights = this.prepareHighlights(ranges);
+    this.highlights = this.highlights.concat(highlights);
+  }
+
+  private addPendingHighlight(ranges: { [range: string]: string }) {
+    let highlights = this.prepareHighlights(ranges);
+    this.pendingHighlights = this.pendingHighlights.concat(highlights);
+  }
+
+  private prepareHighlights(ranges: { [range: string]: string }): Highlight[] {
+    if (Object.keys(ranges).length === 0) {
+      return [];
+    }
+    return Object.keys(ranges)
+      .map((r1c1) => {
+        const [xc, sheet] = r1c1.split("!").reverse();
+        const sheetId = sheet
+          ? this.getters.getSheetIdByName(sheet)!
+          : this.getters.getActiveSheet();
+        const zone: Zone = this.getters.expandZone(toZone(xc));
+        return { zone, color: ranges[r1c1], sheet: sheetId };
+      })
+      .filter(
+        (x) =>
+          x.zone.top >= 0 &&
+          x.zone.left >= 0 &&
+          x.zone.bottom < this.workbook.activeSheet.rows.length &&
+          x.zone.right < this.workbook.activeSheet.cols.length
+      );
+  }
+
+  /**
+   *
+   * @param ranges {"[sheet!]XC": color}
+   * @private
+   */
+  private removeHighlights(ranges: { [range: string]: string }) {
+    const activeSheetId = this.getters.getActiveSheet();
+    const rangesBySheets = {};
+    for (let [range, color] of Object.entries(ranges)) {
+      const [xc, sheetName] = range.split("!").reverse();
+      const sheetId = this.getters.getSheetIdByName(sheetName);
+      rangesBySheets[sheetId || activeSheetId] = Object.assign(
+        { [xc]: color },
+        rangesBySheets[sheetId || activeSheetId] || {}
+      );
+    }
+    const shouldBeKept = (highlight: Highlight) =>
+      !(
+        rangesBySheets[highlight.sheet] &&
+        rangesBySheets[highlight.sheet][this.getters.zoneToXC(highlight.zone)] === highlight.color
+      );
+    this.highlights = this.highlights.filter(shouldBeKept);
+  }
+
+  /**
+   * Highlight selected zones (which are not already highlighted).
+   */
+  private highlightSelection() {
+    this.removePendingHighlights();
+    const zones = this.getters.getSelectedZones().filter((z) => !this.isHighlighted(z));
+    const ranges = {};
+    let color = this.color;
+    for (const zone of zones) {
+      ranges[this.getters.zoneToXC(zone)] = color;
+      color = getNextColor();
+    }
+    this.dispatch("ADD_HIGHLIGHTS", { ranges });
+    this.dispatch("ADD_PENDING_HIGHLIGHTS", { ranges });
+  }
+
+  private isHighlighted(zone: Zone): boolean {
+    return !!this.highlights.find((h) => isEqual(h.zone, zone));
+  }
+
+  /**
+   * Remove pending highlights which are not selected.
+   * Highlighted zones which are selected are still considered
+   * pending.
+   */
+  private removePendingHighlights() {
+    const ranges = {};
+    const [selected, notSelected] = this.pendingHighlights.reduce(
+      ([y, n], highlight) =>
+        this.getters.isSelected(highlight.zone) ? [[...y, highlight], n] : [y, [...n, highlight]],
+      [[], []]
+    );
+    for (const { zone, color } of notSelected) {
+      ranges[this.getters.zoneToXC(zone)] = color;
+    }
+    this.dispatch("REMOVE_HIGHLIGHTS", { ranges });
+    this.pendingHighlights = selected;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Grid rendering
+  // ---------------------------------------------------------------------------
+
+  drawGrid(renderingContext: GridRenderingContext) {
+    // rendering selection highlights
+    const { ctx, viewport, thinLineWidth } = renderingContext;
+    const sheetId = this.getters.getActiveSheet();
+    const lineWidth = 3 * thinLineWidth;
+    ctx.lineWidth = lineWidth;
+    for (let h of this.highlights.filter((highlight) => highlight.sheet === sheetId)) {
+      const [x, y, width, height] = this.getters.getRect(h.zone, viewport);
+      if (width > 0 && height > 0) {
+        ctx.strokeStyle = h.color!;
+        ctx.strokeRect(x + lineWidth / 2, y + lineWidth / 2, width - lineWidth, height - lineWidth);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = h.color! + "20";
+        ctx.fillRect(x + lineWidth, y + lineWidth, width - 2 * lineWidth, height - 2 * lineWidth);
+      }
+    }
+  }
+}

package/src/plugins/index.ts

@@ -0,0 +1,32 @@
+import { BasePlugin } from "../base_plugin";
+import { Registry } from "../registry";
+import { AutofillPlugin } from "./autofill";
+import { ChartPlugin } from "./chart";
+import { ClipboardPlugin } from "./clipboard";
+import { ConditionalFormatPlugin } from "./conditional_format";
+import { CorePlugin } from "./core";
+import { EditionPlugin } from "./edition";
+import { EvaluationPlugin } from "./evaluation";
+import { FigurePlugin } from "./figures";
+import { FormattingPlugin } from "./formatting";
+import { HighlightPlugin } from "./highlight";
+import { MergePlugin } from "./merge";
+import { RendererPlugin } from "./renderer";
+import { SelectionPlugin } from "./selection";
+import { SelectionInputPlugin } from "./selection_inputs";
+
+export const pluginRegistry = new Registry<typeof BasePlugin>()
+  .add("core", CorePlugin)
+  .add("evaluation", EvaluationPlugin)
+  .add("clipboard", ClipboardPlugin)
+  .add("merge", MergePlugin)
+  .add("formatting", FormattingPlugin)
+  .add("edition", EditionPlugin)
+  .add("selection", SelectionPlugin)
+  .add("highlight", HighlightPlugin)
+  .add("selectionInput", SelectionInputPlugin)
+  .add("conditional formatting", ConditionalFormatPlugin)
+  .add("figures", FigurePlugin)
+  .add("chart", ChartPlugin)
+  .add("grid renderer", RendererPlugin)
+  .add("autofill", AutofillPlugin);