@revolist/revogrid 3.2.4 → 3.2.5

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

@@ -0,0 +1,361 @@
+/*!
+ * Built by Revolist
+ */
+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

@@ -0,0 +1,71 @@
+/*!
+ * Built by Revolist
+ */
+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

@@ -0,0 +1,185 @@
+/*!
+ * Built by Revolist
+ */
+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

@@ -0,0 +1,42 @@
+/*!
+ * Built by Revolist
+ */
+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

@@ -0,0 +1,8 @@
+/*!
+ * Built by Revolist
+ */
+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

@@ -0,0 +1,38 @@
+/*!
+ * Built by Revolist
+ */
+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) }));
+  }
+}