@odoo/o-spreadsheet 14.0.0 → 14.0.1

package/src/components/overlay.ts

@@ -0,0 +1,457 @@
+import * as owl from "@odoo/owl";
+import { HEADER_HEIGHT, HEADER_WIDTH, MIN_COL_WIDTH, MIN_ROW_HEIGHT } from "../constants";
+import { Col, Row, SpreadsheetEnv, Viewport } from "../types/index";
+import { ContextMenuType } from "./grid";
+import { startDnd } from "./helpers/drag_and_drop";
+
+const { Component } = owl;
+const { xml, css } = owl.tags;
+const { useState } = owl.hooks;
+
+// -----------------------------------------------------------------------------
+// Resizer component
+// -----------------------------------------------------------------------------
+
+abstract class AbstractResizer extends Component<any, SpreadsheetEnv> {
+  PADDING: number = 0;
+  MAX_SIZE_MARGIN: number = 0;
+  MIN_ELEMENT_SIZE: number = 0;
+  lastSelectedElement: number | null = null;
+  lastElement: number | null = null;
+  getters = this.env.getters;
+  dispatch = this.env.dispatch;
+
+  state = useState({
+    isActive: <boolean>false,
+    isResizing: <boolean>false,
+    activeElement: <number>0,
+    styleValue: <number>0,
+    delta: <number>0,
+  });
+
+  abstract _getEvOffset(ev: MouseEvent): number;
+
+  abstract _getStateOffset(): number;
+
+  abstract _getViewportOffset(): number;
+
+  abstract _getClientPosition(ev: MouseEvent): number;
+
+  abstract _getElementIndex(index: number): number;
+
+  abstract _getElement(index: number): Col | Row;
+
+  abstract _getHeaderSize(): number;
+
+  abstract _getMaxSize(): number;
+
+  abstract _updateSize(): void;
+
+  abstract _selectElement(index: number, ctrlKey: boolean): void;
+
+  abstract _increaseSelection(index: number): void;
+
+  abstract _fitElementSize(index: number): void;
+
+  abstract _getType(): ContextMenuType;
+
+  abstract _getActiveElements(): Set<number>;
+
+  abstract _getXY(ev: MouseEvent): { x: number; y: number };
+
+  _computeHandleDisplay(ev: MouseEvent) {
+    const index = this._getEvOffset(ev);
+    const elementIndex = this._getElementIndex(index);
+    if (elementIndex < 0) {
+      return;
+    }
+    const element = this._getElement(elementIndex);
+    const offset = this._getStateOffset();
+    if (
+      index - (element.start - offset) < this.PADDING &&
+      elementIndex !== this._getViewportOffset()
+    ) {
+      this.state.isActive = true;
+      this.state.styleValue = element.start - offset - this._getHeaderSize();
+      this.state.activeElement = elementIndex - 1;
+    } else if (element.end - offset - index < this.PADDING) {
+      this.state.isActive = true;
+      this.state.styleValue = element.end - offset - this._getHeaderSize();
+      this.state.activeElement = elementIndex;
+    } else {
+      this.state.isActive = false;
+    }
+  }
+
+  onMouseMove(ev: MouseEvent) {
+    if (this.state.isResizing) {
+      return;
+    }
+    this._computeHandleDisplay(ev);
+  }
+
+  onMouseLeave() {
+    this.state.isActive = this.state.isResizing;
+  }
+
+  onDblClick() {
+    this._fitElementSize(this.state.activeElement);
+    this.state.isResizing = false;
+  }
+
+  onMouseDown(ev: MouseEvent) {
+    this.state.isResizing = true;
+    this.state.delta = 0;
+
+    const initialIndex = this._getClientPosition(ev);
+    const styleValue = this.state.styleValue;
+    const size = this._getElement(this.state.activeElement).size;
+    const minSize = styleValue - size + this.MIN_ELEMENT_SIZE;
+    const maxSize = this._getMaxSize();
+    const onMouseUp = (ev: MouseEvent) => {
+      this.state.isResizing = false;
+      if (this.state.delta !== 0) {
+        this._updateSize();
+      }
+    };
+    const onMouseMove = (ev: MouseEvent) => {
+      this.state.delta = this._getClientPosition(ev) - initialIndex;
+      this.state.styleValue = styleValue + this.state.delta;
+      if (this.state.styleValue < minSize) {
+        this.state.styleValue = minSize;
+        this.state.delta = this.MIN_ELEMENT_SIZE - size;
+      }
+      if (this.state.styleValue > maxSize) {
+        this.state.styleValue = maxSize;
+        this.state.delta = maxSize - styleValue;
+      }
+    };
+    startDnd(onMouseMove, onMouseUp);
+  }
+
+  select(ev: MouseEvent) {
+    if (ev.button > 0) {
+      // not main button, probably a context menu
+      return;
+    }
+    const index = this._getElementIndex(this._getEvOffset(ev));
+    if (index < 0) {
+      return;
+    }
+    this.lastElement = index;
+    this.dispatch(ev.ctrlKey ? "START_SELECTION_EXPANSION" : "START_SELECTION");
+    if (ev.shiftKey) {
+      this._increaseSelection(index);
+    } else {
+      this.lastSelectedElement = index;
+      this._selectElement(index, ev.ctrlKey);
+    }
+    const initialIndex = this._getClientPosition(ev);
+    const initialOffset = this._getEvOffset(ev);
+    const onMouseMoveSelect = (ev: MouseEvent) => {
+      const offset = this._getClientPosition(ev) - initialIndex + initialOffset;
+      const index = this._getElementIndex(offset);
+      if (index !== this.lastElement && index !== -1) {
+        this._increaseSelection(index);
+        this.lastElement = index;
+      }
+    };
+    const onMouseUpSelect = () => {
+      this.lastElement = null;
+      this.dispatch(ev.ctrlKey ? "PREPARE_SELECTION_EXPANSION" : "STOP_SELECTION");
+    };
+    startDnd(onMouseMoveSelect, onMouseUpSelect);
+  }
+
+  onMouseUp(ev: MouseEvent) {
+    this.lastElement = null;
+  }
+
+  onContextMenu(ev: MouseEvent) {
+    ev.preventDefault();
+    const index = this._getElementIndex(this._getEvOffset(ev));
+    if (index < 0) return;
+    if (!this._getActiveElements().has(index)) {
+      this.lastSelectedElement = index;
+      this._selectElement(index, false);
+    }
+    const type = this._getType();
+    const { x, y } = this._getXY(ev);
+    this.trigger("open-contextmenu", { type, x, y });
+  }
+}
+
+export class ColResizer extends AbstractResizer {
+  static template = xml/* xml */ `
+    <div class="o-col-resizer" t-on-mousemove.self="onMouseMove" t-on-mouseleave="onMouseLeave" t-on-mousedown.self.prevent="select"
+      t-on-mouseup.self="onMouseUp" t-on-contextmenu.self="onContextMenu">
+      <t t-if="state.isActive">
+        <div class="o-handle" t-on-mousedown="onMouseDown" t-on-dblclick="onDblClick" t-on-contextmenu.prevent=""
+          t-attf-style="left:{{state.styleValue - 2}}px;">
+          <div class="dragging" t-if="state.isResizing"/>
+        </div>
+      </t>
+    </div>`;
+
+  static style = css/* scss */ `
+    .o-col-resizer {
+      position: absolute;
+      top: 0;
+      left: ${HEADER_WIDTH}px;
+      right: 0;
+      height: ${HEADER_HEIGHT}px;
+      .o-handle {
+        position: absolute;
+        height: ${HEADER_HEIGHT}px;
+        width: 4px;
+        cursor: e-resize;
+        background-color: #3266ca;
+      }
+      .dragging {
+        top: ${HEADER_HEIGHT}px;
+        position: absolute;
+        margin-left: 2px;
+        width: 1px;
+        height: 10000px;
+        background-color: #3266ca;
+      }
+    }
+  `;
+
+  constructor() {
+    super(...arguments);
+    this.PADDING = 15;
+    this.MAX_SIZE_MARGIN = 90;
+    this.MIN_ELEMENT_SIZE = MIN_COL_WIDTH;
+  }
+
+  _getEvOffset(ev: MouseEvent): number {
+    return ev.offsetX + HEADER_WIDTH;
+  }
+
+  _getStateOffset(): number {
+    return this.props.viewport.offsetX - HEADER_WIDTH;
+  }
+
+  _getViewportOffset(): number {
+    return this.props.viewport.left;
+  }
+
+  _getClientPosition(ev: MouseEvent): number {
+    return ev.clientX;
+  }
+
+  _getElementIndex(index: number): number {
+    return this.getters.getColIndex(index, this.props.viewport.left);
+  }
+
+  _getElement(index: number): Col {
+    return this.getters.getCol(this.getters.getActiveSheet(), index);
+  }
+
+  _getBottomRightValue(element: Col): number {
+    return element.end;
+  }
+
+  _getHeaderSize(): number {
+    return HEADER_WIDTH;
+  }
+
+  _getMaxSize(): number {
+    return this.el!.clientWidth;
+  }
+
+  _updateSize(): void {
+    const index = this.state.activeElement;
+    const size = this.state.delta + this._getElement(index).size;
+    const cols = this.getters.getActiveCols();
+    this.dispatch("RESIZE_COLUMNS", {
+      sheet: this.getters.getActiveSheet(),
+      cols: cols.has(index) ? [...cols] : [index],
+      size,
+    });
+  }
+
+  _selectElement(index: number, ctrlKey: boolean): void {
+    this.dispatch("SELECT_COLUMN", { index, createRange: ctrlKey });
+  }
+
+  _increaseSelection(index: number): void {
+    this.dispatch("SELECT_COLUMN", { index, updateRange: true });
+  }
+
+  _fitElementSize(index: number): void {
+    const cols = this.getters.getActiveCols();
+    this.dispatch("AUTORESIZE_COLUMNS", {
+      sheet: this.getters.getActiveSheet(),
+      cols: cols.has(index) ? [...cols] : [index],
+    });
+  }
+
+  _getType(): ContextMenuType {
+    return "COL";
+  }
+
+  _getActiveElements(): Set<number> {
+    return this.getters.getActiveCols();
+  }
+
+  _getXY(ev: MouseEvent): { x: number; y: number } {
+    return {
+      x: ev.offsetX + HEADER_WIDTH,
+      y: ev.offsetY,
+    };
+  }
+}
+
+export class RowResizer extends AbstractResizer {
+  static template = xml/* xml */ `
+    <div class="o-row-resizer" t-on-mousemove.self="onMouseMove"  t-on-mouseleave="onMouseLeave" t-on-mousedown.self.prevent="select"
+    t-on-mouseup.self="onMouseUp" t-on-contextmenu.self="onContextMenu">
+      <t t-if="state.isActive">
+        <div class="o-handle" t-on-mousedown="onMouseDown" t-on-dblclick="onDblClick" t-on-contextmenu.prevent=""
+          t-attf-style="top:{{state.styleValue - 2}}px;">
+          <div class="dragging" t-if="state.isResizing"/>
+        </div>
+      </t>
+    </div>`;
+
+  static style = css/* scss */ `
+    .o-row-resizer {
+      position: absolute;
+      top: ${HEADER_HEIGHT}px;
+      left: 0;
+      right: 0;
+      width: ${HEADER_WIDTH}px;
+      height: 100%;
+      .o-handle {
+        position: absolute;
+        height: 4px;
+        width: ${HEADER_WIDTH}px;
+        cursor: n-resize;
+        background-color: #3266ca;
+      }
+      .dragging {
+        left: ${HEADER_WIDTH}px;
+        position: absolute;
+        margin-top: 2px;
+        width: 10000px;
+        height: 1px;
+        background-color: #3266ca;
+      }
+    }
+  `;
+
+  constructor() {
+    super(...arguments);
+    this.PADDING = 5;
+    this.MAX_SIZE_MARGIN = 60;
+    this.MIN_ELEMENT_SIZE = MIN_ROW_HEIGHT;
+  }
+
+  _getEvOffset(ev: MouseEvent): number {
+    return ev.offsetY + HEADER_HEIGHT;
+  }
+
+  _getStateOffset(): number {
+    return this.props.viewport.offsetY - HEADER_HEIGHT;
+  }
+
+  _getViewportOffset(): number {
+    return this.props.viewport.top;
+  }
+
+  _getClientPosition(ev: MouseEvent): number {
+    return ev.clientY;
+  }
+
+  _getElementIndex(index: number): number {
+    return this.getters.getRowIndex(index, this.props.viewport.top);
+  }
+
+  _getElement(index: number): Row {
+    return this.getters.getRow(this.getters.getActiveSheet(), index);
+  }
+
+  _getHeaderSize(): number {
+    return HEADER_HEIGHT;
+  }
+
+  _getMaxSize(): number {
+    return this.el!.clientHeight;
+  }
+
+  _updateSize(): void {
+    const index = this.state.activeElement;
+    const size = this.state.delta + this._getElement(index).size;
+    const rows = this.getters.getActiveRows();
+    this.dispatch("RESIZE_ROWS", {
+      sheet: this.getters.getActiveSheet(),
+      rows: rows.has(index) ? [...rows] : [index],
+      size,
+    });
+  }
+
+  _selectElement(index: number, ctrlKey: boolean): void {
+    this.dispatch("SELECT_ROW", { index, createRange: ctrlKey });
+  }
+
+  _increaseSelection(index: number): void {
+    this.dispatch("SELECT_ROW", { index, updateRange: true });
+  }
+
+  _fitElementSize(index: number): void {
+    const rows = this.getters.getActiveRows();
+    this.dispatch("AUTORESIZE_ROWS", {
+      sheet: this.getters.getActiveSheet(),
+      rows: rows.has(index) ? [...rows] : [index],
+    });
+  }
+
+  _getType(): ContextMenuType {
+    return "ROW";
+  }
+
+  _getActiveElements(): Set<number> {
+    return this.getters.getActiveRows();
+  }
+
+  _getXY(ev: MouseEvent): { x: number; y: number } {
+    return {
+      x: ev.offsetX,
+      y: ev.offsetY + HEADER_HEIGHT,
+    };
+  }
+}
+
+interface Props {
+  viewport: Viewport;
+}
+
+export class Overlay extends Component<Props, SpreadsheetEnv> {
+  static template = xml/* xml */ `
+    <div class="o-overlay">
+      <ColResizer viewport="props.viewport"/>
+      <RowResizer viewport="props.viewport"/>
+      <div class="all" t-on-mousedown.self="selectAll"/>
+    </div>`;
+
+  static style = css/* scss */ `
+    .o-overlay {
+      .all {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: ${HEADER_WIDTH}px;
+        height: ${HEADER_HEIGHT}px;
+      }
+    }
+  `;
+
+  static components = { ColResizer, RowResizer };
+
+  selectAll() {
+    this.env.dispatch("SELECT_ALL");
+  }
+}

package/src/components/scrollbar.ts

@@ -0,0 +1,22 @@
+export type ScrollDirection = "horizontal" | "vertical";
+
+export class ScrollBar {
+  private direction: ScrollDirection;
+  el: HTMLElement;
+  constructor(el: HTMLElement | null, direction: ScrollDirection) {
+    this.el = el!;
+    this.direction = direction;
+  }
+
+  get scroll(): number {
+    return this.direction === "horizontal" ? this.el.scrollLeft : this.el.scrollTop;
+  }
+
+  set scroll(value: number) {
+    if (this.direction === "horizontal") {
+      this.el.scrollLeft = value;
+    } else {
+      this.el.scrollTop = value;
+    }
+  }
+}

package/src/components/selection_input.ts

@@ -0,0 +1,168 @@
+import * as owl from "@odoo/owl";
+import { uuidv4 } from "../helpers/index";
+import { SpreadsheetEnv } from "../types";
+
+const { Component } = owl;
+
+const { xml, css } = owl.tags;
+
+const TEMPLATE = xml/* xml */ `
+  <div class="o-selection">
+    <t t-foreach="ranges" t-as="range" t-key="range.id">
+      <input
+        type="text"
+        spellcheck="false"
+        t-on-change="onInputChanged(range.id)"
+        t-on-focus="focus(range.id)"
+        t-att-value="range.xc"
+        t-attf-style="color: {{range.color || '#000'}}"
+        t-att-class="range.isFocused ? 'o-focused' : ''"
+      />
+      <button
+        class="o-remove-selection"
+        t-if="ranges.length > 1"
+        t-on-click="removeInput(range.id)">✖</button>
+    </t>
+
+    <div class="o-selection-controls">
+      <button
+        t-if="canAddRange"
+        t-on-click="addEmptyInput"
+        class="o-btn o-add-selection">Add another range</button>
+      <button
+        class="o-btn o-selection-ok"
+        t-if="hasFocus"
+        t-on-click="disable">OK</button>
+    </div>
+  </div>`;
+
+const CSS = css/* scss */ `
+  .o-selection {
+    input {
+      display: inline-block;
+      padding: 4px 6px;
+      border-radius: 4px;
+      box-sizing: border-box;
+      border: 1px solid #dadce0;
+      width: 100%;
+    }
+    input:focus {
+      outline: none;
+    }
+    input.o-focused {
+      border-color: #3266ca;
+      border-width: 2px;
+      padding: 3px 5px;
+    }
+    button.o-remove-selection {
+      margin-left: -30px;
+      background: transparent;
+      border: none;
+      color: #333;
+      cursor: pointer;
+    }
+    button.o-btn {
+      margin: 8px 1px;
+      border-radius: 4px;
+      background: transparent;
+      border: 1px solid #dadce0;
+      color: #188038;
+      font-weight: bold;
+      font-size: 14px;
+      height: 25px;
+    }
+  }
+`;
+
+interface Props {
+  ranges: string[];
+  maximumRanges?: number;
+}
+
+/**
+ * This component can be used when the user needs to input some
+ * ranges. He can either input the ranges with the regular DOM `<input/>`
+ * displayed or by selecting zones on the grid.
+ *
+ * A `selection-changed` event is triggered every time the input value
+ * changes.
+ */
+export class SelectionInput extends Component<Props, SpreadsheetEnv> {
+  static template = TEMPLATE;
+  static style = CSS;
+  private id = uuidv4();
+  private previousRanges: string[] = this.props.ranges || [];
+  private getters = this.env.getters;
+  private dispatch = this.env.dispatch;
+
+  get ranges() {
+    return this.getters.getSelectionInput(this.id);
+  }
+
+  get hasFocus(): boolean {
+    return this.ranges.filter((i) => i.isFocused).length > 0;
+  }
+
+  get canAddRange(): boolean {
+    return !this.props.maximumRanges || this.ranges.length < this.props.maximumRanges;
+  }
+
+  mounted() {
+    this.dispatch("ENABLE_NEW_SELECTION_INPUT", {
+      id: this.id,
+      initialRanges: this.props.ranges,
+      maximumRanges: this.props.maximumRanges,
+    });
+  }
+
+  async willUnmount() {
+    this.dispatch("DISABLE_SELECTION_INPUT", { id: this.id });
+  }
+
+  async patched() {
+    const value = this.getters.getSelectionInputValue(this.id);
+    if (this.previousRanges.join() !== value.join()) {
+      this.triggerChange();
+    }
+  }
+
+  private triggerChange() {
+    const ranges = this.getters.getSelectionInputValue(this.id);
+    this.trigger("selection-changed", { ranges });
+    this.previousRanges = ranges;
+  }
+
+  focus(rangeId: string | null) {
+    this.dispatch("FOCUS_RANGE", {
+      id: this.id,
+      rangeId,
+    });
+  }
+
+  addEmptyInput() {
+    this.dispatch("ADD_EMPTY_RANGE", { id: this.id });
+  }
+
+  removeInput(rangeId: string) {
+    this.dispatch("REMOVE_RANGE", { id: this.id, rangeId });
+    this.triggerChange();
+  }
+
+  onInputChanged(rangeId: string, ev: InputEvent) {
+    const target = ev.target as HTMLInputElement;
+    this.dispatch("CHANGE_RANGE", {
+      id: this.id,
+      rangeId,
+      value: target.value,
+    });
+    target.blur();
+    this.triggerChange();
+  }
+
+  disable() {
+    this.dispatch("FOCUS_RANGE", {
+      id: this.id,
+      rangeId: null,
+    });
+  }
+}