Merge pull request #146 from uber/perspective-shortcut

use command | shift | ctrl | alt to enable perspective mode

CHANGELOG.md

@@ -1,3 +1,10 @@
+# Version 1.7.2
+* Use any one of the function keys {command, shift, ctrl, alt} to enable the
+  perspective mode.
+
+# Version 1.7.1
+* Bump Mapbox version to 0.26
+
 # Version 1.7.0
 
 * Provide a way to control per-layer interactivity - onClickFeatures and

README.md

@@ -111,7 +111,7 @@ Perspective mode is exposed using the `pitch` and `bearing` props
 
 In addition, the `perspectiveEnabled` prop (default: `false`)
 will activate mouse handlers that allow the user to change `pitch` and
-`bearing` using the mouse while holding down the "command" key.
+`bearing` using the mouse while holding down any function key {command, shift, ctrl, alt}.
 
 If `perspectiveEnabled` is not set to `true` then the user will not be able to
 change the pitch and bearing, which means that the default props will show

src/map-interactions.react.js

@@ -96,6 +96,7 @@ export default class MapInteractions extends Component {
     super(props);
     this.state = {
       didDrag: false,
+      isFunctionKeyPressed: false,
       startPos: null,
       pos: null,
       mouseWheelPos: null
@@ -114,6 +115,11 @@ export default class MapInteractions extends Component {
     }, new Point(0, 0));
   }
 
+  _isFunctionKeyPressed(event) {
+    return Boolean(event.metaKey || event.altKey ||
+      event.ctrlKey || event.shiftKey);
+  }
+
   @autobind
   _onMouseDown(event) {
     const pos = this._getMousePos(event);
@@ -121,7 +127,7 @@ export default class MapInteractions extends Component {
       didDrag: false,
       startPos: pos,
       pos,
-      metaKey: Boolean(event.metaKey)
+      isFunctionKeyPressed: this._isFunctionKeyPressed(event)
     });
     this.props.onMouseDown({pos});
     document.addEventListener('mousemove', this._onMouseDrag, false);
@@ -135,7 +141,7 @@ export default class MapInteractions extends Component {
       didDrag: false,
       startPos: pos,
       pos,
-      metaKey: Boolean(event.metaKey)
+      isFunctionKeyPressed: this._isFunctionKeyPressed(event)
     });
     this.props.onTouchStart({pos});
     document.addEventListener('touchmove', this._onTouchDrag, false);
@@ -146,7 +152,7 @@ export default class MapInteractions extends Component {
   _onMouseDrag(event) {
     const pos = this._getMousePos(event);
     this.setState({pos, didDrag: true});
-    if (this.state.metaKey) {
+    if (this.state.isFunctionKeyPressed) {
       const {startPos} = this.state;
       this.props.onMouseRotate({pos, startPos});
     } else {
@@ -158,7 +164,7 @@ export default class MapInteractions extends Component {
   _onTouchDrag(event) {
     const pos = this._getTouchPos(event);
     this.setState({pos, didDrag: true});
-    if (this.state.metaKey) {
+    if (this.state.isFunctionKeyPressed) {
       const {startPos} = this.state;
       this.props.onTouchRotate({pos, startPos});
     } else {

src/map.react.js

@@ -148,7 +148,7 @@ const PROP_TYPES = {
   preventStyleDiffing: PropTypes.bool,
 
   /**
-    * Enables perspective control event handling (Command-rotate)
+    * Enables perspective control event handling
     */
   perspectiveEnabled: PropTypes.bool,