@lensui/lens-table 0.1.81 → 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);
@@ -1929,9 +1961,6 @@ function TableInner({
   defaultSelectedCell,
   onSelectedCellChange,
   rangeSelection = false,
-  selectedRange,
-  defaultSelectedRange,
-  onSelectedRangeChange,
   rowSelection,
   selectedRowKeys,
   defaultSelectedRowKeys,
@@ -2341,20 +2370,6 @@ function TableInner({
   }, [columns, getDataRowKey, rows]);
   const resolvedSelectedCell = (0, import_react8.useMemo)(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
   const resolvedDefaultSelectedCell = (0, import_react8.useMemo)(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
-  const resolveSelectionRangeTarget = (0, import_react8.useCallback)((target) => {
-    if (target == null) return target;
-    const anchor = resolveSelectionTarget(target.anchor);
-    const focus = resolveSelectionTarget(target.focus);
-    return anchor && focus ? { anchor, focus } : null;
-  }, [resolveSelectionTarget]);
-  const resolvedSelectedRange = (0, import_react8.useMemo)(
-    () => resolveSelectionRangeTarget(selectedRange),
-    [resolveSelectionRangeTarget, selectedRange]
-  );
-  const resolvedDefaultSelectedRange = (0, import_react8.useMemo)(
-    () => resolveSelectionRangeTarget(defaultSelectedRange),
-    [defaultSelectedRange, resolveSelectionRangeTarget]
-  );
   const handleSelectedCellChange = (0, import_react8.useCallback)((next) => {
     if (!onSelectedCellChange) return;
     if (!next) {
@@ -2367,11 +2382,7 @@ function TableInner({
     onSelectedCellChange({ ...next, value });
   }, [columns, onSelectedCellChange, rows]);
   const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
-  const [selectionRange, setSelectionRange] = useControllableValue(
-    resolvedSelectedRange,
-    resolvedDefaultSelectedRange,
-    onSelectedRangeChange
-  );
+  const [selectionRange, setSelectionRange] = (0, import_react8.useState)(null);
   const rangeDragRef = (0, import_react8.useRef)(null);
   (0, import_react8.useEffect)(() => {
     if (!selection) return void 0;
@@ -2717,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);
@@ -2733,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",
@@ -2760,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",
@@ -2798,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;
@@ -3168,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`;
@@ -3497,10 +3520,8 @@ function TableInner({
     if (focus.rowIndex === drag.anchor.rowIndex && focus.columnIndex === drag.anchor.columnIndex) return;
     drag.moved = true;
     event.preventDefault();
-    if (selectionRange?.focus.rowIndex === focus.rowIndex && selectionRange.focus.columnIndex === focus.columnIndex)
-      return;
-    setSelectionRange({ anchor: drag.anchor, focus });
-  }, [columns, locateCell, selectionRange, setSelectionRange]);
+    setSelectionRange((current) => current?.focus.rowIndex === focus.rowIndex && current.focus.columnIndex === focus.columnIndex ? current : { anchor: drag.anchor, focus });
+  }, [columns, locateCell]);
   const endRangeDrag = (0, import_react8.useCallback)((event) => {
     const drag = rangeDragRef.current;
     if (!drag) return;
@@ -4710,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.d.cts

@@ -415,11 +415,6 @@ interface TableProps<Row extends object> {
     onSelectedCellChange?: (selection: SelectedCellChange | null) => void;
     /** Enable spreadsheet-style mouse drag selection across multiple body cells. Defaults to false. */
     rangeSelection?: boolean;
-    /** Controlled rectangular cell selection. */
-    selectedRange?: GridSelectionRangeTarget | null;
-    /** Initial rectangular cell selection for uncontrolled usage. */
-    defaultSelectedRange?: GridSelectionRangeTarget | null;
-    onSelectedRangeChange?: (range: GridSelectionRange | null) => void;
     rowSelection?: boolean | RowSelectionConfig;
     selectedRowKeys?: GridKey[];
     defaultSelectedRowKeys?: GridKey[];

package/dist/index.d.ts

@@ -415,11 +415,6 @@ interface TableProps<Row extends object> {
     onSelectedCellChange?: (selection: SelectedCellChange | null) => void;
     /** Enable spreadsheet-style mouse drag selection across multiple body cells. Defaults to false. */
     rangeSelection?: boolean;
-    /** Controlled rectangular cell selection. */
-    selectedRange?: GridSelectionRangeTarget | null;
-    /** Initial rectangular cell selection for uncontrolled usage. */
-    defaultSelectedRange?: GridSelectionRangeTarget | null;
-    onSelectedRangeChange?: (range: GridSelectionRange | null) => void;
     rowSelection?: boolean | RowSelectionConfig;
     selectedRowKeys?: GridKey[];
     defaultSelectedRowKeys?: GridKey[];

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);
@@ -1899,9 +1931,6 @@ function TableInner({
   defaultSelectedCell,
   onSelectedCellChange,
   rangeSelection = false,
-  selectedRange,
-  defaultSelectedRange,
-  onSelectedRangeChange,
   rowSelection,
   selectedRowKeys,
   defaultSelectedRowKeys,
@@ -2311,20 +2340,6 @@ function TableInner({
   }, [columns, getDataRowKey, rows]);
   const resolvedSelectedCell = useMemo2(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
   const resolvedDefaultSelectedCell = useMemo2(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
-  const resolveSelectionRangeTarget = useCallback2((target) => {
-    if (target == null) return target;
-    const anchor = resolveSelectionTarget(target.anchor);
-    const focus = resolveSelectionTarget(target.focus);
-    return anchor && focus ? { anchor, focus } : null;
-  }, [resolveSelectionTarget]);
-  const resolvedSelectedRange = useMemo2(
-    () => resolveSelectionRangeTarget(selectedRange),
-    [resolveSelectionRangeTarget, selectedRange]
-  );
-  const resolvedDefaultSelectedRange = useMemo2(
-    () => resolveSelectionRangeTarget(defaultSelectedRange),
-    [defaultSelectedRange, resolveSelectionRangeTarget]
-  );
   const handleSelectedCellChange = useCallback2((next) => {
     if (!onSelectedCellChange) return;
     if (!next) {
@@ -2337,11 +2352,7 @@ function TableInner({
     onSelectedCellChange({ ...next, value });
   }, [columns, onSelectedCellChange, rows]);
   const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
-  const [selectionRange, setSelectionRange] = useControllableValue(
-    resolvedSelectedRange,
-    resolvedDefaultSelectedRange,
-    onSelectedRangeChange
-  );
+  const [selectionRange, setSelectionRange] = useState6(null);
   const rangeDragRef = useRef4(null);
   useEffect3(() => {
     if (!selection) return void 0;
@@ -2687,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);
@@ -2703,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",
@@ -2730,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",
@@ -2768,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;
@@ -3138,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`;
@@ -3467,10 +3490,8 @@ function TableInner({
     if (focus.rowIndex === drag.anchor.rowIndex && focus.columnIndex === drag.anchor.columnIndex) return;
     drag.moved = true;
     event.preventDefault();
-    if (selectionRange?.focus.rowIndex === focus.rowIndex && selectionRange.focus.columnIndex === focus.columnIndex)
-      return;
-    setSelectionRange({ anchor: drag.anchor, focus });
-  }, [columns, locateCell, selectionRange, setSelectionRange]);
+    setSelectionRange((current) => current?.focus.rowIndex === focus.rowIndex && current.focus.columnIndex === focus.columnIndex ? current : { anchor: drag.anchor, focus });
+  }, [columns, locateCell]);
   const endRangeDrag = useCallback2((event) => {
     const drag = rangeDragRef.current;
     if (!drag) return;
@@ -4680,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.81",
+  "version": "0.1.83",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",