@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/src/components/overlay.ts

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

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

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