Deck.gl: right mouse button can't change viewState

[zhuweileo]

I use deckgl by this way(Using deck.gl without React).
My problem is that I can't change deckgl layer's bearing, pitch, by dragging right mouse button.
And when I click right mouse ,the context menu appears.
Beg your Help!

[Pessimistress]

At the moment you have to manually disable the context menu:

document.getElementById('container').addEventListener('contextmenu', evt => evt.preventDefault());

@ibgreen Ideally we should offer a prop for disabling the context menu?

[Pessimistress]

Hmm I tried this and right mouse button pans instead of rotate. It seems to be a bug.
https://github.com/uber/deck.gl/blob/master/modules/core/src/core/controllers/viewport-controls.js#L236
is overridden by
https://github.com/uber/deck.gl/blob/master/modules/core/src/core/controllers/map-controls.js#L35

[ibgreen]

Ideally we should offer a prop for disabling the context menu?

+1. I'm definitely in favor of supporting right mouse button, especially to make it easier to deal with supporting both pitch and pan without keyboard.

(In a similar vein, it would be cool with something like a two finger swipe to enable easy pitch tilting on mobile.)

Unless quick fixes, these sound like great requirements if we do end up working on a controller class refresh in 5.3.

[zhuweileo]

Thanks a lot!
I tried deck.gl/core version 5.2.0(the latest) from npm to handle my problem, but failed.
I can pan with the right mouse , but still can't rotate
Which version should I pick to handle my problem.
@Pessimistress

[jianhuang01]

Fxied in 5.2.1

[zhuweileo]

Thanks a lot! @jianhuang01

[hijiangtao]

Is this problem reproduced in 6.3.1? I wrote the following code and it seems the context menu appears when I right click the map, and I can't drag to rotate the map.

The code I run is the same as this demo: https://github.com/uber/deck.gl/blob/6.3-release/examples/website/3d-heatmap/app.js :-(

It seems I still need to add an event listener like this to prevent the wrapper container's right-click-menu display (the code in componentDidMount) and enable the rotate operation. My code shows below:

class SpatioTemporalMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      layerType: 'screen-grid',
    }
  }

  componentDidMount() {
    document.getElementById('gl-wrap-container').addEventListener('contextmenu', evt => evt.preventDefault());
  }

  selectLayerHandler = (e) => {
    this.setState({
      layerType: e.target.value,
    });
  }

  render() {
    const Layer = LayerMap[this.state.layerType];

    return (
      <section id="gl-wrap-container" className={styles.container}>
        <div className={styles['gl-layer']}>
          <Layer />
        </div>
      </section>
    );
  }
}

[RELNO]

As @hijiangtao mentioned, right click map rotate does not natively work. This method worked for me ("deck.gl": "^7.3.3")

  componentDidMount() {
    document
      .getElementById("deckgl-wrapper")
      .addEventListener("contextmenu", evt => evt.preventDefault());
  }

[hijiangtao]

@jianhuang01 , as @RELNO mentioned, there's more than one developer who faced the problem (with version 7.3.3+ and 6.3.1), I think we may double check whether right-click-rotate problem is solved indeed?