@jh-grid/jhgrid-js 0.1.0 → 0.1.2

package/dist/jhgrid.js

@@ -44,6 +44,14 @@ var JHGrid = (() => {
     #chunkSize;
     #maxChunks;
     #cache = /* @__PURE__ */ new Map();
+    // 1-entry cache of the chunk getRow() touched last. A bulk row-major walk (e.g. clearing an
+    // entire selection) calls getRow() for every column of the same row back-to-back -- same
+    // chunkIdx every time -- and #chunkSize more rows after that before it changes, so this turns
+    // the overwhelming majority of getRow() calls into a single index comparison instead of a Map
+    // lookup plus the LRU delete+re-insert below. Must be invalidated everywhere #cache forgets a
+    // chunk (#evict, clear) so it can never serve an entry #cache itself no longer considers current.
+    #lastChunkIdx = -1;
+    #lastChunk = null;
     #fetching = /* @__PURE__ */ new Set();
     #failed = /* @__PURE__ */ new Set();
     #failedTimers = /* @__PURE__ */ new Set();
@@ -77,10 +85,13 @@ var JHGrid = (() => {
     // re-request after onChunkLoaded).
     getRow(rowIndex) {
       const chunkIdx = Math.floor(rowIndex / this.#chunkSize);
+      if (chunkIdx === this.#lastChunkIdx) return this.#lastChunk[rowIndex % this.#chunkSize] ?? null;
       if (this.#cache.has(chunkIdx)) {
         const chunk = this.#cache.get(chunkIdx);
         this.#cache.delete(chunkIdx);
         this.#cache.set(chunkIdx, chunk);
+        this.#lastChunkIdx = chunkIdx;
+        this.#lastChunk = chunk;
         return chunk[rowIndex % this.#chunkSize] ?? null;
       }
       this.#request(chunkIdx);
@@ -241,6 +252,10 @@ var JHGrid = (() => {
       while (this.#cache.size > this.#maxChunks) {
         const oldest = this.#cache.keys().next().value;
         this.#cache.delete(oldest);
+        if (oldest === this.#lastChunkIdx) {
+          this.#lastChunkIdx = -1;
+          this.#lastChunk = null;
+        }
       }
     }
     // Returning `false` from `callback` stops the walk. Callers that are looking for an answer
@@ -267,6 +282,8 @@ var JHGrid = (() => {
       this.#failed.clear();
       this.#failedTimers.forEach(clearTimeout);
       this.#failedTimers.clear();
+      this.#lastChunkIdx = -1;
+      this.#lastChunk = null;
     }
   };
 
@@ -4354,6 +4371,12 @@ var JHGrid = (() => {
     multiSortEnabled,
     i18n,
     theme,
+    // wrapperHeight + openUpward: when the caller found more room above the header than below (a
+    // grid scrolled to sit low on the page — see _openFilterPanel), the panel anchors its *bottom*
+    // to the header's top edge and grows upward instead of down, same as a native <select> flipping
+    // when it would otherwise overflow the viewport.
+    wrapperHeight,
+    openUpward,
     // Set filter (checkbox list of exact values) — distinctValues is null when the column has too
     // many/no loaded values yet, in which case the panel falls back to the plain text search box
     // below instead of rendering a checklist. selectedValues is the currently-applied array filter
@@ -4378,7 +4401,6 @@ var JHGrid = (() => {
   }) {
     const PANEL_W = 220;
     const panelX = Math.max(0, Math.min(colLeft, width - PANEL_W));
-    const panelY = headerH;
     const s = (...parts) => parts.join(";");
     const btn = (text, action, style) => {
       const b = document.createElement("button");
@@ -4397,7 +4419,10 @@ var JHGrid = (() => {
     el.style.cssText = s(
       `position:absolute`,
       `left:${panelX}px`,
-      `top:${panelY}px`,
+      // Anchoring the bottom edge (instead of top) lets the panel grow upward from the header
+      // without knowing its own height up front — the alternative, computing `top: headerH -
+      // panelHeight`, needs the rendered height before it's laid out.
+      openUpward ? `bottom:${Math.max(0, wrapperHeight - headerH)}px` : `top:${headerH}px`,
       `width:${PANEL_W}px`,
       `background:${themed(theme, "overlayBg")}`,
       `border:1px solid ${themed(theme, "overlayBorder")}`,
@@ -5963,6 +5988,8 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
   // JHGrid.js
   var ARROWS = { ArrowDown: [1, 0], ArrowUp: [-1, 0], ArrowRight: [0, 1], ArrowLeft: [0, -1] };
   var RESIZE_HIT_W = 5;
+  var RESIZE_HIT_W_TOUCH = 8;
+  var CANVAS_TOUCH_CSS = "touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;";
   var MIN_COL_W = 30;
   var MIN_ROW_H = 16;
   var LONG_PRESS_MS = 500;
@@ -6384,7 +6411,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       this._canvas = document.createElement("canvas");
       this._canvas.width = Math.round(width * dpr);
       this._canvas.height = Math.round(height * dpr);
-      this._canvas.style.cssText = `display:block;width:${width}px;height:${height}px;outline:none;`;
+      this._canvas.style.cssText = `display:block;width:${width}px;height:${height}px;outline:none;${CANVAS_TOUCH_CSS}`;
       this._canvas.setAttribute("aria-hidden", "true");
       this._canvas.tabIndex = -1;
       this._canvas.getContext("2d").scale(dpr, dpr);
@@ -6614,7 +6641,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       this._opts.height = gridHeight;
       this._wrapper.style.width = width + "px";
       this._wrapper.style.height = gridHeight + "px";
-      this._canvas.style.cssText = `display:block;width:${width}px;height:${gridHeight}px;outline:none;`;
+      this._canvas.style.cssText = `display:block;width:${width}px;height:${gridHeight}px;outline:none;${CANVAS_TOUCH_CSS}`;
       const dpr = window.devicePixelRatio || 1;
       this._canvas.width = Math.round(width * dpr);
       this._canvas.height = Math.round(gridHeight * dpr);
@@ -7039,29 +7066,85 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
     // of, or null. Checks both the hovered row's bottom edge and (falling back, like the column
     // check does with col > 0) the previous row's bottom edge when y lands right at a row's top
     // edge — both branches identify the same boundary line, resolving to "the row above it".
-    _hitRowBoundary(y, geo = this._geo()) {
+    _hitRowBoundary(y, geo = this._geo(), hitW = RESIZE_HIT_W) {
       const { height: H } = this._opts;
       if (y < geo.headerH || y >= H - geo.hSB) return null;
       const relY = y - geo.headerH + this._scrollTop;
       const row = this._rowLayout.rowAt(relY, this._totalRows - 1);
       if (row < 0) return null;
       const bottomY = this._rowLayout.yOf(row + 1) - this._scrollTop + geo.headerH;
-      if (Math.abs(y - bottomY) <= RESIZE_HIT_W) return row;
+      if (Math.abs(y - bottomY) <= hitW) return row;
       if (row > 0) {
         const topY = this._rowLayout.yOf(row) - this._scrollTop + geo.headerH;
-        if (Math.abs(y - topY) <= RESIZE_HIT_W) return row - 1;
+        if (Math.abs(y - topY) <= hitW) return row - 1;
       }
       return null;
     }
-    _hitFillHandle(x, y, geo = this._geo()) {
+    // Vertical/horizontal scrollbar hit test, shared by mousedown and touchstart: grabbing the
+    // thumb arms this._drag (consumed by _updateScrollbarDrag on the matching move handler),
+    // tapping the bare track jump-scrolls straight to that position, same as a native scrollbar.
+    // Returns whether (x, y) was inside either scrollbar's hit area at all, so the caller knows to
+    // stop dispatching (preventDefault + return) instead of falling through to header/cell/pan
+    // handling — without this, a touch on the drawn scrollbar was indistinguishable from a touch
+    // anywhere else on the canvas and just started a generic content-drag pan.
+    _hitScrollbar(x, y, geo) {
+      const { v, h } = geo;
+      if (x >= v.x) {
+        if (y >= v.thumbY && y <= v.thumbY + v.thumbH) {
+          this._drag = { axis: "v", startMouse: y, startScroll: this._scrollTop };
+        } else if (y >= v.y && y <= v.y + v.h) {
+          const ratio = Math.max(0, Math.min(1, (y - v.y - v.thumbH / 2) / (v.h - v.thumbH)));
+          this._scrollTop = geo.minScrollY + ratio * (geo.maxScrollY - geo.minScrollY);
+          this._clamp(geo);
+          this._draw();
+        }
+        return true;
+      }
+      if (y >= h.y) {
+        if (x >= h.thumbX && x <= h.thumbX + h.thumbW) {
+          this._drag = { axis: "h", startMouse: x, startScroll: this._scrollLeft };
+        } else if (x >= h.x && x <= h.x + h.w) {
+          const ratio = Math.max(0, Math.min(1, (x - h.x - h.thumbW / 2) / (h.w - h.thumbW)));
+          this._scrollLeft = ratio * geo.maxScrollX;
+          this._clamp(geo);
+          this._draw();
+        }
+        return true;
+      }
+      return false;
+    }
+    // Applies an in-progress scrollbar thumb drag (this._drag, armed by _hitScrollbar) given the
+    // pointer/touch's current raw canvas coordinates. Shared by mousemove and touchmove so the two
+    // input paths can't drift apart.
+    _updateScrollbarDrag(x, y) {
+      const geo = this._geo();
+      const { v, h } = geo;
+      if (this._drag.axis === "v") {
+        const ratio = (y - this._drag.startMouse) / (v.h - v.thumbH);
+        this._scrollTop = this._drag.startScroll + ratio * (geo.maxScrollY - geo.minScrollY);
+      } else {
+        const ratio = (x - this._drag.startMouse) / (h.w - h.thumbW);
+        this._scrollLeft = this._drag.startScroll + ratio * geo.maxScrollX;
+      }
+      this._clamp(geo);
+      this._scrolling = true;
+      this._dm.setHold(true);
+      clearTimeout(this._scrollEndTimer);
+      this._scrollEndTimer = setTimeout(() => {
+        this._scrolling = false;
+        this._dm.setHold(false);
+        this._schedDraw();
+      }, 150);
+      this._schedDraw();
+    }
+    _hitFillHandle(x, y, geo = this._geo(), hitW = RESIZE_HIT_W) {
       if (!this._sel) return false;
       const { headerH, colPositions } = geo;
       const selR2 = this._sel.type === "single" ? this._sel.row : this._sel.r2;
       const selC2 = this._sel.type === "single" ? this._sel.col : this._sel.c2;
       const handleX = this._colLeft(selC2, geo) + (colPositions[selC2 + 1] - colPositions[selC2]);
       const handleY = this._rowLayout.yOf(selR2 + 1) - this._scrollTop + headerH;
-      const HIT = 5;
-      return Math.abs(x - handleX) <= HIT && Math.abs(y - handleY) <= HIT;
+      return Math.abs(x - handleX) <= hitW && Math.abs(y - handleY) <= hitW;
     }
     _colLeft(col, geo) {
       return colScreenX(col, geo, this._scrollLeft);
@@ -7619,10 +7702,16 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       this._wrapper.style.overflow = "visible";
       const wrapperTop = this._wrapper.getBoundingClientRect().top;
       const viewportH = window.innerHeight || document.documentElement.clientHeight;
-      const maxPanelHeight = viewportH - wrapperTop - geo.headerH - 8;
+      const spaceBelow = viewportH - wrapperTop - geo.headerH - 8;
+      const spaceAbove = wrapperTop - 8;
+      const PANEL_MIN_USABLE = 260;
+      const openUpward = spaceBelow < PANEL_MIN_USABLE && spaceAbove > spaceBelow;
+      const maxPanelHeight = openUpward ? spaceAbove : spaceBelow;
       const el = buildFilterPanelEl({
         colLeft: this._colLeft(col, geo),
         headerH: geo.headerH,
+        wrapperHeight: this._opts.height,
+        openUpward,
         width: this._opts.width,
         maxPanelHeight,
         label,
@@ -8754,19 +8843,19 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
     }
     _clearSelection() {
       if (!this._sel) return;
-      const pairs = this._sel.type === "single" ? [[this._sel.row, this._sel.col]] : Array.from(
-        { length: this._sel.r2 - this._sel.r1 + 1 },
-        (_, ri) => Array.from(
-          { length: this._sel.c2 - this._sel.c1 + 1 },
-          (_2, ci) => [this._sel.r1 + ri, this._sel.c1 + ci]
-        )
-      ).flat();
+      const single = this._sel.type === "single";
+      const r1 = single ? this._sel.row : this._sel.r1;
+      const r2 = single ? this._sel.row : this._sel.r2;
+      const c1 = single ? this._sel.col : this._sel.c1;
+      const c2 = single ? this._sel.col : this._sel.c2;
+      const editableFields = [];
+      for (let c = c1; c <= c2; c++) {
+        if (this._isEditable(c)) editableFields.push(this._columns[c]);
+      }
       this._editTxnBegin();
-      pairs.forEach(([r, c]) => {
-        if (!this._isEditable(c)) return;
-        const field = this._columns[c];
-        this._setEdit(r, field, "");
-      });
+      for (let r = r1; r <= r2; r++) {
+        for (const field of editableFields) this._setEdit(r, field, "");
+      }
       this._editTxnCommit();
       this._draw();
     }
@@ -8951,11 +9040,15 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       const v = data[field];
       return v != null ? String(v) : "";
     }
-    // Re-runs validation for one cell and updates the validator's invalid-cell set.
+    // Re-runs validation for one cell and updates the validator's invalid-cell set. Takes a
+    // "row_field" key -- for callers that only have that (iterating an _edits-shaped Map). Callers
+    // that already have row/field apart (_setEdit, validateAll) should call _revalidateRowField()
+    // directly instead of paying to stringify them together here just to split them back apart.
     _revalidateKey(key) {
       const u = key.indexOf("_");
-      const row = Number(key.slice(0, u));
-      const field = key.slice(u + 1);
+      this._revalidateRowField(Number(key.slice(0, u)), key.slice(u + 1));
+    }
+    _revalidateRowField(row, field) {
       this._validator.revalidate(row, field, this._resolveCellStringValue(row, field));
     }
     // Rebuilds invalid-cell state from scratch based on the current _edits map —
@@ -8990,11 +9083,11 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       const validatedFields = this._columns.filter((f) => this._colDefMap.get(f)?.validation);
       if (validatedFields.length > 0) {
         this._dm.forEachLoaded((_, rowIndex) => {
-          validatedFields.forEach((field) => this._revalidateKey(`${rowIndex}_${field}`));
+          validatedFields.forEach((field) => this._revalidateRowField(rowIndex, field));
         });
         this._localRows.forEach((_, i) => {
           const r = this._rowPlan.visualOfLocal(i);
-          validatedFields.forEach((field) => this._revalidateKey(`${r}_${field}`));
+          validatedFields.forEach((field) => this._revalidateRowField(r, field));
         });
       }
       this._draw();
@@ -9021,7 +9114,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       this._edits.set(key, val);
       this._editedRows.add(row);
       this._opts.onCellChange?.({ row, field, newValue: val, oldValue });
-      this._revalidateKey(key);
+      this._revalidateRowField(row, field);
       this._growRowForMultilineValue(row, val);
     }
     // Excel grows a row's height the moment a cell picks up a line break -- typed (Alt+Enter) or
@@ -9676,7 +9769,6 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       ev.mousedown = (e) => {
         const { x, y } = this._xy(e);
         const geo = this._geo();
-        const { v, h } = geo;
         const suppressReopenCell = this._suppressReopenCell;
         this._suppressReopenCell = null;
         if (this._editing) this._commitEdit();
@@ -9692,27 +9784,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
             if (withinSel) return;
           }
         }
-        if (x >= v.x) {
-          if (y >= v.thumbY && y <= v.thumbY + v.thumbH) {
-            this._drag = { axis: "v", startMouse: y, startScroll: this._scrollTop };
-          } else if (y >= v.y && y <= v.y + v.h) {
-            const ratio = Math.max(0, Math.min(1, (y - v.y - v.thumbH / 2) / (v.h - v.thumbH)));
-            this._scrollTop = geo.minScrollY + ratio * (geo.maxScrollY - geo.minScrollY);
-            this._clamp(geo);
-            this._draw();
-          }
-          e.preventDefault();
-          return;
-        }
-        if (y >= h.y) {
-          if (x >= h.thumbX && x <= h.thumbX + h.thumbW) {
-            this._drag = { axis: "h", startMouse: x, startScroll: this._scrollLeft };
-          } else if (x >= h.x && x <= h.x + h.w) {
-            const ratio = Math.max(0, Math.min(1, (x - h.x - h.thumbW / 2) / (h.w - h.thumbW)));
-            this._scrollLeft = ratio * geo.maxScrollX;
-            this._clamp(geo);
-            this._draw();
-          }
+        if (this._hitScrollbar(x, y, geo)) {
           e.preventDefault();
           return;
         }
@@ -9924,25 +9996,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
           }
         }
         if (this._drag) {
-          const geo = this._geo();
-          const { v, h } = geo;
-          if (this._drag.axis === "v") {
-            const ratio = (y - this._drag.startMouse) / (v.h - v.thumbH);
-            this._scrollTop = this._drag.startScroll + ratio * (geo.maxScrollY - geo.minScrollY);
-          } else {
-            const ratio = (x - this._drag.startMouse) / (h.w - h.thumbW);
-            this._scrollLeft = this._drag.startScroll + ratio * geo.maxScrollX;
-          }
-          this._clamp(geo);
-          this._scrolling = true;
-          this._dm.setHold(true);
-          clearTimeout(this._scrollEndTimer);
-          this._scrollEndTimer = setTimeout(() => {
-            this._scrolling = false;
-            this._dm.setHold(false);
-            this._schedDraw();
-          }, 150);
-          this._schedDraw();
+          this._updateScrollbarDrag(x, y);
           return;
         }
         if (this._selDragging) {
@@ -10329,19 +10383,23 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
           this._rowTap = null;
           const geo = this._geo();
           const headerH = geo.headerH;
+          if (this._hitScrollbar(x, y, geo)) {
+            e.preventDefault();
+            return;
+          }
           if (y >= 0 && y < headerH) {
             const col = this._hitHeader(x, geo);
             if (col !== null) {
               const colW = geo.colPositions[col + 1] - geo.colPositions[col];
               const colRight = this._colLeft(col, geo) + colW;
               const filterIconX = colRight - FILTER_ICON_W;
-              if (Math.abs(x - colRight) <= RESIZE_HIT_W) {
+              if (Math.abs(x - colRight) <= RESIZE_HIT_W_TOUCH) {
                 this._colResize = { col, startX: x, startWidth: colW, undoBefore: this._snapshotStructural() };
                 e.preventDefault();
                 return;
               }
               const colLeft = this._colLeft(col, geo);
-              if (col > 0 && Math.abs(x - colLeft) <= RESIZE_HIT_W) {
+              if (col > 0 && Math.abs(x - colLeft) <= RESIZE_HIT_W_TOUCH) {
                 const prevColW = geo.colPositions[col] - geo.colPositions[col - 1];
                 this._colResize = { col: col - 1, startX: x, startWidth: prevColW, undoBefore: this._snapshotStructural() };
                 e.preventDefault();
@@ -10353,7 +10411,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
                 const _hcbCx = this._colLeft(col, geo) + _hcbPad + 6;
                 const _hcbCell = computeHeaderCells(this._opts.headerRows, this._columns, this._opts.columnLetterHeader).find((c) => c.isLeaf && c.col === col);
                 const _hcbCy = _hcbCell ? _hcbCell.row * this._opts.headerHeight + _hcbCell.rowspan * this._opts.headerHeight / 2 : headerH - this._opts.headerHeight / 2;
-                if (Math.abs(x - _hcbCx) <= 9 && Math.abs(y - _hcbCy) <= 9) {
+                if (Math.abs(x - _hcbCx) <= RESIZE_HIT_W_TOUCH && Math.abs(y - _hcbCy) <= RESIZE_HIT_W_TOUCH) {
                   const _hcbChecked = !(this._headerCheckboxState.get(_hcbField) ?? false);
                   this._headerCheckboxState.set(_hcbField, _hcbChecked);
                   this._draw();
@@ -10383,7 +10441,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
               return;
             }
           }
-          const boundaryRow = geo.rowNumW > 0 && x < geo.rowNumW && y >= geo.headerH ? this._hitRowBoundary(y, geo) : null;
+          const boundaryRow = geo.rowNumW > 0 && x < geo.rowNumW && y >= geo.headerH ? this._hitRowBoundary(y, geo, RESIZE_HIT_W_TOUCH) : null;
           if (boundaryRow !== null) {
             this._rowResize = { row: boundaryRow, startY: y, startHeight: this._rowLayout.heightOf(boundaryRow), undoBefore: this._snapshotStructural() };
             e.preventDefault();
@@ -10405,7 +10463,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
             }
             return;
           }
-          if (this._sel && this._hitFillHandle(x, y, geo)) {
+          if (this._sel && this._hitFillHandle(x, y, geo, RESIZE_HIT_W_TOUCH)) {
             this._fillDrag = { sel: this._sel };
             this._fillPreview = null;
             e.preventDefault();
@@ -10443,6 +10501,14 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
           e.preventDefault();
           return;
         }
+        if (this._drag) {
+          if (!e.touches.length) return;
+          const t = e.touches[0];
+          const rect2 = this._canvas.getBoundingClientRect();
+          this._updateScrollbarDrag(t.clientX - rect2.left, t.clientY - rect2.top);
+          e.preventDefault();
+          return;
+        }
         if (!this._touch) return;
         const rect = this._canvas.getBoundingClientRect();
         if (e.touches.length >= 2 && this._touch.twoFinger) {
@@ -10479,6 +10545,10 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
       ev.touchend = (e) => {
         this._cancelLongPress();
         if (this._finalizeStructuralGesture()) return;
+        if (this._drag) {
+          this._drag = null;
+          return;
+        }
         if (this._rowTap) {
           const { row, ctrlKey, shiftKey } = this._rowTap;
           this._rowTap = null;
@@ -11908,7 +11978,7 @@ ${title ? `<h2>${esc(title)}</h2>` : ""}
   JHGrid.use(RowSelectionPlugin);
 
   // index.js
-  var VERSION = "0.1.0";
+  var VERSION = "0.1.2";
   var SUPPORTED_BROWSERS = {
     chrome: 99,
     edge: 99,