Rotation control overlay demo

About the overlay

RotationControlOverlay adds a rotate toolbar button, a Paper.js overlay, and wires the internal RotationControlTool (you normally do not construct the tool yourself). It extends ViewerOverlayBase, so it can register with a configuration widget when one is attached to the viewer first.

How to use

  • Click the rotate button on the viewer toolbar to activate the overlay.
  • Click the control boxes at the cardinal directions (N, E, S, W) to jump to those angles.
  • Click and drag the cross-hair controller to move the rotation center.
  • Click and drag the indicator dot to set orientation directly.
  • Click and drag elsewhere on the viewer: a line shows the axis from the center to the cursor for alignment with image features.
  • While the overlay is active, hold Shift to pan/zoom; the rotation UI returns after the key is released.
  • Press Escape to deactivate the overlay.

Scenario 1: Overlay only

No configuration widget; only the rotation overlay (see demo/rotation.mjs).

Scenario 2: Overlay + configuration widget

Open the gear menu to show or hide the rotate toolbar button and to activate/deactivate the overlay from the configuration panel (same pattern as other ViewerOverlayBase overlays).