packages/core/src/lib/hooks/use-rect-path.ts

Read as Markdown

This is the source snapshot used to build these API details. View this revision on GitHub.

Back to reference

1 import { PixelGridAlignment } from '../types.js';
2 import { createRectanglePath } from '../geometry/rectangle.js';
3 import { resolveNumericCornerRadii } from '../geometry/rounded-corners.js';
4 import { adjustRectangleToPixelGrid } from '../util/pixel-grid-adjustments.js';
5 import { useValueMemoSlot } from './use-value-memo-slot.js';
6 
7 /**
8  * Creates a memoized Path2D for a rectangle. Useful when
9  * defining events efficiently.
10  * @param x - Horizontal rectangle origin.
11  * @param y - Vertical rectangle origin.
12  * @param width - Horizontal extent in logical units.
13  * @param height - Vertical extent in logical units.
14  * @param config - Pixel alignment, stroke width, and uniform or per-corner rounding. See
15  * {@link PixelGridAlignment} .
16  * @returns A memoized Path2D
17  *
18  * @see {@link PixelGridAlignment}
19  */
20 export function useRectPath(
21   x: number,
22   y: number,
23   width: number,
24   height: number,
25   config?: {
26     alignToPixelGrid?: PixelGridAlignment;
27     lineWidth?: number;
28     cornerRadius?: number;
29     cornerRadii?: readonly (number | null | undefined)[];
30   },
31 ): Path2D {
32   const radii = resolveNumericCornerRadii(4, config ?? {});
33   const alignToPixelGrid = config?.alignToPixelGrid;
34 
35   if (alignToPixelGrid) {
36     ({ x, y, width, height } = adjustRectangleToPixelGrid(
37       config?.lineWidth ?? 0,
38       x,
39       y,
40       width,
41       height,
42       alignToPixelGrid,
43     ));
44   }
45 
46   return useValueMemoSlot('rectPath', () => {
47     return createRectanglePath({ x, y, width, height, cornerRadii: radii });
48   }, [x, y, width, height, ...radii]);
49 }
50 

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.