RotationHandle

Read as Markdown

RotationHandle rotates its controller around the frame center. It sits 24 CSS pixels beyond the top edge and uses an 8 CSS-pixel visual with a default 24 CSS-pixel hit region. Provide a writable radians signal and enable rotate on the controller.

import { RotationHandle, useManipulation, useSignal } from "@pibbl/core";

const box = useSignal({ left: 40, top: 32, width: 180, height: 100 });
const rotation = useSignal(0);
const manipulation = useManipulation({ box, rotation, rotate: {} });

<RotationHandle controller={manipulation} />;

Related types: PibblRotationHandleProps.

Readout presentation uses style.readout with local inactive/focused/active overrides. Use formatReadout for application-defined units; labels remain inside the visible canvas. See handle guides and readouts.

Related presentation types: PibblRotationHandleStyle, PibblManipulationReadoutStyle.

API details from source

Draws an interactive handle for rotating a manipulation target.

RotationHandle: PibblPrimitiveComponent<PibblRotationHandleProps, PrimitiveInput<PibblRotationHandleProps, PibblRotationHandleStyle>>

Parameters

props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

Implementation guidance for agents

Read the Input, focus, and native HTML companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Style resize and rotation handles: Add corner handles, a rotation connector, an angle arc, and gesture readouts. Plain source

Documentation version

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