Add polygon draw mode; don't require holding Shift to draw bbox (#792)

Author: jake-low

src/components/filters/location.js

@@ -9,6 +9,7 @@ import maplibre from 'maplibre-gl';
 import {
   TerraDraw,
   TerraDrawRectangleMode,
+  TerraDrawPolygonMode,
   TerraDrawRenderMode
 } from 'terra-draw';
 import { TerraDrawMapLibreGLAdapter } from 'terra-draw-maplibre-gl-adapter';
@@ -23,16 +24,14 @@ import { nominatimSearch } from '../../network/nominatim';
 const LocationSelect = props => {
   const { name, value, placeholder, onChange } = props;
 
-  // State
   const [queryType, setQueryType] = useState('q');
   const [isLoading, setIsLoading] = useState(false);
   const [inputValue, setInputValue] = useState('');
+  const [activeMode, setActiveMode] = useState('render');
 
-  // Refs
   const mapRef = useRef(null);
   const drawRef = useRef(null);
 
-  // Query type options
   const queryTypeOptions = [
     { value: 'q', label: 'Any' },
     { value: 'city', label: 'City' },
@@ -41,7 +40,6 @@ const LocationSelect = props => {
     { value: 'country', label: 'Country' }
   ];
 
-  // Update map with new data
   const updateMap = useCallback(
     data => {
       const map = mapRef.current;
@@ -52,13 +50,7 @@ const LocationSelect = props => {
       if (map.getSource('feature')) {
         map.getSource('feature').setData(data);
       } else {
-        map.addSource('feature', {
-          type: 'geojson',
-          data: {
-            type: 'Feature',
-            geometry: data
-          }
-        });
+        map.addSource('feature', { type: 'geojson', data });
       }
 
       if (map.getLayer('geometry') === undefined) {
@@ -68,23 +60,18 @@ const LocationSelect = props => {
           source: 'feature',
           paint: {
             'fill-color': '#088',
-            'fill-opacity': 0.6
+            'fill-opacity': 0.3
           }
         });
       }
 
-      onChange('in_bbox', undefined);
-      onChange('geometry', fromJS([{ label: data, value: data }]));
-
       const bounds = bbox(data);
       map.fitBounds([bounds.slice(0, 2), bounds.slice(2)], { padding: 20 });
     },
     [onChange]
   );
 
-  // Initialize map and draw
   useEffect(() => {
-    // Create map
     const map = new maplibre.Map({
       container: 'geometry-map',
       style: '/positron.json'
@@ -96,11 +83,11 @@ const LocationSelect = props => {
     map.touchZoomRotate.disableRotation();
     map.keyboard.disableRotation();
 
-    // Create draw
     const draw = new TerraDraw({
       adapter: new TerraDrawMapLibreGLAdapter({ map, lib: maplibre }),
       modes: [
         new TerraDrawRectangleMode(),
+        new TerraDrawPolygonMode(),
         new TerraDrawRenderMode({ modeName: 'render' })
       ]
     });
@@ -110,67 +97,49 @@ const LocationSelect = props => {
     draw.on('finish', (id, context) => {
       const snapshot = draw.getSnapshot();
       const feature = snapshot.find(f => f.id === id);
-      const bounds = bbox(feature); // even though the user drew a box, 'feature' is a Polygon
-      const wsen = bounds.map(v => v.toFixed(4)).join(',');
 
-      onChange('geometry', undefined);
-      onChange('in_bbox', fromJS([{ label: wsen, value: wsen }]));
+      if (feature.geometry.type === 'Polygon') {
+        if (draw.getMode() === 'rectangle') {
+          const bounds = bbox(feature);
+          const wsen = bounds.map(v => v.toFixed(4)).join(',');
+          onChange('geometry', null);
+          onChange('in_bbox', fromJS([{ label: wsen, value: wsen }]));
+        } else {
+          onChange(
+            'geometry',
+            fromJS([{ label: feature.geometry, value: feature.geometry }])
+          );
+          onChange('in_bbox', null);
+        }
+      }
+
+      // Set mode back to render after completing a shape
+      draw.setMode('render');
+      setActiveMode('render');
+      updateMap(feature.geometry);
     });
 
-    // Store refs
     mapRef.current = map;
     drawRef.current = draw;
 
-    // Set up event listeners
-    const handleKeyDown = event => {
-      if (event.key === 'Shift') {
-        draw.clear();
-        map.getSource('feature')?.setData({
-          type: 'Feature',
-          geometry: null
-        });
-        draw.setMode('rectangle');
-      }
-    };
-
-    const handleKeyUp = event => {
-      if (event.key === 'Shift') {
-        draw.setMode('render');
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('keyup', handleKeyUp);
-
     map.on('style.load', () => {
       map.setProjection({ type: 'globe' });
 
       // Display initial bbox or polygon (if it exists) on the map
       if (value && value.size > 0) {
         const { value: geometry } = value.get(0).toJS();
-        console.log('geometry', geometry);
         if (geometry && typeof geometry === 'object') {
           // geometry is a GeoJSON polygon
           updateMap(geometry);
         } else if (geometry && typeof geometry === 'string') {
           // geometry is a bbox string (WSEN, comma-separated)
           const bounds = geometry.split(',').map(Number);
-          console.log('bounds', bounds);
-          console.log('bboxPolygon', bboxPolygon(bounds));
           updateMap(bboxPolygon(bounds).geometry);
         }
       }
     });
 
-    // Cleanup
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('keyup', handleKeyUp);
-
-      if (map) {
-        map.remove();
-      }
-    };
+    return () => map?.remove();
   }, [onChange, updateMap]);
 
   // Check if one character input is allowed (for East Asian languages)
@@ -220,15 +189,13 @@ const LocationSelect = props => {
     [queryType, isOneCharInputAllowed]
   );
 
-  // Create debounced version of loadOptions
   const debouncedLoadOptions = useCallback(
     debounce((inputValue, callback) => {
       loadOptions(inputValue).then(callback);
     }, 500),
     [loadOptions]
   );
 
-  // Handle selection change
   const handleChange = useCallback(
     selectedOption => {
       if (selectedOption) {
@@ -252,16 +219,41 @@ const LocationSelect = props => {
     [updateMap]
   );
 
-  // Handle query type change
   const handleQueryTypeChange = useCallback(selectedOption => {
     setQueryType(selectedOption.value);
   }, []);
 
-  // Handle input change
   const handleInputChange = useCallback(newValue => {
     setInputValue(newValue);
   }, []);
 
+  const handleModeChange = useCallback(mode => {
+    const draw = drawRef.current;
+    if (draw) {
+      draw.clear();
+      draw.setMode(mode);
+      setActiveMode(mode);
+    }
+  }, []);
+
+  const handleClear = useCallback(() => {
+    const draw = drawRef.current;
+    const map = mapRef.current;
+    if (draw) {
+      draw.clear();
+      draw.setMode('render');
+      setActiveMode('render');
+    }
+    if (map && map.getSource('feature')) {
+      map.getSource('feature').setData({
+        type: 'Feature',
+        geometry: null
+      });
+    }
+    onChange('geometry', null);
+    onChange('in_bbox', null);
+  }, [onChange]);
+
   return (
     <div>
       <div className="grid grid--gut12">
@@ -290,12 +282,59 @@ const LocationSelect = props => {
         </div>
       </div>
       <div className="grid grid--gut12 pt6">
-        <div className="col col--12 map-select">
+        <div className="col col--12">
+          <div className="flex-parent flex-parent--row flex-parent--center-cross mb6">
+            <div className="flex-child flex-child--no-shrink mr6">
+              <button
+                className={`btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition ${
+                  activeMode === 'rectangle'
+                    ? 'bg-darken25 bg-darken25-on-hover'
+                    : ''
+                }`}
+                onClick={() => handleModeChange('rectangle')}
+              >
+                <svg className="icon h18 w18 inline-block align-middle">
+                  <use xlinkHref="#icon-polygon" />
+                </svg>
+                Box
+              </button>
+            </div>
+            <div className="flex-child flex-child--no-shrink mr6">
+              <button
+                className={`btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition ${
+                  activeMode === 'polygon'
+                    ? 'bg-darken25 bg-darken25-on-hover'
+                    : ''
+                }`}
+                onClick={() => handleModeChange('polygon')}
+              >
+                <svg className="icon h18 w18 inline-block align-middle">
+                  <use xlinkHref="#icon-pencil" />
+                </svg>
+                Polygon
+              </button>
+            </div>
+            <div className="flex-child flex-child--no-shrink">
+              <button
+                className="btn btn--s border border--1 border--darken5 border--darken25-on-hover round bg-darken10 bg-darken5-on-hover color-gray transition"
+                onClick={handleClear}
+                title="Clear selection"
+              >
+                <svg className="icon h18 w18 inline-block align-middle">
+                  <use xlinkHref="#icon-close" />
+                </svg>
+                Clear
+              </button>
+            </div>
+          </div>
           <div id="geometry-map" />
         </div>
       </div>
       <p>
-        Hold <kbd>Shift</kbd> and click to draw a bounding box.
+        {activeMode == 'rectangle' &&
+          'Click two corners to draw a bounding box.'}
+        {activeMode == 'polygon' &&
+          'Click a series of points to draw a polygon; click back on the first point to finish.'}
       </p>
     </div>
   );

src/views/filters.js

@@ -88,20 +88,20 @@ class Filters extends React.PureComponent<void, propsType, stateType> {
     }
   };
   handleChange = (name: string, values?: filterType) => {
-    let filters = this.state.filters;
-    // if someone cleared date__gte filter
-    // we use the convention defined at `noDateGte`
-    // to signify no default gte.
-    if (name === 'date__gte' && values == null) {
-      filters = filters.merge(noDateGte);
-    } else if (values == null) {
-      // clear this filter
-      filters = filters.delete(name);
-    } else {
-      filters = filters.set(name, values);
-    }
-    return this.setState({
-      filters
+    this.setState(state => {
+      let filters = state.filters;
+      // if someone cleared date__gte filter
+      // we use the convention defined at `noDateGte`
+      // to signify no default gte.
+      if (name === 'date__gte' && values == null) {
+        filters = filters.merge(noDateGte);
+      } else if (values == null) {
+        // clear this filter
+        filters = filters.delete(name);
+      } else {
+        filters = filters.set(name, values);
+      }
+      return { filters };
     });
   };
   handleToggleAll = (name: string, values?: filterType) => {