ResizeHandles

Read as Markdown

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

ResizeHandles renders corner handles by default. Set positions to "edges-and-corners" or provide exact PibblResizePosition values. hitSize applies to every generated handle.

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

<ResizeHandles controller={manipulation} positions="edges-and-corners" />;

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

Creates the configured collection of resize handles around a manipulation target.

ResizeHandles: (props: PibblResizeHandlesProps) => PibblNode

Parameters

props — Controller, handle placement, and presentation options. See PibblResizeHandlesProps .

Returns

Pibbl nodes rendering the resize handles. See PibblNode.

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.