@lensui/lens-table 0.1.88 → 0.1.89

package/dist/index.cjs

@@ -1183,6 +1183,34 @@ function getAnimatedRowDragOffset(preview, rowIndex, rowHeight) {
   const progress = Math.max(0, Math.min(1, preview.progress ?? 1));
   return startOffset + (targetOffset - startOffset) * progress;
 }
+function getAnimatedRowDragGapRanges(preview, rowCount, rowHeight, bodyTop, scrollTop) {
+  if (!preview || rowCount <= 0 || rowHeight <= 0) return [];
+  const affectedIndices = [preview.sourceIndex, preview.targetIndex];
+  preview.fromOffsets?.forEach((offset, rowIndex) => {
+    if (Math.abs(offset) > 0.01) affectedIndices.push(rowIndex);
+  });
+  const startIndex = Math.max(0, Math.min(...affectedIndices));
+  const endIndex = Math.min(rowCount - 1, Math.max(...affectedIndices));
+  const regionTop = bodyTop + startIndex * rowHeight - scrollTop;
+  const regionBottom = bodyTop + (endIndex + 1) * rowHeight - scrollTop;
+  const occupied = [];
+  for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex += 1) {
+    if (rowIndex === preview.sourceIndex) continue;
+    const top = bodyTop + rowIndex * rowHeight - scrollTop + getAnimatedRowDragOffset(preview, rowIndex, rowHeight);
+    occupied.push({ top, bottom: top + rowHeight });
+  }
+  occupied.sort((left, right) => left.top - right.top);
+  const gaps = [];
+  let cursor = regionTop;
+  for (const interval of occupied) {
+    const top = Math.max(regionTop, interval.top);
+    const bottom = Math.min(regionBottom, interval.bottom);
+    if (top > cursor + 0.01) gaps.push({ top: cursor, bottom: top });
+    cursor = Math.max(cursor, bottom);
+  }
+  if (cursor < regionBottom - 0.01) gaps.push({ top: cursor, bottom: regionBottom });
+  return gaps;
+}
 function paintGrid(options) {
   const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
@@ -1344,7 +1372,7 @@ function paintGrid(options) {
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
-        if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
+        if (!horizontalBorderless && rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
@@ -1478,6 +1506,26 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
+  if (rowDragPreview && !verticalBorderless) {
+    const gapRanges = getAnimatedRowDragGapRanges(
+      rowDragPreview,
+      rows.length,
+      rowHeight,
+      bodyTop,
+      scrollTop
+    );
+    ctx.fillStyle = colors.grid;
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+      if (frameBorderless && columnIndex === columns.length - 1) continue;
+      const x = getColumnX(columnIndex) + metrics[columnIndex].width - 1;
+      if (columns[columnIndex].fixed === void 0 && (x < leftFixedWidth || x >= rightFixedLeft)) continue;
+      for (const gap of gapRanges) {
+        const top = Math.max(bodyTop, gap.top);
+        const bottom = Math.min(height, gap.bottom);
+        if (bottom > top) ctx.fillRect(x, top, 1, bottom - top);
+      }
+    }
+  }
   if (extendVerticalGridLines) {
     const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
     const extensionHeight = Math.max(0, height - extensionTop);
@@ -3446,9 +3494,10 @@ function TableInner({
   const setRowDragGuide = (0, import_react8.useCallback)((y) => {
     const guide = rowDragGuideRef.current;
     if (!guide) return;
-    guide.style.display = y === null ? "none" : "block";
-    if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
-  }, []);
+    const visibleY = horizontalBorderless ? null : y;
+    guide.style.display = visibleY === null ? "none" : "block";
+    if (visibleY !== null) guide.style.transform = `translateY(${Math.round(visibleY)}px)`;
+  }, [horizontalBorderless]);
   const locateRow = (0, import_react8.useCallback)((clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;

package/dist/index.css

@@ -1653,6 +1653,10 @@
   pointer-events: none;
   transform: translateY(-1px);
 }
+.rvg-root.is-horizontal-borderless .rvg-row-drag-preview {
+  border-top: 0;
+  border-bottom: 0;
+}
 .rvg-row-drag-preview.is-striped {
   background: var(--rvg-color-stripe);
 }

package/dist/index.js

@@ -1153,6 +1153,34 @@ function getAnimatedRowDragOffset(preview, rowIndex, rowHeight) {
   const progress = Math.max(0, Math.min(1, preview.progress ?? 1));
   return startOffset + (targetOffset - startOffset) * progress;
 }
+function getAnimatedRowDragGapRanges(preview, rowCount, rowHeight, bodyTop, scrollTop) {
+  if (!preview || rowCount <= 0 || rowHeight <= 0) return [];
+  const affectedIndices = [preview.sourceIndex, preview.targetIndex];
+  preview.fromOffsets?.forEach((offset, rowIndex) => {
+    if (Math.abs(offset) > 0.01) affectedIndices.push(rowIndex);
+  });
+  const startIndex = Math.max(0, Math.min(...affectedIndices));
+  const endIndex = Math.min(rowCount - 1, Math.max(...affectedIndices));
+  const regionTop = bodyTop + startIndex * rowHeight - scrollTop;
+  const regionBottom = bodyTop + (endIndex + 1) * rowHeight - scrollTop;
+  const occupied = [];
+  for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex += 1) {
+    if (rowIndex === preview.sourceIndex) continue;
+    const top = bodyTop + rowIndex * rowHeight - scrollTop + getAnimatedRowDragOffset(preview, rowIndex, rowHeight);
+    occupied.push({ top, bottom: top + rowHeight });
+  }
+  occupied.sort((left, right) => left.top - right.top);
+  const gaps = [];
+  let cursor = regionTop;
+  for (const interval of occupied) {
+    const top = Math.max(regionTop, interval.top);
+    const bottom = Math.min(regionBottom, interval.bottom);
+    if (top > cursor + 0.01) gaps.push({ top: cursor, bottom: top });
+    cursor = Math.max(cursor, bottom);
+  }
+  if (cursor < regionBottom - 0.01) gaps.push({ top: cursor, bottom: regionBottom });
+  return gaps;
+}
 function paintGrid(options) {
   const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
@@ -1314,7 +1342,7 @@ function paintGrid(options) {
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
-        if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
+        if (!horizontalBorderless && rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
@@ -1448,6 +1476,26 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
+  if (rowDragPreview && !verticalBorderless) {
+    const gapRanges = getAnimatedRowDragGapRanges(
+      rowDragPreview,
+      rows.length,
+      rowHeight,
+      bodyTop,
+      scrollTop
+    );
+    ctx.fillStyle = colors.grid;
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+      if (frameBorderless && columnIndex === columns.length - 1) continue;
+      const x = getColumnX(columnIndex) + metrics[columnIndex].width - 1;
+      if (columns[columnIndex].fixed === void 0 && (x < leftFixedWidth || x >= rightFixedLeft)) continue;
+      for (const gap of gapRanges) {
+        const top = Math.max(bodyTop, gap.top);
+        const bottom = Math.min(height, gap.bottom);
+        if (bottom > top) ctx.fillRect(x, top, 1, bottom - top);
+      }
+    }
+  }
   if (extendVerticalGridLines) {
     const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
     const extensionHeight = Math.max(0, height - extensionTop);
@@ -3416,9 +3464,10 @@ function TableInner({
   const setRowDragGuide = useCallback3((y) => {
     const guide = rowDragGuideRef.current;
     if (!guide) return;
-    guide.style.display = y === null ? "none" : "block";
-    if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
-  }, []);
+    const visibleY = horizontalBorderless ? null : y;
+    guide.style.display = visibleY === null ? "none" : "block";
+    if (visibleY !== null) guide.style.transform = `translateY(${Math.round(visibleY)}px)`;
+  }, [horizontalBorderless]);
   const locateRow = useCallback3((clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.88",
+  "version": "0.1.89",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",