Add mapbox-gl draw mode (#347)

* Add mapbox-gl draw mode if tooltip state is draw , mount mapbox-gl-draw and change mode accordingly. Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>
opensearch-project · Mar 15, 2023 · 4f108ec · 4f108ec
1 parent e1a4b45
commit 4f108ec
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * Update tooltip behavior change ([#317](https://github.com/opensearch-project/dashboards-maps/pull/317))
 * Update max supported layer count ([#332](https://github.com/opensearch-project/dashboards-maps/pull/332))
 * BWC for document layer label textType ([#340](https://github.com/opensearch-project/dashboards-maps/pull/340))
+* Add mapbox-gl draw mode ([#347](https://github.com/opensearch-project/dashboards-maps/pull/347))
 
 ### Bug Fixes
 * Fix property value undefined check ([#276](https://github.com/opensearch-project/dashboards-maps/pull/276))

diff --git a/common/index.ts b/common/index.ts
@@ -156,6 +156,13 @@ export enum FILTER_DRAW_MODE {
   POLYGON = 'polygon', // Filter is active and set to draw polygon
 }
 
+export const MAPBOX_GL_DRAW_CREATE_LISTENER = 'draw.create';
+
+export enum MAPBOX_GL_DRAW_MODES {
+  DRAW_POLYGON = 'draw_polygon',
+  SIMPLE_SELECT = 'simple_select',
+}
+
 export interface DrawFilterProperties {
   relation?: string;
   mode: FILTER_DRAW_MODE;
@@ -165,4 +172,4 @@ export interface DrawFilterProperties {
 export const DRAW_FILTER_SHAPE_TITLE = 'DRAW SHAPE';
 export const DRAW_FILTER_POLYGON_DEFAULT_LABEL = 'polygon';
 export const DRAW_FILTER_POLYGON = 'Draw Polygon';
-export const DRAW_FILTER_POLYGON_RELATIONS = ['intersects', 'disjoint', 'within'];
+export const DRAW_FILTER_SPATIAL_RELATIONS = ['intersects', 'disjoint', 'within'];
diff --git a/public/components/map_container/map_container.tsx b/public/components/map_container/map_container.tsx
@@ -10,6 +10,7 @@ import { LayerControlPanel } from '../layer_control_panel';
 import './map_container.scss';
 import { DrawFilterProperties, FILTER_DRAW_MODE, MAP_INITIAL_STATE } from '../../../common';
 import { MapLayerSpecification } from '../../model/mapLayerType';
+import { DrawFilterShape } from '../toolbar/spatial_filter/draw_filter_shape';
 import {
   Filter,
   IndexPattern,
@@ -232,6 +233,13 @@ export const MapContainer = ({
       {mounted && Boolean(maplibreRef.current) && (
         <DrawTooltip map={maplibreRef.current!} mode={filterProperties.mode} />
       )}
+      {mounted && maplibreRef.current && tooltipState === TOOLTIP_STATE.FILTER_DRAW_SHAPE && (
+        <DrawFilterShape
+          map={maplibreRef.current}
+          filterProperties={filterProperties}
+          updateFilterProperties={setFilterProperties}
+        />
+      )}
       <div className="SpatialFilterToolbar-container">
         {mounted && (
           <SpatialFilterToolbar

diff --git a/public/components/toolbar/spatial_filter/draw_filter_shape.tsx b/public/components/toolbar/spatial_filter/draw_filter_shape.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useEffect, useRef } from 'react';
+import { IControl, Map as Maplibre } from 'maplibre-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { Feature } from 'geojson';
+import {
+  DrawFilterProperties,
+  FILTER_DRAW_MODE,
+  MAPBOX_GL_DRAW_MODES,
+  MAPBOX_GL_DRAW_CREATE_LISTENER,
+} from '../../../../common';
+
+interface DrawFilterShapeProps {
+  filterProperties: DrawFilterProperties;
+  map: Maplibre;
+  updateFilterProperties: (properties: DrawFilterProperties) => void;
+}
+
+export const DrawFilterShape = ({
+  filterProperties,
+  map,
+  updateFilterProperties,
+}: DrawFilterShapeProps) => {
+  const onDraw = (event: { features: Feature[] }) => {
+    updateFilterProperties({
+      mode: FILTER_DRAW_MODE.NONE,
+    });
+  };
+  const mapboxDrawRef = useRef<MapboxDraw>(
+    new MapboxDraw({
+      displayControlsDefault: false,
+    })
+  );
+
+  useEffect(() => {
+    if (map) {
+      map.addControl((mapboxDrawRef.current as unknown) as IControl, 'top-right');
+      map.on(MAPBOX_GL_DRAW_CREATE_LISTENER, onDraw);
+    }
+    return () => {
+      if (map) {
+        map.off(MAPBOX_GL_DRAW_CREATE_LISTENER, onDraw);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        map.removeControl((mapboxDrawRef.current as unknown) as IControl);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (filterProperties.mode === FILTER_DRAW_MODE.POLYGON) {
+      mapboxDrawRef.current.changeMode(MAPBOX_GL_DRAW_MODES.DRAW_POLYGON);
+    } else {
+      // default mode
+      mapboxDrawRef.current.changeMode(MAPBOX_GL_DRAW_MODES.SIMPLE_SELECT);
+    }
+  }, [filterProperties.mode]);
+
+  return <Fragment />;
+};
diff --git a/public/components/toolbar/spatial_filter/filter_by_polygon.tsx b/public/components/toolbar/spatial_filter/filter_by_polygon.tsx
@@ -11,7 +11,7 @@ import {
   DrawFilterProperties,
   DRAW_FILTER_POLYGON,
   DRAW_FILTER_POLYGON_DEFAULT_LABEL,
-  DRAW_FILTER_POLYGON_RELATIONS,
+  DRAW_FILTER_SPATIAL_RELATIONS,
   DRAW_FILTER_SHAPE_TITLE,
 } from '../../../../common';
 import { FILTER_DRAW_MODE } from '../../../../common';
@@ -52,7 +52,7 @@ export const FilterByPolygon = ({
         <FilterInputPanel
           drawLabel={DRAW_FILTER_POLYGON}
           defaultFilterLabel={DRAW_FILTER_POLYGON_DEFAULT_LABEL}
-          relations={DRAW_FILTER_POLYGON_RELATIONS}
+          relations={DRAW_FILTER_SPATIAL_RELATIONS}
           onSubmit={onSubmit}
           mode={FILTER_DRAW_MODE.POLYGON}
         />