@guiexpert/table 1.1.18 → 1.1.20

package/src/lib/table/ele-scope.ts

@@ -0,0 +1,309 @@
+import { ConvenienceDomService } from "./service/convenience-dom.service";
+import { DivScope } from "./data/div-scope.type";
+import { TableModelIf } from "./data/tablemodel/table-model.if";
+import { TableOptionsIf } from "./data/options/table-options.if";
+import { GeoData } from "./data/geo-data";
+
+
+/**
+ * Represents an store for HTML elements.
+ * @class
+ */
+export class EleScope {
+
+  public scrollViewport: HTMLDivElement;
+
+  protected contentWrapperDiv: HTMLDivElement; // the big one. height: sum of rows height == tableModel.getContentHeightInPixel()
+  protected contentDiv: HTMLDivElement;
+
+  protected areaHeaderCenter: DivScope;
+  protected areaHeaderWest: DivScope;
+  protected areaHeaderEast: DivScope;
+
+  protected areaBodyCenter: DivScope;
+  protected areaBodyWest: DivScope;
+  protected areaBodyEast: DivScope;
+
+
+  protected areaFooterCenter: DivScope;
+  protected areaFooterWest: DivScope;
+  protected areaFooterEast: DivScope;
+
+  protected borderHeaderBottom: HTMLDivElement;
+  protected borderFooterTop: HTMLDivElement;
+  protected borderFixedWest: HTMLDivElement;
+  protected borderFixedEast: HTMLDivElement;
+
+  protected hoverRow: HTMLDivElement;
+  protected hoverColumn: HTMLDivElement;
+  protected draggingColumn: HTMLDivElement;
+
+  protected scrollTop = 0;
+
+  protected areaBodyWestGeo: GeoData = new GeoData();
+  protected areaBodyCenterGeo: GeoData = new GeoData();
+  protected areaBodyEastGeo: GeoData = new GeoData();
+
+
+  constructor(
+    readonly hostElement: HTMLDivElement,
+    readonly tableModel: TableModelIf,
+    protected readonly dom: ConvenienceDomService,
+    readonly tableOptions: TableOptionsIf
+  ) {
+    const hostEle = this.hostElement;
+
+    hostEle.innerText = ""; // clear
+    this.dom.setAttribute(hostEle, "tabindex", "0"); // needed for getting key events
+
+    this.dom.setStyle(
+      this.dom.addClass("ge-table", hostEle)
+      , "position", "relative");
+
+
+    this.hoverRow =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-hover-row", hostEle));
+    this.hoverColumn =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-hover-column", hostEle));
+    this.draggingColumn =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-dragging-column", hostEle));
+
+    this.areaHeaderWest = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-header ge-table-header-west", hostEle, "header", "west")));
+    this.areaHeaderCenter = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-header ge-table-header-center", hostEle, "header", "center")));
+    this.areaHeaderEast = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-header ge-table-header-east", hostEle, "body", "east")));
+
+    this.areaBodyWest = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-body ge-table-body-west", hostEle, "body", "west")));
+
+    this.areaBodyEast = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-body ge-table-body-east", hostEle, "body", "east")));
+
+    this.areaFooterWest = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-footer ge-table-footer-west", hostEle, "footer", "west")));
+
+    this.areaFooterCenter = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-footer ge-table-footer-center", hostEle, "footer", "center")));
+
+    this.areaFooterEast = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-footer ge-table-footer-east", hostEle, "footer", "east")));
+
+    this.scrollViewport =
+      dom.applyStyleOverflowAuto(
+        this.tableOptions.overflowX ?? "auto",
+        this.tableOptions.overflowY ?? "auto",
+        dom.applyStyleNoPadding(
+          dom.applyStylePosistionAbsolute(
+            dom.createAreaDivWithClass("ge-table-scroll-viewport", hostEle, "body", "center")
+          )
+        )
+      );
+
+    this.contentWrapperDiv = dom.applyStyleNoPadding(
+      dom.applyStylePosistionRelative(
+        dom.createDivWithClass("ge-table-scroll-content-wrapper", this.scrollViewport)));
+    this.contentDiv = dom.applyStyleNoPadding(
+      dom.applyStylePosistionRelative(
+        dom.createDivWithClass("ge-table-scroll-content", this.contentWrapperDiv)));
+
+    this.areaBodyCenter = dom.appendRelativeChildDiv(
+      dom.createDivWithClass("ge-table-body-center", this.contentDiv));
+
+    this.borderHeaderBottom =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-header-border", hostEle));
+
+    this.borderFixedWest =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-west-fixed-column-border", hostEle));
+
+    this.borderFixedEast =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-east-fixed-column-border", hostEle));
+
+    this.borderFooterTop =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-footer-border", hostEle));
+  }
+
+
+  /**
+   * Adjusts the containers and rows of the table based on the current state.
+   *
+   * @return {void}
+   */
+  adjustContainersAndRows() {
+    const padding = this.tableModel.getPadding();
+    const w = this.hostElement.clientWidth;
+    const h = this.hostElement.clientHeight;
+    this.dom.applyStyle(this.scrollViewport, {
+      width: `${(w - padding.left)}px`,
+      height: `${(h - padding.top)}px`,
+      top: `${padding.top}px`,
+      left: `${padding.left}px`
+    });
+
+    this.scrollTop = this.scrollViewport.scrollTop;
+
+    // Content:
+    this.dom.applyStyle(this.contentDiv, {
+      width: `${this.scrollViewport.clientWidth}px`,
+      height: `${this.scrollViewport.clientHeight}px`,
+      top: `${this.scrollTop}px`,
+      left: `${this.scrollViewport.scrollLeft}px`
+    });
+
+    // Body:
+    // Body/West:
+    this.areaBodyWestGeo.width = padding.left;
+    this.areaBodyWestGeo.height = (h - padding.top - padding.bottom);
+    this.areaBodyWestGeo.top = padding.top;
+    this.areaBodyWestGeo.left = 0;
+    this.dom.applyStyleInPx(this.areaBodyWest.parent, this.areaBodyWestGeo);
+    if (this.tableOptions.fixedWestSeparatorBorderVisible &&
+      this.tableModel.getFixedLeftColumnCount()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderFixedWest, {
+          width: `1px`,
+          height: `${this.areaBodyWestGeo.height}px`,
+          top: `${this.areaBodyWestGeo.top}px`,
+          left: `${this.areaBodyWestGeo.width}px`
+        })
+      );
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderFixedWest);
+    }
+
+    // Body/East:
+    this.areaBodyEastGeo.width = padding.right;
+    this.areaBodyEastGeo.height = (h - padding.top - padding.bottom);
+    this.areaBodyEastGeo.top = padding.top;
+    this.areaBodyEastGeo.left = w - padding.right;
+    this.dom.applyStyleInPx(this.areaBodyEast.parent, this.areaBodyEastGeo);
+
+    if (this.tableOptions.fixedEastSeparatorBorderVisible &&
+      this.tableModel.getFixedLeftColumnCount()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderFixedEast, {
+          width: `1px`,
+          height: `${this.areaBodyEastGeo.height}px`,
+          top: `${this.areaBodyEastGeo.top}px`,
+          left: `${this.areaBodyEastGeo.left}px`
+        }));
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderFixedEast);
+    }
+
+    // Body/Center:
+    this.areaBodyCenterGeo.width = (w - padding.left - padding.right);
+    this.areaBodyCenterGeo.height = (h - padding.top - padding.bottom);
+    this.areaBodyCenterGeo.top = 0;
+    this.areaBodyCenterGeo.left = 0;
+    this.dom.applyStyleInPx(this.areaBodyCenter.parent, this.areaBodyCenterGeo);
+
+
+    // Header:
+    this.dom.applyStyle(this.areaHeaderCenter.parent, {
+      width: `${w - padding.left - padding.right}px`,
+      height: `${padding.top}px`,
+      top: "0",
+      left: `${padding.left}px`
+    });
+    this.dom.applyStyle(this.areaHeaderWest.parent, {
+      width: `${padding.left}px`,
+      height: `${padding.top}px`,
+      top: "0",
+      left: "0"
+    });
+    this.dom.applyStyle(this.areaHeaderEast.parent, {
+      width: `${padding.right}px`,
+      height: `${padding.top}px`,
+      top: "0",
+      left: `${w - padding.right}px`
+    });
+    if (this.tableOptions.headerSeparatorBorderVisible &&
+      this.tableModel.isHeaderVisibe()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderHeaderBottom, {
+          width: `${w}px`,
+          height: "1px",
+          top: `${padding.top}px`,
+          left: "0px"
+        }));
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderHeaderBottom);
+    }
+
+    // Footer:
+    this.dom.applyStyle(this.areaFooterWest.parent, {
+      width: `${padding.left}px`,
+      height: `${padding.bottom}px`,
+      top: `${h - padding.bottom}px`,
+      left: "0"
+    });
+    this.dom.applyStyle(this.areaFooterCenter.parent, {
+      width: `${w - padding.left - padding.right}px`,
+      height: `${padding.bottom}px`,
+      top: `${h - padding.bottom}px`,
+      left: `${padding.left}px`
+    });
+    this.dom.applyStyle(this.areaFooterEast.parent, {
+      width: `${padding.right}px`,
+      height: `${padding.bottom}px`,
+      top: `${h - padding.bottom}px`,
+      left: `${w - padding.right}px`
+    });
+    if (this.tableOptions.footerSeparatorBorderVisible &&
+      this.tableModel.isFooterVisibe()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderFooterTop, {
+          width: `${w}px`,
+          height: "1px",
+          top: `${h - padding.bottom}px`,
+          left: "0px"
+        }));
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderFooterTop);
+    }
+
+    this.adjustAfterScrolling();
+  }
+
+  /**
+   * Adjusts the position or appearance of elements after scrolling.
+   * This method must be overwritten in child classes.
+   *
+   * @return {void}
+   */
+  adjustAfterScrolling() {
+    // must be overwritten
+  }
+
+  /**
+   * Resets the size of the wrapper div based on the content dimensions.
+   *
+   * @protected
+   *
+   * @returns {void} Returns nothing.
+   */
+  protected resetSizeOfWrapperDiv() {
+    const w = `${this.tableModel.getContentWidthInPixel()}px`;
+    const h = `${this.tableModel.getContentHeightInPixel() + 1}px`; // + 1, we want to see the last horizontal border
+    this.dom.setStyle(this.contentWrapperDiv, "width", w);
+    this.dom.setStyle(this.contentWrapperDiv, "height", h);
+  }
+
+}

package/src/lib/table/event-adapter.ts

@@ -0,0 +1,43 @@
+import { GeModelChangeEvent } from "./data/common/event/ge-model-change-event";
+import { GeMouseEvent } from "./data/common/event/ge-mouse-event";
+import { EventListenerIf } from "./event-listener.if";
+import { SelectionModelIf } from './selection/selection-model.if';
+import { FocusModelIf } from './focus/focus-model.if';
+
+/**
+ * EventAdapter class implements the EventListenerIf interface.
+ * It provides empty implementations for all the event listener methods.
+ *
+ * @class
+ * @implements {EventListenerIf}
+ */
+export class EventAdapter implements EventListenerIf {
+
+  onCheckboxChanged(_evt: any[]): void {
+  }
+
+  onContextmenu(_evt: GeMouseEvent): void {
+  }
+
+  onModelChanged(_evt: GeModelChangeEvent): void {
+  }
+
+  onMouseClicked(_evt: GeMouseEvent): void {
+  }
+
+  onMouseDragging(_evt: GeMouseEvent): void {
+  }
+
+  onMouseDraggingEnd(_evt: GeMouseEvent): void {
+  }
+
+  onMouseMoved(_evt: GeMouseEvent): void {
+  }
+
+  onSelectionChanged(_model: SelectionModelIf): void {
+  }
+
+  onFocusChanged(_model: FocusModelIf): void {
+  }
+
+}

package/src/lib/table/event-listener.if.ts

@@ -0,0 +1,32 @@
+import { GeMouseEvent } from "./data/common/event/ge-mouse-event";
+import { GeModelChangeEvent } from "./data/common/event/ge-model-change-event";
+import { SelectionModelIf } from './selection/selection-model.if';
+import { FocusModelIf } from './focus/focus-model.if';
+import { EventFocusChangedListenerIf } from './focus/event-focus-changed-listener.if';
+import { EventSelectionChangedListenerIf } from './selection/event-selection-changed-listener.if';
+
+/**
+ * Interface representing an event listener.
+ *
+ * @interface
+ */
+export interface EventListenerIf extends EventFocusChangedListenerIf, EventSelectionChangedListenerIf {
+
+  onContextmenu(evt: GeMouseEvent): void;
+
+  onMouseMoved(evt: GeMouseEvent): void;
+
+  onMouseDraggingEnd(evt: GeMouseEvent): void;
+
+  onMouseDragging(evt: GeMouseEvent): void;
+
+  onMouseClicked(evt: GeMouseEvent): void;
+
+  onCheckboxChanged(evt: any[]): void;
+
+  onModelChanged(evt: GeModelChangeEvent): void;
+
+  onSelectionChanged(model: SelectionModelIf): void;
+
+  onFocusChanged(model: FocusModelIf): void;
+}