Draft: Canvas overlay

packages/constants/constants.ts

@@ -182,6 +182,7 @@ export const LINE_TYPE_SCALE = 'lineType';
 export const LINEAR_COLOR_SCALE = 'linearColor';
 export const LINE_WIDTH_SCALE = 'lineWidth';
 export const OPACITY_SCALE = 'opacity';
+export const PATTERN_SCALE = 'pattern';
 export const SYMBOL_SHAPE_SCALE = 'symbolShape';
 export const SYMBOL_SIZE_SCALE = 'symbolSize';
 export const SYMBOL_PATH_WIDTH_SCALE = 'symbolPathWidth';

packages/react-spectrum-charts-s2/src/RscChart.tsx

@@ -57,6 +57,7 @@ export const RscChart = ({ ref, ...props }: RscChartProps & { ref?: Ref<ChartHan
     opacities,
     onVegaViewReady,
     padding,
+    patterns,
     renderer,
     symbolShapes = DEFAULT_SYMBOL_SHAPES,
     symbolSizes = DEFAULT_SYMBOL_SIZES as [SymbolSize, SymbolSize],
@@ -89,6 +90,7 @@ export const RscChart = ({ ref, ...props }: RscChartProps & { ref?: Ref<ChartHan
     lineTypes,
     lineWidths,
     opacities,
+    patterns,
     colorScheme,
     title,
     UNSAFE_vegaSpec,

packages/react-spectrum-charts-s2/src/VegaChart.test.tsx

@@ -13,6 +13,7 @@ import { render, waitFor } from '@testing-library/react';
 import { Spec, View, expressionFunction } from 'vega';
 import embed from 'vega-embed';
 
+import { clearPatternFillRegistry, registerPatternFill } from './utils';
 import { VegaChart, VegaChartProps, resizeView } from './VegaChart';
 
 jest.mock('vega-embed');
@@ -141,3 +142,57 @@ describe('VegaChart init render cycle', () => {
 		await waitFor(() => expect(mockEmbed).toHaveBeenCalledTimes(1));
 	});
 });
+
+describe('canvas pattern-fill interception', () => {
+	const patternId = 'test-stripe';
+	const patternSpec = {
+		marks: [{ encode: { enter: { fill: { value: { pattern: patternId } } } } }],
+	} as unknown as Spec;
+
+	let renderedCanvas: HTMLCanvasElement | undefined;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		clearPatternFillRegistry();
+		registerPatternFill({ id: patternId, tileSize: { width: 4, height: 4 }, draw: jest.fn() });
+		renderedCanvas = undefined;
+		mockEmbed.mockImplementation((container) => {
+			renderedCanvas = document.createElement('canvas');
+			(container as HTMLElement).appendChild(renderedCanvas);
+			return Promise.resolve({ view: createMockView() } as unknown as Awaited<ReturnType<typeof embed>>);
+		});
+	});
+
+	test('engages the interception when renderer is canvas and the spec has a pattern-fill reference', async () => {
+		render(<VegaChart {...defaultProps} renderer="canvas" spec={patternSpec} />);
+
+		await waitFor(() => expect(mockEmbed).toHaveBeenCalledTimes(1));
+
+		const ctx = renderedCanvas?.getContext('2d') as CanvasRenderingContext2D;
+		ctx.fillStyle = { pattern: patternId } as unknown as string;
+
+		expect(ctx.fillStyle).not.toEqual({ pattern: patternId });
+	});
+
+	test('does not engage the interception when renderer is svg', async () => {
+		render(<VegaChart {...defaultProps} renderer="svg" spec={patternSpec} />);
+
+		await waitFor(() => expect(mockEmbed).toHaveBeenCalledTimes(1));
+
+		const ctx = renderedCanvas?.getContext('2d') as CanvasRenderingContext2D;
+		ctx.fillStyle = { pattern: patternId } as unknown as string;
+
+		expect(ctx.fillStyle).toBe('#000000');
+	});
+
+	test('does not engage the interception when the spec has no pattern-fill reference', async () => {
+		render(<VegaChart {...defaultProps} renderer="canvas" spec={defaultSpec} />);
+
+		await waitFor(() => expect(mockEmbed).toHaveBeenCalledTimes(1));
+
+		const ctx = renderedCanvas?.getContext('2d') as CanvasRenderingContext2D;
+		ctx.fillStyle = { pattern: patternId } as unknown as string;
+
+		expect(ctx.fillStyle).toBe('#000000');
+	});
+});

packages/react-spectrum-charts-s2/src/VegaChart.tsx

@@ -22,6 +22,7 @@ import { ChartData, UserMeta, applyUserMetaConfigPatches, getVegaEmbedOptions }
 import { useDebugSpec } from './hooks/useDebugSpec';
 import { extractValues, isVegaData } from './hooks/useSpec';
 import { ChartProps } from './types';
+import { patchCanvasContextForPatternFill, specHasPatternFill } from './utils';
 
 // Register a custom expression function that returns the full container width (including axis space).
 // `view._viewWidth` is the container width minus spec-level padding; adding padding back gives the
@@ -136,6 +137,10 @@ export const VegaChart: FC<VegaChartProps> = ({
       embed(containerRef.current, specCopy, { ...embedOptions, config: finalConfig, tooltip }).then(({ view }) => {
         chartView.current = view;
         onNewView(view);
+        if (renderer === 'canvas' && specHasPatternFill(specCopy)) {
+          const ctx = containerRef.current?.querySelector('canvas')?.getContext('2d');
+          if (ctx) patchCanvasContextForPatternFill(ctx);
+        }
         view.resize();
         view.runAsync();
         // One additional render to settle all resize calculations

packages/react-spectrum-charts-s2/src/components/Bar/Bar.tsx

@@ -30,6 +30,7 @@ const Bar: FC<BarProps> = ({
   type = 'stacked',
   opacity = { value: 1 },
   lineType = { value: 'solid' },
+  pattern,
   orientation = 'vertical',
   trellisOrientation = 'horizontal',
   trellisPadding = TRELLIS_PADDING,

packages/react-spectrum-charts-s2/src/hooks/useSpec.tsx

@@ -35,6 +35,7 @@ export default function useSpec({
   lineTypes,
   lineWidths,
   opacities,
+  patterns,
   symbolShapes,
   symbolSizes,
   title,
@@ -68,6 +69,7 @@ export default function useSpec({
       lineTypes,
       lineWidths,
       opacities,
+      patterns,
       symbolShapes,
       symbolSizes,
       title,
@@ -91,6 +93,7 @@ export default function useSpec({
     lineTypes,
     lineWidths,
     opacities,
+    patterns,
     symbolShapes,
     symbolSizes,
     title,