@guiexpert/table 0.0.2 → 1.0.1

package/src/lib/table/data/tablemodel/cellgroup/cell-group-ext.ts

@@ -0,0 +1,167 @@
+import { CellGroupIf } from "./cell-group.if";
+import { CellGroup } from "./cell-group";
+
+export class CellGroupExt extends CellGroup {
+
+  public override impl = 'CellGroupExt';
+
+  public override children: CellGroupExt[] | undefined = undefined;
+  public leftNeighbour: CellGroupExt | undefined = undefined;
+  public rightNeighbour: CellGroupExt | undefined = undefined;
+
+  constructor(
+    cellGroup: CellGroupIf,
+    public rowIndex: number = 0,
+    public childIndex: number = 0,
+    public parent?: CellGroupExt
+  ) {
+    super(
+      cellGroup.data,
+      cellGroup.property,
+      cellGroup.toggle,
+      cellGroup.closed,
+      cellGroup.visibility,
+      cellGroup.children
+    );
+  }
+
+  ownColumn(): boolean {
+    return !!this.property;
+  }
+
+  override toString(): string {
+    return this.data + "";
+  }
+
+  // TODO hier gehts weiter!!!!!!!!!!!
+  getColumnIndex(): number {
+    if (!this.parent) {
+      // root level (rowIndex=0)
+      if (this.leftNeighbour) {
+        // return this.leftNeighbour.getBiggestChildColumnIndex() + 1;
+      }
+      return 0;
+    }
+    return this.parent.getColumnIndex() + this.childIndex;
+  }
+
+  //
+  // getLeftClaimedSpaces(): number{
+  //   if (this.leftNeighbour) {
+  //
+  //   }
+  //   return 0;
+  // }
+
+  // getSumOfLeafs(cg: CellGroupExt, sum: number = 0): number {
+  //   if (cg.children?.length) {
+  //     for (let i = 0; i < cg.children.length; i++) {
+  //       const child = cg.children[i];
+  //       if (child.children?.length) {
+  //         sum = this.getSumOfLeafs(child, sum);
+  //       } else {
+  //         sum++;
+  //       }
+  //     }
+  //   }
+  //   if (this.ownColumn()) {
+  //     sum++;
+  //   }
+  //   //console.info(cg.data, sum)
+  //   return sum;
+  // }
+  //
+  // getBiggestChildColumnIndex(): number {
+  //   if (this.children?.length) {
+  //     return Math.max(...this.children.map(c => c.getBiggestChildColumnIndex()));
+  //   }
+  //   return this.childIndex;
+  // }
+
+  isVisible(): boolean {
+    if (!this.parent) {
+      return true;
+    }
+    if (this.visibility === "always") {
+      return this.parent.isVisible();
+    }
+    if (this.visibility === "normal" || !this.visibility) {
+      return this.parent.isVisible() && !this.parent.closed;
+    }
+    if (this.visibility === "inverted") {
+      return this.parent.isVisible() && this.parent.closed;
+    }
+    return true;
+  }
+
+  // should be rendered
+  claimsSpace(): boolean {
+    return this.isVisible() && (this.ownColumn() || this.closed);
+  }
+
+
+  getColumnCount(
+    cg: CellGroupExt = this,
+    ret: number = 0
+  ): number {
+    if (cg?.claimsSpace()) {
+      ret++;
+    }
+    if (cg?.children?.length) {
+      for (const child of cg.children) {
+        ret = this.getColumnCount(child, ret);
+      }
+    }
+    return ret;
+  }
+
+  getRowSpan(
+    cg: CellGroupExt = this,
+    maxRowCount: number
+  ): number {
+    if (cg?.claimsSpace()) {
+      return maxRowCount - this.getParentCount(cg, 0);
+    }
+    return 1;
+  }
+
+
+  getParentCount(
+    cg: CellGroupExt = this,
+    ret: number = 0
+  ): number {
+    if (cg.parent) {
+      ret = ret + 1 + this.getParentCount(cg.parent, ret);
+    }
+    return ret;
+  }
+
+
+  log(maxRowCount: number) {
+    const tabs = "\t\t\t\t\t\t\t\t\t\t\t\t\t".substring(0, 2 * this.rowIndex);
+    const col = `${this.getColumnIndex()}`;
+    // const bcol = `${this.getBiggestChildColumnIndex()}`;
+    const columnCount = `${this.getColumnCount(this)}`;
+    const rowSpan = `${this.getRowSpan(this, maxRowCount)}`;
+    const pc = `${this.getParentCount(this)}`;
+    console.info(`${tabs + this.data}
+      childIndex:${this.childIndex}
+      row:${this.rowIndex}
+      col:${col}
+      vis:${this.visibility}
+      closed:${this.closed}
+      isVisible:${this.isVisible()}
+      ownColumn:${this.ownColumn()}
+      claimsSpace:${this.claimsSpace()}
+      colCount:${columnCount}
+      rowSpan:${rowSpan}
+      pc:${pc}`.replace(/[ \n]+/g, " "));
+    // console.info(`${tabs + this.data}`);
+    if (this.children) {
+      for (const child of this.children) {
+        child.log(maxRowCount);
+      }
+    }
+  }
+
+}

package/src/lib/table/data/tablemodel/cellgroup/cell-group.if.ts

@@ -0,0 +1,12 @@
+export interface CellGroupIf {
+
+  data: any;
+  property?: string; // if a property is set, then this element has its own column
+  toggle?: boolean; // toggle control will be displayed
+  closed?: boolean; // current state
+  visibility?: "always" | "inverted" | "normal" | undefined;
+  children?: CellGroupIf[] | undefined;
+
+  impl?:string;
+
+}

package/src/lib/table/data/tablemodel/cellgroup/cell-group.ts

@@ -0,0 +1,18 @@
+import { CellGroupIf } from "./cell-group.if";
+
+export class CellGroup implements CellGroupIf {
+
+  public impl = 'CellGroup';
+
+  constructor(
+    public data: any,
+    public property?: string,
+    public toggle?: boolean,
+    public closed: boolean = false,
+    public visibility: "always" | "inverted" | "normal" | undefined = "normal",
+    public children: CellGroupIf[] | undefined = undefined
+  ) {
+  }
+
+
+}

package/src/lib/table/data/tablemodel/cellgroup/cellgroup-factory.ts

@@ -0,0 +1,148 @@
+import { CellGroupIf } from "./cell-group.if";
+import { ColumnDefIf } from "../column/column-def.if";
+import { ColumnDef } from "../column/column-def";
+import { CellGroupExt } from "./cell-group-ext";
+
+export class CellgroupFactory {
+
+
+  static buildColumnDefs(
+    cellGroups: CellGroupIf[],
+    ret: ColumnDefIf[] = []
+  ): ColumnDefIf[] {
+
+    for (const cellGroup of cellGroups) {
+      if (cellGroup.property) {
+        ret.push(ColumnDef.create({
+            property: cellGroup.property,
+            headerLabel: cellGroup.data ? cellGroup.data : cellGroup.property,
+            isVisible: () => {
+              // @ts-ignore
+              if (typeof cellGroup["isVisible"] === "function") {
+                const cge = cellGroup as CellGroupExt;
+                return cge.isVisible();
+              }
+              return true;
+            }
+          })
+        );
+      }
+      if (cellGroup.children) {
+        CellgroupFactory.buildColumnDefs(cellGroup.children, ret);
+      }
+    }
+    return ret;
+  }
+/*
+  static buildDeepMap(
+    cellGroups: CellGroupIf[],
+    ret: { [key: string]: number } = {},
+    deep = 0
+  ): { [key: string]: number } {
+
+    for (const cellGroup of cellGroups) {
+      //if (cellGroup.property) {
+      ret[cellGroup.data] = deep;
+      //}
+      if (cellGroup.children) {
+        CellgroupFactory.buildDeepMap(cellGroup.children, ret, deep + 1);
+      }
+    }
+    return ret;
+  }
+*/
+  static buildGroupExts(
+    cellGroups: CellGroupIf[],
+    ret: CellGroupExt[] = [],
+    deep = 0,
+    parent?: CellGroupExt
+  ): CellGroupExt[] {
+
+    let last: CellGroupExt | undefined = undefined;
+    for (let i = 0; i < cellGroups.length; i++) {
+      const cellGroup = cellGroups[i];
+      const cge = new CellGroupExt(cellGroup, deep, i, parent);
+
+      if (last) {
+        cge.leftNeighbour = last;
+        last.rightNeighbour = cge;
+      }
+      ret.push(cge);
+      if (cellGroup.children) {
+        cge.children = CellgroupFactory.buildGroupExts(cellGroup.children, [], deep + 1, cge);
+      }
+      last = cge;
+    }
+    return ret;
+  }
+
+
+  static flattenGroupExts(
+    cellGroups: CellGroupExt[],
+    ret: CellGroupExt[] = []
+  ): CellGroupExt[] {
+
+    for (const cellGroup of cellGroups) {
+      ret.push(cellGroup);
+      if (cellGroup.children) {
+        CellgroupFactory.flattenGroupExts(cellGroup.children, ret);
+      }
+    }
+    return ret;
+  }
+
+  /*
+
+  Gold                                                           Hohenwarte
+  Gold AB                         Gold CD                        HOH AB                                  HOH CD
+  .          Gold A     Gold B    Gold C   Gold D    Gold Sum    .           HOH Loc    HOH A    HOH B   HOH C    HOH D
+
+  */
+
+  static buildArrayOfArrays(
+    flatten: CellGroupExt[],
+    arrs: (CellGroupExt | null | undefined)[][]
+  ): (CellGroupExt | null | undefined)[][] {
+
+    let col = -1;
+    let lastRowIdx = 99999;
+    for (const cellGroup of flatten) {
+      if (cellGroup.rowIndex <= lastRowIdx) {
+        col++;
+        for (let r = 0; r < arrs.length; r++) {
+          arrs[r][col] = null;
+        }
+      }
+
+      arrs[cellGroup.rowIndex][col] = cellGroup;
+      lastRowIdx = cellGroup.rowIndex;
+
+      if (cellGroup.ownColumn() && cellGroup.children?.length) {
+        for (let r = cellGroup.rowIndex + 1; r < arrs.length; r++) {
+          arrs[r][col] = undefined;
+        }
+        col++;
+        for (let r = 0; r < arrs.length; r++) {
+          arrs[r][col] = null;
+        }
+      }
+    }
+    return arrs;
+  }
+
+
+  static iterateThrowColumns(
+    sb: string[] = [],
+    cellGroups: CellGroupExt[]
+  ) {
+
+    for (const cellGroup of cellGroups) {
+      sb.push(cellGroup.data + "    rowIndex:" + cellGroup.rowIndex);
+      if (cellGroup.children?.length) {
+        CellgroupFactory.iterateThrowColumns(sb, cellGroup.children);
+      }
+    }
+  }
+
+}
+

package/src/lib/table/data/tablemodel/column/column-def.if.ts

@@ -0,0 +1,28 @@
+import { SizeIf } from "../../common/size.if";
+import { CellRendererIf } from "../../../renderer/cell-render.if";
+import { AreaObjectMapType } from "../../common/area-map.type";
+import { BooleanFunction } from "../../common/boolean-function";
+import { SortState } from "../../common/sort-state.type";
+import { GetEditRenderer } from "../../../renderer/edit/edit-cell-renderer.type";
+import { editInputPipe } from "../../../renderer/edit/edit-input-pipe.if";
+
+
+export interface ColumnDefIf {
+  property: string;
+  headerLabel: string;
+  width: SizeIf;
+  minWidth: SizeIf;
+  maxWidth: SizeIf;
+  rendererMap: AreaObjectMapType<CellRendererIf>;
+  classes: AreaObjectMapType<string[]>;
+  sortable?: BooleanFunction,
+  sortIconVisible?: BooleanFunction,
+  sortComparator?: <T>(a: T, b: T) => number,
+  sortState?: SortState,
+  sortStatesOrder?: SortState[],
+  editable?: BooleanFunction,
+  isVisible?: BooleanFunction,
+  getEditRenderer?: GetEditRenderer,
+  editInputPipe?: editInputPipe
+}
+

package/src/lib/table/data/tablemodel/column/column-def.ts

@@ -0,0 +1,104 @@
+import { Size } from "../../common/size";
+import { SizeIf } from "../../common/size.if";
+import { ColumnDefIf } from "./column-def.if";
+import { CellRendererIf } from "../../../renderer/cell-render.if";
+import { AreaObjectMapType } from "../../common/area-map.type";
+import { AreaObjectMap } from "../../common/area-map";
+import { BooleanFunction, FalseFn, TrueFn } from "../../common/boolean-function";
+import { SortState } from "../../common/sort-state.type";
+import { GetEditRenderer } from "../../../renderer/edit/edit-cell-renderer.type";
+import { editInputPipe } from "../../../renderer/edit/edit-input-pipe.if";
+
+
+export class ColumnDef implements ColumnDefIf {
+
+  public visible = true;
+
+  constructor(
+    public property: string,
+    public headerLabel: string,
+    public width: SizeIf = new Size(100, "px"),
+    public classes: AreaObjectMapType<string[]> = new AreaObjectMap<string[]>(),
+    public rendererMap: AreaObjectMapType<CellRendererIf> = new AreaObjectMap<CellRendererIf>(),
+    public minWidth: SizeIf = new Size(100, "px"),
+    public maxWidth: SizeIf = new Size(100, "px"),
+    public sortable?: BooleanFunction,
+    public sortComparator?: <T>(a: T, b: T) => number,
+    public sortState?: SortState,
+    public sortStatesOrder?: SortState[],
+    public sortIconVisible?: BooleanFunction,
+    public editable?: BooleanFunction,
+    public getEditRenderer?: GetEditRenderer,
+    public editInputPipe?: editInputPipe,
+    public isVisible: BooleanFunction = ()=>this.visible
+  ) {
+  }
+
+  static bodyRenderer(bodyRenderer: CellRendererIf) {
+    return new AreaObjectMap<CellRendererIf>(
+      undefined,
+      bodyRenderer,
+      undefined
+    );
+  }
+
+  static create(param: {
+    property?: string,
+    headerLabel?: string,
+    width?: SizeIf,
+    minWidth?: SizeIf,
+    maxWidth?: SizeIf,
+    headerRenderer?: CellRendererIf,
+    bodyRenderer?: CellRendererIf,
+    footerRenderer?: CellRendererIf,
+    headerClasses?: string[]
+    bodyClasses?: string[]
+    footerClasses?: string[],
+    sortable?: BooleanFunction,
+    sortIconVisible?: BooleanFunction,
+    sortComparator?: <T>(a: T, b: T) => number,
+    sortState?: SortState,
+    sortStatesOrder?: SortState[],
+    editable?: BooleanFunction,
+    isVisible?: BooleanFunction,
+    getEditRenderer?: GetEditRenderer,
+    editInputPipe?: editInputPipe,
+  }): ColumnDefIf {
+
+    const am = new AreaObjectMap<CellRendererIf>(
+      param.headerRenderer,
+      param.bodyRenderer,
+      param.footerRenderer
+    );
+
+    const cm = new AreaObjectMap<string[]>(
+      param.headerClasses,
+      param.bodyClasses,
+      param.footerClasses
+    );
+
+    const sortIconVisible = param.sortIconVisible ?? param.sortable ?? FalseFn;
+    const editable = param.editable ?? param.editable ?? FalseFn;
+    const isVisible = param.isVisible ?? param.isVisible ?? TrueFn;
+
+    return new ColumnDef(
+      param.property ?? "",
+      param.headerLabel ?? "",
+      param.width ?? new Size(100, "px"),
+      cm,
+      am,
+      param.minWidth ?? new Size(100, "px"),
+      param.maxWidth ?? new Size(100, "px"),
+      param.sortable,
+      param.sortComparator,
+      param.sortState,
+      param.sortStatesOrder,
+      sortIconVisible,
+      editable,
+      param.getEditRenderer,
+      param.editInputPipe,
+      isVisible,
+    );
+  }
+
+}

package/src/lib/table/data/tablemodel/padding.ts

@@ -0,0 +1,9 @@
+export class Padding {
+  constructor(
+    public top: number = 0,
+    public right: number = 0,
+    public bottom: number = 0,
+    public left: number = 0
+  ) {
+  }
+}

package/src/lib/table/data/tablemodel/table-model.if.ts

@@ -0,0 +1,90 @@
+import { Padding } from "./padding";
+import { AreaIdent } from "./area-ident.type";
+import { ColumnDefIf } from "./column/column-def.if";
+import { AreaModelIf } from "./areamodel/area-model.if";
+import { FilterFunction } from "../common/filter-function";
+import { SortItem } from "../common/sort-item";
+import { SelectionModelIf } from "../../selection/selection-model.if";
+
+/**
+ * The TableModelIf is on one hand a container for the header, body, and footer models
+ * (see : #getAreaModel, and #AreaModelIf), and on the other hand the master of
+ * the column information (#getColumnCount(), #getColumnWidth(columnIndex: number)).
+ *
+ * If getFixedLeftColumnCount() returns a value greater than 0, a fixed west area will be rendered in the
+ * header, body, and footer. A value greater than 0 for getFixedLeftColumnCount()
+ * will result in the presence of an east area.
+ * <pre>
+ *  +----------------+-------------------+--------------+
+ *  |  header/west   |  header/center    | header/east  |
+ *  +----------------+-------------------+--------------+
+ *  |  body/west     |  body/center      | body/east    |
+ *  +----------------+-------------------+--------------+
+ *  |  footer/west   |  footer/center    | footer/east  |
+ *  +----------------+-------------------+--------------+</pre>
+ *
+ */
+export interface TableModelIf {
+
+  changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void;
+
+  isSortable(colIdx: number): boolean;
+
+  init(): void;
+
+  getColumnCount(): number;
+
+  getColumnWidth(columnIndex: number): number;
+
+  getXPosByColumnIndex(columnIndex: number): number;
+
+  getAreaModel(rowAreaIdent: AreaIdent): AreaModelIf;
+
+  getBodyModel(): AreaModelIf;
+
+  getFixedLeftColumnCount(): number;
+
+  getFixedRightColumnCount(): number;
+
+  isHeaderVisibe(): boolean;
+
+  isFooterVisibe(): boolean;
+
+  isRowCheckboxVisible(): boolean;
+
+  getRowHeight(rowAreaIdent: AreaIdent, rowIndex: number): number;
+
+  getColumnDef(index: number): ColumnDefIf | undefined;
+
+  getColumnDefs(): ColumnDefIf[] | undefined;
+
+  getColumnProperty(columnIndex: number): string;
+
+  getBodyRowByIndex(rowIndex: number): any;
+
+  getColumnWidth(columnIndex: number): number;
+
+  setColumnWidth(columnIndex: number, width: number): void;
+
+
+  // ----------------------------------
+  recalcSize(clientWidth: number): void;
+
+  recalcPadding(): void;
+
+  recalcHeightAndPadding(): void;
+
+  getPadding(): Padding;
+
+  getContentHeightInPixel(): number;
+
+  getContentWidthInPixel(): number;
+
+
+  // ----------------------------------
+  externalFilterChanged<T>(predictFn: FilterFunction<T>): void;
+
+  doSort(sortItems: SortItem[]): boolean;
+
+  getSelectionModel(): SelectionModelIf|undefined;
+}