@dxos/lit-grid 0.6.10-main.3cfcc89 → 0.6.10-main.bbdfaa4

package/dist/lib/browser/index.mjs

@@ -2,6 +2,26 @@
 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")
@@ -12,241 +32,129 @@ 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 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 colSize = 64;
+var rowSize = 20;
+var gap = 0;
 var DxGrid = class extends LitElement {
   constructor() {
     super(...arguments);
-    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.values = {};
     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;
-    //
-    // `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.cellByPosition = {};
     this.observer = new ResizeObserver((entries) => {
       const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
         inlineSize: 0,
         blockSize: 0
       };
-      if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance || Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
-        this.sizeInline = inlineSize;
-        this.sizeBlock = blockSize;
-        this.updateVis();
-      }
+      this.sizeInline = inlineSize;
+      this.sizeBlock = blockSize;
     });
     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();
-      }
     };
   }
-  //
-  // Accessors
-  //
-  colSize(c) {
-    return this.colSizes?.[c] ?? this.columnDefault.size;
-  }
-  rowSize(r) {
-    return this.rowSizes?.[r] ?? this.rowDefault.size;
+  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;
+      }, {});
+    }
   }
-  getCell(c, r) {
-    return this.cells[`${c}${separator}${r}`];
+  getCell(i, j) {
+    const pos = `${i},${j}`;
+    const cellId = this.cellByPosition[pos];
+    return cellId ? this.values[cellId] : void 0;
   }
-  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);
+  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);
+      }
       return acc;
-    }, 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);
+    }, {
+      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);
+      }
       return acc;
-    }, 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();
+    }, {
+      rowExtMin: rowVisMin,
+      rowExtMax: rowVisMax
+    });
+    return {
+      colVisMin,
+      colExtMin,
+      colVisMax,
+      colExtMax,
+      rowVisMin,
+      rowExtMin,
+      rowVisMax,
+      rowExtMax
+    };
   }
-  //
-  // Render and other lifecycle methods
-  //
   render() {
-    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}
-    >
+    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">
       <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:${this.templateColumns};"
+          style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:repeat(${visibleCols},${colSize}px);"
         >
           ${[
       ...Array(visibleCols)
-    ].map((_, c0) => {
-      const c = this.visColMin + c0;
+    ].map((_, i) => {
       return html`<div
-              role="columnheader"
-              ?inert=${c < 0}
-              style="inline-size:${this.colSize(c)}px;block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};"
+              role="gridcell"
+              style="inline-size:${colSize}px;block-size:${rowSize}px;grid-column:${i + 1}/${i + 2};"
             >
-              <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>`}
+              ${colToA1Notation(colVisMin + i)}
             </div>`;
     })}
         </div>
@@ -256,17 +164,9 @@ var DxGrid = class extends LitElement {
         <div role="none" class="dx-grid__rowheader__content" style="transform:translate3d(0,${offsetBlock}px,0);">
           ${[
       ...Array(visibleRows)
-    ].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>`}
+    ].map((_, j) => {
+      return html`<div role="gridcell" style="block-size:${rowSize}px;grid-row:${j + 1}/${j + 2}">
+              ${rowToA1Notation(rowVisMin + j)}
             </div>`;
     })}
         </div>
@@ -275,27 +175,32 @@ var DxGrid = class extends LitElement {
         <div
           role="grid"
           class="dx-grid__content"
-          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this.templateColumns};grid-template-rows:${this.templateRows};"
+          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:repeat(${visibleCols},${colSize}px);grid-template-rows:repeat(${visibleRows},${rowSize}px);"
         >
           ${[
       ...Array(visibleCols)
-    ].map((_, c0) => {
+    ].map((_, i) => {
       return [
         ...Array(visibleRows)
-      ].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>`;
+      ].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>`;
+        }
       });
     })}
         </div>
@@ -312,18 +217,6 @@ 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();
@@ -339,27 +232,7 @@ _ts_decorate([
   property({
     type: Object
   })
-], 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);
+], DxGrid.prototype, "values", void 0);
 _ts_decorate([
   state()
 ], DxGrid.prototype, "posInline", void 0);
@@ -374,49 +247,7 @@ _ts_decorate([
 ], DxGrid.prototype, "sizeBlock", void 0);
 _ts_decorate([
   state()
-], 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);
+], DxGrid.prototype, "cellByPosition", void 0);
 _ts_decorate([
   state()
 ], DxGrid.prototype, "observer", void 0);