@revolist/revogrid 3.2.0 → 3.2.4

package/dist/collection/components/order/revogr-order-editor.js

@@ -1,358 +0,0 @@
-import { Component, Method, Event, Prop, Listen } from '@stencil/core';
-import debounce from 'lodash/debounce';
-import { setItems } from '../../store/dataSource/data.store';
-import { DRAGG_TEXT } from '../../utils/consts';
-import RowOrderService from './rowOrderService';
-export class OrderEditor {
-  constructor() {
-    this.rowMoveFunc = debounce((y) => {
-      const rgRow = this.rowOrderService.move(y, this.getData());
-      if (rgRow !== null) {
-        this.internalRowDrag.emit(rgRow);
-      }
-    }, 5);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Listeners
-  //
-  // --------------------------------------------------------------------------
-  onMouseOut() {
-    this.clearOrder();
-  }
-  /** Action finished inside of the document */
-  onMouseUp(e) {
-    this.endOrder(e);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  async dragStart(e) {
-    e.preventDefault();
-    // extra check if previous ended
-    if (this.moveFunc) {
-      this.clearOrder();
-    }
-    const data = this.getData();
-    const cell = this.rowOrderService.startOrder(e, data);
-    const pos = this.rowOrderService.getRow(e.y, data);
-    const dragStartEvent = this.internalRowDragStart.emit({ cell, text: DRAGG_TEXT, pos, event: e });
-    if (dragStartEvent.defaultPrevented) {
-      return;
-    }
-    this.moveFunc = (e) => this.move(e);
-    document.addEventListener('mousemove', this.moveFunc);
-  }
-  async endOrder(e) {
-    this.rowOrderService.endOrder(e, this.getData());
-    this.clearOrder();
-  }
-  async clearOrder() {
-    this.rowOrderService.clear();
-    document.removeEventListener('mousemove', this.moveFunc);
-    this.moveFunc = null;
-    this.internalRowDragEnd.emit();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Component methods
-  //
-  // --------------------------------------------------------------------------
-  move({ x, y }) {
-    this.internalRowMouseMove.emit({ x, y });
-    this.rowMoveFunc(y);
-  }
-  connectedCallback() {
-    this.rowOrderService = new RowOrderService({ positionChanged: (f, t) => this.onPositionChanged(f, t) });
-  }
-  onPositionChanged(from, to) {
-    const dropEvent = this.initialRowDropped.emit({ from, to });
-    if (dropEvent.defaultPrevented) {
-      return;
-    }
-    const items = [...this.dataStore.get('items')];
-    const toMove = items.splice(from, 1);
-    items.splice(to, 0, ...toMove);
-    setItems(this.dataStore, items);
-  }
-  getData() {
-    return {
-      el: this.parent,
-      rows: this.dimensionRow.state,
-      cols: this.dimensionCol.state,
-    };
-  }
-  static get is() { return "revogr-order-editor"; }
-  static get properties() { return {
-    "parent": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dimensionRow": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<RevoGrid.DimensionSettingsState>",
-        "resolved": "ObservableMap<DimensionSettingsState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dimensionCol": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<RevoGrid.DimensionSettingsState>",
-        "resolved": "ObservableMap<DimensionSettingsState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dataStore": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<DataSourceState<RevoGrid.DataType, RevoGrid.DimensionRows>>",
-        "resolved": "ObservableMap<DataSourceState<DataType, DimensionRows>>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "DataSourceState": {
-            "location": "import",
-            "path": "../../store/dataSource/data.store"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Static stores, not expected to change during component lifetime"
-      }
-    }
-  }; }
-  static get events() { return [{
-      "method": "internalRowDragStart",
-      "name": "internalRowDragStart",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row drag started"
-      },
-      "complexType": {
-        "original": "{\n    cell: Selection.Cell;\n    text: string;\n    pos: RevoGrid.PositionItem;\n    event: MouseEvent;\n  }",
-        "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; }",
-        "references": {
-          "Selection": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "internalRowDragEnd",
-      "name": "internalRowDragEnd",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row drag ended"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "internalRowDrag",
-      "name": "internalRowDrag",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row move"
-      },
-      "complexType": {
-        "original": "RevoGrid.PositionItem",
-        "resolved": "PositionItem",
-        "references": {
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "internalRowMouseMove",
-      "name": "internalRowMouseMove",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row mouse move"
-      },
-      "complexType": {
-        "original": "Selection.Cell",
-        "resolved": "Cell",
-        "references": {
-          "Selection": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "initialRowDropped",
-      "name": "initialRowDropped",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row dragged, new range ready to be applied"
-      },
-      "complexType": {
-        "original": "{ from: number; to: number }",
-        "resolved": "{ from: number; to: number; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "dragStart": {
-      "complexType": {
-        "signature": "(e: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "endOrder": {
-      "complexType": {
-        "signature": "(e: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "clearOrder": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get listeners() { return [{
-      "name": "mouseleave",
-      "method": "onMouseOut",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseup",
-      "method": "onMouseUp",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }]; }
-}

package/dist/collection/components/order/rowOrderService.js

@@ -1,68 +0,0 @@
-import { getItemByPosition } from '../../store/dimension/dimension.helpers';
-export default class RowOrderService {
-  constructor(config) {
-    this.config = config;
-    this.currentCell = null;
-    this.previousRow = null;
-  }
-  /** Drag finished, calculate and apply changes */
-  endOrder(e, data) {
-    if (this.currentCell === null) {
-      return;
-    }
-    const newRow = this.getCell(e, data);
-    // if position changed
-    if (newRow.y !== this.currentCell.y) {
-      // rgRow dragged out table
-      if (newRow.y < 0) {
-        newRow.y = 0;
-      }
-      // rgRow dragged to the top
-      else if (newRow.y < this.currentCell.y) {
-        newRow.y++;
-      }
-      this.config.positionChanged(this.currentCell.y, newRow.y);
-    }
-    this.clear();
-  }
-  /** Drag started, reserve initial cell for farther use */
-  startOrder(e, data) {
-    this.currentCell = this.getCell(e, data);
-    return this.currentCell;
-  }
-  move(y, data) {
-    const rgRow = this.getRow(y, data);
-    // if rgRow same as previous or below range (-1 = 0) do nothing
-    if (this.previousRow === rgRow.itemIndex || rgRow.itemIndex < -1) {
-      return null;
-    }
-    this.previousRow = rgRow.itemIndex;
-    return rgRow;
-  }
-  /** Drag stopped, probably cursor outside of document area */
-  clear() {
-    this.currentCell = null;
-    this.previousRow = null;
-  }
-  /** Calculate cell based on x, y position */
-  getRow(y, { el, rows }) {
-    const { top } = el.getBoundingClientRect();
-    const topRelative = y - top;
-    const rgRow = getItemByPosition(rows, topRelative);
-    const absolutePosition = {
-      itemIndex: rgRow.itemIndex,
-      start: rgRow.start + top,
-      end: rgRow.end + top,
-    };
-    return absolutePosition;
-  }
-  /** Calculate cell based on x, y position */
-  getCell({ x, y }, { el, rows, cols }) {
-    const { top, left } = el.getBoundingClientRect();
-    const topRelative = y - top;
-    const leftRelative = x - left;
-    const rgRow = getItemByPosition(rows, topRelative);
-    const rgCol = getItemByPosition(cols, leftRelative);
-    return { x: rgCol.itemIndex, y: rgRow.itemIndex };
-  }
-}

package/dist/collection/components/overlay/autofill.service.js

@@ -1,182 +0,0 @@
-import debounce from 'lodash/debounce';
-import each from 'lodash/each';
-import slice from 'lodash/slice';
-import { h } from '@stencil/core';
-import { CELL_HANDLER_CLASS } from '../../utils/consts';
-import { getCell, getCurrentCell, getDirectionCoordinate, getLargestAxis, isAfterLast } from './selection.utils';
-import { getRange } from '../../store/selection/selection.helpers';
-import { getSourceItem } from '../../store/dataSource/data.store';
-var AutoFillType;
-(function (AutoFillType) {
-  AutoFillType["selection"] = "Selection";
-  AutoFillType["autoFill"] = "AutoFill";
-})(AutoFillType || (AutoFillType = {}));
-export class AutoFillService {
-  constructor(sv) {
-    this.sv = sv;
-    this.autoFillType = null;
-    this.autoFillInitial = null;
-    this.autoFillStart = null;
-    this.autoFillLast = null;
-  }
-  /**
-   * Render autofill box
-   * @param range
-   * @param selectionFocus
-   */
-  renderAutofill(range, selectionFocus) {
-    let handlerStyle;
-    if (range) {
-      handlerStyle = getCell(range, this.sv.dimensionRow.state, this.sv.dimensionCol.state);
-    }
-    else {
-      handlerStyle = getCell(Object.assign(Object.assign({}, selectionFocus), { x1: selectionFocus.x, y1: selectionFocus.y }), this.sv.dimensionRow.state, this.sv.dimensionCol.state);
-    }
-    return (h("div", { class: CELL_HANDLER_CLASS, style: { left: `${handlerStyle.right}px`, top: `${handlerStyle.bottom}px` }, onMouseDown: (e) => this.selectionStart(e, this.sv.getData(), AutoFillType.autoFill) }));
-  }
-  get isAutoFill() {
-    return !!this.autoFillType;
-  }
-  /** Process mouse move events */
-  selectionMouseMove(e) {
-    // initiate mouse move debounce if not present
-    if (!this.onMouseMoveAutofill) {
-      this.onMouseMoveAutofill = debounce((e, data) => this.doAutofillMouseMove(e, data), 5);
-    }
-    if (this.isAutoFill) {
-      this.onMouseMoveAutofill(e, this.sv.getData());
-    }
-  }
-  getFocus() {
-    let focus = this.sv.selectionStoreService.focused;
-    const range = this.sv.selectionStoreService.ranged;
-    if (range) {
-      focus = { x: range.x, y: range.y };
-    }
-    if (!focus && !range) {
-      return null;
-    }
-    return focus;
-  }
-  /**
-   * Autofill logic:
-   * on mouse move apply based on previous direction (if present)
-   */
-  doAutofillMouseMove({ x, y }, data) {
-    if (!this.autoFillInitial) {
-      return;
-    }
-    let current = getCurrentCell({ x, y }, data);
-    let direction;
-    if (this.autoFillLast) {
-      direction = getDirectionCoordinate(this.autoFillStart, this.autoFillLast);
-    }
-    // first time or direction equal to start(same as first time)
-    if (!this.autoFillLast || !direction) {
-      direction = getLargestAxis(this.autoFillStart, current);
-      if (!this.autoFillLast) {
-        this.autoFillLast = this.autoFillStart;
-      }
-    }
-    // nothing changed
-    if (!direction) {
-      return;
-    }
-    each(direction, (v, k) => {
-      if (v) {
-        current = Object.assign(Object.assign({}, this.autoFillLast), { [k]: current[k] });
-      }
-    });
-    // check if not the latest
-    if (isAfterLast(current, data)) {
-      return;
-    }
-    this.autoFillLast = current;
-    this.sv.setTempRange({
-      area: getRange(this.autoFillInitial, this.autoFillLast),
-      type: this.autoFillType,
-    });
-  }
-  /**
-   * Range selection started
-   * Mode @param type:
-   * Can be triggered from MouseDown selection on element
-   * Or can be triggered on corner square drag
-   */
-  selectionStart(e, data, type = AutoFillType.selection) {
-    /** Get cell by autofill element */
-    const { top, left } = e.target.getBoundingClientRect();
-    this.autoFillInitial = this.getFocus();
-    this.autoFillType = type;
-    this.autoFillStart = getCurrentCell({ x: left, y: top }, data);
-    e.preventDefault();
-  }
-  /** Clear current range selection */
-  clearAutoFillSelection() {
-    // Apply autofill values on mouse up
-    if (this.autoFillInitial) {
-      // Get latest
-      this.autoFillInitial = this.getFocus();
-      if (this.autoFillType === AutoFillType.autoFill) {
-        this.applyRangeWithData(this.autoFillInitial, this.autoFillLast);
-      }
-      else {
-        this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);
-      }
-    }
-    this.autoFillType = null;
-    this.autoFillInitial = null;
-    this.autoFillLast = null;
-    this.autoFillStart = null;
-  }
-  /** Trigger range apply events and handle responses */
-  onRangeApply(data, range) {
-    const models = {};
-    for (let rowIndex in data) {
-      models[rowIndex] = getSourceItem(this.sv.dataStore, parseInt(rowIndex, 10));
-    }
-    const dataEvent = this.sv.internalRangeDataApply({
-      data,
-      models,
-      type: this.sv.dataStore.get('type'),
-    });
-    if (!dataEvent.defaultPrevented) {
-      this.sv.columnService.applyRangeData(data);
-    }
-    this.sv.setRange(range);
-  }
-  /** Apply range and copy data during range application */
-  applyRangeWithData(start, end) {
-    // no changes to apply
-    if (!start || !end) {
-      return;
-    }
-    const oldRange = this.sv.selectionStoreService.ranged;
-    const newRange = getRange(start, end);
-    const columns = [...this.sv.columnService.columns];
-    const rangeData = {
-      type: this.sv.dataStore.get('type'),
-      newData: {},
-      newRange,
-      oldRange,
-      newProps: slice(columns, newRange.x, newRange.x1 + 1).map(v => v.prop),
-      oldProps: slice(columns, oldRange.x, oldRange.x1 + 1).map(v => v.prop),
-    };
-    rangeData.newData = this.sv.columnService.getRangeData(rangeData);
-    const selectionEndEvent = this.sv.internalSelectionChanged(rangeData);
-    if (selectionEndEvent.defaultPrevented) {
-      this.sv.setTempRange(null);
-      return;
-    }
-    this.onRangeApply(rangeData.newData, newRange);
-  }
-  /** Update range selection ony, no data change (mouse selection) */
-  applyRangeOnly(start, end) {
-    // no changes to apply
-    if (!start || !end) {
-      return;
-    }
-    const newRange = getRange(start, end);
-    this.sv.setRange(newRange);
-  }
-}

package/dist/collection/components/overlay/clipboard.service.js

@@ -1,39 +0,0 @@
-import slice from 'lodash/slice';
-import { h } from '@stencil/core';
-import { getRange } from '../../store/selection/selection.helpers';
-export class ClipboardService {
-  constructor(sv) {
-    this.sv = sv;
-  }
-  onCopy(e) {
-    const canCopy = this.sv.internalCopy();
-    if (canCopy.defaultPrevented) {
-      return false;
-    }
-    let focus = this.sv.selectionStoreService.focused;
-    let range = this.sv.selectionStoreService.ranged;
-    let data;
-    if (!range) {
-      range = getRange(focus, focus);
-    }
-    if (range) {
-      const columns = [...this.sv.columnService.columns];
-      const props = slice(columns, range.x, range.x1 + 1).map(v => v.prop);
-      data = this.sv.columnService.copyRangeArray(range, props, this.sv.dataStore);
-    }
-    this.clipboard.doCopy(e, data);
-    return true;
-  }
-  renderClipboard() {
-    return h("revogr-clipboard", { onCopyRegion: e => this.onCopy(e.detail), ref: e => (this.clipboard = e), onPasteRegion: e => this.onPaste(e.detail) });
-  }
-  onPaste(data) {
-    const focus = this.sv.selectionStoreService.focused;
-    const isEditing = this.sv.selectionStoreService.edited !== null;
-    if (!focus || isEditing) {
-      return;
-    }
-    const { changed, range } = this.sv.columnService.getTransformedDataToApply(focus, data);
-    this.sv.onRangeApply(changed, range);
-  }
-}

package/dist/collection/components/overlay/editors/edit.utils.js

@@ -1,5 +0,0 @@
-import { EDIT_INPUT_WR } from '../../../utils/consts';
-// is edit input
-export function isEditInput(el) {
-  return !!(el === null || el === void 0 ? void 0 : el.closest(`.${EDIT_INPUT_WR}`));
-}

package/dist/collection/components/overlay/editors/text.js

@@ -1,35 +0,0 @@
-import { h } from '@stencil/core';
-import { isEnterKey, isTab } from '../../../utils/keyCodes.utils';
-import { timeout } from '../../../utils/utils';
-export class TextEditor {
-  constructor(column, saveCallback) {
-    this.column = column;
-    this.saveCallback = saveCallback;
-    this.element = null;
-    this.editCell = null;
-  }
-  async componentDidRender() {
-    var _a;
-    if (this.editInput) {
-      await timeout();
-      (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }
-  onKeyDown(e) {
-    const isEnter = isEnterKey(e.code);
-    const isKeyTab = isTab(e.code);
-    if ((isKeyTab || isEnter) && e.target && this.saveCallback && !e.isComposing) {
-      // blur is needed to avoid autoscroll
-      this.editInput.blur();
-      // request callback which will close cell after all
-      this.saveCallback(e.target.value, isKeyTab);
-    }
-  }
-  // required
-  render() {
-    var _a;
-    return (h("input", { type: "text", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
-        this.editInput = el;
-      }, onKeyDown: e => this.onKeyDown(e) }));
-  }
-}