@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/src/components/composer/composer.ts

@@ -1,487 +0,0 @@
-import * as owl from "@odoo/owl";
-import { fontSizeMap } from "../../fonts";
-import { composerTokenize, EnrichedToken, rangeReference } from "../../formulas/index";
-import { colors, DEBUG, getComposerSheetName } from "../../helpers/index";
-import { Rect, SpreadsheetEnv, Zone } from "../../types/index";
-import { TextValueProvider } from "./autocomplete_dropdown";
-import { ContentEditableHelper } from "./content_editable_helper";
-
-const { Component } = owl;
-const { useRef, useState } = owl.hooks;
-const { xml, css } = owl.tags;
-
-export const FunctionColor = "#4a4e4d";
-export const OperatorColor = "#3da4ab";
-export const StringColor = "#f6cd61";
-export const NumberColor = "#02c39a";
-export const MatchingParenColor = "pink";
-
-const tokenColor = {
-  OPERATOR: OperatorColor,
-  NUMBER: NumberColor,
-  STRING: StringColor,
-  BOOLEAN: NumberColor,
-  FUNCTION: FunctionColor,
-  DEBUGGER: OperatorColor,
-  LEFT_PAREN: OperatorColor,
-  RIGHT_PAREN: OperatorColor,
-};
-
-const TEMPLATE = xml/* xml */ `
-<div class="o-composer-container" t-att-style="containerStyle">
-    <div class="o-composer"
-      t-att-style="composerStyle"
-      t-ref="o_composer"
-      tabindex="1"
-      contenteditable="true"
-      spellcheck="false"
-
-      t-on-keydown="onKeydown"
-      t-on-input="onInput"
-      t-on-keyup="onKeyup"
-
-      t-on-blur="saveSelection"
-      t-on-click="onClick"
-    />
-    <TextValueProvider
-        t-if="autoCompleteState.showProvider"
-        t-ref="o_autocomplete_provider"
-        search="autoCompleteState.search"
-        provider="autoCompleteState.provider"
-        t-on-completed="onCompleted"
-    />
-</div>
-  `;
-const CSS = css/* scss */ `
-  .o-composer-container {
-    box-sizing: border-box;
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    z-index: 5;
-    .o-composer {
-      caret-color: black;
-      box-sizing: border-box;
-      background-color: white;
-      padding-left: 2px;
-      padding-right: 2px;
-      border: 1.6px solid #3266ca;
-      white-space: nowrap;
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-`;
-
-export class Composer extends Component<any, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static style = CSS;
-  static components = { TextValueProvider };
-
-  composerRef = useRef("o_composer");
-  autoCompleteRef = useRef("o_autocomplete_provider");
-
-  getters = this.env.getters;
-  dispatch = this.env.dispatch;
-
-  zone: Zone;
-  rect: Rect;
-
-  selectionEnd: number = 0;
-  selectionStart: number = 0;
-  contentHelper: ContentEditableHelper;
-
-  autoCompleteState = useState({
-    showProvider: false,
-    provider: "functions",
-    search: "",
-  });
-  tokenAtCursor: EnrichedToken | void = undefined;
-
-  // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
-  shouldProcessInputEvents: boolean = false;
-  // a composer edits a single cell. After that, it is done and should not
-  // modify the model anymore.
-  isDone: boolean = false;
-  refSelectionStart: number = 0;
-  tokens: EnrichedToken[] = [];
-
-  keyMapping: { [key: string]: Function } = {
-    Enter: this.processEnterKey,
-    Escape: this.processEscapeKey,
-    Tab: (ev: KeyboardEvent) => this.processTabKey(ev),
-    F2: () => console.warn("Not implemented"),
-    F4: () => console.warn("Not implemented"),
-    ArrowUp: this.processArrowKeys,
-    ArrowDown: this.processArrowKeys,
-    ArrowLeft: this.processArrowKeys,
-    ArrowRight: this.processArrowKeys,
-  };
-
-  constructor() {
-    super(...arguments);
-    this.contentHelper = new ContentEditableHelper(this.composerRef.el!);
-    const [col, row] = this.getters.getPosition();
-    this.zone = this.getters.expandZone({ left: col, right: col, top: row, bottom: row });
-    this.rect = this.getters.getRect(this.zone, this.props.viewport);
-  }
-
-  mounted() {
-    DEBUG.composer = this;
-
-    const el = this.composerRef.el!;
-
-    this.contentHelper.updateEl(el);
-    const currentContent = this.getters.getCurrentContent();
-    if (currentContent) {
-      this.contentHelper.insertText(currentContent);
-      this.contentHelper.selectRange(currentContent.length, currentContent.length);
-    }
-    this.processContent();
-
-    el.style.width = (Math.max(el.scrollWidth + 10, this.rect[2] + 0.5) + "px") as string;
-    el.style.height = (this.rect[3] + 0.5 + "px") as string;
-  }
-
-  willUnmount(): void {
-    delete DEBUG.composer;
-    this.trigger("composer-unmounted");
-  }
-
-  get containerStyle() {
-    const style = this.getters.getCurrentStyle();
-    const [x, y, , height] = this.rect;
-    const weight = `font-weight:${style.bold ? "bold" : 500};`;
-    const italic = style.italic ? `font-style: italic;` : ``;
-    const strikethrough = style.strikethrough ? `text-decoration:line-through;` : ``;
-    return `left: ${x - 1}px;
-        top:${y}px;
-        height:${height}px;
-        font-size:${fontSizeMap[style.fontSize || 10]}px;
-        ${weight}${italic}${strikethrough}`;
-  }
-
-  get composerStyle() {
-    const style = this.getters.getCurrentStyle();
-    const cell = this.getters.getActiveCell() || { type: "text" };
-    const height = this.rect[3];
-    const align = "align" in style ? style.align : cell.type === "number" ? "right" : "left";
-    return `text-align:${align};
-        line-height:${height - 1.5}px;`;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Handlers
-  // ---------------------------------------------------------------------------
-
-  processArrowKeys(ev: KeyboardEvent) {
-    if (this.getters.getEditionMode() === "selecting") {
-      ev.preventDefault();
-      return;
-    }
-    ev.stopPropagation();
-    const autoCompleteComp = this.autoCompleteRef.comp as TextValueProvider;
-    if (
-      ["ArrowUp", "ArrowDown"].includes(ev.key) &&
-      this.autoCompleteState.showProvider &&
-      autoCompleteComp
-    ) {
-      ev.preventDefault();
-      if (ev.key === "ArrowUp") {
-        autoCompleteComp.moveUp();
-      } else {
-        autoCompleteComp.moveDown();
-      }
-    }
-  }
-
-  processTabKey(ev: KeyboardEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    const autoCompleteComp = this.autoCompleteRef.comp as TextValueProvider;
-    if (this.autoCompleteState.showProvider && autoCompleteComp) {
-      const autoCompleteValue = autoCompleteComp.getValueToFill();
-      if (autoCompleteValue) {
-        this.autoComplete(autoCompleteValue);
-        return;
-      }
-    } else {
-      // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
-      // we can't let the model think that it is for a ref selection.
-      // todo: check if this can be removed someday
-      this.dispatch("STOP_COMPOSER_SELECTION");
-    }
-
-    const deltaX = ev.shiftKey ? -1 : 1;
-    this.isDone = true;
-    this.dispatch("MOVE_POSITION", { deltaX, deltaY: 0 });
-  }
-
-  processEnterKey(ev: KeyboardEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    const autoCompleteComp = this.autoCompleteRef.comp as TextValueProvider;
-    if (this.autoCompleteState.showProvider && autoCompleteComp) {
-      const autoCompleteValue = autoCompleteComp.getValueToFill();
-      if (autoCompleteValue) {
-        this.autoComplete(autoCompleteValue);
-        return;
-      }
-    }
-    this.dispatch("STOP_EDITION");
-    this.dispatch("MOVE_POSITION", {
-      deltaX: 0,
-      deltaY: ev.shiftKey ? -1 : 1,
-    });
-    this.isDone = true;
-  }
-
-  processEscapeKey() {
-    this.dispatch("STOP_EDITION", { cancel: true });
-    this.isDone = true;
-  }
-
-  onKeydown(ev: KeyboardEvent) {
-    let handler = this.keyMapping[ev.key];
-    if (handler) {
-      return handler.call(this, ev);
-    }
-    ev.stopPropagation();
-  }
-
-  /*
-   * Triggered automatically by the content-editable between the keydown and key up
-   * */
-  onInput(ev: KeyboardEvent) {
-    if (this.isDone || !this.shouldProcessInputEvents) {
-      return;
-    }
-    const el = this.composerRef.el! as HTMLInputElement;
-    if (el.clientWidth !== el.scrollWidth) {
-      el.style.width = `${el.scrollWidth + 20}px`;
-    }
-    const content = el.childNodes.length ? el.textContent! : "";
-    this.dispatch("SET_CURRENT_CONTENT", { content });
-  }
-
-  onKeyup(ev: KeyboardEvent) {
-    if (
-      this.isDone ||
-      [
-        "Control",
-        "Shift",
-        "ArrowUp",
-        "ArrowDown",
-        "ArrowLeft",
-        "ArrowRight",
-        "Tab",
-        "Enter",
-      ].includes(ev.key)
-    ) {
-      // already processed in keydown
-      return;
-    }
-    ev.preventDefault();
-    ev.stopPropagation();
-
-    // reset the state of the ref selector and autocomplete for safety.
-    // They will be set correctly if needed in `processTokenAtCursor`
-    this.autoCompleteState.showProvider = false;
-    this.autoCompleteState.search = "";
-    this.dispatch("STOP_COMPOSER_SELECTION");
-    if (ev.ctrlKey && ev.key === " ") {
-      this.autoCompleteState.showProvider = true;
-    } else {
-      this.processContent();
-      this.processTokenAtCursor();
-    }
-  }
-
-  onClick(ev: MouseEvent) {
-    ev.stopPropagation();
-    this.processContent();
-    this.processTokenAtCursor();
-  }
-  onCompleted(ev: CustomEvent) {
-    this.autoComplete(ev.detail.text);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private
-  // ---------------------------------------------------------------------------
-
-  processContent() {
-    this.shouldProcessInputEvents = false;
-    let value = this.getters.getCurrentContent();
-    this.tokenAtCursor = undefined;
-    if (value.startsWith("=")) {
-      this.saveSelection();
-      this.contentHelper.removeAll(); // remove the content of the composer, to be added just after
-      this.contentHelper.selectRange(0, 0); // move the cursor inside the composer at 0 0.
-      this.dispatch("REMOVE_ALL_HIGHLIGHTS"); //cleanup highlights for references
-
-      const refUsed = {};
-      let lastUsedColorIndex = 0;
-
-      this.tokens = composerTokenize(value);
-      if (this.selectionStart === this.selectionEnd && this.selectionEnd === 0) {
-        this.tokenAtCursor = undefined;
-      } else {
-        this.tokenAtCursor = this.tokens.find(
-          (t) => t.start <= this.selectionStart! && t.end >= this.selectionEnd!
-        );
-      }
-      for (let token of this.tokens) {
-        switch (token.type) {
-          case "OPERATOR":
-          case "NUMBER":
-          case "FUNCTION":
-          case "COMMA":
-          case "BOOLEAN":
-            this.contentHelper.insertText(token.value, tokenColor[token.type]);
-            break;
-          case "SYMBOL":
-            let value = token.value;
-            const [xc, sheet] = value.split("!").reverse();
-            if (rangeReference.test(xc)) {
-              const refSanitized =
-                getComposerSheetName(
-                  sheet
-                    ? `${sheet}`
-                    : `${this.getters.getSheetName(this.getters.getEditionSheet())}`
-                ) +
-                "!" +
-                xc.replace(/\$/g, "");
-              if (!refUsed[refSanitized]) {
-                refUsed[refSanitized] = colors[lastUsedColorIndex];
-                lastUsedColorIndex = ++lastUsedColorIndex % colors.length;
-              }
-              this.contentHelper.insertText(value, refUsed[refSanitized]);
-            } else {
-              this.contentHelper.insertText(value);
-            }
-            break;
-          case "LEFT_PAREN":
-          case "RIGHT_PAREN":
-            // Compute the matching parenthesis
-            if (
-              this.tokenAtCursor &&
-              ["LEFT_PAREN", "RIGHT_PAREN"].includes(this.tokenAtCursor.type) &&
-              this.tokenAtCursor.parenIndex &&
-              this.tokenAtCursor.parenIndex === token.parenIndex
-            ) {
-              this.contentHelper.insertText(token.value, MatchingParenColor);
-            } else {
-              this.contentHelper.insertText(token.value);
-            }
-            break;
-          default:
-            this.contentHelper.insertText(token.value);
-            break;
-        }
-      }
-
-      // Put the cursor back where it was
-      this.contentHelper.selectRange(this.selectionStart, this.selectionEnd);
-      if (Object.keys(refUsed).length) {
-        this.dispatch("ADD_HIGHLIGHTS", { ranges: refUsed });
-      }
-    }
-    this.shouldProcessInputEvents = true;
-  }
-
-  /**
-   * Compute the state of the composer from the tokenAtCursor.
-   * If the token is a bool, function or symbol we have to initialize the autocomplete engine.
-   * If it's a comma, left_paren or operator we have to initialize the range selection.
-   */
-  processTokenAtCursor() {
-    if (!this.tokenAtCursor) {
-      return;
-    }
-    if (["BOOLEAN", "FUNCTION", "SYMBOL"].includes(this.tokenAtCursor.type)) {
-      if (this.tokenAtCursor.value.length > 0) {
-        this.autoCompleteState.search = this.tokenAtCursor.value;
-        this.autoCompleteState.showProvider = true;
-      }
-    } else if (["COMMA", "LEFT_PAREN", "OPERATOR", "SPACE"].includes(this.tokenAtCursor.type)) {
-      // we need to reset the anchor of the selection to the active cell, so the next Arrow key down
-      // is relative the to the cell we edit
-      this.dispatch("START_COMPOSER_SELECTION");
-      // We set this variable to store the start of the selection, to allow
-      // to replace selections (ex: select twice a cell should only be added
-      // once)
-      this.refSelectionStart = this.selectionStart;
-    }
-  }
-
-  addText(text: string) {
-    this.contentHelper.selectRange(this.selectionStart, this.selectionEnd);
-    this.contentHelper.insertText(text);
-    this.selectionStart = this.selectionEnd = this.selectionStart + text.length;
-    this.contentHelper.selectRange(this.selectionStart, this.selectionEnd);
-  }
-
-  addTextFromSelection() {
-    const zone = this.getters.getSelectedZones()[0];
-    let selection = this.getters.zoneToXC(zone);
-    if (this.refSelectionStart) {
-      this.selectionStart = this.refSelectionStart;
-    }
-    if (this.getters.getEditionSheet() !== this.getters.getActiveSheet()) {
-      const sheetName = getComposerSheetName(
-        this.getters.getSheetName(this.getters.getActiveSheet())!
-      );
-      selection = `${sheetName}!${selection}`;
-    }
-    this.addText(selection);
-    this.processContent();
-  }
-
-  autoComplete(value: string) {
-    this.saveSelection();
-    if (value) {
-      if (this.tokenAtCursor) {
-        let start = this.tokenAtCursor.end;
-        let end = this.tokenAtCursor.end;
-
-        if (["SYMBOL", "FUNCTION"].includes(this.tokenAtCursor.type)) {
-          start = this.tokenAtCursor.start;
-        }
-
-        if (this.autoCompleteState.provider && this.tokens.length) {
-          value += "(";
-
-          const currentTokenIndex = this.tokens
-            .map((token) => token.start)
-            .indexOf(this.tokenAtCursor.start);
-          if (currentTokenIndex + 1 < this.tokens.length) {
-            const nextToken = this.tokens[currentTokenIndex + 1];
-            if (nextToken.type === "LEFT_PAREN") {
-              end++;
-            }
-          }
-        }
-        this.selectionStart = start;
-        this.selectionEnd = end;
-      }
-      this.addText(value);
-    }
-
-    this.autoCompleteState.search = "";
-    this.autoCompleteState.showProvider = false;
-    this.processContent();
-    this.processTokenAtCursor();
-  }
-
-  /**
-   * Save the current selection
-   */
-  saveSelection() {
-    const selection = this.contentHelper.getCurrentSelection();
-    this.selectionStart = selection.start;
-    this.selectionEnd = selection.end;
-  }
-}

package/src/components/composer/content_editable_helper.ts

@@ -1,146 +0,0 @@
-export class ContentEditableHelper {
-  el: HTMLElement;
-  constructor(el: HTMLElement | null) {
-    this.el = el!;
-  }
-
-  updateEl(el: HTMLElement) {
-    this.el = el;
-    this.el.focus();
-  }
-
-  /**
-   * select the text at position start to end, no matter the children
-   */
-  selectRange(start: number, end: number) {
-    let selection = window.getSelection()!;
-    this.removeSelection();
-    let range = document.createRange();
-    if (start == end && start === 0) {
-      range.setStart(this.el, 0);
-      range.setEnd(this.el, 0);
-    } else {
-      if (start < 0 || end > this.el!.textContent!.length) {
-        console.warn(
-          `wrong selection asked start ${start}, end ${end}, text content length ${
-            this.el!.textContent!.length
-          }`
-        );
-        if (start < 0) start = 0;
-        if (end > this.el!.textContent!.length) end = this.el!.textContent!.length;
-      }
-      let startNode = this.findChildAtCharacterIndex(start);
-      let endNode = this.findChildAtCharacterIndex(end);
-      range.setStart(startNode.node, startNode.offset);
-      range.setEnd(endNode.node, endNode.offset);
-    }
-    selection.addRange(range);
-  }
-
-  /**
-   * finds the dom element that contains the character at `offset`
-   */
-  private findChildAtCharacterIndex(offset: number): { node: Node; offset: number } {
-    let it = this.iterateChildren(this.el);
-    let current, previous;
-    let usedCharacters = offset;
-    do {
-      current = it.next();
-      if (!current.done && !current.value.hasChildNodes()) {
-        if (current.value.textContent && current.value.textContent.length < usedCharacters) {
-          usedCharacters -= current.value.textContent.length;
-        } else {
-          it.return(current.value);
-        }
-        previous = current.value;
-      }
-    } while (!current.done);
-
-    if (current.value) {
-      return { node: current.value, offset: usedCharacters };
-    }
-    return { node: previous, offset: usedCharacters };
-  }
-
-  /**
-   * Iterate over the dom tree starting at `el` and over all the children depth first.
-   * */
-  private *iterateChildren(el): Generator<Node> {
-    yield el;
-    if (el.hasChildNodes()) {
-      for (let child of el.childNodes) {
-        yield* this.iterateChildren(child);
-      }
-    }
-  }
-
-  /**
-   * insert text at the current selection point. If a selection of 1 or more elements is done,
-   * the selection is replaced by the text to be inserted
-   * */
-  insertText(value: string, color: string = "#000") {
-    document.execCommand("foreColor", false, color);
-    document.execCommand("insertText", false, value);
-  }
-
-  /**
-   * remove the current selection of the user
-   * */
-  removeSelection() {
-    let selection = window.getSelection()!;
-    selection.removeAllRanges();
-  }
-
-  removeAll() {
-    if (this.el) {
-      while (this.el.firstChild) {
-        this.el.removeChild(this.el.firstChild);
-      }
-    }
-  }
-
-  /**
-   * finds the indexes of the current selection.
-   * */
-  getCurrentSelection() {
-    let { startElement, endElement, startSelectionOffset, endSelectionOffset } =
-      this.getStartAndEndSelection();
-    let startSizeBefore = this.findSizeBeforeElement(startElement!);
-    let endSizeBefore = this.findSizeBeforeElement(endElement!);
-
-    return {
-      start: startSizeBefore + startSelectionOffset,
-      end: endSizeBefore + endSelectionOffset,
-    };
-  }
-
-  private findSizeBeforeElement(nodeToFind: Node): number {
-    let it = this.iterateChildren(this.el);
-    let usedCharacters = 0;
-    let current = it.next();
-
-    while (!current.done && current.value !== nodeToFind) {
-      if (!current.value.hasChildNodes()) {
-        if (current.value.textContent) {
-          usedCharacters += current.value.textContent.length;
-        }
-      }
-      current = it.next();
-    }
-
-    return usedCharacters;
-  }
-
-  private getStartAndEndSelection() {
-    const selection = document.getSelection()!;
-
-    const range = selection.getRangeAt(0);
-
-    return {
-      startElement: range.startContainer,
-      startSelectionOffset: range.startOffset,
-      endElement: range.endContainer,
-      endSelectionOffset: range.endOffset,
-    };
-  }
-}

package/src/components/figures/chart.ts

@@ -1,70 +0,0 @@
-import { Component, hooks, tags } from "@odoo/owl";
-import Chart from "chart.js";
-import { ChartDefinition, Figure, SpreadsheetEnv } from "../../types";
-
-const { xml, css } = tags;
-const { useRef } = hooks;
-
-const TEMPLATE = xml/* xml */ `
-<div class="o-chart-container">
-    <canvas t-ref="graphContainer" />
-</div>`;
-
-// -----------------------------------------------------------------------------
-// STYLE
-// -----------------------------------------------------------------------------
-const CSS = css/* scss */ `
-  .o-chart-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    > canvas {
-      background-color: white;
-    }
-  }
-`;
-
-interface Props {
-  figure: Figure<ChartDefinition>;
-}
-
-export class ChartFigure extends Component<Props, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static style = CSS;
-  static components = {};
-
-  canvas = useRef("graphContainer");
-  private chart?: Chart;
-
-  mounted() {
-    this.createChart();
-  }
-
-  patched() {
-    const figure = this.props.figure;
-    const chartData = this.env.getters.getChartRuntime(figure.id);
-    if (chartData) {
-      if (chartData.data && chartData.data.datasets) {
-        Object.assign(this.chart!.data!.datasets, chartData.data.datasets);
-        Object.assign(this.chart!.data.labels, chartData.data.labels);
-      } else {
-        this.chart!.data.datasets = undefined;
-      }
-
-      this.chart!.update({ duration: 0 });
-    } else {
-      this.chart && this.chart.destroy();
-    }
-  }
-
-  private createChart() {
-    const figure = this.props.figure;
-    const charData = this.env.getters.getChartRuntime(figure.id);
-    if (charData) {
-      const canvas = this.canvas.el as HTMLCanvasElement;
-      const ctx = canvas.getContext("2d")!;
-      this.chart = new window.Chart(ctx, charData);
-    }
-  }
-}