packages/core/src/lib/components/path.ts

This is the source snapshot used to build these API details. View this revision on GitHub.
1 import type { SvgPathProps } from './svg-path.js';
2 import { drawSimpleStretchedTexture, resolveTexturePaint } from '../textures/texture-protocol.js';
3 import { getLayoutBox } from '../layout/context.js';
4 import { resolvePath } from '../geometry/resolve-path.js';
5 import { definePrimitive } from '../define-primitive.js';
6 import type {
7   PibblEventFocusOptions,
8   PibblEventHandlers,
9   PibblEventParticipationOptions,
10 } from '../events/types.js';
11 import { RenderingContext2D } from '../types.js';
12 import type { PibblPhysics2DPropExtension } from '../types.js';
13 import { stripLayoutParticipation } from '../style/resolve-built-in.js';
14 import { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';
15 import type { PathStyle, ResolvedPathStyle } from '../style/types.js';
16 import type { StyleResolutionContext } from '../types.js';
17 import { isTransparent } from '../util/is-transparent.js';
18 import { wireCommonEvents } from '../util/wire-common-events.js';
19 
20 /**
21  * Authored inputs for Path, including the declared data and presentation options.
22  *
23  * @see {@link PibblEventHandlers}
24  * @see {@link PibblEventParticipationOptions}
25  * @see {@link PibblPhysics2DPropExtension}
26  * @see {@link Path}
27  * @see {@link SvgPathProps}
28  */
29 export interface PathProps extends PibblEventHandlers, PibblEventFocusOptions, PibblEventParticipationOptions, PibblPhysics2DPropExtension {}
30 
31 export function renderPath(
32   props: PathProps,
33   style: Readonly<ResolvedPathStyle>,
34   ctx: RenderingContext2D,
35   paintBounds = getLayoutBox(),
36   directTextureFill = false,
37 ) {
38   const {
39     d: input,
40     fill,
41     stroke,
42     strokeWidth,
43     opacity,
44     cursor,
45     lineInteractionWidth = strokeWidth ?? 0,
46   } = style;
47 
48   const d = resolvePath(input);
49 
50   if (opacity !== undefined) {
51     ctx.globalAlpha = ctx.globalAlpha * opacity;
52   }
53 
54   if (fill && !isTransparent(fill)) {
55     if (!directTextureFill || (stroke && strokeWidth && strokeWidth > 0) ||
56       !drawSimpleStretchedTexture(fill, ctx, paintBounds)) {
57       ctx.fillStyle = resolveTexturePaint(fill, ctx, paintBounds);
58       ctx.fill(d);
59     }
60   }
61 
62   if (stroke && strokeWidth && strokeWidth > 0) {
63     ctx.strokeStyle = resolveTexturePaint(stroke, ctx, paintBounds);
64     ctx.lineWidth = strokeWidth;
65     ctx.stroke(d);
66   }
67 
68   wireCommonEvents(props, d, !!fill, lineInteractionWidth, cursor);
69 }
70 
71 /**
72  * Describes a Canvas path primitive for JSX or createElement authoring.
73  *
74  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
75  * props and style types.
76  * @throws When called directly; Pibbl mounts this component through JSX or createElement.
77  *
78  * @see {@link PathProps}
79  * @see {@link PathStyle}
80  */
81 export const Path = definePrimitive<
82   PathProps,
83   PathStyle,
84   PathStyle,
85   ResolvedPathStyle
86 >(renderPath, {
87   resolveStyle: resolvePathStyle,
88 });
89 registerOpaqueStyleProperties(Path, ['fill', 'stroke', 'cursor']);
90 
91 function resolvePathStyle(
92   style: Readonly<PathStyle>,
93   _context: Readonly<StyleResolutionContext>,
94 ): Readonly<ResolvedPathStyle> {
95   return stripLayoutParticipation(style) as ResolvedPathStyle;
96 }
97
Documentation version

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