# packages/core/src/lib/components/rect.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/lib/components/rect.ts#L96). [Back to reference](/reference/components/rectangle/)

1 import { definePrimitive } from '../define-primitive.js';
2 import type {
3   PibblEventFocusOptions,
4   PibblEventHandlers,
5   PibblEventParticipationOptions,
6 } from '../events/types.js';
7 import { RenderingContext2D } from '../types.js';
8 import type { PibblPhysics2DPropExtension } from '../types.js';
9 import {
10   resolveRequiredLength,
11   stripLayoutParticipation,
12 } from '../style/resolve-built-in.js';
13 import type { RectStyle, ResolvedRectStyle } from '../style/types.js';
14 import { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';
15 import { adjustRectangleToPixelGrid } from '../util/pixel-grid-adjustments.js';
16 import { renderPath } from './path.js';
17 import { createRectanglePath } from '../geometry/rectangle.js';
18 import { resolveRoundedCornerStyle } from './rounded-corner-style.js';
19 
20 /**
21  * Authored inputs for Rectangle, including the declared data and presentation options.
22  *
23  * @see {@link PibblEventHandlers}
24  * @see {@link PibblEventParticipationOptions}
25  * @see {@link PibblPhysics2DPropExtension}
26  * @see {@link Rectangle}
27  */
28 export interface RectangleProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}
29 
30 function renderRectangle(
31   props: RectangleProps,
32   style: Readonly<ResolvedRectStyle>,
33   ctx: RenderingContext2D,
34 ) {
35   let {
36     x = 0,
37     y = 0,
38     width,
39     height,
40     alignToPixelGrid,
41     cornerRadius,
42     cornerRadii,
43     ...pathStyle
44   } = style;
45 
46   if (alignToPixelGrid) {
47     ({ x, y, width, height } = adjustRectangleToPixelGrid(
48       style.strokeWidth ?? 0,
49       x,
50       y,
51       width,
52       height,
53       alignToPixelGrid,
54     ));
55   }
56 
57   const rectPath = createRectanglePath({
58     x,
59     y,
60     width,
61     height,
62     cornerRadius,
63     cornerRadii,
64   });
65 
66   renderPath(
67     {
68       ...props,
69       keyboardNavigationBounds: props.keyboardNavigationBounds ?? {
70         x,
71         y,
72         width,
73         height,
74       },
75     },
76     {
77       ...pathStyle,
78       d: rectPath,
79     },
80     ctx,
81     { x, y, width, height },
82     cornerRadius === undefined && cornerRadii === undefined,
83   );
84 }
85 
86 /**
87  * Describes a rectangle primitive for JSX or createElement authoring.
88  *
89  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
90  * props and style types.
91  * @throws When called directly; Pibbl mounts this component through JSX or createElement.
92  *
93  * @see {@link RectangleProps}
94  * @see {@link RectStyle}
95  */
96 export const Rectangle = definePrimitive<
97   RectangleProps,
98   RectStyle,
99   RectStyle,
100   ResolvedRectStyle
101 >(renderRectangle, {
102   resolveStyle: (style, context) => ({
103     ...stripLayoutParticipation(style),
104     x: 0,
105     y: 0,
106     width: resolveRequiredLength(
107       style.width,
108       context.percentageBasis.width,
109       'width',
110       context,
111     ),
112     height: resolveRequiredLength(
113       style.height,
114       context.percentageBasis.height,
115       'height',
116       context,
117     ),
118     ...resolveRoundedCornerStyle(4, style, context),
119   }) as ResolvedRectStyle,
120 });
121 registerOpaqueStyleProperties(Rectangle, ['fill', 'stroke', 'cursor']);
122

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