packages/core/src/lib/components/g.ts
This is the source snapshot used to build these API details. View this revision on GitHub.
1 import type { PibblDragHandleStyle } from '../manipulation/handles.js';
2 import type { HtmlBoxStyle } from '../html/types.js';
3 import { definePrimitive } from '../define-primitive.js';
4 import { PibblNodeInput, SystemStyle } from '../types.js';
5 import type { PibblPhysics2DPropExtension } from '../types.js';
6 import {
7 createGroupTransform,
8 setPrimitivePresentation,
9 } from '../primitive-presentation.js';
10 import { stripLayoutParticipation } from '../style/resolve-built-in.js';
11 import {
12 type PibblStructuralEventProps,
13 wireStructuralEvents,
14 } from './structural-events.js';
15 import type {
16 BoxStyle,
17 LayoutItemStyle,
18 ResolvedDrawingStyle,
19 } from '../style/types.js';
20
21 /**
22 * Authored inputs for Group, including the declared data and presentation options.
23 *
24 * @see {@link PibblPhysics2DPropExtension}
25 * @see {@link PibblNodeInput}
26 * @see {@link Group}
27 */
28 export interface GroupProps extends PibblStructuralEventProps, PibblPhysics2DPropExtension {
29 /** Descendant content or the callback that supplies it. See {@link PibblNodeInput}. */
30 children: PibblNodeInput;
31 }
32
33 /**
34 * Transforms, layout participation, and shared style properties for Group.
35 *
36 * @see {@link SystemStyle}
37 * @see {@link BoxStyle}
38 * @see {@link LayoutItemStyle}
39 * @see {@link Group}
40 * @see {@link PibblDragHandleStyle}
41 * @see {@link HtmlBoxStyle}
42 */
43 export interface GStyle extends SystemStyle, BoxStyle, LayoutItemStyle {
44 /** Horizontal scale factor. See {@link GStyle}. */
45 scaleX?: number;
46 /** Vertical scale factor. See {@link GStyle}. */
47 scaleY?: number;
48 /** Clockwise rotation in degrees. */
49 rotationDegrees?: number;
50 /** Point around which the rotation is applied. See {@link GStyle}. */
51 rotationOrigin?: [number, number];
52 /** Horizontal translation in the current logical coordinate system. See {@link GStyle}. */
53 translateX?: number;
54 /** Vertical translation in the current logical coordinate system. See {@link GStyle}. */
55 translateY?: number;
56 /** Horizontal skew angle in degrees. */
57 skewX?: number;
58 /** Vertical skew angle in degrees. */
59 skewY?: number;
60 }
61
62 type ResolvedGStyle = ResolvedDrawingStyle<GStyle>;
63
64 function renderGroup(
65 props: GroupProps,
66 ) {
67 wireStructuralEvents(props);
68 return props.children;
69 }
70
71 /**
72 * Describes a transformation group 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 GroupProps}
79 * @see {@link GStyle}
80 */
81 export const Group = definePrimitive<
82 GroupProps,
83 GStyle,
84 GStyle,
85 ResolvedGStyle
86 >(renderGroup, {
87 childInput: 'structural',
88 resolveStyle: style => stripLayoutParticipation(style) as ResolvedGStyle,
89 });
90
91 setPrimitivePresentation<ResolvedGStyle>(Group, style => ({
92 transform: createGroupTransform(style),
93 }));
94 Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.