@aquera/nile-elements 1.2.1 → 1.2.2

package/src/nile-grid/nile-grid.ts

@@ -5,20 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-grid.css';
 import NileElement from '../internal/nile-element';
-import {
-  resizeLinesHandler,
-  listenToEventListeners,
-  removeEventListeners,
-  getHead,
-  getBody,
-  rebuildTemplate,
-  applyTemplate,
-  layout,
-} from './nile-grid.utils';
+import { rebuildTemplate, syncStickyShadows, layout } from './nile-grid.layout';
+import { listenToEventListeners, removeEventListeners, getHead, getBody } from './nile-grid.utils';
+import { computeNewWidth, resizeWithScroll, applyAfterResize, resizeNoScroll } from './nile-grid.resize';
 
 /**
  * Nile grid component.
@@ -35,17 +28,15 @@ export class NileGrid extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  /** User can pass custom widths for the columns */
-  @property({ type: Array, attribute: true }) customWidths: number[] = [];
 
   /** To set the grid template columns in rebuildTemplate method */
   @state() public colTemplate = '';
 
   /** To store the column widths in the beginning and after resizing */
-  @state() private columnWidths: number[] = [...this.customWidths];
+  @state() public columnWidths: number[] = [];
 
   /** To get the slot element */
-  @query('slot') private slotEl!: HTMLSlotElement;
+  @query('slot') public slotEl!: HTMLSlotElement;
 
   /** To get the first resize line to show the resize handle */
   @query('.nile-resize-start') resizeStart: HTMLElement;
@@ -53,12 +44,38 @@ export class NileGrid extends NileElement {
   /** To get the last resize line to show the resize handle */
   @query('.nile-resize-end') resizeEnd: HTMLElement;
 
+  /** To enable horizontal scrolling when user is resizing */
+  @property({ type: Boolean, attribute: true, reflect: true }) enableResizeScroll: boolean = false;
+
+  /** To enable hoverable rows */
+  @property({ type: Boolean, attribute: true, reflect: true }) hoverable: boolean = false;
+
   /** To store the mutation observer */
   private mo?: MutationObserver;
 
+  /** To store the resize observer */
+  private resizeObserver?: ResizeObserver;
+
+  private resizeObserverStickyShadows?: ResizeObserver;
+
   /** To store the request animation frame */
   private raf = 0;
 
+  /** Minimum column width */
+  @property({ type: Number, reflect: true, attribute: true }) minColumnWidth = 40;
+
+  /** To store the sticky index's */
+  @state() public stickyLeftIndexes: number[] = [];
+
+  /** To store the sticky index's */
+  @state() public stickyRightIndexes: number[] = [];
+
+  /** To calculate the rowspan height */
+  @state() public cellHeight: number | null = null;
+
+  /** To check if the widths are initialized */
+  @state() public widthsInitialized = false;
+
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
     this.raf = requestAnimationFrame(() => {
@@ -68,9 +85,10 @@ export class NileGrid extends NileElement {
         this.slotEl,
         this.ensureWidths.bind(this),
         rebuildTemplate,
-        applyTemplate,
-        this.columnWidths
+        this.stickyLeftIndexes,
+        this.stickyRightIndexes
       );
+      syncStickyShadows(this);
     });
   }
 
@@ -81,36 +99,34 @@ export class NileGrid extends NileElement {
   }
 
   private onResize = (e: Event) => {
+    e.stopPropagation();
+    this.emit('nile-resize', {
+      columnNumber: (e as CustomEvent).detail.col,
+      columnWidth: (e as CustomEvent).detail.widthPx,
+    });
     const { col, widthPx } = (e as CustomEvent).detail as {
       col: number;
       widthPx: number;
     };
-    let w: any;
-    const floor = 60;
-
-    if (
-      (e.target as HTMLElement).getAttribute('colspan') &&
-      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1
-    ) {
-      w = Math.max(floor, Math.round(widthPx - this.columnWidths[col - 1]));
-    } else {
-      w = Math.max(floor, Math.round(widthPx));
-    }
-    this.columnWidths[col] = w;
-    resizeLinesHandler(
-      this.resizeStart,
-      this.resizeEnd,
+    const { prevW, newW, delta0 } = computeNewWidth({
+      target: e.target as HTMLElement,
       col,
       widthPx,
-      this.scrollHeight,
-      this.columnWidths,
-      e
-    );
-    this.colTemplate = rebuildTemplate(
-      this.columnWidths.length,
-      this.columnWidths
-    );
-    applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);
+      floor: this.minColumnWidth,
+      columnWidths: this.columnWidths,
+    });
+
+    if (delta0 === 0) {
+      applyAfterResize(this, col);
+      return;
+    }
+
+    if (!this.enableResizeScroll) {
+      resizeNoScroll({ grid: this, col, prevW, newW, floor: this.minColumnWidth });
+    } else {
+      resizeWithScroll({ grid: this, col, newW });
+    }
+    applyAfterResize(this, col);
   };
 
   protected firstUpdated() {
@@ -121,6 +137,10 @@ export class NileGrid extends NileElement {
       this.slotEl,
       this._attachObserverAndLayout.bind(this)
     );
+    this.addEventListener('scroll', () => syncStickyShadows(this));
+    this.resizeObserverStickyShadows = new ResizeObserver(() => syncStickyShadows(this));
+    this.resizeObserverStickyShadows.observe(this);
+    syncStickyShadows(this);
   }
 
   private _attachObserverAndLayout() {
@@ -128,6 +148,17 @@ export class NileGrid extends NileElement {
     this.mo = new MutationObserver(() => {
       this.scheduleLayout();
     });
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver(() => {
+      layout(
+        this,
+        this.slotEl,
+        this.ensureWidths.bind(this),
+        rebuildTemplate,
+        this.stickyLeftIndexes,
+        this.stickyRightIndexes
+      );
+    });
 
     const head = getHead(this.slotEl);
     const body = getBody(this.slotEl);
@@ -140,22 +171,15 @@ export class NileGrid extends NileElement {
       attributes: true,
       attributeFilter: ['colspan', 'rowspan'],
     });
-    layout(
-      this,
-      this.slotEl,
-      this.ensureWidths.bind(this),
-      rebuildTemplate,
-      applyTemplate,
-      this.columnWidths
-    );
+    this.resizeObserver?.observe(this);
   }
 
   public render(): TemplateResult {
     return html`
-      <div>
-        <slot></slot>
-        <div class="nile-resize-start"></div>
-        <div class="nile-resize-end"></div>
+      <div part="grid-base" class="nile-grid-base">
+        <slot part="grid-slot"></slot>
+        <div part="resize-start" class="nile-resize-start"></div>
+        <div part="resize-end" class="nile-resize-end"></div>
       </div>
     `;
   }
@@ -163,6 +187,8 @@ export class NileGrid extends NileElement {
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
     this.mo?.disconnect();
+    this.resizeObserver?.disconnect();
+    this.resizeObserverStickyShadows?.disconnect();
 
     if (this.raf) cancelAnimationFrame(this.raf);
     removeEventListeners(

package/src/nile-grid/nile-grid.types.ts

@@ -0,0 +1 @@
+export type HeadItemEl = HTMLElement & { width?: number | null };

package/src/nile-grid/nile-grid.utils.ts

@@ -1,48 +1,20 @@
 import { NileGrid } from './nile-grid';
-
-export const resizeLinesHandler = (
-  resizeStart: any,
-  resizeEnd: any,
-  col: number,
-  widthPx: number,
-  scrollHeight: any,
-  columnWidths: any,
-  e: any
-) => {
-  resizeStart.style.display = 'block';
-  resizeEnd.style.display = 'block';
-  resizeStart.style.height = scrollHeight + 'px';
-  resizeEnd.style.height = scrollHeight + 'px';
-  if (col === 0) {
-    resizeStart.style.left = `${Math.max(60, widthPx) - 6}px`;
-    resizeEnd.style.left = `${Math.max(60, widthPx) - 2}px`;
-  } else {
-    let totalWidth = 0;
-    if (
-      (e.target as HTMLElement).getAttribute('colspan') &&
-      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1
-    ) {
-      widthPx = widthPx - columnWidths[col - 1];
-      for (let i = 0; i < col; i++) {
-        totalWidth += columnWidths[i];
-      }
-    } else {
-      for (let i = 0; i < col; i++) {
-        totalWidth += columnWidths[i];
-      }
-    }
-    resizeStart.style.left = `${totalWidth + Math.max(60, widthPx) - 6}px`;
-    resizeEnd.style.left = `${totalWidth + Math.max(60, widthPx) - 2}px`;
-  }
-};
-
+import { HeadItemEl } from './nile-grid.types';
+
+/** listenToEventListeners
+ * @param nileGrid Grid element to attach listeners on
+ * @param onResize Handler for 'nile-column-resize'
+ * @param slotEl Slot element to watch for 'slotchange'
+ * @param _attachObserverAndLayout Callback to reattach observer + layout
+ * @returns void
+ */
 export const listenToEventListeners = (
   nileGrid: NileGrid,
   onResize: any,
   slotEl: any,
   _attachObserverAndLayout: any
 ) => {
-  nileGrid.addEventListener('nile-resize', onResize);
+  nileGrid.addEventListener('nile-column-resize', onResize);
   nileGrid.addEventListener('nile-resize-start', () => {
     nileGrid.resizeStart.style.display = 'block';
   });
@@ -53,13 +25,20 @@ export const listenToEventListeners = (
   slotEl.addEventListener('slotchange', () => _attachObserverAndLayout());
 };
 
+/** removeEventListeners
+ * @param nileGrid Grid element to detach listeners from
+ * @param onResize Handler previously attached to 'nile-column-resize'
+ * @param slotEl Slot element to remove 'slotchange' from
+ * @param _attachObserverAndLayout Callback reference used during attach
+ * @returns void
+ */
 export const removeEventListeners = (
   nileGrid: NileGrid,
   onResize: any,
   slotEl: any,
   _attachObserverAndLayout: any
 ) => {
-  nileGrid.removeEventListener('nile-resize', onResize);
+  nileGrid.removeEventListener('nile-column-resize', onResize);
   nileGrid.removeEventListener('nile-resize-start', () => {
     nileGrid.resizeStart.style.display = 'block';
   });
@@ -70,6 +49,10 @@ export const removeEventListeners = (
   slotEl.removeEventListener('slotchange', () => _attachObserverAndLayout());
 };
 
+/** getHead
+ * @param slotEl Slot element containing assigned nodes
+ * @returns <nile-grid-head> element or null
+ */
 export const getHead = (slotEl: any) => {
   const nodes = slotEl?.assignedElements() ?? [];
   return (
@@ -79,6 +62,10 @@ export const getHead = (slotEl: any) => {
   );
 };
 
+/** getBody
+ * @param slotEl Slot element containing assigned nodes
+ * @returns <nile-grid-body> element or null
+ */
 export const getBody = (slotEl: any) => {
   const nodes = slotEl?.assignedElements() ?? [];
   return (
@@ -86,167 +73,4 @@ export const getBody = (slotEl: any) => {
       (n: any) => n.tagName.toLowerCase() === 'nile-grid-body'
     ) as HTMLElement) || null
   );
-};
-
-export const rebuildTemplate = (
-  colCount: number,
-  columnWidths: number[]
-): string => {
-  const parts: string[] = [];
-
-  for (let i = 0; i < colCount; i++) {
-    const explicit = columnWidths[i];
-    if (i === colCount - 1) {
-      parts.push(`minmax(${explicit}px, auto)`);
-    } else {
-      parts.push(`${explicit}px`);
-    }
-  }
-  return parts.join(' ');
-};
-
-export const applyTemplate = (
-  head: HTMLElement | null,
-  body: HTMLElement | null,
-  colTemplate: string
-) => {
-  if (head) head.style.gridTemplateColumns = colTemplate;
-  if (body) {
-    body.style.gridTemplateColumns = colTemplate;
-    body.style.overflowX = 'auto';
-  }
-};
-
-function computeHeadLayout(
-  headRows: HTMLElement[],
-  carryHead: number[],
-  colCount: number
-): number {
-  headRows.forEach((row, rIdx) => {
-    let c = 1;
-    const cells = Array.from(
-      row.querySelectorAll('nile-grid-head-item, nile-grid-cell')
-    ) as HTMLElement[];
-    const rStart = rIdx + 1;
-
-    cells.forEach(cell => {
-      while (carryHead[c - 1] > 0) c++;
-      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
-      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
-
-      const cStart = c,
-        cEnd = c + colspan;
-      const rEnd = rStart + rowspan;
-
-      cell.style.gridColumn = `${cStart} / ${cEnd}`;
-      cell.style.gridRow = `${rStart} / ${rEnd}`;
-      (cell as any).dataset.cStart = String(cStart);
-
-      for (let k = 0; k < colspan; k++) {
-        const idx = c - 1 + k;
-        carryHead[idx] = Math.max(carryHead[idx] || 0, rowspan);
-      }
-      c = cEnd;
-      colCount = Math.max(colCount, cEnd - 1);
-    });
-
-    for (let i = 0; i < carryHead.length; i++)
-      if (carryHead[i] > 0) carryHead[i]--;
-  });
-  return colCount;
-}
-
-function computeBodyLayout(
-  bodyRows: HTMLElement[],
-  carryBody: number[],
-  colCount: number
-) {
-  bodyRows.forEach((row, rIdx) => {
-    let c = 1;
-    const cells = Array.from(
-      row.querySelectorAll('nile-grid-cell, nile-grid-header')
-    ) as HTMLElement[];
-    const rStart = rIdx + 1;
-    let maxRowspan = 1;
-
-    const bg = row.shadowRoot?.querySelector<HTMLElement>('[data-row-bg]');
-    if (bg) bg.style.gridColumn = `1 / -1`;
-
-    cells.forEach(cell => {
-      while (carryBody[c - 1] > 0) c++;
-      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
-      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
-
-      const cStart = c,
-        cEnd = c + colspan;
-      const rEnd = rStart + rowspan;
-
-      cell.style.gridColumn = `${cStart} / ${cEnd}`;
-      cell.style.gridRow = `${rStart} / ${rEnd}`;
-      (cell as any).dataset.cStart = String(cStart);
-
-      for (let k = 0; k < colspan; k++) {
-        const idx = c - 1 + k;
-        carryBody[idx] = Math.max(carryBody[idx] || 0, rowspan);
-      }
-      maxRowspan = Math.max(maxRowspan, rowspan);
-      c = cEnd;
-      colCount = Math.max(colCount, cEnd - 1);
-    });
-
-    if (bg) {
-      const rEnd = rStart + maxRowspan;
-      bg.style.gridRow = `${rStart} / ${rEnd}`;
-    }
-
-    for (let i = 0; i < carryBody.length; i++)
-      if (carryBody[i] > 0) carryBody[i]--;
-  });
-
-  return colCount;
-}
-
-function computeColumnWidths(
-  nileGrid: NileGrid,
-  colCount: number,
-  columnWidths: number[]
-) {
-  for (let col = 0; col < colCount; col++) {
-    const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;
-    columnWidths[col] =
-      nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);
-  }
-}
-
-export const layout = (
-  nileGrid: NileGrid,
-  slotEl: any,
-  ensureWidths: any,
-  rebuildTemplate: any,
-  applyTemplate: any,
-  columnWidths: any
-) => {
-  const head = getHead(slotEl);
-  const body = getBody(slotEl);
-  if (!body) return;
-
-  const headRows = head
-    ? (Array.from(head.querySelectorAll('nile-grid-row')) as HTMLElement[])
-    : [];
-  const bodyRows = Array.from(
-    body.querySelectorAll('nile-grid-row')
-  ) as HTMLElement[];
-
-  let colCount = 0;
-
-  colCount = computeHeadLayout(headRows, [], colCount);
-  colCount = computeBodyLayout(bodyRows, [], colCount);
-
-  computeColumnWidths(nileGrid, colCount, columnWidths);
-
-  ensureWidths(colCount);
-  body.style.gridAutoRows = 'auto';
-  body.style.overflowY = 'auto';
-  nileGrid.colTemplate = rebuildTemplate(colCount, columnWidths);
-  applyTemplate(head, body, nileGrid.colTemplate, nileGrid.colTemplate);
-};
+};