Skip to content

Commit 05a0817

Browse files
rahulyadav5524rahulyadav5524
committed
fixed selection issue and highlight fixes
1 parent cd454e0 commit 05a0817

10 files changed

+77
-39
lines changed

‎packages/core/src/data-editor/data-editor.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -884,7 +884,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
884884
const maxColumnWidth = Math.max(maxColumnWidthIn, minColumnWidth);
885885
const maxColumnAutoWidth = Math.max(maxColumnAutoWidthIn ?? maxColumnWidth, minColumnWidth);
886886

887-
const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns: freezeColumns[0];
887+
const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
888888
const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
889889

890890
const docStyle = React.useMemo(() => {
@@ -1555,7 +1555,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
15551555
}
15561556

15571557
// scrollBounds is already scaled
1558-
let sLeft = frozenLeftWidth * scale + scrollBounds.left + rowMarkerOffset * rowMarkerWidth * scale;
1558+
let sLeft =
1559+
frozenLeftWidth * scale + scrollBounds.left + rowMarkerOffset * rowMarkerWidth * scale;
15591560
let sRight = scrollBounds.right - frozenRightWidth * scale;
15601561
let sTop = scrollBounds.top + totalHeaderHeight * scale;
15611562
let sBottom = scrollBounds.bottom - trailingRowHeight * scale;

‎packages/core/src/internal/data-grid/data-grid.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -602,7 +602,11 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
602602
let isEdge = bounds !== undefined && bounds.x + bounds.width - posX <= edgeDetectionBuffer;
603603

604604
const previousCol = col - 1;
605-
if (posX - bounds.x <= edgeDetectionBuffer && previousCol >= 0) {
605+
if (
606+
posX - bounds.x <= edgeDetectionBuffer &&
607+
previousCol >= 0 &&
608+
col < mappedColumns.length - freezeRightColumns
609+
) {
606610
isEdge = true;
607611
bounds = getBoundsForItem(canvas, previousCol, row);
608612
assert(bounds !== undefined);
@@ -699,6 +703,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
699703
selection,
700704
totalHeaderHeight,
701705
freezeColumns,
706+
freezeRightColumns,
702707
]
703708
);
704709

‎packages/core/src/internal/data-grid/render/data-grid-lib.ts

+11-5
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ export function getColumnIndexForX(
279279
const colIdx = effectiveColumns.length - 1 - fc;
280280
const col = effectiveColumns[colIdx];
281281
y -= col.width;
282-
if (targetX <= y) {
282+
if (targetX >= y) {
283283
return col.sourceIndex;
284284
}
285285
}
@@ -810,24 +810,30 @@ export function computeBounds(
810810

811811
const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
812812
const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
813+
const column = mappedColumns[col];
813814

814815
if (col >= mappedColumns.length || row >= rows || row < -2 || col < 0) {
815816
return result;
816817
}
817818

818819
const headerHeight = totalHeaderHeight - groupHeaderHeight;
819820

820-
if (col >= freezeLeftColumns) {
821+
if (col >= freezeLeftColumns && col < mappedColumns.length - freezeRightColumns) {
821822
const dir = cellXOffset > col ? -1 : 1;
822-
const [freezeLeftWidth, freezeRightWidth] = getStickyWidth(mappedColumns);
823+
const [freezeLeftWidth] = getStickyWidth(mappedColumns);
823824
result.x += freezeLeftWidth + translateX;
824825
for (let i = cellXOffset; i !== col; i += dir) {
825826
result.x += mappedColumns[dir === 1 ? i : i - 1].width * dir;
826827
}
827-
} else {
828+
} else if (column.stickyPosition === "left") {
828829
for (let i = 0; i < col; i++) {
829830
result.x += mappedColumns[i].width;
830831
}
832+
} else if (column.stickyPosition === "right") {
833+
result.x = width;
834+
for (let i = col; i < mappedColumns.length; i++) {
835+
result.x -= mappedColumns[i].width;
836+
}
831837
}
832838
result.width = mappedColumns[col].width + 1;
833839

@@ -863,7 +869,7 @@ export function computeBounds(
863869
end++;
864870
}
865871
if (!sticky) {
866-
const [freezeLeftWidth, freezeRightWidth] = getStickyWidth(mappedColumns);
872+
const [freezeLeftWidth] = getStickyWidth(mappedColumns);
867873
const clip = result.x - freezeLeftWidth;
868874
if (clip < 0) {
869875
result.x -= clip;

‎packages/core/src/internal/data-grid/render/data-grid-render.blit.ts

+13-2
Original file line numberDiff line numberDiff line change
@@ -147,9 +147,9 @@ export function blitLastFrame(
147147
args.dw = blitWidth * dpr;
148148

149149
drawRegions.push({
150-
x: width + deltaX,
150+
x: width + deltaX - stickyRightWidth,
151151
y: 0,
152-
width: -deltaX,
152+
width: -deltaX + stickyRightWidth,
153153
height: height,
154154
});
155155
}
@@ -168,6 +168,17 @@ export function blitLastFrame(
168168
const h = height * dpr;
169169
ctx.drawImage(blitSource, 0, 0, w, h, 0, 0, w, h);
170170
}
171+
if (
172+
stickyRightWidth > 0 &&
173+
deltaX !== 0 &&
174+
deltaY === 0 &&
175+
(targetScroll === undefined || blitSourceScroll?.[1] !== false)
176+
) {
177+
const x = (width - stickyRightWidth) * dpr;
178+
const w = stickyRightWidth * dpr;
179+
const h = height * dpr;
180+
ctx.drawImage(blitSource, x, 0, w, h, x, 0, w, h);
181+
}
171182
if (
172183
freezeTrailingRowsHeight > 0 &&
173184
deltaX === 0 &&

‎packages/core/src/internal/data-grid/render/data-grid-render.cells.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ export function drawCells(
299299

300300
const bgCell = cell.kind === GridCellKind.Protected ? theme.bgCellMedium : theme.bgCell;
301301
let fill: string | undefined;
302-
if (isSticky || bgCell !== outerTheme.bgCell) {
302+
if (isSticky || bgCell !== outerTheme.bgCell || c.sticky) {
303303
fill = blend(bgCell, fill);
304304
}
305305

‎packages/core/src/internal/data-grid/render/data-grid-render.header.ts

+5
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@ export function drawGridHeaders(
6969
? outerTheme
7070
: mergeAndRealizeTheme(outerTheme, groupTheme, c.themeOverride);
7171

72+
if (c.sticky) {
73+
ctx.fillStyle = theme.bgHeader;
74+
ctx.fill();
75+
}
76+
7277
if (theme.bgHeader !== outerTheme.bgHeader) {
7378
ctx.fillStyle = theme.bgHeader;
7479
ctx.fill();

‎packages/core/src/internal/data-grid/render/data-grid-render.lines.ts

+18-17
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,7 @@ export function drawGridLines(
331331
for (let index = 0; index < effectiveCols.length; index++) {
332332
const c = effectiveCols[index];
333333
if (c.width === 0) continue;
334+
if (c.sticky && c.stickyPosition !== "left") break;
334335
x += c.width;
335336
const tx = c.sticky ? x : x + translateX;
336337
if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
@@ -344,23 +345,23 @@ export function drawGridLines(
344345
}
345346
}
346347

347-
// let rightX = 0.5;
348-
// for (let index = effectiveCols.length - 1; index >= 0; index--) {
349-
// const c = effectiveCols[index];
350-
// if (c.width === 0) continue;
351-
// if (!c.sticky) break;
352-
// rightX += c.width;
353-
// const tx = c.sticky ? rightX : rightX + translateX;
354-
// if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
355-
// toDraw.push({
356-
// x1: tx,
357-
// y1: Math.max(groupHeaderHeight, minY),
358-
// x2: tx,
359-
// y2: Math.min(height, maxY),
360-
// color: vColor,
361-
// });
362-
// }
363-
// }
348+
let rightX = width + 0.5;
349+
for (let index = effectiveCols.length - 1; index >= 0; index--) {
350+
const c = effectiveCols[index];
351+
if (c.width === 0) continue;
352+
if (!c.sticky) break;
353+
rightX -= c.width;
354+
const tx = rightX;
355+
if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
356+
toDraw.push({
357+
x1: tx,
358+
y1: Math.max(groupHeaderHeight, minY),
359+
x2: tx,
360+
y2: Math.min(height, maxY),
361+
color: vColor,
362+
});
363+
}
364+
}
364365

365366
let freezeY = height + 0.5;
366367
for (let i = rows - freezeTrailingRows; i < rows; i++) {

‎packages/core/src/internal/data-grid/render/data-grid-render.ts

+12
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,18 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
418418
height: freezeTrailingRows,
419419
when: freezeTrailingRows > 0,
420420
},
421+
{
422+
x: viewRegionWidth - freezeRightColumns,
423+
y: cellYOffset,
424+
width: freezeRightColumns,
425+
height: 300,
426+
},
427+
{
428+
x: viewRegionWidth - freezeRightColumns,
429+
y: -2,
430+
width: freezeRightColumns,
431+
height: 2,
432+
},
421433
]);
422434

423435
const doDamage = (ctx: CanvasRenderingContext2D) => {

‎packages/core/src/internal/data-grid/render/data-grid.render.rings.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,13 @@ export function drawHighlightRings(
3434

3535
const [freezeLeft, freezeRight] = getStickyWidth(mappedColumns);
3636
const freezeBottom = getFreezeTrailingHeight(rows, freezeTrailingRows, rowHeight);
37-
const splitIndices = [freezeLeftColumns, 0, mappedColumns.length, rows - freezeTrailingRows] as const;
38-
const splitLocations = [freezeLeft, 0, width, height - freezeBottom] as const;
37+
const splitIndices = [
38+
freezeLeftColumns,
39+
0,
40+
mappedColumns.length - freezeRightColumns,
41+
rows - freezeTrailingRows,
42+
] as const;
43+
const splitLocations = [freezeLeft, 0, width - freezeRight, height - freezeBottom] as const;
3944

4045
const drawRects = highlightRegions.map(h => {
4146
const r = h.range;

‎packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
103103
const lastSize = React.useRef<readonly [number, number] | undefined>();
104104

105105
const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
106-
const freezeRightColumns = typeof freezeColumns === "number"? 0 : freezeColumns[1];
107106

108107
const width = nonGrowWidth + Math.max(0, overscrollX ?? 0);
109108

@@ -217,14 +216,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
217216
args.width !== lastSize.current?.[0] ||
218217
args.height !== lastSize.current?.[1]
219218
) {
220-
onVisibleRegionChanged?.(
221-
rect,
222-
args.width,
223-
args.height,
224-
args.paddingRight ?? 0,
225-
tx,
226-
ty
227-
);
219+
onVisibleRegionChanged?.(rect, args.width, args.height, args.paddingRight ?? 0, tx, ty);
228220
last.current = rect;
229221
lastX.current = tx;
230222
lastY.current = ty;

0 commit comments

Comments
 (0)