@dxos/lit-grid 0.6.10-main.bbdfaa4 → 0.6.10-staging.014d6d3

package/dist/lib/browser/index.mjs

@@ -2,26 +2,6 @@
 import { LitElement, html } from "lit";
 import { customElement, state, property } from "lit/decorators.js";
 import { ref, createRef } from "lit/directives/ref.js";
-
-// packages/ui/lit-grid/src/position.ts
-var colToA1Notation = (column) => {
-  return (column >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(column / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + column % 26);
-};
-var rowToA1Notation = (row) => {
-  return `${row + 1}`;
-};
-var posFromNumericNotation = (notation) => {
-  const [iStr, jStr] = notation.split(",");
-  if (!iStr || !jStr) {
-    throw Error("[posFromNumericNotation] Bad input");
-  }
-  return {
-    i: parseInt(iStr),
-    j: parseInt(jStr)
-  };
-};
-
-// packages/ui/lit-grid/src/dx-grid.ts
 function _ts_decorate(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -32,129 +12,241 @@ function _ts_decorate(decorators, target, key, desc) {
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-var colSize = 64;
-var rowSize = 20;
-var gap = 0;
+var gap = 1;
+var resizeTolerance = 8;
+var overscanCol = 1;
+var overscanRow = 1;
+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 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.values = {};
+    this.rowDefault = {
+      size: 32
+    };
+    this.columnDefault = {
+      size: 180
+    };
+    this.rows = {};
+    this.columns = {};
+    this.cells = {};
+    //
+    // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
+    //
     this.posInline = 0;
     this.posBlock = 0;
+    //
+    // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.
+    //
     this.sizeInline = 0;
     this.sizeBlock = 0;
-    this.cellByPosition = {};
+    //
+    // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.
+    //
+    this.overscanInline = 0;
+    this.overscanBlock = 0;
+    //
+    // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
+    //
+    this.binInlineMin = 0;
+    this.binInlineMax = this.colSize(0);
+    this.binBlockMin = 0;
+    this.binBlockMax = this.rowSize(0);
+    //
+    // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
+    // the viewport. These start with naïve values that are updated before first contentful render.
+    //
+    this.visColMin = 0;
+    this.visColMax = 1;
+    this.visRowMin = 0;
+    this.visRowMax = 1;
+    //
+    // `template` is the rendered value of `grid-{axis}-template`.
+    //
+    this.templateColumns = `${this.colSize(0)}px`;
+    this.templateRows = `${this.rowSize(0)}px`;
+    //
+    // Resize state and handlers
+    //
+    this.colSizes = {};
+    this.rowSizes = {};
+    this.resizing = null;
+    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
+          };
+        }
+      }
+    };
+    this.handlePointerUp = (_event) => {
+      this.resizing = 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));
+          this.colSizes = {
+            ...this.colSizes,
+            [this.resizing.index]: nextSize
+          };
+          this.updateVisInline();
+        } else {
+          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
+          this.rowSizes = {
+            ...this.rowSizes,
+            [this.resizing.index]: nextSize
+          };
+          this.updateVisBlock();
+        }
+      }
+    };
+    //
+    // Resize & reposition handlers, observer, ref
+    //
     this.observer = new ResizeObserver((entries) => {
       const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
         inlineSize: 0,
         blockSize: 0
       };
-      this.sizeInline = inlineSize;
-      this.sizeBlock = blockSize;
+      if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance || Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
+        this.sizeInline = inlineSize;
+        this.sizeBlock = blockSize;
+        this.updateVis();
+      }
     });
     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();
+      }
     };
   }
-  willUpdate(changed) {
-    if (changed.has("values")) {
-      this.cellByPosition = Object.entries(this.values).reduce((acc, [id, { pos, end }]) => {
-        const { i: i1, j: j1 } = posFromNumericNotation(pos);
-        if (end) {
-          const { i: i2, j: j2 } = posFromNumericNotation(end);
-          for (let ci = i1; ci <= i2; ci += 1) {
-            for (let cj = j1; cj <= j2; cj += 1) {
-              acc[`${ci},${cj}`] = id;
-            }
-          }
-        } else {
-          acc[`${i1},${j1}`] = id;
-        }
-        return acc;
-      }, {});
-    }
+  //
+  // Accessors
+  //
+  colSize(c) {
+    return this.colSizes?.[c] ?? this.columnDefault.size;
   }
-  getCell(i, j) {
-    const pos = `${i},${j}`;
-    const cellId = this.cellByPosition[pos];
-    return cellId ? this.values[cellId] : void 0;
+  rowSize(r) {
+    return this.rowSizes?.[r] ?? this.rowDefault.size;
   }
-  computeExtrema() {
-    const colVisMin = Math.floor(this.posInline / (colSize + gap));
-    const colVisMax = Math.ceil((this.sizeInline + this.posInline) / (colSize + gap));
-    const rowVisMin = Math.floor(this.posBlock / (rowSize + gap));
-    const rowVisMax = Math.ceil((this.sizeBlock + this.posBlock) / (rowSize + gap));
-    const { colExtMin, colExtMax } = [
-      ...Array(rowVisMax - rowVisMin)
-    ].reduce((acc, _, j) => {
-      const colVisMinCell = this.getCell(colVisMin, j + rowVisMin);
-      if (colVisMinCell?.end) {
-        const { i: iStart } = posFromNumericNotation(colVisMinCell.pos);
-        acc.colExtMin = Math.min(acc.colExtMin, iStart);
-      }
-      const colVisMaxCell = this.getCell(colVisMax, j + rowVisMin);
-      if (colVisMaxCell?.end) {
-        const { i: iEnd } = posFromNumericNotation(colVisMaxCell.end);
-        acc.colExtMax = Math.max(acc.colExtMax, iEnd);
-      }
+  getCell(c, r) {
+    return this.cells[`${c}${separator}${r}`];
+  }
+  updateVisInline() {
+    let colIndex = 0;
+    let pxInline = this.colSize(colIndex);
+    while (pxInline < this.posInline) {
+      colIndex += 1;
+      pxInline += this.colSize(colIndex) + gap;
+    }
+    this.visColMin = colIndex - overscanCol;
+    this.binInlineMin = pxInline - this.colSize(colIndex) - gap;
+    this.binInlineMax = pxInline + gap;
+    this.overscanInline = [
+      ...Array(overscanCol)
+    ].reduce((acc, _, c0) => {
+      acc += this.colSize(this.visColMin + c0);
       return acc;
-    }, {
-      colExtMin: colVisMin,
-      colExtMax: colVisMax
-    });
-    const { rowExtMin, rowExtMax } = [
-      ...Array(colVisMax - colVisMin)
-    ].reduce((acc, _, i) => {
-      const rowVisMinCell = this.getCell(i + colVisMin, rowVisMin);
-      if (rowVisMinCell?.end) {
-        const { j: jStart } = posFromNumericNotation(rowVisMinCell.pos);
-        acc.rowExtMin = Math.min(acc.rowExtMin, jStart);
-      }
-      const rowVisMaxCell = this.getCell(i + colVisMin, rowVisMax);
-      if (rowVisMaxCell?.end) {
-        const { j: jEnd } = posFromNumericNotation(rowVisMaxCell.end);
-        acc.rowExtMax = Math.max(acc.rowExtMax, jEnd);
-      }
+    }, 0) + gap * (overscanCol - 1);
+    while (pxInline < this.binInlineMax + this.sizeInline) {
+      colIndex += 1;
+      pxInline += this.colSize(colIndex) + gap;
+    }
+    this.visColMax = colIndex + overscanCol + 1;
+    this.templateColumns = [
+      ...Array(this.visColMax - this.visColMin)
+    ].map((_, c0) => `${this.colSize(this.visColMin + c0)}px`).join(" ");
+  }
+  updateVisBlock() {
+    let rowIndex = 0;
+    let pxBlock = this.rowSize(rowIndex);
+    while (pxBlock < this.posBlock) {
+      rowIndex += 1;
+      pxBlock += this.rowSize(rowIndex) + gap;
+    }
+    this.visRowMin = rowIndex - overscanRow;
+    this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;
+    this.binBlockMax = pxBlock + gap;
+    this.overscanBlock = [
+      ...Array(overscanRow)
+    ].reduce((acc, _, r0) => {
+      acc += this.rowSize(this.visRowMin + r0);
       return acc;
-    }, {
-      rowExtMin: rowVisMin,
-      rowExtMax: rowVisMax
-    });
-    return {
-      colVisMin,
-      colExtMin,
-      colVisMax,
-      colExtMax,
-      rowVisMin,
-      rowExtMin,
-      rowVisMax,
-      rowExtMax
-    };
+    }, 0) + gap * (overscanRow - 1);
+    while (pxBlock < this.binBlockMax + this.sizeBlock) {
+      rowIndex += 1;
+      pxBlock += this.rowSize(rowIndex) + gap;
+    }
+    this.visRowMax = rowIndex + overscanRow + 1;
+    this.templateRows = [
+      ...Array(this.visRowMax - this.visRowMin)
+    ].map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`).join(" ");
+  }
+  updateVis() {
+    this.updateVisInline();
+    this.updateVisBlock();
   }
+  //
+  // Render and other lifecycle methods
+  //
   render() {
-    const { colVisMin, colVisMax, rowVisMin, rowVisMax } = this.computeExtrema();
-    const visibleCols = colVisMax - colVisMin;
-    const visibleRows = rowVisMax - rowVisMin;
-    const offsetInline = colVisMin * colSize - this.posInline;
-    const offsetBlock = rowVisMin * rowSize - this.posBlock;
-    return html`<div role="none" class="dx-grid">
+    const visibleCols = this.visColMax - this.visColMin;
+    const visibleRows = this.visRowMax - this.visRowMin;
+    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
+    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
+    return html`<div
+      role="none"
+      class="dx-grid"
+      @pointerdown=${this.handlePointerDown}
+      @pointerup=${this.handlePointerUp}
+      @pointermove=${this.handlePointerMove}
+    >
       <div role="none" class="dx-grid__corner"></div>
       <div role="none" class="dx-grid__columnheader">
         <div
           role="none"
           class="dx-grid__columnheader__content"
-          style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:repeat(${visibleCols},${colSize}px);"
+          style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};"
         >
           ${[
       ...Array(visibleCols)
-    ].map((_, i) => {
+    ].map((_, c0) => {
+      const c = this.visColMin + c0;
       return html`<div
-              role="gridcell"
-              style="inline-size:${colSize}px;block-size:${rowSize}px;grid-column:${i + 1}/${i + 2};"
+              role="columnheader"
+              ?inert=${c < 0}
+              style="inline-size:${this.colSize(c)}px;block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};"
             >
-              ${colToA1Notation(colVisMin + i)}
+              <span id=${localChId(c0)}>${colToA1Notation(c)}</span>
+              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
             </div>`;
     })}
         </div>
@@ -164,9 +256,17 @@ var DxGrid = class extends LitElement {
         <div role="none" class="dx-grid__rowheader__content" style="transform:translate3d(0,${offsetBlock}px,0);">
           ${[
       ...Array(visibleRows)
-    ].map((_, j) => {
-      return html`<div role="gridcell" style="block-size:${rowSize}px;grid-row:${j + 1}/${j + 2}">
-              ${rowToA1Notation(rowVisMin + j)}
+    ].map((_, r0) => {
+      const r = this.visRowMin + r0;
+      return html`<div
+              role="rowheader"
+              ?inert=${r < 0}
+              style="block-size:${this.rowSize(r)}px;grid-row:${r0 + 1}/${r0 + 2}"
+            >
+              <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
+              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
             </div>`;
     })}
         </div>
@@ -175,32 +275,27 @@ var DxGrid = class extends LitElement {
         <div
           role="grid"
           class="dx-grid__content"
-          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:repeat(${visibleCols},${colSize}px);grid-template-rows:repeat(${visibleRows},${rowSize}px);"
+          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this.templateColumns};grid-template-rows:${this.templateRows};"
         >
           ${[
       ...Array(visibleCols)
-    ].map((_, i) => {
+    ].map((_, c0) => {
       return [
         ...Array(visibleRows)
-      ].map((_2, j) => {
-        const posAbs = `${i + colVisMin},${j + rowVisMin}`;
-        const cellId = this.cellByPosition[posAbs];
-        const cell = cellId ? this.values[cellId] : void 0;
-        if (cell?.end) {
-          if (posAbs !== cell?.pos) {
-            return null;
-          } else {
-            const { i: iEndAbs, j: jEndAbs } = posFromNumericNotation(cell.end);
-            return html`<div
-                    role="gridcell"
-                    style="grid-column:${i + 1} / ${iEndAbs - colVisMin + 2};grid-row:${j + 1} / ${jEndAbs - rowVisMin + 2}"
-                  >
-                    ${cell?.value}
-                  </div>`;
-          }
-        } else {
-          return html`<div role="gridcell" style="grid-column:${i + 1};grid-row:${j + 1}">${cell?.value}</div>`;
-        }
+      ].map((_2, r0) => {
+        const c = c0 + this.visColMin;
+        const r = r0 + this.visRowMin;
+        const cell = this.getCell(c, r);
+        return html`<div
+                role="gridcell"
+                ?inert=${c < 0 || r < 0}
+                aria-rowindex=${r}
+                aria-colindex=${c}
+                data-dx-grid-action="cell"
+                style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
+              >
+                ${cell?.value}
+              </div>`;
       });
     })}
         </div>
@@ -217,6 +312,18 @@ var DxGrid = class extends LitElement {
   }
   firstUpdated() {
     this.observer.observe(this.viewportRef.value);
+    this.colSizes = Object.entries(this.columns).reduce((acc, [colId, colMeta]) => {
+      if (colMeta?.size) {
+        acc[colId] = colMeta.size;
+      }
+      return acc;
+    }, {});
+    this.rowSizes = Object.entries(this.rows).reduce((acc, [rowId, rowMeta]) => {
+      if (rowMeta?.size) {
+        acc[rowId] = rowMeta.size;
+      }
+      return acc;
+    }, {});
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -232,7 +339,27 @@ _ts_decorate([
   property({
     type: Object
   })
-], DxGrid.prototype, "values", void 0);
+], DxGrid.prototype, "rowDefault", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "columnDefault", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "rows", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "columns", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "cells", void 0);
 _ts_decorate([
   state()
 ], DxGrid.prototype, "posInline", void 0);
@@ -247,7 +374,49 @@ _ts_decorate([
 ], DxGrid.prototype, "sizeBlock", void 0);
 _ts_decorate([
   state()
-], DxGrid.prototype, "cellByPosition", void 0);
+], DxGrid.prototype, "overscanInline", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "overscanBlock", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binInlineMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binInlineMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binBlockMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binBlockMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visColMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visColMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visRowMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visRowMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "templateColumns", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "templateRows", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "colSizes", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "rowSizes", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "resizing", void 0);
 _ts_decorate([
   state()
 ], DxGrid.prototype, "observer", void 0);