@revolist/revogrid 3.2.4 → 3.2.7

package/dist/collection/components/revo-grid/viewport.helpers.js

@@ -0,0 +1,14 @@
+/*!
+ * Built by Revolist
+ */
+export const HEADER_SLOT = 'header';
+export const FOOTER_SLOT = 'footer';
+export const CONTENT_SLOT = 'content';
+export const DATA_SLOT = 'data';
+/** Receive last visible in viewport by required type */
+export function getLastCell(data, rowType) {
+  return {
+    x: data.viewports[data.colType].store.get('realCount'),
+    y: data.viewports[rowType].store.get('realCount'),
+  };
+}

package/dist/collection/components/revo-grid/viewport.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * Built by Revolist
+ */
+export {};

package/dist/collection/components/revo-grid/viewport.js

@@ -0,0 +1,21 @@
+/*!
+ * Built by Revolist
+ */
+import { h } from '@stencil/core';
+import OrderRenderer from '../order/orderRenderer';
+export const RevoViewPort = ({ viewports, dimensions, orderRef, nakedClick, registerElement, onScroll }, children) => {
+  const viewPortClick = (e, el) => {
+    if (el === e.target) {
+      nakedClick(e);
+    }
+  };
+  let el;
+  return [
+    h("div", { class: "main-viewport", ref: e => el = e, onClick: e => viewPortClick(e, el) },
+      h("div", { class: "viewports" },
+        children,
+        h("revogr-scroll-virtual", { class: "vertical", dimension: "rgRow", viewportStore: viewports['rgRow'].store, dimensionStore: dimensions['rgRow'].store, ref: el => registerElement(el, 'rowScroll'), onScrollVirtual: e => onScroll(e.detail) }),
+        h(OrderRenderer, { ref: orderRef }))),
+    h("revogr-scroll-virtual", { class: "horizontal", dimension: "rgCol", viewportStore: viewports['rgCol'].store, dimensionStore: dimensions['rgCol'].store, ref: el => registerElement(el, 'colScroll'), onScrollVirtual: e => onScroll(e.detail) }),
+  ];
+};

package/dist/collection/components/revo-grid/viewport.resize.service.js

@@ -0,0 +1,24 @@
+/*!
+ * Built by Revolist
+ */
+import throttle from 'lodash/throttle';
+import { resizeObserver } from '../../utils/resizeObserver';
+export default class GridResizeService {
+  constructor(el, events) {
+    this.events = events;
+    this.resizeObserver = null;
+    this.resize = throttle((e, o) => { var _a; return (_a = this.events) === null || _a === void 0 ? void 0 : _a.resize(e, o); }, 10);
+    this.init(el);
+  }
+  async init(el) {
+    var _a;
+    await resizeObserver();
+    this.resizeObserver = new ResizeObserver(this.resize);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+  }
+  destroy() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.resizeObserver = null;
+  }
+}

package/dist/collection/components/revo-grid/viewport.scrolling.service.js

@@ -0,0 +1,63 @@
+/*!
+ * Built by Revolist
+ */
+export default class GridScrollingService {
+  constructor(setViewport) {
+    this.setViewport = setViewport;
+    this.elements = {};
+  }
+  async onScroll(e, key) {
+    let newEvent;
+    for (let elKey in this.elements) {
+      if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+        if (elKey === key || !e.delta) {
+          continue;
+        }
+        for (let el of this.elements[elKey]) {
+          el.changeScroll && (newEvent = el.changeScroll(e));
+        }
+      }
+      else if (e.dimension === 'rgCol' && elKey === 'headerRow') {
+        continue;
+      }
+      else {
+        for (let el of this.elements[elKey]) {
+          el.setScroll(e);
+        }
+      }
+    }
+    let event = e;
+    if (newEvent) {
+      event = await newEvent;
+    }
+    this.setViewport(event);
+  }
+  isPinnedColumn(key) {
+    return ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+  }
+  registerElements(els) {
+    this.elements = els;
+  }
+  /**
+   * Register new element for farther scroll support
+   * @param el - can be null if holder removed
+   * @param key - element key
+   */
+  registerElement(el, key) {
+    if (!this.elements[key]) {
+      this.elements[key] = [];
+    }
+    // new element added
+    if (el) {
+      this.elements[key].push(el);
+    }
+    else if (this.elements[key]) {
+      // element removed
+      delete this.elements[key];
+    }
+  }
+  unregister() {
+    delete this.elements;
+    this.elements = {};
+  }
+}

package/dist/collection/components/revo-grid/viewport.section.js

@@ -0,0 +1,31 @@
+/*!
+ * Built by Revolist
+ */
+import { h } from '@stencil/core';
+import { UUID } from '../../utils/consts';
+import { DATA_SLOT, HEADER_SLOT } from './viewport.helpers';
+/**
+ * All render based on sections
+ * First we render vertical parts - pinned start, data, pinned end
+ * Per each column we render data collections: headers, pinned top, center data, pinned bottom
+ */
+export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+  const viewPortHtml = [];
+  /** render viewports columns */
+  for (let view of columns) {
+    /** render viewports rows */
+    const dataViews = [
+      h("revogr-header", Object.assign({ viewportCol: view.viewportCol }, view.headerProp, { selectionStore: view.columnSelectionStore, slot: HEADER_SLOT, columnFilter: columnFilter, canResize: resize })),
+    ];
+    view.dataPorts.forEach((data, j) => {
+      const key = view.prop.key + (j + 1);
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+        h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
+        h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
+        h("revogr-focus", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
+      dataViews.push(dataView);
+    });
+    viewPortHtml.push(h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: el => registerElement(el, view.prop.key), onScrollViewport: e => onScroll(e.detail, view.prop.key) }), dataViews));
+  }
+  return viewPortHtml;
+};

package/dist/collection/components/revo-grid/viewport.service.js

@@ -0,0 +1,212 @@
+/*!
+ * Built by Revolist
+ */
+import { EMPTY_INDEX } from '../../services/selection.store.connector';
+import { getSourceItem, getVisibleSourceItem } from '../../store/dataSource/data.store';
+import { columnTypes, rowTypes } from '../../store/storeTypes';
+import { UUID } from '../../utils/consts';
+import { CONTENT_SLOT, FOOTER_SLOT, getLastCell, HEADER_SLOT } from './viewport.helpers';
+import { reduce } from 'lodash';
+export default class ViewportService {
+  constructor(sv, contentHeight) {
+    var _a, _b;
+    this.sv = sv;
+    this.storesByType = {};
+    this.storesXToType = {};
+    this.storesYToType = {};
+    (_a = this.sv.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
+    this.columns = this.getViewportColumnData(contentHeight);
+    (_b = this.sv.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+  }
+  onColumnResize(type, e, store) {
+    var _a;
+    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setDimensionSize(type, e.detail);
+    const changedItems = reduce(e.detail || {}, (r, size, index) => {
+      const item = getSourceItem(store, parseInt(index, 10));
+      if (item) {
+        r[item.prop] = Object.assign(Object.assign({}, item), { size });
+      }
+      return r;
+    }, {});
+    this.sv.resize(changedItems);
+  }
+  /**
+   * Transform data from stores and apply it to different components
+   */
+  getViewportColumnData(contentHeight) {
+    const columns = [];
+    let x = 0; // we increase x only if column present
+    columnTypes.forEach(val => {
+      const colStore = this.sv.columnProvider.stores[val].store;
+      // only columns that have data show
+      if (!colStore.get('items').length) {
+        return;
+      }
+      const column = {
+        colType: val,
+        position: { x, y: 1 },
+        contentHeight,
+        fixWidth: val !== 'rgCol',
+        uuid: `${this.sv.uuid}-${x}`,
+        viewports: this.sv.viewportProvider.stores,
+        dimensions: this.sv.dimensionProvider.stores,
+        rowStores: this.sv.dataProvider.stores,
+        colStore,
+        onHeaderresize: e => this.onColumnResize(val, e, colStore)
+      };
+      if (val === 'rgCol') {
+        column.onResizeViewport = (e) => { var _a; return (_a = this.sv.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, { virtualSize: e.detail.size }); };
+      }
+      const colData = this.gatherColumnData(column);
+      const columnSelectionStore = this.registerCol(colData.position.x, val);
+      // render per each column data collections vertically
+      const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
+        // register selection store for Segment
+        const segmentSelection = this.registerSegment(rgRow.position);
+        segmentSelection.setLastCell(rgRow.lastCell);
+        // register selection store for Row
+        const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
+        const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => this.sv.selectionStoreConnector.registerSection(e), onSetRange: e => segmentSelection.setRangeArea(e.detail), onSetTempRange: e => segmentSelection.setTempArea(e.detail), onFocusCell: e => {
+            segmentSelection.clearFocus();
+            this.sv.selectionStoreConnector.focus(segmentSelection, e.detail);
+          } });
+        r.push(rowDef);
+        return r;
+      }, []);
+      columns.push(Object.assign(Object.assign({}, colData), { columnSelectionStore,
+        dataPorts }));
+      x++;
+    });
+    return columns;
+  }
+  /** register selection store for Segment */
+  registerSegment(position) {
+    return this.sv.selectionStoreConnector.register(position);
+  }
+  /** register selection store for Row */
+  registerRow(y, type) {
+    // link to position
+    this.storesByType[type] = y;
+    this.storesYToType[y] = type;
+    return this.sv.selectionStoreConnector.registerRow(y).store;
+  }
+  /** register selection store for Column */
+  registerCol(x, type) {
+    // link to position
+    this.storesByType[type] = x;
+    this.storesXToType[x] = type;
+    return this.sv.selectionStoreConnector.registerColumn(x).store;
+  }
+  /** Collect Column data */
+  gatherColumnData(data) {
+    const parent = data.uuid;
+    const realSize = data.dimensions[data.colType].store.get('realSize');
+    const prop = {
+      contentWidth: realSize,
+      class: data.colType,
+      [`${UUID}`]: data.uuid,
+      contentHeight: data.contentHeight,
+      key: data.colType,
+      onResizeViewport: data.onResizeViewport,
+    };
+    if (data.fixWidth) {
+      prop.style = { minWidth: `${realSize}px` };
+    }
+    const headerProp = {
+      parent,
+      colData: getVisibleSourceItem(data.colStore),
+      dimensionCol: data.dimensions[data.colType].store,
+      groups: data.colStore.get('groups'),
+      groupingDepth: data.colStore.get('groupingDepth'),
+      onHeaderresize: data.onHeaderresize,
+    };
+    return {
+      prop,
+      position: data.position,
+      headerProp,
+      parent,
+      viewportCol: data.viewports[data.colType].store,
+    };
+  }
+  /** Collect Row data */
+  dataViewPort(data) {
+    const slots = {
+      rowPinStart: HEADER_SLOT,
+      rgRow: CONTENT_SLOT,
+      rowPinEnd: FOOTER_SLOT,
+    };
+    // y position for selection
+    let y = 0;
+    return rowTypes.reduce((r, type) => {
+      // filter out empty sources, we still need to return source to keep slot working
+      const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
+      const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : EMPTY_INDEX }) });
+      r.push(this.dataPartition(rgCol, type, slots[type], type !== 'rgRow'));
+      if (isPresent) {
+        y++;
+      }
+      return r;
+    }, []);
+  }
+  dataPartition(data, type, slot, fixed) {
+    return {
+      colData: data.colStore,
+      viewportCol: data.viewports[data.colType].store,
+      viewportRow: data.viewports[type].store,
+      lastCell: getLastCell(data, type),
+      slot,
+      type,
+      canDrag: !fixed,
+      position: data.position,
+      uuid: `${data.uuid}-${data.position.x}-${data.position.y}`,
+      dataStore: data.rowStores[type].store,
+      dimensionCol: data.dimensions[data.colType].store,
+      dimensionRow: data.dimensions[type].store,
+      style: fixed ? { height: `${data.dimensions[type].store.get('realSize')}px` } : undefined,
+    };
+  }
+  scrollToCell(cell) {
+    for (let key in cell) {
+      const coordinate = cell[key];
+      this.sv.scrollingService.onScroll({ dimension: key === 'x' ? 'rgCol' : 'rgRow', coordinate });
+    }
+  }
+  /**
+   * Clear current grid focus
+   */
+  clearFocused() {
+    this.sv.selectionStoreConnector.clearAll();
+  }
+  clearEdit() {
+    this.sv.selectionStoreConnector.setEdit(false);
+  }
+  getFocused() {
+    const focused = this.sv.selectionStoreConnector.focusedStore;
+    if (!focused) {
+      return null;
+    }
+    const colType = this.storesXToType[focused.position.x];
+    const column = this.sv.columnProvider.getColumn(focused.cell.x, colType);
+    const rowType = this.storesYToType[focused.position.x];
+    const model = this.sv.dataProvider.getModel(focused.cell.x, rowType);
+    return {
+      column,
+      model,
+      cell: focused.cell,
+      colType,
+      rowType
+    };
+  }
+  getSelectedRange() {
+    return this.sv.selectionStoreConnector.selectedRange;
+  }
+  setEdit(rowIndex, colIndex, colType, rowType) {
+    var _a;
+    const stores = this.storesByType;
+    const storeCoordinate = {
+      x: stores[colType],
+      y: stores[rowType],
+    };
+    (_a = this.sv.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(storeCoordinate, { x: colIndex, y: rowIndex });
+  }
+}

package/dist/collection/components/rowHeaders/revogr-row-headers.js

@@ -0,0 +1,213 @@
+/*!
+ * Built by Revolist
+ */
+import { h, Host } from '@stencil/core';
+import { Component, Prop, Event } from '@stencil/core';
+import DataStore from '../../store/dataSource/data.store';
+import ViewportStore from '../../store/viewPort/viewport.store';
+import { UUID } from '../../utils/consts';
+import { RowHeaderRender } from './row-header-render';
+const LETTER_BLOCK_SIZE = 10;
+export class RevogrRowHeaders {
+  render() {
+    var _a;
+    const dataViews = [];
+    const viewport = new ViewportStore();
+    /** render viewports rows */
+    let totalLength = 1;
+    for (let data of this.dataPorts) {
+      const itemCount = data.dataStore.get('items').length;
+      // initiate row data
+      const dataStore = new DataStore(data.type);
+      dataStore.updateData(data.dataStore.get('source'));
+      // initiate column data
+      const colData = new DataStore('colPinStart');
+      const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);
+      colData.updateData([column]);
+      const viewData = Object.assign(Object.assign({}, data), { dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false });
+      dataViews.push(h("revogr-data", Object.assign({}, viewData)));
+      totalLength += itemCount;
+    }
+    const colSize = ((_a = this.rowHeaderColumn) === null || _a === void 0 ? void 0 : _a.size) || (totalLength.toString().length + 1) * LETTER_BLOCK_SIZE;
+    viewport.setViewport({
+      realCount: 1,
+      virtualSize: 0,
+      items: [
+        {
+          size: colSize,
+          start: 0,
+          end: colSize,
+          itemIndex: 0,
+        },
+      ],
+    });
+    const parent = `${this.uiid}-rowHeaders`;
+    const viewportScroll = {
+      [UUID]: parent,
+      contentHeight: this.height,
+      contentWidth: 0,
+      style: { minWidth: `${colSize}px` },
+      ref: (el) => this.elementToScroll.emit(el),
+      onScrollViewport: (e) => this.scrollViewport.emit(e.detail),
+    };
+    const viewportHeader = Object.assign(Object.assign({}, this.headerProp), { colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, parent, slot: 'header' });
+    return h(Host, { class: "rowHeaders", key: "rowHeaders" },
+      h("revogr-viewport-scroll", Object.assign({}, viewportScroll),
+        h("revogr-header", Object.assign({}, viewportHeader)),
+        dataViews));
+  }
+  static get is() { return "revogr-row-headers"; }
+  static get properties() { return {
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false
+    },
+    "dataPorts": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ViewportData[]",
+        "resolved": "ViewportData[]",
+        "references": {
+          "ViewportData": {
+            "location": "import",
+            "path": "../revo-grid/viewport.interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "headerProp": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, any>",
+        "resolved": "{ [x: string]: any; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "uiid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "uiid",
+      "reflect": false
+    },
+    "resize": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "resize",
+      "reflect": false
+    },
+    "rowHeaderColumn": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RevoGrid.RowHeaders",
+        "resolved": "RowHeaders",
+        "references": {
+          "RevoGrid": {
+            "location": "import",
+            "path": "../../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "scrollViewport",
+      "name": "scrollViewport",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "RevoGrid.ViewPortScrollEvent",
+        "resolved": "{ dimension: DimensionType; coordinate: number; delta?: number; }",
+        "references": {
+          "RevoGrid": {
+            "location": "import",
+            "path": "../../interfaces"
+          }
+        }
+      }
+    }, {
+      "method": "elementToScroll",
+      "name": "elementToScroll",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ElementScroll",
+        "resolved": "ElementScroll",
+        "references": {
+          "ElementScroll": {
+            "location": "import",
+            "path": "../revo-grid/viewport.scrolling.service"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/rowHeaders/row-header-render.js

@@ -0,0 +1,4 @@
+/*!
+ * Built by Revolist
+ */
+export const RowHeaderRender = s => (__, { rowIndex: i }) => s + i;