Drag, resize, and rotate

Use the convenience component with a writable geometry box.

APIs demonstrated

Manipulable from @pibbl/core
PibblManipulableProps from @pibbl/core
PibblManipulationBox from @pibbl/core
degrees from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import {
  pibbl,
  Manipulable,
  Rectangle,
  useSignal,
  degrees,
  type PibblManipulableProps,
  type PibblManipulationBox,
} from "@pibbl/core";

function Scene() {
  const box = useSignal<PibblManipulationBox>({
    left: 80,
    top: 70,
    width: 180,
    height: 100,
  });
  const rotation = useSignal(degrees(10));
  const { width, height } = box.get();
  const props: PibblManipulableProps = {
    style: box,
    rotation,
    draggable: true,
    resizable: true,
    rotatable: true,
  };
  return (
    <Manipulable {...props}>
      <Rectangle style={{ width, height, fill: "#087e8b" }} />
    </Manipulable>
  );
}
const canvas = document.createElement("canvas");
canvas.width = 420;
canvas.height = 280;
document.body.append(canvas);
const controller = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

Angles are radians; degrees() converts author-friendly degrees. The mounted component owns input listeners and gesture cleanup.

Documentation version

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