@guiexpert/table 1.1.18 → 1.1.20

package/src/lib/table/service/abstract-store-state.service.ts

@@ -0,0 +1,105 @@
+import { GetStorageKeyFn } from "../data/options/auto-restore-options.if";
+
+
+export abstract class AbstractStoreStateService {
+
+
+  protected getStorageKeyFn?: undefined | GetStorageKeyFn;
+
+
+  constructor(fn: GetStorageKeyFn | undefined) {
+    this.getStorageKeyFn = fn;
+  }
+
+  autoConvertMapToObject(item: any) {
+    const obj = {};
+    if (item instanceof Map) {
+      const map = item as Map<string, any>;
+
+      for (const item of [...map]) {
+        const [
+          key,
+          value
+        ] = item;
+        // @ts-ignore
+        obj[key] = value;
+      }
+    }
+    return obj;
+  }
+
+  // abstract getSubKey(): string;
+
+  protected abstract load(): void;
+
+  protected checkAndPersistItem(keySuffix: string, item: any) {
+    const fn = this.getStorageKeyFn;
+    if (fn) {
+      const key = fn();
+      if (key) {
+        const subKey = key + keySuffix;
+        if ((item + "").includes("Map")) {
+          const obj = this.autoConvertMapToObject(item);
+          this.persistItem(subKey, obj);
+        } else {
+          this.persistItem(subKey, item);
+        }
+
+      }
+    }
+  }
+
+  protected persistItem(subKey: string, item: string | object) {
+    if (item) {
+      localStorage.setItem(subKey, JSON.stringify(item));
+    } else {
+      localStorage.removeItem(subKey);
+    }
+  }
+
+  protected loadFromLocalStorage<U>(subKey: string): U | null {
+    const item = localStorage.getItem(subKey);
+    if (item) {
+      return JSON.parse(item) as U;
+    }
+    return null;
+  }
+
+  // private loadItems() {
+  //   const fn = this.getStorageKeyFn;
+  //   if (fn) {
+  //     const key = fn();
+  //     if (key) {
+  //       // A main key is given by function from options
+  //       const subKey = key + this.CHECKED_STATE;
+  //       const arr = this.loadFromLocalStorage<Array<string | number>>(subKey);
+  //       if (arr) {
+  //         this.checkedStateIds.length = 0;
+  //         arr.forEach(a => this.checkedStateIds.push(a));
+  //       }
+  //
+  //       const subKey2 = key + this.COLLAPSED_EXPANDED_STATE;
+  //       const data = this.loadFromLocalStorage<CollapsedExpandedData>(subKey2);
+  //       if (data) {
+  //         this.collapsedExpandedState = data;
+  //       }
+  //
+  //       const subKey3 = key + this.SELECTED_STATE;
+  //       const arr3 = this.loadFromLocalStorage<object>(subKey3);
+  //       if (arr3) {
+  //         const map: Map<string | number, string[]> = new Map(Object.entries(arr3));
+  //         if (map) {
+  //           this.selectedStateIds.clear();
+  //           map.forEach((col, k) => this.selectedStateIds.set(k, col));
+  //         }
+  //       }
+  //
+  //       const subKey4 = key + this.SCROLL_STATE;
+  //       let scrollOffset = this.loadFromLocalStorage<[number, number]>(subKey4);
+  //       this.scrollOffset = scrollOffset ? scrollOffset : [0, 0];
+  //     }
+  //   }
+  // }
+
+
+}

package/src/lib/table/service/convenience-dom.service.ts

@@ -0,0 +1,574 @@
+import { DomServiceIf } from "./dom-service.if";
+import { DivScope } from "./../data/div-scope.type";
+import { GeoData } from "./../data/geo-data";
+import { TreeArrowType } from "../data/common/tree-arrow.type";
+import { TreeOptionsIf } from "../data/options/tree-options.if";
+import { TreeOptions } from "../data/options/tree-options";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { IconIf } from "../data/options/icon.if";
+import { TableOptionsIf } from "../data/options/table-options.if";
+import { CheckedType } from "../data/common/checked-type";
+import { SideIdent } from "../data/side-ident.type";
+import { SortState } from "../data/common/sort-state.type";
+import { SortedOptions } from "../data/options/sorted-options";
+import { SortedOptionsIf } from "../data/options/sorted-options.if";
+import { HtmlStyle } from "./data/html-style.type";
+
+
+export interface AddColumnDivPara {
+  parent: HTMLDivElement;
+  geo: GeoData;
+  rowIndex: number;
+  columnIndex: number;
+  areaIdent: AreaIdent;
+  sideIdent: SideIdent;
+  text?: string;
+  treeArrow?: TreeArrowType;
+  tableOptions?: TableOptionsIf;
+  checkedType?: CheckedType | undefined;
+  sortState?: SortState;
+}
+
+export class ConvenienceDomService {
+
+  constructor(
+    public readonly domService: DomServiceIf
+  ) {
+  }
+
+
+  setStyle(el: any, style: string, value: any): any {
+    this.domService.setStyle(el, style, value);
+    return el;
+  };
+
+
+  applyStyle(ele: HTMLDivElement, style: HtmlStyle): HTMLDivElement {
+    for (const key in style) {
+      this.domService.setStyle(ele, key, style[key]);
+    }
+    return ele;
+  }
+
+  applyDisplayNoneStyle(ele: HTMLDivElement): HTMLDivElement {
+    this.domService.setStyle(ele, "display", "none");
+    return ele;
+  }
+
+  applyDisplayBlockStyle(ele: HTMLDivElement): HTMLDivElement {
+    this.domService.setStyle(ele, "display", "block");
+    return ele;
+  }
+
+  applyStyleInPx(ele: HTMLDivElement, geoData: GeoData): HTMLDivElement {
+    Object.entries(geoData)
+      .forEach(([key, value]) => this.domService.setStyle(ele, key, value + "px"));
+    return ele;
+  }
+
+  applyStylePosistionRelative(ele: HTMLDivElement): HTMLDivElement {
+    this.domService.setStyle(ele, "position", "relative");
+    this.domService.setStyle(ele, "overflow", "clip");
+    return ele;
+  }
+
+  applyStylePosistionAbsolute(ele: HTMLDivElement): HTMLDivElement {
+    this.domService.setStyle(ele, "position", "absolute");
+    return ele;
+  }
+
+  applyStyleFullSize(ele: HTMLDivElement): HTMLDivElement {
+    this.domService.setStyle(ele, "width", "100%");
+    this.domService.setStyle(ele, "height", "100%");
+    return ele;
+  }
+
+  applyStyleOverflowAuto(
+    overflowX: "scroll" | "auto" = "auto",
+    overflowY: "scroll" | "auto" = "auto",
+    ele: HTMLDivElement
+  ): HTMLDivElement {
+    this.domService.setStyle(ele, "overflow-x", overflowX);
+    this.domService.setStyle(ele, "overflow-y", overflowY);
+    return ele;
+  }
+
+  applyStyleNoPadding(ele: HTMLDivElement): HTMLDivElement {
+    this.domService.setStyle(ele, "padding", "0");
+    this.domService.setStyle(ele, "margin", "0");
+    this.domService.setStyle(ele, "border", "0");
+    return ele;
+  }
+
+  appendRelativeChildDiv(parent: HTMLDivElement): DivScope {
+    const child =
+      this.applyStylePosistionRelative(
+        this.applyStyleFullSize(
+          this.applyStyleNoPadding(
+            this.domService.createElement<HTMLDivElement>("div")
+          )
+        )
+      );
+    this.domService.appendChild(parent, child);
+    this.applyStylePosistionAbsolute(parent);
+    const cache = {};
+    return { parent, child, cache };
+  }
+
+  appendText(parent: HTMLDivElement, text: string): HTMLElement {
+    const div = this.domService.createText(text);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+
+  addClass(clazz: string, div: HTMLDivElement) {
+    if (clazz.includes(" ")) {
+      clazz.split(" ").forEach(c => this.domService.addClass(div, c));
+    } else {
+      this.domService.addClass(div, clazz);
+    }
+    return div;
+  }
+
+  removeClass(clazz: string, div: HTMLDivElement) {
+    if (clazz.includes(" ")) {
+      clazz.split(" ").forEach(c => this.domService.removeClass(div, c));
+    } else {
+      this.domService.removeClass(div, clazz);
+    }
+    return div;
+  }
+
+  addClasses(classes: string[] | undefined, div: HTMLDivElement) {
+    if (classes) {
+      for (const c of classes) {
+        this.domService.addClass(div, c);
+      }
+    }
+    return div;
+  }
+
+  setAttribute(div: HTMLDivElement, key: string, value: string) {
+    if (key && value) {
+      this.domService.setAttribute(div, key, value);
+    }
+    return div;
+  }
+
+
+  createAreaDivWithClass(clazz: string, parent: HTMLDivElement, areaIdent: AreaIdent, sideIdent: SideIdent): HTMLDivElement {
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.addClass(clazz, div);
+    this.domService.setAttribute(div, "data-area", areaIdent);
+    this.domService.setAttribute(div, "data-side", sideIdent);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+  createDivWithClass(clazz: string, parent: HTMLDivElement): HTMLDivElement {
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.addClass(clazz, div);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+
+  addRowDiv(
+    divScope: DivScope,
+    geo: GeoData,
+    rowIndex: number = -1,
+    areaIdent: AreaIdent,
+    sideIdent: SideIdent,
+    text: string = ""
+  ): HTMLDivElement {
+
+    const cacheKey = geo.index ?? -1;
+    const div = this.getDivOrCreateDiv(cacheKey, divScope);
+
+    this.domService.addClass(div, "ge-table-row-div");
+    this.domService.addClass(div, `ge-table-row-div-${geo.index}`);
+    if (areaIdent === "body" && sideIdent === "center") {
+      const oddEven = (geo?.index ?? 0) % 2 === 0 ? "even" : "odd";
+      this.domService.addClass(div, `ge-table-row-${oddEven}`);
+    }
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${geo.top}px`);
+    this.domService.setStyle(div, "width", `${geo.width}px`);
+    this.domService.setStyle(div, "height", `${geo.height}px`);
+    this.domService.setAttribute(div, "data-row-index", `${rowIndex}`);
+    this.domService.setAttribute(div, "data-area", `${areaIdent}`);
+
+    // debugging:
+    if (text) {
+      const textElement = this.domService.createText(text);
+      this.domService.appendChild(div, textElement);
+    }
+    // -------------
+
+    this.domService.appendChild(divScope.child, div);
+    return div;
+  }
+
+
+  addColumnDiv(
+    para: AddColumnDivPara
+  ): HTMLDivElement {
+
+    const {parent, geo, rowIndex=-1, columnIndex=-1, areaIdent, sideIdent, text="", treeArrow, tableOptions, checkedType=undefined, sortState} = para;
+    const treeOptions = tableOptions?.treeOptions;
+    const checkboxWithoutExtraColumn = tableOptions?.showCheckboxWihoutExtraColumn;
+
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-col-div");
+    this.domService.addClass(div, `ge-table-col-div-${geo.index}`);
+    this.domService.setAttribute(div, "data-col-index", `${geo.index}`);
+    this.domService.setAttribute(div, "data-row-index", `${rowIndex}`);
+    this.domService.setAttribute(div, "data-area", `${areaIdent}`);
+    const oddEven = (geo?.index ?? 0) % 2 === 0 ? "even" : "odd";
+    if (areaIdent === "body" && sideIdent === "center") {
+      this.domService.addClass(div, `ge-table-column-${oddEven}`);
+    }
+
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${geo.top}px`);
+    this.domService.setStyle(div, "width", `${geo.width}px`);
+    this.domService.setStyle(div, "height", `${geo.height}px`);
+
+    if (treeArrow && treeArrow !== "none") {
+      this.domService.addClass(div, "ge-table-col-tree");
+      this.addArrowDiv(div, treeArrow, treeOptions, rowIndex, columnIndex, areaIdent);
+    }
+    // if (toggleIcon && toggleIcon !== "none") {
+    //   this.domService.addClass(div, "ge-table-col-toggle");
+    //   this.addToggleDiv(div, toggleIcon, treeOptions, rowIndex, columnIndex, areaIdent);
+    // }
+
+    if (checkboxWithoutExtraColumn && columnIndex === 0 && checkedType) {
+      this.addCheckboxToDiv(div, checkedType, areaIdent, rowIndex);
+    }
+    if (text) {
+      const firstTreeColumn = (treeArrow !== "none" && columnIndex === 0);
+      this.addLabelDiv(div, text, firstTreeColumn, rowIndex, columnIndex, areaIdent);
+    }
+
+    if (sortState) {
+      this.addSortedIcon(div, sortState, tableOptions?.sortedOptions, columnIndex);
+    }
+
+
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+
+  addCheckboxToDiv(
+    parent: HTMLDivElement,
+    checkedType: CheckedType,
+    areaIdent: AreaIdent,
+    rowIndex: number): HTMLDivElement {
+
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    const checked = (checkedType === "full") ? "checked" : "";
+    div.innerHTML = `
+            <input
+                type="checkbox"
+                data-area="${areaIdent}"
+                data-row-index="${rowIndex}"
+                data-input-type="checkbox"
+                ${checked}
+                class="ge-table-row-checkbox"> `;
+    this.domService.setStyle(div, "display", "inline");
+    this.domService.setStyle(div, "width", "inherit");
+    this.domService.setAttribute(div, "data-row-index", `${rowIndex}`);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+
+  addLabelDiv(
+    parent: HTMLDivElement,
+    text: string = "",
+    firstTreeColumn: boolean = false,
+    rowIndex: number = -1,
+    columnIndex: number = -1,
+    areaIdent: AreaIdent = "body"): HTMLDivElement {
+
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-label-div");
+    // this.domService.setStyle(div, 'display', 'inline');
+    this.domService.setStyle(div, "position", "relative");
+    this.domService.setStyle(div, "background", "transparent");
+    this.domService.setStyle(div, "width", "100%");
+    this.domService.setStyle(div, "height", "100%");
+    this.domService.setAttribute(div, "data-row-index", `${rowIndex}`);
+    this.domService.setAttribute(div, "data-col-index", `${columnIndex}`);
+    this.domService.setAttribute(div, "data-area", `${areaIdent}`);
+
+    if (text) {
+      if (firstTreeColumn) {
+        const textElement = this.domService.createText(text);
+        this.domService.appendChild(div, textElement);
+      } else {
+        // normal cell:
+        const div2 = this.domService.createElement<HTMLDivElement>("div");
+        this.domService.appendChild(div, div2);
+        const textElement = this.domService.createText(text);
+        this.domService.addClass(div2, "ge-table-label");
+        this.domService.appendChild(div2, textElement);
+        this.domService.setAttribute(div2, "data-row-index", `${rowIndex}`);
+        this.domService.setAttribute(div2, "data-col-index", `${columnIndex}`);
+        this.domService.setAttribute(div2, "data-area", `${areaIdent}`);
+      }
+    }
+
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+  addSortedIcon(
+    parent: HTMLDivElement,
+    sorted: SortState = "",
+    sortedOptions: SortedOptionsIf = new SortedOptions(),
+    columnIndex: number = -1
+  ): HTMLDivElement {
+
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-sorted-icon-div");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "top", "0");
+    this.domService.setStyle(div, "right", "0");
+    this.domService.setStyle(div, "width", "20px");
+    this.domService.setStyle(div, "background", "transparent");
+    this.domService.setStyle(div, "cursor", "pointer");
+    this.domService.setAttribute(div, "data-col-index", `${columnIndex}`);
+    this.domService.setAttribute(div, "data-area", "header");
+
+    let treeOptionsArrow: IconIf;
+    if (sorted === "asc") {
+      treeOptionsArrow = sortedOptions.iconAsc;
+    } else if (sorted === "desc") {
+      treeOptionsArrow = sortedOptions.iconDesc;
+    } else {
+      treeOptionsArrow = sortedOptions.iconPlaceholder;
+    }
+    // Text:
+    const content = treeOptionsArrow.content;
+    const textElement = this.domService.createText(content);
+    this.domService.appendChild(div, textElement);
+
+    // Style:
+    if (treeOptionsArrow.style) {
+      this.applyStyleString(div, treeOptionsArrow.style);
+    }
+
+    // Classes:
+    for (const clazz of treeOptionsArrow.classes) {
+      this.domService.addClass(div, clazz);
+    }
+
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+
+  addArrowDiv(
+    parent: HTMLDivElement,
+    arrow: TreeArrowType = "none",
+    treeOptions: TreeOptionsIf = new TreeOptions(),
+    rowIndex: number = -1,
+    columnIndex: number = -1,
+    areaIdent: AreaIdent = "body"
+  ): HTMLDivElement {
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-tree-arrow-div");
+    this.domService.setStyle(div, "display", "inline-block");
+    this.domService.setStyle(div, "position", "");
+    this.domService.setStyle(div, "width", "20px");
+    this.domService.setStyle(div, "background", "transparent");
+    this.domService.setStyle(div, "cursor", "pointer");
+    this.domService.setAttribute(div, "data-row-index", `${rowIndex}`);
+    this.domService.setAttribute(div, "data-col-index", `${columnIndex}`);
+    this.domService.setAttribute(div, "data-area", `${areaIdent}`);
+
+    let treeOptionsArrow: IconIf;
+    if (arrow === "expanded") {
+      treeOptionsArrow = treeOptions.arrowExpanded;
+    } else if (arrow === "collapsed") {
+      treeOptionsArrow = treeOptions.arrowCollapsed;
+    } else {
+      treeOptionsArrow = treeOptions.arrowPlaceholder;
+    }
+    // Text:
+    const content = treeOptionsArrow.content;
+    const textElement = this.domService.createText(content);
+    this.domService.appendChild(div, textElement);
+
+    // Style:
+    if (treeOptionsArrow.style) {
+      this.applyStyleString(div, treeOptionsArrow.style);
+    }
+
+    // Classes:
+    for (const clazz of treeOptionsArrow.classes) {
+      this.domService.addClass(div, clazz);
+    }
+
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+  addColumnBorderDivs(
+    tableOptions: TableOptionsIf,
+    parent: HTMLDivElement,
+    geo: GeoData,
+    areaIdent: AreaIdent,
+    sideIdent: SideIdent
+  ): HTMLDivElement {
+    if (tableOptions.verticalBorderVisible) {
+      const clazz = `ge-table-${areaIdent}-${sideIdent}-vertical-border`;
+      this.addVerticalBorder(geo, parent, clazz);
+    }
+    if (tableOptions.horizontalBorderVisible) {
+      const clazz = `ge-table-${areaIdent}-${sideIdent}-horizontal-border`;
+      this.addHorizontalBorder(geo, parent, clazz);
+    }
+
+    return parent;
+  }
+
+
+  addHorizontalBorder(
+    geo: GeoData,
+    parent: HTMLDivElement,
+    clazz: string = "ge-table-body-center-horizontal-border"): HTMLDivElement {
+    // Border south:
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, clazz);
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${(geo.top)}px`);
+    this.domService.setStyle(div, "width", `${geo.width}px`);
+    this.domService.setStyle(div, "height", `1px`);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+  addFocusBorderDivs(parent: HTMLDivElement, geo: GeoData, style: HtmlStyle): HTMLDivElement {
+    geo = {...geo, width: geo.width+1, height: geo.height+1}; // we want draw on the right and bottom border
+
+    // Border west:
+    let div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-focus-border");
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${geo.top}px`);
+    this.domService.setStyle(div, "width", `1px`);
+    this.domService.setStyle(div, "height", `${geo.height}px`);
+    this.domService.setStyle(div, "z-index", `9999`);
+    this.applyStyle(div, style);
+    this.domService.appendChild(parent, div);
+
+    // Border east:
+    div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-focus-border");
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left + geo.width - 1}px`);
+    this.domService.setStyle(div, "top", `${geo.top}px`);
+    this.domService.setStyle(div, "width", `1px`);
+    this.domService.setStyle(div, "height", `${geo.height}px`);
+    this.domService.setStyle(div, "z-index", `9999`);
+    this.applyStyle(div, style);
+    this.domService.appendChild(parent, div);
+
+    // Border north:
+    div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-focus-border");
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${(geo.top)}px`);
+    this.domService.setStyle(div, "width", `${geo.width}px`);
+    this.domService.setStyle(div, "height", `1px`);
+    this.domService.setStyle(div, "z-index", `9999`);
+    this.applyStyle(div, style);
+    this.domService.appendChild(parent, div);
+
+
+    // Border south:
+    div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, "ge-table-focus-border");
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${(geo.top + geo.height - 1)}px`);
+    this.domService.setStyle(div, "width", `${geo.width}px`);
+    this.domService.setStyle(div, "height", `1px`);
+    this.domService.setStyle(div, "z-index", `9999`);
+    this.applyStyle(div, style);
+    this.domService.appendChild(parent, div);
+
+    return parent;
+  }
+
+  addVerticalBorder(
+    geo: GeoData,
+    parent: HTMLDivElement,
+    clazz: string = "ge-table-body-center-vertical-border"
+  ): HTMLDivElement {
+    // Border east:
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    this.domService.addClass(div, clazz);
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${geo.top}px`);
+    this.domService.setStyle(div, "width", `1px`);
+    this.domService.setStyle(div, "height", `${geo.height}px`);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+  addDiv(parent: HTMLDivElement, geo: GeoData, clazz: string = ""): HTMLDivElement {
+    const div = this.domService.createElement<HTMLDivElement>("div");
+    if (clazz) {
+      this.domService.addClass(div, clazz);
+    }
+    this.domService.setStyle(div, "display", "clip");
+    this.domService.setStyle(div, "position", "absolute");
+    this.domService.setStyle(div, "left", `${geo.left}px`);
+    this.domService.setStyle(div, "top", `${geo.top}px`);
+    this.domService.setStyle(div, "width", `${geo.width}px`);
+    this.domService.setStyle(div, "height", `${geo.height}px`);
+    this.domService.appendChild(parent, div);
+    return div;
+  }
+
+  applyStyleString(div: HTMLDivElement, style: string) {
+    // transform: rotate(-90deg) translate(-100%, 0); transform-origin: left top; font-size: 1.5em;
+    const cmds = style.split(";").map(s => s.trim()).filter(s => s);
+    for (const cmd of cmds) {
+      const [key, value] = cmd.split(":");
+      this.domService.setStyle(div, key.trim(), value.trim());
+    }
+  }
+
+  private getDivOrCreateDiv(cacheKey: number, divScope: DivScope): HTMLDivElement {
+    let div = divScope.cache[cacheKey];
+    if (div) {
+      div.innerText = ""; // erst mal leer machen, später col-cache nutzen
+      return div;
+    }
+    div = this.domService.createElement<HTMLDivElement>("div");
+    divScope.cache[cacheKey] = div;
+    return div;
+  }
+}