@dxos/lit-grid 0.6.11 → 0.6.12-main.15a606f

package/dist/lib/browser/index.mjs

@@ -1,8 +1,12 @@
 // packages/ui/lit-grid/src/dx-grid.ts
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, state, property, eventOptions } from "lit/decorators.js";
 import { ref, createRef } from "lit/directives/ref.js";
 
+// packages/ui/lit-grid/src/util.ts
+var separator = ",";
+var toCellIndex = (cellCoords) => `${cellCoords.col}${separator}${cellCoords.row}`;
+
 // packages/ui/lit-grid/src/types.ts
 var DxAxisResize = class extends Event {
   constructor(props) {
@@ -12,6 +16,25 @@ var DxAxisResize = class extends Event {
     this.size = props.size;
   }
 };
+var DxEditRequest = class extends Event {
+  constructor(props) {
+    super("dx-edit-request");
+    this.cellIndex = props.cellIndex;
+    this.cellBox = props.cellBox;
+    this.initialContent = props.initialContent;
+  }
+};
+var DxGridCellsSelect = class extends Event {
+  constructor({ start, end }) {
+    super("dx-grid-cells-select");
+    this.start = toCellIndex(start);
+    this.end = toCellIndex(end);
+    this.minCol = Math.min(start.col, end.col);
+    this.maxCol = Math.max(start.col, end.col);
+    this.minRow = Math.min(start.row, end.row);
+    this.maxRow = Math.max(start.row, end.row);
+  }
+};
 
 // packages/ui/lit-grid/src/dx-grid.ts
 function _ts_decorate(decorators, target, key, desc) {
@@ -28,19 +51,46 @@ var sizeColMin = 32;
 var sizeColMax = 1024;
 var sizeRowMin = 16;
 var sizeRowMax = 1024;
-var separator = ",";
 var colToA1Notation = (col) => {
   return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
 };
 var rowToA1Notation = (row) => {
   return `${row + 1}`;
 };
+var closestAction = (target) => {
+  const actionEl = target?.closest("[data-dx-grid-action]") ?? null;
+  return {
+    actionEl,
+    action: actionEl?.getAttribute("data-dx-grid-action") ?? null
+  };
+};
+var closestCell = (target, actionEl) => {
+  let cellElement = actionEl;
+  if (!cellElement) {
+    const { action, actionEl: actionEl2 } = closestAction(target);
+    if (action === "cell") {
+      cellElement = actionEl2;
+    }
+  }
+  if (cellElement) {
+    const col = parseInt(cellElement.getAttribute("aria-colindex") ?? "never");
+    const row = parseInt(cellElement.getAttribute("aria-rowindex") ?? "never");
+    return {
+      col,
+      row
+    };
+  } else {
+    return null;
+  }
+};
+var isSameCell = (a, b) => a && b && Number.isFinite(a.col) && Number.isFinite(a.row) && a.col === b.col && a.row === b.row;
 var localChId = (c0) => `ch--${c0}`;
 var localRhId = (r0) => `rh--${r0}`;
 var getPage = (axis, event) => axis === "col" ? event.pageX : event.pageY;
 var DxGrid = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.gridId = "default-grid-id";
     this.rowDefault = {
       size: 32
     };
@@ -50,6 +100,7 @@ var DxGrid = class extends LitElement {
     this.rows = {};
     this.columns = {};
     this.cells = {};
+    this.mode = "browse";
     //
     // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
     //
@@ -86,56 +137,100 @@ var DxGrid = class extends LitElement {
     this.templateColumns = `${this.colSize(0)}px`;
     this.templateRows = `${this.rowSize(0)}px`;
     //
-    // Resize state and handlers
+    // Focus, selection, and resize states
     //
+    this.pointer = null;
     this.colSizes = {};
     this.rowSizes = {};
-    this.resizing = null;
+    this.focusActive = false;
+    this.focusedCell = {
+      col: 0,
+      row: 0
+    };
+    this.selectionStart = {
+      col: 0,
+      row: 0
+    };
+    this.selectionEnd = {
+      col: 0,
+      row: 0
+    };
     this.handlePointerDown = (event) => {
-      const actionEl = event.target?.closest("[data-dx-grid-action]");
-      const action = actionEl?.getAttribute("data-dx-grid-action");
-      if (action) {
-        if (action.startsWith("resize")) {
-          const [resize, index] = action.split(",");
-          const [_, axis] = resize.split("-");
-          this.resizing = {
-            axis,
-            size: axis === "col" ? this.colSize(index) : this.rowSize(index),
-            page: getPage(axis, event),
-            index
-          };
+      if (event.isPrimary) {
+        const { action, actionEl } = closestAction(event.target);
+        if (action) {
+          if (action.startsWith("resize") && this.mode === "browse") {
+            const [resize, index] = action.split(",");
+            const [_, axis] = resize.split("-");
+            this.pointer = {
+              state: "resizing",
+              axis,
+              size: axis === "col" ? this.colSize(index) : this.rowSize(index),
+              page: getPage(axis, event),
+              index
+            };
+          } else if (action === "cell") {
+            const cellCoords = closestCell(event.target, actionEl);
+            if (cellCoords) {
+              this.pointer = {
+                state: "selecting"
+              };
+              this.selectionStart = cellCoords;
+            }
+            if (this.mode === "edit") {
+              event.preventDefault();
+            } else {
+              if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
+                this.dispatchEditRequest();
+              }
+            }
+          }
         }
       }
     };
-    this.handlePointerUp = (_event) => {
-      if (this.resizing) {
+    this.handlePointerUp = (event) => {
+      if (this.pointer?.state === "resizing") {
         const resizeEvent = new DxAxisResize({
-          axis: this.resizing.axis,
-          index: this.resizing.index,
-          size: this[this.resizing.axis === "col" ? "colSize" : "rowSize"](this.resizing.index)
+          axis: this.pointer.axis,
+          index: this.pointer.index,
+          size: this[this.pointer.axis === "col" ? "colSize" : "rowSize"](this.pointer.index)
         });
         this.dispatchEvent(resizeEvent);
-        this.resizing = null;
+      } else {
+        const cell = closestCell(event.target);
+        if (cell) {
+          this.selectionEnd = cell;
+          this.dispatchEvent(new DxGridCellsSelect({
+            start: this.selectionStart,
+            end: this.selectionEnd
+          }));
+        }
       }
+      this.pointer = null;
     };
     this.handlePointerMove = (event) => {
-      if (this.resizing) {
-        const delta = getPage(this.resizing.axis, event) - this.resizing.page;
-        if (this.resizing.axis === "col") {
-          const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));
+      if (this.pointer?.state === "resizing") {
+        const delta = getPage(this.pointer.axis, event) - this.pointer.page;
+        if (this.pointer.axis === "col") {
+          const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.pointer.size + delta));
           this.colSizes = {
             ...this.colSizes,
-            [this.resizing.index]: nextSize
+            [this.pointer.index]: nextSize
           };
           this.updateVisInline();
         } else {
-          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
+          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.pointer.size + delta));
           this.rowSizes = {
             ...this.rowSizes,
-            [this.resizing.index]: nextSize
+            [this.pointer.index]: nextSize
           };
           this.updateVisBlock();
         }
+      } else if (this.pointer?.state === "selecting") {
+        const cell = closestCell(event.target);
+        if (cell && (cell.col !== this.selectionEnd.col || cell.row !== this.selectionEnd.row)) {
+          this.selectionEnd = cell;
+        }
       }
     };
     //
@@ -154,19 +249,75 @@ var DxGrid = class extends LitElement {
     });
     this.viewportRef = createRef();
     this.handleWheel = ({ deltaX, deltaY }) => {
-      this.posInline = Math.max(0, this.posInline + deltaX);
-      this.posBlock = Math.max(0, this.posBlock + deltaY);
-      if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
-      } else {
-        this.updateVis();
+      if (this.mode === "browse") {
+        this.posInline = Math.max(0, this.posInline + deltaX);
+        this.posBlock = Math.max(0, this.posBlock + deltaY);
+        if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
+        } else {
+          this.updateVis();
+        }
       }
     };
-    // Focus handlers
-    this.focusedCell = {
-      col: 0,
-      row: 0
-    };
-    this.focusActive = false;
+  }
+  //
+  // Primary pointer and keyboard handlers
+  //
+  dispatchEditRequest(initialContent) {
+    this.snapPosToFocusedCell();
+    queueMicrotask(() => this.dispatchEvent(new DxEditRequest({
+      cellIndex: toCellIndex(this.focusedCell),
+      cellBox: this.focusedCellBox(),
+      initialContent
+    })));
+  }
+  handleKeydown(event) {
+    if (this.focusActive && this.mode === "browse") {
+      switch (event.key) {
+        case "ArrowDown":
+          this.focusedCell = {
+            ...this.focusedCell,
+            row: this.focusedCell.row + 1
+          };
+          break;
+        case "ArrowUp":
+          this.focusedCell = {
+            ...this.focusedCell,
+            row: Math.max(0, this.focusedCell.row - 1)
+          };
+          break;
+        case "ArrowRight":
+          this.focusedCell = {
+            ...this.focusedCell,
+            col: this.focusedCell.col + 1
+          };
+          break;
+        case "ArrowLeft":
+          this.focusedCell = {
+            ...this.focusedCell,
+            col: Math.max(0, this.focusedCell.col - 1)
+          };
+          break;
+      }
+      switch (event.key) {
+        case "Enter":
+          this.dispatchEditRequest();
+          break;
+        default:
+          if (event.key.length === 1 && event.key.match(/\P{Cc}/u)) {
+            this.dispatchEditRequest(event.key);
+          }
+          break;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "ArrowRight":
+        case "ArrowLeft":
+          event.preventDefault();
+          this.snapPosToFocusedCell();
+          break;
+      }
+    }
   }
   //
   // Accessors
@@ -177,9 +328,33 @@ var DxGrid = class extends LitElement {
   rowSize(r) {
     return this.rowSizes?.[r] ?? this.rowDefault.size;
   }
-  getCell(c, r) {
+  cell(c, r) {
     return this.cells[`${c}${separator}${r}`];
   }
+  focusedCellBox() {
+    const cellElement = this.focusedCellElement();
+    const cellSize = {
+      inlineSize: this.colSize(this.focusedCell.col),
+      blockSize: this.rowSize(this.focusedCell.row)
+    };
+    if (!cellElement) {
+      return {
+        insetInlineStart: NaN,
+        insetBlockStart: NaN,
+        ...cellSize
+      };
+    }
+    const contentElement = cellElement.offsetParent;
+    const [_translate3d, inlineStr, blockStr] = contentElement.style.transform.split(/[()]|px,?\s?/);
+    const contentOffsetInline = parseFloat(inlineStr);
+    const contentOffsetBlock = parseFloat(blockStr);
+    const offsetParent = contentElement.offsetParent;
+    return {
+      insetInlineStart: cellElement.offsetLeft + contentOffsetInline + offsetParent.offsetLeft,
+      insetBlockStart: cellElement.offsetTop + contentOffsetBlock + offsetParent.offsetTop,
+      ...cellSize
+    };
+  }
   updateVisInline() {
     let colIndex = 0;
     let pxInline = this.colSize(colIndex);
@@ -234,31 +409,45 @@ var DxGrid = class extends LitElement {
     this.updateVisInline();
     this.updateVisBlock();
   }
+  // Focus handlers
   handleFocus(event) {
-    const target = event.target;
-    const action = target.getAttribute("data-dx-grid-action");
-    if (action === "cell") {
-      const c = parseInt(target.getAttribute("aria-colindex") ?? "never");
-      const r = parseInt(target.getAttribute("aria-rowindex") ?? "never");
-      this.focusedCell = {
-        col: c,
-        row: r
-      };
+    const cellCoords = closestCell(event.target);
+    if (cellCoords) {
+      this.focusedCell = cellCoords;
       this.focusActive = true;
     }
   }
   handleBlur(event) {
-    if (!event.relatedTarget || event.relatedTarget.closest(".dx-grid__viewport") !== this.viewportRef.value) {
+    if (!event.relatedTarget || !event.relatedTarget.closest(`[data-grid="${this.gridId}"]`)) {
       this.focusActive = false;
     }
   }
+  focusedCellElement() {
+    return this.viewportRef.value?.querySelector(`[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`);
+  }
   /**
   * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
   */
-  refocus() {
-    (this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax || this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax ? this.viewportRef.value : this.viewportRef.value?.querySelector(`[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`))?.focus({
+  refocus(increment, delta = 1) {
+    switch (increment) {
+      case "row":
+        this.focusedCell = {
+          ...this.focusedCell,
+          row: this.focusedCell.row + delta
+        };
+        break;
+      case "col":
+        this.focusedCell = {
+          ...this.focusedCell,
+          col: this.focusedCell.col + delta
+        };
+    }
+    (this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax || this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax ? this.viewportRef.value : this.focusedCellElement())?.focus({
       preventScroll: true
     });
+    if (increment) {
+      this.snapPosToFocusedCell();
+    }
   }
   /**
   * Updates `pos` so that a cell in focus is fully within the viewport
@@ -277,7 +466,7 @@ var DxGrid = class extends LitElement {
           acc += this.colSize(this.visColMin + overscanCol + c0) + gap;
           return acc;
         }, 0);
-        this.posInline = this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline;
+        this.posInline = Math.max(0, this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline);
         this.updateVisInline();
       }
       if (this.focusedCell.row <= this.visRowMin + overscanRow) {
@@ -290,65 +479,34 @@ var DxGrid = class extends LitElement {
           acc += this.rowSize(this.visRowMin + overscanRow + r0) + gap;
           return acc;
         }, 0);
-        this.posBlock = this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock;
+        this.posBlock = Math.max(0, this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock);
         this.updateVisBlock();
       }
     }
   }
-  // Keyboard interactions
-  handleKeydown(event) {
-    if (this.focusActive) {
-      switch (event.key) {
-        case "ArrowDown":
-          this.focusedCell = {
-            ...this.focusedCell,
-            row: this.focusedCell.row + 1
-          };
-          break;
-        case "ArrowUp":
-          this.focusedCell = {
-            ...this.focusedCell,
-            row: Math.max(0, this.focusedCell.row - 1)
-          };
-          break;
-        case "ArrowRight":
-          this.focusedCell = {
-            ...this.focusedCell,
-            col: this.focusedCell.col + 1
-          };
-          break;
-        case "ArrowLeft":
-          this.focusedCell = {
-            ...this.focusedCell,
-            col: Math.max(0, this.focusedCell.col - 1)
-          };
-          break;
-      }
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowUp":
-        case "ArrowRight":
-        case "ArrowLeft":
-          event.preventDefault();
-          this.snapPosToFocusedCell();
-          break;
-      }
-    }
-  }
   //
   // Render and other lifecycle methods
   //
   render() {
     const visibleCols = this.visColMax - this.visColMin;
     const visibleRows = this.visRowMax - this.visRowMin;
-    const offsetInline = gap + this.binInlineMin - this.posInline - this.overscanInline;
-    const offsetBlock = gap + this.binBlockMin - this.posBlock - this.overscanBlock;
+    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
+    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
+    const selectColMin = Math.min(this.selectionStart.col, this.selectionEnd.col);
+    const selectColMax = Math.max(this.selectionStart.col, this.selectionEnd.col);
+    const selectRowMin = Math.min(this.selectionStart.row, this.selectionEnd.row);
+    const selectRowMax = Math.max(this.selectionStart.row, this.selectionEnd.row);
+    const selectVisible = selectColMin !== selectColMax || selectRowMin !== selectRowMax;
     return html`<div
       role="none"
       class="dx-grid"
+      data-grid=${this.gridId}
+      data-grid-mode=${this.mode}
+      ?data-grid-select=${selectVisible}
       @pointerdown=${this.handlePointerDown}
       @pointerup=${this.handlePointerUp}
       @pointermove=${this.handlePointerMove}
+      @pointerleave=${this.handlePointerUp}
       @focus=${this.handleFocus}
       @blur=${this.handleBlur}
       @keydown=${this.handleKeydown}
@@ -411,11 +569,15 @@ var DxGrid = class extends LitElement {
       ].map((_2, r0) => {
         const c = c0 + this.visColMin;
         const r = r0 + this.visRowMin;
-        const cell = this.getCell(c, r);
+        const cell = this.cell(c, r);
+        const active = this.focusActive && this.focusedCell.col === c && this.focusedCell.row === r;
+        const selected = c >= selectColMin && c <= selectColMax && r >= selectRowMin && r <= selectRowMax;
         return html`<div
                 role="gridcell"
                 tabindex="0"
                 ?inert=${c < 0 || r < 0}
+                ?aria-selected=${selected}
+                class=${cell || active ? (cell?.className ? cell.className + " " : "") + (active ? "dx-grid__cell--active" : "") : nothing}
                 aria-rowindex=${r}
                 aria-colindex=${c}
                 data-dx-grid-action="cell"
@@ -467,6 +629,11 @@ var DxGrid = class extends LitElement {
     return this;
   }
 };
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGrid.prototype, "gridId", void 0);
 _ts_decorate([
   property({
     type: Object
@@ -492,6 +659,11 @@ _ts_decorate([
     type: Object
   })
 ], DxGrid.prototype, "cells", void 0);
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGrid.prototype, "mode", void 0);
 _ts_decorate([
   state()
 ], DxGrid.prototype, "posInline", void 0);
@@ -540,6 +712,9 @@ _ts_decorate([
 _ts_decorate([
   state()
 ], DxGrid.prototype, "templateRows", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "pointer", void 0);
 _ts_decorate([
   state()
 ], DxGrid.prototype, "colSizes", void 0);
@@ -548,16 +723,19 @@ _ts_decorate([
 ], DxGrid.prototype, "rowSizes", void 0);
 _ts_decorate([
   state()
-], DxGrid.prototype, "resizing", void 0);
+], DxGrid.prototype, "focusActive", void 0);
 _ts_decorate([
   state()
-], DxGrid.prototype, "observer", void 0);
+], DxGrid.prototype, "focusedCell", void 0);
 _ts_decorate([
   state()
-], DxGrid.prototype, "focusedCell", void 0);
+], DxGrid.prototype, "selectionStart", void 0);
 _ts_decorate([
   state()
-], DxGrid.prototype, "focusActive", void 0);
+], DxGrid.prototype, "selectionEnd", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "observer", void 0);
 _ts_decorate([
   eventOptions({
     capture: true
@@ -573,6 +751,8 @@ DxGrid = _ts_decorate([
 ], DxGrid);
 export {
   DxAxisResize,
-  DxGrid
+  DxEditRequest,
+  DxGrid,
+  DxGridCellsSelect
 };
 //# sourceMappingURL=index.mjs.map