@guiexpert/table 1.1.18 → 1.1.20

package/src/lib/table/renderer/progress-bar-cell-renderer.ts

@@ -0,0 +1,60 @@
+import {CellRendererIf} from "./cell-render.if";
+import {DomServiceIf} from "../service/dom-service.if";
+import {AreaIdent} from "../data/tablemodel/area-ident.type";
+import {RendererCleanupFnType} from "./renderer-cleanup-fn.type";
+import {AreaModelObjectArray} from "../data/tablemodel/areamodel/area-model-object-array";
+
+/**
+ * Works with AreaModelObjectArray only
+ */
+export class ProgressBarCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public property: string,
+    public maxValue: number=100,
+    public labelVisible = false
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelObjectArray<T>,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    domService.addClass(cellDiv, "ge-star-rating-div");
+    const row = areaModel.getRowByIndex(rowIndex);
+    const count: number = Number('' + areaModel.getValueByT(row, this.property));
+
+    if (!isNaN(count)) {
+      const per = count * 100 / this.maxValue;
+      const label = this.labelVisible? (Math.round(per) + '%'):'';
+      cellDiv.innerHTML = `
+          <div class="ge-table-label-div"
+          data-row-index="${rowIndex}"
+          data-col-index="${columnIndex}"
+          data-area="${areaIdent}"
+          title="${label}"
+          style="position: relative; background: transparent; width: 100%; height: 100%;">
+              <div class="ge-table-progress-container"
+                  style="width:100%;height:50%;padding:0;margin-top:6px;"
+                  data-row-index="${rowIndex}"
+                  data-col-index="${columnIndex}"
+                  data-area="${areaIdent}">
+                  <div class="ge-table-progress-bar"
+                      style="width:${per}%;height:100%;padding:0;margin:0;"
+                      data-row-index="${rowIndex}"
+                      data-col-index="${columnIndex}"
+                      data-area="${areaIdent}">&nbsp;
+                  </div>
+              </div>
+          </div>`;
+    }
+
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/renderer-cleanup-fn.type.ts

@@ -0,0 +1 @@
+export type RendererCleanupFnType = Function;

package/src/lib/table/renderer/renderer.ts

@@ -0,0 +1,11 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaObjectMap } from "../data/common/area-map";
+
+
+export class Renderer {
+
+  static bodyRenderer(bodyCellRenderer: CellRendererIf): AreaObjectMap<CellRendererIf> {
+    return new AreaObjectMap<CellRendererIf>(undefined, bodyCellRenderer, undefined);
+  }
+
+}

package/src/lib/table/renderer/star-rating-cell-renderer.ts

@@ -0,0 +1,45 @@
+import {CellRendererIf} from "./cell-render.if";
+import {DomServiceIf} from "../service/dom-service.if";
+import {AreaIdent} from "../data/tablemodel/area-ident.type";
+import {RendererCleanupFnType} from "./renderer-cleanup-fn.type";
+import {AreaModelObjectArray} from "../data/tablemodel/areamodel/area-model-object-array";
+
+/**
+ * Works with AreaModelObjectArray only
+ */
+export class StarRatingCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public property: string
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelObjectArray<T>,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    domService.addClass(cellDiv, "ge-star-rating-div");
+    const row = areaModel.getRowByIndex(rowIndex);
+    const count: number = Number('' + areaModel.getValueByT(row, this.property));
+
+    if (!isNaN(count)) {
+      const sb: string[] = [];
+      for (let i = 0; i < count; i++) {
+        sb.push('★');
+      }
+      const text = sb.join(' ');
+      cellDiv.innerHTML = `
+          <div class="ge-table-label-div" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}" style="position: relative; background: transparent; width: 100%; height: 100%;">
+            <div class="ge-table-label" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}">${text}</div>
+          </div>`;
+    }
+
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/true-false-cell-renderer.ts

@@ -0,0 +1,28 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class TrueFalseCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue === "true" || cellValue === true) {
+      cellDiv.innerHTML = "<span class=\"ge-true-text-color\">✅</span>";
+    } else if (cellValue === "false" || cellValue === false) {
+      cellDiv.innerHTML = "<span class=\"ge-false-text-color\">❌</span>";
+    } else {
+      cellDiv.innerText = "";
+    }
+    return undefined;
+  }
+
+}

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

@@ -0,0 +1,8 @@
+import { SelectionModelIf } from './selection-model.if';
+
+
+export interface EventSelectionChangedListenerIf {
+
+  onSelectionChanged(model: SelectionModelIf): void;
+
+}

package/src/lib/table/selection/multi-rows-selection-model.ts

@@ -0,0 +1,118 @@
+import { SelectionModel } from './selection-model';
+import { CellRange } from '../data/common/cell-range';
+import { ObjectArrayHolderIf } from '../data/tablemodel/areamodel/object-array-holder.if';
+
+
+/**
+ * Class representing a multi-row selection model.
+ * @extends SelectionModel
+ */
+export class MultiRowsSelectionModel<T> extends SelectionModel {
+
+  constructor(
+    public model: ObjectArrayHolderIf<T>
+  ) {
+    super('row', 'multi');
+  }
+
+  /**
+   * Retrieves the selected rows from an array of all table rows.
+   *
+   * @param {T[]} allrows - The array of all rows from the table model.
+   * @returns {T[]} - The selected rows from the given array.
+   */
+  getSelectedRowItems(allrows: T[]): T[] {
+    const selectedRowIds = this.getMergedRowIndices();
+    if (this.isAllSelected()) {
+      return allrows;
+    }
+    return allrows.filter((_r, i) => selectedRowIds.includes(i));
+  };
+
+  /**
+   * Selects the specified row.
+   *
+   * @param {number} rowIndex - The index of the row to be selected.
+   */
+  selectRow(rowIndex: number) {
+    this.addRange(CellRange.singleRow(rowIndex));
+  }
+
+  /**
+   * Unselects the specified row.
+   *
+   * @param {number} rowIndex - The index of the row to be unselected.
+   * @return {void}
+   */
+  unselectRow(rowIndex: number) {
+    this.removeSelection(CellRange.singleRow(rowIndex));
+  }
+
+  /**
+   * Toggles the selection of items based on current selection state.
+   */
+  toggleSelection() {
+    if (this.isAllSelected()) {
+      this.clear();
+
+    } else if (this.hasNoSelection()) {
+      this.selectAll();
+
+    } else {
+      const arr = this.model.getAllRows();
+      this.silent = true;
+      for (let i = 0; i < arr.length; i++) {
+        this.toggleRow(i);
+      }
+      this.silent = false;
+      this.fireChangeEvent();
+    }
+  }
+
+  /**
+   * Toggles the selection of filtered rows.
+   * If all rows are currently selected, clears the selection.
+   * If no rows are currently selected, selects all filtered rows.
+   * Otherwise, toggles the selection of all filtered rows.
+   *
+   * @return {void}
+   */
+  toggleFilteredRowsSelection() {
+    if (this.isAllSelected()) {
+      this.clear();
+
+    } else if (this.hasNoSelection()) {
+      const arr = this.model.getFilteredRows();
+      this.silent = true;
+      for (let i = 0; i < arr.length; i++) {
+        this.selectRow(i);
+      }
+      this.silent = false;
+      this.fireChangeEvent();
+
+    } else {
+      const arr = this.model.getFilteredRows();
+      this.silent = true;
+      for (let i = 0; i < arr.length; i++) {
+        this.toggleRow(i);
+      }
+      this.silent = false;
+      this.fireChangeEvent();
+    }
+  }
+
+  /**
+   * Toggles the selection state of a row.
+   *
+   * @param {number} rowIndex - The index of the row to toggle.
+   *
+   * @return {void}
+   */
+  toggleRow(rowIndex: number) {
+    if (this.isSelected(rowIndex, 0)) {
+      this.unselectRow(rowIndex);
+    } else {
+      this.selectRow(rowIndex);
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+import { CellRange } from "../data/common/cell-range";
+import { EventSelectionChangedListenerIf } from './event-selection-changed-listener.if';
+
+export interface SelectionModelIf {
+
+  getEventSelectionChangedListeners(): EventSelectionChangedListenerIf[];
+  addEventSelectionChangedListener(listener: EventSelectionChangedListenerIf): void;
+  removeEventSelectionChangedListener(listener: EventSelectionChangedListenerIf): void;
+
+
+
+  /**
+   * Toggles the selection state of a point at the specified row and column in a grid.
+   *
+   * @param {number} row - The row index of the point to toggle.
+   * @param {number} col - The column index of the point to toggle.
+   * @return {void}
+   */
+  togglePoint(row: number, col: number): void;
+
+  /**
+   * Checks if a specific cell in a grid is selected.
+   *
+   * @param {number} row - The row index of the cell to check.
+   * @param {number} col - The column index of the cell to check.
+   * @returns {boolean} - Returns true if the cell is selected, otherwise false.
+   */
+  isSelected(row: number, col: number): boolean;
+
+  /**
+   * Returns an array of CellRange objects representing the selections.
+   *
+   * @return {CellRange[]} Array of CellRange objects representing the ranges.
+   */
+  getRanges(): CellRange[];
+
+  getMergedRowIndices() : number[];
+
+  clear(): void;
+
+  hasSelection(): boolean;
+
+  hasNoSelection(): boolean;
+
+  addSelection(range: CellRange): void;
+
+  removeSelection(range: CellRange): void;
+
+  getSelectionCount(rowIndex: number, columnIndex: number): number;
+
+  selectAll(): void;
+
+  isAllSelected(): boolean;
+
+  firstClick(rowIndex: number, columnIndex: number): void;
+}

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

@@ -0,0 +1,182 @@
+import { CellRange } from "../data/common/cell-range";
+import { ExtendedSelectionType, SelectionMode } from './selection.type';
+import { SelectionModelIf } from "./selection-model.if";
+import { EventSelectionChangedListenerIf } from './event-selection-changed-listener.if';
+import { AvoidDoubleExecution } from '../../common/decorator/avoid-double-execution.decorator';
+
+
+export class SelectionModel implements SelectionModelIf {
+
+  protected ranges: CellRange[] = [];
+  protected negativeRanges: CellRange[] = [];
+  protected allSelected: boolean = false;
+
+  protected silent = false;
+
+  private listenerArr: EventSelectionChangedListenerIf[] = [];
+
+  constructor(
+    public selectionType: ExtendedSelectionType = "none",
+    public selectionMode: SelectionMode = "single"
+  ) {
+  }
+
+  getEventSelectionChangedListeners(): EventSelectionChangedListenerIf[]{
+    return this.listenerArr;
+  }
+
+  addEventSelectionChangedListener(listener: EventSelectionChangedListenerIf): void {
+    if (!this.listenerArr.includes(listener)) {
+      this.listenerArr.push(listener);
+    }
+  }
+
+  removeEventSelectionChangedListener(listener: EventSelectionChangedListenerIf): void {
+    const index = this.listenerArr.indexOf(listener, 0);
+    if (index > -1) {
+      this.listenerArr.splice(index, 1);
+    }
+  }
+
+  //@AvoidDoubleExecution(100)
+  fireChangeEvent() {
+    if (!this.silent) {
+      this.listenerArr.forEach(l => l.onSelectionChanged(this));
+    }
+  }
+
+  firstClick(rowIndex: number, columnIndex: number): void {
+     if (this.selectionType === 'row') {
+       this.addRange(CellRange.singleRow(rowIndex));
+     } else if (this.selectionType === 'column') {
+       this.addRange(CellRange.singleColumn(columnIndex));
+     }
+  }
+
+  getSelectionCount(rowIndex: number, columnIndex: number): number {
+    let count = 0;
+    for (const range of this.ranges) {
+      if (range.isInRange(rowIndex, columnIndex)) {
+        count++;
+      }
+    }
+    if (this.allSelected) {
+      count++;
+    }
+    if (this.isInNegativeRange(rowIndex, columnIndex)) {
+      count = 0;
+    }
+    return count;
+  }
+
+  isInNegativeRange(rowIndex: number, columnIndex: number): boolean {
+    for (const range of this.negativeRanges) {
+      if (range.isInRange(rowIndex, columnIndex)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getRanges() {
+    return this.ranges;
+  }
+
+  clear(): void {
+    this.ranges = [];
+    this.negativeRanges = [];
+    this.allSelected = false;
+    this.fireChangeEvent();
+  }
+
+  hasSelection(): boolean {
+    return this.allSelected || !!this.ranges.length;
+  }
+
+  hasNoSelection(): boolean {
+    return !this.hasSelection();
+  }
+
+  /**
+   * Retrieves the merged row indices from the given range selection.
+   *
+   * @returns {number[]} Array of merged row indices
+   */
+  getMergedRowIndices() : number[] {
+    const mergedRowIndices = new Set<number>();
+    for (const range of this.ranges) {
+      for (let r = range.r1; r <= range.r2; r++) {
+        if (!mergedRowIndices.has(r) && !this.isInNegativeRange(r, 0)) {
+          mergedRowIndices.add(r);
+        }
+      }
+    }
+    return Array.from(mergedRowIndices);
+  }
+
+  selectAll() {
+    this.allSelected = true;
+    this.fireChangeEvent();
+  }
+
+  isAllSelected() {
+    return this.allSelected;
+  }
+
+  addSelection(range: CellRange): void {
+    this.addRange(range);
+    this.fireChangeEvent();
+  }
+
+  removeSelection(range: CellRange): void {
+    if (this.selectionType === "none") {
+      return; // skip!
+    }
+    let r = range;
+    if (this.selectionType === "row") {
+      r = CellRange.singleRow(range.r1);
+    } else if (this.selectionType === "column") {
+      r = CellRange.singleColumn(range.c1);
+    }
+    this.negativeRanges.push(r);
+    this.fireChangeEvent();
+  }
+
+  togglePoint(row: number, col: number): void {
+    if (this.getSelectionCount(row, col) > 0) {
+      this.removeSelection(CellRange.singleCell(row, col));
+    } else {
+      this.addSelection(CellRange.singleCell(row, col));
+    }
+  }
+
+  isSelected(row: number, col: number): boolean {
+    return  this.getSelectionCount(row, col) > 0;
+  }
+
+
+  protected addRange(range: CellRange) {
+    if (this.selectionType === "none") {
+      return; // skip!
+    }
+    this.allSelected = false;
+    if (this.selectionMode === "single") {
+      this.ranges = [];
+    }
+    if (this.selectionType === "row") {
+      range.c1 = 0;
+      range.c2 = Number.MAX_SAFE_INTEGER;
+    } else if (this.selectionType === "column") {
+      range.r1 = 0;
+      range.r2 = Number.MAX_SAFE_INTEGER;
+    } else if (this.selectionType === "cell") {
+      range.r2 = range.r1;
+      range.c2 = range.c1;
+    } else if (this.selectionType === "range") {
+      //
+    }
+    this.ranges.push(range);
+    this.fireChangeEvent();
+  }
+
+}

package/src/lib/table/selection/selection-service.ts

@@ -0,0 +1,129 @@
+import { GeMouseEvent } from "../data/common/event/ge-mouse-event";
+import { TableScope } from "../table-scope";
+import { GetT } from "../data/common/get-t";
+import { SelectionModelIf } from "./selection-model.if";
+import { FocusModelIf } from "../focus/focus-model.if";
+import { CellRange } from "../data/common/cell-range";
+import { OnActionTriggeredIf } from "../action/on-action-triggered.if";
+import { ActionId } from "../action/action-id.type";
+
+
+export class SelectionService implements OnActionTriggeredIf {
+
+  getSelectionModel?: GetT<SelectionModelIf>;
+  getFocusModel?: GetT<FocusModelIf>;
+  protected previousEvt?: GeMouseEvent;
+
+
+  constructor(
+    protected readonly tableScope: TableScope
+  ) {
+    if (this.tableScope.tableOptions?.getSelectionModel) {
+      this.getSelectionModel = this.tableScope.tableOptions.getSelectionModel;
+    }
+    if (this.tableScope.tableOptions?.getFocusModel) {
+      this.getFocusModel = this.tableScope.tableOptions.getFocusModel;
+    }
+  }
+
+
+  onMouseClicked(evt: GeMouseEvent, _previousEvt: GeMouseEvent | undefined): boolean {
+    let dirty = false;
+    let deletePreviousEvent = false;
+
+    if (this.getSelectionModel && this.getFocusModel) {
+      const sm = this.getSelectionModel();
+      const fm = this.getFocusModel();
+      if (sm && fm) {
+
+        // Focus:
+        if (!fm.hasFocus(evt.rowIndex, evt.columnIndex)) {
+          fm.setFocus(evt.rowIndex, evt.columnIndex);
+          this.tableScope.onFocusChanged(fm);
+          dirty = true;
+        }
+
+        // Selection:
+        if (!evt.originalEvent?.shiftKey) {
+          if (sm.hasSelection()) {
+            sm.clear();
+            dirty = true;
+          }
+        }
+        if (evt.originalEvent?.shiftKey && this.previousEvt) {
+          sm.addSelection(this.createRangeByEvents(evt, this.previousEvt));
+          deletePreviousEvent = true;
+          dirty = true;
+
+
+        } else if (evt.originalEvent?.altKey && (evt.originalEvent?.ctrlKey || evt.originalEvent?.metaKey)) {
+          sm.removeSelection(CellRange.singleCell(evt.rowIndex, evt.columnIndex));
+          deletePreviousEvent = true;
+          dirty = true;
+
+        } else if (evt.originalEvent?.ctrlKey || evt.originalEvent?.metaKey) {
+          sm.addSelection(CellRange.singleCell(evt.rowIndex, evt.columnIndex));
+          deletePreviousEvent = true;
+          dirty = true;
+
+        } else {
+          // no special key.
+          // for selection type  'row' and 'column' we have to select the current row (or column):
+          sm.firstClick(evt.rowIndex, evt.columnIndex);
+          dirty = true;
+        }
+        this.tableScope.onSelectionChanged(sm);
+      }
+    }
+    if (deletePreviousEvent) {
+      this.previousEvt = undefined;
+    } else {
+      this.previousEvt = evt?.clone();
+    }
+    return dirty;
+  }
+
+  onActionTriggered(actionId: ActionId): boolean {
+    if (this.getSelectionModel && this.getFocusModel) {
+      const sm = this.getSelectionModel();
+      const fm = this.getFocusModel();
+      if (sm && fm) {
+        if (actionId === "SELECT_ALL") {
+          sm.selectAll();
+          this.tableScope.repaint();
+          return true;
+        }
+        if (actionId === "DESELECT_ALL") {
+          sm.clear();
+          this.tableScope.repaint();
+          return true;
+        }
+        if (actionId === "TOGGLE_SELECTION") {
+          const [row, col] = fm.getFocus();
+          sm.togglePoint(row, col);
+          this.tableScope.repaint();
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+
+  private createRangeByEvents(evt: GeMouseEvent, previousEvt?: GeMouseEvent) {
+    if (!previousEvt) {
+      previousEvt = evt;
+    }
+    const r1 = Math.min(evt.rowIndex, previousEvt?.rowIndex);
+    const r2 = Math.max(evt.rowIndex, previousEvt?.rowIndex);
+    const c1 = Math.min(evt.columnIndex, previousEvt?.columnIndex);
+    const c2 = Math.max(evt.columnIndex, previousEvt?.columnIndex);
+    return CellRange.create({
+      rowIndex1: r1,
+      columnIndex1: c1,
+      rowIndex2: r2,
+      columnIndex2: c2
+    });
+  }
+
+}

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

@@ -0,0 +1,6 @@
+export type ExtendedSelectionType = SelectionType | "range";
+export type SelectionType = "none" | "cell" | "row" | "column";
+export type SelectionMode = "single" | "multi";
+
+
+