@guiexpert/table 1.1.17 → 1.1.20

package/src/lib/table/mouse-handler.ts

@@ -0,0 +1,307 @@
+import { TableScope } from "./table-scope";
+import { TreeRow } from "./data/common/tree-row";
+import { AreaIdent, getAreaIdentByString } from "./data/tablemodel/area-ident.type";
+import { GeMouseEvent } from "./data/common/event/ge-mouse-event";
+import { MouseTargetData } from "./data/event/mouse-target-data";
+import {TreeRowIf} from "./data/common/tree-row-if";
+import {isTreeRow} from "./instanceof-workaround";
+
+/**
+ * Class representing a MouseHandler.
+ * @class
+ */
+export class MouseHandler {
+
+
+  /**
+   * Represents the delay in milliseconds between two consecutive double clicks.
+   *
+   * @type {number}
+   */
+  doubleClickDelay = 500;
+
+  mouseEvent?: MouseEvent;
+  startMouseEvent?: GeMouseEvent;
+  geMouseEvent?: GeMouseEvent;
+  geMouseEventOld?: GeMouseEvent;
+
+  private expandedAll = true;
+  private mouseDown = false;
+  private dragging = false;
+
+  constructor(
+    protected tableScope: TableScope
+  ) {
+    this.tableScope.hostElement.addEventListener("click", this.onHostElementClicked.bind(this));
+    this.tableScope.hostElement.addEventListener("dblclick", this.onHostElementDblClicked.bind(this));
+    this.tableScope.hostElement.addEventListener("mousedown", this.onMouseDown.bind(this));
+    this.tableScope.hostElement.addEventListener("mousemove", this.onMouseMove.bind(this));
+    this.tableScope.hostElement.addEventListener("mouseup", this.onMouseUp.bind(this));
+    this.tableScope.hostElement.addEventListener("contextmenu", this.onContextmenu.bind(this));
+
+    // @ts-ignore
+    this.tableScope.hostElement['_MouseHandler'] = 'true';
+
+    this.tableScope.scrollViewport.addEventListener("scroll", this.tableScope.adjustAfterScrolling.bind(this.tableScope));
+
+    [window, this.tableScope.hostElement].forEach(
+      ele => ele.addEventListener("resize", this.tableScope.adjustContainersAndRows.bind(this.tableScope))
+    );
+  }
+
+
+  /**
+   * Handles the "contextmenu" event.
+   *
+   * @private
+   * @param {MouseEvent} evt - The mouse event object.
+   * @return {void}
+   */
+  private onContextmenu(evt: MouseEvent) {
+    this.mouseEvent = evt;
+    const mouseMoveEvent = this.tableScope.createGeMouseEvent(this.mouseEvent);
+    this.tableScope.contextmenu(mouseMoveEvent);
+  };
+
+  private lastClicked = 0;
+  /**
+   * Handles the click event on the host element.
+   *
+   * @param {MouseEvent} event - The click event.
+   *
+   * @return {void}
+   */
+  private onHostElementClicked(event: MouseEvent) {
+    const now = Date.now();
+    if (now - this.lastClicked < this.doubleClickDelay) {
+      return; // skipped
+    }
+    this.lastClicked = now;
+
+    const mouseTargetData: MouseTargetData = new MouseTargetData(event.target, this.tableScope);
+    if (mouseTargetData.action === 'toggleExpandCollapseAll') {
+      this.expandedAll = !this.expandedAll;
+      this.tableScope.toggleExpandCollapseAll(this.expandedAll);
+      event.preventDefault();
+      event.stopPropagation();
+
+    } else if (mouseTargetData.action === 'toggleHeaderGroup'){
+      this.tableScope.toggleHeaderGroup(mouseTargetData);
+      event.preventDefault();
+      event.stopPropagation();
+
+    } else if (mouseTargetData.inputType === 'checkbox' && mouseTargetData.areaIdent){
+      this.tableScope.toggleRowCheckbox(mouseTargetData.rowIdx, mouseTargetData.colIdx, mouseTargetData.areaIdent);
+      event.preventDefault();
+      event.stopPropagation();
+
+    } else if (isTreeRow(mouseTargetData.row) && mouseTargetData.areaModel) {
+      const altClickOnFirstCol = mouseTargetData.colIdx === this.getArrowColumnIndex() && event.altKey;
+      const clickOnArrow = mouseTargetData.className.includes("ge-table-tree-arrow-div");
+
+      if (altClickOnFirstCol || clickOnArrow) {
+        // toggle collapsed/expanded:
+        event.preventDefault();
+        event.stopPropagation();
+        const tr: TreeRowIf<any> = mouseTargetData.row as TreeRow<any>;
+        tr.expanded = !tr.expanded;
+
+        if ("recalcVisibleTreeRows" in mouseTargetData.areaModel) {
+          // @ts-ignore
+          mouseTargetData.areaModel.recalcVisibleTreeRows();
+        }
+        this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth);
+        this.tableScope.adjustContainersAndRows();
+        this.updateCollapsedExpandedState(tr);
+      }
+    }
+
+    if (mouseTargetData.areaIdent === "body" && this.tableScope.tableOptions.getFocusModel) {
+      const fm = this.tableScope.tableOptions.getFocusModel();
+      fm?.clear();
+      fm?.setFocus(mouseTargetData.rowIdx, mouseTargetData.colIdx);
+    }
+
+    this.publishGeMouseEvent(event, 1);
+  };
+
+
+  /**
+   * Handles the double click event on the host element.
+   * This method is private.
+   *
+   * @param {MouseEvent} event - The double click event.
+   */
+  private onHostElementDblClicked(event: MouseEvent) {
+    this.lastClicked = Date.now();
+
+    if (event.target instanceof HTMLElement) {
+      const target = event.target as HTMLElement;
+      const area = target.getAttribute("data-area");
+      const areaIdent: AreaIdent = getAreaIdentByString(area);
+      const rowIdx = Number(target.getAttribute("data-row-index"));
+      const colIdx = Number(target.getAttribute("data-col-index"));
+      const areaModel = this.tableScope.tableModel.getAreaModel(areaIdent);
+
+      if (area && areaIdent === "header") {
+        if (this.tableScope.tableModel.isSortable(colIdx)) {
+          this.tableScope.clearSelection();
+          this.tableScope.onHeaderDblClicked(event, rowIdx, colIdx);
+        }
+
+      } else if (target.getAttribute("data-row-index")) {
+        const row = areaModel.getRowByIndex(rowIdx);
+
+        if (area && areaIdent === "body") {
+          if (areaModel.isEditable(rowIdx, colIdx)) {
+            this.tableScope.clearSelection();
+            this.tableScope.initRenderEditor(rowIdx, colIdx);
+          }
+        }
+
+        if (isTreeRow(row)) {
+          if (colIdx === this.getArrowColumnIndex()) {
+            // toggle collapsed/expanded:
+            event.preventDefault();
+            event.stopPropagation();
+            const tr: TreeRowIf<any> = row as TreeRow<any>;
+            tr.expanded = !tr.expanded;
+
+            if ("recalcVisibleTreeRows" in areaModel) {
+              // @ts-ignore
+              areaModel.recalcVisibleTreeRows();
+            }
+            this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth);
+            this.tableScope.adjustContainersAndRows();
+
+            this.updateCollapsedExpandedState(tr);
+          }
+        }
+      }
+    }
+
+    this.publishGeMouseEvent(event, 2);
+  };
+
+
+  /**
+   * Publishes a GeMouseEvent.
+   *
+   * @param {MouseEvent} event - The MouseEvent to publish.
+   * @param {number} clickCount - The number of clicks for the GeMouseEvent.
+   *
+   * @return {void}
+   */
+  private publishGeMouseEvent(event: MouseEvent, clickCount: number) {
+    this.mouseEvent = event;
+    this.geMouseEventOld = this.geMouseEvent?.clone();
+    this.geMouseEvent = this.tableScope.createGeMouseEvent(event);
+    if (this.geMouseEvent) {
+      this.geMouseEvent.clickCount = clickCount;
+    }
+
+    this.tableScope.onMouseClicked(this.geMouseEvent, this.geMouseEventOld);
+    this.tableScope.publishGeMouseEvent(this.geMouseEvent);
+    if (clickCount===1) {
+      this.tableScope.debounceRepaint();
+    }
+  }
+
+
+  /**
+   * Update the collapsed/expanded state of a tree row.
+   *
+   * @param {TreeRowIf<any>} tr - The tree row object.
+   * @returns {void}
+   */
+  private updateCollapsedExpandedState(tr: TreeRowIf<any>) {
+    // store expanded/collapsed:
+    const getRowId = this.tableScope.tableOptions?.autoRestoreOptions?.getRowId;
+    if (getRowId) {
+      const mode = this.tableScope.storeStateCollapsedExpandService?.collapsedExpandedStateGet().mode;
+      const push = (mode === "collapsed" && !tr.expanded) || (mode === "expanded" && tr.expanded);
+      const remove = (mode === "collapsed" && tr.expanded) || (mode === "expanded" && !tr.expanded);
+      const rowId = getRowId(tr.data);
+      if (push) {
+        this.tableScope.storeStateCollapsedExpandService?.collapsedStateIdsPush(rowId);
+      } else if (remove) {
+        this.tableScope.storeStateCollapsedExpandService?.collapsedStateIdsRemove(rowId);
+      }
+    }
+  }
+
+
+  private getArrowColumnIndex(): number {
+    const rowCheckboxVisible = this.tableScope.tableModel.isRowCheckboxVisible();
+    return rowCheckboxVisible ? 1 : 0;
+  }
+
+
+  private onMouseDown(evt: MouseEvent) {
+
+    if (!this.dragging) {
+      this.mouseEvent = evt;
+      this.startMouseEvent = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      this.tableScope.onMouseDown(this.startMouseEvent);
+      this.mouseDown = true;
+    }
+  }
+
+
+  private onMouseMove(evt: MouseEvent) {
+    this.mouseEvent = evt;
+    if (this.mouseDown) {
+      if (!this.dragging) {
+        this.dragging = true;
+        this.tableScope.setDragging(true);
+      }
+      requestAnimationFrame(this.mouseDraggingOnFrame.bind(this));
+    } else {
+      requestAnimationFrame(this.mouseMoveOnFrame.bind(this));
+    }
+  }
+
+
+  private onMouseUp(evt: MouseEvent) {
+    this.mouseEvent = evt;
+    if (this.dragging) {
+      requestAnimationFrame(this.mouseDraggingEndOnFrame.bind(this));
+    }
+    this.mouseDown = false;
+    this.dragging = false;
+    this.tableScope.setDragging(false);
+  }
+
+
+  private mouseDraggingOnFrame() {
+    if (this.mouseEvent) {
+      const mouseEvent = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      if (this.startMouseEvent?.originalEvent) {
+        mouseEvent.draggingX = this.mouseEvent.clientX - this.startMouseEvent.originalEvent.clientX;
+        mouseEvent.draggingY = this.mouseEvent.clientY - this.startMouseEvent.originalEvent.clientY;
+      }
+      this.tableScope.mouseDraggingOnFrame(mouseEvent, this.startMouseEvent);
+    }
+  }
+
+  private mouseDraggingEndOnFrame() {
+    if (this.mouseEvent) {
+      const mouseEvent = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      if (this.startMouseEvent?.originalEvent) {
+        mouseEvent.draggingX = this.mouseEvent.clientX - this.startMouseEvent.originalEvent.clientX;
+        mouseEvent.draggingY = this.mouseEvent.clientY - this.startMouseEvent.originalEvent.clientY;
+      }
+      this.tableScope.mouseDraggingEndOnFrame(mouseEvent);
+    }
+  }
+
+
+  private mouseMoveOnFrame() {
+    if (this.mouseEvent) {
+      const mouseMoveEvent = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      this.tableScope.mouseMove(mouseMoveEvent);
+    }
+  }
+
+
+}