@omnigrid/resize-plugin 0.0.0-stage → 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import type { GridApi, GridPlugin } from "@omnigrid/core";
+export interface ColumnResizeGuide {
+    columnId: string;
+    x: number;
+    visible: boolean;
+}
+export interface ColumnResizePluginOptions<T> {
+    onResize?: (columnId: string, width: number) => void;
+    onResizeStart?: (columnId: string, width: number) => void;
+    onResizeEnd?: (columnId: string, width: number) => void;
+}
+/**
+ * Headless column-resize controller.
+ *
+ * The plugin owns the resizing state and writes the next width back into the
+ * Grid state store via `api.setColumns()`. Adapter code can wire the actual DOM
+ * handle and pointer events to the plugin methods without needing to know the
+ * internal column hierarchy.
+ */
+export declare class ColumnResizePlugin<T> implements GridPlugin<T> {
+    readonly name = "@omnigrid/column-resize-plugin";
+    private api?;
+    private activeResize?;
+    private guide;
+    private readonly onResize?;
+    private readonly onResizeStart?;
+    private readonly onResizeEnd?;
+    constructor(options?: ColumnResizePluginOptions<T>);
+    register(api: GridApi<T>): () => void;
+    /** Returns the current width of a leaf column. */
+    getColumnWidth(columnId: string): number | undefined;
+    private canResizeColumn;
+    /** Alias for `getColumnWidth`. */
+    getWidth(columnId: string): number | undefined;
+    /** Sets a column width and clamps it to the configured min/max constraints. */
+    setColumnWidth(columnId: string, width: number): number;
+    /** Alias for `setColumnWidth`. */
+    setWidth(columnId: string, width: number): number;
+    /** Changes the width by a delta in pixels. */
+    resizeColumn(columnId: string, delta: number): number;
+    /** Alias for `resizeColumn`. */
+    resize(columnId: string, delta: number): number;
+    /** Starts an interactive resize using the pointer x-coordinate. */
+    beginResize(columnId: string, clientX: number): number;
+    /** Adapter-friendly alias for pointer-down events. */
+    handlePointerDown(columnId: string, clientX: number): number;
+    /** Updates the current resize using the new pointer x-coordinate. */
+    resizeTo(clientX: number): number;
+    /** Adapter-friendly alias for pointer-move events. */
+    handlePointerMove(clientX: number): number;
+    /** Updates the current resize using an already-calculated delta. */
+    resizeBy(delta: number): number;
+    /** Completes the active pointer drag and hides the resize guide. */
+    endResize(): number;
+    /** Adapter-friendly alias for double-click auto-fit. */
+    handleDoubleClick(columnId: string): number;
+    /** Calculates the best-fit width from header text and visible row content. */
+    autoSizeColumn(columnId: string): number;
+    /** Alias for `autoSizeColumn`. */
+    autoFitColumn(columnId: string): number;
+    /** Returns the current drag guide state for integrations. */
+    getResizeGuide(): ColumnResizeGuide;
+    /** Resets the current drag guide state. */
+    clearGuide(): void;
+    private attachResizeHandles;
+    private createResizeHandleNode;
+    private bindPointerHandlers;
+    private findLeafColumn;
+    private clampWidth;
+    private withFixedWidth;
+    private resolveCellValue;
+    private updateColumns;
+}
+export declare const ResizePlugin: typeof ColumnResizePlugin;
+export type ResizePluginOptions<T> = ColumnResizePluginOptions<T>;

package/dist/index.js

@@ -0,0 +1,330 @@
+import { flattenColumns, isColumnGroup } from "@omnigrid/core";
+/**
+ * Headless column-resize controller.
+ *
+ * The plugin owns the resizing state and writes the next width back into the
+ * Grid state store via `api.setColumns()`. Adapter code can wire the actual DOM
+ * handle and pointer events to the plugin methods without needing to know the
+ * internal column hierarchy.
+ */
+export class ColumnResizePlugin {
+    constructor(options = {}) {
+        this.name = "@omnigrid/column-resize-plugin";
+        this.guide = { columnId: "", x: 0, visible: false };
+        this.onResize = options.onResize;
+        this.onResizeStart = options.onResizeStart;
+        this.onResizeEnd = options.onResizeEnd;
+    }
+    register(api) {
+        this.api = api;
+        this.api.setColumns(this.attachResizeHandles(this.api.getState().columns));
+        const unregisterPointerHandlers = this.bindPointerHandlers();
+        return () => {
+            unregisterPointerHandlers();
+            this.clearGuide();
+            this.activeResize = undefined;
+            this.api = undefined;
+        };
+    }
+    /** Returns the current width of a leaf column. */
+    getColumnWidth(columnId) {
+        const column = this.findLeafColumn(columnId);
+        if (!column)
+            return undefined;
+        if (column.width !== undefined)
+            return column.width;
+        if (this.api)
+            return this.api.getColumnWidth(columnId) ?? column.minWidth ?? 40;
+        return 120;
+    }
+    canResizeColumn(column) {
+        return !!column && column.resizable !== false;
+    }
+    /** Alias for `getColumnWidth`. */
+    getWidth(columnId) {
+        return this.getColumnWidth(columnId);
+    }
+    /** Sets a column width and clamps it to the configured min/max constraints. */
+    setColumnWidth(columnId, width) {
+        if (!this.api)
+            return width;
+        const column = this.findLeafColumn(columnId);
+        if (!column || !this.canResizeColumn(column))
+            return this.getColumnWidth(columnId) ?? width;
+        const nextWidth = this.clampWidth(column, width);
+        const columns = this.api.getState().columns;
+        const fixedFlexWidths = new Map();
+        if (!column.pinned) {
+            const visibleScrollable = flattenColumns(columns).filter((leaf) => !leaf.hidden && !leaf.pinned);
+            const targetIndex = visibleScrollable.findIndex((leaf) => leaf.id === columnId);
+            for (const leaf of targetIndex > 0 ? visibleScrollable.slice(0, targetIndex) : []) {
+                if (leaf.flex && leaf.flex > 0 && leaf.width === undefined) {
+                    const currentWidth = this.api.getColumnWidth(leaf.id);
+                    if (currentWidth !== undefined)
+                        fixedFlexWidths.set(leaf.id, currentWidth);
+                }
+            }
+        }
+        const updated = this.updateColumns(columns, (leaf) => {
+            if (leaf.id === columnId) {
+                return leaf.flex && leaf.flex > 0 && leaf.width === undefined
+                    ? this.withFixedWidth(leaf, nextWidth)
+                    : { ...leaf, width: nextWidth };
+            }
+            const fixedWidth = fixedFlexWidths.get(leaf.id);
+            return fixedWidth === undefined ? leaf : this.withFixedWidth(leaf, fixedWidth);
+        });
+        this.api.setColumns(updated);
+        this.onResize?.(columnId, nextWidth);
+        return nextWidth;
+    }
+    /** Alias for `setColumnWidth`. */
+    setWidth(columnId, width) {
+        return this.setColumnWidth(columnId, width);
+    }
+    /** Changes the width by a delta in pixels. */
+    resizeColumn(columnId, delta) {
+        const current = this.getColumnWidth(columnId);
+        if (current === undefined)
+            return delta;
+        return this.setColumnWidth(columnId, current + delta);
+    }
+    /** Alias for `resizeColumn`. */
+    resize(columnId, delta) {
+        return this.resizeColumn(columnId, delta);
+    }
+    /** Starts an interactive resize using the pointer x-coordinate. */
+    beginResize(columnId, clientX) {
+        const column = this.findLeafColumn(columnId);
+        if (!this.canResizeColumn(column))
+            return this.getColumnWidth(columnId) ?? 0;
+        const currentWidth = this.getColumnWidth(columnId);
+        if (currentWidth === undefined)
+            return 0;
+        this.activeResize = {
+            columnId,
+            startX: clientX,
+            startWidth: currentWidth,
+            direction: column?.pinned === "right" ? -1 : 1,
+        };
+        this.guide = { columnId, x: clientX, visible: true };
+        this.onResizeStart?.(columnId, currentWidth);
+        return currentWidth;
+    }
+    /** Adapter-friendly alias for pointer-down events. */
+    handlePointerDown(columnId, clientX) {
+        return this.beginResize(columnId, clientX);
+    }
+    /** Updates the current resize using the new pointer x-coordinate. */
+    resizeTo(clientX) {
+        const active = this.activeResize;
+        if (!active)
+            return 0;
+        const delta = (clientX - active.startX) * active.direction;
+        this.guide = { columnId: active.columnId, x: clientX, visible: true };
+        return this.resizeBy(delta);
+    }
+    /** Adapter-friendly alias for pointer-move events. */
+    handlePointerMove(clientX) {
+        return this.resizeTo(clientX);
+    }
+    /** Updates the current resize using an already-calculated delta. */
+    resizeBy(delta) {
+        if (!this.activeResize)
+            return 0;
+        const { columnId, startWidth } = this.activeResize;
+        const nextWidth = this.setColumnWidth(columnId, startWidth + delta);
+        this.guide = { columnId, x: this.guide.x, visible: true };
+        return nextWidth;
+    }
+    /** Completes the active pointer drag and hides the resize guide. */
+    endResize() {
+        const active = this.activeResize;
+        if (!active)
+            return 0;
+        const width = this.getColumnWidth(active.columnId) ?? active.startWidth;
+        this.onResizeEnd?.(active.columnId, width);
+        this.clearGuide();
+        this.activeResize = undefined;
+        return width;
+    }
+    /** Adapter-friendly alias for double-click auto-fit. */
+    handleDoubleClick(columnId) {
+        return this.autoSizeColumn(columnId);
+    }
+    /** Calculates the best-fit width from header text and visible row content. */
+    autoSizeColumn(columnId) {
+        const column = this.findLeafColumn(columnId);
+        if (!column || !this.canResizeColumn(column) || !this.api)
+            return this.getColumnWidth(columnId) ?? 0;
+        const data = this.api.getProcessedData();
+        const headerLength = String(column.header ?? "").length;
+        const rowValues = data
+            .map((row) => this.resolveCellValue(row, column))
+            .filter((value) => value !== undefined)
+            .map((value) => String(value).length);
+        const maxLength = Math.max(headerLength, ...rowValues, 0);
+        const estimatedWidth = Math.round(maxLength * 8 + 24);
+        const minimum = column.minWidth ?? 0;
+        const maximum = column.maxWidth ?? Number.POSITIVE_INFINITY;
+        return this.setColumnWidth(columnId, Math.min(Math.max(estimatedWidth, minimum), maximum));
+    }
+    /** Alias for `autoSizeColumn`. */
+    autoFitColumn(columnId) {
+        return this.autoSizeColumn(columnId);
+    }
+    /** Returns the current drag guide state for integrations. */
+    getResizeGuide() {
+        return { ...this.guide };
+    }
+    /** Resets the current drag guide state. */
+    clearGuide() {
+        this.guide = { columnId: "", x: 0, visible: false };
+    }
+    attachResizeHandles(columns) {
+        return columns.map((column) => {
+            if (isColumnGroup(column)) {
+                return { ...column, children: this.attachResizeHandles(column.children) };
+            }
+            if (column.resizable === false) {
+                return column;
+            }
+            const originalHeaderRenderer = column.headerRenderer;
+            return {
+                ...column,
+                headerRenderer: (headerColumn) => {
+                    const resolvedHeader = originalHeaderRenderer ? originalHeaderRenderer(headerColumn) : headerColumn.header ?? headerColumn.id;
+                    return this.createResizeHandleNode(headerColumn, resolvedHeader);
+                },
+            };
+        });
+    }
+    createResizeHandleNode(column, content) {
+        const handleClass = column.pinned === "right"
+            ? "omnigrid-column-resize-handle omnigrid-column-resize-handle-left"
+            : "omnigrid-column-resize-handle";
+        const contentStyle = column.pinned === "right"
+            ? "position:relative; display:flex; align-items:center; width:calc(100% + 12px); margin-left:-12px; padding-left:12px; min-width:0;"
+            : "position:relative; display:flex; align-items:center; width:calc(100% + 12px); margin-right:-12px; min-width:0;";
+        const sortIndicator = column.sortState && this.api
+            ? {
+                type: "node",
+                tag: "span",
+                attrs: { class: "omnigrid-sort-indicator", "aria-hidden": true },
+                children: [
+                    this.api.icons.get(column.sortState === "asc" ? "arrow-up" : "arrow-down"),
+                    ...(column.sortIndex !== undefined
+                        ? [
+                            {
+                                type: "node",
+                                tag: "span",
+                                attrs: { class: "omnigrid-sort-priority" },
+                                children: [String(column.sortIndex)],
+                            },
+                        ]
+                        : []),
+                ],
+            }
+            : undefined;
+        return {
+            type: "node",
+            tag: "span",
+            attrs: {
+                class: "omnigrid-header-content",
+                style: contentStyle,
+            },
+            children: [
+                {
+                    type: "node",
+                    tag: "span",
+                    attrs: { class: "omnigrid-header-label", style: "overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" },
+                    children: [content],
+                },
+                ...(sortIndicator
+                    ? [
+                        {
+                            type: "node",
+                            tag: "span",
+                            attrs: { class: "omnigrid-header-tools" },
+                            children: [sortIndicator],
+                        },
+                    ]
+                    : []),
+                {
+                    type: "node",
+                    tag: "span",
+                    attrs: {
+                        class: handleClass,
+                        "aria-hidden": true,
+                        title: "Resize column",
+                    },
+                    on: {
+                        pointerdown: (_context, event) => {
+                            if (typeof event.clientX === "number") {
+                                this.beginResize(column.id, event.clientX);
+                            }
+                        },
+                        dblclick: (_context) => {
+                            this.autoSizeColumn(column.id);
+                        },
+                        click: () => undefined,
+                    },
+                },
+            ],
+        };
+    }
+    bindPointerHandlers() {
+        if (typeof document === "undefined") {
+            return () => undefined;
+        }
+        const handlePointerMove = (event) => {
+            if (!this.activeResize)
+                return;
+            this.resizeTo(event.clientX);
+        };
+        const handlePointerUp = () => {
+            if (!this.activeResize)
+                return;
+            this.endResize();
+        };
+        document.addEventListener("pointermove", handlePointerMove);
+        document.addEventListener("pointerup", handlePointerUp);
+        document.addEventListener("pointercancel", handlePointerUp);
+        return () => {
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerUp);
+            document.removeEventListener("pointercancel", handlePointerUp);
+        };
+    }
+    findLeafColumn(columnId) {
+        if (!this.api)
+            return undefined;
+        return flattenColumns(this.api.getState().columns).find((column) => column.id === columnId);
+    }
+    clampWidth(column, width) {
+        const minimum = column.minWidth ?? 0;
+        const maximum = column.maxWidth ?? Number.POSITIVE_INFINITY;
+        return Math.min(Math.max(width, minimum), maximum);
+    }
+    withFixedWidth(column, width) {
+        const fixedColumn = { ...column, width };
+        delete fixedColumn.flex;
+        return fixedColumn;
+    }
+    resolveCellValue(row, column) {
+        if (column.valueGetter)
+            return column.valueGetter(row);
+        if (!column.field)
+            return undefined;
+        return row[String(column.field)];
+    }
+    updateColumns(columns, updater) {
+        return columns.map((column) => {
+            if (isColumnGroup(column)) {
+                return { ...column, children: this.updateColumns(column.children, updater) };
+            }
+            return updater(column);
+        });
+    }
+}
+export const ResizePlugin = ColumnResizePlugin;

package/package.json

@@ -1,6 +1,42 @@
-{
-  "name": "@omnigrid/resize-plugin",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@omnigrid/resize-plugin",
+  "version": "0.1.1",
+  "description": "Headless column resize plugin for OmniGrid",
+  "keywords": [
+    "omnigrid",
+    "grid",
+    "resize",
+    "plugin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KRZK-Apps/omnigrid.git",
+    "directory": "plugins/base/resize"
+  },
+  "homepage": "https://github.com/KRZK-Apps/omnigrid/tree/main/plugins/base/resize#readme",
+  "bugs": {
+    "url": "https://github.com/KRZK-Apps/omnigrid/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npx tsc -p tsconfig.json",
+    "lint": "npx tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@omnigrid/core": "^0.1.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.