feat: Streamlined rectangle drag-to-filter for map layers (#3402)

* feat: streamlined rectangle selection for filtering map layers

Improve the "Draw on Map" rectangle selection UX with a smoother
click-and-drag workflow that automatically filters all visible layers.

- Default to "Draw Rectangle" mode when toggling on "Draw on Map"
- Enable drag-to-draw for rectangles (click-hold-drag-release)
- Auto-apply polygon filter to all visible layers on rectangle completion
- Switch to edit/move mode after drawing so users can reposition
- Update tooltip to reflect new drag interaction
- Preserve original click-to-draw behavior for polygon drawing

Made-with: Cursor

* feat: support both click-move-click and drag-to-draw for rectangle selection

Add DrawRectangleModeExtended that removes the mutually exclusive
dragToDraw guards so both gestures work: existing users can still
click-move-click while new users can click-drag-release.

Made-with: Cursor

* feat: enhance polygon filter functionality with layer visibility support

Updated the setPolygonFilterAllLayersUpdater function to allow filtering based on visible layer IDs. This change improves the flexibility of the polygon filter by enabling it to utilize a provided list of visible layers, falling back to the existing visible layers in the state if the list is not available.

- Changed variable declaration from 'let' to 'const' for newState.
- Introduced a check for visibleLayerIds to streamline layer filtering.

Author: lixun910

src/actions/src/action-types.ts

@@ -189,6 +189,7 @@ export const ActionTypes = {
   // geo-operations
   SET_FEATURES: `${ACTION_PREFIX}SET_FEATURES`,
   SET_POLYGON_FILTER_LAYER: `${ACTION_PREFIX}SET_POLYGON_FILTER_LAYER`,
+  SET_POLYGON_FILTER_ALL_LAYERS: `${ACTION_PREFIX}SET_POLYGON_FILTER_ALL_LAYERS`,
   DELETE_FEATURE: `${ACTION_PREFIX}DELETE_FEATURE`,
   TOGGLE_EDITOR_VISIBILITY: `${ACTION_PREFIX}TOGGLE_EDITOR_VISIBILITY`,
 

src/actions/src/vis-state-actions.ts

@@ -1401,6 +1401,27 @@ export function setPolygonFilterLayer(
   };
 }
 
+export type SetPolygonFilterAllLayersUpdaterAction = {
+  feature: Feature;
+};
+/**
+ * Apply the provided feature as a polygon filter to all layers.
+ * @memberof visStateActions
+ * @param feature
+ * @returns action
+ */
+export function setPolygonFilterAllLayers(
+  feature: Feature
+): Merge<
+  SetPolygonFilterAllLayersUpdaterAction,
+  {type: typeof ActionTypes.SET_POLYGON_FILTER_ALL_LAYERS}
+> {
+  return {
+    type: ActionTypes.SET_POLYGON_FILTER_ALL_LAYERS,
+    feature
+  };
+}
+
 export type SetSelectedFeatureUpdaterAction = {
   feature: Feature | null;
   selectionContext?: FeatureSelectionContext;

src/components/src/map-container.tsx

@@ -908,6 +908,7 @@ export default function MapContainerFactory(
                 editorMenuActive,
                 onSetFeatures: setFeatures,
                 setSelectedFeature,
+                onApplyPolygonFilterAll: visStateActions.setPolygonFilterAllLayers,
                 // @ts-ignore Argument of type 'Readonly<MapContainerProps>' is not assignable to parameter of type 'never'
                 featureCollection: this.featureCollectionSelector(this.props),
                 selectedFeatureIndexes: this.selectedFeatureIndexArraySelector(

src/components/src/map/map-draw-panel.tsx

@@ -46,10 +46,12 @@ function MapDrawPanelFactory(
       actionIcons = defaultActionIcons
     }) => {
       const isActive = mapControls?.mapDraw?.active;
-      const onToggleMenuPanel = useCallback(
-        () => onToggleMapControl('mapDraw'),
-        [onToggleMapControl]
-      );
+      const onToggleMenuPanel = useCallback(() => {
+        if (!isActive) {
+          onSetEditorMode(EDITOR_MODES.DRAW_RECTANGLE);
+        }
+        onToggleMapControl('mapDraw');
+      }, [isActive, onToggleMapControl, onSetEditorMode]);
       if (!mapControls?.mapDraw?.show) {
         return null;
       }

src/layers/src/editor-layer/draw-rectangle-mode-extended.ts

@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+import {DrawRectangleMode} from '@deck.gl-community/editable-layers';
+
+/**
+ * Extends DrawRectangleMode to support both click-move-click and
+ * click-drag-release interactions for drawing rectangles.
+ *
+ * The base TwoClickPolygonMode treats these as mutually exclusive via
+ * the `dragToDraw` modeConfig flag. This subclass removes those guards
+ * so both gestures work simultaneously:
+ * - Click → move → click  (original two-click behavior)
+ * - Mousedown → drag → mouseup  (drag-to-draw behavior)
+ */
+export class DrawRectangleModeExtended extends DrawRectangleMode {
+  handleClick(event, props) {
+    // Always handle clicks (no dragToDraw guard)
+    this.addClickSequence(event);
+    this.checkAndFinishPolygon(props);
+  }
+
+  handleStartDragging(event, _props) {
+    // Always handle drag start (no dragToDraw guard)
+    this.addClickSequence(event);
+    event.cancelPan();
+  }
+
+  handleStopDragging(event, props) {
+    // Always handle drag stop (no dragToDraw guard)
+    this.addClickSequence(event);
+    this.checkAndFinishPolygon(props);
+  }
+}

src/layers/src/editor-layer/editor-layer-utils.ts

@@ -162,7 +162,12 @@ export function getTooltip(
       return null;
     }
 
-    return getTooltipObject('Click to start new feature', theme, {
+    const tooltipText =
+      editor.mode === EDITOR_MODES.DRAW_RECTANGLE
+        ? 'Click or drag to draw rectangle'
+        : 'Click to start new feature';
+
+    return getTooltipObject(tooltipText, theme, {
       leftOfCursor: closeToLeftEdge,
       aboveCursor: closeToBottomEdge
     });

src/layers/src/editor-layer/editor-layer.ts

@@ -7,7 +7,6 @@ import {
   DrawPolygonMode,
   TranslateMode,
   CompositeMode,
-  DrawRectangleMode,
   GeoJsonEditMode
 } from '@deck.gl-community/editable-layers';
 import {PathStyleExtension} from '@deck.gl/extensions';
@@ -19,6 +18,7 @@ import {generateHashId} from '@kepler.gl/common-utils';
 import {EDIT_TYPES} from './constants';
 import {LINE_STYLE, FEATURE_STYLE, EDIT_HANDLE_STYLE} from './feature-styles';
 import {ModifyModeExtended} from './modify-mode-extended';
+import {DrawRectangleModeExtended} from './draw-rectangle-mode-extended';
 import {isDrawingActive} from './editor-layer-utils';
 
 const DEFAULT_COMPOSITE_MODE = new CompositeMode([
@@ -31,6 +31,7 @@ export type GetEditorLayerProps = {
   editor: Editor;
   onSetFeatures: (features: Feature[]) => any;
   setSelectedFeature: (feature: Feature | null, selectionContext?: FeatureSelectionContext) => any;
+  onApplyPolygonFilterAll?: (feature: Feature) => any;
   viewport: Viewport;
   featureCollection: {
     type: string;
@@ -55,6 +56,7 @@ export function getEditorLayer({
   editor,
   onSetFeatures,
   setSelectedFeature,
+  onApplyPolygonFilterAll,
   featureCollection,
   selectedFeatureIndexes,
   viewport
@@ -66,7 +68,7 @@ export function getEditorLayer({
     // @ts-ignore
     if (editorMode === EDITOR_MODES.DRAW_POLYGON) mode = DrawPolygonMode;
     // @ts-ignore
-    else if (editorMode === EDITOR_MODES.DRAW_RECTANGLE) mode = DrawRectangleMode;
+    else if (editorMode === EDITOR_MODES.DRAW_RECTANGLE) mode = DrawRectangleModeExtended;
   }
 
   // @ts-ignore
@@ -100,7 +102,13 @@ export function getEditorLayer({
             if (lastFeature.properties) lastFeature.properties.isClosed = true;
             lastFeature.id = generateHashId(6);
             onSetFeatures(updatedData.features as unknown as Feature[]);
-            setSelectedFeature(lastFeature as unknown as Feature);
+
+            const isRectangle = lastFeature.properties?.shape === 'Rectangle';
+            if (isRectangle && onApplyPolygonFilterAll) {
+              onApplyPolygonFilterAll(lastFeature as unknown as Feature);
+            } else {
+              setSelectedFeature(lastFeature as unknown as Feature);
+            }
           }
           break;
         }

src/reducers/src/layer-utils.ts

@@ -388,6 +388,7 @@ export type ComputeDeckLayersProps = {
       feature: Feature | null,
       selectionContext?: FeatureSelectionContext
     ) => any;
+    onApplyPolygonFilterAll?: (feature: Feature) => any;
     featureCollection: {
       type: string;
       features: Feature[];

src/reducers/src/vis-state-updaters.ts

@@ -3188,7 +3188,12 @@ export function setFeaturesUpdater(
       ...state.editor,
       // only save none filter features to editor
       features: features.filter(f => !getFilterIdInFeature(f)),
-      mode: lastFeature && lastFeature.properties?.isClosed ? EDITOR_MODES.EDIT : state.editor.mode
+      mode:
+        lastFeature && lastFeature.properties?.isClosed
+          ? lastFeature.properties?.shape === 'Rectangle'
+            ? state.editor.mode
+            : EDITOR_MODES.EDIT
+          : state.editor.mode
     }
   };
 
@@ -3361,6 +3366,42 @@ export function setPolygonFilterLayerUpdater(
   });
 }
 
+/**
+ * Apply polygon filter to all visible layers
+ * @memberof visStateUpdaters
+ */
+export function setPolygonFilterAllLayersUpdater(
+  state: VisState,
+  payload: VisStateActions.SetPolygonFilterAllLayersUpdaterAction
+): VisState {
+  const {feature} = payload;
+
+  const newFilter = generatePolygonFilter([], feature);
+  const filterIdx = state.filters.length;
+
+  const newState: VisState = {
+    ...state,
+    filters: [...state.filters, newFilter],
+    editor: {
+      ...state.editor,
+      features: state.editor.features.filter(f => f.id !== feature.id),
+      selectedFeature: newFilter.value,
+      mode: EDITOR_MODES.EDIT
+    }
+  };
+
+  const visibleLayerIds = get(payload, 'visibleLayerIds');
+  const allLayerIds = Array.isArray(visibleLayerIds)
+    ? visibleLayerIds
+    : state.layers.filter(l => l.config.isVisible).map(l => l.id);
+
+  return setFilterUpdater(newState, {
+    idx: filterIdx,
+    prop: 'layerId',
+    value: allLayerIds
+  });
+}
+
 /**
  * @memberof visStateUpdaters
  * @public

src/reducers/src/vis-state.ts

@@ -121,6 +121,8 @@ const actionHandler = {
 
   [ActionTypes.SET_POLYGON_FILTER_LAYER]: visStateUpdaters.setPolygonFilterLayerUpdater,
 
+  [ActionTypes.SET_POLYGON_FILTER_ALL_LAYERS]: visStateUpdaters.setPolygonFilterAllLayersUpdater,
+
   [ActionTypes.SET_SELECTED_FEATURE]: visStateUpdaters.setSelectedFeatureUpdater,
 
   [ActionTypes.SET_EDITOR_MODE]: visStateUpdaters.setEditorModeUpdater,