@svgrid/grid 1.0.2 → 1.1.1

package/dist/columns.js

@@ -0,0 +1,277 @@
+import "./sv-grid-scrollbar";
+export function createColumns(ctx) {
+    function cellPinStyle(columnId) {
+        // z-index 30 - higher than the active-cell / selection-range stacking
+        // context (z=20) so a selected cell in the scrollable middle never
+        // bleeds over the pinned columns during horizontal scroll. Still
+        // sits below dropdowns (z=900+) and the column menu.
+        const leftOffset = ctx.pinnedOffsets.left[columnId];
+        if (leftOffset !== undefined) {
+            return `position: sticky; left: ${leftOffset}px; z-index: 30;`;
+        }
+        const rightOffset = ctx.pinnedOffsets.right[columnId];
+        if (rightOffset !== undefined) {
+            return `position: sticky; right: ${rightOffset}px; z-index: 30;`;
+        }
+        return "";
+    }
+    function isColumnPinned(columnId) {
+        if (ctx.columnPinning.left.includes(columnId))
+            return "left";
+        if (ctx.columnPinning.right.includes(columnId))
+            return "right";
+        return null;
+    }
+    /** Compute the current full column order as displayed (pinned-left
+     *  first, unpinned in the middle, pinned-right last). The order
+     *  emitted via `onColumnOrderChange` matches what the user sees. */
+    function getCurrentColumnOrder() {
+        return ctx.allColumns.map((c) => c.id);
+    }
+    function emitColumnOrder() {
+        ctx.props.onColumnOrderChange?.(getCurrentColumnOrder());
+    }
+    function setColumnOrderInternal(ids) {
+        ctx.userColumnOrder = [...ids];
+        emitColumnOrder();
+    }
+    /** Drop `dragId` before / after `targetId` in the user order. We
+     *  rebuild a clean order out of the currently-displayed columns so
+     *  hidden columns are unaffected and pin groups stay logically
+     *  separate (you can reorder freely within left-pinned / unpinned /
+     *  right-pinned, but a drop across pin zones is allowed - the cell
+     *  just lands in whichever zone the target belongs to). */
+    function applyColumnDrop(dragId, targetId, side) {
+        if (dragId === targetId)
+            return;
+        const current = getCurrentColumnOrder();
+        const without = current.filter((id) => id !== dragId);
+        let idx = without.indexOf(targetId);
+        if (idx < 0)
+            return;
+        if (side === "after")
+            idx++;
+        without.splice(idx, 0, dragId);
+        setColumnOrderInternal(without);
+    }
+    function onColumnHeaderDragStart(e, columnId) {
+        if (!(ctx.props.enableColumnReorder ?? false))
+            return;
+        ctx.colDragId = columnId;
+        e.dataTransfer?.setData("text/plain", columnId);
+        e.dataTransfer.effectAllowed = "move";
+    }
+    function onColumnHeaderDragOver(e, columnId) {
+        if (!ctx.colDragId || ctx.colDragId === columnId)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        const rect = e.currentTarget.getBoundingClientRect();
+        ctx.colDropSide = e.clientX < rect.left + rect.width / 2 ? "before" : "after";
+        ctx.colDropOnId = columnId;
+    }
+    function onColumnHeaderDragLeave(columnId) {
+        if (ctx.colDropOnId === columnId) {
+            ctx.colDropOnId = null;
+            ctx.colDropSide = null;
+        }
+    }
+    function onColumnHeaderDrop(e, columnId) {
+        e.preventDefault();
+        if (ctx.colDragId && ctx.colDropSide)
+            applyColumnDrop(ctx.colDragId, columnId, ctx.colDropSide);
+        ctx.colDragId = null;
+        ctx.colDropOnId = null;
+        ctx.colDropSide = null;
+    }
+    function onColumnHeaderDragEnd() {
+        ctx.colDragId = null;
+        ctx.colDropOnId = null;
+        ctx.colDropSide = null;
+    }
+    function pinColumnLeft(columnId) {
+        const left = ctx.columnPinning.left.filter((id) => id !== columnId);
+        const right = ctx.columnPinning.right.filter((id) => id !== columnId);
+        ctx.columnPinning = { left: [...left, columnId], right };
+        ctx.closeMenus();
+    }
+    function pinColumnRight(columnId) {
+        const left = ctx.columnPinning.left.filter((id) => id !== columnId);
+        const right = ctx.columnPinning.right.filter((id) => id !== columnId);
+        ctx.columnPinning = { left, right: [columnId, ...right] };
+        ctx.closeMenus();
+    }
+    function unpinColumn(columnId) {
+        ctx.columnPinning = {
+            left: ctx.columnPinning.left.filter((id) => id !== columnId),
+            right: ctx.columnPinning.right.filter((id) => id !== columnId),
+        };
+        ctx.closeMenus();
+    }
+    function toggleColumnVisibleInPanel(columnId) {
+        if (ctx.hiddenColumns[columnId]) {
+            const next = { ...ctx.hiddenColumns };
+            delete next[columnId];
+            ctx.hiddenColumns = next;
+        }
+        else {
+            ctx.hiddenColumns = { ...ctx.hiddenColumns, [columnId]: true };
+        }
+    }
+    function moveColumnInPanel(columnId, dir) {
+        const current = ctx.toolPanelColumns.map((c) => c.id);
+        const i = current.indexOf(columnId);
+        const j = i + dir;
+        if (i < 0 || j < 0 || j >= current.length)
+            return;
+        [current[i], current[j]] = [current[j], current[i]];
+        ctx.userColumnOrder = current;
+    }
+    function toggleGroupInPanel(columnId) {
+        const g = (ctx.grid.getState().grouping ?? []);
+        ctx.grid.setGrouping(g.includes(columnId)
+            ? g.filter((x) => x !== columnId)
+            : [...g, columnId]);
+    }
+    /** Width before fitColumns scaling - what the columnDef/user actually set. */
+    function getColumnBaseWidth(columnId) {
+        if (ctx.columnWidths[columnId] !== undefined)
+            return ctx.columnWidths[columnId];
+        const column = ctx.grid.getAllColumns().find((c) => c.id === columnId);
+        if (column?.columnDef.width !== undefined)
+            return column.columnDef.width;
+        return ctx.props.columnWidth ?? 140;
+    }
+    function getColumnWidth(columnId) {
+        const fitted = ctx.fittedColumnWidths?.[columnId];
+        if (fitted !== undefined && ctx.columnWidths[columnId] === undefined)
+            return fitted;
+        return getColumnBaseWidth(columnId);
+    }
+    function startColumnResize(event, columnId) {
+        event.stopPropagation();
+        event.preventDefault();
+        ctx.resizingColumnId = columnId;
+        ctx.resizeStartX = event.clientX;
+        ctx.resizeStartWidth = getColumnWidth(columnId);
+        document.addEventListener("pointermove", onColumnResizeMove);
+        document.addEventListener("pointerup", endColumnResize);
+        document.addEventListener("pointercancel", endColumnResize);
+    }
+    function onColumnResizeMove(event) {
+        if (!ctx.resizingColumnId)
+            return;
+        // Coalesce updates onto the animation frame: pointermove can fire many
+        // times per frame, and each $state mutation triggers a full reactive
+        // recompute of the column-layout pipeline. Without rAF coalescing the
+        // grid stutters during the drag.
+        ctx.resizePendingWidth = Math.max(ctx.MIN_COLUMN_WIDTH, ctx.resizeStartWidth + (event.clientX - ctx.resizeStartX));
+        if (ctx.resizeRaf !== null)
+            return;
+        ctx.resizeRaf = requestAnimationFrame(() => {
+            ctx.resizeRaf = null;
+            if (!ctx.resizingColumnId)
+                return;
+            ctx.columnWidths = {
+                ...ctx.columnWidths,
+                [ctx.resizingColumnId]: ctx.resizePendingWidth,
+            };
+        });
+    }
+    function endColumnResize() {
+        if (ctx.resizeRaf !== null) {
+            cancelAnimationFrame(ctx.resizeRaf);
+            ctx.resizeRaf = null;
+        }
+        if (ctx.resizingColumnId && ctx.resizePendingWidth) {
+            // Make sure the final width is committed even if the last rAF was
+            // canceled mid-flight.
+            ctx.columnWidths = {
+                ...ctx.columnWidths,
+                [ctx.resizingColumnId]: ctx.resizePendingWidth,
+            };
+        }
+        ctx.resizingColumnId = null;
+        document.removeEventListener("pointermove", onColumnResizeMove);
+        document.removeEventListener("pointerup", endColumnResize);
+        document.removeEventListener("pointercancel", endColumnResize);
+    }
+    function measureText(text, font) {
+        if (!text)
+            return 0;
+        if (!ctx.measureCanvas)
+            ctx.measureCanvas = document.createElement("canvas");
+        const c2d = ctx.measureCanvas.getContext("2d");
+        if (!c2d)
+            return 0;
+        c2d.font = font;
+        return c2d.measureText(text).width;
+    }
+    /** Snap a column to the width of its widest visible cell (header + body). */
+    function autosizeColumn(columnId) {
+        if (!ctx.gridRootEl)
+            return;
+        const sampleCell = ctx.gridRootEl.querySelector(`[data-col-id="${CSS.escape(columnId)}"]`);
+        if (!sampleCell)
+            return;
+        const cellFont = getComputedStyle(sampleCell).font;
+        let max = ctx.MIN_COLUMN_WIDTH;
+        const header = ctx.gridRootEl.querySelector(`[data-svgrid-header-col="${CSS.escape(columnId)}"]`);
+        if (header) {
+            const labelEl = header.querySelector(".sv-grid-header-label");
+            const target = labelEl ?? header;
+            const text = target.textContent ?? "";
+            // +70 reserves room for sort indicator + funnel + 3-dot menu button
+            max = Math.max(max, measureText(text, getComputedStyle(target).font) + 70);
+        }
+        const cells = ctx.gridRootEl.querySelectorAll(`[data-col-id="${CSS.escape(columnId)}"]`);
+        cells.forEach((cell) => {
+            const text = cell.textContent ?? "";
+            const w = measureText(text, cellFont);
+            if (w > max)
+                max = w;
+        });
+        // cell horizontal padding (~16px) + 8px breathing room
+        ctx.columnWidths = {
+            ...ctx.columnWidths,
+            [columnId]: Math.max(ctx.MIN_COLUMN_WIDTH, Math.ceil(max) + 24),
+        };
+    }
+    function autosizeAllColumns() {
+        for (const column of ctx.allColumns)
+            autosizeColumn(column.id);
+    }
+    function resetColumns() {
+        ctx.columnWidths = {};
+        ctx.hiddenColumns = {};
+        ctx.columnPinning = { left: [], right: [] };
+    }
+    return {
+        cellPinStyle,
+        isColumnPinned,
+        getCurrentColumnOrder,
+        emitColumnOrder,
+        setColumnOrderInternal,
+        applyColumnDrop,
+        onColumnHeaderDragStart,
+        onColumnHeaderDragOver,
+        onColumnHeaderDragLeave,
+        onColumnHeaderDrop,
+        onColumnHeaderDragEnd,
+        pinColumnLeft,
+        pinColumnRight,
+        unpinColumn,
+        toggleColumnVisibleInPanel,
+        moveColumnInPanel,
+        toggleGroupInPanel,
+        getColumnBaseWidth,
+        getColumnWidth,
+        startColumnResize,
+        onColumnResizeMove,
+        endColumnResize,
+        measureText,
+        autosizeColumn,
+        autosizeAllColumns,
+        resetColumns,
+    };
+}

package/dist/columns.test.d.ts

@@ -0,0 +1 @@
+export {};