ManipulationFrame

Read as Markdown

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

ManipulationFrame establishes the local box and coordinate space for one controller. Spread controller.frameProps onto it. Handles for that controller must be descendants of this frame, and a controller may attach to one frame.

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

<ManipulationFrame {...manipulation.frameProps}>
  <Rectangle style={{ width: 180, height: 100, fill: "#2563eb" }} />
</ManipulationFrame>;

Related types: PibblManipulationController, PibblManipulationFrameProps.

API details from source

Provides a manipulation controller and its presentation frame to descendant handles.

ManipulationFrame: PibblPrimitiveComponent<FrameProps, PrimitiveInput<FrameProps, FrameStyle>>

Related API: ManipulationFrame, PibblPrimitiveComponent, PrimitiveInput.

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

PibblManipulationFrameProps

View source — packages/core/src/lib/manipulation/frame.ts:73

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 2dccb19. ALPHA — NOT FOR PRODUCTION USE.