-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
Target Use Case
Use Case
When working with 2D map/diagram visualizations using OrthographicView, users often need to rotate the view to:
- CAD/Blueprint viewing: Rotate architectural drawings or engineering blueprints to match physical orientation
- Floor plan navigation: Adjust building floor plans to align with user's perspective
- Game/Simulation: Rotate 2D game maps or simulation grids
- Data visualization: Rotate chart/graph layouts for better readability or presentation
- Image annotation: Rotate reference images while annotating spatial data
Currently, OrthographicView lacks rotation support, forcing users to either:
- Pre-rotate their data (expensive and inflexible)
- Create custom extended classes (duplicated effort across projects)
This feature request has been raised before in #3290, where users expressed interest in clockwise/counterclockwise rotation controls for OrthographicView. This implementation addresses that long-standing request.
This feature enables intuitive Ctrl+drag rotation interaction and programmatic rotation control via rotateLeft(), rotateRight(), setRotation() methods.
Proposal
Proposal
1. New ViewState Property: rotationOrbit
Add rotationOrbit to OrthographicViewState for Z-axis rotation (in degrees).
<DeckGL
views={new OrthographicView()}
initialViewState={{
target: [0, 0, 0],
zoom: 1,
rotationOrbit: 45 // NEW: rotate 45° clockwise
}}
/>2. Ctrl+Drag Rotation Interaction
Enable rotation via Ctrl+drag (or Cmd+drag on Mac) when dragRotate: true (default).
<DeckGL
views={new OrthographicView({
controller: {
dragRotate: true // Enable Ctrl+drag rotation (default: true)
}
})}
/>3. Programmatic Rotation Control
Add methods to OrthographicController for programmatic rotation:
// Get the controller instance
const controller = deck.viewManager.controllers['default-view'];
// Rotate by delta angle
controller.rotate(45); // Rotate 45° clockwise
controller.rotate(-30); // Rotate 30° counter-clockwise
// Rotate by fixed amounts
controller.rotateRight(90); // Rotate 90° clockwise
controller.rotateLeft(90); // Rotate 90° counter-clockwise
// Set absolute rotation
controller.setRotation(180); // Set rotation to 180°
controller.setRotation(0); // Reset to 0°
// Get current rotation
const angle = controller.getRotation();4. ViewState Change Callback
Rotation changes are reported via onViewStateChange:
<DeckGL
onViewStateChange={({viewState}) => {
console.log('Current rotation:', viewState.rotationOrbit);
}}
/>Implementation
- OrthographicViewState: Add
rotationOrbit?: numberproperty - OrthographicViewport: Apply Z-axis rotation to view matrix via
Matrix4.rotateZ() - OrthographicController: Handle Ctrl+drag rotation and expose programmatic methods