Own a manipulation controller

Run Stop Open full page

Read as Markdown

Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly.

APIs demonstrated

• useManipulation from @pibbl/core
• ManipulationFrame from @pibbl/core
• DragHandle from @pibbl/core
• ResizeHandle from @pibbl/core
• PibblManipulationController from @pibbl/core
• PibblManipulationOptions from @pibbl/core
• PibblManipulationFrameProps from @pibbl/core
• PibblManipulationMoveInput from @pibbl/core
• PibblManipulationResizeInput from @pibbl/core
• PibblManipulationRotateInput from @pibbl/core
• PibblManipulationWhen from @pibbl/core
• PibblManipulationPoint from @pibbl/core
• PibblResizePosition from @pibbl/core
• PibblManipulationGeometry from @pibbl/core
• PibblManipulationOperation from @pibbl/core
• PibblManipulationActive from @pibbl/core
• PibblManipulationSnapshot from @pibbl/core
• PibblManipulationEvent from @pibbl/core
• PibblManipulationCommitEvent from @pibbl/core
• PibblManipulationCancelEvent from @pibbl/core
• PibblManipulationCancelReason from @pibbl/core
• PibblDragHandleProps from @pibbl/core
• PibblResizeHandleProps 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,
  ResizeHandle,
  type PibblManipulationController,
  type PibblManipulationOptions,
  type PibblManipulationFrameProps,
  type PibblManipulationMoveInput,
  type PibblManipulationResizeInput,
  type PibblManipulationRotateInput,
  type PibblManipulationWhen,
  type PibblManipulationPoint,
  type PibblResizePosition,
  type PibblManipulationGeometry,
  type PibblManipulationOperation,
  type PibblManipulationActive,
  type PibblManipulationSnapshot,
  type PibblManipulationEvent,
  type PibblManipulationCommitEvent,
  type PibblManipulationCancelEvent,
  type PibblManipulationCancelReason,
  type PibblDragHandleProps,
  type PibblResizeHandleProps,
} from "@pibbl/core";

const canvas = document.createElement("canvas");
canvas.width = 420;
canvas.height = 280;
const output = document.createElement("pre");
document.body.append(canvas, output);
let controls: PibblManipulationController | undefined;
const when: PibblManipulationWhen = "shift";
const origin: PibblManipulationPoint = { x: 0, y: 0 };
const move: PibblManipulationMoveInput = { snap: { step: 20, when, origin } };
const resize: PibblManipulationResizeInput = { minWidth: 60, minHeight: 40 };
const rotate: PibblManipulationRotateInput = { enabled: false };
function report(event: PibblManipulationEvent) {
  const geometry: PibblManipulationGeometry = event.applied;
  const operation: PibblManipulationOperation = event.operation;
  output.textContent = operation + ": " + JSON.stringify(geometry);
}
function Scene() {
  const box = useSignal({ left: 80, top: 70, width: 180, height: 100 });
  const rotation = useSignal(0);
  const options: PibblManipulationOptions = {
    box,
    rotation,
    move,
    resize,
    rotate,
    onChange: report,
    onCommit(event: PibblManipulationCommitEvent) {
      report(event);
      output.textContent += " committed=" + event.changed;
    },
    onCancel(event: PibblManipulationCancelEvent) {
      const reason: PibblManipulationCancelReason = event.reason;
      output.textContent = "Cancelled: " + reason;
    },
  };
  const manipulation = useManipulation(options);
  controls = manipulation;
  const active: PibblManipulationActive | null = manipulation.active.get();
  const snapshot: PibblManipulationSnapshot | null = manipulation.snapshot.get();
  const frame: PibblManipulationFrameProps = manipulation.frameProps;
  const drag: PibblDragHandleProps = { controller: manipulation };
  const position: PibblResizePosition = "bottom-right";
  const corner: PibblResizeHandleProps = { controller: manipulation, position };
  return (
    <ManipulationFrame {...frame}>
      <DragHandle {...drag}>
        <Rectangle
          style={{
            width: "100%",
            height: "100%",
            fill: active ? "#b83970" : "#087e8b",
            opacity: snapshot?.snapActive ? 0.7 : 1,
          }}
        />
      </DragHandle>
      <ResizeHandle {...corner} />
    </ManipulationFrame>
  );
}
const controller = pibbl(canvas, <Scene />);
const cancel = document.createElement("button");
cancel.textContent = "Cancel gesture";
cancel.onclick = () => controls?.cancel();
document.body.append(cancel);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

• Hold Shift while moving to snap to the 20-unit grid. Keep handles inside their controller’s ManipulationFrame.

Documentation version

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