@polygrid/core 1.0.0 → 1.0.2

package/package.json

@@ -1,12 +1,39 @@
-{
-  "name": "@polygrid/core",
-  "version": "1.0.0",
-  "description": "PolyGrid core library",
-  "main": "polygrid.umd.js",
-  "module": "polygrid.es.js",
-  "types": "types/index.d.ts",
-  "sideEffects": false,
-  "license": "MIT",
-  "author": "",
-  "keywords": []
-}
+{
+  "name": "@polygrid/core",
+  "version": "1.0.2",
+  "description": "",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "clean": "rimraf dist angular/dist",
+    "build": "npm run clean && tsc --outDir dist && npm run build:css",
+    "build:angular": "npm run build --workspace=@polygrid/angular",
+    "build:all": "npm run clean && npm run build && npm run build:angular",
+    "build:css": "postcss src/styles/index.css -o dist/polygrid.css",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "rimraf": "^6.1.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("postcss-import")],
+};

package/src/api/index.ts

@@ -0,0 +1,15 @@
+import type { PolyGrid } from "../engine/core/grid";
+import type { PolyGridColumn } from "../engine/services/column/interfaces/column";
+import { setColumns } from "./set-columns";
+import { setData } from "./set-data";
+import { setGridId } from "./set-grid-id";
+
+export type PolyGridApi = ReturnType<typeof createApi>;
+
+export function createApi(grid: PolyGrid) {
+  return {
+    setGridId: (id: string) => setGridId(grid, id),
+    setData: (data: any[]) => setData(grid, data),
+    setColumns: (columns: PolyGridColumn[]) => setColumns(grid, columns),
+  };
+}

package/src/api/set-columns.ts

@@ -0,0 +1,8 @@
+import type { PolyGrid } from "../engine/core/grid";
+import type { PolyGridColumn } from "../engine/services/column/interfaces/column";
+
+export function setColumns(grid: PolyGrid, columns: PolyGridColumn[]) {
+  grid._store.update((draft) => {
+    draft.columns = columns;
+  });
+}

package/src/api/set-data.ts

@@ -0,0 +1,8 @@
+import type { PolyGrid } from "../engine/core/grid";
+import { normalizeRows } from "../engine/core/methods/normalize-rows";
+
+export function setData(grid: PolyGrid, data: any[]) {
+  grid._store.update((draft) => {
+    draft.rows = normalizeRows(data);
+  });
+}

package/src/api/set-grid-id.ts

@@ -0,0 +1,7 @@
+import type { PolyGrid } from "../engine/core/grid";
+
+export function setGridId(grid: PolyGrid, id: string) {
+  grid._store.update((draft) => {
+    draft.id = id;
+  });
+}

package/src/engine/const/pg-css-class.ts

@@ -0,0 +1,24 @@
+export const PG_CSS_CLASS = {
+  root: "pg-root",
+  grid: "pg-grid",
+  viewport: "pg-viewport",
+  vScroll: "pg-v-scroll",
+  vScrollSpacerTop: "pg-v-scroll-spacer-top",
+  vScrollInner: "pg-v-scroll-inner",
+  vScrollTrack: "pg-v-scroll-track",
+  vScrollSpacerBottom: "pg-v-scroll-spacer-bottom",
+  vScrollBottomCorner: "pg-v-scroll-bottom-corner",
+  hScroll: "pg-h-scroll",
+  hScrollInner: "pg-h-scroll-inner",
+  hScrollTrack: "pg-h-scroll-track",
+  headerViewport: "pg-header-viewport",
+  header: "pg-header",
+  headerCell: "pg-header-cell",
+  bodyViewport: "pg-body-viewport",
+  body: "pg-body",
+  row: "pg-row",
+  cell: "pg-cell",
+  footerViewport: "pg-footer-viewport",
+  footer: "pg-footer",
+  footerCell: "pg-footer-cell",
+} as const;

package/src/engine/core/grid-dom.ts

@@ -0,0 +1,26 @@
+export class GridDOM {
+  root!: HTMLElement;
+  grid!: HTMLElement;
+  viewport!: HTMLElement;
+  headerViewport!: HTMLElement;
+  header!: HTMLElement;
+  bodyViewport!: HTMLElement;
+  body!: HTMLElement;
+  footerViewport!: HTMLElement;
+  footer!: HTMLElement;
+  hScrollbar!: HTMLElement;
+  hScrollInner!: HTMLElement;
+  hScrollTrack!: HTMLElement;
+  vScrollbar!: HTMLElement;
+  vScrollSpacerTop!: HTMLElement;
+  vScrollInner!: HTMLElement;
+  vScrollTrack!: HTMLElement;
+  vScrollSpacerBottom!: HTMLElement;
+  vScrollBottomCorner!: HTMLElement;
+
+  // A list of cleanup functions for DOM event listeners or other teardown logic.
+  // The main grid destroy() method will call each of these.
+  cleanups: Array<() => void> = [];
+
+  constructor() {}
+}

package/src/engine/core/grid.ts

@@ -0,0 +1,77 @@
+import type { PolyGridOptions } from "./interfaces/grid-options";
+import { renderRoot } from "../services/renderer/parts/root/root";
+import { PolyGridStore } from "../store/store";
+import { Subject } from "../rx-lite/core/subject";
+import { PolyGridServices } from "../services/services";
+import * as methods from "./methods/index";
+import { GridDOM } from "./grid-dom";
+import { createApi, type PolyGridApi } from "../../api";
+
+export class PolyGrid {
+  private store: PolyGridStore;
+  private services: PolyGridServices;
+  private destroy$: Subject<void>;
+  private gridDom: GridDOM;
+  private resizeObserver!: ResizeObserver;
+
+  api: PolyGridApi;
+
+  constructor(hostElement: HTMLElement, options: PolyGridOptions) {
+    this.store = new PolyGridStore();
+    this.gridDom = new GridDOM();
+    this.destroy$ = new Subject<void>();
+    this.services = new PolyGridServices(this);
+
+    // process the options
+    methods.consumeOptions(this.store, options);
+
+    // render the root element
+    renderRoot(this.store, hostElement, this.gridDom);
+
+    // setting up a resize observer for the grid
+    this.resizeObserver = this.services.layout.setUpResizeObserver(
+      this.resizeObserver,
+      this.gridDom,
+      this.store
+    );
+    this.resizeObserver.observe(this.gridDom.grid);
+
+    // init layout pipeline
+    this.services.layout.initializeLayoutPipeline(
+      this.services.layout,
+      this.destroy$
+    );
+
+    // set up public api
+    this.api = createApi(this);
+
+    // init api subscriptions
+    this.services.layout.initApiSubscriptions();
+    this.services.data.initApiSubscriptions();
+    this.services.column.initApiSubscriptions();
+    this.services.renderer.initApiSubscriptions();
+
+    console.log("PolyGrid initialized");
+  }
+
+  destroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+    // cleanup event listeners
+    for (const fn of this.gridDom.cleanups) {
+      fn();
+    }
+  }
+
+  get _store() {
+    return this.store;
+  }
+
+  get _destroy$() {
+    return this.destroy$;
+  }
+
+  get _gridDom() {
+    return this.gridDom;
+  }
+}

package/src/engine/core/interfaces/grid-options.ts

@@ -0,0 +1,8 @@
+import type { PolyGridColumn } from "../../services/column/interfaces/column";
+
+export interface PolyGridOptions {
+  id: string;
+  columns?: PolyGridColumn[];
+  data?: any[];
+  rowHeight?: number;
+}

package/src/engine/core/methods/add-dom-listener.ts

@@ -0,0 +1,14 @@
+import type { GridDOM } from "../grid-dom";
+
+export function addDomListener<K extends keyof HTMLElementEventMap>(
+  dom: GridDOM,
+  target: HTMLElement,
+  event: K,
+  handler: (ev: HTMLElementEventMap[K]) => void
+) {
+  target.addEventListener(event, handler);
+
+  dom.cleanups.push(() => {
+    target.removeEventListener(event, handler);
+  });
+}

package/src/engine/core/methods/consume-options.ts

@@ -0,0 +1,32 @@
+import { normalizeRows } from "./normalize-rows";
+import type { PolyGridOptions } from "../interfaces/grid-options";
+import type { PolyGridStore } from "../../store/store";
+
+export function consumeOptions(store: PolyGridStore, options: PolyGridOptions) {
+  // assign id
+  store.update((draft) => (draft.id = options.id));
+
+  // assign columns
+  const cols = options.columns;
+  if (cols) {
+    store.update((state) => {
+      state.columns = cols;
+    });
+  }
+
+  // assign data
+  const data = options.data;
+  if (data) {
+    store.update((state) => {
+      state.rows = normalizeRows(data);
+    });
+  }
+
+  // assign row height
+  const rowHeight = options.rowHeight;
+  if (rowHeight) {
+    store.update((state) => {
+      state.rowHeight = rowHeight;
+    });
+  }
+}

package/src/engine/core/methods/index.ts

@@ -0,0 +1,2 @@
+export * from "./consume-options";
+export * from "./add-dom-listener";

package/src/engine/core/methods/normalize-rows.ts

@@ -0,0 +1,5 @@
+import type { PolyGridRow } from "../../services/row/interfaces/row";
+
+export function normalizeRows(data: any[]): PolyGridRow[] {
+  return data.map((item, index) => ({ index, data: item }));
+}

package/src/engine/debug.config.ts

@@ -0,0 +1,3 @@
+export const DEBUG = true;
+export const DEBUG_SHOW_FULL_STATE_DIFF = false;
+export const DEBUG_SHOW_SUBSCR_LABEL = true;

package/src/engine/rx-lite/core/observable.ts

@@ -0,0 +1,29 @@
+import { DEBUG_SHOW_SUBSCR_LABEL } from "../../debug.config";
+import type { ObservableLike } from "../interfaces/observable-like";
+import type { Operator } from "../types/operator";
+
+export class Observable<T> implements ObservableLike<T> {
+  constructor(
+    private _subscribe: (subscriber: (value: T) => void) => () => void
+  ) {}
+
+  subscribe(subscriber: (value: T) => void, label?: string) {
+    const wrapped = (value: T) => {
+      if (DEBUG_SHOW_SUBSCR_LABEL && label)
+        console.log(
+          `%cSubscription ${label ? `(${label})` : ""} reacted`,
+          "color:#9C27B0;font-weight:bold;"
+        );
+      subscriber(value);
+    };
+    return this._subscribe(wrapped);
+  }
+
+  pipe<R>(...operators: Operator<any, any>[]): ObservableLike<R> {
+    let result: ObservableLike<any> = this;
+    for (const op of operators) {
+      result = op(result);
+    }
+    return result as ObservableLike<R>;
+  }
+}

package/src/engine/rx-lite/core/subject.ts

@@ -0,0 +1,21 @@
+import type { ObservableLike } from "../interfaces/observable-like";
+import { Observable } from "./observable";
+
+export class Subject<T> implements ObservableLike<T> {
+  private subscribers = new Set<(value: T) => void>();
+
+  subscribe(subscriber: (value: T) => void) {
+    this.subscribers.add(subscriber);
+    return () => this.subscribers.delete(subscriber);
+  }
+
+  next(value: T) {
+    this.subscribers.forEach((s) => s(value));
+  }
+
+  complete() {
+    this.subscribers.clear();
+  }
+
+  pipe = Observable.prototype.pipe;
+}

package/src/engine/rx-lite/interfaces/observable-like.ts

@@ -0,0 +1,6 @@
+import type { PipeFn } from "./pipe-fn";
+
+export interface ObservableLike<T> {
+  subscribe(subscriber: (value: T) => void, label?: string): () => void;
+  pipe: PipeFn<T>;
+}

package/src/engine/rx-lite/interfaces/pipe-fn.ts

@@ -0,0 +1,18 @@
+import type { Operator } from "../types/operator";
+import type { ObservableLike } from "./observable-like";
+
+export interface PipeFn<T> {
+  <A>(op1: Operator<T, A>): ObservableLike<A>;
+  <A, B>(op1: Operator<T, A>, op2: Operator<A, B>): ObservableLike<B>;
+  <A, B, C>(
+    op1: Operator<T, A>,
+    op2: Operator<A, B>,
+    op3: Operator<B, C>
+  ): ObservableLike<C>;
+  <A, B, C, D>(
+    op1: Operator<T, A>,
+    op2: Operator<A, B>,
+    op3: Operator<B, C>,
+    op4: Operator<C, D>
+  ): ObservableLike<D>;
+}

package/src/engine/rx-lite/operators/combine-latest-any.ts

@@ -0,0 +1,51 @@
+import type { PolyGridState } from "../../store/interfaces/grid-state";
+import type { PolyGridStore } from "../../store/store";
+import { Observable } from "../core/observable";
+import type { ObservableLike } from "../interfaces/observable-like";
+
+export function createCombineLatestAny<T extends any[]>(
+  store: PolyGridStore,
+  sources: {
+    [K in keyof T]: ((state: PolyGridState) => T[K]) | ObservableLike<T[K]>;
+  }
+): ObservableLike<T> {
+  return new Observable<T>((subscriber) => {
+    const values = new Array(sources.length) as T;
+    const ready = new Array(sources.length).fill(false);
+
+    const unsubscribers = sources.map((src, index) => {
+      // --- CASE 1: Selector ---
+      if (typeof src === "function") {
+        const selector = src as (state: PolyGridState) => T[typeof index];
+        // Initial value
+        values[index] = selector(store.getState());
+        ready[index] = true;
+
+        // Subscribe to selector
+        return store.select(selector).subscribe((newValue) => {
+          values[index] = newValue;
+          subscriber([...values] as T);
+        });
+      }
+
+      // --- CASE 2: Observable ---
+      const obs = src as ObservableLike<T[typeof index]>;
+      return obs.subscribe((newValue) => {
+        values[index] = newValue;
+        ready[index] = true;
+
+        // Emit only when all sources have emitted at least once
+        if (ready.every(Boolean)) {
+          subscriber([...values] as T);
+        }
+      });
+    });
+
+    // Emit initial values if all selectors were ready
+    if (ready.every(Boolean)) {
+      subscriber([...values] as T);
+    }
+
+    return () => unsubscribers.forEach((u) => u());
+  });
+}

package/src/engine/rx-lite/operators/combine-latest.ts

@@ -0,0 +1,30 @@
+import type { PolyGridState } from "../../store/interfaces/grid-state";
+import type { ObservableLike } from "../interfaces/observable-like";
+import type { PolyGridStore } from "../../store/store";
+import { Observable } from "../core/observable";
+
+export function createCombineLatest<T extends any[]>(
+  store: PolyGridStore,
+  selectors: { [K in keyof T]: (state: PolyGridState) => T[K] }
+): ObservableLike<T> {
+  return new Observable<T>((subscriber) => {
+    // Initial values
+    let values = selectors.map((sel) => sel(store.getState())) as T;
+    subscriber(values);
+
+    // Subscribe to each selector
+    const unsubscribers = selectors.map((sel, index) =>
+      store.select(sel).subscribe((newValue) => {
+        if (!Object.is(values[index], newValue)) {
+          const next = [...values] as T;
+          next[index] = newValue;
+          values = next;
+          subscriber(values);
+        }
+      })
+    );
+
+    // Cleanup
+    return () => unsubscribers.forEach((u) => u());
+  });
+}

package/src/engine/rx-lite/operators/distinct-until-array-changed.ts

@@ -0,0 +1,22 @@
+import { Observable } from "../core/observable";
+import type { ObservableLike } from "../interfaces/observable-like";
+
+export function distinctUntilArrayChanged<T>() {
+  return (source: ObservableLike<T[]>) =>
+    new Observable<T[]>((subscriber) => {
+      let last: T[] | undefined;
+
+      return source.subscribe((next) => {
+        if (
+          last &&
+          last.length === next.length &&
+          last.every((v, i) => Object.is(v, next[i]))
+        ) {
+          return; // no change → do not emit
+        }
+
+        last = next;
+        subscriber(next);
+      });
+    });
+}

package/src/engine/rx-lite/operators/distinct-until-changed.ts

@@ -0,0 +1,20 @@
+import type { Operator } from "../types/operator";
+import { Observable } from "../core/observable";
+
+export function distinctUntilChanged<T>(
+  compare: (prev: T, next: T) => boolean = (a, b) => a === b
+): Operator<T, T> {
+  return (source) =>
+    new Observable<T>((subscriber) => {
+      let hasPrev = false;
+      let prevValue: T;
+
+      return source.subscribe((value) => {
+        if (!hasPrev || !compare(prevValue, value)) {
+          hasPrev = true;
+          prevValue = value;
+          subscriber(value);
+        }
+      });
+    });
+}

package/src/engine/rx-lite/operators/filter.ts

@@ -0,0 +1,11 @@
+import type { Operator } from "../types/operator";
+import { Observable } from "../core/observable";
+
+export function filter<T>(predicate: (value: T) => boolean): Operator<T, T> {
+  return (source) =>
+    new Observable<T>((subscriber) =>
+      source.subscribe((value) => {
+        if (predicate(value)) subscriber(value);
+      })
+    );
+}

package/src/engine/rx-lite/operators/map.ts

@@ -0,0 +1,9 @@
+import type { Operator } from "../types/operator";
+import { Observable } from "../core/observable";
+
+export function map<I, O>(project: (value: I) => O): Operator<I, O> {
+  return (source) =>
+    new Observable<O>((subscriber) =>
+      source.subscribe((value) => subscriber(project(value)))
+    );
+}

package/src/engine/rx-lite/operators/select-keyed.ts

@@ -0,0 +1,31 @@
+import type { PolyGridState } from "../../store/interfaces/grid-state";
+import type { PolyGridStore } from "../../store/store";
+import { Observable } from "../core/observable";
+import type { ObservableLike } from "../interfaces/observable-like";
+
+export function createSelectKeyed<T>(
+  store: PolyGridStore,
+  key: keyof PolyGridState,
+  selector: (state: PolyGridState) => T
+): ObservableLike<T> {
+  let last = selector(store.getState());
+
+  return new Observable<T>((subscriber) => {
+    const wrapped = (
+      state: PolyGridState,
+      changedKeys: (keyof PolyGridState)[]
+    ) => {
+      // Only react when THIS key changed
+      if (!changedKeys.includes(key)) return;
+
+      const next = selector(state);
+      if (!Object.is(last, next)) {
+        last = next;
+        subscriber(next);
+      }
+    };
+
+    store.getSubscribers().add(wrapped);
+    return () => store.getSubscribers().delete(wrapped);
+  });
+}

package/src/engine/rx-lite/operators/select.ts

@@ -0,0 +1,26 @@
+import type { PolyGridState } from "../../store/interfaces/grid-state";
+import type { ObservableLike } from "../interfaces/observable-like";
+import type { PolyGridStore } from "../../store/store";
+import { Observable } from "../core/observable";
+
+export function createSelect<T>(
+  store: PolyGridStore,
+  selector: (state: PolyGridState) => T
+): ObservableLike<T> {
+  let last = selector(store.getState());
+
+  return new Observable<T>((subscriber) => {
+    subscriber(last);
+
+    const wrapped = (state: PolyGridState) => {
+      const next = selector(state);
+      if (!Object.is(last, next)) {
+        last = next;
+        subscriber(next);
+      }
+    };
+
+    store.getSubscribers().add(wrapped);
+    return () => store.getSubscribers().delete(wrapped);
+  });
+}

package/src/engine/rx-lite/operators/skip.ts

@@ -0,0 +1,18 @@
+import { Observable } from "../core/observable";
+import type { ObservableLike } from "../interfaces/observable-like";
+import type { Operator } from "../types/operator";
+
+export function skip<T>(count: number): Operator<T, T> {
+  return (source: ObservableLike<T>) =>
+    new Observable<T>((subscriber) => {
+      let remaining = count;
+
+      return source.subscribe((value) => {
+        if (remaining > 0) {
+          remaining--;
+          return;
+        }
+        subscriber(value);
+      });
+    });
+}

package/src/engine/rx-lite/operators/takeuntil.ts

@@ -0,0 +1,18 @@
+import type { ObservableLike } from "../interfaces/observable-like";
+import type { Operator } from "../types/operator";
+import { Observable } from "../core/observable";
+
+export function takeUntil<T>(notifier: ObservableLike<any>): Operator<T, T> {
+  return (source) =>
+    new Observable<T>((subscriber) => {
+      const unsubSource = source.subscribe(subscriber);
+      const unsubNotifier = notifier.subscribe(() => {
+        unsubSource();
+        unsubNotifier();
+      });
+      return () => {
+        unsubSource();
+        unsubNotifier();
+      };
+    });
+}

package/src/engine/rx-lite/types/operator.ts

@@ -0,0 +1,3 @@
+import type { ObservableLike } from "../interfaces/observable-like";
+
+export type Operator<I, O> = (source: ObservableLike<I>) => ObservableLike<O>;