@guiexpert/table 0.0.2 → 1.0.2

package/src/lib/table/data/common/args-render-cell-div.ts

@@ -0,0 +1,18 @@
+import { AreaModelIf } from "../tablemodel/areamodel/area-model.if";
+import { AreaIdent } from "../tablemodel/area-ident.type";
+import { SideIdent } from "../side-ident.type";
+
+export interface ArgsRenderCellDiv {
+  areaModel: AreaModelIf;
+  areaIdent: AreaIdent;
+  sideIdent: SideIdent;
+  rowIndex: number;
+  index: number;
+  left: number;
+  width: number;
+  height: number;
+  top: number;
+  parent: HTMLDivElement;
+  lastRowOfModel: boolean;
+  gammaRange: boolean;
+}

package/src/lib/table/data/common/boolean-function.ts

@@ -0,0 +1,4 @@
+export type BooleanFunction = () => boolean;
+
+export const TrueFn = () => true;
+export const FalseFn = () => false;

package/src/lib/table/data/common/cell-range.ts

@@ -0,0 +1,57 @@
+export class CellRange {
+
+
+  constructor(
+    public r1: number,
+    public c1: number,
+    public r2: number,
+    public c2: number,
+    public gammaRange: boolean = false) {
+  }
+
+  static create(params: {
+    rowIndex1: number,
+    columnIndex1: number,
+    rowIndex2: number,
+    columnIndex2: number,
+    gammaRange?: boolean
+  }): CellRange {
+    if (params.gammaRange === undefined) {
+      params.gammaRange = false;
+    }
+    return new CellRange(
+      params.rowIndex1,
+      params.columnIndex1,
+      params.rowIndex2,
+      params.columnIndex2,
+      params.gammaRange
+    );
+  }
+
+  static singleCell(
+    rowIndex: number,
+    columnIndex: number
+  ): CellRange {
+    return new CellRange(rowIndex, columnIndex, rowIndex, columnIndex);
+  }
+
+  static singleRow(
+    rowIndex: number
+  ): CellRange {
+    return new CellRange(rowIndex, 0, rowIndex, Number.MAX_SAFE_INTEGER);
+  }
+
+  static singleColumn(
+    columnIndex: number
+  ): CellRange {
+    return new CellRange(0, columnIndex, Number.MAX_SAFE_INTEGER, columnIndex);
+  }
+
+  isInRange(rowIndex: number, columnIndex: number): boolean {
+    return rowIndex >= this.r1
+      && rowIndex <= this.r2
+      && columnIndex >= this.c1
+      && columnIndex <= this.c2;
+  }
+
+}

package/src/lib/table/data/common/checkbox-column-def.ts

@@ -0,0 +1,25 @@
+import { Size } from "./size";
+import { SizeIf } from "./size.if";
+import { ColumnDefIf } from "../tablemodel/column/column-def.if";
+import { CellRendererIf } from "../../renderer/cell-render.if";
+import { CheckboxCellRenderer } from "../../renderer/checkbox-cell-renderer";
+import { AreaObjectMapType } from "./area-map.type";
+import { AreaObjectMap } from "./area-map";
+
+export class CheckboxColumnDef implements ColumnDefIf {
+
+
+  public property = "CheckboxColumn";
+  public headerLabel = "";
+  public width: SizeIf = new Size(50, "px");
+  public minWidth: SizeIf = new Size(50, "px");
+  public maxWidth: SizeIf = new Size(100, "px");
+  public rendererMap: AreaObjectMapType<CellRendererIf> = new AreaObjectMap<CellRendererIf>(new CheckboxCellRenderer(), new CheckboxCellRenderer(), undefined);
+  public classes: AreaObjectMapType<string[]> = new AreaObjectMap<string[]>(
+    [],
+    ["ge-table-text-align-left"],
+    []
+  );
+
+
+}

package/src/lib/table/data/common/checked-type.ts

@@ -0,0 +1 @@
+export type CheckedType = "none" | "semi" | "full";

package/src/lib/table/data/common/event/ge-cell-indices.ts

@@ -0,0 +1,9 @@
+export class GeCellIndices {
+
+  constructor(
+    public rowIndex: number = -1,
+    public columnIndex: number = -1
+  ) {
+  }
+
+}

package/src/lib/table/data/common/event/ge-key-event.ts

@@ -0,0 +1,10 @@
+export class GeKeyEvent {
+
+  constructor(
+    public status: "down" | "up" = "down",
+    public originalEvent?: KeyboardEvent
+  ) {
+  }
+
+
+}

package/src/lib/table/data/common/event/ge-model-change-event.ts

@@ -0,0 +1,13 @@
+import { GeCellIndices } from "./ge-cell-indices";
+
+export class GeModelChangeEvent {
+
+  constructor(
+    public cells: GeCellIndices[]
+  ) {
+  }
+
+  static createSingle(rowIndex: number, columnIndex: number) {
+    return new GeModelChangeEvent([new GeCellIndices(rowIndex, columnIndex)]);
+  }
+}

package/src/lib/table/data/common/event/ge-mouse-event.ts

@@ -0,0 +1,38 @@
+import { AreaIdent } from "../../tablemodel/area-ident.type";
+import { SideIdent } from "../../side-ident.type";
+
+export class GeMouseEvent {
+
+
+  constructor(
+    public rowIndex: number = -1,
+    public rowTop: number = -1,
+    public columnIndex: number = -1,
+    public columnLeft: number = -1,
+    public areaIdent?: AreaIdent,
+    public sideIdent?: SideIdent,
+    public originalEvent?: MouseEvent,
+    public clickCount: number = 0,
+    public draggingX: number = 0,
+    public draggingY: number = 0,
+    public action: string | null = ""
+  ) {
+  }
+
+  clone(): GeMouseEvent {
+    return new GeMouseEvent(
+      this.rowIndex,
+      this.rowTop,
+      this.columnIndex,
+      this.columnLeft,
+      this.areaIdent,
+      this.sideIdent,
+      this.originalEvent,
+      this.clickCount,
+      this.draggingX,
+      this.draggingY,
+      this.action
+    );
+  }
+
+}

package/src/lib/table/data/common/event/input/table-cell-update-event.if.ts

@@ -0,0 +1,10 @@
+import { AreaIdent } from "../../../tablemodel/area-ident.type";
+
+export interface TableCellUpdateEventIf {
+
+  area: AreaIdent;
+  rowIndex: number;
+  columnIndex: number;
+  value: any;
+
+}

package/src/lib/table/data/common/event/input/table-cell-update-event.ts

@@ -0,0 +1,14 @@
+import { TableCellUpdateEventIf } from "./table-cell-update-event.if";
+import { AreaIdent } from "../../../tablemodel/area-ident.type";
+
+export class TableCellUpdateEvent implements TableCellUpdateEventIf {
+
+  constructor(
+    public area: AreaIdent,
+    public rowIndex: number,
+    public columnIndex: number,
+    public value: any
+  ) {
+  }
+
+}

package/src/lib/table/data/common/index-and-px.ts

@@ -0,0 +1,9 @@
+export class IndexAndPx {
+
+  constructor(
+    public index: number,
+    public px: number
+  ) {
+  }
+
+}

package/src/lib/table/data/common/size.if.ts

@@ -0,0 +1,4 @@
+export interface SizeIf {
+  value: number;
+  unit: "px" | "%";
+}

package/src/lib/table/data/common/size.ts

@@ -0,0 +1,9 @@
+import { SizeIf } from "./size.if";
+
+export class Size implements SizeIf {
+  constructor(
+    public value: number = 100,
+    public unit: "px" | "%" = "px"
+  ) {
+  }
+}

package/src/lib/table/data/common/sizes.ts

@@ -0,0 +1,35 @@
+import { Size } from "./size";
+
+
+export const px300 = new Size(300, "px");
+export const px290 = new Size(290, "px");
+export const px280 = new Size(280, "px");
+export const px270 = new Size(270, "px");
+export const px260 = new Size(260, "px");
+export const px250 = new Size(250, "px");
+export const px240 = new Size(240, "px");
+export const px230 = new Size(230, "px");
+export const px220 = new Size(220, "px");
+export const px210 = new Size(210, "px");
+export const px200 = new Size(200, "px");
+export const px190 = new Size(190, "px");
+export const px180 = new Size(180, "px");
+export const px170 = new Size(170, "px");
+export const px160 = new Size(160, "px");
+export const px150 = new Size(150, "px");
+export const px140 = new Size(140, "px");
+export const px130 = new Size(130, "px");
+export const px120 = new Size(120, "px");
+export const px110 = new Size(110, "px");
+export const px100 = new Size(100, "px");
+export const px90 = new Size(90, "px");
+export const px80 = new Size(80, "px");
+export const px70 = new Size(70, "px");
+export const px60 = new Size(60, "px");
+export const px50 = new Size(50, "px");
+export const px40 = new Size(40, "px");
+export const px30 = new Size(30, "px");
+export const px20 = new Size(20, "px");
+export const px10 = new Size(10, "px");
+export const px0 = new Size(0, "px");
+

package/src/lib/table/data/common/sort-item.ts

@@ -0,0 +1,11 @@
+import { SortState } from "./sort-state.type";
+
+export class SortItem {
+
+  constructor(
+    public columnIndex: number,
+    public sortState: SortState
+  ) {
+  }
+
+}

package/src/lib/table/data/common/tree-row-if.ts

@@ -0,0 +1,11 @@
+import { TreeRow } from "./tree-row";
+
+export interface TreeRowIf<T> {
+  data: T;
+  expanded: boolean;
+  children: TreeRow<T>[] | undefined;
+  parent: TreeRow<T> | undefined;
+  deep: number;
+  checked: boolean;
+  keep: boolean;
+}

package/src/lib/table/data/common/tree-row.ts

@@ -0,0 +1,16 @@
+import { TreeRowIf } from "./tree-row-if";
+
+export class TreeRow<T> implements TreeRowIf<T> {
+
+  constructor(
+    public data: T,
+    public expanded: boolean = true,
+    public children: TreeRowIf<T>[] | undefined,
+    public parent: TreeRowIf<T> | undefined,
+    public deep: number = 0,
+    public checked: boolean = false,
+    public keep: boolean = false
+  ) {
+  }
+
+}

package/src/lib/table/data/common/value-label.if.ts

@@ -0,0 +1,6 @@
+export interface ValueLabelIf {
+
+  value: any;
+  label: string;
+
+}

package/src/lib/table/data/common/value-label.ts

@@ -0,0 +1,13 @@
+import { ValueLabelIf } from "./value-label.if";
+
+
+export class ValueLabel implements ValueLabelIf {
+
+
+  constructor(
+    public value: any,
+    public label: string
+  ) {
+  }
+
+}

package/src/lib/table/data/div-scope.type.ts

@@ -0,0 +1,5 @@
+export type DivScope = {
+  parent: HTMLDivElement,
+  child: HTMLDivElement,
+  cache: { [key: number]: HTMLDivElement }
+};

package/src/lib/table/data/event/mouse-target-data.ts

@@ -0,0 +1,45 @@
+import { AreaIdent, getAreaIdentByString } from "../tablemodel/area-ident.type";
+import { AreaModelIf } from "../tablemodel/areamodel/area-model.if";
+import { TableScope } from "../../table-scope";
+
+export class MouseTargetData {
+
+  rowIdx: number = -1;
+  colIdx: number = -1;
+  areaIdent?: AreaIdent;
+  areaModel?: AreaModelIf;
+  row?: any;
+  value?: any;
+  action: string | null = null;
+  inputType: string | null = null;
+  className: string = "";
+
+
+  constructor(
+    eventTarget: EventTarget | null,
+    tableScope: TableScope) {
+
+    if (eventTarget === null) return; // skip
+
+    if (eventTarget instanceof HTMLDivElement
+      || eventTarget instanceof HTMLSpanElement
+      || eventTarget instanceof HTMLInputElement) {
+
+      this.className = eventTarget.className;
+      this.action = eventTarget.getAttribute("data-ge-action");
+      this.inputType = eventTarget.getAttribute("data-input-type");
+      this.rowIdx = Number(eventTarget.getAttribute("data-row-index"));
+      this.colIdx = Number(eventTarget.getAttribute("data-col-index"));
+      const area = eventTarget.getAttribute("data-area");
+      if (area) {
+        this.areaIdent = getAreaIdentByString(area);
+        this.areaModel = tableScope.tableModel.getAreaModel(this.areaIdent);
+        this.row = this.areaModel.getRowByIndex(this.rowIdx);
+      }
+      if (eventTarget instanceof HTMLInputElement) {
+        const target = eventTarget as HTMLInputElement;
+        this.value = target.value;
+      }
+    }
+  }
+}

package/src/lib/table/data/geo-data.ts

@@ -0,0 +1,13 @@
+export class GeoData {
+
+  constructor(
+    public left: number = 0,
+    public width: number = 0,
+    public height: number = 0,
+    public top: number = 0,
+    public index?: number
+  ) {
+  }
+
+
+}

package/src/lib/table/data/options/auto-restore-options.if.ts

@@ -0,0 +1,21 @@
+export type IsSameFn<T> = (r1: T, r2: T, optionsIf: AutoRestoreOptionsIf<T>) => boolean;
+export type GetRowIdFn<T> = ((row: T) => string | number);
+export type GetStorageKeyFn = (() => string);
+
+/**
+ * See TableOptionsIf#autoRestoreOptions()
+ */
+export interface AutoRestoreOptionsIf<T> {
+
+  autoRestoreSortingState: boolean;
+  autoRestoreCollapsedExpandedState?: boolean;
+  autoRestoreScrollPosition?: boolean;
+
+  autoRestoreCheckedState?: boolean;
+  autoRestoreSelectedState?: boolean;
+
+  getRowId?: undefined | GetRowIdFn<T>;
+  getStorageKeyFn?: undefined | GetStorageKeyFn;
+  isSame?: undefined | IsSameFn<T>;
+
+}

package/src/lib/table/data/options/auto-restore-options.ts

@@ -0,0 +1,50 @@
+import { AutoRestoreOptionsIf } from "./auto-restore-options.if";
+
+
+export class AutoRestoreOptions<T> implements AutoRestoreOptionsIf<T> {
+
+  public autoRestoreSortingState = false;
+  public autoRestoreCollapsedExpandedState = false;
+  public autoRestoreScrollPosition = false;
+
+  public autoRestoreCheckedState = false;
+  public autoRestoreSelectedState = false;
+
+
+  public getStorageKeyFn = undefined;
+
+
+  public isSame = (r1: T, r2: T, options: AutoRestoreOptionsIf<T>) => {
+    if (r1 && r2) {
+      if (options.getRowId) {
+        const id1 = options.getRowId(r1);
+        const id2 = options.getRowId(r2);
+        return id1 === id2;
+      }
+    }
+    return false;
+  };
+
+  public getRowId = (row: T): string | number => {
+    if (row) {
+      // First try:
+      for (const key of ["id", "uuid"]) {
+        // @ts-ignore
+        const id = row[key];
+        if (id !== undefined && id !== null) {
+          return id;
+        }
+      }
+
+      // Second try:
+      try {
+        return JSON.stringify(row);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    console.warn("One of following options set to true without a valid \"getRowId()\": autoRestoreExpandedState, autoRestoreCheckedState.");
+    return -1;
+  };
+
+}

package/src/lib/table/data/options/default-row-heights.if.ts

@@ -0,0 +1,5 @@
+export interface DefaultRowHeightsIf {
+  header: number,
+  body: number,
+  footer: number
+}

package/src/lib/table/data/options/default-row-heights.ts

@@ -0,0 +1,10 @@
+import { DefaultRowHeightsIf } from "./default-row-heights.if";
+
+export class DefaultRowHeights implements DefaultRowHeightsIf {
+  constructor(
+    public header: number = 34,
+    public body: number = 34,
+    public footer: number = 34
+  ) {
+  }
+}

package/src/lib/table/data/options/icon.if.ts

@@ -0,0 +1,7 @@
+export interface IconIf {
+
+  content: string,
+  style: string;
+  classes: string[];
+
+}

package/src/lib/table/data/options/icon.ts

@@ -0,0 +1,10 @@
+import { IconIf } from "./icon.if";
+
+export class Icon implements IconIf {
+  constructor(
+    public content: string = ">",
+    public style: string = "",
+    public classes: string[] = []
+  ) {
+  }
+}

package/{lib/table/data/options/sorted-options.if.d.ts → src/lib/table/data/options/sorted-options.if.ts}

@@ -1,6 +1,9 @@
 import { IconIf } from "./icon.if";
+
 export interface SortedOptionsIf {
-    iconAsc: IconIf;
-    iconDesc: IconIf;
-    iconPlaceholder: IconIf;
+
+  iconAsc: IconIf,
+  iconDesc: IconIf
+  iconPlaceholder: IconIf
+
 }

package/src/lib/table/data/options/sorted-options.ts

@@ -0,0 +1,15 @@
+import { IconIf } from "./icon.if";
+import { Icon } from "./icon";
+import { SortedOptionsIf } from "./sorted-options.if";
+
+export class SortedOptions implements SortedOptionsIf {
+
+  constructor(
+    public iconAsc: IconIf = new Icon("↑", "", ["ge-header-sorted-asc"]),
+    public iconDesc: IconIf = new Icon("↓", "", ["ge-header-sorted-desc"]),
+    public iconPlaceholder: IconIf = new Icon("↑", "color:transparent;", [])
+  ) {
+  }
+
+
+}

package/src/lib/table/data/options/table-options.if.ts

@@ -0,0 +1,54 @@
+import { DefaultRowHeightsIf } from "./default-row-heights.if";
+import { TreeOptionsIf } from "./tree-options.if";
+import { FilterFunction } from "../common/filter-function";
+import { SortState } from "../common/sort-state.type";
+import { SortedOptionsIf } from "./sorted-options.if";
+import { AutoRestoreOptionsIf } from "./auto-restore-options.if";
+import { GetEditRenderer } from "../../renderer/edit/edit-cell-renderer.type";
+import { SelectionModelIf } from "../../selection/selection-model.if";
+import { GetT } from "../common/get-t";
+import { FocusModelIf } from "../../focus/focus-model.if";
+import { ShortcutActionIdMapping } from "../../action/shortcut-actionid-mapping.type";
+
+export interface TableOptionsIf {
+  headerSeparatorBorderVisible: boolean;
+  footerSeparatorBorderVisible: boolean;
+  fixedEastSeparatorBorderVisible: boolean;
+  fixedWestSeparatorBorderVisible: boolean;
+  verticalBorderVisible: boolean;
+  horizontalBorderVisible: boolean;
+
+  overflowX: "auto" | "scroll";
+  overflowY: "auto" | "scroll";
+
+  tableTopBorderVisible: boolean;
+  tableBottomBorderVisible: boolean;
+  hoverRowVisible: boolean;
+  hoverColumnVisible: boolean;
+  columnsResizable: boolean;
+  columnsDraggable: boolean;
+  columnResizeHandleWidthInPx: number;
+
+  headerVerticalSeparator: boolean;
+  footerVerticalSeparator: boolean;
+
+  defaultRowHeights: DefaultRowHeightsIf;
+
+  headerToggleExpandCollapseIcons: boolean;
+
+  treeOptions: TreeOptionsIf;
+  showCheckboxWihoutExtraColumn: boolean;
+
+  externalFilterFunction: FilterFunction<any> | undefined;
+
+  sortedOptions: SortedOptionsIf;
+  sortOrder: SortState[],
+
+  autoRestoreOptions?: AutoRestoreOptionsIf<any>;
+
+  getEditRenderer?: GetEditRenderer;
+  getSelectionModel?: GetT<SelectionModelIf>;
+  getFocusModel?: GetT<FocusModelIf>;
+
+  shortcutActionIdMapping?: ShortcutActionIdMapping;
+}

package/src/lib/table/data/options/table-options.ts

@@ -0,0 +1,66 @@
+import { DefaultRowHeightsIf } from "./default-row-heights.if";
+import { TableOptionsIf } from "./table-options.if";
+import { TreeOptions } from "./tree-options";
+import { FilterFunction } from "../common/filter-function";
+import { SortState } from "../common/sort-state.type";
+import { SortedOptions } from "./sorted-options";
+import { InputCellRenderer } from "../../renderer/edit/input-cell-renderer";
+import { GetEditRenderer } from "../../renderer/edit/edit-cell-renderer.type";
+import { SelectionModelIf } from "../../selection/selection-model.if";
+import { SelectionModel } from "../../selection/selection-model";
+import { GetT } from "../common/get-t";
+import { FocusModelIf } from "../../focus/focus-model.if";
+import { FocusModel } from "../../focus/focus-model";
+import { ShortcutActionIdMapping } from "../../action/shortcut-actionid-mapping.type";
+
+const selectionModel = new SelectionModel();
+const focusModel = new FocusModel("cell");
+
+export class TableOptions implements TableOptionsIf {
+
+  overflowX: "auto" | "scroll" = "auto";
+  overflowY: "auto" | "scroll" = "auto";
+
+  horizontalBorderVisible = true;
+  verticalBorderVisible = true;
+  footerSeparatorBorderVisible = true;
+  headerSeparatorBorderVisible = true;
+  fixedEastSeparatorBorderVisible = true;
+  fixedWestSeparatorBorderVisible = true;
+
+  tableTopBorderVisible = true;
+  tableBottomBorderVisible = true;
+  // TODO tableLeftBorderVisible = true;
+  // TODO tableRightBorderVisible = true;
+
+  hoverRowVisible = true;
+  hoverColumnVisible = true;
+  columnsResizable = true;
+  columnsDraggable = true;
+  columnResizeHandleWidthInPx = 4;
+
+  defaultRowHeights: DefaultRowHeightsIf = {
+    header: 34,
+    body: 34,
+    footer: 34
+  };
+
+  footerVerticalSeparator = false;
+
+  headerToggleExpandCollapseIcons = false;
+  headerVerticalSeparator = false;
+
+  treeOptions = new TreeOptions();
+  showCheckboxWihoutExtraColumn = false;
+
+  externalFilterFunction: FilterFunction<any> | undefined = undefined;
+  sortedOptions = new SortedOptions();
+  sortOrder: SortState[] = ["asc", "desc"];
+  shortcutActionIdMapping?: ShortcutActionIdMapping;
+
+  getEditRenderer?: GetEditRenderer = (_rowIndex: number, _columnIndex: number) => new InputCellRenderer();
+
+  getSelectionModel?: GetT<SelectionModelIf> = () => selectionModel;
+
+  getFocusModel?: GetT<FocusModelIf> = () => focusModel;
+}