@alaarab/ogrid-angular 2.6.0 → 2.6.1

package/dist/esm/services/datagrid-layout.service.js

@@ -0,0 +1,157 @@
+import { signal, computed, effect } from '@angular/core';
+import { flattenColumns, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, resolveResponsiveConfig, applyResponsiveHiding, } from '@alaarab/ogrid-core';
+/**
+ * Manages column layout, visibility, sizing, and container measurement.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable  -  instantiated and owned by DataGridStateService.
+ */
+export class DataGridLayoutHelper {
+    constructor(props, wrapperEl, ngZone) {
+        // --- Internal state ---
+        this.containerWidthSig = signal(0, ...(ngDevMode ? [{ debugName: "containerWidthSig" }] : []));
+        this.columnSizingOverridesSig = signal({}, ...(ngDevMode ? [{ debugName: "columnSizingOverridesSig" }] : []));
+        // ResizeObserver
+        this.resizeObserver = null;
+        this.props = props;
+        this.wrapperEl = wrapperEl;
+        this.initialColumnWidthsSig = computed(() => this.props()?.initialColumnWidths, ...(ngDevMode ? [{ debugName: "initialColumnWidthsSig" }] : []));
+        this.flatColumnsRaw = computed(() => {
+            const p = this.props();
+            if (!p)
+                return [];
+            return flattenColumns(p.columns);
+        }, ...(ngDevMode ? [{ debugName: "flatColumnsRaw" }] : []));
+        this.flatColumns = computed(() => {
+            const raw = this.flatColumnsRaw();
+            const p = this.props();
+            const pinnedColumns = p?.pinnedColumns;
+            if (!pinnedColumns || Object.keys(pinnedColumns).length === 0)
+                return raw;
+            return raw.map((col) => {
+                const override = pinnedColumns[col.columnId];
+                if (override && col.pinned !== override)
+                    return { ...col, pinned: override };
+                return col;
+            });
+        }, ...(ngDevMode ? [{ debugName: "flatColumns" }] : []));
+        this.visibleCols = computed(() => {
+            const p = this.props();
+            if (!p)
+                return [];
+            const flatCols = this.flatColumns();
+            const filtered = p.visibleColumns
+                ? flatCols.filter((c) => p.visibleColumns.has(c.columnId))
+                : flatCols;
+            let ordered;
+            const order = p.columnOrder;
+            if (!order?.length) {
+                ordered = filtered;
+            }
+            else {
+                const orderMap = new Map();
+                for (let i = 0; i < order.length; i++) {
+                    orderMap.set(order[i], i);
+                }
+                ordered = [...filtered].sort((a, b) => {
+                    const ia = orderMap.get(a.columnId) ?? -1;
+                    const ib = orderMap.get(b.columnId) ?? -1;
+                    if (ia === -1 && ib === -1)
+                        return 0;
+                    if (ia === -1)
+                        return 1;
+                    if (ib === -1)
+                        return -1;
+                    return ia - ib;
+                });
+            }
+            // Responsive column hiding
+            return applyResponsiveHiding(ordered, this.containerWidthSig(), resolveResponsiveConfig(p.responsiveColumns));
+        }, ...(ngDevMode ? [{ debugName: "visibleCols" }] : []));
+        this.visibleColumnCount = computed(() => this.visibleCols().length, ...(ngDevMode ? [{ debugName: "visibleColumnCount" }] : []));
+        this.hasCheckboxCol = computed(() => (this.props()?.rowSelection ?? 'none') === 'multiple', ...(ngDevMode ? [{ debugName: "hasCheckboxCol" }] : []));
+        this.hasRowNumbersCol = computed(() => !!this.props()?.showRowNumbers, ...(ngDevMode ? [{ debugName: "hasRowNumbersCol" }] : []));
+        this.specialColsCount = computed(() => (this.hasCheckboxCol() ? 1 : 0) + (this.hasRowNumbersCol() ? 1 : 0), ...(ngDevMode ? [{ debugName: "specialColsCount" }] : []));
+        this.totalColCount = computed(() => this.visibleColumnCount() + this.specialColsCount(), ...(ngDevMode ? [{ debugName: "totalColCount" }] : []));
+        this.colOffset = computed(() => this.specialColsCount(), ...(ngDevMode ? [{ debugName: "colOffset" }] : []));
+        this.rowIndexByRowId = computed(() => {
+            const p = this.props();
+            if (!p)
+                return new Map();
+            const m = new Map();
+            p.items.forEach((item, idx) => m.set(p.getRowId(item), idx));
+            return m;
+        }, ...(ngDevMode ? [{ debugName: "rowIndexByRowId" }] : []));
+        this.minTableWidth = computed(() => {
+            const checkboxW = this.hasCheckboxCol() ? CHECKBOX_COLUMN_WIDTH : 0;
+            return this.visibleCols().reduce((sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING, checkboxW);
+        }, ...(ngDevMode ? [{ debugName: "minTableWidth" }] : []));
+        this.desiredTableWidth = computed(() => {
+            const checkboxW = this.hasCheckboxCol() ? CHECKBOX_COLUMN_WIDTH : 0;
+            const overrides = this.columnSizingOverridesSig();
+            return this.visibleCols().reduce((sum, c) => {
+                const override = overrides[c.columnId];
+                const w = override
+                    ? override.widthPx
+                    : (c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+                return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
+            }, checkboxW);
+        }, ...(ngDevMode ? [{ debugName: "desiredTableWidth" }] : []));
+        // Initialize column sizing overrides from initial widths
+        effect(() => {
+            const widths = this.initialColumnWidthsSig();
+            if (widths) {
+                const result = {};
+                for (const [id, width] of Object.entries(widths)) {
+                    result[id] = { widthPx: width };
+                }
+                this.columnSizingOverridesSig.set(result);
+            }
+        });
+        // Container width measurement via ResizeObserver
+        effect(() => {
+            const el = this.wrapperEl();
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+            if (!el)
+                return;
+            const measure = () => {
+                const rect = el.getBoundingClientRect();
+                const cs = window.getComputedStyle(el);
+                const borderX = (parseFloat(cs.borderLeftWidth || '0') || 0) +
+                    (parseFloat(cs.borderRightWidth || '0') || 0);
+                this.containerWidthSig.set(Math.max(0, rect.width - borderX));
+            };
+            ngZone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(measure);
+                this.resizeObserver.observe(el);
+            });
+            measure();
+        });
+        // Clean up column sizing overrides for removed columns
+        effect(() => {
+            const colIds = new Set(this.flatColumns().map((c) => c.columnId));
+            this.columnSizingOverridesSig.update((prev) => {
+                const next = {};
+                let changed = false;
+                for (const [id, value] of Object.entries(prev)) {
+                    if (colIds.has(id)) {
+                        next[id] = value;
+                    }
+                    else {
+                        changed = true;
+                    }
+                }
+                return changed ? next : prev;
+            });
+        });
+    }
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+}