@dxos/lit-grid 0.6.12-main.89e9959 → 0.6.12-main.c1d977f

package/dist/lib/browser/index.mjs

@@ -447,10 +447,14 @@ var DxGrid = class extends LitElement2 {
       }
     });
     this.viewportRef = createRef();
-    this.maybeUpdateVis = () => {
-      if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
-      } else {
-        this.updateVis();
+    this.maybeUpdateVisInline = () => {
+      if (this.posInline < this.binInlineMin || this.posInline >= this.binInlineMax) {
+        this.updateVisInline();
+      }
+    };
+    this.maybeUpdateVisBlock = () => {
+      if (this.posBlock < this.binBlockMin || this.posBlock >= this.binBlockMax) {
+        this.updateVisBlock();
       }
     };
     this.handleWheel = ({ deltaX, deltaY }) => {
@@ -576,10 +580,17 @@ var DxGrid = class extends LitElement2 {
       ...cellSize
     };
   }
-  updatePos(inline, block) {
+  updatePosInline(inline) {
     this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, inline ?? this.posInline));
+    this.maybeUpdateVisInline();
+  }
+  updatePosBlock(block) {
     this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, block ?? this.posBlock));
-    this.maybeUpdateVis();
+    this.maybeUpdateVisBlock();
+  }
+  updatePos(inline, block) {
+    this.updatePosInline(inline);
+    this.updatePosBlock(block);
   }
   updateVisInline() {
     let colIndex = 0;
@@ -597,7 +608,7 @@ var DxGrid = class extends LitElement2 {
       acc += this.colSize(this.visColMin + c0, "grid");
       return acc;
     }, 0) + gap * (overscanCol - 1);
-    while (pxInline < this.binInlineMax + this.sizeInline + gap) {
+    while (pxInline < this.binInlineMax + this.sizeInline - gap * 2) {
       colIndex += 1;
       pxInline += this.colSize(colIndex, "grid") + gap;
     }
@@ -628,7 +639,7 @@ var DxGrid = class extends LitElement2 {
       acc += this.rowSize(this.visRowMin + r0, "grid");
       return acc;
     }, 0) + gap * (overscanRow - 1);
-    while (pxBlock < this.binBlockMax + this.sizeBlock) {
+    while (pxBlock < this.binBlockMax + this.sizeBlock - gap * 2) {
       rowIndex += 1;
       pxBlock += this.rowSize(rowIndex, "grid") + gap;
     }
@@ -746,24 +757,40 @@ var DxGrid = class extends LitElement2 {
   focusedCellElement() {
     return this.viewportRef.value?.querySelector(`[data-dx-grid-plane=${this.focusedCell.plane}] > [aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`);
   }
+  //
+  // `outOfVis` returns by how many rows/cols the focused cell is outside of the `vis` range for an axis, inset by a
+  // `delta`, otherwise zero if it is within that range.
+  //
   focusedCellRowOutOfVis(minDelta = 0, maxDelta = minDelta) {
-    return this.focusedCell.row < this.visRowMin + minDelta || this.focusedCell.row > this.visRowMax - maxDelta;
+    return this.focusedCell.row <= this.visRowMin + minDelta ? this.focusedCell.row - (this.visRowMin + minDelta) : this.focusedCell.row >= this.visRowMax - maxDelta ? -(this.focusedCell.row - this.visRowMax - maxDelta) : 0;
   }
   focusedCellColOutOfVis(minDelta = 0, maxDelta = minDelta) {
-    return this.focusedCell.col < this.visColMin + minDelta || this.focusedCell.col > this.visColMax - maxDelta;
+    return this.focusedCell.col <= this.visColMin + minDelta ? this.focusedCell.col - (this.visColMin + minDelta) : this.focusedCell.col >= this.visColMax - maxDelta ? -(this.focusedCell.col - this.visColMax - maxDelta) : 0;
   }
   focusedCellOutOfVis(colDelta = 0, rowDelta = colDelta) {
     switch (this.focusedCell.plane) {
       case "grid":
-        return this.focusedCellRowOutOfVis(rowDelta) || this.focusedCellColOutOfVis(colDelta);
+        return {
+          row: this.focusedCellRowOutOfVis(rowDelta),
+          col: this.focusedCellColOutOfVis(colDelta)
+        };
       case "frozenRowsStart":
       case "frozenRowsEnd":
-        return this.focusedCellColOutOfVis(colDelta);
+        return {
+          col: this.focusedCellColOutOfVis(colDelta),
+          row: 0
+        };
       case "frozenColsStart":
       case "frozenColsEnd":
-        return this.focusedCellRowOutOfVis(rowDelta);
+        return {
+          col: 0,
+          row: this.focusedCellRowOutOfVis(rowDelta)
+        };
       default:
-        return false;
+        return {
+          col: 0,
+          row: 0
+        };
     }
   }
   /**
@@ -786,41 +813,53 @@ var DxGrid = class extends LitElement2 {
     if (increment) {
       this.snapPosToFocusedCell();
     }
-    queueMicrotask(() => (this.focusedCellOutOfVis() ? this.viewportRef.value : this.focusedCellElement())?.focus({
-      preventScroll: true
-    }));
+    queueMicrotask(() => {
+      const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
+      (outOfVis.col !== 0 || outOfVis.row !== 0 ? this.viewportRef.value : this.focusedCellElement())?.focus({
+        preventScroll: true
+      });
+    });
+  }
+  findPosInlineFromVisColMin(deltaCols) {
+    return [
+      ...Array(deltaCols)
+    ].reduce((acc, _, c0) => acc - this.colSize(this.visColMin - c0, "grid") - gap, this.binInlineMin + gap);
+  }
+  findPosBlockFromVisRowMin(deltaRows) {
+    return [
+      ...Array(deltaRows)
+    ].reduce((acc, _, r0) => acc - this.rowSize(this.visRowMin - r0, "grid") - gap, this.binBlockMin + gap);
   }
   /**
   * Updates `pos` so that a cell in focus is fully within the viewport
   */
   snapPosToFocusedCell() {
-    if (this.focusedCellOutOfVis(overscanCol + 1, overscanRow + 1)) {
-      if (this.focusedCell.col <= this.visColMin + overscanCol) {
-        this.posInline = this.binInlineMin;
-        this.updateVisInline();
-      } else if (this.focusedCell.col >= this.visColMax - overscanCol - 1) {
-        const sizeSumCol = [
-          ...Array(this.focusedCell.col - this.visColMin)
-        ].reduce((acc, _, c0) => {
-          acc += this.colSize(this.visColMin + overscanCol + c0, "grid") + gap;
-          return acc;
-        }, 0);
-        this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, this.binInlineMin + sizeSumCol - this.sizeInline));
-        this.updateVisInline();
-      }
-      if (this.focusedCell.row <= this.visRowMin + overscanRow) {
-        this.posBlock = this.binBlockMin;
-        this.updateVisBlock();
-      } else if (this.focusedCell.row >= this.visRowMax - overscanRow - 1) {
-        const sizeSumRow = [
-          ...Array(this.focusedCell.row - this.visRowMin)
-        ].reduce((acc, _, r0) => {
-          acc += this.rowSize(this.visRowMin + overscanRow + r0, "grid") + gap;
-          return acc;
-        }, 0);
-        this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, this.binBlockMin + sizeSumRow - this.sizeBlock));
-        this.updateVisBlock();
-      }
+    const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
+    if (outOfVis.col < 0) {
+      this.posInline = this.findPosInlineFromVisColMin(-outOfVis.col);
+      this.updateVisInline();
+    } else if (outOfVis.col > 0) {
+      const sizeSumCol = [
+        ...Array(this.focusedCell.col - this.visColMin)
+      ].reduce((acc, _, c0) => {
+        acc += this.colSize(this.visColMin + overscanCol + c0, "grid") + gap;
+        return acc;
+      }, 0);
+      this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, this.binInlineMin + sizeSumCol - this.sizeInline));
+      this.updateVisInline();
+    }
+    if (outOfVis.row < 0) {
+      this.posBlock = this.findPosBlockFromVisRowMin(-outOfVis.row);
+      this.updateVisBlock();
+    } else if (outOfVis.row > 0) {
+      const sizeSumRow = [
+        ...Array(this.focusedCell.row - this.visRowMin)
+      ].reduce((acc, _, r0) => {
+        acc += this.rowSize(this.visRowMin + overscanRow + r0, "grid") + gap;
+        return acc;
+      }, 0);
+      this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, this.binBlockMin + sizeSumRow - this.sizeBlock));
+      this.updateVisBlock();
     }
   }
   //
@@ -831,14 +870,14 @@ var DxGrid = class extends LitElement2 {
   }
   set scrollLeft(nextValue) {
     this.posInline = nextValue;
-    this.maybeUpdateVis();
+    this.maybeUpdateVisInline();
   }
   get scrollTop() {
     return this.posBlock;
   }
   set scrollTop(nextValue) {
     this.posBlock = nextValue;
-    this.maybeUpdateVis();
+    this.maybeUpdateVisBlock();
   }
   //
   // Resize handlers
@@ -848,7 +887,7 @@ var DxGrid = class extends LitElement2 {
   }
   handleAxisResizeInternal(event) {
     event.stopPropagation();
-    const { plane, axis, delta, size, index, type } = event;
+    const { plane, axis, delta, size, index, state: state2 } = event;
     if (axis === "col") {
       const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, size + delta));
       this.colSizes = {
@@ -872,7 +911,7 @@ var DxGrid = class extends LitElement2 {
       this.updateVisBlock();
       this.updateIntrinsicBlockSize();
     }
-    if (type === "dropped") {
+    if (state2 === "dropped") {
       this.dispatchEvent(new DxAxisResize({
         plane,
         axis,
@@ -1067,12 +1106,29 @@ var DxGrid = class extends LitElement2 {
     if (this.getCells && (changedProperties.has("initialCells") || changedProperties.has("visColMin") || changedProperties.has("visColMax") || changedProperties.has("visRowMin") || changedProperties.has("visRowMax"))) {
       this.updateCells();
     }
+    if (changedProperties.has("rowDefault") || changedProperties.has("rows") || changedProperties.has("limitRows")) {
+      this.updateIntrinsicBlockSize();
+      this.updatePosBlock();
+      this.updateVisBlock();
+    }
+    if (changedProperties.has("colDefault") || changedProperties.has("columns") || changedProperties.has("limitColumns")) {
+      this.updateIntrinsicInlineSize();
+      this.updatePosInline();
+      this.updateVisInline();
+    }
   }
   updated(changedProperties) {
     if (this.focusActive && (changedProperties.has("visRowMin") || changedProperties.has("visColMin") || changedProperties.has("focusedCell"))) {
       this.refocus();
     }
   }
+  updateIfWithinBounds({ col, row }) {
+    if (col >= this.visColMin && col <= this.visColMax && row >= this.visRowMin && row <= this.visRowMax) {
+      this.requestUpdate();
+      return true;
+    }
+    return false;
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.viewportRef.value) {