@polygrid/core 1.0.0 → 1.0.2

package/src/engine/services/renderer/methods/re-render-cells.ts

@@ -0,0 +1,31 @@
+import type { GridDOM } from "../../../core/grid-dom";
+import { renderRows } from "../parts/body/row";
+import { renderFooterCells } from "../parts/footer/footer-cells";
+import { renderHeaderCells } from "../parts/header/header-cells";
+import type { PolyGridStore } from "../../../store/store";
+
+export function reRenderCells(gridDom: GridDOM, store: PolyGridStore) {
+  // rerender header, body, footer cells
+  // header
+  const header = gridDom.header;
+  header.replaceChildren();
+  renderHeaderCells(header, store);
+  // body
+  const body = gridDom.body;
+  body.replaceChildren();
+  const rows = store.getState().rows;
+  const columns = store.getState().columns;
+  const rowHeight = store.getState().rowHeight;
+  const bodyRows = renderRows(rows, columns, rowHeight);
+  const fragment = document.createDocumentFragment();
+  for (const row of bodyRows) {
+    fragment.appendChild(row);
+  }
+  body.appendChild(fragment);
+  const lastRow = gridDom.body.querySelector(".pg-row:last-child");
+  lastRow?.classList.toggle("last-row", !store.getState().showVScrollbar);
+  // footer
+  const footer = gridDom.footer;
+  footer.replaceChildren();
+  renderFooterCells(footer, store);
+}

package/src/engine/services/renderer/parts/body/body.ts

@@ -0,0 +1,34 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+import type { PolyGridStore } from "../../../../store/store";
+import { renderRows } from "./row";
+
+export function renderBody(
+  store: PolyGridStore,
+  gridDom: GridDOM
+): HTMLDivElement {
+  // viewport
+  const bodyViewportEl = document.createElement("div");
+  bodyViewportEl.className = PG_CSS_CLASS.bodyViewport;
+  // row container
+  const bodyEl = document.createElement("div");
+  bodyEl.className = PG_CSS_CLASS.body;
+  bodyEl.innerHTML = "";
+  // render the rows
+  const rows = store.getState().rows;
+  const columns = store.getState().columns;
+  const rowHeight = store.getState().rowHeight;
+  const bodyRows = renderRows(rows, columns, rowHeight);
+  // append the rows to the body
+  const fragment = document.createDocumentFragment();
+  for (const row of bodyRows) {
+    fragment.appendChild(row);
+  }
+  bodyEl.appendChild(fragment);
+
+  bodyViewportEl.appendChild(bodyEl);
+
+  gridDom.body = bodyEl;
+
+  return bodyViewportEl;
+}

package/src/engine/services/renderer/parts/body/cell.ts

@@ -0,0 +1,12 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { PolyGridColumn } from "../../../../services/column/interfaces/column";
+
+export function renderCell(row: any, col: PolyGridColumn) {
+  const cell = document.createElement("div");
+  cell.classList.add(PG_CSS_CLASS.cell);
+
+  const value = row[col.field];
+  cell.textContent = value != null ? String(value) : "";
+
+  return cell;
+}

package/src/engine/services/renderer/parts/body/row.ts

@@ -0,0 +1,26 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { PolyGridColumn } from "../../../../services/column/interfaces/column";
+import type { PolyGridRow } from "../../../../services/row/interfaces/row";
+import { renderCell } from "./cell";
+
+export function renderRows(
+  rows: PolyGridRow[],
+  columns: PolyGridColumn[],
+  rowHeight: number
+): HTMLDivElement[] {
+  const rowEls: HTMLDivElement[] = [];
+  const cols = columns.filter((col) => col.visible ?? true);
+
+  rows.forEach((row) => {
+    const rowEl = document.createElement("div");
+    rowEl.classList.add(PG_CSS_CLASS.row);
+    rowEl.style.height = rowHeight + "px";
+    cols.forEach((col) => {
+      const cell = renderCell(row.data, col);
+      rowEl.appendChild(cell);
+    });
+    rowEls.push(rowEl);
+  });
+
+  return rowEls;
+}

package/src/engine/services/renderer/parts/footer/footer-cells.ts

@@ -0,0 +1,15 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { PolyGridStore } from "../../../../store/store";
+
+export function renderFooterCells(footer: HTMLElement, store: PolyGridStore) {
+  const columns = store.getState().columns.filter((col) => col.visible ?? true);
+
+  footer.innerHTML = "";
+
+  columns.forEach((col, i) => {
+    const cell = document.createElement("div");
+    cell.className = PG_CSS_CLASS.footerCell;
+    cell.textContent = col.header;
+    footer.appendChild(cell);
+  });
+}

package/src/engine/services/renderer/parts/footer/footer.ts

@@ -0,0 +1,24 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+import type { PolyGridStore } from "../../../../store/store";
+import { renderFooterCells } from "./footer-cells";
+
+export function renderFooter(
+  store: PolyGridStore,
+  gridDom: GridDOM
+): HTMLDivElement {
+  // viewport
+  const footerViewportEl = document.createElement("div");
+  footerViewportEl.className = PG_CSS_CLASS.footerViewport;
+  // cell container
+  const footerEl = document.createElement("div");
+  footerEl.className = PG_CSS_CLASS.footer;
+  // cells
+  renderFooterCells(footerEl, store);
+
+  footerViewportEl.appendChild(footerEl);
+
+  gridDom.footer = footerEl;
+
+  return footerViewportEl;
+}

package/src/engine/services/renderer/parts/grid/grid.ts

@@ -0,0 +1,21 @@
+import { renderViewport } from "../viewport/viewport";
+import { renderVScrollbar } from "../scrollbars/v-scrollbar";
+import type { PolyGridStore } from "../../../../store/store";
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+
+export function renderGrid(store: PolyGridStore, gridDom: GridDOM) {
+  const grid = document.createElement("div");
+  grid.className = PG_CSS_CLASS.grid;
+
+  const viewport = renderViewport(store, gridDom);
+  const vScrollbar = renderVScrollbar(gridDom);
+
+  grid.appendChild(viewport);
+  grid.appendChild(vScrollbar);
+
+  gridDom.viewport = viewport;
+  gridDom.vScrollbar = vScrollbar;
+
+  return grid;
+}

package/src/engine/services/renderer/parts/header/header-cells.ts

@@ -0,0 +1,15 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { PolyGridStore } from "../../../../store/store";
+
+export function renderHeaderCells(header: HTMLElement, store: PolyGridStore) {
+  const columns = store.getState().columns.filter((col) => col.visible ?? true);
+
+  header.innerHTML = "";
+
+  columns.forEach((col, i) => {
+    const cell = document.createElement("div");
+    cell.className = PG_CSS_CLASS.headerCell;
+    cell.textContent = col.header;
+    header.appendChild(cell);
+  });
+}

package/src/engine/services/renderer/parts/header/header.ts

@@ -0,0 +1,24 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+import type { PolyGridStore } from "../../../../store/store";
+import { renderHeaderCells } from "./header-cells";
+
+export function renderHeader(
+  store: PolyGridStore,
+  gridDom: GridDOM
+): HTMLDivElement {
+  // viewport
+  const headerViewportEl = document.createElement("div");
+  headerViewportEl.className = PG_CSS_CLASS.headerViewport;
+  // cell container
+  const headerEl = document.createElement("div");
+  headerEl.className = PG_CSS_CLASS.header;
+  // cells
+  renderHeaderCells(headerEl, store);
+
+  headerViewportEl.appendChild(headerEl);
+
+  gridDom.header = headerEl;
+
+  return headerViewportEl;
+}

package/src/engine/services/renderer/parts/root/root.ts

@@ -0,0 +1,22 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+import type { PolyGridStore } from "../../../../store/store";
+import { renderGrid } from "../grid/grid";
+
+export function renderRoot(
+  store: PolyGridStore,
+  host: HTMLElement,
+  gridDom: GridDOM
+) {
+  const root = document.createElement("div");
+  root.className = PG_CSS_CLASS.root;
+  root.id = store.getState().id;
+
+  const grid = renderGrid(store, gridDom);
+
+  root.appendChild(grid);
+  host.appendChild(root);
+
+  gridDom.root = root;
+  gridDom.grid = grid;
+}

package/src/engine/services/renderer/parts/scrollbars/h-scrollbar.ts

@@ -0,0 +1,21 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+
+export function renderHScrollbar(gridDom: GridDOM): HTMLDivElement {
+  const hScrollEl = document.createElement("div");
+  hScrollEl.className = PG_CSS_CLASS.hScroll;
+
+  const hScrollInnerEl = document.createElement("div");
+  hScrollInnerEl.className = PG_CSS_CLASS.hScrollInner;
+
+  const hScrollTrack = document.createElement("div");
+  hScrollTrack.className = PG_CSS_CLASS.hScrollTrack;
+
+  hScrollEl.appendChild(hScrollInnerEl);
+  hScrollInnerEl.appendChild(hScrollTrack);
+
+  gridDom.hScrollInner = hScrollInnerEl;
+  gridDom.hScrollTrack = hScrollTrack;
+
+  return hScrollEl;
+}

package/src/engine/services/renderer/parts/scrollbars/v-scrollbar-bottom-corner.ts

@@ -0,0 +1,8 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+
+export function renderVScrollbarBottomCorner(): HTMLDivElement {
+  const vScrollbarBottomCorner = document.createElement("div");
+  vScrollbarBottomCorner.className = PG_CSS_CLASS.vScrollBottomCorner;
+
+  return vScrollbarBottomCorner;
+}

package/src/engine/services/renderer/parts/scrollbars/v-scrollbar-spacer-bottom.ts

@@ -0,0 +1,8 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+
+export function renderVScrollbarSpacerBottom(): HTMLDivElement {
+  const vScrollbarSpacer = document.createElement("div");
+  vScrollbarSpacer.className = PG_CSS_CLASS.vScrollSpacerBottom;
+
+  return vScrollbarSpacer;
+}

package/src/engine/services/renderer/parts/scrollbars/v-scrollbar-spacer-top.ts

@@ -0,0 +1,8 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+
+export function renderVScrollbarSpacerTop(): HTMLDivElement {
+  const vScrollbarSpacer = document.createElement("div");
+  vScrollbarSpacer.className = PG_CSS_CLASS.vScrollSpacerTop;
+
+  return vScrollbarSpacer;
+}

package/src/engine/services/renderer/parts/scrollbars/v-scrollbar.ts

@@ -0,0 +1,34 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+import { renderVScrollbarBottomCorner } from "./v-scrollbar-bottom-corner";
+import { renderVScrollbarSpacerBottom } from "./v-scrollbar-spacer-bottom";
+import { renderVScrollbarSpacerTop } from "./v-scrollbar-spacer-top";
+
+export function renderVScrollbar(gridDom: GridDOM): HTMLDivElement {
+  const vScrollEl = document.createElement("div");
+  vScrollEl.className = PG_CSS_CLASS.vScroll;
+
+  const vScrollInnerEl = document.createElement("div");
+  vScrollInnerEl.className = PG_CSS_CLASS.vScrollInner;
+
+  const vScrollTrackEl = document.createElement("div");
+  vScrollTrackEl.className = PG_CSS_CLASS.vScrollTrack;
+
+  const spacerTop = renderVScrollbarSpacerTop();
+  const spacerBottom = renderVScrollbarSpacerBottom();
+  const bottomCorner = renderVScrollbarBottomCorner();
+
+  vScrollEl.appendChild(spacerTop);
+  vScrollEl.appendChild(vScrollInnerEl);
+  vScrollEl.appendChild(spacerBottom);
+  vScrollEl.appendChild(bottomCorner);
+  vScrollInnerEl.appendChild(vScrollTrackEl);
+
+  gridDom.vScrollInner = vScrollInnerEl;
+  gridDom.vScrollSpacerTop = spacerTop;
+  gridDom.vScrollSpacerBottom = spacerBottom;
+  gridDom.vScrollBottomCorner = bottomCorner;
+  gridDom.vScrollTrack = vScrollTrackEl;
+
+  return vScrollEl;
+}

package/src/engine/services/renderer/parts/viewport/viewport.ts

@@ -0,0 +1,32 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import type { GridDOM } from "../../../../core/grid-dom";
+import type { PolyGridStore } from "../../../../store/store";
+import { renderBody } from "../body/body";
+import { renderFooter } from "../footer/footer";
+import { renderHeader } from "../header/header";
+import { renderHScrollbar } from "../scrollbars/h-scrollbar";
+
+export function renderViewport(
+  store: PolyGridStore,
+  gridDom: GridDOM
+): HTMLDivElement {
+  const viewport = document.createElement("div");
+  viewport.className = PG_CSS_CLASS.viewport;
+
+  const headerVp = renderHeader(store, gridDom);
+  const bodyVp = renderBody(store, gridDom);
+  const footerVp = renderFooter(store, gridDom);
+  const hScrollbar = renderHScrollbar(gridDom);
+
+  viewport.appendChild(headerVp);
+  viewport.appendChild(bodyVp);
+  viewport.appendChild(footerVp);
+  viewport.appendChild(hScrollbar);
+
+  gridDom.headerViewport = headerVp;
+  gridDom.bodyViewport = bodyVp;
+  gridDom.footerViewport = footerVp;
+  gridDom.hScrollbar = hScrollbar;
+
+  return viewport;
+}

package/src/engine/services/renderer/renderer.ts

@@ -0,0 +1,23 @@
+import type { PolyGrid } from "../../core/grid";
+import type { GridDOM } from "../../core/grid-dom";
+import type { ObservableLike } from "../../rx-lite/interfaces/observable-like";
+import type { PolyGridStore } from "../../store/store";
+import * as methods from "./methods/index";
+
+export class RendererService {
+  store: PolyGridStore;
+  destroy$: ObservableLike<void>;
+  gridDom: GridDOM;
+  grid: PolyGrid;
+
+  constructor(grid: PolyGrid) {
+    this.store = grid._store;
+    this.destroy$ = grid._destroy$;
+    this.gridDom = grid._gridDom;
+    this.grid = grid;
+  }
+
+  reRenderCells = methods.reRenderCells;
+
+  initApiSubscriptions() {}
+}

package/src/engine/services/row/index.ts

@@ -0,0 +1 @@
+export * from "./row";

package/src/engine/services/row/interfaces/row.ts

@@ -0,0 +1,4 @@
+export interface PolyGridRow {
+  index: number;
+  data: any;
+}

package/src/engine/services/row/row.ts

@@ -0,0 +1,10 @@
+import type { PolyGrid } from "../../core/grid";
+import type { PolyGridStore } from "../../store/store";
+
+export class RowService {
+  store: PolyGridStore;
+
+  constructor(grid: PolyGrid) {
+    this.store = grid._store;
+  }
+}

package/src/engine/services/services.ts

@@ -0,0 +1,26 @@
+import { LayoutService } from "./layout";
+import { ColumnService } from "./column";
+import { RowService } from "./row";
+import { DataService } from "./data";
+import type { PolyGrid } from "../core/grid";
+import { RendererService } from "./renderer";
+
+export class PolyGridServices {
+  private grid: PolyGrid;
+
+  layout: LayoutService;
+  column: ColumnService;
+  row: RowService;
+  data: DataService;
+  renderer: RendererService;
+
+  constructor(grid: PolyGrid) {
+    this.grid = grid;
+
+    this.layout = new LayoutService(this.grid);
+    this.column = new ColumnService(this.grid);
+    this.row = new RowService(this.grid);
+    this.data = new DataService(this.grid);
+    this.renderer = new RendererService(this.grid);
+  }
+}

package/src/engine/store/interfaces/grid-state.ts

@@ -0,0 +1,20 @@
+import type { PolyGridColumn } from "../../services/column/interfaces/column";
+import type { ColumnWidthState } from "../../services/column/types/column-width-state";
+import type { PolyGridRow } from "../../services/row/interfaces/row";
+
+export interface PolyGridState {
+  id: string;
+  columns: PolyGridColumn[];
+  rows: PolyGridRow[];
+  rowHeight: number;
+  resolvedColumnWidths: number[];
+  columnWidthState: ColumnWidthState;
+  totalColumnWidth: number;
+  totalRowHeight: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  rawViewportWidth: number;
+  rawViewportHeight: number;
+  showHScrollbar: boolean;
+  showVScrollbar: boolean;
+}

package/src/engine/store/methods/create-initial-state.ts

@@ -0,0 +1,20 @@
+import type { PolyGridState } from "../interfaces/grid-state";
+
+export function createInitialState(): PolyGridState {
+  return {
+    id: "",
+    columns: [],
+    rows: [],
+    rowHeight: 20,
+    resolvedColumnWidths: [],
+    columnWidthState: "NOT_SET",
+    totalColumnWidth: 0,
+    totalRowHeight: 0,
+    viewportWidth: 0,
+    viewportHeight: 0,
+    rawViewportWidth: 0,
+    rawViewportHeight: 0,
+    showHScrollbar: false,
+    showVScrollbar: false,
+  };
+}

package/src/engine/store/methods/create-tracked-proxy.ts

@@ -0,0 +1,60 @@
+import type { StoreMutation } from "../types/store-mutation";
+
+export function createTrackedProxy(
+  target: any,
+  rootPrev: any,
+  path: string[] = [],
+  mutations: StoreMutation[]
+): any {
+  return new Proxy(target, {
+    get(origTarget, prop, receiver) {
+      const value = Reflect.get(origTarget, prop, receiver);
+
+      if (value && typeof value === "object") {
+        const childPath = path.concat(String(prop));
+        return createTrackedProxy(value, rootPrev, childPath, mutations);
+      }
+
+      return value;
+    },
+
+    set(origTarget, prop, value, receiver) {
+      const propKey = String(prop);
+      const fullPath = path.concat(propKey);
+
+      const prettyPath = formatPath(fullPath);
+      const prevValue = getAtPath(rootPrev, fullPath);
+      const success = Reflect.set(origTarget, prop, value, receiver);
+
+      mutations.push({ path: prettyPath, from: prevValue, to: value });
+
+      return success;
+    },
+  });
+}
+
+function getAtPath(obj: any, path: string[]): any {
+  let current = obj;
+  for (const key of path) {
+    if (current == null) return undefined;
+    current = current[key];
+  }
+  return current;
+}
+
+function formatPath(path: string[]): string {
+  return (
+    path
+      .map((segment) => {
+        // numeric → array index
+        if (/^\d+$/.test(segment)) {
+          return `[${segment}]`;
+        }
+        // normal object key
+        return segment;
+      })
+      .join(".")
+      // fix cases like "columns.[3]" → "columns[3]"
+      .replace(/\.\[/g, "[")
+  );
+}

package/src/engine/store/methods/debug.ts

@@ -0,0 +1,29 @@
+import { DEBUG_SHOW_FULL_STATE_DIFF } from "../../debug.config";
+import type { PolyGridState } from "../interfaces/grid-state";
+import type { StoreMutation } from "../types/store-mutation";
+
+export function LogMutations(
+  mutations: StoreMutation[],
+  prev: PolyGridState,
+  next: PolyGridState
+) {
+  console.groupCollapsed(
+    "%cPolyGridStore mutations",
+    "color:#FF9800;font-weight:bold;"
+  );
+  for (const m of mutations) {
+    console.log(`Path: ${m.path}`);
+    console.log("From:", m.from);
+    console.log("To:", m.to);
+  }
+  console.groupEnd();
+  if (DEBUG_SHOW_FULL_STATE_DIFF) {
+    console.groupCollapsed(
+      "%cPolyGridStore state diff",
+      "color:#4CAF50;font-weight:bold;"
+    );
+    console.log("Prev:", prev);
+    console.log("Next:", next);
+    console.groupEnd();
+  }
+}

package/src/engine/store/store.ts

@@ -0,0 +1,85 @@
+import { DEBUG } from "../debug.config";
+import type { PolyGridState } from "./interfaces/grid-state";
+import type { ObservableLike } from "../rx-lite/interfaces/observable-like";
+import type { StoreMutation } from "./types/store-mutation";
+import { createInitialState } from "./methods/create-initial-state";
+import { createTrackedProxy } from "./methods/create-tracked-proxy";
+import { LogMutations } from "./methods/debug";
+import { createSelect } from "../rx-lite/operators/select";
+import { createCombineLatest } from "../rx-lite/operators/combine-latest";
+import { createCombineLatestAny } from "../rx-lite/operators/combine-latest-any";
+import { createSelectKeyed } from "../rx-lite/operators/select-keyed";
+
+export type Subscriber = (
+  state: PolyGridState,
+  changedKeys: (keyof PolyGridState)[]
+) => void;
+
+export class PolyGridStore {
+  private state: PolyGridState;
+  private subscribers = new Set<Subscriber>();
+
+  constructor() {
+    this.state = createInitialState();
+  }
+
+  getState() {
+    return this.state;
+  }
+
+  getSubscribers() {
+    return this.subscribers;
+  }
+
+  update(mutator: (draft: PolyGridState) => void): void {
+    const prev = this.state;
+    const next = { ...this.state };
+
+    const mutations: StoreMutation[] = [];
+    const proxy = createTrackedProxy(next, prev, [], mutations);
+
+    mutator(proxy);
+
+    if (DEBUG && mutations.length > 0) LogMutations(mutations, prev, next);
+
+    // extract changed top-level keys
+    const changedKeys = mutations.map((m) => m.path as keyof PolyGridState);
+
+    this.state = next;
+    this.emit(changedKeys);
+  }
+
+  subscribe(fn: Subscriber): () => void {
+    this.subscribers.add(fn);
+    return () => this.subscribers.delete(fn);
+  }
+
+  select<T>(selector: (state: PolyGridState) => T): ObservableLike<T> {
+    return createSelect(this, selector);
+  }
+
+  selectKeyed<T>(
+    key: keyof PolyGridState,
+    selector: (state: PolyGridState) => T
+  ): ObservableLike<T> {
+    return createSelectKeyed(this, key, selector);
+  }
+
+  combineLatest<T extends any[]>(selectors: {
+    [K in keyof T]: (state: PolyGridState) => T[K];
+  }): ObservableLike<T> {
+    return createCombineLatest(this, selectors);
+  }
+
+  combineLatestAny<T extends any[]>(sources: {
+    [K in keyof T]: ((state: PolyGridState) => T[K]) | ObservableLike<T[K]>;
+  }): ObservableLike<T> {
+    return createCombineLatestAny(this, sources);
+  }
+
+  private emit(changedKeys: (keyof PolyGridState)[]) {
+    for (const fn of this.subscribers) {
+      fn(this.state, changedKeys);
+    }
+  }
+}

package/src/engine/store/types/state-key.ts

@@ -0,0 +1,3 @@
+import type { PolyGridState } from "../interfaces/grid-state";
+
+export type StateKey = keyof PolyGridState;

package/src/engine/store/types/store-mutation.ts

@@ -0,0 +1,5 @@
+export type StoreMutation = {
+  path: string;
+  from: any;
+  to: any;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export type { PolyGridColumn } from "./engine/services/column/interfaces/column";