@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/src/plugins/renderer.ts

@@ -1,571 +0,0 @@
-import { BasePlugin } from "../base_plugin";
-import {
-  BACKGROUND_HEADER_ACTIVE_COLOR,
-  BACKGROUND_HEADER_COLOR,
-  BACKGROUND_HEADER_SELECTED_COLOR,
-  CELL_BORDER_COLOR,
-  DEFAULT_FONT,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_FONT_WEIGHT,
-  HEADER_BORDER_COLOR,
-  HEADER_FONT_SIZE,
-  HEADER_HEIGHT,
-  HEADER_WIDTH,
-  TEXT_HEADER_COLOR,
-} from "../constants";
-import { fontSizeMap } from "../fonts";
-import { overlap, toXC } from "../helpers/index";
-import { Mode } from "../model";
-import {
-  Box,
-  Cell,
-  GridRenderingContext,
-  Header,
-  LAYERS,
-  Rect,
-  Viewport,
-  Zone,
-} from "../types/index";
-
-// -----------------------------------------------------------------------------
-// Constants, types, helpers, ...
-// -----------------------------------------------------------------------------
-
-function computeAlign(cell: Cell, isShowingFormulas: boolean): "right" | "center" | "left" {
-  if (cell.type === "formula" && isShowingFormulas) {
-    return "left";
-  } else if (cell.error || cell.pending) {
-    return "center";
-  }
-  switch (typeof cell.value) {
-    case "object":
-    case "number":
-      return "right";
-    case "boolean":
-      return "center";
-    default:
-      return "left";
-  }
-}
-
-function searchIndex(headers: Header[], offset: number): number {
-  let left = 0;
-  let right = headers.length - 1;
-  while (left <= right) {
-    const index = Math.floor((left + right) / 2);
-    const header = headers[index];
-    if (offset < header.start) {
-      right = index - 1;
-    } else if (offset > header.end) {
-      left = index + 1;
-    } else {
-      return index;
-    }
-  }
-  return -1;
-}
-
-export class RendererPlugin extends BasePlugin {
-  static layers = [LAYERS.Background, LAYERS.Headers];
-  static getters = [
-    "getColIndex",
-    "getRowIndex",
-    "getRect",
-    "snapViewportToCell",
-    "adjustViewportPosition",
-    "adjustViewportZone",
-  ];
-  static modes: Mode[] = ["normal", "readonly"];
-
-  private boxes: Box[] = [];
-
-  // ---------------------------------------------------------------------------
-  // Getters
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Return the index of a column given an offset x and a visible left col index.
-   * It returns -1 if no column is found.
-   */
-  getColIndex(x: number, left: number): number {
-    if (x < HEADER_WIDTH) {
-      return -1;
-    }
-    const cols = this.workbook.activeSheet.cols;
-    const adjustedX = x - HEADER_WIDTH + cols[left].start + 1;
-    return searchIndex(cols, adjustedX);
-  }
-
-  getRowIndex(y: number, top: number): number {
-    if (y < HEADER_HEIGHT) {
-      return -1;
-    }
-    const rows = this.workbook.activeSheet.rows;
-    const adjustedY = y - HEADER_HEIGHT + rows[top].start + 1;
-    return searchIndex(rows, adjustedY);
-  }
-
-  getRect(zone: Zone, viewport: Viewport): Rect {
-    const { left, top, right, bottom } = zone;
-    let { offsetY, offsetX } = viewport;
-    offsetX -= HEADER_WIDTH;
-    offsetY -= HEADER_HEIGHT;
-    const { cols, rows } = this.workbook.activeSheet;
-    const x = Math.max(cols[left].start - offsetX, HEADER_WIDTH);
-    const width = cols[right].end - offsetX - x;
-    const y = Math.max(rows[top].start - offsetY, HEADER_HEIGHT);
-    const height = rows[bottom].end - offsetY - y;
-    return [x, y, width, height];
-  }
-
-  /**
-   * Snap a viewport boundaries to exactly match the start of a cell.
-   * @param viewport
-   */
-  snapViewportToCell(viewport: Viewport): Viewport {
-    const { cols, rows } = this.workbook.activeSheet;
-    const adjustedViewport = Object.assign({}, viewport);
-    adjustedViewport.offsetX = cols[viewport.left].start;
-    adjustedViewport.offsetY = rows[viewport.top].start;
-    return adjustedViewport;
-  }
-
-  /**
-   * Adjust the viewport until the active cell is completely visible inside it.
-   * @param viewport the viewport that will be adjusted
-   */
-  adjustViewportPosition(viewport: Viewport): Viewport {
-    const adjustedViewport = Object.assign({}, viewport);
-    const { cols, rows } = this.workbook.activeSheet;
-    const [col, row] = this.getters.getPosition();
-    while (col >= adjustedViewport.right && col !== cols.length - 1) {
-      adjustedViewport.offsetX = cols[adjustedViewport.left].end;
-      this.adjustViewportZoneX(adjustedViewport);
-    }
-    while (col < adjustedViewport.left) {
-      adjustedViewport.offsetX = cols[adjustedViewport.left - 1].start;
-      this.adjustViewportZoneX(adjustedViewport);
-    }
-    while (row >= adjustedViewport.bottom && row !== rows.length - 1) {
-      adjustedViewport.offsetY = rows[adjustedViewport.top].end;
-      this.adjustViewportZoneY(adjustedViewport);
-    }
-    while (row < adjustedViewport.top) {
-      adjustedViewport.offsetY = rows[adjustedViewport.top - 1].start;
-      this.adjustViewportZoneY(adjustedViewport);
-    }
-    return adjustedViewport;
-  }
-
-  adjustViewportZone(viewport: Viewport): Viewport {
-    const adjustedViewport = Object.assign({}, viewport);
-    this.adjustViewportZoneX(adjustedViewport);
-    this.adjustViewportZoneY(adjustedViewport);
-    return adjustedViewport;
-  }
-
-  private adjustViewportZoneX(viewport: Viewport) {
-    const { cols } = this.workbook.activeSheet;
-    const { width, offsetX } = viewport;
-    viewport.left = this.getColIndex(offsetX + HEADER_WIDTH, 0);
-    const x = width + offsetX - HEADER_WIDTH;
-    viewport.right = cols.length - 1;
-    for (let i = viewport.left; i < cols.length; i++) {
-      if (x < cols[i].end) {
-        viewport.right = i;
-        break;
-      }
-    }
-  }
-
-  private adjustViewportZoneY(viewport: Viewport) {
-    const { rows } = this.workbook.activeSheet;
-    const { height, offsetY } = viewport;
-    viewport.top = this.getRowIndex(offsetY + HEADER_HEIGHT, 0);
-
-    let y = height + offsetY - HEADER_HEIGHT;
-    viewport.bottom = rows.length - 1;
-    for (let i = viewport.top; i < rows.length; i++) {
-      if (y < rows[i].end) {
-        viewport.bottom = i;
-        break;
-      }
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Grid rendering
-  // ---------------------------------------------------------------------------
-
-  drawGrid(renderingContext: GridRenderingContext, layer: LAYERS) {
-    switch (layer) {
-      case LAYERS.Background:
-        this.boxes = this.getGridBoxes(renderingContext);
-        this.drawBackground(renderingContext);
-        this.drawCellBackground(renderingContext);
-        this.drawBorders(renderingContext);
-        this.drawTexts(renderingContext);
-        break;
-      case LAYERS.Headers:
-        this.drawHeaders(renderingContext);
-        break;
-    }
-  }
-
-  private drawBackground(renderingContext: GridRenderingContext) {
-    const { ctx, viewport, thinLineWidth } = renderingContext;
-    let { width, height, offsetX, offsetY, top, left, bottom, right } = viewport;
-    const { rows, cols } = this.workbook.activeSheet;
-
-    // white background
-    ctx.fillStyle = "white";
-    ctx.fillRect(0, 0, viewport.width, viewport.height);
-
-    // background grid
-    offsetX -= HEADER_WIDTH;
-    offsetY -= HEADER_HEIGHT;
-
-    ctx.lineWidth = 2 * thinLineWidth;
-    ctx.strokeStyle = CELL_BORDER_COLOR;
-    ctx.beginPath();
-
-    // vertical lines
-    const lineHeight = Math.min(height, rows[bottom].end - offsetY);
-    for (let i = left; i <= right; i++) {
-      const x = cols[i].end - offsetX;
-      ctx.moveTo(x, 0);
-      ctx.lineTo(x, lineHeight);
-    }
-
-    // horizontal lines
-    const lineWidth = Math.min(width, cols[right].end - offsetX);
-    for (let i = top; i <= bottom; i++) {
-      const y = rows[i].end - offsetY;
-      ctx.moveTo(0, y);
-      ctx.lineTo(lineWidth, y);
-    }
-    ctx.stroke();
-  }
-
-  private drawCellBackground(renderingContext: GridRenderingContext) {
-    const { ctx, thinLineWidth } = renderingContext;
-    ctx.lineWidth = 0.3 * thinLineWidth;
-    const inset = 0.1 * thinLineWidth;
-    ctx.strokeStyle = "#111";
-    for (let box of this.boxes) {
-      // fill color
-      let style = box.style;
-      if (style && style.fillColor && style.fillColor !== "#ffffff") {
-        ctx.fillStyle = style.fillColor;
-        ctx.fillRect(box.x, box.y, box.width, box.height);
-        ctx.strokeRect(box.x + inset, box.y + inset, box.width - 2 * inset, box.height - 2 * inset);
-      }
-      if (box.error) {
-        ctx.fillStyle = "red";
-        ctx.beginPath();
-        ctx.moveTo(box.x + box.width - 5, box.y);
-        ctx.lineTo(box.x + box.width, box.y);
-        ctx.lineTo(box.x + box.width, box.y + 5);
-        ctx.fill();
-      }
-    }
-  }
-
-  private drawBorders(renderingContext: GridRenderingContext) {
-    const { ctx, thinLineWidth } = renderingContext;
-    for (let box of this.boxes) {
-      // fill color
-      let border = box.border;
-      if (border) {
-        const { x, y, width, height } = box;
-        if (border.left) {
-          drawBorder(border.left, x, y, x, y + height);
-        }
-        if (border.top) {
-          drawBorder(border.top, x, y, x + width, y);
-        }
-        if (border.right) {
-          drawBorder(border.right, x + width, y, x + width, y + height);
-        }
-        if (border.bottom) {
-          drawBorder(border.bottom, x, y + height, x + width, y + height);
-        }
-      }
-    }
-    function drawBorder([style, color], x1, y1, x2, y2) {
-      ctx.strokeStyle = color;
-      ctx.lineWidth = (style === "thin" ? 2 : 3) * thinLineWidth;
-      ctx.beginPath();
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-  }
-
-  private drawTexts(renderingContext: GridRenderingContext) {
-    const { ctx, thinLineWidth } = renderingContext;
-    ctx.textBaseline = "middle";
-    let currentFont;
-    for (let box of this.boxes) {
-      if (box.text) {
-        const style = box.style || {};
-        const align = box.align!;
-        const italic = style.italic ? "italic " : "";
-        const weight = style.bold ? "bold" : DEFAULT_FONT_WEIGHT;
-        const sizeInPt = style.fontSize || DEFAULT_FONT_SIZE;
-        const size = fontSizeMap[sizeInPt];
-        const font = `${italic}${weight} ${size}px ${DEFAULT_FONT}`;
-        if (font !== currentFont) {
-          currentFont = font;
-          ctx.font = font;
-        }
-        ctx.fillStyle = style.textColor || "#000";
-        let x: number;
-        let y = box.y + box.height / 2 + 1;
-        if (align === "left") {
-          x = box.x + 3;
-        } else if (align === "right") {
-          x = box.x + box.width - 3;
-        } else {
-          x = box.x + box.width / 2;
-        }
-        ctx.textAlign = align;
-        if (box.clipRect) {
-          ctx.save();
-          ctx.beginPath();
-          ctx.rect(...box.clipRect);
-          ctx.clip();
-        }
-        ctx.fillText(box.text, Math.round(x), Math.round(y));
-        if (style.strikethrough) {
-          if (align === "right") {
-            x = x - box.textWidth;
-          } else if (align === "center") {
-            x = x - box.textWidth / 2;
-          }
-          ctx.fillRect(x, y, box.textWidth, 2.6 * thinLineWidth);
-        }
-        if (box.clipRect) {
-          ctx.restore();
-        }
-      }
-    }
-  }
-
-  private drawHeaders(renderingContext: GridRenderingContext) {
-    const { ctx, viewport, thinLineWidth } = renderingContext;
-    let { width, height, offsetX, offsetY, left, top, right, bottom } = viewport;
-    offsetX -= HEADER_WIDTH;
-    offsetY -= HEADER_HEIGHT;
-    const selection = this.getters.getSelectedZones();
-    const { cols, rows } = this.workbook.activeSheet;
-    const activeCols = this.getters.getActiveCols();
-    const activeRows = this.getters.getActiveRows();
-
-    ctx.fillStyle = BACKGROUND_HEADER_COLOR;
-    ctx.font = `400 ${HEADER_FONT_SIZE}px ${DEFAULT_FONT}`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.lineWidth = thinLineWidth;
-    ctx.strokeStyle = "#333";
-
-    // background
-    ctx.fillRect(0, 0, width, HEADER_HEIGHT);
-    ctx.fillRect(0, 0, HEADER_WIDTH, height);
-    // selection background
-    ctx.fillStyle = BACKGROUND_HEADER_SELECTED_COLOR;
-    for (let zone of selection) {
-      const x1 = Math.max(HEADER_WIDTH, cols[zone.left].start - offsetX);
-      const x2 = Math.max(HEADER_WIDTH, cols[zone.right].end - offsetX);
-      const y1 = Math.max(HEADER_HEIGHT, rows[zone.top].start - offsetY);
-      const y2 = Math.max(HEADER_HEIGHT, rows[zone.bottom].end - offsetY);
-      ctx.fillStyle = activeCols.has(zone.left)
-        ? BACKGROUND_HEADER_ACTIVE_COLOR
-        : BACKGROUND_HEADER_SELECTED_COLOR;
-      ctx.fillRect(x1, 0, x2 - x1, HEADER_HEIGHT);
-      ctx.fillStyle = activeRows.has(zone.top)
-        ? BACKGROUND_HEADER_ACTIVE_COLOR
-        : BACKGROUND_HEADER_SELECTED_COLOR;
-      ctx.fillRect(0, y1, HEADER_WIDTH, y2 - y1);
-    }
-
-    // 2 main lines
-    ctx.beginPath();
-    ctx.moveTo(HEADER_WIDTH, 0);
-    ctx.lineTo(HEADER_WIDTH, height);
-    ctx.moveTo(0, HEADER_HEIGHT);
-    ctx.lineTo(width, HEADER_HEIGHT);
-    ctx.strokeStyle = HEADER_BORDER_COLOR;
-    ctx.stroke();
-
-    ctx.beginPath();
-    // column text + separator
-    for (let i = left; i <= right; i++) {
-      const col = cols[i];
-      ctx.fillStyle = activeCols.has(i) ? "#fff" : TEXT_HEADER_COLOR;
-      ctx.fillText(col.name, (col.start + col.end) / 2 - offsetX, HEADER_HEIGHT / 2);
-      ctx.moveTo(col.end - offsetX, 0);
-      ctx.lineTo(col.end - offsetX, HEADER_HEIGHT);
-    }
-    // row text + separator
-    for (let i = top; i <= bottom; i++) {
-      const row = rows[i];
-      ctx.fillStyle = activeRows.has(i) ? "#fff" : TEXT_HEADER_COLOR;
-
-      ctx.fillText(row.name, HEADER_WIDTH / 2, (row.start + row.end) / 2 - offsetY);
-      ctx.moveTo(0, row.end - offsetY);
-      ctx.lineTo(HEADER_WIDTH, row.end - offsetY);
-    }
-
-    ctx.stroke();
-  }
-
-  private hasContent(col: number, row: number): boolean {
-    const { cells, mergeCellMap } = this.workbook.activeSheet;
-    const xc = toXC(col, row);
-    const cell = cells[xc];
-    return (cell && cell.content) || ((xc in mergeCellMap) as any);
-  }
-
-  private getGridBoxes(renderingContext: GridRenderingContext): Box[] {
-    const { viewport } = renderingContext;
-    let { right, left, top, bottom, offsetX, offsetY } = viewport;
-    offsetX -= HEADER_WIDTH;
-    offsetY -= HEADER_HEIGHT;
-
-    const result: Box[] = [];
-    const { cols, rows, mergeCellMap, cells, merges } = this.workbook.activeSheet;
-    // process all visible cells
-    for (let rowNumber = top; rowNumber <= bottom; rowNumber++) {
-      let row = rows[rowNumber];
-      for (let colNumber = left; colNumber <= right; colNumber++) {
-        let cell = row.cells[colNumber];
-        if (cell && !(cell.xc in mergeCellMap)) {
-          let col = cols[colNumber];
-          const text = this.getters.getCellText(cell);
-          const textWidth = this.getters.getCellWidth(cell);
-          let style = this.getters.getCellStyle(cell);
-          const conditionalStyle = this.getters.getConditionalStyle(cell.xc);
-          if (conditionalStyle) {
-            style = Object.assign({}, style, conditionalStyle);
-          }
-          const align = text
-            ? (style && style.align) || computeAlign(cell, this.getters.shouldShowFormulas())
-            : undefined;
-          let clipRect: Rect | null = null;
-          if (text && textWidth > cols[cell.col].size) {
-            let c: number;
-            let width: number;
-            switch (align) {
-              case "left":
-                c = cell.col;
-                while (c < right && !this.hasContent(c + 1, cell.row)) {
-                  c++;
-                }
-                width = cols[c].end - col.start;
-                if (width < textWidth) {
-                  clipRect = [col.start - offsetX, row.start - offsetY, width, row.size];
-                }
-                break;
-              case "right":
-                c = cell.col;
-                while (c > left && !this.hasContent(c - 1, cell.row)) {
-                  c--;
-                }
-                width = col.end - cols[c].start;
-                if (width < textWidth) {
-                  clipRect = [cols[c].start - offsetX, row.start - offsetY, width, row.size];
-                }
-                break;
-              case "center":
-                let c1 = colNumber;
-                while (c1 > left && !this.hasContent(c1 - 1, rowNumber)) {
-                  c1--;
-                }
-                let c2 = colNumber;
-                while (c2 < right && !this.hasContent(c2 + 1, rowNumber)) {
-                  c2++;
-                }
-                const colLeft = Math.min(c1, colNumber);
-                const colRight = Math.max(c2, colNumber);
-                width = cols[colRight].end - cols[colLeft].start;
-                if (width < textWidth || colLeft === colNumber || colRight === colNumber) {
-                  clipRect = [cols[colLeft].start - offsetX, row.start - offsetY, width, row.size];
-                }
-                break;
-            }
-          }
-
-          result.push({
-            x: col.start - offsetX,
-            y: row.start - offsetY,
-            width: col.size,
-            height: row.size,
-            text,
-            textWidth,
-            border: this.getters.getCellBorder(cell),
-            style,
-            align,
-            clipRect,
-            error: cell.error,
-          });
-        }
-      }
-    }
-
-    // process all visible merges
-    for (let id in merges) {
-      let merge = merges[id];
-      if (overlap(merge, viewport)) {
-        const refCell = cells[merge.topLeft];
-        const bottomRight = cells[toXC(merge.right, merge.bottom)];
-        const width = cols[merge.right].end - cols[merge.left].start;
-        let text, textWidth, style, align, border;
-        if (refCell || bottomRight) {
-          text = refCell ? this.getters.getCellText(refCell) : "";
-          textWidth = refCell ? this.getters.getCellWidth(refCell) : null;
-          const cfStyle = this.getters.getConditionalStyle(merge.topLeft);
-          style = cfStyle ? cfStyle : refCell ? this.getters.getCellStyle(refCell) : null;
-          align = text
-            ? (style && style.align) || computeAlign(refCell, this.getters.shouldShowFormulas())
-            : null;
-          const borderTopLeft = refCell ? this.getters.getCellBorder(refCell) : null;
-          const borderBottomRight = bottomRight ? this.getters.getCellBorder(bottomRight) : null;
-          border = {
-            bottom: borderBottomRight ? borderBottomRight.bottom : null,
-            left: borderTopLeft ? borderTopLeft.left : null,
-            right: borderBottomRight ? borderBottomRight.right : null,
-            top: borderTopLeft ? borderTopLeft.top : null,
-          };
-        }
-        style = style || {};
-        // Small trick: the code that draw the background color skips the color
-        // #ffffff.  But for merges, we actually need to draw the background,
-        // otherwise the grid is visible. So, we change the #ffffff color to the
-        // color #fff, which is actually the same.
-        if (!style.fillColor || style.fillColor === "#ffffff") {
-          style = Object.create(style);
-          style.fillColor = "#fff";
-        }
-
-        const x = cols[merge.left].start - offsetX;
-        const y = rows[merge.top].start - offsetY;
-        const height = rows[merge.bottom].end - rows[merge.top].start;
-        result.push({
-          x: x,
-          y: y,
-          width,
-          height,
-          text,
-          textWidth,
-          border,
-          style,
-          align,
-          clipRect: [x, y, width, height],
-          error: refCell ? refCell.error : undefined,
-        });
-      }
-    }
-    return result;
-  }
-}