@lensui/lens-table 0.1.82 → 0.1.83

package/dist/index.cjs

@@ -1144,6 +1144,24 @@ function ellipsizeText(context, text, maxWidth) {
   }
   return `${text.slice(0, start)}${ellipsis}`;
 }
+function getSelectionOutlineBounds({
+  left,
+  right,
+  top,
+  bottom,
+  horizontalStart,
+  horizontalEnd,
+  verticalStart,
+  verticalEnd,
+  borderWidth = 2
+}) {
+  return {
+    left: Math.max(left - borderWidth, horizontalStart - borderWidth),
+    right: Math.min(right + 1, horizontalEnd + 1),
+    top: Math.max(top - borderWidth, verticalStart - borderWidth),
+    bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
+  };
+}
 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;
@@ -1632,51 +1650,65 @@ function paintGrid(options) {
       const visibleRight = x + selectionWidth;
       const visibleBottom = y + selectionHeight;
       const selectionTop = fixedHeader ? bodyTop : 0;
-      const selectionClipTop = selectionTop;
       const hiddenAboveHeader = visibleBottom <= selectionTop;
       const hiddenBelowViewport = y >= height;
       const hiddenBehindLeft = !isFixed && visibleRight <= visibleLeft;
       const hiddenBehindRight = !isFixed && x >= selectionAreaRight;
-      const leftMarkerX = Math.max(0, leftFixedWidth);
+      const leftMarkerX = leftFixedWidth - borderWidth;
+      const rightMarkerX = selectionAreaRight - 1;
+      const topMarkerY = selectionTop - borderWidth;
+      const bottomMarkerY = height;
       if ((hiddenAboveHeader || hiddenBelowViewport) && (hiddenBehindLeft || hiddenBehindRight)) {
         const markerSize = 2;
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
-        const markerY = hiddenAboveHeader ? selectionClipTop : height - markerSize;
+        const markerX = hiddenBehindLeft ? leftMarkerX : rightMarkerX;
+        const markerY = hiddenAboveHeader ? topMarkerY : bottomMarkerY;
         ctx.fillStyle = colors.selection;
         ctx.fillRect(markerX, markerY, markerSize, markerSize);
         return;
       }
+      const outline = getSelectionOutlineBounds({
+        left: x,
+        right: visibleRight,
+        top: y,
+        bottom: visibleBottom,
+        horizontalStart: visibleLeft,
+        horizontalEnd: selectionAreaRight,
+        verticalStart: selectionTop,
+        verticalEnd: height,
+        borderWidth
+      });
       ctx.save();
       ctx.beginPath();
-      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth);
+      const clipLeft = Math.max(0, outline.left);
       const clipRight = Math.min(width, selectionAreaRight + 1);
-      ctx.rect(clipLeft, selectionClipTop, clipRight - clipLeft, height - selectionClipTop);
+      const clipTop = Math.max(0, outline.top);
+      ctx.rect(clipLeft, clipTop, clipRight - clipLeft, height - clipTop);
       ctx.clip();
       ctx.fillStyle = colors.selection;
       if (hiddenAboveHeader) {
-        const markerLeft = Math.max(x - borderWidth, visibleLeft - 1);
-        const markerRight = Math.min(visibleRight + 1, selectionAreaRight);
-        if (markerRight > markerLeft) ctx.fillRect(markerLeft, selectionClipTop, markerRight - markerLeft, borderWidth);
+        const markerLeft = Math.max(x - borderWidth, visibleLeft - borderWidth);
+        const markerRight = Math.min(visibleRight + 1, selectionAreaRight + 1);
+        if (markerRight > markerLeft) ctx.fillRect(markerLeft, topMarkerY, markerRight - markerLeft, borderWidth);
       }
       if (hiddenBelowViewport) {
-        const markerLeft = Math.max(x - borderWidth, visibleLeft - 1);
-        const markerRight = Math.min(visibleRight + 1, selectionAreaRight);
-        if (markerRight > markerLeft) ctx.fillRect(markerLeft, height - borderWidth, markerRight - markerLeft, borderWidth);
+        const markerLeft = Math.max(x - borderWidth, visibleLeft - borderWidth);
+        const markerRight = Math.min(visibleRight + 1, selectionAreaRight + 1);
+        if (markerRight > markerLeft) ctx.fillRect(markerLeft, bottomMarkerY, markerRight - markerLeft, borderWidth);
       }
       if (hiddenBehindLeft || hiddenBehindRight) {
-        const markerTop = Math.max(y - borderWidth, selectionTop);
-        const markerBottom = Math.min(y + selectionHeight + 1, height);
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
+        const markerTop = Math.max(y - borderWidth, selectionTop - borderWidth);
+        const markerBottom = Math.min(y + selectionHeight + borderWidth, height + borderWidth);
+        const markerX = hiddenBehindLeft ? leftMarkerX : rightMarkerX;
         ctx.fillRect(markerX, markerTop, borderWidth, Math.max(0, markerBottom - markerTop));
       }
       if (hiddenAboveHeader || hiddenBelowViewport || hiddenBehindLeft || hiddenBehindRight) {
         ctx.restore();
         return;
       }
-      const borderLeft = x <= 0 ? 0 : Math.max(x - borderWidth, visibleLeft);
-      const borderRight = Math.min(x + selectionWidth - 1, selectionAreaRight - borderWidth, width - borderWidth);
-      const borderTop = Math.max(y - borderWidth, selectionClipTop);
-      const borderBottom = Math.min(y + selectionHeight, height - borderWidth);
+      const borderLeft = outline.left;
+      const borderRight = outline.right - borderWidth;
+      const borderTop = outline.top;
+      const borderBottom = outline.bottom - borderWidth;
       const borderOuterWidth = borderRight + borderWidth - borderLeft;
       ctx.fillRect(borderLeft, borderTop, borderOuterWidth, borderWidth);
       ctx.fillRect(borderLeft, borderBottom, borderOuterWidth, borderWidth);
@@ -2696,14 +2728,17 @@ function TableInner({
     const cornerLength = 10;
     const hitSlop = 6;
     const targetSize = borderWidth + hitSlop * 2;
-    const rightBoundaryInset = rightFixedWidth > 0 && hasVerticalBorders ? 1 : 0;
-    const markerX = hiddenLeft ? horizontalStart : horizontalEnd - borderWidth - rightBoundaryInset;
-    const markerY = hiddenTop ? verticalStart : renderHeight - borderWidth;
+    const leftBoundary = horizontalStart - borderWidth;
+    const rightBoundary = horizontalEnd - 1;
+    const topBoundary = verticalStart - borderWidth;
+    const bottomBoundary = renderHeight;
+    const markerX = hiddenLeft ? leftBoundary : rightBoundary;
+    const markerY = hiddenTop ? topBoundary : bottomBoundary;
     if (hiddenLeft || hiddenRight) {
-      let markerTop = Math.max(rawTop - borderWidth, verticalStart);
-      let markerBottom = Math.min(rawBottom + 1, renderHeight);
-      const topClip = Math.max(0, verticalStart - (rawTop - borderWidth));
-      const bottomClip = Math.max(0, rawBottom + 1 - renderHeight);
+      const markerTop = Math.max(rawTop - borderWidth, topBoundary);
+      const markerBottom = Math.min(rawBottom + borderWidth, renderHeight + borderWidth);
+      const topClip = Math.max(0, verticalStart - rawTop);
+      const bottomClip = Math.max(0, rawBottom - renderHeight);
       if (topClip > 0 || bottomClip > 0) {
         const foldAtTop = topClip > 0;
         const fold = Math.min(cornerLength, foldAtTop ? topClip : bottomClip);
@@ -2712,7 +2747,7 @@ function TableInner({
           const cornerHeight = Math.max(cornerLength, markerBottom - markerTop);
           const cornerOnLeft = hiddenLeft;
           const shapeLeft = cornerOnLeft ? markerX : markerX + borderWidth - cornerWidth;
-          const shapeTop = foldAtTop ? verticalStart : renderHeight - cornerHeight;
+          const shapeTop = foldAtTop ? topBoundary : renderHeight + borderWidth - cornerHeight;
           return {
             side: `${foldAtTop ? "top" : "bottom"}-${cornerOnLeft ? "left" : "right"}`,
             orientation: "corner",
@@ -2739,19 +2774,19 @@ function TableInner({
         }
       };
     }
-    const horizontalMarkerEnd = horizontalEnd - rightBoundaryInset;
-    let markerLeft = Math.max(rawLeft - borderWidth, horizontalStart);
-    let markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
-    const leftClip = Math.max(0, horizontalStart - (rawLeft - borderWidth));
-    const rightClip = Math.max(0, rawRight + 1 - horizontalMarkerEnd);
+    const horizontalMarkerEnd = horizontalEnd + 1;
+    const markerLeft = Math.max(rawLeft - borderWidth, leftBoundary);
+    const markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
+    const leftClip = Math.max(0, horizontalStart - rawLeft);
+    const rightClip = Math.max(0, rawRight - horizontalEnd);
     if (leftClip > 0 || rightClip > 0) {
       const foldAtLeft = leftClip > 0;
       const fold = Math.min(cornerLength, foldAtLeft ? leftClip : rightClip);
       if (fold > borderWidth) {
         const cornerWidth = Math.max(cornerLength, markerRight - markerLeft);
         const cornerHeight = fold;
-        const shapeLeft = foldAtLeft ? horizontalStart : horizontalMarkerEnd - cornerWidth;
-        const shapeTop = hiddenTop ? verticalStart : renderHeight - cornerHeight;
+        const shapeLeft = foldAtLeft ? leftBoundary : horizontalMarkerEnd - cornerWidth;
+        const shapeTop = hiddenTop ? topBoundary : renderHeight + borderWidth - cornerHeight;
         return {
           side: `${hiddenTop ? "top" : "bottom"}-${foldAtLeft ? "left" : "right"}`,
           orientation: "corner",
@@ -2777,7 +2812,7 @@ function TableInner({
         height: targetSize
       }
     };
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
   const syncSelectionEdgeTarget = (0, import_react8.useCallback)((scrollLeft, scrollTop) => {
     const target = selectionEdgeTargetRef.current;
     if (!target) return;
@@ -3147,11 +3182,20 @@ function TableInner({
         if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) {
           focus.style.display = "none";
         } else {
-          const borderWidth = 2;
-          const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
-          const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-          const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-          const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
+          const bounds = getSelectionOutlineBounds({
+            left: rawLeft,
+            right: rawRight,
+            top: rawTop,
+            bottom: rawBottom,
+            horizontalStart,
+            horizontalEnd,
+            verticalStart,
+            verticalEnd: renderHeight
+          });
+          const left = Math.round(bounds.left);
+          const right = Math.round(bounds.right);
+          const top = Math.round(bounds.top);
+          const bottom = Math.round(bounds.bottom);
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -4687,11 +4731,20 @@ function TableInner({
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
     if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom + dragOffset <= verticalStart || rawTop + dragOffset >= renderHeight) return null;
-    const borderWidth = 2;
-    const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
-    const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-    const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-    const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
+    const bounds = getSelectionOutlineBounds({
+      left: rawLeft,
+      right: rawRight,
+      top: rawTop,
+      bottom: rawBottom,
+      horizontalStart,
+      horizontalEnd,
+      verticalStart,
+      verticalEnd: renderHeight
+    });
+    const left = Math.round(bounds.left);
+    const right = Math.round(bounds.right);
+    const top = Math.round(bounds.top);
+    const bottom = Math.round(bounds.bottom);
     return {
       left,
       top,

package/dist/index.js

@@ -1114,6 +1114,24 @@ function ellipsizeText(context, text, maxWidth) {
   }
   return `${text.slice(0, start)}${ellipsis}`;
 }
+function getSelectionOutlineBounds({
+  left,
+  right,
+  top,
+  bottom,
+  horizontalStart,
+  horizontalEnd,
+  verticalStart,
+  verticalEnd,
+  borderWidth = 2
+}) {
+  return {
+    left: Math.max(left - borderWidth, horizontalStart - borderWidth),
+    right: Math.min(right + 1, horizontalEnd + 1),
+    top: Math.max(top - borderWidth, verticalStart - borderWidth),
+    bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
+  };
+}
 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;
@@ -1602,51 +1620,65 @@ function paintGrid(options) {
       const visibleRight = x + selectionWidth;
       const visibleBottom = y + selectionHeight;
       const selectionTop = fixedHeader ? bodyTop : 0;
-      const selectionClipTop = selectionTop;
       const hiddenAboveHeader = visibleBottom <= selectionTop;
       const hiddenBelowViewport = y >= height;
       const hiddenBehindLeft = !isFixed && visibleRight <= visibleLeft;
       const hiddenBehindRight = !isFixed && x >= selectionAreaRight;
-      const leftMarkerX = Math.max(0, leftFixedWidth);
+      const leftMarkerX = leftFixedWidth - borderWidth;
+      const rightMarkerX = selectionAreaRight - 1;
+      const topMarkerY = selectionTop - borderWidth;
+      const bottomMarkerY = height;
       if ((hiddenAboveHeader || hiddenBelowViewport) && (hiddenBehindLeft || hiddenBehindRight)) {
         const markerSize = 2;
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
-        const markerY = hiddenAboveHeader ? selectionClipTop : height - markerSize;
+        const markerX = hiddenBehindLeft ? leftMarkerX : rightMarkerX;
+        const markerY = hiddenAboveHeader ? topMarkerY : bottomMarkerY;
         ctx.fillStyle = colors.selection;
         ctx.fillRect(markerX, markerY, markerSize, markerSize);
         return;
       }
+      const outline = getSelectionOutlineBounds({
+        left: x,
+        right: visibleRight,
+        top: y,
+        bottom: visibleBottom,
+        horizontalStart: visibleLeft,
+        horizontalEnd: selectionAreaRight,
+        verticalStart: selectionTop,
+        verticalEnd: height,
+        borderWidth
+      });
       ctx.save();
       ctx.beginPath();
-      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth);
+      const clipLeft = Math.max(0, outline.left);
       const clipRight = Math.min(width, selectionAreaRight + 1);
-      ctx.rect(clipLeft, selectionClipTop, clipRight - clipLeft, height - selectionClipTop);
+      const clipTop = Math.max(0, outline.top);
+      ctx.rect(clipLeft, clipTop, clipRight - clipLeft, height - clipTop);
       ctx.clip();
       ctx.fillStyle = colors.selection;
       if (hiddenAboveHeader) {
-        const markerLeft = Math.max(x - borderWidth, visibleLeft - 1);
-        const markerRight = Math.min(visibleRight + 1, selectionAreaRight);
-        if (markerRight > markerLeft) ctx.fillRect(markerLeft, selectionClipTop, markerRight - markerLeft, borderWidth);
+        const markerLeft = Math.max(x - borderWidth, visibleLeft - borderWidth);
+        const markerRight = Math.min(visibleRight + 1, selectionAreaRight + 1);
+        if (markerRight > markerLeft) ctx.fillRect(markerLeft, topMarkerY, markerRight - markerLeft, borderWidth);
       }
       if (hiddenBelowViewport) {
-        const markerLeft = Math.max(x - borderWidth, visibleLeft - 1);
-        const markerRight = Math.min(visibleRight + 1, selectionAreaRight);
-        if (markerRight > markerLeft) ctx.fillRect(markerLeft, height - borderWidth, markerRight - markerLeft, borderWidth);
+        const markerLeft = Math.max(x - borderWidth, visibleLeft - borderWidth);
+        const markerRight = Math.min(visibleRight + 1, selectionAreaRight + 1);
+        if (markerRight > markerLeft) ctx.fillRect(markerLeft, bottomMarkerY, markerRight - markerLeft, borderWidth);
       }
       if (hiddenBehindLeft || hiddenBehindRight) {
-        const markerTop = Math.max(y - borderWidth, selectionTop);
-        const markerBottom = Math.min(y + selectionHeight + 1, height);
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
+        const markerTop = Math.max(y - borderWidth, selectionTop - borderWidth);
+        const markerBottom = Math.min(y + selectionHeight + borderWidth, height + borderWidth);
+        const markerX = hiddenBehindLeft ? leftMarkerX : rightMarkerX;
         ctx.fillRect(markerX, markerTop, borderWidth, Math.max(0, markerBottom - markerTop));
       }
       if (hiddenAboveHeader || hiddenBelowViewport || hiddenBehindLeft || hiddenBehindRight) {
         ctx.restore();
         return;
       }
-      const borderLeft = x <= 0 ? 0 : Math.max(x - borderWidth, visibleLeft);
-      const borderRight = Math.min(x + selectionWidth - 1, selectionAreaRight - borderWidth, width - borderWidth);
-      const borderTop = Math.max(y - borderWidth, selectionClipTop);
-      const borderBottom = Math.min(y + selectionHeight, height - borderWidth);
+      const borderLeft = outline.left;
+      const borderRight = outline.right - borderWidth;
+      const borderTop = outline.top;
+      const borderBottom = outline.bottom - borderWidth;
       const borderOuterWidth = borderRight + borderWidth - borderLeft;
       ctx.fillRect(borderLeft, borderTop, borderOuterWidth, borderWidth);
       ctx.fillRect(borderLeft, borderBottom, borderOuterWidth, borderWidth);
@@ -2666,14 +2698,17 @@ function TableInner({
     const cornerLength = 10;
     const hitSlop = 6;
     const targetSize = borderWidth + hitSlop * 2;
-    const rightBoundaryInset = rightFixedWidth > 0 && hasVerticalBorders ? 1 : 0;
-    const markerX = hiddenLeft ? horizontalStart : horizontalEnd - borderWidth - rightBoundaryInset;
-    const markerY = hiddenTop ? verticalStart : renderHeight - borderWidth;
+    const leftBoundary = horizontalStart - borderWidth;
+    const rightBoundary = horizontalEnd - 1;
+    const topBoundary = verticalStart - borderWidth;
+    const bottomBoundary = renderHeight;
+    const markerX = hiddenLeft ? leftBoundary : rightBoundary;
+    const markerY = hiddenTop ? topBoundary : bottomBoundary;
     if (hiddenLeft || hiddenRight) {
-      let markerTop = Math.max(rawTop - borderWidth, verticalStart);
-      let markerBottom = Math.min(rawBottom + 1, renderHeight);
-      const topClip = Math.max(0, verticalStart - (rawTop - borderWidth));
-      const bottomClip = Math.max(0, rawBottom + 1 - renderHeight);
+      const markerTop = Math.max(rawTop - borderWidth, topBoundary);
+      const markerBottom = Math.min(rawBottom + borderWidth, renderHeight + borderWidth);
+      const topClip = Math.max(0, verticalStart - rawTop);
+      const bottomClip = Math.max(0, rawBottom - renderHeight);
       if (topClip > 0 || bottomClip > 0) {
         const foldAtTop = topClip > 0;
         const fold = Math.min(cornerLength, foldAtTop ? topClip : bottomClip);
@@ -2682,7 +2717,7 @@ function TableInner({
           const cornerHeight = Math.max(cornerLength, markerBottom - markerTop);
           const cornerOnLeft = hiddenLeft;
           const shapeLeft = cornerOnLeft ? markerX : markerX + borderWidth - cornerWidth;
-          const shapeTop = foldAtTop ? verticalStart : renderHeight - cornerHeight;
+          const shapeTop = foldAtTop ? topBoundary : renderHeight + borderWidth - cornerHeight;
           return {
             side: `${foldAtTop ? "top" : "bottom"}-${cornerOnLeft ? "left" : "right"}`,
             orientation: "corner",
@@ -2709,19 +2744,19 @@ function TableInner({
         }
       };
     }
-    const horizontalMarkerEnd = horizontalEnd - rightBoundaryInset;
-    let markerLeft = Math.max(rawLeft - borderWidth, horizontalStart);
-    let markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
-    const leftClip = Math.max(0, horizontalStart - (rawLeft - borderWidth));
-    const rightClip = Math.max(0, rawRight + 1 - horizontalMarkerEnd);
+    const horizontalMarkerEnd = horizontalEnd + 1;
+    const markerLeft = Math.max(rawLeft - borderWidth, leftBoundary);
+    const markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
+    const leftClip = Math.max(0, horizontalStart - rawLeft);
+    const rightClip = Math.max(0, rawRight - horizontalEnd);
     if (leftClip > 0 || rightClip > 0) {
       const foldAtLeft = leftClip > 0;
       const fold = Math.min(cornerLength, foldAtLeft ? leftClip : rightClip);
       if (fold > borderWidth) {
         const cornerWidth = Math.max(cornerLength, markerRight - markerLeft);
         const cornerHeight = fold;
-        const shapeLeft = foldAtLeft ? horizontalStart : horizontalMarkerEnd - cornerWidth;
-        const shapeTop = hiddenTop ? verticalStart : renderHeight - cornerHeight;
+        const shapeLeft = foldAtLeft ? leftBoundary : horizontalMarkerEnd - cornerWidth;
+        const shapeTop = hiddenTop ? topBoundary : renderHeight + borderWidth - cornerHeight;
         return {
           side: `${hiddenTop ? "top" : "bottom"}-${foldAtLeft ? "left" : "right"}`,
           orientation: "corner",
@@ -2747,7 +2782,7 @@ function TableInner({
         height: targetSize
       }
     };
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
   const syncSelectionEdgeTarget = useCallback2((scrollLeft, scrollTop) => {
     const target = selectionEdgeTargetRef.current;
     if (!target) return;
@@ -3117,11 +3152,20 @@ function TableInner({
         if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) {
           focus.style.display = "none";
         } else {
-          const borderWidth = 2;
-          const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
-          const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-          const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-          const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
+          const bounds = getSelectionOutlineBounds({
+            left: rawLeft,
+            right: rawRight,
+            top: rawTop,
+            bottom: rawBottom,
+            horizontalStart,
+            horizontalEnd,
+            verticalStart,
+            verticalEnd: renderHeight
+          });
+          const left = Math.round(bounds.left);
+          const right = Math.round(bounds.right);
+          const top = Math.round(bounds.top);
+          const bottom = Math.round(bounds.bottom);
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -4657,11 +4701,20 @@ function TableInner({
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
     if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom + dragOffset <= verticalStart || rawTop + dragOffset >= renderHeight) return null;
-    const borderWidth = 2;
-    const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
-    const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-    const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-    const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
+    const bounds = getSelectionOutlineBounds({
+      left: rawLeft,
+      right: rawRight,
+      top: rawTop,
+      bottom: rawBottom,
+      horizontalStart,
+      horizontalEnd,
+      verticalStart,
+      verticalEnd: renderHeight
+    });
+    const left = Math.round(bounds.left);
+    const right = Math.round(bounds.right);
+    const top = Math.round(bounds.top);
+    const bottom = Math.round(bounds.bottom);
     return {
       left,
       top,

package/package.json

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