Improve render code organization (#879)

* Organize render functions better

* Skip loops faster

* Cleanup api

* Spurious comment

* Refactor

* Don't recreate context constantly

* Prevent excessive blending operations

* Reduce style churn

packages/core/src/cells/boolean-cell.tsx

@@ -7,7 +7,7 @@ import {
     BooleanEmpty,
     BooleanIndeterminate,
 } from "../internal/data-grid/data-grid-types.js";
-import { drawCheckbox } from "../internal/data-grid/draw-checkbox.js";
+import { drawCheckbox } from "../internal/data-grid/render/draw-checkbox.js";
 import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
 
 const defaultCellMaxSize = 20;

packages/core/src/cells/bubble-cell.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
 import BubblesOverlayEditor from "../internal/data-grid-overlay-editor/private/bubbles-overlay-editor.js";
-import { getMiddleCenterBias, measureTextCached, roundedRect } from "../internal/data-grid/data-grid-lib.js";
+import { getMiddleCenterBias, measureTextCached, roundedRect } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type BubbleCell } from "../internal/data-grid/data-grid-types.js";
 import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
 import { makeAccessibilityStringForArray } from "../common/utils.js";

packages/core/src/cells/drilldown-cell.tsx

@@ -6,7 +6,7 @@ import {
     getMiddleCenterBias,
     measureTextCached,
     roundedRect,
-} from "../internal/data-grid/data-grid-lib.js";
+} from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type DrilldownCell, type DrilldownCellData } from "../internal/data-grid/data-grid-types.js";
 import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
 import { makeAccessibilityStringForArray } from "../common/utils.js";

packages/core/src/cells/image-cell.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
 import { ImageOverlayEditor } from "../internal/data-grid-overlay-editor/private/image-overlay-editor.js";
-import { roundedRect } from "../internal/data-grid/data-grid-lib.js";
+import { roundedRect } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type BaseGridCell, type ImageCell } from "../internal/data-grid/data-grid-types.js";
 import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/loading-cell.tsx

@@ -1,5 +1,5 @@
 import { withAlpha } from "../internal/data-grid/color-parser.js";
-import { roundedRect } from "../internal/data-grid/data-grid-lib.js";
+import { roundedRect } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type LoadingCell } from "../internal/data-grid/data-grid-types.js";
 import type { InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/markdown-cell.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
 import { MarkdownOverlayEditor } from "../internal/data-grid-overlay-editor/private/markdown-overlay-editor.js";
-import { drawTextCell, prepTextCell } from "../internal/data-grid/data-grid-lib.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type MarkdownCell } from "../internal/data-grid/data-grid-types.js";
 import type { InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/marker-cell.tsx

@@ -1,6 +1,6 @@
-import { getMiddleCenterBias } from "../internal/data-grid/data-grid-lib.js";
+import { getMiddleCenterBias } from "../internal/data-grid/render/data-grid-lib.js";
 import { InnerGridCellKind, type MarkerCell } from "../internal/data-grid/data-grid-types.js";
-import { drawCheckbox } from "../internal/data-grid/draw-checkbox.js";
+import { drawCheckbox } from "../internal/data-grid/render/draw-checkbox.js";
 import type { BaseDrawArgs, InternalCellRenderer, PrepResult } from "./cell-types.js";
 
 export const markerCellRenderer: InternalCellRenderer<MarkerCell> = {

packages/core/src/cells/new-row-cell.tsx

@@ -1,4 +1,4 @@
-import { getMiddleCenterBias } from "../internal/data-grid/data-grid-lib.js";
+import { getMiddleCenterBias } from "../internal/data-grid/render/data-grid-lib.js";
 import { InnerGridCellKind, type NewRowCell } from "../internal/data-grid/data-grid-types.js";
 import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/number-cell.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
-import { drawTextCell, prepTextCell } from "../internal/data-grid/data-grid-lib.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type NumberCell } from "../internal/data-grid/data-grid-types.js";
 import type { InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/row-id-cell.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { GrowingEntry } from "../internal/growing-entry/growing-entry.js";
-import { drawTextCell, prepTextCell } from "../internal/data-grid/data-grid-lib.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type RowIDCell } from "../internal/data-grid/data-grid-types.js";
 import type { InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/text-cell.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
 import { GrowingEntry } from "../internal/growing-entry/growing-entry.js";
-import { drawTextCell, prepTextCell } from "../internal/data-grid/data-grid-lib.js";
+import { drawTextCell, prepTextCell } from "../internal/data-grid/render/data-grid-lib.js";
 import { GridCellKind, type TextCell } from "../internal/data-grid/data-grid-types.js";
 import type { InternalCellRenderer } from "./cell-types.js";
 

packages/core/src/cells/uri-cell.tsx

@@ -7,7 +7,7 @@ import {
     getMiddleCenterBias,
     measureTextCached,
     prepTextCell,
-} from "../internal/data-grid/data-grid-lib.js";
+} from "../internal/data-grid/render/data-grid-lib.js";
 import {
     GridCellKind,
     type BaseGridCell,
@@ -16,7 +16,7 @@ import {
 } from "../internal/data-grid/data-grid-types.js";
 import type { InternalCellRenderer } from "./cell-types.js";
 import type { FullTheme } from "../common/styles.js";
-import { pointInRect } from "../internal/data-grid/data-grid-render.js";
+import { pointInRect } from "../common/math.js";
 
 function getTextRect(
     metrics: TextMetrics,

packages/core/src/common/math.ts

@@ -1,5 +1,5 @@
 /* eslint-disable unicorn/prefer-ternary */
-import { itemIsInRect } from "../internal/data-grid/data-grid-lib.js";
+import { itemIsInRect } from "../internal/data-grid/render/data-grid-lib.js";
 import type { FillHandleDirection, Rectangle } from "../internal/data-grid/data-grid-types.js";
 
 export function getClosestRect(
@@ -42,6 +42,23 @@ export function getClosestRect(
     }
 }
 
+export function intersectRect(
+    x1: number,
+    y1: number,
+    w1: number,
+    h1: number,
+    x2: number,
+    y2: number,
+    w2: number,
+    h2: number
+) {
+    return x1 <= x2 + w2 && x2 <= x1 + w1 && y1 <= y2 + h2 && y2 <= y1 + h1;
+}
+
+export function pointInRect(rect: Rectangle, x: number, y: number): boolean {
+    return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+}
+
 export function combineRects(a: Rectangle, b: Rectangle): Rectangle {
     const x = Math.min(a.x, b.x);
     const y = Math.min(a.y, b.y);

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

@@ -53,7 +53,7 @@ import {
     itemIsInRect,
     gridSelectionHasItem,
     getFreezeTrailingHeight,
-} from "../internal/data-grid/data-grid-lib.js";
+} from "../internal/data-grid/render/data-grid-lib.js";
 import { GroupRename } from "./group-rename.js";
 import { measureColumn, useColumnSizer } from "./use-column-sizer.js";
 import { isHotkey } from "../common/is-hotkey.js";
@@ -65,9 +65,8 @@ import { useAutoscroll } from "./use-autoscroll.js";
 import type { CustomRenderer, CellRenderer, InternalCellRenderer } from "../cells/cell-types.js";
 import { decodeHTML, type CopyBuffer } from "./copy-paste.js";
 import { useRemAdjuster } from "./use-rem-adjuster.js";
-import { pointInRect, type Highlight } from "../internal/data-grid/data-grid-render.js";
 import { withAlpha } from "../internal/data-grid/color-parser.js";
-import { combineRects, getClosestRect } from "../common/math.js";
+import { combineRects, getClosestRect, pointInRect } from "../common/math.js";
 import {
     type HeaderClickedEventArgs,
     type GroupHeaderClickedEventArgs,
@@ -83,6 +82,7 @@ import {
     type GridKeyEventArgs,
 } from "../internal/data-grid/event-args.js";
 import { type Keybinds, useKeybindingsWithDefaults } from "./data-editor-keybindings.js";
+import type { Highlight } from "../internal/data-grid/render/data-grid-render.cells.js";
 
 const DataGridOverlayEditor = React.lazy(
     async () => await import("../internal/data-grid-overlay-editor/data-grid-overlay-editor.js")
@@ -3838,10 +3838,14 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         return [`${Math.min(100_000, w)}px`, `${Math.min(100_000, h)}px`];
     }, [mangledCols, experimental?.scrollbarWidthOverride, rowHeight, rows, showTrailingBlankRow, totalHeaderHeight]);
 
+    const cssStyle = React.useMemo(() => {
+        return makeCSSStyle(mergedTheme);
+    }, [mergedTheme]);
+
     return (
         <ThemeContext.Provider value={mergedTheme}>
             <DataEditorContainer
-                style={makeCSSStyle(mergedTheme)}
+                style={cssStyle}
                 className={className}
                 inWidth={width ?? idealWidth}
                 inHeight={height ?? idealHeight}>

packages/core/src/docs/examples/row-hover.stories.tsx

@@ -7,7 +7,7 @@ import {
     defaultProps,
     useAllMockedKinds,
 } from "../../data-editor/stories/utils.js";
-import type { GetRowThemeCallback } from "../../internal/data-grid/data-grid-render.js";
+import type { GetRowThemeCallback } from "../../internal/data-grid/render/data-grid-render.cells.js";
 import { SimpleThemeWrapper } from "../../stories/story-utils.js";
 import type { GridMouseEventArgs } from "../../internal/data-grid/event-args.js";
 

packages/core/src/index.ts

@@ -5,7 +5,7 @@ export type { SpriteProps } from "./common/utils.js";
 export type { Theme } from "./common/styles.js";
 export type { CustomRenderer, BaseDrawArgs, DrawArgs } from "./cells/cell-types.js";
 export type { SelectionBlending } from "./internal/data-grid/use-selection-behavior.js";
-export type { GetRowThemeCallback, Highlight } from "./internal/data-grid/data-grid-render.js";
+export type { GetRowThemeCallback, Highlight } from "./internal/data-grid/render/data-grid-render.cells.js";
 export type { ImageWindowLoader } from "./internal/data-grid/image-window-loader-interface.js";
 export * from "./internal/data-grid/data-grid-types.js";
 export type {
@@ -36,7 +36,7 @@ export {
     roundedPoly,
     roundedRect,
     drawTextCellExternal as drawTextCell,
-} from "./internal/data-grid/data-grid-lib.js";
+} from "./internal/data-grid/render/data-grid-lib.js";
 export { CellSet } from "./internal/data-grid/cell-set.js";
 export { getDataEditorTheme as getDefaultTheme, useTheme } from "./common/styles.js";
 export { useColumnSizer } from "./data-editor/use-column-sizer.js";

packages/core/src/internal/data-grid/animation-manager.ts

@@ -1,6 +1,6 @@
 import clamp from "lodash/clamp.js";
 import type { Item } from "./data-grid-types.js";
-import { itemsAreEqual } from "./data-grid-lib.js";
+import { itemsAreEqual } from "./render/data-grid-lib.js";
 
 type StateItem = { item: Item; hoverAmount: number };
 export type HoverValues = readonly Readonly<StateItem>[];

packages/core/src/internal/data-grid/color-parser.ts

@@ -64,6 +64,19 @@ export function withAlpha(color: string, alpha: number): string {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 
+const blendResultCache = new Map<string, string>();
+
+export function blendCache(color: string, background: string | undefined): string {
+    const cacheKey = `${color}-${background}`;
+
+    const maybe = blendResultCache.get(cacheKey);
+    if (maybe !== undefined) return maybe;
+
+    const result = blend(color, background);
+    blendResultCache.set(cacheKey, result);
+    return result;
+}
+
 /** @category Drawing */
 export function blend(color: string, background: string | undefined): string {
     if (background === undefined) return color;