@revolist/revogrid 3.2.4 → 3.2.7

package/dist/{revo-grid/localScrollService-e9b73323.js → collection/services/localScrollService.js}

@@ -1,15 +1,14 @@
 /*!
  * Built by Revolist
  */
-import { s as scaleValue } from './utils-2c3b3857.js';
-
+import { scaleValue } from '../utils/utils';
 const initialParams = {
   contentSize: 0,
   clientSize: 0,
   virtualSize: 0,
   maxSize: 0,
 };
-class LocalScrollService {
+export default class LocalScrollService {
   constructor(cfg) {
     this.cfg = cfg;
     this.preventArtificialScroll = { rgRow: null, rgCol: null };
@@ -82,5 +81,3 @@ class LocalScrollService {
     return scaleValue(pos, to, from);
   }
 }
-
-export { LocalScrollService as L };

package/dist/collection/services/resizable.directive.js

@@ -0,0 +1,255 @@
+/*!
+ * Built by Revolist
+ */
+import { h } from '@stencil/core';
+var ResizeEvents;
+(function (ResizeEvents) {
+  ResizeEvents["start"] = "resize:start";
+  ResizeEvents["move"] = "resize:move";
+  ResizeEvents["end"] = "resize:end";
+})(ResizeEvents || (ResizeEvents = {}));
+const RESIZE_MASK = {
+  'resizable-r': { bit: 0b0001, cursor: 'ew-resize' },
+  'resizable-rb': { bit: 0b0011, cursor: 'se-resize' },
+  'resizable-b': { bit: 0b0010, cursor: 's-resize' },
+  'resizable-lb': { bit: 0b0110, cursor: 'sw-resize' },
+  'resizable-l': { bit: 0b0100, cursor: 'w-resize' },
+  'resizable-lt': { bit: 0b1100, cursor: 'nw-resize' },
+  'resizable-t': { bit: 0b1000, cursor: 'n-resize' },
+  'resizable-rt': { bit: 0b1001, cursor: 'ne-resize' },
+};
+const DISABLE_MASK = {
+  l: 0b0001,
+  t: 0b0010,
+  w: 0b0100,
+  h: 0b1000,
+};
+const defaultProps = (props) => {
+  return Object.assign(Object.assign({}, props), { fitParent: props.fitParent || false, active: props.active || [], disableAttributes: props.disableAttributes || [], minWidth: props.minWidth || 0, minHeight: props.minHeight || 0 });
+};
+export class ResizeDirective {
+  constructor(initialProps, $event) {
+    this.initialProps = initialProps;
+    this.$event = $event;
+    this.mouseX = 0;
+    this.mouseY = 0;
+    this.width = 0;
+    this.height = 0;
+    this.changeX = 0;
+    this.changeY = 0;
+    this.disableCalcMap = 0b1111;
+    this.props = defaultProps(initialProps);
+    this.mouseMoveFunc = this.handleMove.bind(this);
+    this.mouseUpFunc = this.handleUp.bind(this);
+    this.minW = this.props.minWidth;
+    this.minH = this.props.minHeight;
+    this.maxW = this.props.maxWidth;
+    this.maxH = this.props.maxHeight;
+    this.parent = { width: 0, height: 0 };
+    this.resizeState = 0;
+  }
+  set($el) {
+    this.$el = $el;
+    this.props.disableAttributes.forEach(attr => {
+      switch (attr) {
+        case 'l':
+          this.disableCalcMap &= ~DISABLE_MASK.l;
+          break;
+        case 't':
+          this.disableCalcMap &= ~DISABLE_MASK.t;
+          break;
+        case 'w':
+          this.disableCalcMap &= ~DISABLE_MASK.w;
+          break;
+        case 'h':
+          this.disableCalcMap &= ~DISABLE_MASK.h;
+      }
+    });
+  }
+  emitEvent(eventName, additionalOptions) {
+    if (!this.$event) {
+      return;
+    }
+    this.$event(Object.assign({ eventName, width: this.width + this.changeX, height: this.height + this.changeY, changedX: this.changeX, changedY: this.changeY }, additionalOptions));
+  }
+  static isTouchEvent(e) {
+    var _a;
+    const event = e;
+    return ((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length) >= 0;
+  }
+  handleMove(event) {
+    if (!this.resizeState) {
+      return;
+    }
+    let eventY, eventX;
+    if (ResizeDirective.isTouchEvent(event)) {
+      eventY = event.touches[0].clientY;
+      eventX = event.touches[0].clientX;
+    }
+    else {
+      eventY = event.clientY;
+      eventX = event.clientX;
+    }
+    let isX = this.resizeState & RESIZE_MASK['resizable-r'].bit || this.resizeState & RESIZE_MASK['resizable-l'].bit;
+    let isY = this.resizeState & RESIZE_MASK['resizable-t'].bit || this.resizeState & RESIZE_MASK['resizable-b'].bit;
+    if (isY && this.disableCalcMap & DISABLE_MASK.h) {
+      let diffY = eventY - this.mouseY;
+      let changedY = this.changeY + diffY;
+      const newHeight = this.height + changedY;
+      // if overcrossed min height
+      if (newHeight < this.minH) {
+        changedY = -(this.height - this.minH);
+      }
+      // if overcrossed max heiht
+      if (this.maxH && newHeight > this.maxH) {
+        changedY = this.maxH - this.height;
+      }
+      this.changeY = changedY;
+      this.mouseY = eventY;
+      if (this.activeResizer) {
+        this.activeResizer.style.bottom = `${-this.changeY}px`;
+      }
+    }
+    if (isX && this.disableCalcMap & DISABLE_MASK.w) {
+      let diffX = eventX - this.mouseX;
+      let changedX = this.changeX + diffX;
+      const newWidth = this.width + changedX;
+      // if overcrossed min width
+      if (newWidth < this.minW) {
+        changedX = -(this.width - this.minW);
+      }
+      // if overcrossed max width
+      if (this.maxW && newWidth > this.maxW) {
+        changedX = this.maxW - this.width;
+      }
+      this.changeX = changedX;
+      this.mouseX = eventX;
+      if (this.activeResizer) {
+        this.activeResizer.style.right = `${-this.changeX}px`;
+      }
+    }
+    this.emitEvent(ResizeEvents.move);
+  }
+  handleDown(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    // stop other events if resize in progress
+    event.preventDefault();
+    this.dropInitial();
+    for (let elClass in RESIZE_MASK) {
+      const target = event.target;
+      if (this.$el.contains(target) && (target === null || target === void 0 ? void 0 : target.classList.contains(elClass))) {
+        document.body.style.cursor = RESIZE_MASK[elClass].cursor;
+        if (ResizeDirective.isTouchEvent(event)) {
+          this.setInitials(event.touches[0], target);
+        }
+        else {
+          event.preventDefault && event.preventDefault();
+          this.setInitials(event, target);
+        }
+        this.resizeState = RESIZE_MASK[elClass].bit;
+        const eventName = ResizeEvents.start;
+        this.emitEvent(eventName);
+        break;
+      }
+    }
+    this.bindMove();
+  }
+  handleUp(e) {
+    e.preventDefault();
+    if (this.resizeState !== 0) {
+      this.resizeState = 0;
+      document.body.style.cursor = '';
+      const eventName = ResizeEvents.end;
+      this.emitEvent(eventName);
+    }
+    this.dropInitial();
+    this.unbindMove();
+  }
+  setInitials({ clientX, clientY }, target) {
+    const computedStyle = getComputedStyle(this.$el);
+    this.$el.classList.add('active');
+    this.activeResizer = target;
+    if (this.disableCalcMap & DISABLE_MASK.w) {
+      this.mouseX = clientX;
+      this.width = this.$el.clientWidth;
+      this.parent.width = this.$el.parentElement.clientWidth;
+      // min width
+      const minPaddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+      this.minW = Math.max(minPaddingX, this.initialProps.minWidth || 0);
+      // max width
+      if (this.initialProps.maxWidth) {
+        this.maxW = Math.max(this.width, this.initialProps.maxWidth);
+      }
+    }
+    if (this.disableCalcMap & DISABLE_MASK.h) {
+      this.mouseY = clientY;
+      this.height = this.$el.clientHeight;
+      this.parent.height = this.$el.parentElement.clientHeight;
+      // min height
+      const minPaddingY = parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+      this.minH = Math.max(minPaddingY, this.initialProps.minHeight || 0);
+      // max height
+      if (this.initialProps.maxHeight) {
+        this.maxH = Math.max(this.height, this.initialProps.maxHeight);
+      }
+    }
+  }
+  dropInitial() {
+    this.changeX = this.changeY = this.minW = this.minH;
+    this.width = this.height = 0;
+    if (this.activeResizer) {
+      this.activeResizer.removeAttribute('style');
+    }
+    this.$el.classList.remove('active');
+    this.activeResizer = null;
+  }
+  bindMove() {
+    document.documentElement.addEventListener('mouseup', this.mouseUpFunc, true);
+    document.documentElement.addEventListener('touchend', this.mouseUpFunc, true);
+    document.documentElement.addEventListener('mousemove', this.mouseMoveFunc, true);
+    document.documentElement.addEventListener('touchmove', this.mouseMoveFunc, true);
+    document.documentElement.addEventListener('mouseleave', this.mouseUpFunc);
+  }
+  unbindMove() {
+    document.documentElement.removeEventListener('mouseup', this.mouseUpFunc, true);
+    document.documentElement.removeEventListener('touchend', this.mouseUpFunc, true);
+    document.documentElement.removeEventListener('mousemove', this.mouseMoveFunc, true);
+    document.documentElement.removeEventListener('touchmove', this.mouseMoveFunc, true);
+    document.documentElement.removeEventListener('mouseleave', this.mouseUpFunc);
+  }
+}
+export const ResizableElement = (props, children) => {
+  const resizeEls = [];
+  const directive = (props.canResize &&
+    new ResizeDirective(props, e => {
+      if (e.eventName === ResizeEvents.end) {
+        props.onResize && props.onResize(e);
+      }
+    })) ||
+    null;
+  if (props.canResize) {
+    if (props.active) {
+      for (let p in props.active) {
+        resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+            e.preventDefault();
+            props.onDoubleClick && props.onDoubleClick();
+          }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
+      }
+    }
+  }
+  else {
+    if (props.active) {
+      for (let p in props.active) {
+        resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+            e.preventDefault();
+            props.onDoubleClick && props.onDoubleClick();
+          }, class: `no-resize resizable resizable-${props.active[p]}` }));
+      }
+    }
+  }
+  return (h("div", Object.assign({}, props, { ref: (e) => directive === null || directive === void 0 ? void 0 : directive.set(e) }),
+    children,
+    resizeEls));
+};

package/dist/collection/services/selection.store.connector.js

@@ -0,0 +1,216 @@
+/*!
+ * Built by Revolist
+ */
+import { cropCellToMax, isHiddenStore, nextCell } from '../store/selection/selection.helpers';
+import { SelectionStore } from '../store/selection/selection.store';
+export const EMPTY_INDEX = -1;
+export default class SelectionStoreConnector {
+  constructor() {
+    // dirty flag required to cleanup whole store in case visibility of panels changed
+    this.dirty = false;
+    this.stores = {};
+    this.columnStores = {};
+    this.rowStores = {};
+    this.sections = [];
+  }
+  get focusedStore() {
+    var _a;
+    for (let y in this.stores) {
+      for (let x in this.stores[y]) {
+        const focused = (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.store.get('focus');
+        if (focused) {
+          return {
+            entity: this.stores[y][x],
+            cell: focused,
+            position: {
+              x: parseInt(x, 10),
+              y: parseInt(y, 10)
+            }
+          };
+        }
+      }
+    }
+    return null;
+  }
+  get edit() {
+    var _a;
+    return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('edit');
+  }
+  get focused() {
+    var _a;
+    return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('focus');
+  }
+  get selectedRange() {
+    var _a;
+    return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
+  }
+  registerSection(e) {
+    if (!e) {
+      this.sections.length = 0;
+      // some elements removed, rebuild stores
+      this.dirty = true;
+      return;
+    }
+    if (this.sections.indexOf(e) === -1) {
+      this.sections.push(e);
+    }
+  }
+  // check if require to cleanup all stores
+  beforeUpdate() {
+    if (this.dirty) {
+      for (let y in this.stores) {
+        for (let x in this.stores[y]) {
+          this.stores[y][x].dispose();
+        }
+      }
+      this.dirty = false;
+    }
+  }
+  registerColumn(x) {
+    // if hidden just create store
+    if (isHiddenStore(x)) {
+      return new SelectionStore();
+    }
+    if (this.columnStores[x]) {
+      return this.columnStores[x];
+    }
+    this.columnStores[x] = new SelectionStore();
+    return this.columnStores[x];
+  }
+  registerRow(y) {
+    // if hidden just create store
+    if (isHiddenStore(y)) {
+      return new SelectionStore();
+    }
+    if (this.rowStores[y]) {
+      return this.rowStores[y];
+    }
+    this.rowStores[y] = new SelectionStore();
+    return this.rowStores[y];
+  }
+  /**
+   * Cross store proxy, based on multiple dimensions
+   */
+  register({ x, y }) {
+    var _a, _b;
+    // if hidden just create store
+    if (isHiddenStore(x) || isHiddenStore(y)) {
+      return new SelectionStore();
+    }
+    if (!this.stores[y]) {
+      this.stores[y] = {};
+    }
+    if (this.stores[y][x]) {
+      // Store already registered. Do not register twice
+      return this.stores[y][x];
+    }
+    this.stores[y][x] = new SelectionStore();
+    // proxy update
+    (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.onChange('range', c => {
+      this.columnStores[x].setRangeArea(c);
+      this.rowStores[y].setRangeArea(c);
+    });
+    // clean up on remove
+    (_b = this.stores[y][x]) === null || _b === void 0 ? void 0 : _b.store.on('dispose', () => {
+      var _a, _b;
+      (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
+      (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
+      delete this.rowStores[y];
+      delete this.columnStores[x];
+      if (this.stores[y]) {
+        delete this.stores[y][x];
+      }
+      // clear empty rows
+      if (!Object.keys(this.stores[y] || {}).length) {
+        delete this.stores[y];
+      }
+    });
+    return this.stores[y][x];
+  }
+  setEditByCell({ x, y }, editCell) {
+    const store = this.stores[y][x];
+    this.focus(store, { focus: editCell, end: editCell });
+    this.setEdit('');
+  }
+  focus(store, { focus, end }) {
+    let currentStorePointer;
+    // clear all stores focus leave only active one
+    for (let y in this.stores) {
+      for (let x in this.stores[y]) {
+        const s = this.stores[y][x];
+        // clear other stores, only one area can be selected
+        if (s !== store) {
+          s.clearFocus();
+        }
+        else {
+          currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
+        }
+      }
+    }
+    if (!currentStorePointer) {
+      return;
+    }
+    // check is focus in next store
+    const lastCell = store.store.get('lastCell');
+    // item in new store
+    const nextItem = nextCell(focus, lastCell);
+    let nextStore;
+    if (nextItem) {
+      for (let i in nextItem) {
+        let type = i;
+        let stores;
+        switch (type) {
+          case 'x':
+            stores = this.getXStores(currentStorePointer.y);
+            break;
+          case 'y':
+            stores = this.getYStores(currentStorePointer.x);
+            break;
+        }
+        if (nextItem[type] >= 0) {
+          nextStore = stores[++currentStorePointer[type]];
+        }
+        else {
+          nextStore = stores[--currentStorePointer[type]];
+          const nextLastCell = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+          if (nextLastCell) {
+            nextItem[type] = nextLastCell[type] + nextItem[type];
+          }
+        }
+      }
+    }
+    // if next store present - update
+    if (nextStore) {
+      let item = Object.assign(Object.assign({}, focus), nextItem);
+      this.focus(nextStore, { focus: item, end: item });
+      return;
+    }
+    focus = cropCellToMax(focus, lastCell);
+    end = cropCellToMax(focus, lastCell);
+    store.setFocus(focus, end);
+  }
+  clearAll() {
+    var _a;
+    for (let y in this.stores) {
+      for (let x in this.stores[y]) {
+        (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.clearFocus();
+      }
+    }
+  }
+  setEdit(val) {
+    if (!this.focusedStore) {
+      return;
+    }
+    this.focusedStore.entity.setEdit(val);
+  }
+  getXStores(y) {
+    return this.stores[y];
+  }
+  getYStores(x) {
+    const stores = {};
+    for (let i in this.stores) {
+      stores[i] = this.stores[i][x];
+    }
+    return stores;
+  }
+}

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

@@ -0,0 +1,17 @@
+/*!
+ * Built by Revolist
+ */
+import reduce from 'lodash/reduce';
+import { columnTypes, rowTypes } from '../store/storeTypes';
+import ViewportStore from '../store/viewPort/viewport.store';
+export default class ViewportProvider {
+  constructor() {
+    this.stores = reduce([...rowTypes, ...columnTypes], (sources, k) => {
+      sources[k] = new ViewportStore();
+      return sources;
+    }, {});
+  }
+  setViewport(dimensionType, data) {
+    this.stores[dimensionType].setViewport(data);
+  }
+}

package/dist/collection/store/dataSource/data.proxy.js

@@ -0,0 +1,37 @@
+/*!
+ * Built by Revolist
+ */
+/**
+ * All items
+ * Used as proxy for sorting
+ * Keep order but do not modify final source
+ */
+export const proxyPlugin = (store) => ({
+  set(k, newVal) {
+    if (!isProxy(k)) {
+      return;
+    }
+    /**
+     * Getting existing collection of items
+     * Mark indexes as visible
+     */
+    const oldItems = store.get('items').reduce((r, v) => {
+      r[v] = true;
+      return r;
+    }, {});
+    /**
+     * Check if new values where present in items
+     * Filter item collection according presense
+     */
+    const newItems = newVal.reduce((r, i) => {
+      if (oldItems[i]) {
+        r.push(i);
+      }
+      return r;
+    }, []);
+    store.set('items', newItems);
+  },
+});
+function isProxy(k) {
+  return k === 'proxyItems';
+}

package/dist/collection/store/dataSource/data.store.js

@@ -0,0 +1,130 @@
+/*!
+ * Built by Revolist
+ */
+import { createStore } from '@stencil/store';
+import findIndex from 'lodash/findIndex';
+import range from 'lodash/range';
+import { trimmedPlugin } from '../../plugins/trimmed/trimmed.plugin';
+import { setStore } from '../../utils/store.utils';
+import { proxyPlugin } from './data.proxy';
+export default class DataStore {
+  constructor(type) {
+    const store = (this.dataStore = createStore({
+      items: [],
+      proxyItems: [],
+      source: [],
+      groupingDepth: 0,
+      groups: {},
+      type,
+      trimmed: {},
+    }));
+    store.use(proxyPlugin(store));
+    store.use(trimmedPlugin(store));
+  }
+  get store() {
+    return this.dataStore;
+  }
+  /**
+   * full data source update
+   * @param source - data column/rgRow source
+   * @param grouping - grouping information if present
+   */
+  updateData(source, grouping, silent = false) {
+    // during full update we do drop trim
+    if (!silent) {
+      this.store.set('trimmed', {});
+    }
+    // clear items
+    this.store.set('items', []);
+    const items = range(0, (source === null || source === void 0 ? void 0 : source.length) || 0);
+    // set proxy first
+    setStore(this.store, {
+      source,
+      proxyItems: [...items],
+    });
+    // update data items
+    this.store.set('items', items);
+    // apply grooping if present
+    if (grouping) {
+      setStore(this.store, {
+        groupingDepth: grouping.depth,
+        groups: grouping.groups,
+      });
+    }
+  }
+  addTrimmed(some) {
+    let trimmed = this.store.get('trimmed');
+    trimmed = Object.assign(Object.assign({}, trimmed), some);
+    setStore(this.store, { trimmed });
+  }
+  // local data update
+  setData(input) {
+    const data = Object.assign({}, input);
+    setStore(this.store, data);
+  }
+  refresh() {
+    const source = this.store.get('source');
+    this.store.set('source', [...source]);
+  }
+}
+/**
+ * get physical index by virtual
+ * @param store - store to process
+ */
+export function getPhysical(store, virtualIndex) {
+  const items = store.get('items');
+  return items[virtualIndex];
+}
+/**
+ * get all visible items
+ * @param store - store to process
+ */
+export function getVisibleSourceItem(store) {
+  const source = store.get('source');
+  return store.get('items').map(v => source[v]);
+}
+/**
+ * get mapped item from source
+ * @param store - store to process
+ * @param virtualIndex - virtual index to process
+ */
+export function getSourceItem(store, virtualIndex) {
+  const items = store.get('items');
+  const source = store.get('source');
+  return source[items[virtualIndex]];
+}
+/**
+ * set item to source
+ * @param store  - store to process
+ * @param modelByIndex - collection of rows with virtual indexes to setup
+ */
+export function setSourceByVirtualIndex(store, modelByIndex) {
+  const items = store.get('items');
+  const source = store.get('source');
+  for (let virtualIndex in modelByIndex) {
+    const realIndex = items[virtualIndex];
+    source[realIndex] = modelByIndex[virtualIndex];
+  }
+  store.set('source', [...source]);
+}
+/**
+ * set item to source
+ * @param store  - store to process
+ * @param modelByIndex - collection of rows with physical indexes to setup
+ */
+export function setSourceByPhysicalIndex(store, modelByIndex) {
+  const source = store.get('source');
+  for (let index in modelByIndex) {
+    source[index] = modelByIndex[index];
+  }
+  store.set('source', [...source]);
+}
+export function setItems(store, items) {
+  store.set('items', items);
+}
+export function getSourceItemVirtualIndexByProp(store, prop) {
+  const items = store.get('items');
+  const source = store.get('source');
+  const physicalIndex = findIndex(source, { prop });
+  return items.indexOf(physicalIndex);
+}