ResizeHandle

Read as Markdown

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

ResizeHandle draws a small frame-corner or frame-edge control and uses a CSS-pixel hit target. Its position selects the edge or corner; hitSize defaults to 24 CSS pixels.

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

<ResizeHandle controller={manipulation} position="bottom-right" />;

Related types: PibblResizeHandleProps, PibblResizePosition.

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: PibblResizeHandleStyle, PibblManipulationReadoutStyle.

API details from source

Draws an interactive handle for one edge or corner of a manipulation target.

ResizeHandle: PibblPrimitiveComponent<PibblResizeHandleProps, PrimitiveInput<PibblResizeHandleProps, PibblResizeHandleStyle>>

Related API: ResizeHandle, PibblPrimitiveComponent, PibblResizeHandleProps, PrimitiveInput, PibblResizeHandleStyle.

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.

See also

PibblResizeHandleProps

PibblResizeHandleStyle

View source — packages/core/src/lib/manipulation/handles.ts:411

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

• Own a manipulation controller: Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly. Plain source

Documentation version

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