Skip to content

[Feat] Add rotation support for OrthographicView #9980

@aivis-sjlee

Description

@aivis-sjlee

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:

  1. Pre-rotate their data (expensive and inflexible)
  2. 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?: number property
  • OrthographicViewport: Apply Z-axis rotation to view matrix via Matrix4.rotateZ()
  • OrthographicController: Handle Ctrl+drag rotation and expose programmatic methods

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions