React: eventManager listens to all children (#4013)

examples/layer-browser/package.json

@@ -20,7 +20,7 @@
     "react": "^16.3.0",
     "react-autobind": "^1.0.6",
     "react-dom": "^16.3.0",
-    "react-map-gl": "^5.0.0",
+    "react-map-gl": "^5.1.0",
     "react-stats-zavatta": "^0.0.6"
   },
   "devDependencies": {

examples/layer-browser/src/app.js

@@ -227,7 +227,11 @@ export default class App extends PureComponent {
       });
     } else if (multiview) {
       views = [
-        new FirstPersonView({id: 'first-person', height: '50%', position: [0, 0, 50]}),
+        new FirstPersonView({
+          id: 'first-person',
+          height: '50%',
+          viewState: {id: 'basemap', position: [0, 0, 50]}
+        }),
         new MapView({
           id: 'basemap',
           controller: true,

examples/layer-browser/src/map.js

@@ -30,6 +30,23 @@ const VIEW_LABEL_STYLES = {
   color: '#FFFFFF'
 };
 
+const INITIAL_VIEW_STATES = {
+  basemap: {
+    latitude: 37.752,
+    longitude: -122.427,
+    zoom: 11.5,
+    pitch: 0,
+    bearing: 0
+  },
+  infovis: {
+    target: [0, 0, 0],
+    zoom: 3,
+    rotationX: -30,
+    rotationOrbit: 30,
+    orbitAxis: 'Y'
+  }
+};
+
 const ViewportLabel = props => (
   <div style={{position: 'absolute'}}>
     <div style={{...VIEW_LABEL_STYLES, display: ''}}>{props.children}</div>
@@ -42,20 +59,6 @@ export default class Map extends PureComponent {
     autobind(this);
 
     this.state = {
-      mapViewState: {
-        latitude: 37.752,
-        longitude: -122.427,
-        zoom: 11.5,
-        pitch: 0,
-        bearing: 0
-      },
-      orbitViewState: {
-        target: [0, 0, 0],
-        zoom: 3,
-        rotationX: -30,
-        rotationOrbit: 30,
-        orbitAxis: 'Y'
-      },
       hoveredItem: null,
       clickedItem: null,
       queriedItems: null,
@@ -110,17 +113,6 @@ export default class Map extends PureComponent {
     this.setState({metrics: Object.assign({}, metrics)});
   }
 
-  _onViewStateChange({viewState, viewId}) {
-    if (viewId === 'infovis') {
-      this.setState({orbitViewState: viewState});
-      return;
-    }
-    if (viewState.pitch > 60) {
-      viewState.pitch = 60;
-    }
-    this.setState({mapViewState: viewState});
-  }
-
   _onHover(info) {
     this.setState({hoveredItem: info});
   }
@@ -142,12 +134,12 @@ export default class Map extends PureComponent {
   }
 
   render() {
-    const {orbitViewState, mapViewState, hoveredItem, clickedItem, queriedItems} = this.state;
+    const {hoveredItem, clickedItem, queriedItems} = this.state;
     const {
       layers,
       views,
       effects,
-      settings: {infovis, pickingRadius, drawPickingColors, useDevicePixels}
+      settings: {pickingRadius, drawPickingColors, useDevicePixels}
     } = this.props;
 
     return (
@@ -161,8 +153,7 @@ export default class Map extends PureComponent {
           layers={layers}
           layerFilter={this._layerFilter}
           views={views}
-          viewState={infovis ? orbitViewState : mapViewState}
-          onViewStateChange={this._onViewStateChange}
+          initialViewState={INITIAL_VIEW_STATES}
           effects={effects}
           pickingRadius={pickingRadius}
           onHover={this._onHover}

modules/core/src/lib/deck.js

@@ -592,7 +592,7 @@ export default class Deck {
     timeline.play();
     this.animationLoop.attachTimeline(timeline);
 
-    this.eventManager = new EventManager(gl.canvas, {
+    this.eventManager = new EventManager(this.props.parent || gl.canvas, {
       touchAction: this.props.touchAction,
       events: {
         pointerdown: this._onPointerDown,
@@ -717,10 +717,10 @@ export default class Deck {
 
     // If initialViewState was set on creation, auto track position
     if (this.viewState) {
-      this.viewState[params.viewId] = viewState;
+      this.viewState = {...this.viewState, [params.viewId]: viewState};
       if (!this.props.viewState) {
         // Apply internal view state
-        this.viewManager.setProps({viewState: {...this.viewState}});
+        this.viewManager.setProps({viewState: this.viewState});
       }
     }
   }

modules/react/src/deckgl.js

@@ -39,6 +39,9 @@ export default class DeckGL extends React.Component {
     // The redraw flag of deck
     this._needsRedraw = null;
 
+    // Refs
+    this._containerRef = React.createRef();
+
     // Bind public methods
     this.pickObject = this.pickObject.bind(this);
     this.pickMultipleObjects = this.pickMultipleObjects.bind(this);
@@ -59,7 +62,10 @@ export default class DeckGL extends React.Component {
       this.deck ||
       new DeckClass(
         Object.assign({}, this.props, {
-          canvas: this.deckCanvas,
+          parent: this._containerRef.current,
+          style: null,
+          width: '100%',
+          height: '100%',
           // The Deck's animation loop is independent from React's render cycle, causing potential
           // synchronization issues. We provide this custom render function to make sure that React
           // and Deck update on the same schedule.
@@ -158,6 +164,9 @@ export default class DeckGL extends React.Component {
     // extract any deck.gl layers masquerading as react elements from props.children
     const {layers, views} = this._parseJSX(props);
     const deckProps = Object.assign({}, props, {
+      style: null,
+      width: '100%',
+      height: '100%',
       layers,
       views
     });
@@ -180,20 +189,14 @@ export default class DeckGL extends React.Component {
       ContextProvider: this.props.ContextProvider
     });
 
-    // TODO - this styling is enforced for correct positioning with children
-    // It can override the styling set by `Deck`, this should be consolidated.
-    // Note that width and height are handled by deck.gl
-    const style = Object.assign({}, {position: 'absolute', left: 0, top: 0}, this.props.style);
-
-    const canvas = createElement('canvas', {
-      ref: c => (this.deckCanvas = c),
-      key: 'deck-canvas',
-      id: this.props.id,
-      style
-    });
+    // This styling is enforced for correct positioning with children
+    const style = Object.assign(
+      {position: 'absolute', left: 0, top: 0, width: this.props.width, height: this.props.height},
+      this.props.style
+    );
 
     // Render deck.gl as the last child
-    return createElement('div', {id: 'deckgl-wrapper'}, [children, canvas]);
+    return createElement('div', {id: 'deckgl-wrapper', ref: this._containerRef, style}, children);
   }
 }
 

modules/react/src/utils/position-children-under-views.js

@@ -55,9 +55,7 @@ export default function positionChildrenUnderViews({children, viewports, deck, C
     const style = {
       position: 'absolute',
       // Use child's z-index for ordering
-      zIndex: childStyle && childStyle.zIndex,
-      // If this container is on top, it will block interaction with the deck canvas
-      pointerEvents: 'none',
+      zIndex: childStyle ? childStyle.zIndex : -1,
       left: x,
       top: y,
       width,
@@ -70,7 +68,10 @@ export default function positionChildrenUnderViews({children, viewports, deck, C
         viewport,
         container: deck.canvas.offsetParent,
         eventManager: deck.eventManager,
-        onViewStateChange: deck._onViewStateChange
+        onViewStateChange: params => {
+          params.viewId = viewId;
+          deck._onViewStateChange(params);
+        }
       };
       viewChildren = createElement(ContextProvider, {value: contextValue}, viewChildren);
     }