@revolist/revogrid 3.1.6 → 3.2.4

package/dist/revo-grid/revogr-order-editor.entry.js

@@ -0,0 +1,175 @@
+/*!
+ * Built by Revolist
+ */
+import { r as registerInstance, e as createEvent } from './index-8a604c17.js';
+import { d as debounce_1 } from './debounce-aaa4b4da.js';
+import { i as setItems } from './data.store-3263fff9.js';
+import { i as DRAGG_TEXT } from './consts-ef824e6f.js';
+import { a as getItemByPosition } from './dimension.helpers-a7944fc4.js';
+import './isSymbol-e4b5dafe.js';
+import './toNumber-913b0b72.js';
+import './toInteger-9e6cbfd2.js';
+import './_baseIteratee-af30b221.js';
+import './keys-70b7c240.js';
+import './identity-c8c7d3d8.js';
+import './each-0378e5a3.js';
+import './utils-2c3b3857.js';
+
+class RowOrderService {
+  constructor(config) {
+    this.config = config;
+    this.currentCell = null;
+    this.previousRow = null;
+  }
+  /** Drag finished, calculate and apply changes */
+  endOrder(e, data) {
+    if (this.currentCell === null) {
+      return;
+    }
+    const newRow = this.getCell(e, data);
+    // if position changed
+    if (newRow.y !== this.currentCell.y) {
+      // rgRow dragged out table
+      if (newRow.y < 0) {
+        newRow.y = 0;
+      }
+      // rgRow dragged to the top
+      else if (newRow.y < this.currentCell.y) {
+        newRow.y++;
+      }
+      this.config.positionChanged(this.currentCell.y, newRow.y);
+    }
+    this.clear();
+  }
+  /** Drag started, reserve initial cell for farther use */
+  startOrder(e, data) {
+    this.currentCell = this.getCell(e, data);
+    return this.currentCell;
+  }
+  move(y, data) {
+    const rgRow = this.getRow(y, data);
+    // if rgRow same as previous or below range (-1 = 0) do nothing
+    if (this.previousRow === rgRow.itemIndex || rgRow.itemIndex < -1) {
+      return null;
+    }
+    this.previousRow = rgRow.itemIndex;
+    return rgRow;
+  }
+  /** Drag stopped, probably cursor outside of document area */
+  clear() {
+    this.currentCell = null;
+    this.previousRow = null;
+  }
+  /** Calculate cell based on x, y position */
+  getRow(y, { el, rows }) {
+    const { top } = el.getBoundingClientRect();
+    const topRelative = y - top;
+    const rgRow = getItemByPosition(rows, topRelative);
+    const absolutePosition = {
+      itemIndex: rgRow.itemIndex,
+      start: rgRow.start + top,
+      end: rgRow.end + top,
+    };
+    return absolutePosition;
+  }
+  /** Calculate cell based on x, y position */
+  getCell({ x, y }, { el, rows, cols }) {
+    const { top, left } = el.getBoundingClientRect();
+    const topRelative = y - top;
+    const leftRelative = x - left;
+    const rgRow = getItemByPosition(rows, topRelative);
+    const rgCol = getItemByPosition(cols, leftRelative);
+    return { x: rgCol.itemIndex, y: rgRow.itemIndex };
+  }
+}
+
+const OrderEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.internalRowDragStart = createEvent(this, "internalRowDragStart", 7);
+    this.internalRowDragEnd = createEvent(this, "internalRowDragEnd", 7);
+    this.internalRowDrag = createEvent(this, "internalRowDrag", 7);
+    this.internalRowMouseMove = createEvent(this, "internalRowMouseMove", 7);
+    this.initialRowDropped = createEvent(this, "initialRowDropped", 7);
+    this.rowMoveFunc = debounce_1((y) => {
+      const rgRow = this.rowOrderService.move(y, this.getData());
+      if (rgRow !== null) {
+        this.internalRowDrag.emit(rgRow);
+      }
+    }, 5);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Listeners
+  //
+  // --------------------------------------------------------------------------
+  onMouseOut() {
+    this.clearOrder();
+  }
+  /** Action finished inside of the document */
+  onMouseUp(e) {
+    this.endOrder(e);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async dragStart(e) {
+    e.preventDefault();
+    // extra check if previous ended
+    if (this.moveFunc) {
+      this.clearOrder();
+    }
+    const data = this.getData();
+    const cell = this.rowOrderService.startOrder(e, data);
+    const pos = this.rowOrderService.getRow(e.y, data);
+    const dragStartEvent = this.internalRowDragStart.emit({ cell, text: DRAGG_TEXT, pos, event: e });
+    if (dragStartEvent.defaultPrevented) {
+      return;
+    }
+    this.moveFunc = (e) => this.move(e);
+    document.addEventListener('mousemove', this.moveFunc);
+  }
+  async endOrder(e) {
+    this.rowOrderService.endOrder(e, this.getData());
+    this.clearOrder();
+  }
+  async clearOrder() {
+    this.rowOrderService.clear();
+    document.removeEventListener('mousemove', this.moveFunc);
+    this.moveFunc = null;
+    this.internalRowDragEnd.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component methods
+  //
+  // --------------------------------------------------------------------------
+  move({ x, y }) {
+    this.internalRowMouseMove.emit({ x, y });
+    this.rowMoveFunc(y);
+  }
+  connectedCallback() {
+    this.rowOrderService = new RowOrderService({ positionChanged: (f, t) => this.onPositionChanged(f, t) });
+  }
+  onPositionChanged(from, to) {
+    const dropEvent = this.initialRowDropped.emit({ from, to });
+    if (dropEvent.defaultPrevented) {
+      return;
+    }
+    const items = [...this.dataStore.get('items')];
+    const toMove = items.splice(from, 1);
+    items.splice(to, 0, ...toMove);
+    setItems(this.dataStore, items);
+  }
+  getData() {
+    return {
+      el: this.parent,
+      rows: this.dimensionRow.state,
+      cols: this.dimensionCol.state,
+    };
+  }
+};
+
+export { OrderEditor as revogr_order_editor };