Style resize and rotation handles

Run Stop Open full page

Read as Markdown

Add corner handles, a rotation connector, an angle arc, and gesture readouts.

APIs demonstrated

• ResizeHandles from @pibbl/core
• RotationHandle from @pibbl/core
• PibblDragHandleStyle from @pibbl/core
• PibblResizeHandleStyle from @pibbl/core
• PibblResizeHandlesProps from @pibbl/core
• PibblRotationHandleProps from @pibbl/core
• PibblRotationHandleStyle from @pibbl/core
• PibblManipulationReadoutStyle from @pibbl/core
• PibblManipulationReadoutStateStyle from @pibbl/core
• PibblRotationConnectorStyle from @pibbl/core
• PibblRotationArcStyle 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,
  Rectangle,
  useSignal,
  useManipulation,
  ManipulationFrame,
  DragHandle,
  ResizeHandles,
  RotationHandle,
  type PibblDragHandleStyle,
  type PibblResizeHandleStyle,
  type PibblResizeHandlesProps,
  type PibblRotationHandleProps,
  type PibblRotationHandleStyle,
  type PibblManipulationReadoutStyle,
  type PibblManipulationReadoutStateStyle,
  type PibblRotationConnectorStyle,
  type PibblRotationArcStyle,
} from "@pibbl/core";

const focused: PibblManipulationReadoutStateStyle = {
  fill: "#b83970",
  visible: true,
};
const readout: PibblManipulationReadoutStyle = {
  font: "12px sans-serif",
  fill: "#222",
  focused,
};
const dragStyle: PibblDragHandleStyle = { readout };
const resizeStyle: PibblResizeHandleStyle = { readout };
const connector: PibblRotationConnectorStyle = {
  stroke: "#087e8b",
  strokeWidth: 2,
};
const arc: PibblRotationArcStyle = { color: "#b83970", strokeWidth: 3 };
const rotationStyle: PibblRotationHandleStyle = { connector, arc, readout };
function Scene() {
  const box = useSignal({ left: 100, top: 90, width: 180, height: 100 });
  const rotation = useSignal(0);
  const manipulation = useManipulation({
    box,
    rotation,
    move: {},
    resize: {},
    rotate: {},
  });
  const handles: PibblResizeHandlesProps = {
    controller: manipulation,
    positions: "corners",
    style: resizeStyle,
  };
  const turn: PibblRotationHandleProps = {
    controller: manipulation,
    readoutUnit: "degrees",
  };
  return (
    <ManipulationFrame {...manipulation.frameProps}>
      <DragHandle controller={manipulation} style={dragStyle}>
        <Rectangle style={{ width: "100%", height: "100%", fill: "#087e8b" }} />
      </DragHandle>
      <ResizeHandles {...handles} />
      <RotationHandle {...turn} style={rotationStyle} />
    </ManipulationFrame>
  );
}
const canvas = document.createElement("canvas");
canvas.width = 420;
canvas.height = 300;
document.body.append(canvas);
const controller = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

• Handle hit sizes and readout spacing are CSS pixels; the manipulated box remains in Pibbl logical coordinates.

Documentation version

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