Skip to content

Commit

Permalink
Prove out API can be used to quickly map
Browse files Browse the repository at this point in the history
  • Loading branch information
@jassmith
jassmith committed Dec 28, 2023
1 parent 9c04904 commit 1d11e97
Show file tree
Hide file tree
Showing 8 changed files with 224 additions and 52 deletions.
2 changes: 2 additions & 0 deletions packages/core/src/data-editor/data-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -772,6 +772,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
onColumnResizeStart: onColumnResizeStartIn,
customRenderers: additionalRenderers,
fillHandle,
rowGrouping,
drawFocusRing,
experimental,
fixedShadowX,
Expand Down Expand Up @@ -3770,6 +3771,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
inWidth={width ?? idealWidth}
inHeight={height ?? idealHeight}>
<DataGridSearch
rowGrouping={rowGrouping}
fillHandle={fillHandle}
drawFocusRing={drawFocusRing}
experimental={experimental}
Expand Down
33 changes: 33 additions & 0 deletions packages/core/src/docs/examples/add-data.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,39 @@ export const AddData: React.VFC = () => {
{...defaultProps}
getCellContent={getCellContent}
columns={cols}
rowGrouping={{
height: 32,
groups: [
{
headerIndex: 0,
isCollapsed: false,
subGroups: [
{
headerIndex: 1,
isCollapsed: false,
subGroups: [
{
headerIndex: 2,
isCollapsed: true,
},
{
headerIndex: 6,
isCollapsed: false,
},
],
},
{
headerIndex: 10,
isCollapsed: false,
},
],
},
{
headerIndex: 15,
isCollapsed: false,
},
],
}}
rowMarkers={"both"}
onPaste={true} // we want to allow paste to just call onCellEdited
onCellEdited={setCellValue} // Sets the mock cell content
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/internal/data-grid-dnd/data-grid-dnd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {

return (
<DataGrid
rowGrouping={p.rowGrouping}
accessibilityHeight={p.accessibilityHeight}
canvasRef={p.canvasRef}
cellXOffset={p.cellXOffset}
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/internal/data-grid-search/data-grid-search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
return (
<>
<ScrollingDataGrid
rowGrouping={p.rowGrouping}
prelightCells={searchResults}
accessibilityHeight={p.accessibilityHeight}
canvasRef={p.canvasRef}
Expand Down
140 changes: 90 additions & 50 deletions packages/core/src/internal/data-grid/data-grid-render.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import type { DrawArgs, DrawStateTuple, GetCellRendererCallback, PrepResult } fr
import { assert, deepEqual } from "../../common/support.js";
import { direction } from "../../common/utils.js";
import { drawCheckbox } from "./draw-checkbox.js";
import type { DragAndDropState, DrawGridArg, HoverInfo } from "./draw-grid-arg.js";
import type { DragAndDropState, DrawGridArg, ExpandedRowGroup, HoverInfo } from "./draw-grid-arg.js";
import type { EnqueueCallback } from "./use-animation-queue.js";
import type { RenderStateProvider } from "../../common/render-state-provider.js";
import type { ImageWindowLoader } from "./image-window-loader-interface.js";
Expand Down Expand Up @@ -1156,6 +1156,7 @@ function drawCells(
isFocused: boolean,
drawFocus: boolean,
trailingRowType: TrailingRowType,
rowGrouping: readonly ExpandedRowGroup[],
drawRegions: readonly Rectangle[],
damage: CellSet | undefined,
selection: GridSelection,
Expand Down Expand Up @@ -1237,6 +1238,7 @@ function drawCells(
rows,
getRowHeight,
trailingRowType,
rowGrouping,
(drawY, row, rh, isSticky, isTrailingRow) => {
if (row < 0) return;

Expand Down Expand Up @@ -1519,6 +1521,7 @@ function drawBlanks(
selectedRows: CompactSelection,
disabledRows: CompactSelection,
trailingRowType: TrailingRowType,
rowGrouping: readonly ExpandedRowGroup[],
drawRegions: readonly Rectangle[],
damage: CellSet | undefined,
theme: FullTheme
Expand Down Expand Up @@ -1551,6 +1554,7 @@ function drawBlanks(
rows,
getRowHeight,
trailingRowType,
rowGrouping,
(drawY, row, rh, isSticky) => {
if (
!isSticky &&
Expand Down Expand Up @@ -1881,6 +1885,7 @@ function drawFocusRing(
getRowHeight: (row: number) => number,
getCellContent: (cell: Item) => InnerGridCell,
trailingRowType: TrailingRowType,
rowGrouping: readonly ExpandedRowGroup[],
fillHandle: boolean,
rows: number
): (() => void) | undefined {
Expand Down Expand Up @@ -1926,63 +1931,72 @@ function drawFocusRing(
return;
}

walkRowsInCol(startRow, colDrawY, height, rows, getRowHeight, trailingRowType, (drawY, row, rh) => {
if (row !== targetRow && row !== fillHandleRow) return;
walkRowsInCol(
startRow,
colDrawY,
height,
rows,
getRowHeight,
trailingRowType,
rowGrouping,
(drawY, row, rh) => {
if (row !== targetRow && row !== fillHandleRow) return;

let cellX = drawX;
let cellWidth = col.width;
let cellX = drawX;
let cellWidth = col.width;

const isLastColumn = col.sourceIndex === allColumns.length - 1;
const isLastRow = row === rows - 1;
const isLastColumn = col.sourceIndex === allColumns.length - 1;
const isLastRow = row === rows - 1;

if (cell.span !== undefined) {
const areas = getSpanBounds(cell.span, drawX, drawY, col.width, rh, col, allColumns);
const area = col.sticky ? areas[0] : areas[1];
if (cell.span !== undefined) {
const areas = getSpanBounds(cell.span, drawX, drawY, col.width, rh, col, allColumns);
const area = col.sticky ? areas[0] : areas[1];

if (area !== undefined) {
cellX = area.x;
cellWidth = area.width;
if (area !== undefined) {
cellX = area.x;
cellWidth = area.width;
}
}
}

const doHandle = row === fillHandleRow && isFillHandleCol && fillHandle;
const doRing = row === targetRow && !isBeforeTarget && !isAfterTarget && drawCb === undefined;
const doHandle = row === fillHandleRow && isFillHandleCol && fillHandle;
const doRing = row === targetRow && !isBeforeTarget && !isAfterTarget && drawCb === undefined;

if (doHandle) {
drawHandleCb = () => {
if (clipX > cellX && !col.sticky && !doRing) {
if (doHandle) {
drawHandleCb = () => {
if (clipX > cellX && !col.sticky && !doRing) {
ctx.beginPath();
ctx.rect(clipX, 0, width - clipX, height);
ctx.clip();
}
ctx.beginPath();
ctx.rect(clipX, 0, width - clipX, height);
ctx.clip();
}
ctx.beginPath();
ctx.rect(cellX + cellWidth - 4, drawY + rh - 4, 4, 4);
ctx.fillStyle = col.themeOverride?.accentColor ?? theme.accentColor;
ctx.fill();
};
}
ctx.rect(cellX + cellWidth - 4, drawY + rh - 4, 4, 4);
ctx.fillStyle = col.themeOverride?.accentColor ?? theme.accentColor;
ctx.fill();
};
}

if (doRing) {
drawCb = () => {
if (clipX > cellX && !col.sticky) {
if (doRing) {
drawCb = () => {
if (clipX > cellX && !col.sticky) {
ctx.beginPath();
ctx.rect(clipX, 0, width - clipX, height);
ctx.clip();
}
ctx.beginPath();
ctx.rect(clipX, 0, width - clipX, height);
ctx.clip();
}
ctx.beginPath();
ctx.rect(
cellX + 0.5,
drawY + 0.5,
cellWidth - (isLastColumn ? 1 : 0),
rh - (isLastRow ? 1 : 0)
);
ctx.strokeStyle = col.themeOverride?.accentColor ?? theme.accentColor;
ctx.lineWidth = 1;
ctx.stroke();
};
ctx.rect(
cellX + 0.5,
drawY + 0.5,
cellWidth - (isLastColumn ? 1 : 0),
rh - (isLastRow ? 1 : 0)
);
ctx.strokeStyle = col.themeOverride?.accentColor ?? theme.accentColor;
ctx.lineWidth = 1;
ctx.stroke();
};
}
return drawCb !== undefined && (fillHandle ? drawHandleCb !== undefined : true);
}
return drawCb !== undefined && (fillHandle ? drawHandleCb !== undefined : true);
});
);

return drawCb !== undefined && (fillHandle ? drawHandleCb !== undefined : true);
}
Expand Down Expand Up @@ -2016,7 +2030,8 @@ function getLastRow(
cellYOffset: number,
rows: number,
getRowHeight: (row: number) => number,
trailingRowType: TrailingRowType
trailingRowType: TrailingRowType,
rowGrouping: readonly ExpandedRowGroup[]
): number {
let result = 0;
walkColumns(
Expand All @@ -2033,6 +2048,7 @@ function getLastRow(
rows,
getRowHeight,
trailingRowType,
rowGrouping,
(_drawY, row, _rh, isSticky) => {
if (!isSticky) {
result = Math.max(row, result);
Expand Down Expand Up @@ -2147,6 +2163,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
hoverValues,
hyperWrapping,
hoverInfo,
rowGrouping,
spriteManager,
scrolling,
touchMode,
Expand Down Expand Up @@ -2349,6 +2366,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
getRowHeight,
getCellContent,
trailingRowType,
rowGrouping,
fillHandle,
rows
);
Expand Down Expand Up @@ -2407,6 +2425,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
isFocused,
drawFocus,
trailingRowType,
rowGrouping,
drawRegions,
damage,
selection,
Expand Down Expand Up @@ -2449,6 +2468,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
getRowHeight,
getCellContent,
trailingRowType,
rowGrouping,
fillHandle,
rows
);
Expand Down Expand Up @@ -2560,6 +2580,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
getRowHeight,
getCellContent,
trailingRowType,
rowGrouping,
fillHandle,
rows
)
Expand Down Expand Up @@ -2614,6 +2635,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
isFocused,
drawFocus,
trailingRowType,
rowGrouping,
drawRegions,
damage,
selection,
Expand Down Expand Up @@ -2649,6 +2671,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
selection.rows,
disabledRows,
trailingRowType,
rowGrouping,
drawRegions,
damage,
theme
Expand Down Expand Up @@ -2703,7 +2726,8 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
cellYOffset,
rows,
getRowHeight,
trailingRowType
trailingRowType,
rowGrouping
);

imageLoader?.setWindow(
Expand Down Expand Up @@ -2745,19 +2769,35 @@ function walkRowsInCol(
rows: number,
getRowHeight: (row: number) => number,
trailingRowType: TrailingRowType,
rowGrouping: readonly ExpandedRowGroup[],
cb: WalkRowsCallback
): void {
let y = drawY;
let row = startRow;
const doSticky = trailingRowType === "sticky";
const rowEnd = doSticky ? rows - 1 : rows;
let rowGroupIndex = 0;
while ((rowGrouping[rowGroupIndex]?.headerIndex ?? Number.MAX_SAFE_INTEGER) < row) {
rowGroupIndex++;
}
console.log("Loop");

Check warning on line 2783 in packages/core/src/internal/data-grid/data-grid-render.tsx

View workflow job for this annotation

GitHub Actions / build 

Unexpected console statement
while (y < height && row < rowEnd) {
const rh = getRowHeight(row);
if (cb(y, row, rh, false, trailingRowType !== "none" && row === rows - 1) === true) {
break;
}
y += rh;
row++;
if (rowGrouping[rowGroupIndex]?.headerIndex === row) {
if (rowGrouping[rowGroupIndex].isCollapsed) {
console.log(JSON.stringify(rowGrouping[rowGroupIndex]));

Check warning on line 2792 in packages/core/src/internal/data-grid/data-grid-render.tsx

View workflow job for this annotation

GitHub Actions / build 

Unexpected console statement
row += rowGrouping[rowGroupIndex].rows;
} else {
row++;
}
rowGroupIndex++;
} else {
row++;
}
}

if (doSticky) {
Expand Down
Loading

0 comments on commit 1d11e97

Please sign in to comment.