Update listener on KeyUp (#364)

Update esc key press check on key up. Update popup information. Signed-off-by: Vijayan Balasubramanian <[email protected]>
opensearch-project · Mar 29, 2023 · 4fbd8b6 · 4fbd8b6
1 parent b7c1f9a
commit 4fbd8b6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * Avoid trigger tooltip from label ([#350](https://github.com/opensearch-project/dashboards-maps/pull/350))
 * Add support to build GeoShapeFilterMeta and GeoShapeFilter ([#360](https://github.com/opensearch-project/dashboards-maps/pull/360))
 * Remove cancel button on draw shape and use Escape to cancel draw ([#359](https://github.com/opensearch-project/dashboards-maps/pull/359))
+* Update listener on KeyUp ([#364](https://github.com/opensearch-project/dashboards-maps/pull/364))
 
 ### Bug Fixes
 * Fix property value undefined check ([#276](https://github.com/opensearch-project/dashboards-maps/pull/276))

diff --git a/public/components/draw/modes/rectangle.ts b/public/components/draw/modes/rectangle.ts
@@ -5,7 +5,7 @@
 
 import { Feature, GeoJSON, Position } from 'geojson';
 import { DrawCustomMode, DrawFeature, DrawPolygon, MapMouseEvent } from '@mapbox/mapbox-gl-draw';
-import {isEscapeKey} from "../../../../common/util";
+import { isEscapeKey } from '../../../../common/util';
 
 // converted to typescript from
 // https://github.com/mapbox/geojson.io/blob/main/src/ui/draw/rectangle.js
@@ -97,13 +97,17 @@ export const DrawRectangle: DrawCustomMode<DrawRectangleState, {}> = {
     }
   },
   onKeyUp(state: DrawRectangleState, e: KeyboardEvent) {
-    if (isEscapeKey(e)) {
-      // delete feature on Escape, else, onStop will append feature and fires draw.create event
+    if (!isEscapeKey(e)) {
+      return;
+    }
+    // delete feature on Escape, else, onStop will append feature and fires draw.create event
+    // @ts-ignore
+    if (state.id && this.getFeature(state.id)) {
       // @ts-ignore
       this.deleteFeature([state.id], { silent: true });
       // change mode to simple select if escape is pressed
       // @ts-ignore
-      this.changeMode('simple_select');
+      this.changeMode('simple_select', {}, { silent: true });
     }
   },
   onStop(state: DrawRectangleState) {

diff --git a/public/components/toolbar/spatial_filter/draw_tooltip.tsx b/public/components/toolbar/spatial_filter/draw_tooltip.tsx
@@ -7,7 +7,7 @@ import maplibregl, { Map as Maplibre, MapEventType, Popup } from 'maplibre-gl';
 import React, { Fragment, useEffect, useRef } from 'react';
 import { i18n } from '@osd/i18n';
 import { FILTER_DRAW_MODE } from '../../../../common';
-import {isEscapeKey} from "../../../../common/util";
+import { isEscapeKey } from '../../../../common/util';
 
 interface Props {
   map: Maplibre;
@@ -17,20 +17,24 @@ interface Props {
 
 const X_AXIS_GAP_BETWEEN_CURSOR_AND_POPUP = -12;
 const Y_AXIS_GAP_BETWEEN_CURSOR_AND_POPUP = 0;
+const KEY_UP_EVENT_TYPE = 'keyup';
+const MOUSE_MOVE_EVENT_TYPE = 'mousemove';
+const MOUSE_OUT_EVENT_TYPE = 'mouseout';
 
 const getTooltipContent = (mode: FILTER_DRAW_MODE): string => {
   switch (mode) {
     case FILTER_DRAW_MODE.POLYGON:
       return i18n.translate('maps.drawFilterPolygon.tooltipContent', {
-        defaultMessage: 'Click to start shape. Click for vertex. Double click to finish.',
+        defaultMessage:
+          'Click to start shape. Click for vertex. Double click to finish, [esc] to cancel',
       });
     case FILTER_DRAW_MODE.RECTANGLE:
       return i18n.translate('maps.drawFilterRectangle.tooltipContent', {
-        defaultMessage: 'Click and drag to draw rectangle.',
+        defaultMessage: 'Click and drag to draw rectangle, [esc] to cancel',
       });
     default:
       return i18n.translate('maps.drawFilterDefault.tooltipContent', {
-        defaultMessage: 'Click to start shape. Double click to finish.',
+        defaultMessage: 'Click to start shape. Double click to finish, [esc] to cancel',
       });
   }
 };
@@ -47,7 +51,7 @@ export const DrawTooltip = ({ map, mode, onCancel }: Props) => {
 
   useEffect(() => {
     // remove previous popup
-    function onMouseMoveMap(e: MapEventType['mousemove']) {
+    function onMouseMove(e: MapEventType['mousemove']) {
       map.getCanvas().style.cursor = 'crosshair'; // Changes cursor to '+'
       hoverPopupRef.current
         .setLngLat(e.lngLat)
@@ -56,11 +60,11 @@ export const DrawTooltip = ({ map, mode, onCancel }: Props) => {
         .addTo(map);
     }
 
-    function onMouseMoveOut() {
+    function onMouseOut() {
       hoverPopupRef.current.remove();
     }
 
-    function onKeyDown(e: KeyboardEvent) {
+    function onKeyUp(e: KeyboardEvent) {
       if (isEscapeKey(e)) {
         onCancel();
       }
@@ -70,18 +74,18 @@ export const DrawTooltip = ({ map, mode, onCancel }: Props) => {
       map.getCanvas().style.cursor = '';
       hoverPopupRef.current.remove();
       // remove tooltip when users mouse move over a point
-      map.off('mousemove', onMouseMoveMap);
-      map.off('mouseout', onMouseMoveOut);
-      map.getContainer().removeEventListener('keydown', onKeyDown);
+      map.off(MOUSE_MOVE_EVENT_TYPE, onMouseMove);
+      map.off(MOUSE_OUT_EVENT_TYPE, onMouseOut);
+      map.getContainer().removeEventListener(KEY_UP_EVENT_TYPE, onKeyUp);
     }
 
     if (map && mode === FILTER_DRAW_MODE.NONE) {
       resetAction();
     } else {
       // add tooltip when users mouse move over a point
-      map.on('mousemove', onMouseMoveMap);
-      map.on('mouseout', onMouseMoveOut);
-      map.getContainer().addEventListener('keydown', onKeyDown);
+      map.on(MOUSE_MOVE_EVENT_TYPE, onMouseMove);
+      map.on(MOUSE_OUT_EVENT_TYPE, onMouseOut);
+      map.getContainer().addEventListener(KEY_UP_EVENT_TYPE, onKeyUp);
     }
     return () => {
       // remove tooltip when users mouse move over a point