@revolist/revogrid 3.2.4 → 3.2.7

package/dist/collection/plugins/moveColumn/columnOrderHandler.js

@@ -0,0 +1,63 @@
+/*!
+ * Built by Revolist
+ */
+import { h } from '@stencil/core';
+export class ColumnOrderHandler {
+  constructor() {
+    this.offset = 0;
+  }
+  renderAutoscroll(_, parent) {
+    if (!parent) {
+      return;
+    }
+    this.autoscrollEl = document.createElement('div');
+    this.autoscrollEl.classList.add('drag-auto-scroll-y');
+    parent.appendChild(this.autoscrollEl);
+  }
+  autoscroll(pos, dataContainerSize, direction = 'translateX') {
+    if (!this.autoscrollEl) {
+      return;
+    }
+    const helperOffset = 10;
+    // calculate current y position inside of the grid active holder
+    // 3 - size of element + border
+    const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
+    this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
+    this.autoscrollEl.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }
+  start(e, { el, gridRect, elScroll }, dir = 'left') {
+    const scrollContainerRect = elScroll.getBoundingClientRect();
+    if (scrollContainerRect) {
+      this.offset = scrollContainerRect[dir] - gridRect[dir];
+    }
+    this.renderAutoscroll(e, el);
+  }
+  stop() {
+    var _a;
+    if (this.element) {
+      this.element.setAttribute('hidden', '');
+    }
+    this.offset = 0;
+    (_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
+    this.autoscrollEl = undefined;
+  }
+  showHandler(pos, size, direction = 'translateX') {
+    if (!this.element) {
+      return;
+    }
+    // do not allow overcross top of the scrollable area, header excluded
+    if (this.offset) {
+      pos = Math.max(pos, this.offset);
+    }
+    // can not be bigger then grid end
+    pos = Math.min(pos, size);
+    this.element.style.transform = `${direction}(${pos}px)`;
+    this.element.hidden = false;
+  }
+  render() {
+    return h("div", { class: "drag-position-y", hidden: true, ref: (el) => (this.element = el) });
+  }
+}

package/dist/collection/plugins/sorting/sorting.plugin.js

@@ -0,0 +1,184 @@
+/*!
+ * Built by Revolist
+ */
+import size from 'lodash/size';
+import { setStore } from '../../utils/store.utils';
+import ColumnDataProvider from '../../services/column.data.provider';
+import BasePlugin from '../basePlugin';
+/**
+ * lifecycle
+ * 1) @event beforesorting - sorting just started, nothing happened yet
+ * 2) @metod updateColumnSorting - column sorting icon applied to grid and column get updated, data still untiuched
+ * 3) @event beforesortingapply - before we applied sorting data to data source, you can prevent data apply from here
+ * 4) @event afterSortingApply - sorting applied, just finished event
+ *
+ * If you prevent event it'll not reach farther steps
+ */
+export default class SortingPlugin extends BasePlugin {
+  constructor(revogrid) {
+    super(revogrid);
+    this.revogrid = revogrid;
+    this.sorting = null;
+    this.sortingFunc = null;
+    const beforesourceset = ({ detail }) => {
+      if (this.hasSorting) {
+        // is sorting allowed
+        const event = this.emit('beforesourcesortingapply');
+        // sorting prevented
+        if (event.defaultPrevented) {
+          return;
+        }
+      }
+      const data = this.setData(detail.source, detail.type);
+      if (data) {
+        detail.source = data;
+      }
+    };
+    const aftercolumnsset = async ({ detail: { order } }) => {
+      const columns = await this.revogrid.getColumns();
+      const sortingFunc = {};
+      for (let prop in order) {
+        const column = ColumnDataProvider.getColumnByProp(columns, prop);
+        const cmp = (column === null || column === void 0 ? void 0 : column.cellCompare) || this.defaultCellCompare;
+        sortingFunc[prop] = order[prop] == 'desc' ? this.descCellCompare(cmp) : cmp;
+      }
+      this.sort(order, sortingFunc);
+    };
+    const headerclick = async (e) => {
+      var _a, _b;
+      if (e.defaultPrevented) {
+        return;
+      }
+      if (!e.detail.column.sortable) {
+        return;
+      }
+      this.headerclick(e.detail.column, e.detail.index, (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.shiftKey);
+    };
+    this.addEventListener('beforesourceset', beforesourceset);
+    this.addEventListener('aftercolumnsset', aftercolumnsset);
+    this.addEventListener('initialHeaderClick', headerclick);
+  }
+  get hasSorting() {
+    return !!this.sorting;
+  }
+  async headerclick(column, index, additive) {
+    let order = this.getNextOrder(column.order);
+    const beforeEvent = this.emit('beforesorting', { column, order, additive });
+    if (beforeEvent.defaultPrevented) {
+      return;
+    }
+    order = beforeEvent.detail.order;
+    const newCol = await this.revogrid.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
+    // apply sort data
+    const beforeApplyEvent = this.emit('beforesortingapply', { column: newCol, order, additive });
+    if (beforeApplyEvent.defaultPrevented) {
+      return;
+    }
+    order = beforeApplyEvent.detail.order;
+    const cellCmp = (column === null || column === void 0 ? void 0 : column.cellCompare) || this.defaultCellCompare;
+    const cmp = order == 'asc' ? cellCmp : order == 'desc' ? this.descCellCompare(cellCmp) : undefined;
+    if (additive && this.sorting) {
+      const sorting = {};
+      const sortingFunc = {};
+      Object.assign(sorting, this.sorting);
+      Object.assign(sortingFunc, this.sortingFunc);
+      if (column.prop in sorting && size(sorting) > 1 && order === undefined) {
+        delete sorting[column.prop];
+        delete sortingFunc[column.prop];
+      }
+      else {
+        sorting[column.prop] = order;
+        sortingFunc[column.prop] = cmp;
+      }
+      this.sort(sorting, sortingFunc);
+    }
+    else {
+      this.sort({ [column.prop]: order }, { [column.prop]: cmp });
+    }
+  }
+  setData(data, type) {
+    // sorting available for rgRow type only
+    if (type === 'rgRow' && this.sortingFunc) {
+      return this.sortItems(data, this.sortingFunc);
+    }
+  }
+  /**
+   * Sorting apply, available for rgRow type only
+   * @param sorting - per column sorting
+   * @param data - this.stores['rgRow'].store.get('source')
+   */
+  async sort(sorting, sortingFunc) {
+    if (!size(sorting)) {
+      this.sorting = null;
+      this.sortingFunc = null;
+      return;
+    }
+    this.sorting = sorting;
+    this.sortingFunc = sortingFunc;
+    const store = await this.revogrid.getSourceStore();
+    const source = store.get('source');
+    const proxyItems = this.sortIndexByItems([...store.get('proxyItems')], source, this.sortingFunc);
+    setStore(store, {
+      proxyItems,
+      source: [...source],
+    });
+    this.emit('afterSortingApply');
+  }
+  defaultCellCompare(prop, a, b) {
+    var _a, _b;
+    const av = (_a = a[prop]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+    const bv = (_b = b[prop]) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase();
+    return av == bv ? 0 : av > bv ? 1 : -1;
+  }
+  descCellCompare(cmp) {
+    return (prop, a, b) => { return -1 * cmp(prop, a, b); };
+  }
+  sortIndexByItems(indexes, source, sortingFunc) {
+    // TODO - is there a situation where multiple kvps in the `sorting` object would cause this to break?
+    for (let prop in sortingFunc) {
+      if (typeof sortingFunc[prop] === 'undefined') {
+        // Unsort indexes
+        return [...Array(indexes.length).keys()];
+      }
+    }
+    return indexes.sort((a, b) => {
+      let sorted = 0;
+      for (let prop in sortingFunc) {
+        const cmp = sortingFunc[prop];
+        const itemA = source[a];
+        const itemB = source[b];
+        sorted = cmp(prop, itemA, itemB);
+        if (sorted) {
+          break;
+        }
+      }
+      return sorted;
+    });
+  }
+  sortItems(source, sortingFunc) {
+    return source.sort((a, b) => {
+      let sorted = 0;
+      for (let prop in sortingFunc) {
+        const cmp = sortingFunc[prop];
+        if (!cmp) {
+          continue;
+        }
+        sorted = cmp(prop, a, b);
+        if (sorted) {
+          break;
+        }
+      }
+      return sorted;
+    });
+  }
+  getNextOrder(currentOrder) {
+    switch (currentOrder) {
+      case undefined:
+        return 'asc';
+      case 'asc':
+        return 'desc';
+      case 'desc':
+        return undefined;
+    }
+  }
+}

package/dist/collection/plugins/sorting/sorting.sign.js

@@ -0,0 +1,9 @@
+/*!
+ * Built by Revolist
+ */
+import { h } from '@stencil/core';
+export const FILTER_BUTTON_CLASS = 'rv-filter';
+export const FILTER_BUTTON_ACTIVE = 'active';
+export const SortingSign = ({ column }) => {
+  return h("i", { class: column.order });
+};

package/dist/collection/plugins/stretchPlugin.js

@@ -0,0 +1,71 @@
+/*!
+ * Built by Revolist
+ */
+import { each } from 'lodash';
+import { getScrollbarWidth } from '../utils/utils';
+import BasePlugin from './basePlugin';
+export default class StretchColumn extends BasePlugin {
+  constructor(revogrid, dimensionProvider) {
+    super(revogrid);
+    this.dimensionProvider = dimensionProvider;
+    this.stretchedColumn = null;
+    this.scrollSize = getScrollbarWidth(document);
+    const beforecolumnapplied = ({ detail: { columns } }) => this.applyStretch(columns);
+    this.addEventListener('beforecolumnapplied', beforecolumnapplied);
+  }
+  setScroll({ type, hasScroll }) {
+    var _a;
+    if (type === 'rgRow' && this.stretchedColumn && ((_a = this.stretchedColumn) === null || _a === void 0 ? void 0 : _a.initialSize) === this.stretchedColumn.size) {
+      if (hasScroll) {
+        this.stretchedColumn.size -= this.scrollSize;
+        this.apply();
+        this.dropChanges();
+      }
+    }
+  }
+  activateChanges() {
+    const setScroll = ({ detail }) => this.setScroll(detail);
+    this.addEventListener('scrollchange', setScroll);
+  }
+  dropChanges() {
+    this.stretchedColumn = null;
+    this.removeEventListener('scrollchange');
+  }
+  apply() {
+    if (!this.stretchedColumn) {
+      return;
+    }
+    const type = 'rgCol';
+    this.dimensionProvider.setDimensionSize(type, { [this.stretchedColumn.index]: this.stretchedColumn.size });
+  }
+  applyStretch(columns) {
+    this.dropChanges();
+    let sizeDifference = this.revogrid.clientWidth - 1;
+    each(columns, (_c, type) => {
+      const realSize = this.dimensionProvider.stores[type].store.get('realSize');
+      sizeDifference -= realSize;
+    });
+    if (sizeDifference > 0) {
+      // currently plugin accepts last column
+      const index = columns.rgCol.length - 1;
+      const last = columns.rgCol[index];
+      // has column
+      // no auto size applied
+      // size for column shouldn't be defined
+      const colSize = (last === null || last === void 0 ? void 0 : last.size) || this.revogrid.colSize || 0;
+      const size = sizeDifference + colSize - 1;
+      if (last && !last.autoSize && (colSize < size)) {
+        this.stretchedColumn = {
+          initialSize: size,
+          index,
+          size
+        };
+        this.apply();
+        this.activateChanges();
+      }
+    }
+  }
+}
+export function isStretchPlugin(plugin) {
+  return !!plugin.applyStretch;
+}

package/dist/collection/plugins/trimmed/trimmed.plugin.js

@@ -0,0 +1,35 @@
+/*!
+ * Built by Revolist
+ */
+/**
+ * Hide items from main collection
+ * But keep them in store
+ */
+export const trimmedPlugin = (store) => ({
+  set(k, newVal) {
+    switch (k) {
+      case 'trimmed':
+        const proxy = store.get('proxyItems');
+        const trimmed = gatherTrimmedItems(newVal);
+        const newItems = proxy.reduce((result, v) => {
+          // check if present in new trimmed remove from items (filter)
+          if (!trimmed[v]) {
+            result.push(v);
+          }
+          return result;
+        }, []);
+        store.set('items', newItems);
+        break;
+    }
+  },
+});
+export function gatherTrimmedItems(trimmedItems) {
+  const trimmed = {};
+  for (let trimmedKey in trimmedItems) {
+    // trimmed overweight not trimmed
+    for (let t in trimmedItems[trimmedKey]) {
+      trimmed[t] = trimmed[t] || trimmedItems[trimmedKey][t];
+    }
+  }
+  return trimmed;
+}

package/dist/collection/services/cell.helpers.js

@@ -0,0 +1,10 @@
+/*!
+ * Built by Revolist
+ */
+import { DATA_COL, DATA_ROW } from '../utils/consts';
+export function getCell(cell) {
+  return {
+    x: parseInt(cell.getAttribute(DATA_COL), 10),
+    y: parseInt(cell.getAttribute(DATA_ROW), 10),
+  };
+}

package/dist/collection/services/column.data.provider.js

@@ -0,0 +1,191 @@
+/*!
+ * Built by Revolist
+ */
+import reduce from 'lodash/reduce';
+import each from 'lodash/each';
+import find from 'lodash/find';
+import DataStore, { getSourceItem, getSourceItemVirtualIndexByProp, setSourceByVirtualIndex } from '../store/dataSource/data.store';
+import { columnTypes } from '../store/storeTypes';
+import GroupingColumnPlugin from '../plugins/groupingColumn/grouping.col.plugin';
+export default class ColumnDataProvider {
+  constructor() {
+    this.sorting = null;
+    this.dataSources = reduce(columnTypes, (sources, k) => {
+      sources[k] = new DataStore(k);
+      return sources;
+    }, {});
+  }
+  get order() {
+    return reduce(this.sorting, (r, c, prop) => {
+      r[prop] = c.order;
+      return r;
+    }, {});
+  }
+  get stores() {
+    return this.dataSources;
+  }
+  column(c, pin) {
+    return this.getColumn(c, pin || 'rgCol');
+  }
+  getColumn(virtualIndex, type) {
+    return getSourceItem(this.dataSources[type].store, virtualIndex);
+  }
+  getRawColumns() {
+    return reduce(this.dataSources, (result, item, type) => {
+      result[type] = item.store.get('source');
+      return result;
+    }, {
+      rgCol: [],
+      colPinStart: [],
+      colPinEnd: []
+    });
+  }
+  getColumns(type = 'all') {
+    if (type !== 'all') {
+      return this.dataSources[type].store.get('source');
+    }
+    return columnTypes.reduce((r, t) => {
+      r.push(...this.dataSources[t].store.get('source'));
+      return r;
+    }, []);
+  }
+  getColumnIndexByProp(prop, type) {
+    return getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
+  }
+  getColumnByProp(prop, type) {
+    const items = this.dataSources[type].store.get('source');
+    return find(items, { prop });
+  }
+  refreshByType(type) {
+    this.dataSources[type].refresh();
+  }
+  setColumns(data) {
+    each(columnTypes, k => {
+      // set columns data
+      this.dataSources[k].updateData(data.columns[k], {
+        // max depth level
+        depth: data.maxLevel,
+        // groups
+        groups: reduce(data.columnGrouping[k], (res, g) => {
+          if (!res[g.level]) {
+            res[g.level] = [];
+          }
+          res[g.level].push(g);
+          return res;
+        }, {}),
+      });
+    });
+    this.sorting = data.sort;
+    return data;
+  }
+  updateColumns(cols) {
+    // collect column by type and propert
+    const columnByKey = cols.reduce((res, c) => {
+      const type = ColumnDataProvider.getColumnType(c);
+      if (!res[type]) {
+        res[type] = {};
+      }
+      res[type][c.prop] = c;
+      return res;
+    }, {});
+    // find indexes in source
+    const colByIndex = {};
+    each(columnByKey, (colsToUpdate, type) => {
+      const items = this.dataSources[type].store.get('source');
+      colByIndex[type] = items.reduce((result, rgCol, index) => {
+        const colToUpdateIfExists = colsToUpdate[rgCol.prop];
+        if (colToUpdateIfExists) {
+          result[index] = colToUpdateIfExists;
+        }
+        return result;
+      }, {});
+    });
+    each(colByIndex, (colsToUpdate, type) => setSourceByVirtualIndex(this.dataSources[type].store, colsToUpdate));
+  }
+  updateColumn(column, index) {
+    const type = ColumnDataProvider.getColumnType(column);
+    setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
+  }
+  updateColumnSorting(column, index, sorting, additive) {
+    if (!additive) {
+      this.clearSorting();
+    }
+    column.order = sorting;
+    this.sorting[column.prop] = column;
+    this.updateColumn(column, index);
+    return column;
+  }
+  clearSorting() {
+    const types = reduce(this.sorting, (r, c) => {
+      const k = ColumnDataProvider.getColumnType(c);
+      r[k] = true;
+      return r;
+    }, {});
+    each(types, (_, type) => {
+      const cols = this.dataSources[type].store.get('source');
+      each(cols, (c) => (c.order = undefined));
+      this.dataSources[type].setData({ source: [...cols] });
+    });
+    this.sorting = {};
+  }
+  static getSizes(cols) {
+    return reduce(cols, (res, c, i) => {
+      if (c.size) {
+        res[i] = c.size;
+      }
+      return res;
+    }, {});
+  }
+  static getColumnByProp(columns, prop) {
+    return find(columns, c => {
+      if (GroupingColumnPlugin.isColGrouping(c)) {
+        return ColumnDataProvider.getColumnByProp(c.children, prop);
+      }
+      return c.prop === prop;
+    });
+  }
+  // columns processing
+  static getColumns(columns, level = 0, types) {
+    return reduce(columns, (res, colData) => {
+      /** Grouped column */
+      if (GroupingColumnPlugin.isColGrouping(colData)) {
+        return GroupingColumnPlugin.gatherGroup(res, colData, ColumnDataProvider.getColumns(colData.children, level + 1, types), level);
+      }
+      /** Regular column */
+      const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
+      // not pin
+      if (!regularColumn.pin) {
+        res.columns.rgCol.push(regularColumn);
+        // pin
+      }
+      else {
+        res.columns[regularColumn.pin].push(regularColumn);
+      }
+      if (regularColumn.order) {
+        res.sort[regularColumn.prop] = regularColumn;
+      }
+      // trigger setup hook if present
+      regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
+      return res;
+    }, {
+      columns: {
+        rgCol: [],
+        colPinStart: [],
+        colPinEnd: [],
+      },
+      columnGrouping: {
+        rgCol: [],
+        colPinStart: [],
+        colPinEnd: [],
+      },
+      maxLevel: level,
+      sort: {},
+    });
+  }
+  static getColumnType(rgCol) {
+    if (rgCol.pin) {
+      return rgCol.pin;
+    }
+    return 'rgCol';
+  }
+}

package/dist/collection/services/data.provider.js

@@ -0,0 +1,50 @@
+/*!
+ * Built by Revolist
+ */
+import reduce from 'lodash/reduce';
+import DataStore, { getSourceItem, getVisibleSourceItem, setSourceByVirtualIndex } from '../store/dataSource/data.store';
+import { isRowType, rowTypes } from '../store/storeTypes';
+export class DataProvider {
+  constructor(dimensionProvider) {
+    this.dimensionProvider = dimensionProvider;
+    this.stores = reduce(rowTypes, (sources, k) => {
+      sources[k] = new DataStore(k);
+      return sources;
+    }, {});
+  }
+  setData(data, type = 'rgRow', grouping, silent = false) {
+    // set rgRow data
+    this.stores[type].updateData([...data], grouping, silent);
+    this.dimensionProvider.setData(data, type, type !== 'rgRow');
+    return data;
+  }
+  getModel(virtualIndex, type = 'rgRow') {
+    const store = this.stores[type].store;
+    return getSourceItem(store, virtualIndex);
+  }
+  setCellData({ type, rowIndex, prop, val }) {
+    const model = this.getModel(rowIndex, type);
+    model[prop] = val;
+    setSourceByVirtualIndex(this.stores[type].store, { [rowIndex]: model });
+  }
+  refresh(type = 'all') {
+    if (isRowType(type)) {
+      this.refreshItems(type);
+    }
+    rowTypes.forEach((t) => this.refreshItems(t));
+  }
+  refreshItems(type = 'rgRow') {
+    const items = this.stores[type].store.get('items');
+    this.stores[type].setData({ items: [...items] });
+  }
+  setGrouping({ depth }, type = 'rgRow') {
+    this.stores[type].setData({ groupingDepth: depth });
+  }
+  setTrimmed(trimmed, type = 'rgRow') {
+    const store = this.stores[type];
+    store.addTrimmed(trimmed);
+    if (type === 'rgRow') {
+      this.dimensionProvider.setData(getVisibleSourceItem(store.store), type);
+    }
+  }
+}

package/dist/collection/services/dimension.provider.js

@@ -0,0 +1,81 @@
+/*!
+ * Built by Revolist
+ */
+import reduce from 'lodash/reduce';
+import { columnTypes, rowTypes } from '../store/storeTypes';
+import DimensionStore from '../store/dimension/dimension.store';
+import { getItemByIndex } from '../store/dimension/dimension.helpers';
+export default class DimensionProvider {
+  constructor(viewports) {
+    this.viewports = viewports;
+    this.stores = reduce([...rowTypes, ...columnTypes], (sources, k) => {
+      sources[k] = new DimensionStore();
+      return sources;
+    }, {});
+  }
+  setDimensionSize(dimensionType, sizes) {
+    this.stores[dimensionType].setDimensionSize(sizes);
+    this.viewports.stores[dimensionType].setViewPortDimension(sizes);
+  }
+  setRealSize(realCount, type) {
+    this.viewports.stores[type].setViewport({ realCount });
+    this.stores[type].setRealSize(realCount);
+  }
+  /**
+   * Sets dimension data and view port coordinate
+   * @param items - data/column items
+   * @param type - dimension type
+   */
+  setData(items, type, noVirtual = false) {
+    this.setRealSize(items.length, type);
+    if (noVirtual) {
+      this.setNoVirtual(type);
+    }
+    this.setViewPortCoordinate({
+      coordinate: this.viewports.stores[type].store.get('lastCoordinate'),
+      type,
+    });
+  }
+  setNoVirtual(type) {
+    const dimension = this.stores[type].getCurrentState();
+    this.viewports.stores[type].setViewport({ virtualSize: dimension.realSize });
+  }
+  drop() {
+    for (let type of columnTypes) {
+      this.stores[type].drop();
+    }
+  }
+  setColumns(type, sizes, noVirtual = false) {
+    this.stores[type].setDimensionSize(sizes);
+    if (noVirtual) {
+      this.setNoVirtual(type);
+    }
+    this.setViewPortCoordinate({
+      coordinate: this.viewports.stores[type].store.get('lastCoordinate'),
+      type,
+    });
+  }
+  setViewPortCoordinate({ coordinate, type }) {
+    const dimension = this.stores[type].getCurrentState();
+    this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension);
+  }
+  getViewPortPos(e) {
+    const dimension = this.stores[e.dimension].getCurrentState();
+    const item = getItemByIndex(dimension, e.coordinate);
+    return item.start;
+  }
+  setSettings(data, dimensionType) {
+    let stores = [];
+    switch (dimensionType) {
+      case 'rgCol':
+        stores = columnTypes;
+        break;
+      case 'rgRow':
+        stores = rowTypes;
+        break;
+    }
+    for (let s of stores) {
+      this.stores[s].setStore(data);
+    }
+  }
+}