@jh-grid/jhgrid-js 0.1.2 → 0.1.3

package/README.md

@@ -16,38 +16,18 @@ performance, editing, filtering, and frozen columns, running in your browser rig
 
 ## Features
 
-- Smooth rendering via `requestAnimationFrame` + Canvas 2D, synced to your display's native refresh rate (60Hz, 120Hz, 144Hz, etc.), not capped at 60fps
-- 2D virtual scrolling: only visible cells are drawn
-- Chunk-based async data loading with prefetch & cache
-- HiDPI / Retina display support (devicePixelRatio scaling)
-- Draggable scrollbars (vertical + horizontal)
-- Left/right frozen columns (`frozenCols` / `frozenColsRight`)
-- **Cell click**: single cell selection with blue border highlight
-- **Cell drag**: multi-cell range selection with fill overlay
-- **Row selection**: single/multi row selection (`rowSelection: 'single' | 'multi'`), with an optional select-all header checkbox (`columnDefs[].headerCheckbox`)
-- **Row drag reorder**: drag rows by the row-number gutter (`rowReorder: true`)
-- **Double-click to edit**: per-column editable/readonly control
-- **Ctrl+C / Ctrl+V**: copy & paste (single cell or range, TSV format)
-- **Ctrl+Z / Ctrl+Y**: undo / redo (cell edits, row/column add/delete)
-- **Column validation**: declarative required/pattern/min/max/length/custom rules with red-border + tooltip error display (`min`/`max` compare chronologically on a `type: 'date'` column)
-- **In-cell action buttons**: `type: 'button'` columns render a clickable pill per row (e.g. "Delete", "Approve") independent of `editableCols`
-- **Date / rich-text / image cell types**: `type: 'date'` opens a native date/datetime picker; `type: 'richtext'` opens an inline bold/italic/underline/strikethrough editor; `type: 'image'` renders a cell image (`fit: 'cover' | 'contain'`, size-aware decoding, shared LRU cache), plus a pluggable `CellEditors`/`CellRenderers` registry (`registerCellEditor()`/`registerCellRenderer()`) for fully custom editors and renderers
-- **Set filter**: checkbox list of a column's distinct values in the header filter panel (`setFilterValues()`)
-- **Quick filter**: global cross-column search term (`setQuickFilter()` / `getQuickFilter()` / `clearQuickFilter()`)
-- **Single-column sort**: `setSort()` / `removeSort()` / `clearSort()`
-- **Row / column CRUD**: `addRow()`/`deleteRow()`/`undeleteRow()`, `addColumn()`/`deleteColumn()`/`undeleteColumn()`, with matching `getNew*()`/`getDeleted*()` accessors for diff-based saves
-- **Column hide/show**: `hideColumn()` / `showColumn()` / `isColumnVisible()` / `getHiddenColumns()`, plus per-row/column resize (`setRowHeight()`, `autoFitColumns()`)
-- **Multi-level header groups**: `columnDefs[].group` (or explicit `headerRows`) merges header cells across levels
-- **Per-row / per-cell styling callbacks**: `rowHighlighter` / `cellBackground` for conditional formatting
-- **State snapshot/restore**: `getState()` / `setState()` for saving and restoring grid state (filters, sort, column order/visibility, edits)
-- **Built-in localization**: `locale` option with bundled `KO_I18N` / `JA_I18N` / `ZH_I18N` text packs, per-key `i18n` overrides, and locale-aware number/date/currency cell rendering
-- **Accessibility**: ARIA labeling, keyboard-navigable header/row focus, and automatic high-contrast (`forced-colors`) theme remapping
-- **CSV export + print preview**: `exportCsv()`, `printGrid()`
-- **Arrow key navigation**: keyboard-driven cell movement
-- **Enter / Tab**: commit edit and move to next row / column
-- Text overflow with ellipsis (`…`): O(log n) binary search
-- Fully themeable
-- Zero dependencies
+- **Canvas rendering + 2D virtualization** — smooth at 60/120/144Hz, HiDPI-aware
+- **Large-data loading** — chunk-based async loading with prefetch & cache
+- **Frozen columns & scrollbars** — left/right freezing with draggable vertical/horizontal scrollbars
+- **Selection & row operations** — cell/range selection, single/multi row selection, row drag reorder
+- **Editing** — inline editing, validation, undo/redo, TSV copy & paste
+- **Rich cell types** — dropdown, multiselect, checkbox, date, richtext, image, button, plus custom editors/renderers
+- **Filtering & sorting** — set filter, quick filter, single-column sort
+- **CRUD & change tracking** — row/column add/delete with diff-based persistence
+- **Headers & styling** — multi-level headers, conditional row/cell styling
+- **State & export** — state snapshot/restore, CSV export, print preview
+- **i18n & accessibility** — KO/JA/ZH localization, ARIA, keyboard navigation, high-contrast support
+- **Zero dependencies & theming** — fully themeable with no runtime dependencies
 
 ---
 

package/dist/jhgrid.esm.js

@@ -1364,7 +1364,9 @@ var Renderer = class _Renderer {
       colPositions,
       hiddenNeighbors,
       headerCheckboxCols,
-      sel
+      sel,
+      frozenWidth,
+      vpW
     );
     ctx.restore();
     if (frozenCount > 0) {
@@ -1392,7 +1394,9 @@ var Renderer = class _Renderer {
         colPositions,
         hiddenNeighbors,
         headerCheckboxCols,
-        sel
+        sel,
+        0,
+        frozenWidth
       );
       ctx.restore();
     }
@@ -1421,7 +1425,9 @@ var Renderer = class _Renderer {
         colPositions,
         hiddenNeighbors,
         headerCheckboxCols,
-        sel
+        sel,
+        rightX,
+        frozenRightWidth
       );
       ctx.restore();
     }
@@ -1886,7 +1892,7 @@ var Renderer = class _Renderer {
   #colX(c, frozenCount, frozenWidth, frozenRightCount, rightX, scrollLeft, colPositions) {
     return colScreenX(c, { frozenCount, frozenWidth, frozenRightCount, rightX, colPositions }, scrollLeft);
   }
-  #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel) {
+  #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel, clipX = 0, clipW = Infinity) {
     if (startCol > endCol) return;
     const ctx = this.#ctx;
     const padding = theme.cellPadding;
@@ -1960,6 +1966,13 @@ var Renderer = class _Renderer {
         const visEndCol = Math.min(cell.col + cell.colspan - 1, endCol);
         textCx = colPositions[visStartCol] + xOffset;
         textCw = colPositions[visEndCol + 1] - colPositions[visStartCol];
+        const clipRight = clipX + clipW;
+        if (textCx < clipX) {
+          textCw -= clipX - textCx;
+          textCx = clipX;
+        }
+        if (textCx + textCw > clipRight) textCw = clipRight - textCx;
+        textCw = Math.max(0, textCw);
       }
       const align = cell.isLeaf ? aligns?.[cell.col] ?? "left" : cell.align ?? "center";
       const iconRsv = cell.isLeaf ? FILTER_ICON_W + 4 : 0;
@@ -2339,7 +2352,7 @@ var Renderer = class _Renderer {
     }
     ctx.restore();
   }
-  #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0 }, theme, W, H) {
+  #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0, headerH = 0 }, theme, W, H) {
     if (!vSB && !hSB) return;
     const ctx = this.#ctx;
     const r = theme.scrollbarRadius;
@@ -2347,6 +2360,7 @@ var Renderer = class _Renderer {
     if (vSB > 0 && hSB > 0) ctx.fillRect(W - vSB, H - hSB, vSB, hSB);
     if (hSB > 0 && frozenWidth > 0) ctx.fillRect(0, H - hSB, frozenWidth, hSB);
     if (hSB > 0 && frozenRightWidth > 0) ctx.fillRect(rightX, H - hSB, frozenRightWidth, hSB);
+    if (vSB > 0 && headerH > 0) ctx.fillRect(W - vSB, 0, vSB, headerH);
     ctx.fillRect(v.x, v.y, v.w, v.h);
     ctx.fillStyle = theme.scrollbarThumb;
     this.#roundRect(v.x + 2, v.thumbY + 2, v.w - 4, v.thumbH - 4, r);
@@ -4802,7 +4816,11 @@ function buildFilterPanelEl({
       clearTimeout(debounce);
       seq++;
     });
-    readTags = () => state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+    readTags = () => {
+      const pending = tagInput.value.trim();
+      if (pending && state.contains === null && state.tags.length === 0) setContains(pending);
+      return state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+    };
   }
   let valuesSection = null;
   const valueCheckboxes = [];
@@ -4863,11 +4881,13 @@ function buildFilterPanelEl({
     });
     valueCheckboxes.forEach((cb) => cb.addEventListener("change", syncSelectAll));
     valuesSearch.addEventListener("input", () => {
+      const pristine = valueCheckboxes.every((cb) => cb.checked);
       const q = valuesSearch.value.trim().toLowerCase();
       let anyVisible = false;
       for (const r of valueRows) {
         const match = !q || r.text.toLowerCase().includes(q);
         r.row.style.display = match ? "flex" : "none";
+        if (pristine) r.cb.checked = match;
         anyVisible = anyVisible || match;
       }
       noMatch.style.display = anyVisible ? "none" : "block";
@@ -7409,7 +7429,14 @@ var JHGrid = class _JHGrid {
       this._pendingLocalState = null;
       return Promise.resolve();
     }
-    this._dm.setFetch((page, size) => this._opts.fetchData(page, size, state));
+    const fetchData = this._isLocalData ? /* @__PURE__ */ (() => {
+      let all = null;
+      return (page, size) => {
+        all ??= this._opts.fetchData(0, Number.MAX_SAFE_INTEGER, state).then((r) => r.rows);
+        return all.then((rows) => ({ rows: rows.slice(page * size, page * size + size) }));
+      };
+    })() : (page, size) => this._opts.fetchData(page, size, state);
+    this._dm.setFetch(fetchData);
     return this._boot(state);
   }
   // Where the sweep sits across the loading bars, 0..1, or null to leave them flat.
@@ -11938,7 +11965,7 @@ var JHGrid = class _JHGrid {
 JHGrid.use(RowSelectionPlugin);
 
 // index.js
-var VERSION = "0.1.2";
+var VERSION = "0.1.3";
 var SUPPORTED_BROWSERS = {
   chrome: 99,
   edge: 99,

package/dist/jhgrid.js

@@ -1404,7 +1404,9 @@ var JHGrid = (() => {
         colPositions,
         hiddenNeighbors,
         headerCheckboxCols,
-        sel
+        sel,
+        frozenWidth,
+        vpW
       );
       ctx.restore();
       if (frozenCount > 0) {
@@ -1432,7 +1434,9 @@ var JHGrid = (() => {
           colPositions,
           hiddenNeighbors,
           headerCheckboxCols,
-          sel
+          sel,
+          0,
+          frozenWidth
         );
         ctx.restore();
       }
@@ -1461,7 +1465,9 @@ var JHGrid = (() => {
           colPositions,
           hiddenNeighbors,
           headerCheckboxCols,
-          sel
+          sel,
+          rightX,
+          frozenRightWidth
         );
         ctx.restore();
       }
@@ -1926,7 +1932,7 @@ var JHGrid = (() => {
     #colX(c, frozenCount, frozenWidth, frozenRightCount, rightX, scrollLeft, colPositions) {
       return colScreenX(c, { frozenCount, frozenWidth, frozenRightCount, rightX, colPositions }, scrollLeft);
     }
-    #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel) {
+    #drawHeader(labels, aligns, columns, sorts, filters, startCol, endCol, scrollLeft, totalH, rowH, headerRows, theme, frozenCount, frozenWidth, frozenRightCount, rightX, colPositions, hiddenNeighbors, headerCheckboxCols, sel, clipX = 0, clipW = Infinity) {
       if (startCol > endCol) return;
       const ctx = this.#ctx;
       const padding = theme.cellPadding;
@@ -2000,6 +2006,13 @@ var JHGrid = (() => {
           const visEndCol = Math.min(cell.col + cell.colspan - 1, endCol);
           textCx = colPositions[visStartCol] + xOffset;
           textCw = colPositions[visEndCol + 1] - colPositions[visStartCol];
+          const clipRight = clipX + clipW;
+          if (textCx < clipX) {
+            textCw -= clipX - textCx;
+            textCx = clipX;
+          }
+          if (textCx + textCw > clipRight) textCw = clipRight - textCx;
+          textCw = Math.max(0, textCw);
         }
         const align = cell.isLeaf ? aligns?.[cell.col] ?? "left" : cell.align ?? "center";
         const iconRsv = cell.isLeaf ? FILTER_ICON_W + 4 : 0;
@@ -2379,7 +2392,7 @@ var JHGrid = (() => {
       }
       ctx.restore();
     }
-    #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0 }, theme, W, H) {
+    #drawScrollbars({ v, h, SB, vSB = SB, hSB = SB, frozenWidth = 0, frozenRightWidth = 0, rightX = 0, headerH = 0 }, theme, W, H) {
       if (!vSB && !hSB) return;
       const ctx = this.#ctx;
       const r = theme.scrollbarRadius;
@@ -2387,6 +2400,7 @@ var JHGrid = (() => {
       if (vSB > 0 && hSB > 0) ctx.fillRect(W - vSB, H - hSB, vSB, hSB);
       if (hSB > 0 && frozenWidth > 0) ctx.fillRect(0, H - hSB, frozenWidth, hSB);
       if (hSB > 0 && frozenRightWidth > 0) ctx.fillRect(rightX, H - hSB, frozenRightWidth, hSB);
+      if (vSB > 0 && headerH > 0) ctx.fillRect(W - vSB, 0, vSB, headerH);
       ctx.fillRect(v.x, v.y, v.w, v.h);
       ctx.fillStyle = theme.scrollbarThumb;
       this.#roundRect(v.x + 2, v.thumbY + 2, v.w - 4, v.thumbH - 4, r);
@@ -4842,7 +4856,11 @@ var JHGrid = (() => {
         clearTimeout(debounce);
         seq++;
       });
-      readTags = () => state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+      readTags = () => {
+        const pending = tagInput.value.trim();
+        if (pending && state.contains === null && state.tags.length === 0) setContains(pending);
+        return state.contains !== null ? { contains: state.contains } : { values: [...state.tags] };
+      };
     }
     let valuesSection = null;
     const valueCheckboxes = [];
@@ -4903,11 +4921,13 @@ var JHGrid = (() => {
       });
       valueCheckboxes.forEach((cb) => cb.addEventListener("change", syncSelectAll));
       valuesSearch.addEventListener("input", () => {
+        const pristine = valueCheckboxes.every((cb) => cb.checked);
         const q = valuesSearch.value.trim().toLowerCase();
         let anyVisible = false;
         for (const r of valueRows) {
           const match = !q || r.text.toLowerCase().includes(q);
           r.row.style.display = match ? "flex" : "none";
+          if (pristine) r.cb.checked = match;
           anyVisible = anyVisible || match;
         }
         noMatch.style.display = anyVisible ? "none" : "block";
@@ -7449,7 +7469,14 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
         this._pendingLocalState = null;
         return Promise.resolve();
       }
-      this._dm.setFetch((page, size) => this._opts.fetchData(page, size, state));
+      const fetchData = this._isLocalData ? /* @__PURE__ */ (() => {
+        let all = null;
+        return (page, size) => {
+          all ??= this._opts.fetchData(0, Number.MAX_SAFE_INTEGER, state).then((r) => r.rows);
+          return all.then((rows) => ({ rows: rows.slice(page * size, page * size + size) }));
+        };
+      })() : (page, size) => this._opts.fetchData(page, size, state);
+      this._dm.setFetch(fetchData);
       return this._boot(state);
     }
     // Where the sweep sits across the loading bars, 0..1, or null to leave them flat.
@@ -11978,7 +12005,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
   JHGrid.use(RowSelectionPlugin);
 
   // index.js
-  var VERSION = "0.1.2";
+  var VERSION = "0.1.3";
   var SUPPORTED_BROWSERS = {
     chrome: 99,
     edge: 99,