@aquera/nile-elements 1.2.1 → 1.2.2

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

@@ -0,0 +1,514 @@
+import { NileGrid } from './nile-grid';
+import { HeadItemEl } from './nile-grid.types';
+import { getHead, getBody } from './nile-grid.utils';
+import { getScrollbarComp } from './nile-grid.resize';
+import { computeColumnWidths } from './nile-grid.width';
+
+/**
+ * @param nileGrid Parent NileGrid instance
+ * @param slotEl <slot> element hosting head/body
+ * @param ensureWidths Function to ensure columnWidths length matches colCount
+ * @param rebuildTemplate Function(colCount, widths) -> grid-template string
+ * @param stickyLeftIndexes Mutable list of left-sticky column indexes
+ * @param stickyRightIndexes Mutable list of right-sticky column indexes
+ * @returns void
+ */
+export const layout = (
+  nileGrid: NileGrid,
+  slotEl: any,
+  ensureWidths: any,
+  rebuildTemplate: any,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[]
+) => {
+  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(nileGrid, headRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
+  if (colCount) {
+    computeBodyLayout(nileGrid, bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
+  } else {
+    colCount = computeBodyLayout(nileGrid, bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes, nileGrid.columnWidths);
+  }
+
+  setTimeout(() => {
+    computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl); 
+  });
+  ensureWidths(colCount);
+  nileGrid.colTemplate = rebuildTemplate(colCount, nileGrid.columnWidths);
+};
+
+/** 
+ * @param nileGrid The parent NileGrid instance
+ * @param rows Array of grid row elements
+ * @param carry Array tracking rowspan, colspan continuation
+ * @param colCount Total column count
+ * @param stickyLeftIndexes List of sticky-left column indexes
+ * @param stickyRightIndexes List of sticky-right column indexes
+ * @param columnWidths Computed column widths
+ * @param opts Options controlling layout behavior
+ * @returns Final computed column count
+ */
+function layoutRows(
+  nileGrid: NileGrid,
+  rows: HTMLElement[],
+  carry: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[],
+  opts: { itemSelector: string; useStickyAttr?: boolean; handleRowBg?: boolean }
+): number {
+  rows.forEach((row, rIdx) => {
+    if (nileGrid.hoverable) row.setAttribute('hover', 'true');
+    colCount = layoutSingleRow(
+      nileGrid,
+      row,
+      rIdx,
+      carry,
+      colCount,
+      stickyLeftIndexes,
+      stickyRightIndexes,
+      columnWidths,
+      opts
+    );
+  });
+  return colCount;
+}
+
+/**
+ * @param nileGrid The grid element being processed
+ * @param row Single row element to layout
+ * @param rIdx Row index in the grid
+ * @param carry Rowspan tracking array
+ * @param colCount Current column count
+ * @param stickyLeftIndexes Sticky-left indexes
+ * @param stickyRightIndexes Sticky-right indexes
+ * @param columnWidths Column widths array
+ * @param opts Layout options
+ * @returns Updated column count
+ */
+function layoutSingleRow(
+  nileGrid: NileGrid,
+  row: HTMLElement,
+  rIdx: number,
+  carry: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[],
+  opts: { itemSelector: string; useStickyAttr?: boolean }
+): number {
+  let c = 1;
+  const rStart = rIdx + 1;
+  const items = [...row.querySelectorAll(opts.itemSelector)] as HTMLElement[];
+
+  for (const el of items) {
+    while ((carry[c - 1] || 0) > 0) c++;
+    ({ c, colCount } = layoutCell(
+      nileGrid,
+      el,
+      c,
+      rStart,
+      carry,
+      colCount,
+      stickyLeftIndexes,
+      stickyRightIndexes,
+      columnWidths,
+      opts
+    ));
+  }
+  decrementCarry(carry);
+  return colCount;
+}
+
+/**
+ * @param nileGrid The parent grid
+ * @param el Cell element being laid out
+ * @param c Current column index
+ * @param rStart Row start index
+ * @param carry Rowspan carry array
+ * @param colCount Current max column count
+ * @param stickyLeftIndexes Left sticky indexes
+ * @param stickyRightIndexes Right sticky indexes
+ * @param columnWidths Column widths
+ * @param opts Sticky and layout options
+ * @returns Updated column index and column count
+ */
+function layoutCell(
+  nileGrid: NileGrid,
+  el: HTMLElement,
+  c: number,
+  rStart: number,
+  carry: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[],
+  opts: { useStickyAttr?: boolean }
+) {
+  const colspan = Math.max(1, +el.getAttribute('colspan')! || 1);
+  const rowspan = Math.max(1, +el.getAttribute('rowspan')! || 1);
+  handleRowspan(nileGrid, el, rowspan);
+
+  const cStart = c;
+  const cEnd = c + colspan;
+  setGridPosition(el, cStart, cEnd, rStart, rowspan);
+  handleSticky(
+    el,
+    cStart,
+    opts,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    columnWidths
+  );
+
+  for (let k = 0; k < colspan; k++) {
+    carry[c - 1 + k] = Math.max(carry[c - 1 + k] || 0, rowspan);
+  }
+  return {
+    c: cEnd,
+    colCount: Math.max(colCount, cEnd - 1),
+  };
+}
+
+/** 
+ * @param nileGrid The grid container 
+ * @param el Element that spans multiple rows 
+ * @param rowspan Number of rows to span 
+ */
+function handleRowspan(nileGrid: NileGrid, el: HTMLElement, rowspan: number) {
+  if (rowspan <= 1) return;
+  nileGrid.cellHeight ||= el.getBoundingClientRect().height;
+  el.style.position = 'absolute';
+  el.style.height = `${nileGrid.cellHeight * rowspan}px`;
+  el.style.zIndex = '2';
+}
+
+/**
+ * @param el Grid item element
+ * @param cStart Starting column index
+ * @param cEnd Ending column index
+ * @param rStart Starting row index
+ * @param rowspan Row span value
+ */
+function setGridPosition(
+  el: HTMLElement,
+  cStart: number,
+  cEnd: number,
+  rStart: number,
+  rowspan: number
+) {
+  const rEnd = rStart + rowspan;
+  el.style.gridColumn = `${cStart} / ${cEnd}`;
+  el.style.gridRow = `${rStart} / ${rEnd}`;
+  (el as any).dataset.cStart = String(cStart);
+}
+
+/**
+ * @param el Grid item element
+ * @param cStart Column start index
+ * @param opts Sticky configuration options
+ * @param stickyLeftIndexes Left sticky indexes
+ * @param stickyRightIndexes Right sticky indexes
+ * @param columnWidths Array of column widths
+ */
+function handleSticky(
+  el: HTMLElement,
+  cStart: number,
+  opts: { useStickyAttr?: boolean },
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+) {
+  if (opts.useStickyAttr && el.getAttribute('sticky') === "left" && !stickyLeftIndexes.includes(cStart - 1)) {
+    stickyLeftIndexes.push(cStart - 1);
+  }
+  if (opts.useStickyAttr &&  el.getAttribute('sticky') === "right" && !stickyRightIndexes.includes(cStart - 1)) {
+    stickyRightIndexes.push(cStart - 1);
+  }
+  applySticky(el, cStart - 1, stickyLeftIndexes, stickyRightIndexes, columnWidths);
+}
+
+/**
+ * @param carry Rowspan tracking array
+ */
+function decrementCarry(carry: number[]) {
+  for (let i = 0; i < carry.length; i++) {
+    if (carry[i] > 0) {
+      carry[i]--;
+    }
+  }
+}
+
+/**
+ * @param el Target grid cell element
+ * @param colIndex Column index
+ * @param stickyLeftIndexes Sticky-left indexes
+ * @param stickyRightIndexes Sticky-right indexes
+ * @param columnWidths Column widths array
+ */
+function applySticky(
+  el: HTMLElement,
+  colIndex: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+) {
+  const onLeft = stickyLeftIndexes.includes(colIndex);
+  const onRight = stickyRightIndexes.includes(colIndex);
+  if (!onLeft && !onRight) return;
+
+  prepareStickyElement(el);
+  if (onLeft && !onRight) {
+    applyLeftSticky(el, colIndex, stickyLeftIndexes, columnWidths);
+  } else {
+    applyRightSticky(el, colIndex, stickyRightIndexes, columnWidths);
+  }
+}
+
+/**
+ * @param el Grid item element to prepare for sticky positioning
+ */
+function prepareStickyElement(el: HTMLElement) {
+  el.style.position = 'sticky';
+  el.style.zIndex = '2';
+  el.style.left = '';
+  el.style.right = '';
+  el.removeAttribute('data-sticky');
+}
+
+/**
+ * @param el Target element
+ * @param colIndex Column index
+ * @param stickyLeftIndexes Sticky-left column indexes
+ * @param columnWidths Column width array
+ */
+function applyLeftSticky(
+  el: HTMLElement,
+  colIndex: number,
+  stickyLeftIndexes: number[],
+  columnWidths: number[]
+) {
+  el.setAttribute('data-sticky', 'left');
+  const leftOrder = [...stickyLeftIndexes].sort((a, b) => a - b);
+  const pos = leftOrder.indexOf(colIndex);
+  const left = computeOffset(leftOrder, pos, columnWidths);
+  el.style.left = `${Math.max(0, Math.round(left))}px`;
+}
+
+/**
+ * @param el Target element
+ * @param colIndex Column index
+ * @param stickyRightIndexes Sticky-right indexes
+ * @param columnWidths Column widths array
+ */
+function applyRightSticky(
+  el: HTMLElement,
+  colIndex: number,
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+) {
+  el.setAttribute('data-sticky', 'right');
+  const rightOrder = [...stickyRightIndexes].sort((a, b) => b - a);
+  const pos = rightOrder.indexOf(colIndex);
+  const scrollbarComp = getScrollbarComp(el);
+  const right = computeOffset(rightOrder, pos, columnWidths, scrollbarComp);
+  el.style.right = `${Math.max(0, Math.round(right - 2))}px`;
+}
+
+/**
+ * @param nileGrid Grid instance to sync shadows for
+ */
+export function syncStickyShadows(nileGrid: NileGrid) {
+  const { showRightOnLeftStickies, showLeftOnRightStickies } = getShadowStates(nileGrid);
+  const { head, body } = getHeadAndBody(nileGrid);
+
+  toggleStickyShadow(head, 'nile-grid-head-item', 'left', 'shadow-right', showRightOnLeftStickies);
+  toggleStickyShadow(body, 'nile-grid-cell-item', 'left', 'shadow-right', showRightOnLeftStickies);
+  toggleStickyShadow(head, 'nile-grid-head-item', 'right', 'shadow-left', showLeftOnRightStickies);
+  toggleStickyShadow(body, 'nile-grid-cell-item', 'right', 'shadow-left', showLeftOnRightStickies);
+}
+
+/**
+ * @param nileGrid Grid instance
+ * @returns Object containing booleans for left/right shadow visibility
+ */
+function getShadowStates(nileGrid: NileGrid) {
+  const max = Math.max(0, nileGrid.scrollWidth - nileGrid.clientWidth);
+  return {
+    showRightOnLeftStickies: nileGrid.scrollLeft > 0,
+    showLeftOnRightStickies: nileGrid.scrollLeft < max
+  };
+}
+
+/**
+ * @param root Root element (head or body)
+ * @param tag Target tag selector
+ * @param side Sticky side ('left' or 'right')
+ * @param cls Shadow CSS class to toggle
+ * @param on Whether to apply or remove the shadow
+ */
+function toggleStickyShadow(
+  root: HTMLElement | undefined,
+  tag: string,
+  side: 'left' | 'right',
+  cls: string,
+  on: boolean
+) {
+  if (!root) return;
+  const sel = `${tag}[data-sticky="${side}"]`;
+  root.querySelectorAll<HTMLElement>(sel).forEach(el => el.classList.toggle(cls, on));
+}
+
+/** rebuildTemplate
+ * @param colCount Number of columns
+ * @param columnWidths Array of explicit column widths (px)
+ * @returns CSS grid-template-columns string
+ */
+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(' ');
+};
+
+/** computeHeadLayout
+ * @param nileGrid Grid instance
+ * @param headRows Header rows (<nile-grid-row>[])
+ * @param carryHead Rowspan carry tracking array
+ * @param colCount Current column count
+ * @param stickyLeftIndexes Left-sticky indexes
+ * @param stickyRightIndexes Right-sticky indexes
+ * @param columnWidths Column widths array
+ * @returns Final column count after header layout
+ */
+function computeHeadLayout(
+  nileGrid: NileGrid,
+  headRows: HTMLElement[],
+  carryHead: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+): number {
+  return layoutRows(
+    nileGrid,
+    headRows,
+    carryHead,
+    colCount,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    columnWidths,
+    {
+      itemSelector: 'nile-grid-head-item',
+      useStickyAttr: true,
+      handleRowBg: false,
+    }
+  );
+}
+
+/** computeBodyLayout
+ * @param nileGrid Grid instance
+ * @param bodyRows Body rows (<nile-grid-row>[])
+ * @param carryBody Rowspan carry tracking array
+ * @param colCount Current column count
+ * @param stickyLeftIndexes Left-sticky indexes
+ * @param stickyRightIndexes Right-sticky indexes
+ * @param columnWidths Column widths array
+ * @returns Final column count after body layout
+ */
+function computeBodyLayout(
+  nileGrid: NileGrid,
+  bodyRows: HTMLElement[],
+  carryBody: number[],
+  colCount: number,
+  stickyLeftIndexes: number[],
+  stickyRightIndexes: number[],
+  columnWidths: number[]
+): number {
+  return layoutRows(
+    nileGrid,
+    bodyRows,
+    carryBody,
+    colCount,
+    stickyLeftIndexes,
+    stickyRightIndexes,
+    columnWidths,
+    {
+      itemSelector: 'nile-grid-cell-item',
+      useStickyAttr: false,
+      handleRowBg: true,
+    }
+  );
+}
+
+/**
+ * @param nileGrid Grid container element
+ * @param colCount Total number of columns
+ * @param columnWidths Column width array
+ * @param headElement Header element for template update
+ */
+export function applyColumnsTemplate(
+  nileGrid: NileGrid,
+  columnWidths: number[]
+) {
+  const cols = columnWidths
+    .map((w, idx) => {
+      if (idx === columnWidths.length - 1) {
+        return `minmax(${Math.round(w)}px, auto)`;
+      }
+      return `${Math.max(0, Math.round(w))}px`;
+    })
+    .join(' ');
+  nileGrid.style.setProperty('--nile-grid-columns', cols);
+}
+
+/**
+ * @param order Array of sticky column indexes
+ * @param pos Current position within order
+ * @param widths Column widths
+ * @param base Base offset value
+ * @returns Computed pixel offset
+ */
+function computeOffset(
+  order: number[],
+  pos: number,
+  widths: number[],
+  base = 0
+) {
+  let total = base;
+  for (let i = 0; i < pos; i++) total += widths[order[i]] ?? 0;
+  return total;
+}
+
+/**
+ * @param nileGrid Grid instance
+ * @returns Head and body elements from the grid slot
+ */
+function getHeadAndBody(nileGrid: NileGrid) {
+  if (!nileGrid.shadowRoot) return { head: undefined, body: undefined };
+  const assigned = nileGrid.slotEl.assignedElements();
+  const find = (tag: string) =>
+    assigned.find(n => n.tagName.toLowerCase() === tag) as HTMLElement | undefined;
+  return { head: find('nile-grid-head'), body: find('nile-grid-body') };
+}

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

@@ -0,0 +1,143 @@
+import { NileGrid } from './nile-grid';
+import { HeadItemEl } from './nile-grid.types';
+import { totalReducible, takeFromRight, giveToRight } from './nile-grid.width';
+import { rebuildTemplate, syncStickyShadows, applyColumnsTemplate } from './nile-grid.layout';
+
+/**
+ * @param minColumnWidth Minimum allowed column width
+ * @param resizeStart Guide line element (start)
+ * @param resizeEnd Guide line element (end)
+ * @param col Active column index
+ * @param scrollHeight Height to apply to guides
+ * @param columnWidths Current column widths
+ * @returns void
+ */
+export const resizeLinesHandler = (
+  minColumnWidth: number,
+  resizeStart: HTMLElement,
+  resizeEnd: HTMLElement,
+  col: number,
+  scrollHeight: number,
+  columnWidths: number[],
+) => {
+  resizeStart.style.display = 'block';
+  resizeEnd.style.display = 'block';
+  resizeStart.style.height = scrollHeight + 'px';
+  resizeEnd.style.height = scrollHeight + 'px';
+  const floor = minColumnWidth;
+  const safe = (n: number) => Math.max(0, Math.round(n || 0));
+  const sum = (arr: number[], endExclusive: number) => safe(arr.slice(0, Math.max(0, endExclusive)).reduce((a, b) => a + (b || 0), 0));
+
+  const totalGridWidth = safe(columnWidths.reduce((a, b) => a + (b || 0), 0));
+  const baseLeft = sum(columnWidths, col);
+  const appliedColWidth = safe(Math.max(floor, columnWidths[col] ?? floor));
+  let handleLeft = baseLeft + appliedColWidth;
+
+  const minEdge = baseLeft + floor;
+  const maxEdge = totalGridWidth;
+  handleLeft = Math.min(Math.max(handleLeft, minEdge), maxEdge);
+  handleLeft = Math.max(handleLeft, 20);
+
+  resizeStart.style.left = `${handleLeft - 6}px`;
+  resizeEnd.style.left = `${handleLeft - 2}px`;
+};
+
+/**
+ * @param targetWidth New computed width in pixels
+ * @param min Minimum allowed width
+ * @param max Maximum allowed width
+ * @returns Adjusted column width
+ */
+export function computeNewWidth(opts: {
+  target: HTMLElement;
+  col: number;
+  widthPx: number;
+  floor: number;
+  columnWidths: number[];
+}) {
+  const { target, col, widthPx, floor, columnWidths } = opts;
+  const hasSpan =
+    !!target.getAttribute('colspan') &&
+    parseInt(target.getAttribute('colspan')!, 10) > 1;
+  const prevW = columnWidths[col] ?? floor;
+  const newWraw = hasSpan ? widthPx - (columnWidths[col - 1] ?? 0) : widthPx;
+  const newW = Math.max(
+    floor,
+    Math.round(Number.isFinite(newWraw) ? newWraw : prevW)
+  );
+  return { prevW, newW, delta0: newW - prevW };
+}
+
+/**
+ * @param columnWidths Current widths array
+ * @param containerWidth Container total width
+ */
+export function resizeNoScroll(opts: {
+  grid: NileGrid;
+  col: number;
+  prevW: number;
+  newW: number;
+  floor: number;
+}) {
+  const { grid, col, prevW, newW, floor } = opts;
+  let delta = newW - prevW;
+
+  if (delta > 0) {
+    const rightReducible = totalReducible(grid.columnWidths, col + 1, floor);
+    if (rightReducible <= 0) return;
+    delta = Math.min(delta, rightReducible);
+    grid.columnWidths[col] = prevW + delta;
+    if (delta > 0) takeFromRight(grid.columnWidths, col + 1, delta, floor);
+  } else {
+    if (col === grid.columnWidths.length - 1) return;
+    const shrink = -delta;
+    const newColW = Math.max(floor, prevW - shrink);
+    const actualShrink = prevW - newColW;
+    grid.columnWidths[col] = newColW;
+    const remaining = giveToRight(grid.columnWidths, col + 1, actualShrink);
+    if (remaining > 0) grid.columnWidths[col] = prevW;
+  }
+}
+
+/**
+ * @param columnWidths Current widths
+ * @param containerWidth Container width
+ */
+export function resizeWithScroll(opts: {
+  grid: NileGrid;
+  col: number;
+  newW: number;
+}) {
+  const { grid, col, newW } = opts;
+  grid.columnWidths[col] = newW;
+}
+
+/**
+ * @param el Target element within grid
+ * @returns Scrollbar width compensation value
+ */
+export function getScrollbarComp(el: HTMLElement) {
+  const scroller = el.closest('nile-grid') as HTMLElement | null;
+  return scroller ? scroller.offsetWidth - scroller.clientWidth : 0;
+}
+
+/**
+ * @param nileGrid The parent grid
+ * @param columnWidths New column width array
+ */
+export function applyAfterResize(grid: any, col: number) {
+  resizeLinesHandler(
+    grid.minColumnWidth,
+    grid.resizeStart,
+    grid.resizeEnd,
+    col,
+    grid.scrollHeight,
+    grid.columnWidths
+  );
+  grid.colTemplate = rebuildTemplate(
+    grid.columnWidths.length,
+    grid.columnWidths
+  );
+  syncStickyShadows(grid);
+  applyColumnsTemplate(grid, grid.columnWidths);
+}