Skip to content

Commit

Permalink
Improve prep
Browse files Browse the repository at this point in the history
  • Loading branch information
@jassmith
jassmith committed Mar 16, 2022
1 parent 658afed commit 928e431
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 41 deletions.
10 changes: 9 additions & 1 deletion packages/core/src/data-grid/cells/cell-types.ts
View file
Expand Up @@ -28,8 +28,16 @@ interface DrawArgs<T extends InnerGridCell> extends BaseDrawArgs {
cell: T;
}

// intentionally mutable
export interface PrepResult {
font?: string;
fillStyle?: string;
renderer: {};
deprep?: (args: Pick<BaseDrawArgs, "ctx">) => void;
}

type DrawCallback<T extends InnerGridCell> = (args: DrawArgs<T>) => void;
export type PrepCallback = (args: BaseDrawArgs) => void;
export type PrepCallback = (args: BaseDrawArgs, lastPrep?: PrepResult) => Partial<PrepResult>;
export type DeprepCallback = (args: Pick<BaseDrawArgs, "ctx">) => void;

type ProvideEditorCallback<T extends InnerGridCell> = (
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/data-grid/cells/row-id-cell.tsx
View file
Expand Up @@ -7,7 +7,7 @@ export const rowIDCellRenderer: InternalCellRenderer<RowIDCell> = {
kind: GridCellKind.RowID,
needsHover: false,
needsHoverPosition: false,
renderPrep: a => prepTextCell(a, a.theme.textLight),
renderPrep: (a, b) => prepTextCell(a, b, a.theme.textLight),
render: a => drawTextCell(a, a.cell.data),
measure: (ctx, cell) => ctx.measureText(cell.data).width + 16,
};
37 changes: 28 additions & 9 deletions packages/core/src/data-grid/data-grid-lib.ts
View file
Expand Up @@ -2,7 +2,7 @@ import { Theme } from "../common/styles";
import { DrilldownCellData, Item, GridSelection, InnerGridCell, SizedGridColumn } from "./data-grid-types";
import { degreesToRadians, direction } from "../common/utils";
import React from "react";
import { BaseDrawArgs } from "./cells/cell-types";
import { BaseDrawArgs, PrepResult } from "./cells/cell-types";

export interface MappedGridColumn extends SizedGridColumn {
sourceIndex: number;
Expand Down Expand Up @@ -241,12 +241,12 @@ export function drawWithLastUpdate(
args: BaseDrawArgs,
lastUpdate: number | undefined,
frameTime: number,
draw: (forcePrep: boolean) => void
lastPrep: PrepResult | undefined,
draw: () => void
) {
const { ctx, x, y, w: width, h: height, theme } = args;
let progress = Number.MAX_SAFE_INTEGER;
const animTime = 500;
let forcePrep = false;
if (lastUpdate !== undefined) {
progress = frameTime - lastUpdate;

Expand All @@ -256,18 +256,31 @@ export function drawWithLastUpdate(
ctx.fillStyle = theme.bgSearchResult;
ctx.fillRect(x, y, width, height);
ctx.globalAlpha = 1;
forcePrep = true;
if (lastPrep !== undefined) {
lastPrep.fillStyle = theme.bgSearchResult;
}
}
}

draw(forcePrep);
draw();

return progress < animTime;
}

export function prepTextCell(args: BaseDrawArgs, overrideColor?: string) {
export function prepTextCell(
args: BaseDrawArgs,
lastPrep: PrepResult | undefined,
overrideColor?: string
): Partial<PrepResult> {
const { ctx, theme } = args;
ctx.fillStyle = overrideColor ?? theme.textDark;
const result: Partial<PrepResult> = lastPrep ?? {};

const newFill = overrideColor ?? theme.textDark;
if (newFill !== result.fillStyle) {
ctx.fillStyle = newFill;
result.fillStyle = newFill;
}
return result;
}

export function drawTextCell(args: BaseDrawArgs, data: string) {
Expand Down Expand Up @@ -378,10 +391,16 @@ function drawCheckbox(
}
}

export function prepMarkerRowCell(args: BaseDrawArgs) {
export function prepMarkerRowCell(args: BaseDrawArgs, lastPrep: PrepResult | undefined): Partial<PrepResult> {
const { ctx, theme } = args;
ctx.font = `9px ${theme.fontFamily}`;
const newFont = `9px ${theme.fontFamily}`;
const result: Partial<PrepResult> = lastPrep ?? {};
if (result?.font !== newFont) {
ctx.font = newFont;
result.font = newFont;
}
ctx.textAlign = "center";
return result;
}

export function deprepMarkerRowCell(args: Pick<BaseDrawArgs, "ctx">) {
Expand Down
65 changes: 35 additions & 30 deletions packages/core/src/data-grid/data-grid-render.tsx
View file
Expand Up @@ -28,7 +28,7 @@ import { SpriteManager, SpriteVariant } from "./data-grid-sprites";
import { Theme } from "../common/styles";
import { blend, withAlpha } from "./color-parser";
import { CellRenderers } from "./cells";
import { DeprepCallback } from "./cells/cell-types";
import { PrepResult } from "./cells/cell-types";

// Future optimization opportunities
// - Create a cache of a buffer used to render the full view of a partially displayed column so that when
Expand Down Expand Up @@ -91,16 +91,16 @@ export function drawCell(
hoverAmount: number,
hoverInfo: HoverInfo | undefined,
frameTime: number,
lastToken?: {} | undefined,
lastPrep?: PrepResult,
enqueue?: (item: Item) => void
): {} | DeprepCallback | undefined {
): PrepResult | undefined {
let hoverX: number | undefined;
let hoverY: number | undefined;
if (hoverInfo !== undefined && hoverInfo[0][0] === col && hoverInfo[0][1] === row) {
hoverX = hoverInfo[1][0];
hoverY = hoverInfo[1][1];
}
let result: {} | undefined = undefined;
let result: PrepResult | undefined = lastPrep;
const args = {
ctx,
theme,
Expand All @@ -118,7 +118,7 @@ export function drawCell(
imageLoader,
spriteManager,
};
const needsAnim = drawWithLastUpdate(args, cell.lastUpdated, frameTime, forcePrep => {
const needsAnim = drawWithLastUpdate(args, cell.lastUpdated, frameTime, lastPrep, () => {
const drawn = isInnerOnlyCell(cell)
? false
: drawCustomCell?.({
Expand All @@ -136,14 +136,16 @@ export function drawCell(
}) === true;
if (!drawn && cell.kind !== GridCellKind.Custom) {
const r = CellRenderers[cell.kind];
if (lastToken !== r || forcePrep) {
if (typeof lastToken === "function") {
lastToken(args);
}
r.renderPrep?.(args);
if (lastPrep?.renderer !== r) {
lastPrep?.deprep?.(args);
lastPrep = undefined;
}
const partialPrepResult = r.renderPrep?.(args, lastPrep);
r.render(args);
result = r?.renderDeprep ?? r;
if (partialPrepResult !== undefined) {
partialPrepResult.renderer = r;
result = partialPrepResult as PrepResult;
}
}
});
if (needsAnim) enqueue?.([col, row]);
Expand Down Expand Up @@ -946,6 +948,19 @@ function getSpanBounds(
return [frozenRect, contentRect];
}

// preppable items:
// - font
// - fillStyle

// Column draw loop prep cycle
// - Prep item
// - Prep sets props
// - Prep returns list of cared about props
// - Draw item
// - Loop may set some items, if present in args list, set undefined
// - Prep next item, giving previous result
// - If next item type is different, de-prep
// - Result per column
function drawCells(
ctx: CanvasRenderingContext2D,
effectiveColumns: readonly MappedGridColumn[],
Expand Down Expand Up @@ -1025,7 +1040,7 @@ function drawCells(
font = colFont;
ctx.font = colFont;
}
let lastToken: {} | DeprepCallback | undefined;
let prepResult: PrepResult | undefined = undefined;

walkRowsInCol(
startRow,
Expand Down Expand Up @@ -1097,8 +1112,7 @@ function drawCells(
cellWidth = area.width;
handledSpans.add(spanKey);
ctx.restore();
if (typeof lastToken === "function") lastToken({ ctx });
lastToken = undefined;
prepResult = undefined;
ctx.save();
ctx.beginPath();
const d = Math.max(0, clipX - area.x);
Expand Down Expand Up @@ -1145,13 +1159,6 @@ function drawCells(
let fill: string | undefined;
if (isSticky || theme.bgCell !== outerTheme.bgCell) {
fill = blend(theme.bgCell, fill);
if (typeof lastToken === "function") lastToken({ ctx });
lastToken = undefined;
}

if (theme.textDark !== outerTheme.textDark) {
if (typeof lastToken === "function") lastToken({ ctx });
lastToken = undefined;
}

if (highlighted || rowDisabled) {
Expand All @@ -1161,17 +1168,16 @@ function drawCells(
if (highlighted) {
fill = blend(theme.accentLight, fill);
}
if (typeof lastToken === "function") lastToken({ ctx });
lastToken = undefined;
} else {
if (prelightCells?.some(pre => pre[0] === c.sourceIndex && pre[1] === row) === true) {
fill = blend(theme.bgSearchResult, fill);
if (typeof lastToken === "function") lastToken({ ctx });
lastToken = undefined;
}
}
if (fill !== undefined) {
ctx.fillStyle = fill;
if (prepResult !== undefined) {
prepResult.fillStyle = fill;
}
ctx.fillRect(cellX, drawY, cellWidth, rh);
}

Expand All @@ -1187,7 +1193,7 @@ function drawCells(
ctx.font = cellFont;
font = cellFont;
}
const drawResult = drawCell(
prepResult = drawCell(
ctx,
row,
cell,
Expand All @@ -1204,10 +1210,9 @@ function drawCells(
hoverValue?.hoverAmount ?? 0,
hoverInfo,
frameTime,
lastToken,
prepResult,
enqueue
);
lastToken = drawResult;
}

if (cell.style === "faded") {
Expand All @@ -1216,8 +1221,8 @@ function drawCells(
toDraw--;
if (drawingSpan) {
ctx.restore();
if (typeof lastToken === "function") lastToken({ ctx });
lastToken = undefined;
prepResult?.deprep?.({ ctx });
prepResult = undefined;
reclip();
font = colFont;
ctx.font = colFont;
Expand Down

0 comments on commit 928e431

Please sign in to comment.