@odoo/o-spreadsheet 14.0.0 → 14.0.1

package/demo/main.js

@@ -0,0 +1,101 @@
+import { demoData, makeLargeDataset } from "./data.js";
+owl.config.mode = "dev";
+
+const { whenReady } = owl.utils;
+const { Component } = owl;
+const { xml, css } = owl.tags;
+const { useSubEnv } = owl.hooks;
+
+const Spreadsheet = o_spreadsheet.Spreadsheet;
+const menuItemRegistry = o_spreadsheet.registries.topbarMenuRegistry;
+
+menuItemRegistry.add("file", { name: "File", sequence: 10 });
+menuItemRegistry.addChild("save", ["file"], {
+  name: "Save",
+  sequence: 30,
+  action: (env) => env.save(env.export()),
+});
+menuItemRegistry.addChild("clear", ["file"], {
+  name: "Clear save",
+  sequence: 30,
+  action: (env) => window.localStorage.removeItem("o-spreadsheet"),
+});
+
+let start;
+
+class App extends Component {
+  constructor() {
+    super();
+    this.key = 1;
+    let cacheData;
+    try {
+      cacheData = JSON.parse(window.localStorage.getItem("o-spreadsheet"));
+    } catch (_) {
+      window.localStorage.removeItem("o-spreadsheet");
+    }
+    this.data = cacheData || demoData;
+    useSubEnv({
+      save: this.save.bind(this),
+    });
+    // this.data = makeLargeDataset(20, 10_000);
+  }
+
+  mounted() {
+    console.log("Mounted: ", Date.now() - start);
+  }
+
+  askConfirmation(ev) {
+    if (window.confirm(ev.detail.content)) {
+      ev.detail.confirm();
+    }
+  }
+
+  notifyUser(ev) {
+    window.alert(ev.detail.content);
+  }
+
+  editText(ev) {
+    const text = window.prompt(ev.detail.title, ev.detail.placeholder);
+    ev.detail.callback(text);
+  }
+
+  saveContent(ev) {
+    this.save(ev.detail.data);
+  }
+
+  save(content) {
+    window.localStorage.setItem("o-spreadsheet", JSON.stringify(content));
+  }
+}
+
+App.template = xml`
+  <div>
+    <Spreadsheet data="data" t-key="key"
+      t-on-ask-confirmation="askConfirmation"
+      t-on-notify-user="notifyUser"
+      t-on-edit-text="editText"
+      t-on-save-content="saveContent"/>
+  </div>`;
+App.style = css`
+  html {
+    height: 100%;
+    body {
+      height: 100%;
+      margin: 0px;
+    }
+    .o-spreadsheet {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;
+App.components = { Spreadsheet };
+
+// Setup code
+function setup() {
+  start = Date.now();
+  const app = new App();
+
+  app.mount(document.body);
+}
+whenReady(setup);

package/doc/readme.md

@@ -0,0 +1,46 @@
+# o-spreadsheet
+
+## Integrating o-spreadsheet
+
+The `o-spreadsheet` library is designed to be standalone, but easy to integrate.
+Here is a list of all official extension points:
+
+1. Adding functions: the `o_spreadsheet` object exports an `addFunction` method:
+
+```js
+o_spreadsheet.addFunction("myfunc", {
+  description: "My custom Function",
+  compute: function (a, b) {
+    return 2 * (a + b);
+  },
+});
+```
+
+The `addFunction` method takes a name and a function descriptor (it should
+implement the `FunctionDescription` interface from the code `/functions/index.ts`).
+
+2. Confirmation dialog: sometimes, `o-spreadsheet` needs to ask confirmation to
+   the user. For example, merging cells which have some text content is considered
+   a destructive operation. In that case, we want to display a nice modal dialog
+   to ask the user if it is okay.
+
+To do that, the `o-spreadsheet` library will trigger a `ask-confirmation` event.
+
+```js
+class App extends Component {
+  static template = xml`<Spreadsheet data="data" t-on-ask-confirmation="askConfirmation"/>`;
+  static components = { Spreadsheet };
+
+  data = ...;
+
+  askConfirmation(ev) {
+    // open here a nice model dialog
+    if (window.confirm(ev.detail.content)) {
+      ev.detail.confirm();
+    }
+  }
+```
+
+3. Notification dialog: sometimes, `o-spreadsheet` needs to notify the user that
+   some operation is not supported, or some other message. In that case, it will
+   trigger a `notify-user` event, with a `content` key with a message.

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "14.0.0",
+  "version": "14.0.1",
   "description": "A spreadsheet component",
   "main": "index.js",
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "serve": "live-server --open=demo",
     "dev": "npm-run-all  build --parallel serve \"build:* -- --watch\"",
@@ -18,8 +15,7 @@
     "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,demo/*.js} --write",
     "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,demo/*.js} --check",
     "dist": "npm run build:all && npm run build:bundle",
-    "prepare": "husky install",
-    "release": "node tools/release.js"
+    "prepare": "husky install"
   },
   "browserslist": [
     "last 1 Chrome versions"
@@ -27,26 +23,16 @@
   "keywords": [
     "owl",
     "spreadsheet",
-    "o-spreadsheet",
     "odoo"
   ],
-  "author": "Odoo",
+  "author": "Gery Debongnie",
   "license": "LGPL-3.0-or-later",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/odoo/o-spreadsheet.git"
-  },
-  "bugs": {
-    "url": "https://github.com/odoo/o-spreadsheet/issues"
-  },
-  "homepage": "https://github.com/odoo/o-spreadsheet#readme",
   "devDependencies": {
     "@types/chart.js": "^2.9.24",
     "@types/jest": "^27.0.1",
     "@types/node": "^13.11.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
-    "current-git-branch": "^1.1.0",
     "git-rev-sync": "^2.0.0",
     "husky": "^7.0.4",
     "jest": "^27.2.0",

package/rollup.config.js

@@ -0,0 +1,23 @@
+import { version } from "./package.json";
+import git from "git-rev-sync";
+
+let commitHash = "";
+
+try {
+  commitHash = git.short();
+}
+catch(_) {
+}
+
+export default {
+  input: "dist/js/index.js",
+  external: ["@odoo/owl"],
+  output: {
+    file: "dist/o_spreadsheet.js",
+    format: "iife",
+    name: "o_spreadsheet",
+    extend: true,
+    globals: { "@odoo/owl": "owl" /*, "chart.js": "chart_js" */ },
+    outro: `exports.__info__.version = '${version}';\nexports.__info__.date = '${new Date().toISOString()}';\nexports.__info__.hash = '${commitHash}';`,
+  },
+};

package/src/base_plugin.ts

@@ -0,0 +1,102 @@
+import { WHistory, WorkbookHistory } from "./history";
+import { Mode, ModelConfig } from "./model";
+import {
+  Command,
+  CommandDispatcher,
+  CommandHandler,
+  CommandResult,
+  Getters,
+  GridRenderingContext,
+  LAYERS,
+  Workbook,
+  WorkbookData,
+} from "./types/index";
+
+type UIActions = Pick<ModelConfig, "askConfirmation" | "notifyUser" | "openSidePanel" | "editText">;
+/**
+ * BasePlugin
+ *
+ * Since the spreadsheet internal state is quite complex, it is split into
+ * multiple parts, each managing a specific concern.
+ *
+ * This file introduce the BasePlugin, which is the common class that defines
+ * how each of these model sub parts should interact with each other.
+ */
+
+export class BasePlugin implements CommandHandler {
+  static layers: LAYERS[] = [];
+  static getters: string[] = [];
+  static modes: Mode[] = ["headless", "normal", "readonly"];
+
+  protected workbook: Workbook;
+  protected getters: Getters;
+  protected history: WorkbookHistory;
+  protected dispatch: CommandDispatcher["dispatch"];
+  protected currentMode: Mode;
+  protected ui: UIActions;
+
+  constructor(
+    workbook: Workbook,
+    getters: Getters,
+    history: WHistory,
+    dispatch: CommandDispatcher["dispatch"],
+    config: ModelConfig
+  ) {
+    this.workbook = workbook;
+    this.getters = getters;
+    this.history = Object.assign(Object.create(history), {
+      updateLocalState: history.updateStateFromRoot.bind(history, this),
+    });
+    this.dispatch = dispatch;
+    this.currentMode = config.mode;
+    this.ui = config;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Command handling
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Before a command is accepted, the model will ask each plugin if the command
+   * is allowed.  If all of then return true, then we can proceed. Otherwise,
+   * the command is cancelled.
+   *
+   * There should not be any side effects in this method.
+   */
+  allowDispatch(command: Command): CommandResult {
+    return { status: "SUCCESS" };
+  }
+
+  /**
+   * This method is useful when a plugin need to perform some action before a
+   * command is handled in another plugin. This should only be used if it is not
+   * possible to do the work in the handle method.
+   */
+  beforeHandle(command: Command): void {}
+
+  /**
+   * This is the standard place to handle any command. Most of the plugin
+   * command handling work should take place here.
+   */
+  handle(command: Command): void {}
+
+  /**
+   * Sometimes, it is useful to perform some work after a command (and all its
+   * subcommands) has been completely handled.  For example, when we paste
+   * multiple cells, we only want to reevaluate the cell values once at the end.
+   */
+  finalize(command: Command): void {}
+
+  // ---------------------------------------------------------------------------
+  // Grid rendering
+  // ---------------------------------------------------------------------------
+
+  drawGrid(ctx: GridRenderingContext, layer: LAYERS) {}
+
+  // ---------------------------------------------------------------------------
+  // Import/Export
+  // ---------------------------------------------------------------------------
+
+  import(data: WorkbookData) {}
+  export(data: WorkbookData) {}
+}

package/src/components/autofill.ts

@@ -0,0 +1,146 @@
+import * as owl from "@odoo/owl";
+import { clip } from "../helpers/misc";
+import { SpreadsheetEnv, Viewport } from "../types";
+import { startDnd } from "./helpers/drag_and_drop";
+
+const { Component } = owl;
+const { xml, css } = owl.tags;
+const { useState } = owl.hooks;
+
+// -----------------------------------------------------------------------------
+// Autofill
+// -----------------------------------------------------------------------------
+
+const TEMPLATE = xml/* xml */ `
+  <div class="o-autofill" t-on-mousedown="onMouseDown" t-att-style="style" t-on-dblclick="onDblClick">
+    <div class="o-autofill-handler" t-att-style="styleHandler"/>
+    <t t-set="tooltip" t-value="getTooltip()"/>
+    <div t-if="tooltip" class="o-autofill-nextvalue" t-att-style="styleNextvalue">
+      <t t-component="tooltip.component" t-props="tooltip.props"/>
+    </div>
+  </div>
+`;
+
+const CSS = css/* scss */ `
+  .o-autofill {
+    height: 6px;
+    width: 6px;
+    border: 1px solid white;
+    position: absolute;
+    background-color: #1a73e8;
+
+    .o-autofill-handler {
+      position: absolute;
+      height: 8px;
+      width: 8px;
+
+      &:hover {
+        cursor: crosshair;
+      }
+    }
+
+    .o-autofill-nextvalue {
+      position: absolute;
+      background-color: white;
+      border: 1px solid black;
+      padding: 5px;
+      font-size: 12px;
+      pointer-events: none;
+      white-space: nowrap;
+    }
+  }
+`;
+
+interface Props {
+  position: Position;
+  viewport: Viewport;
+}
+
+interface Position {
+  top: number;
+  left: number;
+}
+
+interface State {
+  position: Position;
+  handler: boolean;
+}
+
+export class Autofill extends Component<Props, SpreadsheetEnv> {
+  static template = TEMPLATE;
+  static style = CSS;
+
+  state: State = useState({
+    position: { left: 0, top: 0 },
+    handler: false,
+  });
+
+  get style() {
+    const { left, top } = this.props.position;
+    return `top:${top}px;left:${left}px`;
+  }
+
+  get styleHandler() {
+    let position: Position = this.state.handler ? this.state.position : { left: 0, top: 0 };
+    return `top:${position.top}px;left:${position.left}px;`;
+  }
+
+  get styleNextvalue() {
+    let position: Position = this.state.handler ? this.state.position : { left: 0, top: 0 };
+    return `top:${position.top + 5}px;left:${position.left + 15}px;`;
+  }
+
+  getTooltip() {
+    const tooltip = this.env.getters.getAutofillTooltip();
+    if (tooltip && !tooltip.component) {
+      tooltip.component = TooltipComponent;
+    }
+    return tooltip;
+  }
+
+  onMouseDown(ev: MouseEvent) {
+    this.state.handler = true;
+    this.state.position = { left: 0, top: 0 };
+    const start = { left: ev.clientX, top: ev.clientY };
+    let lastCol: number | undefined;
+    let lastRow: number | undefined;
+
+    const onMouseUp = () => {
+      this.state.handler = false;
+      this.env.dispatch("AUTOFILL");
+    };
+
+    const onMouseMove = (ev: MouseEvent) => {
+      this.state.position = {
+        left: ev.clientX - start.left,
+        top: ev.clientY - start.top,
+      };
+      const parent = this.el!.parentElement! as HTMLElement;
+      const position = parent.getBoundingClientRect();
+      const col = this.env.getters.getColIndex(
+        ev.clientX - position.left,
+        this.props.viewport.left
+      );
+      const row = this.env.getters.getRowIndex(ev.clientY - position.top, this.props.viewport.top);
+      if (lastCol !== col || lastRow !== row) {
+        const sheetId = this.env.getters.getActiveSheet();
+        lastCol = col === -1 ? lastCol : clip(col, 0, this.env.getters.getNumberCols(sheetId));
+        lastRow = row === -1 ? lastRow : clip(row, 0, this.env.getters.getNumberRows(sheetId));
+        if (lastCol !== undefined && lastRow !== undefined) {
+          this.env.dispatch("AUTOFILL_SELECT", { col: lastCol, row: lastRow });
+        }
+      }
+    };
+    startDnd(onMouseMove, onMouseUp);
+  }
+
+  onDblClick() {
+    this.env.dispatch("AUTOFILL_AUTO");
+  }
+}
+
+class TooltipComponent extends Component<Props> {
+  static template = xml/* xml */ `
+    <div t-esc="props.content"/>
+  `;
+}

package/src/components/bottom_bar.ts

@@ -0,0 +1,199 @@
+import * as owl from "@odoo/owl";
+import { BACKGROUND_GRAY_COLOR, BOTTOMBAR_HEIGHT, HEADER_WIDTH } from "../constants";
+import { uuidv4 } from "../helpers/index";
+import { MenuItemRegistry, sheetMenuRegistry } from "../registries/index";
+import { SpreadsheetEnv } from "../types";
+import { LIST, PLUS, TRIANGLE_DOWN_ICON } from "./icons";
+import { Menu, MenuState } from "./menu";
+const { Component } = owl;
+const { xml, css } = owl.tags;
+const { useState } = owl.hooks;
+
+// -----------------------------------------------------------------------------
+// SpreadSheet
+// -----------------------------------------------------------------------------
+
+const TEMPLATE = xml/* xml */ `
+  <div class="o-spreadsheet-bottom-bar">
+    <div class="o-sheet-item o-add-sheet" t-on-click="addSheet">${PLUS}</div>
+    <div class="o-sheet-item o-list-sheets" t-on-click="listSheets">${LIST}</div>
+    <div class="o-all-sheets">
+      <t t-foreach="getters.getSheets()" t-as="sheet" t-key="sheet.id">
+        <div class="o-sheet-item o-sheet" t-on-click="activateSheet(sheet.id)"
+             t-on-contextmenu.prevent="onContextMenu(sheet.id)"
+             t-att-title="sheet.name"
+             t-att-data-id="sheet.id"
+             t-att-class="{active: sheet.id === getters.getActiveSheet()}">
+          <span class="o-sheet-name" t-esc="sheet.name" t-on-dblclick="onDblClick(sheet.id)"/>
+          <span class="o-sheet-icon" t-on-click.stop="onIconClick(sheet.id)">${TRIANGLE_DOWN_ICON}</span>
+        </div>
+      </t>
+    </div>
+    <t t-set="aggregate" t-value="getters.getAggregate()"/>
+    <div t-if="aggregate !== null" class="o-aggregate">Sum: <t t-esc="aggregate"/></div>
+    <Menu t-if="menuState.isOpen"
+          position="menuState.position"
+          menuItems="menuState.menuItems"
+          t-on-close="menuState.isOpen=false"/>
+  </div>`;
+
+const CSS = css/* scss */ `
+  .o-spreadsheet-bottom-bar {
+    background-color: ${BACKGROUND_GRAY_COLOR};
+    padding-left: ${HEADER_WIDTH}px;
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    border-top: 1px solid lightgrey;
+    overflow: hidden;
+
+    .o-add-sheet,
+    .o-list-sheets {
+      margin-right: 5px;
+    }
+
+    .o-sheet-item {
+      display: flex;
+      align-items: center;
+      padding: 5px;
+      cursor: pointer;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    .o-all-sheets {
+      display: flex;
+      align-items: center;
+      max-width: 80%;
+      overflow: hidden;
+    }
+
+    .o-sheet {
+      color: #666;
+      padding: 0 15px;
+      padding-right: 10px;
+      height: ${BOTTOMBAR_HEIGHT}px;
+      line-height: ${BOTTOMBAR_HEIGHT}px;
+      user-select: none;
+      white-space: nowrap;
+
+      &.active {
+        color: #484;
+        background-color: white;
+        box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+      }
+
+      .o-sheet-icon {
+        margin-left: 5px;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+
+    .o-aggregate {
+      background-color: white;
+      margin-left: auto;
+      font-size: 14px;
+      margin-right: 20px;
+      padding: 4px 8px;
+      color: #333;
+      border-radius: 3px;
+      box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    }
+    .fade-enter-active {
+      transition: opacity 0.5s;
+    }
+
+    .fade-enter {
+      opacity: 0;
+    }
+  }
+`;
+
+export class BottomBar extends Component<{}, SpreadsheetEnv> {
+  static template = TEMPLATE;
+  static style = CSS;
+  static components = { Menu };
+
+  getters = this.env.getters;
+  menuState: MenuState = useState({ isOpen: false, position: null, menuItems: [] });
+
+  mounted() {
+    this.focusSheet();
+  }
+
+  patched() {
+    this.focusSheet();
+  }
+
+  focusSheet() {
+    const div = this.el!.querySelector(`[data-id="${this.getters.getActiveSheet()}"]`);
+    if (div && div.scrollIntoView) {
+      div.scrollIntoView();
+    }
+  }
+
+  addSheet() {
+    this.env.dispatch("CREATE_SHEET", { activate: true, id: uuidv4() });
+  }
+
+  listSheets(ev: MouseEvent) {
+    const registry = new MenuItemRegistry();
+    const from = this.getters.getActiveSheet();
+    let i = 0;
+    for (let sheet of this.getters.getSheets()) {
+      registry.add(sheet.id, {
+        name: sheet.name,
+        sequence: i,
+        action: (env) => env.dispatch("ACTIVATE_SHEET", { from, to: sheet.id }),
+      });
+      i++;
+    }
+    this.openContextMenu(ev.currentTarget as HTMLElement, registry);
+  }
+
+  activateSheet(name: string) {
+    this.env.dispatch("ACTIVATE_SHEET", { from: this.getters.getActiveSheet(), to: name });
+  }
+
+  onDblClick(sheet: string) {
+    this.env.dispatch("RENAME_SHEET", { interactive: true, sheet });
+  }
+
+  openContextMenu(target: HTMLElement, registry: MenuItemRegistry) {
+    const x = target.offsetLeft;
+    const y = target.offsetTop;
+    this.menuState.isOpen = true;
+    this.menuState.menuItems = registry.getAll().filter((x) => x.isVisible(this.env));
+    this.menuState.position = {
+      x,
+      y,
+      height: 400,
+      width: this.el!.clientWidth,
+    };
+  }
+
+  onIconClick(sheet: string, ev: MouseEvent) {
+    if (this.getters.getActiveSheet() !== sheet) {
+      this.activateSheet(sheet);
+    }
+    if (this.menuState.isOpen) {
+      this.menuState.isOpen = false;
+    } else {
+      this.openContextMenu(
+        (ev.currentTarget as HTMLElement).parentElement as HTMLElement,
+        sheetMenuRegistry
+      );
+    }
+  }
+
+  onContextMenu(sheet: string, ev: MouseEvent) {
+    if (this.getters.getActiveSheet() !== sheet) {
+      this.activateSheet(sheet);
+    }
+    this.openContextMenu(ev.currentTarget as HTMLElement, sheetMenuRegistry);
+  }
+}