@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/demo/main.js

@@ -1,101 +0,0 @@
-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

@@ -1,46 +0,0 @@
-# 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/rollup.config.js

@@ -1,23 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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);
-  }
-}