DrawPolygonByDraggingMode doesn't trigger onSelect in SelectionLayer

[jwill490]

Describe the bug

When using the DrawPolygonByDraggingMode in conjunction with the SelectionLayer (and selectionType: 'polygon'), the onSelect event isn't triggered.

For example, if you use the regular DrawPolygon mode, after drawing a polygon the onSelect function is triggered by the SelectionLayer. At that point I'm able to view the selected items in that layer contained within the polygon (e.g. icons from the IconLayer).

This functionality doesn't seem to work at all when using the DrawPolygonByDraggingMode.

Actual Result

When DrawPolygonByDraggingMode, onSelect isn't triggered by the SelectionLayer.

Expected Result

After drawing a polygon with DrawPolygonByDraggingMode, the items within the polygon should be "selected" and viewable via SelectionLayer functions.

Reproduce Steps

import React, {useEffect} from "react";
import ReactDOM from "react-dom";
import DeckGL from "deck.gl";
import {IconLayer} from '@deck.gl/layers';
import {
  EditableGeoJsonLayer,
  DrawPolygonByDraggingMode, ViewMode, DrawPolygonMode
} from "nebula.gl";
import { StaticMap } from "react-map-gl";
import {apiTest} from "./apiTest";
import {SelectionLayer} from "@nebula.gl/layers";

const MAPBOX_ACCESS_TOKEN =
  "";

const initialViewState = {
  longitude: -80.843124,
  latitude: 35.227085,
  zoom: 12
};

const ICON_MAPPING = {
  marker: {x: 0, y: 0, width: 128, height: 128, mask: true}
};

export default function NebulaTest() {
  const [features, setFeatures] = React.useState({
    type: "FeatureCollection",
    features: []
  });
  const [mode, setMode] = React.useState(() => ViewMode);
  const [selectedFeatureIndexes] = React.useState([]);
  const [data, setData] = React.useState([]);

  useEffect(() => {
    apiTest().then(r => setData(r));
    return () => {
      setData([]); // This worked for me
    };
  }, []);

  const layer = new EditableGeoJsonLayer({
    id: "geojson-layer",
    data: features,
    mode,
    selectedFeatureIndexes,
    onEdit: ({ updatedData }) => {
      setFeatures(updatedData);
    }
  });

  const layer2 = new IconLayer({
    id: 'icon-layer',
    data,
    pickable: true,
    // iconAtlas and iconMapping are required
    iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
    iconMapping: ICON_MAPPING,
    getIcon: d => 'marker',
    sizeScale: 5,
    getPosition: d => d.coordinates,
    getSize: d => 3,
    getColor: d => [0, 73, 144]
  });

  const layer3 = new SelectionLayer({
    id: 'selection',
    selectionType: 'polygon',
    onSelect: ({ pickingInfos }) => {
      console.log(pickingInfos);
    },
    layerIds: ['icon-layer'],
  });

  return (
    <>
      <DeckGL
        initialViewState={initialViewState}
        controller={{
          doubleClickZoom: false
        }}
        layers={[layer, layer2, layer3]}
        getCursor={layer.getCursor.bind(layer)}
      >
        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
      <div style={{ position: "absolute", top: 0, right: 0, color: "white" }}>
        <button
          onClick={() => {
            mode === DrawPolygonByDraggingMode ? setMode(() => ViewMode) : setMode(() => DrawPolygonByDraggingMode);
          }}
          style={{ background: mode === DrawPolygonByDraggingMode ? "#3090e0" : null }}
        >
          Polygon
        </button>
      </div>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<NebulaTest />, rootElement);

Would be happy to try and tackle this with some guidance on where to start!

Screenshots

To Do List

• [ ] Add label and assign to milestone
• [ ] Coding
• [ ] Test