@dxos/lit-grid 0.7.2 → 0.7.3-main.2dd075e

package/src/dx-grid.ts

@@ -41,7 +41,7 @@ import {
   separator,
 } from './types';
 import {
-  toPlaneCellIndex,
+  toCellIndex,
   gap,
   resizeTolerance,
   sizeColMin,
@@ -264,7 +264,7 @@ export class DxGrid extends LitElement {
       queueMicrotask(() =>
         this.dispatchEvent(
           new DxEditRequest({
-            cellIndex: toPlaneCellIndex(this.focusedCell),
+            cellIndex: toCellIndex(this.focusedCell),
             cellBox: this.focusedCellBox(),
             initialContent,
           }),
@@ -954,6 +954,26 @@ export class DxGrid extends LitElement {
     return Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, nextPos));
   }
 
+  /**
+   * Calculate the pixel offset for a given column in a plane.
+   * Sums all column sizes plus gaps up to the target column.
+   */
+  private inlineOffset(col: number, plane: DxGridPlane): number {
+    return [...Array(col)].reduce((acc, _, c0) => {
+      return acc + this.colSize(c0, plane) + gap;
+    }, 0);
+  }
+
+  /**
+   * Calculate the pixel offset for a given row in a plane.
+   * Sums all row sizes plus gaps up to the target row.
+   */
+  private blockOffset(row: number, plane: DxGridPlane): number {
+    return [...Array(row)].reduce((acc, _, r0) => {
+      return acc + this.rowSize(r0, plane) + gap;
+    }, 0);
+  }
+
   /**
    * Updates `pos` so that a cell in focus is fully within the viewport
    */
@@ -961,41 +981,41 @@ export class DxGrid extends LitElement {
     const outOfVis = this.focusedCellOutOfVis();
     if (outOfVis.col < 0) {
       // align viewport start edge with focused cell start edge
-      this.posInline = this.clampPosInline(
-        [...Array(this.focusedCell.col)].reduce((acc, _, c0) => {
-          return acc + this.colSize(c0, 'grid') + gap;
-        }, 0),
-      );
+      this.posInline = this.clampPosInline(this.inlineOffset(this.focusedCell.col, 'grid'));
       this.updateVisInline();
     } else if (outOfVis.col > 0) {
       // align viewport end edge with focused cell end edge
-      this.posInline = this.clampPosInline(
-        [...Array(this.focusedCell.col + 1)].reduce((acc, _, c0) => {
-          return acc + this.colSize(c0, 'grid') + gap;
-        }, -this.sizeInline) - gap,
-      );
+      this.posInline = this.clampPosInline(this.inlineOffset(this.focusedCell.col + 1, 'grid') - this.sizeInline - gap);
       this.updateVisInline();
     }
 
     if (outOfVis.row < 0) {
       // align viewport start edge with focused cell start edge
-      this.posBlock = this.clampPosBlock(
-        [...Array(this.focusedCell.row)].reduce((acc, _, r0) => {
-          return acc + this.rowSize(r0, 'grid') + gap;
-        }, 0),
-      );
+      this.posBlock = this.clampPosBlock(this.blockOffset(this.focusedCell.row, 'grid'));
       this.updateVisBlock();
     } else if (outOfVis.row > 0) {
       // align viewport end edge with focused cell end edge
-      this.posBlock = this.clampPosBlock(
-        [...Array(this.focusedCell.row + 1)].reduce((acc, _, r0) => {
-          return acc + this.rowSize(r0, 'grid') + gap;
-        }, -this.sizeBlock) - gap,
-      );
+      this.posBlock = this.clampPosBlock(this.blockOffset(this.focusedCell.row + 1, 'grid') - this.sizeBlock - gap);
       this.updateVisBlock();
     }
   }
 
+  scrollToCoord({ coords }: { coords: DxGridPosition }) {
+    const plane = coords.plane;
+    const { row, col } = coords;
+
+    this.updatePosBlock(this.blockOffset(row, plane));
+    this.updatePosInline(this.inlineOffset(col, plane));
+  }
+
+  scrollToColumn(col: number) {
+    this.updatePosInline(this.inlineOffset(col, 'grid'));
+  }
+
+  scrollToRow(row: number) {
+    this.updatePosBlock(this.blockOffset(row, 'grid'));
+  }
+
   //
   // Map scroll DOM methods to virtualized value.
   //
@@ -1490,6 +1510,14 @@ export class DxGrid extends LitElement {
   }
 }
 
-export { rowToA1Notation, colToA1Notation, closestAction, closestCell } from './util';
+export {
+  rowToA1Notation,
+  colToA1Notation,
+  closestAction,
+  closestCell,
+  parseCellIndex,
+  toPlaneCellIndex,
+  cellQuery,
+} from './util';
 
 export const commentedClassName = 'dx-grid__cell--commented';

package/src/testing/playwright/dx-grid-manager.ts

@@ -37,6 +37,10 @@ export class DxGridManager {
     );
   }
 
+  mode() {
+    return this.grid.locator('.dx-grid').getAttribute('data-grid-mode');
+  }
+
   panByWheel(deltaX: number, deltaY: number) {
     return this.grid.locator('.dx-grid [data-dx-grid-plane="grid"]').dispatchEvent('wheel', { deltaX, deltaY });
   }

package/src/types.ts

@@ -154,7 +154,7 @@ export class DxAxisResizeInternal extends Event {
 export type DxEditRequestProps = Pick<DxEditRequest, 'cellIndex' | 'cellBox' | 'initialContent'>;
 
 export class DxEditRequest extends Event {
-  public readonly cellIndex: DxGridPlaneCellIndex;
+  public readonly cellIndex: DxGridCellIndex;
   public readonly cellBox: Record<'insetInlineStart' | 'insetBlockStart' | 'inlineSize' | 'blockSize', number>;
   public readonly initialContent?: string;
   constructor(props: DxEditRequestProps) {

package/src/util.ts

@@ -22,6 +22,27 @@ import {
 export const toPlaneCellIndex = (cellCoords: Partial<DxGridPosition> & DxGridPlanePosition): DxGridPlaneCellIndex =>
   `${cellCoords.col}${separator}${cellCoords.row}`;
 
+export function parseCellIndex(index: DxGridCellIndex): DxGridPosition;
+export function parseCellIndex(index: DxGridPlaneCellIndex): DxGridPlanePosition;
+// eslint-disable-next-line @stayradiated/prefer-arrow-functions/prefer-arrow-functions
+export function parseCellIndex(index: DxGridPlaneCellIndex | DxGridCellIndex): DxGridPlanePosition | DxGridPosition {
+  const coords = index.split(separator);
+  if (coords.length === 3) {
+    return {
+      plane: coords[0] as DxGridPlane,
+      col: parseInt(coords[1]),
+      row: parseInt(coords[2]),
+    } satisfies DxGridPosition;
+  } else {
+    return { col: parseInt(coords[0]), row: parseInt(coords[1]) } satisfies DxGridPlanePosition;
+  }
+}
+
+export const cellQuery = (index: DxGridCellIndex, gridId: string) => {
+  const { plane, col, row } = parseCellIndex(index);
+  return `[data-grid="${gridId}"] [data-dx-grid-plane="${plane}"] [aria-colindex="${col}"][aria-rowindex="${row}"]`;
+};
+
 export const toCellIndex = (cellCoords: DxGridPosition): DxGridCellIndex =>
   `${cellCoords.plane}${separator}${cellCoords.col}${separator}${cellCoords.row}`;