[fix] Checking if drawing is active when delete an editor feature (#2093

) - prevents accidental edit of an active input
keplergl · Jan 26, 2023 · eeb50d6 · eeb50d6
1 parent d1abf3e
commit eeb50d6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 49 deletions.
diff --git a/src/components/src/editor/editor.tsx b/src/components/src/editor/editor.tsx
@@ -24,7 +24,6 @@ import window from 'global/window';
 import classnames from 'classnames';
 import get from 'lodash.get';
 import {createSelector} from 'reselect';
-
 import FeatureActionPanelFactory, {FeatureActionPanelProps} from './feature-action-panel';
 import {
   EDITOR_AVAILABLE_LAYERS,
@@ -38,7 +37,9 @@ import {Filter, FeatureSelectionContext} from '@kepler.gl/types';
 import {Feature} from '@nebula.gl/edit-modes';
 import {Datasets} from '@kepler.gl/table';
 
-const StyledWrapper = styled.div<{editor: any}>`
+const DECKGL_RENDER_LAYER = 'default-deckgl-overlay-wrapper';
+
+const StyledWrapper = styled.div`
   position: relative;
 `;
 
@@ -106,28 +107,35 @@ export default function EditorFactory(
           .concat(editorFeatures)
     );
 
+    isInFocus = () => document.activeElement?.id === DECKGL_RENDER_LAYER;
+
     _onKeyPressed = (event: KeyboardEvent) => {
-      switch (event.keyCode) {
-        case KeyEvent.DOM_VK_DELETE:
-        case KeyEvent.DOM_VK_BACK_SPACE:
-          this._onDeleteSelectedFeature();
-          break;
-        case KeyEvent.DOM_VK_ESCAPE:
-          // reset active drawing
-          if (EditorLayerUtils.isDrawingActive(true, this.props.editor.mode)) {
-            this.props.onSetEditorMode(EDITOR_MODES.EDIT);
-          }
-
-          this.props.onSelect(null);
-          break;
-        default:
-          break;
+      if (this.isInFocus()) {
+        switch (event.keyCode) {
+          case KeyEvent.DOM_VK_DELETE:
+          case KeyEvent.DOM_VK_BACK_SPACE:
+            this._onDeleteSelectedFeature();
+            break;
+          case KeyEvent.DOM_VK_ESCAPE:
+            // reset active drawing
+            if (EditorLayerUtils.isDrawingActive(true, this.props.editor.mode)) {
+              this.props.onSetEditorMode(EDITOR_MODES.EDIT);
+            }
+
+            this.props.onSelect(null);
+            break;
+          default:
+            break;
+        }
       }
     };
 
     _onDeleteSelectedFeature = () => {
       const {editor} = this.props;
-      this.props.onDeleteFeature(editor.selectedFeature || {});
+      const {selectedFeature} = editor;
+      if (selectedFeature) {
+        this.props.onDeleteFeature(selectedFeature);
+      }
     };
 
     _closeFeatureAction = () => {
@@ -138,11 +146,9 @@ export default function EditorFactory(
 
     _togglePolygonFilter = (layer: Layer) => {
       const {selectedFeature} = this.props.editor;
-      if (!selectedFeature) {
-        return;
+      if (selectedFeature) {
+        this.props.onTogglePolygonFilter(layer, selectedFeature);
       }
-
-      this.props.onTogglePolygonFilter(layer, selectedFeature);
     };
 
     render() {
@@ -154,7 +160,7 @@ export default function EditorFactory(
       const {rightClick, position, mapIndex} = selectionContext || {};
 
       return (
-        <StyledWrapper editor={editor} className={classnames('editor', className)} style={style}>
+        <StyledWrapper className={classnames('editor', className)} style={style}>
           {Boolean(rightClick) && selectedFeature && index === mapIndex ? (
             <FeatureActionPanel
               selectedFeature={selectedFeature}

diff --git a/src/components/src/map-container.tsx b/src/components/src/map-container.tsx
@@ -695,30 +695,6 @@ export default function MapContainerFactory(
       }
     }
 
-    _renderEditorContextMenu() {
-      const {visState, visStateActions, index} = this.props;
-      const {layers, datasets, editor} = visState;
-
-      return (
-        <Editor
-          index={index}
-          datasets={datasets}
-          editor={editor}
-          filters={this.polygonFiltersSelector(this.props)}
-          layers={layers}
-          onDeleteFeature={visStateActions.deleteFeature}
-          onSelect={visStateActions.setSelectedFeature}
-          onTogglePolygonFilter={visStateActions.setPolygonFilterLayer}
-          onSetEditorMode={visStateActions.setEditorMode}
-          style={{
-            pointerEvents: 'all',
-            position: 'absolute',
-            display: editor.visible ? 'block' : 'none'
-          }}
-        />
-      );
-    }
-
     _onViewportChange = ({viewState}) => {
       if (this.props.isExport) {
         // Image export map shouldn't be interactive (otherwise this callback can
@@ -823,7 +799,22 @@ export default function MapContainerFactory(
           >
             {this._renderDeckOverlay(layersForDeck, {primaryMap: true})}
             {this._renderMapboxOverlays()}
-            {this._renderEditorContextMenu()}
+            <Editor
+              index={index}
+              datasets={datasets}
+              editor={editor}
+              filters={this.polygonFiltersSelector(this.props)}
+              layers={layers}
+              onDeleteFeature={visStateActions.deleteFeature}
+              onSelect={visStateActions.setSelectedFeature}
+              onTogglePolygonFilter={visStateActions.setPolygonFilterLayer}
+              onSetEditorMode={visStateActions.setEditorMode}
+              style={{
+                pointerEvents: 'all',
+                position: 'absolute',
+                display: editor.visible ? 'block' : 'none'
+              }}
+            />
           </MapComponent>
           {mapStyle.topMapStyle || hasGeocoderLayer ? (
             <div style={MAP_STYLE.top}>

diff --git a/src/components/src/map/map-draw-panel.tsx b/src/components/src/map/map-draw-panel.tsx
@@ -57,7 +57,6 @@ function MapDrawPanelFactory(MapControlTooltip, MapControlToolbar) {
       mapControls,
       onToggleMapControl,
       onSetEditorMode,
-      onToggleEditorVisibility,
       actionIcons = defaultActionIcons
     }) => {
       const isActive = mapControls?.mapDraw?.active;