POC: overlapping feature selection

uber · Oct 7, 2020 · a62aa6f · a62aa6f
1 parent e804189
commit a62aa6f
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 20 deletions.
diff --git a/examples/editor/example.js b/examples/editor/example.js
@@ -3,8 +3,8 @@
 import * as React from 'react';
 import DeckGL from '@deck.gl/react';
 import { EditableGeoJsonLayer } from '@nebula.gl/layers';
-import { Toolbox } from '@nebula.gl/editor';
-import { ViewMode } from '@nebula.gl/edit-modes';
+import { Toolbox, OverlappingSelection } from '@nebula.gl/editor';
+import { SelectMode } from '@nebula.gl/edit-modes';
 import { StaticMap } from 'react-map-gl';
 
 const MAPBOX_ACCESS_TOKEN =
@@ -22,7 +22,9 @@ export function Example() {
     features: [
       {
         type: 'Feature',
-        properties: {},
+        properties: {
+          name: 'My feature 1',
+        },
         geometry: {
           type: 'Polygon',
           coordinates: [
@@ -38,7 +40,9 @@ export function Example() {
       },
       {
         type: 'Feature',
-        properties: {},
+        properties: {
+          name: 'My feature 2',
+        },
         geometry: {
           type: 'Polygon',
           coordinates: [
@@ -54,18 +58,19 @@ export function Example() {
       },
     ],
   });
-  const [selectedFeatureIndexes, setSelectedFeatureIndexes] = React.useState([0]);
-  const [mode, setMode] = React.useState(() => ViewMode);
+  const [selection, setSelection] = React.useState({ selectedIndexes: [0] });
+  const [mode, setMode] = React.useState(() => SelectMode);
   const [modeConfig, setModeConfig] = React.useState({});
 
   const layer = new EditableGeoJsonLayer({
     data: geoJson,
     mode,
     modeConfig,
-    selectedFeatureIndexes,
+    selectedFeatureIndexes: selection.selectedIndexes,
     onEdit: ({ updatedData }) => {
       setGeoJson(updatedData);
     },
+    onSelectionChanged: setSelection,
   });
 
   return (
@@ -77,14 +82,6 @@ export function Example() {
         }}
         layers={[layer]}
         getCursor={layer.getCursor.bind(layer)}
-        onClick={(info) => {
-          if (mode === ViewMode)
-            if (info) {
-              setSelectedFeatureIndexes([info.index]);
-            } else {
-              setSelectedFeatureIndexes([]);
-            }
-        }}
       >
         <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
       </DeckGL>
@@ -103,6 +100,8 @@ export function Example() {
         }
         onSetGeoJson={setGeoJson}
       />
+
+      <OverlappingSelection data={geoJson} selection={selection} onSetSelection={setSelection} />
     </>
   );
 }
diff --git a/examples/editor/yarn.lock b/examples/editor/yarn.lock
diff --git a/modules/edit-modes/src/index.ts b/modules/edit-modes/src/index.ts
@@ -1,3 +1,6 @@
+// Utils
+import * as utils from './utils';
+
 export type { EditMode } from './lib/edit-mode';
 export type { GeoJsonEditModeType } from './lib/geojson-edit-mode';
 export type { GeoJsonEditModeConstructor } from './lib/geojson-edit-mode';
@@ -32,6 +35,7 @@ export { ImmutableFeatureCollection } from './lib/immutable-feature-collection';
 
 // Other modes
 export { ViewMode } from './lib/view-mode';
+export { SelectMode } from './lib/select-mode';
 export { MeasureDistanceMode } from './lib/measure-distance-mode';
 export { MeasureAreaMode } from './lib/measure-area-mode';
 export { MeasureAngleMode } from './lib/measure-angle-mode';
@@ -44,6 +48,7 @@ export { default as _memoize } from './memoize';
 export type {
   ScreenCoordinates,
   EditAction,
+  SelectionContext,
   Pick,
   ClickEvent,
   PointerMoveEvent,
@@ -81,6 +86,4 @@ export type {
   AnyGeoJson,
 } from './geojson-types';
 
-// Utils
-import * as utils from './utils';
 export { utils };