diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx index 65aae102d..452cfd9b9 100644 --- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx +++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx @@ -168,7 +168,7 @@ function CustomAoI({ }); const pids = mbDraw.add(fc); setPresetIds(pids); - mbDraw.changeMode('simple_select', { + mbDraw.changeMode('simple_static', { featureIds: pids }); diff --git a/app/scripts/components/common/map/controls/aoi/index.tsx b/app/scripts/components/common/map/controls/aoi/index.tsx index 6578800aa..ddf7debf0 100644 --- a/app/scripts/components/common/map/controls/aoi/index.tsx +++ b/app/scripts/components/common/map/controls/aoi/index.tsx @@ -1,4 +1,5 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw'; +import StaticMode from '@mapbox/mapbox-gl-draw-static-mode'; import { useTheme } from 'styled-components'; import { useAtomValue } from 'jotai'; import { useRef } from 'react'; @@ -9,11 +10,23 @@ import { computeDrawStyles } from './style'; type DrawControlProps = MapboxDraw.DrawOptions; +// Overriding the dragMove and dragFeature methods of the +// 'simple_select' and the 'direct_select' modes to avoid +// accidentally dragging the selected or hand-drawn AOIs +const customSimpleSelect = { + ...MapboxDraw.modes.simple_select, + dragMove() { return; } +}; + +const customDirectSelect = { + ...MapboxDraw.modes.direct_select, + dragFeature() { return; }, +}; + export default function DrawControl(props: DrawControlProps) { const theme = useTheme(); const control = useRef(); const aoisFeatures = useAtomValue(aoisFeaturesAtom); - const { onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois(); useControl( @@ -21,6 +34,12 @@ export default function DrawControl(props: DrawControlProps) { control.current = new MapboxDraw({ displayControlsDefault: false, styles: computeDrawStyles(theme), + modes: { + ...MapboxDraw.modes, + simple_static: StaticMode, + simple_select: customSimpleSelect, + direct_select: customDirectSelect + }, ...props }); return control.current; diff --git a/package.json b/package.json index 7e8a11d7f..d6a25cadd 100644 --- a/package.json +++ b/package.json @@ -113,6 +113,7 @@ "@emotion/react": "^11.11.3", "@floating-ui/react": "^0.25.1", "@mapbox/mapbox-gl-draw": "^1.3.0", + "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1", "@mapbox/mapbox-gl-geocoder": "^5.0.1", "@parcel/transformer-raw": "~2.7.0", "@reactour/tour": "^3.6.1", diff --git a/yarn.lock b/yarn.lock index c09c18bf8..3375f12ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2144,6 +2144,11 @@ resolved "http://verdaccio.ds.io:4873/@mapbox%2fjsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234" integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ= +"@mapbox/mapbox-gl-draw-static-mode@^1.0.1": + version "1.0.1" + resolved "http://verdaccio.ds.io:4873/@mapbox%2fmapbox-gl-draw-static-mode/-/mapbox-gl-draw-static-mode-1.0.1.tgz#da873099b60acaf91790b961ce84b2c762815041" + integrity sha512-r/y50dlRJ8ctK5YdhAzimiKIu/R2b0GkGoExw7zWn17CDTn2ftGqsljJOlfLXf5rH15Wv75t1EN9KsM6OkdhWQ== + "@mapbox/mapbox-gl-draw@^1.3.0": version "1.3.0" resolved "http://verdaccio.ds.io:4873/@mapbox%2fmapbox-gl-draw/-/mapbox-gl-draw-1.3.0.tgz#7a30fb99488cb47a32c25e99c3c62413b04bbaed"