@svgrid/grid 2.6.22 → 2.7.0

package/dist/selection.js

@@ -224,15 +224,21 @@ export function createSelection(ctx) {
      * that contains the cell are returned (active range checked last so its
      * outline wins on overlap). Returns null when the cell is in no range.
      */
+    /** Could `getSelectionRects()` return anything? An anchored active range or
+     *  a committed one is the only way a rect can exist, and both are plain
+     *  property reads - so this is the cheap guard in front of anything that
+     *  would otherwise allocate a rect array to discover there is nothing. */
+    function hasAnySelectionRect() {
+        const active = ctx.selectionRange;
+        const committed = ctx.selectionRanges;
+        return Boolean(committed?.length) || Boolean(active?.anchor && active?.focus);
+    }
     function getCellRangeEdges(rowIndex, colIndex) {
         // Bail before `getSelectionRects()`, which allocates an array and resolves
         // every range. This runs once per rendered CELL on every render - about 250
         // times per frame on a default grid - and with nothing selected it did all
-        // that work to return null every time. An anchored active range or a
-        // committed one is the only way any rect can exist.
-        const active = ctx.selectionRange;
-        const committed = ctx.selectionRanges;
-        if (!committed?.length && !(active?.anchor && active?.focus))
+        // that work to return null every time.
+        if (!hasAnySelectionRect())
             return null;
         for (const rect of getSelectionRects()) {
             if (rowIndex < rect.minRow ||
@@ -250,10 +256,40 @@ export function createSelection(ctx) {
         }
         return null;
     }
+    /**
+     * The rectangle a drag is currently promising, or null when no drag is in
+     * flight. A fill grows the source rectangle out to the pointer; a move
+     * detaches an identically-sized rectangle and drops it at the offset the
+     * pointer has travelled. Both feed the same preview tint and marquee, so a
+     * range move looks like the fill handle users already know.
+     */
+    function dragPreviewRect() {
+        const m = ctx.moveDrag;
+        if (m)
+            return ctx.moveDestRect(m);
+        const d = ctx.fillDrag;
+        if (!d)
+            return null;
+        return {
+            minRow: Math.min(d.sourceMinRow, d.targetRow),
+            maxRow: Math.max(d.sourceMaxRow, d.targetRow),
+            minCol: Math.min(d.sourceMinCol, d.targetCol),
+            maxCol: Math.max(d.sourceMaxCol, d.targetCol),
+        };
+    }
     /** Returns true when the given cell is inside the fill-drag preview
      *  range BUT outside the original source range. Used to paint a
      *  dashed-outline preview while the user is dragging the handle. */
     function isInFillPreview(rowIndex, colIndex) {
+        if (ctx.moveDrag) {
+            const rect = dragPreviewRect();
+            if (!rect)
+                return false;
+            return (rowIndex >= rect.minRow &&
+                rowIndex <= rect.maxRow &&
+                colIndex >= rect.minCol &&
+                colIndex <= rect.maxCol);
+        }
         const d = ctx.fillDrag;
         if (!d)
             return false;
@@ -279,13 +315,14 @@ export function createSelection(ctx) {
      * border. Returns null when the cell isn't on the rectangle's boundary.
      */
     function fillMarqueeEdges(rowIndex, colIndex) {
-        const d = ctx.fillDrag;
-        if (!d)
+        // Cheap bail before the shared rect helper, which allocates: this runs
+        // once per rendered cell and no drag is in flight almost all the time.
+        if (!ctx.fillDrag && !ctx.moveDrag)
             return null;
-        const minR = Math.min(d.sourceMinRow, d.targetRow);
-        const maxR = Math.max(d.sourceMaxRow, d.targetRow);
-        const minC = Math.min(d.sourceMinCol, d.targetCol);
-        const maxC = Math.max(d.sourceMaxCol, d.targetCol);
+        const rect = dragPreviewRect();
+        if (!rect)
+            return null;
+        const { minRow: minR, maxRow: maxR, minCol: minC, maxCol: maxC } = rect;
         if (rowIndex < minR || rowIndex > maxR || colIndex < minC || colIndex > maxC) {
             return null;
         }
@@ -309,6 +346,18 @@ export function createSelection(ctx) {
         const column = ctx.allColumns[colIndex];
         if (!row || !column || isGroupRow(row))
             return;
+        // A pointerdown on the outer few pixels of a selection border grabs the
+        // range to move it. Checked before anything else, because everything below
+        // would first collapse the selection this drag is about to relocate.
+        // Returns false unless the pointer really was on the strip, so a click
+        // anywhere further inside falls straight through to the old behaviour.
+        if (ctx.startMoveDrag(event, rowIndex, colIndex)) {
+            // A grab that never moves still ends in a `click` on the cell under the
+            // border. Left alone that click would collapse the range the user was
+            // clearly reaching for, and on a checkbox column it would flip the value.
+            moveGrabSwallowsClick = true;
+            return;
+        }
         // NOTE: we no longer bail for checkbox columns. Bailing here meant a
         // range drag could never START on a checkbox cell. A plain click still
         // toggles the checkbox via onCellClick (a same-cell click), while a
@@ -344,27 +393,93 @@ export function createSelection(ctx) {
         extendSelection(rowIndex, colIndex);
         setActiveCell(rowIndex, colIndex);
     }
-    function endDragSelection() {
+    /** `event` is the window `pointerup` when this comes from the real gesture,
+     *  and absent when `onWindowPointerMove` calls it to recover from a release
+     *  it never saw. A range move reads its copy modifier from it, so holding
+     *  Ctrl between the last movement and the release still copies. */
+    function endDragSelection(event) {
         ctx.isDraggingSelection = false;
+        // Every drag shares one edge-scroll loop, and it exits on its own once no
+        // drag is live - but stopping it here cancels the pending frame rather
+        // than letting one more fire after the gesture is over.
+        ctx.stopEdgeScroll();
         // Also commit a fill-handle drag if one was in progress - the user
         // released the mouse, time to apply the pattern.
         if (ctx.fillDrag)
             ctx.onFillPointerUp();
+        if (ctx.moveDrag)
+            ctx.onMovePointerUp(event);
     }
     function onWindowPointerMove(event) {
+        if (ctx.moveDrag) {
+            ctx.onMovePointerMove(event);
+            return;
+        }
         if (ctx.fillDrag) {
             ctx.onFillPointerMove(event);
             return;
         }
-        if (!ctx.isDraggingSelection)
+        if (!ctx.isDraggingSelection) {
+            updateMoveGrabHover(event);
             return;
+        }
         // Safety: if no mouse button is held the drag is over (we may have
         // missed pointerup because the user lifted outside the window).
         if (event.buttons === 0) {
             endDragSelection();
+            return;
         }
+        // Drag-select past the viewport edge scrolls the grid, same as the fill
+        // and move drags. Without it a range can only ever cover what was already
+        // on screen when the drag started. `onCellPointerEnter` keeps extending
+        // the range for cells the pointer actually crosses; this covers the case
+        // where the pointer has stopped at the edge and the CELLS are moving.
+        ctx.trackEdgeScroll(event);
     }
+    /**
+     * Switch the grid to a move cursor while the pointer sits on the grab strip
+     * of a selection border - without it the feature is invisible, since the
+     * border is painted, not a hit target.
+     *
+     * This runs on every window pointermove, so the order of the guards is the
+     * point: `moveCellsEffective` and the already-hovering flag are plain
+     * property reads, and `isOnMoveGrabStrip` bails on `getCellRangeEdges`
+     * before measuring anything when no range is selected.
+     */
+    function updateMoveGrabHover(event) {
+        const wasHovering = ctx.moveGrabHover;
+        // Two property reads before anything touches the DOM. `closest()` walks
+        // ancestors on EVERY pointer move over the page, so it has to sit behind
+        // both "the feature is on" and "there is a range to grab".
+        if (!ctx.moveCellsEffective || !hasAnySelectionRect()) {
+            if (wasHovering)
+                ctx.moveGrabHover = false;
+            return;
+        }
+        const target = event.target;
+        const cell = target?.closest?.("td[data-svgrid-row][data-svgrid-col]");
+        let hovering = false;
+        if (cell) {
+            const r = Number(cell.dataset.svgridRow);
+            const c = Number(cell.dataset.svgridCol);
+            if (Number.isFinite(r) && Number.isFinite(c)) {
+                hovering = ctx.isOnMoveGrabStrip(cell, r, c, event.clientX, event.clientY);
+            }
+        }
+        if (hovering !== wasHovering)
+            ctx.moveGrabHover = hovering;
+    }
+    /** Set when a pointerdown started a range move, so the `click` that
+     *  follows a zero-distance grab is discarded instead of collapsing the
+     *  selection it grabbed. One gesture, one flag - cleared on the next click
+     *  whether or not the grab turned into a real drag. */
+    let moveGrabSwallowsClick = false;
     function onCellClick(rowIndex, colIndex) {
+        if (moveGrabSwallowsClick) {
+            moveGrabSwallowsClick = false;
+            ctx.gridRootEl?.focus({ preventScroll: true });
+            return;
+        }
         const row = ctx.allRows[rowIndex];
         const column = ctx.allColumns[colIndex];
         if (!row || !column)
@@ -450,6 +565,7 @@ export function createSelection(ctx) {
         fillMarqueeEdges,
         getSelectionRects,
         isInFillPreview,
+        dragPreviewRect,
         findColumnById,
         onCellPointerDown,
         onCellPointerEnter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.6.22",
+  "version": "2.7.0",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -116,15 +116,6 @@
     "themes",
     "CHANGELOG.md"
   ],
-  "scripts": {
-    "clean": "rimraf ./build && rimraf ./dist",
-    "test:eslint": "eslint ./src",
-    "test:types": "svelte-check --tsconfig ./tsconfig.json",
-    "test:lib": "vitest run --coverage",
-    "test:build": "publint --strict",
-    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ../../tools/add-dist-extensions.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
-    "lint": "eslint ./src"
-  },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -141,5 +132,14 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:lib": "vitest run --coverage",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ../../tools/add-dist-extensions.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
+    "lint": "eslint ./src"
   }
-}
+}

package/src/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}