@svgrid/grid 1.1.0 → 1.1.2

package/dist/selection.js

@@ -158,9 +158,47 @@ export function createSelection(ctx) {
         // No inline scrollVersion bump - the `scroll` event triggers
         // onBodyScroll which flushes via rAF, doing one batched update.
     }
-    function setSelection(rowIndex, colIndex) {
+    // Normalize a range to a rectangle, or null when incomplete.
+    function rangeRect(range) {
+        const a = range?.anchor;
+        const f = range?.focus;
+        if (!a || !f)
+            return null;
+        return {
+            minRow: Math.min(a.rowIndex, f.rowIndex),
+            maxRow: Math.max(a.rowIndex, f.rowIndex),
+            minCol: Math.min(a.colIndex, f.colIndex),
+            maxCol: Math.max(a.colIndex, f.colIndex),
+        };
+    }
+    // Every selected rectangle: the committed extra ranges plus the active one.
+    // Order matters for copy (added-order); the active range comes last.
+    function getSelectionRects() {
+        const rects = [];
+        for (const r of ctx.selectionRanges ?? []) {
+            const rect = rangeRect(r);
+            if (rect)
+                rects.push(rect);
+        }
+        const active = rangeRect(ctx.selectionRange);
+        if (active)
+            rects.push(active);
+        return rects;
+    }
+    function setSelection(rowIndex, colIndex, additive = false) {
         if (!ctx.enableCellSelectionEffective)
             return;
+        if (additive) {
+            // Commit the current active range (if any) and start a fresh one, so the
+            // previous rectangle stays highlighted alongside the new Ctrl+drag.
+            const active = ctx.selectionRange;
+            if (active.anchor && active.focus) {
+                ctx.selectionRanges = [...ctx.selectionRanges, active];
+            }
+        }
+        else {
+            ctx.selectionRanges = [];
+        }
         const point = { rowIndex, colIndex };
         ctx.selectionRange = { anchor: point, focus: point };
     }
@@ -171,44 +209,38 @@ export function createSelection(ctx) {
         ctx.selectionRange = { anchor, focus: { rowIndex, colIndex } };
     }
     function isCellInSelectedRange(rowIndex, colIndex) {
-        const anchor = ctx.selectionRange.anchor;
-        const focus = ctx.selectionRange.focus;
-        if (!anchor || !focus)
-            return false;
-        const minRow = Math.min(anchor.rowIndex, focus.rowIndex);
-        const maxRow = Math.max(anchor.rowIndex, focus.rowIndex);
-        const minCol = Math.min(anchor.colIndex, focus.colIndex);
-        const maxCol = Math.max(anchor.colIndex, focus.colIndex);
-        return (rowIndex >= minRow &&
-            rowIndex <= maxRow &&
-            colIndex >= minCol &&
-            colIndex <= maxCol);
+        for (const rect of getSelectionRects()) {
+            if (rowIndex >= rect.minRow &&
+                rowIndex <= rect.maxRow &&
+                colIndex >= rect.minCol &&
+                colIndex <= rect.maxCol) {
+                return true;
+            }
+        }
+        return false;
     }
     /**
-     * Returns which sides of the selection rectangle a cell sits on, for the
-     * Excel-style outline. Returns null when the cell is outside the range.
+     * Returns which sides of a selection rectangle a cell sits on, for the
+     * Excel-style outline. With multiple ranges, the edges of the FIRST range
+     * 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.
      */
     function getCellRangeEdges(rowIndex, colIndex) {
-        const anchor = ctx.selectionRange.anchor;
-        const focus = ctx.selectionRange.focus;
-        if (!anchor || !focus)
-            return null;
-        const minRow = Math.min(anchor.rowIndex, focus.rowIndex);
-        const maxRow = Math.max(anchor.rowIndex, focus.rowIndex);
-        const minCol = Math.min(anchor.colIndex, focus.colIndex);
-        const maxCol = Math.max(anchor.colIndex, focus.colIndex);
-        if (rowIndex < minRow ||
-            rowIndex > maxRow ||
-            colIndex < minCol ||
-            colIndex > maxCol) {
-            return null;
+        for (const rect of getSelectionRects()) {
+            if (rowIndex < rect.minRow ||
+                rowIndex > rect.maxRow ||
+                colIndex < rect.minCol ||
+                colIndex > rect.maxCol) {
+                continue;
+            }
+            return {
+                top: rowIndex === rect.minRow,
+                bottom: rowIndex === rect.maxRow,
+                left: colIndex === rect.minCol,
+                right: colIndex === rect.maxCol,
+            };
         }
-        return {
-            top: rowIndex === minRow,
-            bottom: rowIndex === maxRow,
-            left: colIndex === minCol,
-            right: colIndex === maxCol,
-        };
+        return null;
     }
     /** Returns true when the given cell is inside the fill-drag preview
      *  range BUT outside the original source range. Used to paint a
@@ -259,8 +291,15 @@ export function createSelection(ctx) {
         }
         else {
             setActiveCell(rowIndex, colIndex);
-            setSelection(rowIndex, colIndex);
-            ctx.isDraggingSelection = true;
+            // Ctrl/Cmd starts an ADDITIONAL range, keeping prior ranges highlighted.
+            setSelection(rowIndex, colIndex, event.ctrlKey || event.metaKey);
+            // Range drag-select is a mouse/pen affordance. On touch, starting a drag
+            // here would rubber-band a selection AND fight the browser's native
+            // scroll (we never preventDefault), so a finger-drag to scroll the grid
+            // instead selected cells. Tap still selects the single cell above; we
+            // just don't enter drag-select mode for touch. (issue #23)
+            if (event.pointerType !== "touch")
+                ctx.isDraggingSelection = true;
         }
     }
     function onCellPointerEnter(rowIndex, colIndex) {
@@ -375,6 +414,7 @@ export function createSelection(ctx) {
         extendSelection,
         isCellInSelectedRange,
         getCellRangeEdges,
+        getSelectionRects,
         isInFillPreview,
         findColumnById,
         onCellPointerDown,

package/dist/selection.multi-range.test.d.ts

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

package/dist/selection.multi-range.test.js

@@ -0,0 +1,55 @@
+/**
+ * Unit tests for multiple-range (Ctrl+drag) cell selection, driven through the
+ * pure range helpers of createSelection(ctx) with a minimal fake ctx.
+ */
+import { describe, expect, it } from 'vitest';
+import { createSelection } from './selection';
+function makeCtx() {
+    return {
+        enableCellSelectionEffective: true,
+        selectionRange: { anchor: null, focus: null },
+        selectionRanges: [],
+    };
+}
+describe('multiple range selection', () => {
+    it('a plain selection replaces any committed ranges', () => {
+        const ctx = makeCtx();
+        const s = createSelection(ctx);
+        s.setSelection(0, 0);
+        s.extendSelection(1, 1); // active range 0,0..1,1
+        s.setSelection(5, 5, true); // additive: commit prior, start new
+        expect(ctx.selectionRanges.length).toBe(1);
+        s.setSelection(9, 9, false); // plain: clears committed
+        expect(ctx.selectionRanges.length).toBe(0);
+    });
+    it('Ctrl+drag commits the prior range and keeps both highlighted', () => {
+        const ctx = makeCtx();
+        const s = createSelection(ctx);
+        s.setSelection(0, 0);
+        s.extendSelection(1, 1); // range A: rows 0-1, cols 0-1
+        s.setSelection(3, 3, true); // start range B additively
+        s.extendSelection(4, 4); // range B: rows 3-4, cols 3-4
+        const rects = s.getSelectionRects();
+        expect(rects.length).toBe(2);
+        // both ranges report cells as selected
+        expect(s.isCellInSelectedRange(0, 0)).toBe(true);
+        expect(s.isCellInSelectedRange(1, 1)).toBe(true);
+        expect(s.isCellInSelectedRange(4, 4)).toBe(true);
+        // a cell in neither is not selected
+        expect(s.isCellInSelectedRange(2, 2)).toBe(false);
+    });
+    it('getCellRangeEdges outlines each range independently', () => {
+        const ctx = makeCtx();
+        const s = createSelection(ctx);
+        s.setSelection(0, 0);
+        s.extendSelection(1, 1);
+        s.setSelection(3, 3, true);
+        s.extendSelection(4, 4);
+        // top-left corner of range A
+        expect(s.getCellRangeEdges(0, 0)).toEqual({ top: true, bottom: false, left: true, right: false });
+        // bottom-right corner of range B
+        expect(s.getCellRangeEdges(4, 4)).toEqual({ top: false, bottom: true, left: false, right: true });
+        // outside every range
+        expect(s.getCellRangeEdges(2, 2)).toBeNull();
+    });
+});

package/dist/selection.test.d.ts

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