@odoo/o-spreadsheet 1.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

@@ -0,0 +1,78 @@
+{
+  "name": "@odoo/o-spreadsheet",
+  "version": "1.0.1",
+  "description": "A spreadsheet component",
+  "main": "index.js",
+  "scripts": {
+    "serve": "live-server --open=demo",
+    "dev": "npm-run-all  build --parallel serve \"build:* -- --watch\"",
+    "build:js": "tsc --module es6 --outDir dist/js --incremental",
+    "build:all": "tsc --module es6 --outDir dist/js",
+    "build:bundle": "rollup -c -m",
+    "build": "npm run build:js && npm run build:bundle",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "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"
+  },
+  "browserslist": [
+    "last 1 Chrome versions"
+  ],
+  "keywords": [
+    "owl",
+    "spreadsheet",
+    "odoo"
+  ],
+  "author": "Gery Debongnie",
+  "license": "LGPL-3.0-or-later",
+  "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",
+    "git-rev-sync": "^2.0.0",
+    "husky": "^7.0.4",
+    "jest": "^27.2.0",
+    "jest-environment-jsdom": "^27.2.0",
+    "lint-staged": "^12.1.2",
+    "live-server": "^1.2.1",
+    "mockdate": "^3.0.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "2.3.1",
+    "rollup": "^2.38.5",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.4.3"
+  },
+  "prettier": {
+    "printWidth": 100
+  },
+  "dependencies": {
+    "@odoo/owl": "^1.4.10"
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src",
+      "<rootDir>/tests"
+    ],
+    "transform": {
+      "^.+\\.ts?$": "ts-jest"
+    },
+    "verbose": false,
+    "testEnvironment": "jsdom",
+    "testRegex": "(/tests/.*(test|spec))\\.ts?$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
+  },
+  "lint-staged": {
+    "{src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,demo/*.js}": "prettier --write"
+  }
+}

package/readme.md

@@ -0,0 +1,39 @@
+# o-spreadsheet
+
+a.k.a. "Owly Sheet"
+
+Spreadsheet component, written in Owl.
+
+## Prerequisites
+
+install nodejs 12.0 at least
+
+## Scripts
+
+```bash
+# install dependencies
+npm install
+
+# build o_spreadsheet.js in dist/
+npm run build
+
+# build stuff, start a live server, build with --watch
+npm run dev
+
+# run the test suite
+npm run test
+npm run test -- --watch
+```
+
+## Code
+
+Most of the code is contained in the following four modules:
+
+- `formulas`
+- `functions`
+- `model`
+- `ui`
+
+## Documentation
+
+See [documentation](doc/readme.md).

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"/>
+  `;
+}