@gct-paas/excel 0.1.0

package/dist/revogr-clipboard_3.entry-BTapNW_r.js

@@ -0,0 +1,480 @@
+import { t as timeout, r as registerInstance, c as createEvent, h, a4 as EDIT_INPUT_WR, H as Host, f as getElement, l as debounce, a7 as DRAGG_TEXT, q as getSourceItem, a3 as getItemByPosition } from "./index-CfpMuCWW.js";
+import { d as isEnterKeyValue, c as isTab, j as isEditorCtrConstructible } from "./edit.utils-CXmmCnxE-DBxW-dJF.js";
+class TextEditor {
+  constructor(data, saveCallback) {
+    this.data = data;
+    this.saveCallback = saveCallback;
+    this.editInput = null;
+    this.element = null;
+    this.editCell = void 0;
+  }
+  /**
+   * Callback triggered on cell editor render
+   */
+  async componentDidRender() {
+    var _a;
+    if (this.editInput) {
+      await timeout();
+      (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  onKeyDown(e) {
+    const isEnter = isEnterKeyValue(e.key);
+    const isKeyTab = isTab(e.key);
+    if ((isKeyTab || isEnter) && e.target && this.saveCallback && !e.isComposing) {
+      this.beforeDisconnect();
+      this.saveCallback(this.getValue(), isKeyTab);
+    }
+  }
+  /**
+   * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
+   */
+  beforeDisconnect() {
+    var _a;
+    (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.blur();
+  }
+  /**
+   * Get value from input
+   */
+  getValue() {
+    var _a;
+    return (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.value;
+  }
+  /**
+   * Render method for Editor plugin.
+   * Renders input element with passed data from cell.
+   * @param {Function} h - h function from stencil render.
+   * @param {Object} _additionalData - additional data from plugin.
+   * @returns {VNode} - input element.
+   */
+  render(h2, _additionalData) {
+    var _a, _b;
+    return h2("input", {
+      type: "text",
+      enterKeyHint: "enter",
+      // set input value from cell data
+      value: (_b = (_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) !== null && _b !== void 0 ? _b : "",
+      // save input element as ref for further usage
+      ref: (el) => {
+        this.editInput = el;
+      },
+      // listen to keydown event on input element
+      onKeyDown: (e) => this.onKeyDown(e)
+    });
+  }
+}
+const Clipboard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.beforePaste = createEvent(this, "beforepaste", 7);
+    this.beforePasteApply = createEvent(this, "beforepasteapply", 7);
+    this.pasteRegion = createEvent(this, "pasteregion", 7);
+    this.afterPasteApply = createEvent(this, "afterpasteapply", 7);
+    this.beforeCut = createEvent(this, "beforecut", 7);
+    this.clearRegion = createEvent(this, "clearregion", 7);
+    this.beforeCopy = createEvent(this, "beforecopy", 7);
+    this.beforeCopyApply = createEvent(this, "beforecopyapply", 7);
+    this.copyRegion = createEvent(this, "copyregion", 7);
+  }
+  onPaste(e) {
+    if (this.readonly) {
+      return;
+    }
+    const clipboardData = this.getData(e);
+    const isHTML = ((clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.types.indexOf("text/html")) || -1) > -1;
+    const data = (isHTML ? clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData("text/html") : clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData("text")) || "";
+    const dataText = (clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData("text")) || "";
+    const beforePaste = this.beforePaste.emit({
+      raw: data,
+      dataText,
+      isHTML,
+      event: e
+    });
+    if (beforePaste.defaultPrevented) {
+      return;
+    }
+    let parsedData;
+    if (beforePaste.detail.isHTML) {
+      const table = this.htmlParse(beforePaste.detail.raw);
+      parsedData = table || this.textParse(dataText || "");
+    } else {
+      parsedData = this.textParse(beforePaste.detail.raw);
+    }
+    const beforePasteApply = this.beforePasteApply.emit({
+      raw: data,
+      parsed: parsedData,
+      dataText,
+      event: e
+    });
+    if (beforePasteApply.defaultPrevented) {
+      return;
+    }
+    this.pasteRegion.emit(beforePasteApply.detail.parsed);
+    const afterPasteApply = this.afterPasteApply.emit({
+      raw: data,
+      parsed: parsedData,
+      dataText,
+      event: e
+    });
+    if (afterPasteApply.defaultPrevented) {
+      return;
+    }
+    e.preventDefault();
+  }
+  /**
+   * Listen to copy event and emit copy region event
+   */
+  copyStarted(e) {
+    const beforeCopy = this.beforeCopy.emit({
+      event: e
+    });
+    if (beforeCopy.defaultPrevented) {
+      return;
+    }
+    const data = this.getData(beforeCopy.detail.event);
+    e.preventDefault();
+    this.copyRegion.emit(data || void 0);
+  }
+  /**
+   * Listen to copy event and emit copy region event
+   */
+  cutStarted(e) {
+    const beforeCut = this.beforeCut.emit({
+      event: e
+    });
+    if (beforeCut.defaultPrevented) {
+      return;
+    }
+    const data = this.getData(beforeCut.detail.event);
+    this.copyStarted(e);
+    if (this.readonly) {
+      return;
+    }
+    this.clearRegion.emit(data || void 0);
+    e.preventDefault();
+  }
+  async doCopy(e, data) {
+    const beforeCopyApply = this.beforeCopyApply.emit({
+      event: e,
+      data
+    });
+    if (beforeCopyApply.defaultPrevented) {
+      return;
+    }
+    const parsed = data ? this.parserCopy(data) : "";
+    e.setData("text/plain", parsed);
+  }
+  parserCopy(data) {
+    return data.map((rgRow) => rgRow.join("	")).join("\n");
+  }
+  textParse(data) {
+    const result = [];
+    const rows = data.split(/\r\n|\n|\r/);
+    for (let y in rows) {
+      result.push(rows[y].split("	"));
+    }
+    return result;
+  }
+  htmlParse(data) {
+    const result = [];
+    const fragment = document.createRange().createContextualFragment(data);
+    const table = fragment.querySelector("table");
+    if (!table) {
+      return null;
+    }
+    for (const rgRow of Array.from(table.rows)) {
+      result.push(Array.from(rgRow.cells).map((cell) => cell.innerText));
+    }
+    return result;
+  }
+  getData(e) {
+    return e.clipboardData || (globalThis === null || globalThis === void 0 ? void 0 : globalThis.clipboardData);
+  }
+};
+const revogrEditStyleCss = () => `revogr-edit{display:block;position:absolute;background-color:var(--revo-grid-background, #fff)}revogr-edit input{height:100%;width:100%;box-sizing:border-box;background-color:var(--revo-grid-background, transparent)}revogr-edit revo-dropdown{height:100%}revogr-edit revo-dropdown.shrink fieldset legend>span{display:none}`;
+const RevoEdit = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cellEdit = createEvent(this, "celleditinit", 7);
+    this.closeEdit = createEvent(this, "closeedit", 7);
+    this.saveOnClose = false;
+    this.currentEditor = null;
+    this.preventSaveOnClose = false;
+  }
+  /**
+   * Cancel pending changes flag. Editor will be closed without autosave.
+   */
+  async cancelChanges() {
+    this.preventSaveOnClose = true;
+  }
+  /**
+   * Before editor got disconnected.
+   * Can be triggered multiple times before actual disconnect.
+   */
+  async beforeDisconnect() {
+    var _a, _b;
+    (_b = (_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.beforeDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  onAutoSave() {
+    var _a, _b, _c;
+    this.preventSaveOnClose = true;
+    const val = (_b = (_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.getValue) === null || _b === void 0 ? void 0 : _b.call(_a);
+    if ((_c = this.currentEditor) === null || _c === void 0 ? void 0 : _c.beforeAutoSave) {
+      const canSave = this.currentEditor.beforeAutoSave(val);
+      if (canSave === false) {
+        return;
+      }
+    }
+    this.onSave(val, true);
+  }
+  /**
+   * Callback triggered when cell editor saved.
+   * Closes editor when called.
+   * @param preventFocus - if true, editor will not be closed & next cell will not be focused.
+   */
+  onSave(val, preventFocus) {
+    this.preventSaveOnClose = true;
+    if (this.editCell) {
+      this.cellEdit.emit({
+        rgCol: this.editCell.x,
+        rgRow: this.editCell.y,
+        type: this.editCell.type,
+        prop: this.editCell.prop,
+        val,
+        preventFocus
+      });
+    }
+  }
+  componentWillRender() {
+    if (this.currentEditor || !this.column) {
+      return;
+    }
+    this.preventSaveOnClose = false;
+    if (this.editor) {
+      if (isEditorCtrConstructible(this.editor)) {
+        this.currentEditor = new this.editor(
+          this.column,
+          // save callback
+          (e, preventFocus) => {
+            this.onSave(e, preventFocus);
+          },
+          // cancel callback
+          (focusNext) => {
+            this.preventSaveOnClose = true;
+            this.closeEdit.emit(focusNext);
+          }
+        );
+      } else {
+        this.currentEditor = this.editor(
+          this.column,
+          // save callback
+          (e, preventFocus) => {
+            this.onSave(e, preventFocus);
+          },
+          // cancel callback
+          (focusNext) => {
+            this.preventSaveOnClose = true;
+            this.closeEdit.emit(focusNext);
+          }
+        );
+      }
+      return;
+    }
+    this.currentEditor = new TextEditor(this.column, (e, preventFocus) => this.onSave(e, preventFocus));
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (!this.currentEditor) {
+      return;
+    }
+    this.currentEditor.element = this.element.firstElementChild;
+    (_b = (_a = this.currentEditor).componentDidRender) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    if (this.saveOnClose) {
+      if (!this.preventSaveOnClose) {
+        this.onAutoSave();
+      }
+    }
+    this.preventSaveOnClose = false;
+    if (!this.currentEditor) {
+      return;
+    }
+    (_b = (_a = this.currentEditor).disconnectedCallback) === null || _b === void 0 ? void 0 : _b.call(_a);
+    this.currentEditor.element = null;
+    this.currentEditor = null;
+  }
+  render() {
+    if (this.currentEditor) {
+      this.currentEditor.editCell = this.editCell;
+      return h(Host, { class: EDIT_INPUT_WR }, this.currentEditor.render(h, this.additionalData));
+    }
+    return "";
+  }
+  get element() {
+    return getElement(this);
+  }
+};
+RevoEdit.style = revogrEditStyleCss();
+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 (newRow.y < 0) {
+      newRow.y = 0;
+    } else if (newRow.y < this.currentCell.y) {
+      newRow.y++;
+    }
+    if (newRow.y !== this.currentCell.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 (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 rowOffset = rows.renderOffset || 0;
+    const rgRow = getItemByPosition(rows, topRelative + rowOffset);
+    const absolutePosition = {
+      itemIndex: rgRow.itemIndex,
+      start: rgRow.start - rowOffset + top,
+      end: rgRow.end - rowOffset + 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 + (rows.renderOffset || 0));
+    const rgCol = getItemByPosition(cols, leftRelative + (cols.renderOffset || 0));
+    return { x: rgCol.itemIndex, y: rgRow.itemIndex };
+  }
+}
+const OrderEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.rowDragStart = createEvent(this, "rowdragstartinit", 7);
+    this.rowDragEnd = createEvent(this, "rowdragendinit", 7);
+    this.rowDrag = createEvent(this, "rowdragmoveinit", 7);
+    this.rowMouseMove = createEvent(this, "rowdragmousemove", 7);
+    this.rowDropped = createEvent(this, "rowdropinit", 7);
+    this.rowOrderChange = createEvent(this, "roworderchange", 7);
+    this.events = [];
+    this.rowMoveFunc = debounce((y) => {
+      const rgRow = this.rowOrderService.move(y, this.getData());
+      if (rgRow !== null) {
+        this.rowDrag.emit(Object.assign(Object.assign({}, rgRow), { rowType: this.rowType }));
+      }
+    }, 5);
+  }
+  // #endregion
+  // #region Methods
+  async dragStart(e) {
+    e.originalEvent.preventDefault();
+    if (this.events.length) {
+      this.clearOrder();
+    }
+    const data = this.getData();
+    const cell = this.rowOrderService.startOrder(e.originalEvent, data);
+    const pos = this.rowOrderService.getRow(e.originalEvent.y, data);
+    const dragStartEvent = this.rowDragStart.emit({
+      cell,
+      text: DRAGG_TEXT,
+      pos,
+      event: e.originalEvent,
+      rowType: this.rowType,
+      model: getSourceItem(this.dataStore, pos.itemIndex)
+    });
+    if (dragStartEvent.defaultPrevented) {
+      return;
+    }
+    const moveMove = (e2) => this.move(e2);
+    const mouseUp = (e2) => this.endOrder(e2);
+    const mouseLeave = () => this.clearOrder();
+    this.events.push({
+      name: "mousemove",
+      listener: moveMove
+    }, {
+      name: "mouseup",
+      listener: mouseUp
+    }, {
+      name: "mouseleave",
+      listener: mouseLeave
+    });
+    document.addEventListener("mousemove", moveMove);
+    document.addEventListener("mouseup", mouseUp);
+    document.addEventListener("mouseleave", mouseLeave);
+  }
+  async endOrder(e) {
+    this.rowOrderService.endOrder(e, this.getData());
+    this.clearOrder();
+  }
+  async clearOrder() {
+    this.rowOrderService.clear();
+    this.events.forEach((v) => document.removeEventListener(v.name, v.listener));
+    this.events.length = 0;
+    this.rowDragEnd.emit({ rowType: this.rowType });
+  }
+  // #endregion
+  move({ x, y }) {
+    this.rowMouseMove.emit({ x, y, rowType: this.rowType });
+    this.rowMoveFunc(y);
+  }
+  connectedCallback() {
+    this.rowOrderService = new RowOrderService({
+      positionChanged: (from, to) => {
+        const dropEvent = this.rowDropped.emit({
+          from,
+          to,
+          rowType: this.rowType
+        });
+        if (dropEvent.defaultPrevented) {
+          return;
+        }
+        this.rowOrderChange.emit(dropEvent.detail);
+      }
+    });
+  }
+  getData() {
+    return {
+      el: this.parent,
+      rows: this.dimensionRow.state,
+      cols: this.dimensionCol.state
+    };
+  }
+};
+export {
+  Clipboard as revogr_clipboard,
+  RevoEdit as revogr_edit,
+  OrderEditor as revogr_order_editor
+};