@aquera/nile-elements 1.5.1 → 1.5.3

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

@@ -1,14 +1,13 @@
 import { NileGrid } from './nile-grid';
 import { getHead, getBody } from './nile-grid.utils';
 import { getScrollbarComp } from './nile-grid.resize';
-import { computeColumnWidths } from './nile-grid.width';
+import { addVariablesValue, computeColumnWidths } from './nile-grid.width';
 import { NILE_GRID_HEAD_ITEM } from './types/nile-grid.enums';
 
 /**
  * @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
@@ -17,36 +16,79 @@ 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);
+  if (!head && !body) return;
+
+  let colCount = nileGrid.colCount || 0;
+  let headerChanged = false;
+
+  if (nileGrid.needsStructureLayout) {
+    headerChanged = true;
+    
+    nileGrid.headRows = head ? (Array.from(head.querySelectorAll('nile-grid-row')) as HTMLElement[]) : [];
+    colCount = 0;
+    if (nileGrid.headRows.length) {
+      colCount = computeHeadLayout(nileGrid, nileGrid.headRows, [], colCount, stickyLeftIndexes, stickyRightIndexes);
+    }
+
+    if (body) {
+      nileGrid.bodyRows = Array.from(body.querySelectorAll('nile-grid-row')) as HTMLElement[];
+      if (colCount) {
+        computeBodyLayout(nileGrid, nileGrid.bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes);
+      } else {
+        colCount = computeBodyLayout(nileGrid, nileGrid.bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes);
+      }
+    }
+
+    if (nileGrid.stickyLeftIndexes.length || nileGrid.stickyRightIndexes.length) {
+      cacheStickyEls(nileGrid);
+    } else {
+      nileGrid.stickyLeftHeadEls = [];
+      nileGrid.stickyRightHeadEls = [];
+      nileGrid.stickyLeftBodyEls = [];
+      nileGrid.stickyRightBodyEls = [];
+      nileGrid.shadowLeftVisibleSticky = false;
+      nileGrid.shadowRightVisibleSticky = false;
+    }
+
+    nileGrid.colCount = colCount;
+    nileGrid.needsStructureLayout = false;
+    nileGrid.needsSpanLayout = false;
+    nileGrid.needsWidthLayout = true;
+  } else if (nileGrid.needsSpanLayout && body) {
+    const bodyRows = nileGrid.bodyRows;
+    colCount = nileGrid.colCount || 0;
+    if (colCount) {
+      computeBodyLayout(nileGrid, bodyRows, [], colCount, stickyLeftIndexes, stickyRightIndexes);
+    }
+    nileGrid.needsSpanLayout = false;
   }
 
-  setTimeout(() => {
-    computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl, nileGrid.lockedWidthColumns); 
-  });
-  ensureWidths(colCount);
-  nileGrid.colTemplate = rebuildTemplate(colCount, nileGrid.columnWidths);
+  if (nileGrid.needsWidthLayout) {
+    colCount = nileGrid.colCount || colCount;
+    if (!colCount) return;
+
+    ensureWidths(colCount);
+    computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl, nileGrid.lockedWidthColumns, headerChanged);
+    addVariablesValue(nileGrid);
+    applyColumnsTemplate(nileGrid, nileGrid.columnWidths);
+    nileGrid.needsWidthLayout = false;
+  }
 };
 
+export function cacheStickyEls(nileGrid: NileGrid) {
+  const { head, body } = getHeadAndBody(nileGrid);
+
+  nileGrid.stickyLeftHeadEls = head ? Array.from(head.querySelectorAll('nile-grid-head-item[data-sticky="left"]')) : [];
+  nileGrid.stickyRightHeadEls = head ? Array.from(head.querySelectorAll('nile-grid-head-item[data-sticky="right"]')) : [];
+  nileGrid.stickyLeftBodyEls = body ? Array.from(body.querySelectorAll('nile-grid-cell-item[data-sticky="left"]')) : [];
+  nileGrid.stickyRightBodyEls = body ? Array.from(body.querySelectorAll('nile-grid-cell-item[data-sticky="right"]')) : [];
+}
+
 /** 
  * @param nileGrid The parent NileGrid instance
  * @param rows Array of grid row elements
@@ -65,7 +107,6 @@ function layoutRows(
   colCount: number,
   stickyLeftIndexes: number[],
   stickyRightIndexes: number[],
-  columnWidths: number[],
   opts: { itemSelector: string; useStickyAttr?: boolean; handleRowBg?: boolean }
 ): number {
   rows.forEach((row, rIdx) => {
@@ -78,7 +119,6 @@ function layoutRows(
       colCount,
       stickyLeftIndexes,
       stickyRightIndexes,
-      columnWidths,
       opts
     );
   });
@@ -93,7 +133,6 @@ function layoutRows(
  * @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
  */
@@ -105,12 +144,15 @@ function layoutSingleRow(
   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[];
+  const tag = opts.itemSelector.toLowerCase();
+  const items = Array.from(row.children).filter(
+    (child): child is HTMLElement =>
+      child.tagName.toLowerCase() === tag
+  );
 
   for (const el of items) {
     while ((carry[c - 1] || 0) > 0) c++;
@@ -123,7 +165,6 @@ function layoutSingleRow(
       colCount,
       stickyLeftIndexes,
       stickyRightIndexes,
-      columnWidths,
       opts
     ));
   }
@@ -140,7 +181,6 @@ function layoutSingleRow(
  * @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
  */
@@ -153,7 +193,6 @@ function layoutCell(
   colCount: number,
   stickyLeftIndexes: number[],
   stickyRightIndexes: number[],
-  columnWidths: number[],
   opts: { useStickyAttr?: boolean }
 ) {
   const colspan = Math.max(1, +el.getAttribute('colspan')! || 1);
@@ -163,14 +202,9 @@ function layoutCell(
   const cStart = c;
   const cEnd = c + colspan;
   setGridPosition(el, cStart, cEnd, rStart, rowspan);
-  handleSticky(
-    el,
-    cStart,
-    opts,
-    stickyLeftIndexes,
-    stickyRightIndexes,
-    columnWidths
-  );
+  if (opts.useStickyAttr || stickyLeftIndexes.length || stickyRightIndexes.length) {
+    handleSticky(el, cStart, opts, stickyLeftIndexes, stickyRightIndexes);
+  }
 
   for (let k = 0; k < colspan; k++) {
     carry[c - 1 + k] = Math.max(carry[c - 1 + k] || 0, rowspan);
@@ -195,10 +229,12 @@ function handleRowspan(nileGrid: NileGrid, el: HTMLElement, rowspan: number) {
     if (!nileGrid.headHeight) nileGrid.headHeight = el.getBoundingClientRect().height;
     el.style.height = `${(nileGrid.headHeight * rowspan) + (rowspan - 1)}px`;
     el.style.backgroundColor = "var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))";
+    el.style.backgroundColor = "var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))";
   } else {
     if (!nileGrid.cellHeight) nileGrid.cellHeight = el.getBoundingClientRect().height;
     el.style.height = `${(nileGrid.cellHeight * rowspan) + (rowspan - 1)}px`;
     el.style.backgroundColor = "var(--nile-colors-white-base, var(--ng-colors-bg-primary))";
+    el.style.backgroundColor = "var(--nile-colors-white-base, var(--ng-colors-bg-primary))";
   }
 }
 
@@ -228,7 +264,6 @@ function setGridPosition(
  * @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,
@@ -236,7 +271,6 @@ function handleSticky(
   opts: { useStickyAttr?: boolean },
   stickyLeftIndexes: number[],
   stickyRightIndexes: number[],
-  columnWidths: number[]
 ) {
   if (opts.useStickyAttr && el.getAttribute('sticky') === "left" && !stickyLeftIndexes.includes(cStart - 1)) {
     stickyLeftIndexes.push(cStart - 1);
@@ -244,7 +278,7 @@ function handleSticky(
   if (opts.useStickyAttr &&  el.getAttribute('sticky') === "right" && !stickyRightIndexes.includes(cStart - 1)) {
     stickyRightIndexes.push(cStart - 1);
   }
-  applySticky(el, cStart - 1, stickyLeftIndexes, stickyRightIndexes, columnWidths);
+  applySticky(el, cStart - 1, stickyLeftIndexes, stickyRightIndexes);
 }
 
 /**
@@ -263,14 +297,12 @@ function decrementCarry(carry: number[]) {
  * @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);
@@ -278,9 +310,9 @@ function applySticky(
 
   prepareStickyElement(el);
   if (onLeft && !onRight) {
-    applyLeftSticky(el, colIndex, stickyLeftIndexes, columnWidths);
+    applyLeftSticky(el, colIndex);
   } else {
-    applyRightSticky(el, colIndex, stickyRightIndexes, columnWidths);
+    applyRightSticky(el, colIndex);
   }
 }
 
@@ -289,7 +321,6 @@ function applySticky(
  */
 function prepareStickyElement(el: HTMLElement) {
   el.style.position = 'sticky';
-  el.style.zIndex = '1';
   el.style.left = '';
   el.style.right = '';
   el.removeAttribute('data-sticky');
@@ -299,54 +330,78 @@ function prepareStickyElement(el: HTMLElement) {
  * @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`;
+  if (el.tagName === NILE_GRID_HEAD_ITEM) {
+    el.style.backgroundColor = "var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))";
+  }
+  else {
+    el.style.backgroundColor = 'var(--nile-colors-white-base, var(--ng-colors-bg-primary))';
+  }
+  el.style.zIndex = '1';
+  el.style.left = `var(--sticky-left-${colIndex})`;
 }
 
 /**
  * @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`;
+  if (el.tagName === NILE_GRID_HEAD_ITEM) {
+    el.style.backgroundColor = "var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))";
+  }
+  else {
+    el.style.backgroundColor = 'var(--nile-colors-white-base, var(--ng-colors-bg-primary))';
+  }
+  el.style.zIndex = '1';
+  el.style.right = `var(--sticky-right-${colIndex})`;
 }
 
 /**
  * @param nileGrid Grid instance to sync shadows for
  */
 export function syncStickyShadows(nileGrid: NileGrid) {
+  if (!nileGrid.stickyLeftIndexes.length && !nileGrid.stickyRightIndexes.length) {
+    return;
+  }
+
   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);
+  if (
+    nileGrid.shadowLeftVisibleSticky === showRightOnLeftStickies &&
+    nileGrid.shadowRightVisibleSticky === showLeftOnRightStickies
+  ) {
+    return;
+  }
+
+  nileGrid.shadowLeftVisibleSticky = showRightOnLeftStickies;
+  nileGrid.shadowRightVisibleSticky = showLeftOnRightStickies;
+  
+
+  for (const el of nileGrid.stickyLeftHeadEls) {
+    el.classList.toggle('shadow-left', showRightOnLeftStickies);
+  }
+  for (const el of nileGrid.stickyLeftBodyEls) {
+    el.classList.toggle('shadow-left', showRightOnLeftStickies);
+  }
+  for (const el of nileGrid.stickyRightHeadEls) {
+    el.classList.toggle('shadow-right', showLeftOnRightStickies);
+  }
+  for (const el of nileGrid.stickyRightBodyEls) {
+    el.classList.toggle('shadow-right', showLeftOnRightStickies);
+  }
 }
 
+
 /**
  * @param nileGrid Grid instance
  * @returns Object containing booleans for left/right shadow visibility
@@ -359,47 +414,6 @@ function getShadowStates(nileGrid: NileGrid) {
   };
 }
 
-/**
- * @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>[])
@@ -407,7 +421,6 @@ export const rebuildTemplate = (
  * @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(
@@ -417,7 +430,6 @@ function computeHeadLayout(
   colCount: number,
   stickyLeftIndexes: number[],
   stickyRightIndexes: number[],
-  columnWidths: number[]
 ): number {
   return layoutRows(
     nileGrid,
@@ -426,7 +438,6 @@ function computeHeadLayout(
     colCount,
     stickyLeftIndexes,
     stickyRightIndexes,
-    columnWidths,
     {
       itemSelector: 'nile-grid-head-item',
       useStickyAttr: true,
@@ -442,7 +453,6 @@ function computeHeadLayout(
  * @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(
@@ -452,7 +462,6 @@ function computeBodyLayout(
   colCount: number,
   stickyLeftIndexes: number[],
   stickyRightIndexes: number[],
-  columnWidths: number[]
 ): number {
   return layoutRows(
     nileGrid,
@@ -461,7 +470,6 @@ function computeBodyLayout(
     colCount,
     stickyLeftIndexes,
     stickyRightIndexes,
-    columnWidths,
     {
       itemSelector: 'nile-grid-cell-item',
       useStickyAttr: false,
@@ -474,7 +482,6 @@ function computeBodyLayout(
  * @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,
@@ -491,24 +498,6 @@ export function applyColumnsTemplate(
   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

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

@@ -1,6 +1,6 @@
 import { NileGrid } from './nile-grid';
 import {  takeFromRight, giveToRight, totalReducibleRight } from './nile-grid.width';
-import { rebuildTemplate, syncStickyShadows, applyColumnsTemplate } from './nile-grid.layout';
+import { applyColumnsTemplate } from './nile-grid.layout';
 
 /**
  * @param minColumnWidth Minimum allowed column width
@@ -55,15 +55,14 @@ export function computeNewWidth(opts: {
   columnWidths: number[];
 }) {
   const { target, col, widthPx, floor, columnWidths } = opts;
+
+  // move this outside - getAttribute
   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)
-  );
+  const newW = Math.max(floor, Math.round(Number.isFinite(newWraw) ? newWraw : prevW));
   return { prevW, newW, delta0: newW - prevW };
 }
 
@@ -104,6 +103,7 @@ export function resizeWithScroll(opts: {
   newW: number;
 }) {
   const { grid, col, newW } = opts;
+  if (grid.lockedWidthColumns?.[col]) return;
   grid.columnWidths[col] = newW;
 }
 
@@ -129,10 +129,16 @@ export function applyAfterResize(grid: any, col: number) {
     grid.scrollHeight,
     grid.columnWidths
   );
-  grid.colTemplate = rebuildTemplate(
-    grid.columnWidths.length,
+  applyColumnsTemplate(grid, grid.columnWidths);
+}
+
+export function updateResizeGuides(grid: NileGrid, col: number) {
+  resizeLinesHandler(
+    grid.minColumnWidth,
+    grid.resizeStart,
+    grid.resizeEnd,
+    col,
+    grid.scrollHeight,
     grid.columnWidths
   );
-  syncStickyShadows(grid);
-  applyColumnsTemplate(grid, grid.columnWidths);
 }