@guiexpert/table 0.0.1 → 1.0.1

package/src/lib/table/factory/tree-factory.ts

@@ -0,0 +1,51 @@
+import { TreeRow } from "../data/common/tree-row";
+
+export class TreeFactory {
+
+
+  static buildTreeRows<T>(
+    data: T[],
+    childrenProperty: string = "children",
+    deepMaxLimit: number = 12): TreeRow<T>[] {
+
+    const ret: TreeRow<T>[] = [];
+    for (const r of data) {
+      ret.push(TreeFactory.buildTreeRow<T>(r, childrenProperty, undefined, 0, deepMaxLimit));
+    }
+    return ret;
+  }
+
+
+  static buildTreeRow<T>(
+    data: T,
+    childrenProperty: string = "children",
+    parent: TreeRow<T> = new TreeRow<T>(data, true, [], undefined, 0), //, false , '0', '0'),
+    deep: number = 0,
+    deepMaxLimit: number = 12): TreeRow<T> {
+
+    if (deep > deepMaxLimit) {
+      console.warn("Max deep limit reached: ", deep);
+      return parent;
+    }
+    // @ts-ignore
+    const children: T[] | undefined = data[childrenProperty];
+    if (children) {
+      for (const r of children) {
+        const tr = new TreeRow<T>(r, true, [], parent, deep + 1);
+        parent.children?.push(tr);
+        TreeFactory.buildTreeRow(
+          r,
+          childrenProperty,
+          tr,
+          deep + 1
+        );
+        if (deep > deepMaxLimit) {
+          console.warn("Max deep limit reached: ", deep);
+          return parent;
+        }
+      }
+    }
+    return parent;
+  }
+}
+

package/src/lib/table/focus/focus-model.if.ts

@@ -0,0 +1,14 @@
+export interface FocusModelIf {
+
+  clear(): void;
+
+  setFocus(rowIndex: number, columnIndex: number): void;
+
+  hasFocus(rowIndex: number, columnIndex: number): boolean;
+
+  getFocus(): [number, number];
+
+  hasChanged(): boolean;
+
+  clearChanged(): void;
+}

package/src/lib/table/focus/focus-model.ts

@@ -0,0 +1,48 @@
+import { FocusType } from "./focus.type";
+import { FocusModelIf } from "./focus-model.if";
+
+export class FocusModel implements FocusModelIf {
+
+  protected rowIndex: number = -1;
+  protected columnIndex: number = -1;
+  protected changed = false;
+
+  constructor(
+    public selectionType: FocusType = "none"
+  ) {
+  }
+
+  clearChanged(): void {
+    this.changed = false;
+  }
+
+  hasChanged(): boolean {
+    return this.changed;
+  }
+
+  clear(): void {
+    this.rowIndex = -1;
+    this.columnIndex = -1;
+  }
+
+
+  setFocus(
+    rowIndex: number,
+    columnIndex: number
+  ): void {
+    if (this.rowIndex !== rowIndex || this.columnIndex !== columnIndex) {
+      this.rowIndex = rowIndex;
+      this.columnIndex = columnIndex;
+      this.changed = true;
+    }
+  }
+
+  hasFocus(rowIndex: number, columnIndex: number): boolean {
+    return this.rowIndex === rowIndex && this.columnIndex === columnIndex;
+  }
+
+  getFocus(): [number, number] {
+    return [this.rowIndex, this.columnIndex];
+  }
+
+}

package/src/lib/table/focus/focus.type.ts

@@ -0,0 +1,4 @@
+export type FocusType = "none" | "cell" | "row";
+
+
+

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

@@ -0,0 +1,34 @@
+import { TableScope } from "./table-scope";
+import { AreaIdent, getAreaIdentByString } from "./data/tablemodel/area-ident.type";
+
+export class InputHandler {
+
+
+  constructor(
+    protected tableScope: TableScope
+  ) {
+    this.tableScope.hostElement.addEventListener("change", this.onHostElementChanged.bind(this));
+  }
+
+
+  private onHostElementChanged(event: Event) {
+    if (event.target instanceof HTMLInputElement
+      || event.target instanceof HTMLSelectElement
+      || event.target instanceof HTMLTextAreaElement
+    ) {
+      const htmpInputEle = event.target;
+      const areaIdentStr = htmpInputEle.getAttribute("data-area");
+      const rowIndexStr = htmpInputEle.getAttribute("data-row-index");
+      const columnIndexStr = htmpInputEle.getAttribute("data-col-index");
+
+      if (areaIdentStr && rowIndexStr && columnIndexStr) {
+        const area: AreaIdent = getAreaIdentByString(areaIdentStr);
+        const rowIndex = Number(rowIndexStr);
+        const columnIndex = Number(columnIndexStr);
+        this.tableScope.updateModelValueAfterEdit(area, rowIndex, columnIndex, htmpInputEle.value);
+      }
+    }
+  }
+
+
+}

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

@@ -0,0 +1,237 @@
+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";
+
+export class MouseHandler {
+
+  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))
+    );
+  }
+
+
+  private onContextmenu(evt: MouseEvent) {
+    this.mouseEvent = evt;
+    const mouseMoveEvent = this.tableScope.createGeMouseEvent(this.mouseEvent);
+    this.tableScope.contextmenu(mouseMoveEvent);
+  };
+
+
+  private onHostElementClicked(event: MouseEvent) {
+    const mouseTargetData: MouseTargetData = new MouseTargetData(event.target, this.tableScope);
+console.info(mouseTargetData)
+    if (mouseTargetData.action === 'toggleExpandCollapseAll'){
+      this.expandedAll = !this.expandedAll;
+      this.tableScope.toggleExpandCollapseAll(this.expandedAll);
+      event.preventDefault();
+      event.stopPropagation();
+
+    } else if (mouseTargetData.inputType === 'checkbox' && mouseTargetData.areaIdent){
+      this.tableScope.toggleRowCheckbox(mouseTargetData.rowIdx, mouseTargetData.colIdx, mouseTargetData.areaIdent);
+      //this.tableScope.repaint();
+      event.preventDefault();
+      event.stopPropagation();
+
+    } else if (mouseTargetData.row instanceof TreeRow && mouseTargetData.areaModel) {
+      const altClickOnFirstCol = mouseTargetData.colIdx === this.getArrowColumnIndex() && event.altKey;
+      const clickOnArrow = mouseTargetData.className.includes("ge-table-tree-arrow-div");
+      console.info(clickOnArrow, altClickOnFirstCol);
+
+      if (altClickOnFirstCol || clickOnArrow) {
+        // toggle collapsed/expanded:
+        event.preventDefault();
+        event.stopPropagation();
+        const tr: TreeRow<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);
+  };
+
+
+  private onHostElementDblClicked(event: MouseEvent) {
+
+    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 (row instanceof TreeRow) {
+          if (colIdx === this.getArrowColumnIndex()) {
+            // toggle collapsed/expanded:
+            event.preventDefault();
+            event.stopPropagation();
+            const tr: TreeRow<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);
+  };
+
+
+  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);
+  }
+
+
+  private updateCollapsedExpandedState(tr: TreeRow<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) {
+    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) {
+      this.dragging = 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;
+  }
+
+
+  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);
+    }
+  }
+
+  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);
+    }
+  }
+
+
+}