# packages/core/src/lib/components/clip.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/clip.ts#L67). [Back to reference](/reference/components/clip/)

1 import { portablePath } from '../html/portable-clips.js';
2 import { definePrimitive } from '../define-primitive.js';
3 import { PathGeometry } from '../geometry/path-geometry.js';
4 import { resolvePath } from '../geometry/resolve-path.js';
5 import { PibblNodeInput, SystemStyle } from '../types.js';
6 import { setPrimitivePresentation } from '../primitive-presentation.js';
7 import { stripLayoutParticipation } from '../style/resolve-built-in.js';
8 import {
9   type PibblStructuralEventProps,
10   wireStructuralEvents,
11 } from './structural-events.js';
12 import type {
13   BoxStyle,
14   LayoutItemStyle,
15   ResolvedDrawingStyle,
16 } from '../style/types.js';
17 
18 /**
19  * Authored inputs for Clip, including the declared data and presentation options.
20  *
21  * @see {@link PibblNodeInput}
22  * @see {@link Clip}
23  */
24 export interface ClipProps extends PibblStructuralEventProps {
25   /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */
26   children: PibblNodeInput;
27 }
28 
29 /**
30  * Supported geometry and presentation properties for Clip.
31  *
32  * @see {@link SystemStyle}
33  * @see {@link BoxStyle}
34  * @see {@link LayoutItemStyle}
35  * @see {@link PathGeometry}
36  * @see {@link Clip}
37  */
38 export interface ClipStyle extends SystemStyle, BoxStyle, LayoutItemStyle {
39   /**
40    * Geometry to draw or clip, supplied in the declared path representation. See
41    * {@link PathGeometry}.
42    */
43   d: Path2D | PathGeometry;
44   /** Canvas winding rule used to determine the path interior. See {@link ClipStyle}. */
45   fillRule?: CanvasFillRule;
46 }
47 
48 type ResolvedClipStyle = ResolvedDrawingStyle<ClipStyle>;
49 
50 function renderClip(
51   props: ClipProps,
52 ) {
53   wireStructuralEvents(props);
54   return props.children;
55 }
56 
57 /**
58  * Describes a clipping container for JSX or createElement authoring.
59  *
60  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
61  * props and style types.
62  * @throws When called directly; Pibbl mounts this component through JSX or createElement.
63  *
64  * @see {@link ClipProps}
65  * @see {@link ClipStyle}
66  */
67 export const Clip = definePrimitive<
68   ClipProps,
69   ClipStyle,
70   ClipStyle,
71   ResolvedClipStyle
72 >(renderClip, {
73   childInput: 'structural',
74   resolveStyle: style => stripLayoutParticipation(style) as ResolvedClipStyle,
75 });
76 
77 setPrimitivePresentation<ResolvedClipStyle>(Clip, style => {
78   const { d, fillRule = 'nonzero' } = style;
79   return { clip: { path: resolvePath(d), fillRule, svgPath: portablePath(d) } };
80 });
81

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