@revolist/revogrid 4.0.2-next → 4.0.2

package/dist/collection/plugins/moveColumn/column.drag.plugin.js

@@ -0,0 +1,167 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+/**
+ * Plugin for column manual move
+ */
+import debounce from "lodash/debounce";
+import each from "lodash/each";
+import { getItemByPosition } from "../../store/dimension/dimension.helpers";
+import { BasePlugin } from "../base.plugin";
+import { ColumnOrderHandler } from "./order-column.handler";
+import { dispatch } from "../dispatcher";
+import { isColGrouping } from "../groupingColumn/grouping.col.plugin";
+import { ON_COLUMN_CLICK } from "../../components/header/header-cell-renderer";
+const COLUMN_CLICK = ON_COLUMN_CLICK;
+const MOVE = 'columndragmousemove';
+const DRAG_END = 'columndragend';
+const BEFORE_DRAG_END = 'beforecolumndragend';
+// use this event subscription to drop D&D for particular columns
+const DRAG_START = 'columndragstart';
+export default class ColumnPlugin extends BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
+        this.moveFunc = debounce((e) => this.doMove(e), 5);
+        this.staticDragData = null;
+        this.dragData = null;
+        this.localSubscriptions = {};
+        this.orderUi = new ColumnOrderHandler();
+        revogrid.appendChild(this.orderUi.render());
+        revogrid.classList.add('column-draggable');
+        // Register events
+        this.localSubscriptions['mouseleave'] = {
+            target: document,
+            callback: (e) => this.onMouseOut(e),
+        };
+        this.localSubscriptions['mouseup'] = {
+            target: document,
+            callback: (e) => this.onMouseUp(e),
+        };
+        this.localSubscriptions['mousemove'] = {
+            target: document,
+            callback: (e) => this.move(e),
+        };
+        this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
+    }
+    dragStart({ event, data }) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+        // check if allowed to drag particulat column
+        if (defaultPrevented) {
+            return;
+        }
+        this.clearOrder();
+        const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
+        mouseleave.target.addEventListener('mouseleave', mouseleave.callback);
+        mouseup.target.addEventListener('mouseup', mouseup.callback);
+        const dataEl = event.target.closest('revogr-header');
+        const scrollEl = event.target.closest('revogr-viewport-scroll');
+        if (!dataEl || !scrollEl) {
+            return;
+        }
+        // no grouping drag and no row header column drag
+        if (isColGrouping(data) || data.providers.type === 'rowHeaders') {
+            return;
+        }
+        const cols = this.getDimension(data.pin || 'rgCol');
+        const gridRect = this.revogrid.getBoundingClientRect();
+        const elRect = dataEl.getBoundingClientRect();
+        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
+        this.staticDragData = {
+            startPos: event.x,
+            startItem,
+            data,
+            dataEl,
+            scrollEl,
+            gridEl: this.revogrid,
+            cols,
+        };
+        this.dragData = this.getData(this.staticDragData);
+        mousemove.target.addEventListener('mousemove', mousemove.callback);
+        this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
+    }
+    doMove(e) {
+        if (!this.staticDragData) {
+            return;
+        }
+        const dragData = (this.dragData = this.getData(this.staticDragData));
+        if (!dragData) {
+            return;
+        }
+        const start = this.staticDragData.startPos;
+        if (Math.abs(start - e.x) > 10) {
+            const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+            const rgCol = getItemByPosition(this.staticDragData.cols, x);
+            this.orderUi.autoscroll(x, dragData.elRect.width);
+            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
+        }
+    }
+    move(e) {
+        dispatch(this.revogrid, MOVE, e);
+        // then do move
+        this.moveFunc(e);
+    }
+    onMouseOut(_) {
+        this.clearOrder();
+    }
+    onMouseUp(e) {
+        // apply new positions
+        if (this.dragData) {
+            let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+            if (relativePos < 0) {
+                relativePos = 0;
+            }
+            const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
+            const store = this.providers.column.stores[this.dragData.type].store;
+            const items = [...store.get('items')];
+            // prevent position change if needed
+            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[items[this.staticDragData.startItem.itemIndex]] }));
+            if (!stopDrag) {
+                // todo: if move item out of group remove item from group
+                const toMove = items.splice(this.staticDragData.startItem.itemIndex, 1);
+                items.splice(newPosition.itemIndex, 0, ...toMove);
+                store.set('items', items);
+            }
+            dispatch(this.revogrid, DRAG_END, this.dragData);
+        }
+        this.clearOrder();
+    }
+    clearLocalSubscriptions() {
+        each(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
+    }
+    clearOrder() {
+        this.staticDragData = null;
+        this.dragData = null;
+        this.clearLocalSubscriptions();
+        this.orderUi.stop(this.revogrid);
+    }
+    /**
+     * Clearing subscription
+     */
+    clearSubscriptions() {
+        super.clearSubscriptions();
+        this.clearLocalSubscriptions();
+    }
+    getData({ gridEl, dataEl, data, }) {
+        const gridRect = gridEl.getBoundingClientRect();
+        const elRect = dataEl.getBoundingClientRect();
+        const scrollOffset = elRect.left - gridRect.left;
+        return {
+            elRect,
+            gridRect,
+            type: data.pin || 'rgCol',
+            scrollOffset,
+        };
+    }
+    getDimension(type) {
+        return this.providers.dimension.stores[type].getCurrentState();
+    }
+}
+export function getLeftRelative(absoluteX, gridPos, offset) {
+    return absoluteX - gridPos - offset;
+}
+//# sourceMappingURL=column.drag.plugin.js.map

package/dist/collection/plugins/moveColumn/column.drag.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.drag.plugin.js","sourceRoot":"","sources":["../../../src/plugins/moveColumn/column.drag.plugin.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Plugin for column manual move\n */\nimport debounce from 'lodash/debounce';\nimport each from 'lodash/each';\nimport ColumnDataProvider from '../../services/column.data.provider';\nimport { DataProvider } from '../../services/data.provider';\nimport DimensionProvider from '../../services/dimension.provider';\nimport SelectionStoreConnector from '../../services/selection.store.connector';\nimport ViewportProvider from '../../services/viewport.provider';\nimport { getItemByPosition } from '../../store/dimension/dimension.helpers';\nimport { BasePlugin } from '../base.plugin';\nimport { ColumnOrderHandler } from './order-column.handler';\nimport { dispatch } from '../dispatcher';\nimport { isColGrouping } from '../groupingColumn/grouping.col.plugin';\nimport { ColumnPropProp, ColumnRegular, DimensionSettingsState, PositionItem } from '../..';\nimport { DimensionCols, MultiDimensionType } from '../..';\nimport { PluginProviders } from '../../';\nimport { ON_COLUMN_CLICK } from '../../components/header/header-cell-renderer';\n\nconst COLUMN_CLICK = ON_COLUMN_CLICK;\nconst MOVE = 'columndragmousemove';\nconst DRAG_END = 'columndragend';\nconst BEFORE_DRAG_END = 'beforecolumndragend';\n\n// use this event subscription to drop D&D for particular columns\nconst DRAG_START = 'columndragstart';\n\nexport type DragStartEventDetails = {\n  event: MouseEvent;\n  data: ColumnPropProp;\n};\n\nexport type Providers = {\n  data: DataProvider;\n  dimension: DimensionProvider;\n  selection: SelectionStoreConnector;\n  column: ColumnDataProvider;\n  viewport: ViewportProvider;\n};\ntype StaticData = {\n  startPos: number;\n  startItem: PositionItem;\n  data: ColumnRegular;\n  dataEl: HTMLElement;\n  scrollEl: Element;\n  gridEl: HTMLElement;\n  cols: DimensionSettingsState;\n};\n\ntype LocalSubscriptions = Record<string, LocalSubscription>;\ntype LocalSubscription = {\n  target: Element | Document;\n  callback(...params: any[]): void;\n};\nexport type EventData = {\n  elRect: DOMRect;\n  gridRect: DOMRect;\n  scrollOffset: number;\n  type: DimensionCols;\n};\nexport default class ColumnPlugin extends BasePlugin {\n  private moveFunc = debounce((e: MouseEvent) => this.doMove(e), 5);\n  private staticDragData: StaticData | null = null;\n  private dragData: EventData | null = null;\n  private readonly orderUi: ColumnOrderHandler;\n  protected readonly localSubscriptions: LocalSubscriptions = {};\n  constructor(protected revogrid: HTMLRevoGridElement, protected providers: PluginProviders) {\n    super(revogrid, providers);\n    this.orderUi = new ColumnOrderHandler();\n    revogrid.appendChild(this.orderUi.render());\n    revogrid.classList.add('column-draggable');\n\n    // Register events\n    this.localSubscriptions['mouseleave'] = {\n      target: document,\n      callback: (e: MouseEvent) => this.onMouseOut(e),\n    };\n    this.localSubscriptions['mouseup'] = {\n      target: document,\n      callback: (e: MouseEvent) => this.onMouseUp(e),\n    };\n\n    this.localSubscriptions['mousemove'] = {\n      target: document,\n      callback: (e: MouseEvent) => this.move(e),\n    };\n\n    this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));\n  }\n\n  dragStart({ event, data }: DragStartEventDetails) {\n    if (event.defaultPrevented) {\n      return;\n    }\n    const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);\n    // check if allowed to drag particulat column\n    if (defaultPrevented) {\n      return;\n    }\n    this.clearOrder();\n    const { mouseleave, mouseup, mousemove } = this.localSubscriptions;\n    mouseleave.target.addEventListener('mouseleave', mouseleave.callback);\n    mouseup.target.addEventListener('mouseup', mouseup.callback);\n\n    const dataEl = (event.target as HTMLElement).closest('revogr-header');\n    const scrollEl = (event.target as HTMLElement).closest('revogr-viewport-scroll');\n    if (!dataEl || !scrollEl) {\n      return;\n    }\n\n    // no grouping drag and no row header column drag\n    if (isColGrouping(data) || data.providers.type === 'rowHeaders') {\n      return;\n    }\n\n    const cols = this.getDimension(data.pin || 'rgCol');\n    const gridRect = this.revogrid.getBoundingClientRect();\n    const elRect = dataEl.getBoundingClientRect();\n    const startItem = getItemByPosition(\n      cols,\n      getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));\n  \n    this.staticDragData = {\n      startPos: event.x,\n      startItem,\n      data,\n      dataEl,\n      scrollEl,\n      gridEl: this.revogrid,\n      cols,\n    };\n    this.dragData = this.getData(this.staticDragData);\n    mousemove.target.addEventListener('mousemove', mousemove.callback);\n    this.orderUi.start(event, {\n      ...this.dragData,\n      ...this.staticDragData,\n    });\n  }\n\n  doMove(e: MouseEvent) {\n    if (!this.staticDragData) {\n      return;\n    }\n\n    const dragData = (this.dragData = this.getData(this.staticDragData));\n    if (!dragData) {\n      return;\n    }\n    const start = this.staticDragData.startPos;\n    if (Math.abs(start - e.x) > 10) {\n      const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);\n      const rgCol = getItemByPosition(this.staticDragData.cols, x);\n      this.orderUi.autoscroll(x, dragData.elRect.width);\n      this.orderUi.showHandler(\n        rgCol.end + dragData.scrollOffset,\n        dragData.gridRect.width\n      );\n    }\n  }\n\n  move(e: MouseEvent) {\n    dispatch(this.revogrid, MOVE, e);\n    // then do move\n    this.moveFunc(e);\n  }\n  onMouseOut(_: MouseEvent) {\n    this.clearOrder();\n  }\n  onMouseUp(e: MouseEvent) {\n    // apply new positions\n    if (this.dragData) {\n      let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);\n      if (relativePos < 0) {\n        relativePos = 0;\n      }\n      const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);\n\n      const store = this.providers.column.stores[this.dragData.type].store;\n      const items = [...store.get('items')];\n\n      // prevent position change if needed\n      const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, {\n        ...this.staticDragData,\n        startPosition: this.staticDragData.startItem,\n        newPosition,\n        newItem: store.get('source')[items[this.staticDragData.startItem.itemIndex]]\n      });\n      if (!stopDrag) {\n        // todo: if move item out of group remove item from group\n        const toMove = items.splice(this.staticDragData.startItem.itemIndex, 1);\n        items.splice(newPosition.itemIndex, 0, ...toMove);\n        store.set('items', items);\n      }\n      dispatch(this.revogrid, DRAG_END, this.dragData);\n    }\n    this.clearOrder();\n  }\n\n  private clearLocalSubscriptions() {\n    each(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));\n  }\n\n  clearOrder() {\n    this.staticDragData = null;\n    this.dragData = null;\n    this.clearLocalSubscriptions();\n    this.orderUi.stop(this.revogrid);\n  }\n  /**\n   * Clearing subscription\n   */\n  protected clearSubscriptions() {\n    super.clearSubscriptions();\n    this.clearLocalSubscriptions();\n  }\n\n  private getData({\n    gridEl,\n    dataEl,\n    data,\n  }: StaticData): EventData {\n    const gridRect = gridEl.getBoundingClientRect();\n    const elRect = dataEl.getBoundingClientRect();\n    const scrollOffset = elRect.left - gridRect.left;\n    return {\n      elRect,\n      gridRect,\n      type: data.pin || 'rgCol',\n      scrollOffset,\n    };\n  }\n  private getDimension(type: MultiDimensionType) {\n    return this.providers.dimension.stores[type].getCurrentState();\n  }\n}\n\nexport function getLeftRelative(\n  absoluteX: number,\n  gridPos: number,\n  offset: number\n): number {\n  return absoluteX - gridPos - offset;\n}\n"]}

package/dist/collection/plugins/moveColumn/order-column.handler.js

@@ -0,0 +1,69 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+const COLUMN_DRAG_CLASS = 'column-drag-start';
+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, { dataEl, gridRect, scrollEl, gridEl }, dir = 'left') {
+        gridEl.classList.add(COLUMN_DRAG_CLASS);
+        const scrollContainerRect = scrollEl.getBoundingClientRect();
+        if (scrollContainerRect) {
+            this.offset = scrollContainerRect[dir] - gridRect[dir];
+        }
+        this.renderAutoscroll(e, dataEl);
+    }
+    stop(gridEl) {
+        var _a;
+        gridEl.classList.remove(COLUMN_DRAG_CLASS);
+        if (this.element) {
+            this.element.hidden = true;
+        }
+        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() {
+        const el = this.element = document.createElement('div');
+        el.classList.add('drag-position-y');
+        el.hidden = true;
+        return el;
+    }
+}
+//# sourceMappingURL=order-column.handler.js.map

package/dist/collection/plugins/moveColumn/order-column.handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-column.handler.js","sourceRoot":"","sources":["../../../src/plugins/moveColumn/order-column.handler.tsx"],"names":[],"mappings":"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","sourcesContent":["const COLUMN_DRAG_CLASS = 'column-drag-start';\n\nexport class ColumnOrderHandler {\n  private element?: HTMLDivElement;\n  private autoscrollEl?: HTMLElement;\n  private offset = 0;\n\n  renderAutoscroll(_: MouseEvent, parent: HTMLElement | null) {\n    if (!parent) {\n      return;\n    }\n    this.autoscrollEl = document.createElement('div');\n    this.autoscrollEl.classList.add('drag-auto-scroll-y');\n    parent.appendChild(this.autoscrollEl);\n  }\n\n  autoscroll(pos: number, dataContainerSize: number, direction = 'translateX') {\n    if (!this.autoscrollEl) {\n      return;\n    }\n    const helperOffset = 10;\n    // calculate current y position inside of the grid active holder\n    // 3 - size of element + border\n    const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);\n\n    this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;\n    this.autoscrollEl.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n    });\n  }\n\n  start(e: MouseEvent, { dataEl, gridRect, scrollEl, gridEl }: {\n    dataEl: HTMLElement;\n    gridRect: DOMRect;\n    scrollEl: Element;\n    gridEl: Element;\n  }, dir: 'top' | 'left'  = 'left') {\n    gridEl.classList.add(COLUMN_DRAG_CLASS);\n    const scrollContainerRect = scrollEl.getBoundingClientRect();\n    if (scrollContainerRect) {\n      this.offset = scrollContainerRect[dir] - gridRect[dir];\n    }\n    this.renderAutoscroll(e, dataEl);\n  }\n\n  stop(gridEl: Element) {\n    gridEl.classList.remove(COLUMN_DRAG_CLASS);\n    if (this.element) {\n      this.element.hidden = true;\n    }\n    this.offset = 0;\n    this.autoscrollEl?.remove();\n    this.autoscrollEl = undefined;\n  }\n\n  showHandler(pos: number, size: number, direction = 'translateX') {\n    if (!this.element) {\n      return;\n    }\n    // do not allow overcross top of the scrollable area, header excluded\n    if (this.offset) {\n      pos = Math.max(pos, this.offset);\n    }\n    // can not be bigger then grid end\n    pos = Math.min(pos, size);\n    this.element.style.transform = `${direction}(${pos}px)`;\n    this.element.hidden = false;\n  }\n\n  render() {\n    const el = this.element = document.createElement('div');\n    el.classList.add('drag-position-y');\n    el.hidden = true;\n    return el;\n  }\n}\n"]}