CartoDB · VictorVelarde · Feb 1, 2022 · Jan 11, 2022 · Jan 12, 2022 · Jan 12, 2022
diff --git a/packages/react-redux/src/slices/cartoSlice.d.ts b/packages/react-redux/src/slices/cartoSlice.d.ts
@@ -149,3 +149,5 @@ export function setDrawingToolEnabled(enabled: boolean): {
 };
 
 export function selectSpatialFilter(state: any, sourceId?: string): object | null;
+
+export function selectDrawingToolMode(state: any): string | false;
diff --git a/packages/react-redux/src/types.d.ts b/packages/react-redux/src/types.d.ts
@@ -1,7 +1,7 @@
 import { Credentials } from '@carto/react-api';
 import { OauthApp } from '@carto/react-auth';
 import { CartoBasemapsNames } from '@carto/react-basemaps';
-import { DRAW_MODES, Viewport } from '@carto/react-core';
+import { Viewport } from '@carto/react-core';
 import { Geometry } from 'geojson';
 
 export type ViewState = {
@@ -45,7 +45,7 @@ export type CartoState = {
   spatialFilter: Geometry,
   featuresReady: { [key: string]: boolean },
   drawingToolEnabled: boolean,
-  drawingToolMode: typeof DRAW_MODES
+  drawingToolMode: string
 } & InitialCartoState;
 
 export type InitialOauthState = {

diff --git a/packages/react-widgets/src/layers/DrawingToolLayer.js b/packages/react-widgets/src/layers/DrawingToolLayer.js
@@ -10,12 +10,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { EDIT_MODES } from '@carto/react-core';
 import { hexToRgb, useTheme } from '@material-ui/core';
 import { useEffect, useMemo, useState } from 'react';
+import EditableCartoGeoJsonLayer from './EditableCartoGeoJsonLayer';
 
 const { ViewMode, TranslateMode, ModifyMode, CompositeMode } = nebulaModes;
 
 const EditMode = new CompositeMode([new TranslateMode(), new ModifyMode()]);
 
-export default function DrawingToolLayer() {
+export default function DrawingToolLayer({ eventManager }) {
   const dispatch = useDispatch();
   const theme = useTheme();
   const [selectedFeatureIndex, setSelectedFeatureIndex] = useState(null);
@@ -50,7 +51,8 @@ export default function DrawingToolLayer() {
 
   const mainColor = hasGeometry && !isSelected ? secondaryAsRgba : primaryAsRgba;
 
-  return new EditableGeoJsonLayer({
+  return new EditableCartoGeoJsonLayer({
+    eventManager,
     id: 'DrawingToolLayer',
     pickable: !!selectedMode,
     data: {

diff --git a/packages/react-widgets/src/layers/EditableCartoGeoJsonLayer.js b/packages/react-widgets/src/layers/EditableCartoGeoJsonLayer.js
@@ -0,0 +1,30 @@
+import { EditableGeoJsonLayer } from '@nebula.gl/layers';
+
+const EVENT_TYPES = ['anyclick', 'pointermove', 'panstart', 'panmove', 'panend', 'keyup'];
+
+export default class EditableCartoGeoJsonLayer extends EditableGeoJsonLayer {
+  _addEventHandlers() {
+    const eventManager = this._getEventManager();
+    const { eventHandler } = this.state._editableLayerState;
+
+    for (const eventType of EVENT_TYPES) {
+      eventManager.on(eventType, eventHandler, {
+        // give nebula a higher priority so that it can stop propagation to deck.gl's map panning handlers
+        priority: 100
+      });
+    }
+  }
+
+  _removeEventHandlers() {
+    const eventManager = this._getEventManager();
+    const { eventHandler } = this.state._editableLayerState;
+
+    for (const eventType of EVENT_TYPES) {
+      eventManager.off(eventType, eventHandler);
+    }
+  }
+
+  _getEventManager() {
+    return this.props.eventManager || this.context.deck.eventManager;
+  }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -149,3 +149,5 @@ export function setDrawingToolEnabled(enabled: boolean): {
		};

		export function selectSpatialFilter(state: any, sourceId?: string): object \| null;

		export function selectDrawingToolMode(state: any): string \| false;
Copy link Contributor VictorVelarde Jan 11, 2022 • edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. If 'false' is equivalent to 'None', I think it could be better to add that option to an enum or type. What do you think? Copy link Contributor Author padawannn Jan 12, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. `selectDrawingToolMode` is a selector that return `false` if the `spatialFilter` is null in the store (the default state). I think that creating another enum type could be over-engineering Copy link Contributor VictorVelarde Jan 12, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. I just see there are other options without adding boolean to the mix: a) just an enum / type: DrawingToolMode.Type1, DrawingToolMode.Type2,... + DrawingToolMode.None, or more simple b) just respecting the null for 'None'. "selectDrawingToolMode" doesn't sound like a boolean to me, but a value from a predefined list. If required, we can later do in code something like this `const noFilter = selectDrawingToolMode === null if (noFilter) ...` What do you think? Copy link Contributor Author padawannn Jan 12, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. I've done the `b` option