@revolist/revogrid 3.1.6 → 3.2.4

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

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

@@ -1 +0,0 @@
-export {};

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-export const RowHeaderRender = s => (__, { rowIndex: i }) => s + i;