Manipulable

Read as Markdown

Bind style to a writable finite box signal. draggable, resizable, and rotatable accept booleans or their operation options; omitted operations are disabled. Rotation also requires a writable radians signal. Nested layouts consume the resized frame allocation.

import { Manipulable, Rectangle, useSignal } from "@pibbl/core";

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

function Card() {
  return <Rectangle style={{ width: 180, height: 100, fill: "#2563eb" }} />;
}

<Manipulable style={box} draggable resizable>
  <Card />
</Manipulable>;

Use useManipulation with explicit handles when only part of the content should initiate dragging.

Related types: PibblManipulableProps.

Configure handle presentation with resizeHandles={{ style: { readout: { gap: 5 } }, formatReadout }} and rotationHandle={{ style: { arc: true, readout: true }, readoutUnit: "degrees" }}. resizeHandles also accepts the existing positions shorthand.

dragHandle forwards move-readout styling and formatReadout({ left, top }) to the content wrapper. The wrapper uses participating child hit areas; it does not make gaps or an empty component draggable. Use explicit DragHandle composition to limit movement to a title bar or grip.

API details from source

Compose the same signal-owned frame and handles used by useManipulation.

Manipulable: (props: PibblManipulableProps) => PibblNode

Related API: Manipulable, PibblManipulableProps, PibblNode.

Parameters

props — Manipulation controller and child content. See PibblManipulableProps.

Returns

Child content with manipulation interaction applied. See PibblNode.

Implementation guidance for agents

Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Drag, resize, and rotate: Use the convenience component with a writable geometry box. Plain source

Documentation version

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