@dxos/lit-grid 0.6.12-main.c974201 → 0.6.12-main.f9d0246

package/dist/lib/browser/index.mjs

@@ -1,7 +1,15 @@
 // packages/ui/lit-grid/src/dx-grid.ts
-import { LitElement, html, nothing } from "lit";
-import { customElement, state, property, eventOptions } from "lit/decorators.js";
-import { ref, createRef } from "lit/directives/ref.js";
+import { LitElement as LitElement2, html as html2, nothing } from "lit";
+import { customElement as customElement2, state, property as property2, eventOptions } from "lit/decorators.js";
+import { ref as ref2, createRef } from "lit/directives/ref.js";
+
+// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
+import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
 
 // packages/ui/lit-grid/src/util.ts
 var separator = ",";
@@ -16,6 +24,19 @@ var DxAxisResize = class extends Event {
     this.size = props.size;
   }
 };
+var DxAxisResizeInternal = class extends Event {
+  constructor(props) {
+    super("dx-axis-resize-internal", {
+      composed: true,
+      bubbles: true
+    });
+    this.axis = props.axis;
+    this.index = props.index;
+    this.size = props.size;
+    this.delta = props.delta;
+    this.state = props.state;
+  }
+};
 var DxEditRequest = class extends Event {
   constructor(props) {
     super("dx-edit-request");
@@ -36,13 +57,96 @@ var DxGridCellsSelect = class extends Event {
   }
 };
 
-// packages/ui/lit-grid/src/dx-grid.ts
+// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.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") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) 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 DxGridAxisResizeHandle = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.axis = "row";
+    this.index = "-1";
+    this.size = 128;
+    this.dragStartSize = 128;
+    this.cleanup = null;
+  }
+  render() {
+    return html`<button class="dx-grid__resize-handle" ${ref(this.mount)}>
+      <span class="sr-only">Resize</span>
+    </button>`;
+  }
+  dispatchResize(location, state2) {
+    const client = this.axis === "row" ? "clientY" : "clientX";
+    const event = new DxAxisResizeInternal({
+      axis: this.axis,
+      size: this.dragStartSize,
+      index: this.index,
+      delta: location.current.input[client] - location.initial.input[client],
+      state: state2
+    });
+    this.dispatchEvent(event);
+  }
+  mount(element) {
+    this.cleanup?.();
+    const host = this;
+    if (element) {
+      this.cleanup = draggable({
+        element,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          disableNativeDragPreview({
+            nativeSetDragImage
+          });
+          preventUnhandled.start();
+        },
+        onDragStart() {
+          host.dragStartSize = host.size;
+        },
+        onDrag({ location }) {
+          host.dispatchResize(location, "dragging");
+        },
+        onDrop({ location }) {
+          host.dispatchResize(location, "dropped");
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup?.();
+  }
+  createRenderRoot() {
+    return this;
+  }
+};
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGridAxisResizeHandle.prototype, "axis", void 0);
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGridAxisResizeHandle.prototype, "index", void 0);
+_ts_decorate([
+  property({
+    type: Number
+  })
+], DxGridAxisResizeHandle.prototype, "size", void 0);
+DxGridAxisResizeHandle = _ts_decorate([
+  customElement("dx-grid-axis-resize-handle")
+], DxGridAxisResizeHandle);
+
+// packages/ui/lit-grid/src/dx-grid.ts
+function _ts_decorate2(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") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) 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;
@@ -87,9 +191,9 @@ var isSameCell = (a, b) => a && b && Number.isFinite(a.col) && Number.isFinite(a
 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 {
+var DxGrid = class extends LitElement2 {
   constructor() {
-    super(...arguments);
+    super();
     this.gridId = "default-grid-id";
     this.rowDefault = {
       size: 32
@@ -99,8 +203,14 @@ var DxGrid = class extends LitElement {
     };
     this.rows = {};
     this.columns = {};
-    this.cells = {};
+    this.initialCells = {};
     this.mode = "browse";
+    /**
+    * When this function is defined, it is used first to try to get a value for a cell, and otherwise will fall back
+    * to `cells`.
+    */
+    this.getCells = null;
+    this.cells = {};
     //
     // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
     //
@@ -190,12 +300,6 @@ var DxGrid = class extends LitElement {
     };
     this.handlePointerUp = (event) => {
       if (this.pointer?.state === "resizing") {
-        const resizeEvent = new DxAxisResize({
-          axis: this.pointer.axis,
-          index: this.pointer.index,
-          size: this[this.pointer.axis === "col" ? "colSize" : "rowSize"](this.pointer.index)
-        });
-        this.dispatchEvent(resizeEvent);
       } else {
         const cell = closestCell(event.target);
         if (cell) {
@@ -209,24 +313,7 @@ var DxGrid = class extends LitElement {
       this.pointer = null;
     };
     this.handlePointerMove = (event) => {
-      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.pointer.index]: nextSize
-          };
-          this.updateVisInline();
-        } else {
-          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.pointer.size + delta));
-          this.rowSizes = {
-            ...this.rowSizes,
-            [this.pointer.index]: nextSize
-          };
-          this.updateVisBlock();
-        }
-      } else if (this.pointer?.state === "selecting") {
+      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;
@@ -248,16 +335,32 @@ var DxGrid = class extends LitElement {
       }
     });
     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.handleWheel = ({ deltaX, deltaY }) => {
       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();
-        }
+        this.maybeUpdateVis();
       }
     };
+    this.addEventListener("dx-axis-resize-internal", this.handleAxisResizeInternal);
+    this.addEventListener("wheel", this.handleWheel);
+    this.addEventListener("pointerdown", this.handlePointerDown);
+    this.addEventListener("pointermove", this.handlePointerMove);
+    this.addEventListener("pointerup", this.handlePointerUp);
+    this.addEventListener("pointerleave", this.handlePointerUp);
+    this.addEventListener("focus", this.handleFocus, {
+      capture: true
+    });
+    this.addEventListener("blur", this.handleBlur, {
+      capture: true
+    });
+    this.addEventListener("keydown", this.handleKeydown);
   }
   //
   // Primary pointer and keyboard handlers
@@ -329,7 +432,8 @@ var DxGrid = class extends LitElement {
     return this.rowSizes?.[r] ?? this.rowDefault.size;
   }
   cell(c, r) {
-    return this.cells[`${c}${separator}${r}`];
+    const index = `${c}${separator}${r}`;
+    return this.cells[index] ?? this.initialCells[index];
   }
   focusedCellBox() {
     const cellElement = this.focusedCellElement();
@@ -485,6 +589,52 @@ var DxGrid = class extends LitElement {
     }
   }
   //
+  // Map scroll DOM methods to virtualized value.
+  //
+  get scrollLeft() {
+    return this.posInline;
+  }
+  set scrollLeft(nextValue) {
+    this.posInline = nextValue;
+    this.maybeUpdateVis();
+  }
+  get scrollTop() {
+    return this.posBlock;
+  }
+  set scrollTop(nextValue) {
+    this.posBlock = nextValue;
+    this.maybeUpdateVis();
+  }
+  //
+  // Resize handlers
+  //
+  handleAxisResizeInternal(event) {
+    event.stopPropagation();
+    const { axis, delta, size, index, type } = event;
+    if (axis === "col") {
+      const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, size + delta));
+      this.colSizes = {
+        ...this.colSizes,
+        [index]: nextSize
+      };
+      this.updateVisInline();
+    } else {
+      const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, size + delta));
+      this.rowSizes = {
+        ...this.rowSizes,
+        [index]: nextSize
+      };
+      this.updateVisBlock();
+    }
+    if (type === "dropped") {
+      this.dispatchEvent(new DxAxisResize({
+        axis,
+        index,
+        size: this[axis === "col" ? "colSize" : "rowSize"](index)
+      }));
+    }
+  }
+  //
   // Render and other lifecycle methods
   //
   render() {
@@ -497,19 +647,12 @@ var DxGrid = class extends LitElement {
     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
+    return html2`<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}
     >
       <div role="none" class="dx-grid__corner"></div>
       <div role="none" class="dx-grid__columnheader">
@@ -522,15 +665,18 @@ var DxGrid = class extends LitElement {
       ...Array(visibleCols)
     ].map((_, c0) => {
       const c = this.visColMin + c0;
-      return html`<div
+      return html2`<div
               role="columnheader"
               ?inert=${c < 0}
               style="block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 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>`}
+              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html2`<dx-grid-axis-resize-handle
+                axis="col"
+                index=${c}
+                size=${this.colSize(c)}
+                @dxaxisresizeinternal=${this.handleAxisResizeInternal}
+              ></dx-grid-axis-resize-handle>`}
             </div>`;
     })}
         </div>
@@ -546,16 +692,18 @@ var DxGrid = class extends LitElement {
       ...Array(visibleRows)
     ].map((_, r0) => {
       const r = this.visRowMin + r0;
-      return html`<div role="rowheader" ?inert=${r < 0} style="grid-row:${r0 + 1}/${r0 + 2}">
+      return html2`<div role="rowheader" ?inert=${r < 0} style="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>`}
+              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html2`<dx-grid-axis-resize-handle
+                axis="row"
+                index=${r}
+                size=${this.rowSize(r)}
+              ></dx-grid-axis-resize-handle>`}
             </div>`;
     })}
         </div>
       </div>
-      <div role="grid" class="dx-grid__viewport" tabindex="0" @wheel=${this.handleWheel} ${ref(this.viewportRef)}>
+      <div role="grid" class="dx-grid__viewport" tabindex="0" @wheel=${this.handleWheel} ${ref2(this.viewportRef)}>
         <div
           role="none"
           class="dx-grid__content"
@@ -572,7 +720,7 @@ var DxGrid = class extends LitElement {
         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
+        return html2`<div
                 role="gridcell"
                 tabindex="0"
                 ?inert=${c < 0 || r < 0}
@@ -600,6 +748,18 @@ var DxGrid = class extends LitElement {
     </div>`;
   }
   firstUpdated() {
+    if (this.getCells) {
+      this.cells = this.getCells({
+        start: {
+          col: this.visColMin,
+          row: this.visRowMin
+        },
+        end: {
+          col: this.visColMax,
+          row: this.visRowMax
+        }
+      });
+    }
     this.observer.observe(this.viewportRef.value);
     this.colSizes = Object.entries(this.columns).reduce((acc, [colId, colMeta]) => {
       if (colMeta?.size) {
@@ -614,6 +774,20 @@ var DxGrid = class extends LitElement {
       return acc;
     }, {});
   }
+  willUpdate(changedProperties) {
+    if (this.getCells && (changedProperties.has("initialCells") || changedProperties.has("visColMin") || changedProperties.has("visColMax") || changedProperties.has("visRowMin") || changedProperties.has("visRowMax"))) {
+      this.cells = this.getCells({
+        start: {
+          col: this.visColMin,
+          row: this.visRowMin
+        },
+        end: {
+          col: this.visColMax,
+          row: this.visRowMax
+        }
+      });
+    }
+  }
   updated(changedProperties) {
     if (this.focusActive && (changedProperties.has("visRowMin") || changedProperties.has("visColMin") || changedProperties.has("focusedCell"))) {
       this.refocus();
@@ -629,128 +803,132 @@ var DxGrid = class extends LitElement {
     return this;
   }
 };
-_ts_decorate([
-  property({
+_ts_decorate2([
+  property2({
     type: String
   })
 ], DxGrid.prototype, "gridId", void 0);
-_ts_decorate([
-  property({
+_ts_decorate2([
+  property2({
     type: Object
   })
 ], DxGrid.prototype, "rowDefault", void 0);
-_ts_decorate([
-  property({
+_ts_decorate2([
+  property2({
     type: Object
   })
 ], DxGrid.prototype, "columnDefault", void 0);
-_ts_decorate([
-  property({
+_ts_decorate2([
+  property2({
     type: Object
   })
 ], DxGrid.prototype, "rows", void 0);
-_ts_decorate([
-  property({
+_ts_decorate2([
+  property2({
     type: Object
   })
 ], DxGrid.prototype, "columns", void 0);
-_ts_decorate([
-  property({
+_ts_decorate2([
+  property2({
     type: Object
   })
-], DxGrid.prototype, "cells", void 0);
-_ts_decorate([
-  property({
+], DxGrid.prototype, "initialCells", void 0);
+_ts_decorate2([
+  property2({
     type: String
   })
 ], DxGrid.prototype, "mode", void 0);
-_ts_decorate([
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "cells", void 0);
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "posInline", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "posBlock", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "sizeInline", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "sizeBlock", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "overscanInline", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "overscanBlock", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "binInlineMin", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "binInlineMax", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "binBlockMin", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "binBlockMax", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "visColMin", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "visColMax", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "visRowMin", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "visRowMax", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "templateColumns", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "templateRows", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "pointer", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "colSizes", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "rowSizes", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "focusActive", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "focusedCell", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "selectionStart", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "selectionEnd", void 0);
-_ts_decorate([
+_ts_decorate2([
   state()
 ], DxGrid.prototype, "observer", void 0);
-_ts_decorate([
+_ts_decorate2([
   eventOptions({
     capture: true
   })
 ], DxGrid.prototype, "handleFocus", null);
-_ts_decorate([
+_ts_decorate2([
   eventOptions({
     capture: true
   })
 ], DxGrid.prototype, "handleBlur", null);
-DxGrid = _ts_decorate([
-  customElement("dx-grid")
+DxGrid = _ts_decorate2([
+  customElement2("dx-grid")
 ], DxGrid);
 export {
   DxAxisResize,
+  DxAxisResizeInternal,
   DxEditRequest,
   DxGrid,
   DxGridCellsSelect