feat: cancel brush/click event with escape key (opensearch-project#819)

packages/osd-charts/src/components/chart_container.tsx

@@ -22,7 +22,12 @@ import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import { SettingsSpec } from '../specs';
-import { onMouseUp, onMouseDown, onPointerMove } from '../state/actions/mouse';
+import { onKeyPress as onKeyPressAction } from '../state/actions/key';
+import {
+  onMouseUp as onMouseUpAction,
+  onMouseDown as onMouseDownAction,
+  onPointerMove as onPointerMoveAction,
+} from '../state/actions/mouse';
 import { GlobalChartState, BackwardRef } from '../state/chart_state';
 import { getInternalChartRendererSelector } from '../state/selectors/get_chart_type_components';
 import { getInternalPointerCursor } from '../state/selectors/get_internal_cursor_pointer';
@@ -46,9 +51,10 @@ interface ChartContainerComponentStateProps {
   ) => JSX.Element | null;
 }
 interface ChartContainerComponentDispatchProps {
-  onPointerMove: typeof onPointerMove;
-  onMouseUp: typeof onMouseUp;
-  onMouseDown: typeof onMouseDown;
+  onPointerMove: typeof onPointerMoveAction;
+  onMouseUp: typeof onMouseUpAction;
+  onMouseDown: typeof onMouseDownAction;
+  onKeyPress: typeof onKeyPressAction;
 }
 
 interface ChartContainerComponentOwnProps {
@@ -74,6 +80,7 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
     if (isChartEmpty) {
       return;
     }
+
     onPointerMove(
       {
         x: offsetX,
@@ -101,9 +108,13 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
     if (isChartEmpty) {
       return;
     }
+
     if (isBrushingAvailable) {
       window.addEventListener('mouseup', this.handleBrushEnd);
     }
+
+    window.addEventListener('keyup', this.handleKeyUp);
+
     onMouseDown(
       {
         x: offsetX,
@@ -118,6 +129,9 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
     if (isChartEmpty) {
       return;
     }
+
+    window.removeEventListener('keyup', this.handleKeyUp);
+
     onMouseUp(
       {
         x: offsetX,
@@ -127,10 +141,22 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
     );
   };
 
+  handleKeyUp = ({ key }: KeyboardEvent) => {
+    window.removeEventListener('keyup', this.handleKeyUp);
+
+    const { isChartEmpty, onKeyPress } = this.props;
+    if (isChartEmpty) {
+      return;
+    }
+
+    onKeyPress(key);
+  };
+
   handleBrushEnd = () => {
     const { onMouseUp } = this.props;
 
     window.removeEventListener('mouseup', this.handleBrushEnd);
+
     requestAnimationFrame(() => {
       onMouseUp(
         {
@@ -179,9 +205,10 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
 const mapDispatchToProps = (dispatch: Dispatch): ChartContainerComponentDispatchProps =>
   bindActionCreators(
     {
-      onPointerMove,
-      onMouseUp,
-      onMouseDown,
+      onPointerMove: onPointerMoveAction,
+      onMouseUp: onMouseUpAction,
+      onMouseDown: onMouseDownAction,
+      onKeyPress: onKeyPressAction,
     },
     dispatch,
   );

packages/osd-charts/src/state/actions/index.ts

@@ -21,6 +21,7 @@ import { ChartActions } from './chart';
 import { ChartSettingsActions } from './chart_settings';
 import { ColorsActions } from './colors';
 import { EventsActions } from './events';
+import { KeyActions } from './key';
 import { LegendActions } from './legend';
 import { MouseActions } from './mouse';
 import { SpecActions } from './specs';
@@ -33,4 +34,5 @@ export type StateActions =
   | LegendActions
   | EventsActions
   | MouseActions
+  | KeyActions
   | ColorsActions;

packages/osd-charts/src/state/actions/key.ts

@@ -0,0 +1,41 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/** @internal */
+export const ON_KEY_UP = 'ON_KEY_UP';
+
+interface KeyUpAction {
+  type: typeof ON_KEY_UP;
+  /**
+   * Keyboard key from event
+   */
+  key: string;
+}
+
+/**
+ * Action called on `keyup` event
+ * @param key keyboard key
+ * @internal
+ */
+export function onKeyPress(key: string): KeyUpAction {
+  return { type: ON_KEY_UP, key };
+}
+
+/** @internal */
+export type KeyActions = KeyUpAction;

packages/osd-charts/src/state/chart_state.ts

@@ -42,6 +42,7 @@ import { interactionsReducer } from './reducers/interactions';
 import { getInternalIsInitializedSelector, InitStatus } from './selectors/get_internal_is_intialized';
 import { getLegendItemsSelector } from './selectors/get_legend_items';
 import { LegendItemLabel } from './selectors/get_legend_items_labels';
+import { getInitialPointerState } from './utils';
 
 export type BackwardRef = () => React.RefObject<HTMLDivElement>;
 
@@ -252,20 +253,7 @@ export const getInitialState = (chartId: string): GlobalChartState => ({
   chartType: null,
   internalChartState: null,
   interactions: {
-    pointer: {
-      dragging: false,
-      current: {
-        position: {
-          x: -1,
-          y: -1,
-        },
-        time: 0,
-      },
-      down: null,
-      up: null,
-      lastDrag: null,
-      lastClick: null,
-    },
+    pointer: getInitialPointerState(),
     legendCollapsed: false,
     highlightedLegendItemKey: null,
     deselectedDataSeries: [],

packages/osd-charts/src/state/reducers/interactions.ts

@@ -20,6 +20,7 @@
 import { getSeriesIndex } from '../../chart_types/xy_chart/utils/series';
 import { LegendItem } from '../../commons/legend';
 import { SeriesIdentifier } from '../../commons/series_id';
+import { ON_KEY_UP, KeyActions } from '../actions/key';
 import {
   ON_TOGGLE_LEGEND,
   ON_LEGEND_ITEM_OUT,
@@ -30,14 +31,25 @@ import {
 } from '../actions/legend';
 import { ON_MOUSE_DOWN, ON_MOUSE_UP, ON_POINTER_MOVE, MouseActions } from '../actions/mouse';
 import { InteractionsState } from '../chart_state';
+import { getInitialPointerState } from '../utils';
 
 /** @internal */
 export function interactionsReducer(
   state: InteractionsState,
-  action: LegendActions | MouseActions,
+  action: LegendActions | MouseActions | KeyActions,
   legendItems: LegendItem[],
 ): InteractionsState {
   switch (action.type) {
+    case ON_KEY_UP:
+      if (action.key === 'Escape') {
+        return {
+          ...state,
+          pointer: getInitialPointerState(),
+        };
+      }
+
+      return state;
+
     case ON_POINTER_MOVE:
       return {
         ...state,

packages/osd-charts/src/state/utils.ts

@@ -43,3 +43,19 @@ export function isClicking(prevClick: PointerState | null, lastClick: PointerSta
   }
   return false;
 }
+
+/** @internal */
+export const getInitialPointerState = () => ({
+  dragging: false,
+  current: {
+    position: {
+      x: -1,
+      y: -1,
+    },
+    time: 0,
+  },
+  down: null,
+  up: null,
+  lastDrag: null,
+  lastClick: null,
+});