[maps] keydown+scroll to zoom (#135330)

* [maps] shift+scroll to zoom * content * only enable keydown scroll zoom in embeddable * scss lint fix * one more scss lint fix * replace shift with control * lint * use smaller css transition so message hides faster when keydown+scrolling * h3 and small text * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss Co-authored-by: Michael Marcialis <[email protected]> * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss Co-authored-by: Michael Marcialis <[email protected]> * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx Co-authored-by: Michael Marcialis <[email protected]> * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx Co-authored-by: Michael Marcialis <[email protected]> * clean-up Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Michael Marcialis <[email protected]>
elastic · Jun 30, 2022 · 4a82f98 · 4a82f98
1 parent 40359a6
commit 4a82f98
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 25 deletions.
diff --git a/x-pack/plugins/maps/public/actions/map_action_constants.ts b/x-pack/plugins/maps/public/actions/map_action_constants.ts
@@ -38,7 +38,6 @@ export const REMOVE_TRACKED_LAYER_STATE = 'REMOVE_TRACKED_LAYER_STATE';
 export const SET_OPEN_TOOLTIPS = 'SET_OPEN_TOOLTIPS';
 export const UPDATE_DRAW_STATE = 'UPDATE_DRAW_STATE';
 export const UPDATE_EDIT_STATE = 'UPDATE_EDIT_STATE';
-export const SET_SCROLL_ZOOM = 'SET_SCROLL_ZOOM';
 export const SET_MAP_INIT_ERROR = 'SET_MAP_INIT_ERROR';
 export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS';
 export const SET_MAP_SETTINGS = 'SET_MAP_SETTINGS';

diff --git a/x-pack/plugins/maps/public/actions/map_actions.ts b/x-pack/plugins/maps/public/actions/map_actions.ts
@@ -49,7 +49,6 @@ import {
   SET_MOUSE_COORDINATES,
   SET_OPEN_TOOLTIPS,
   SET_QUERY,
-  SET_SCROLL_ZOOM,
   TRACK_MAP_SETTINGS,
   UPDATE_DRAW_STATE,
   UPDATE_MAP_SETTING,
@@ -266,10 +265,6 @@ export function clearMouseCoordinates() {
   return { type: CLEAR_MOUSE_COORDINATES };
 }
 
-export function disableScrollZoom() {
-  return { type: SET_SCROLL_ZOOM, scrollZoom: false };
-}
-
 export function setGotoWithCenter({ lat, lon, zoom }: MapCenterAndZoom) {
   return {
     type: SET_GOTO,

diff --git a/x-pack/plugins/maps/public/connected_components/_index.scss b/x-pack/plugins/maps/public/connected_components/_index.scss
@@ -3,5 +3,6 @@
 @import 'edit_layer_panel/index';
 @import 'right_side_controls/index';
 @import 'toolbar_overlay/index';
+@import 'mb_map/keydown_scroll_zoom/index';
 @import 'mb_map/tooltip_control/features_tooltip/index';
 @import 'mb_map/scale_control/index';
diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/index.ts b/x-pack/plugins/maps/public/connected_components/mb_map/index.ts
@@ -27,7 +27,6 @@ import {
   getLayerList,
   getMapReady,
   getMapSettings,
-  getScrollZoom,
   getSpatialFiltersLayer,
   getTimeslice,
 } from '../../selectors/map_selectors';
@@ -47,7 +46,6 @@ function mapStateToProps(state: MapStoreState) {
     spatialFiltersLayer: getSpatialFiltersLayer(state),
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),
-    scrollZoom: getScrollZoom(state),
     isFullScreen: getIsFullScreen(state),
     timeslice: getTimeslice(state),
     featureModeActive:

diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss b/x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss
@@ -0,0 +1,22 @@
+.mapKeydownScrollZoom {
+  background: transparentize($euiColorInk, .5);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: $euiZLevel2;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+  opacity: 0;
+  transition: opacity $euiAnimSpeedNormal ease $euiAnimSpeedNormal;
+  padding: $euiSize;
+}
+
+.mapKeydownScrollZoom--show {
+  opacity: 1;
+  transition-duration: $euiAnimSpeedFast;
+}
diff --git a/...ugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx b/...ugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx
@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import type { Map as MbMap, MapMouseEvent } from '@kbn/mapbox-gl';
+
+const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
+
+interface Props {
+  mbMap: MbMap;
+}
+
+interface State {
+  show: boolean;
+}
+
+export class KeydownScrollZoom extends Component<Props, State> {
+  private _isMounted = false;
+  private _hideTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  state: State = {
+    show: false,
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this.props.mbMap.on('wheel', this._onWheel);
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    this.props.mbMap.off('wheel', this._onWheel);
+  }
+
+  _onWheel = (event: MapMouseEvent) => {
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+      this._hideTimeout = undefined;
+    }
+
+    if ((isMac && event.originalEvent.metaKey) || (!isMac && event.originalEvent.ctrlKey)) {
+      this.setState({ show: false });
+      return;
+    }
+
+    this.setState({ show: true });
+    this._hideTimeout = setTimeout(() => {
+      if (this._isMounted) {
+        this.setState({ show: false });
+      }
+    }, 1500);
+    event.preventDefault();
+  };
+
+  render() {
+    return (
+      <aside
+        className={classNames('mapKeydownScrollZoom', {
+          'mapKeydownScrollZoom--show': this.state.show,
+        })}
+      >
+        <EuiText textAlign="center" size="s" color="ghost">
+          <h3>
+            {i18n.translate('xpack.maps.keydownScrollZoom.keydownToZoomInstructions', {
+              defaultMessage: 'Use {key} + scroll to zoom the map',
+              values: { key: isMac ? '⌘' : 'control' },
+            })}
+          </h3>
+
+          <p>
+            {i18n.translate('xpack.maps.keydownScrollZoom.keydownClickAndDragZoomInstructions', {
+              defaultMessage:
+                'Use shift + click and drag to zoom the map to fit within a bounding box',
+            })}
+          </p>
+        </EuiText>
+      </aside>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/mb_map.tsx b/x-pack/plugins/maps/public/connected_components/mb_map/mb_map.tsx
@@ -47,6 +47,7 @@ import type { MapExtentState } from '../../reducers/map/types';
 // @ts-expect-error
 import { CUSTOM_ICON_PIXEL_RATIO, createSdfIcon } from '../../classes/styles/vector/symbol_utils';
 import { MAKI_ICONS } from '../../classes/styles/vector/maki_icons';
+import { KeydownScrollZoom } from './keydown_scroll_zoom/keydown_scroll_zoom';
 
 export interface Props {
   isMapReady: boolean;
@@ -57,7 +58,6 @@ export interface Props {
   goto?: Goto | null;
   inspectorAdapters: Adapters;
   isFullScreen: boolean;
-  scrollZoom: boolean;
   extentChanged: (mapExtentState: MapExtentState) => void;
   onMapReady: (mapExtentState: MapExtentState) => void;
   onMapDestroyed: () => void;
@@ -186,7 +186,6 @@ export class MbMap extends Component<Props, State> {
         attributionControl: false,
         container: this._containerRef!,
         style: mbStyle,
-        scrollZoom: this.props.scrollZoom,
         preserveDrawingBuffer: getPreserveDrawingBuffer(),
         maxZoom: this.props.settings.maxZoom,
         minZoom: this.props.settings.minZoom,
@@ -472,6 +471,7 @@ export class MbMap extends Component<Props, State> {
     let drawFeatureControl;
     let tooltipControl;
     let scaleControl;
+    let keydownScrollZoomControl;
     if (this.state.mbMap) {
       drawFilterControl =
         this.props.addFilters && this.props.filterModeActive ? (
@@ -493,6 +493,9 @@ export class MbMap extends Component<Props, State> {
       scaleControl = this.props.settings.showScaleControl ? (
         <ScaleControl mbMap={this.state.mbMap} isFullScreen={this.props.isFullScreen} />
       ) : null;
+      keydownScrollZoomControl = this.props.settings.keydownScrollZoom ? (
+        <KeydownScrollZoom mbMap={this.state.mbMap} />
+      ) : null;
     }
     return (
       <div
@@ -503,6 +506,7 @@ export class MbMap extends Component<Props, State> {
       >
         {drawFilterControl}
         {drawFeatureControl}
+        {keydownScrollZoomControl}
         {scaleControl}
         {tooltipControl}
       </div>

diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
@@ -32,7 +32,6 @@ import {
   replaceLayerList,
   setMapSettings,
   setQuery,
-  disableScrollZoom,
   setReadOnly,
   updateLayerById,
   setGotoWithCenter,
@@ -177,9 +176,9 @@ export class MapEmbeddable
     const store = this._savedMap.getStore();
 
     store.dispatch(setReadOnly(true));
-    store.dispatch(disableScrollZoom());
     store.dispatch(
       setMapSettings({
+        keydownScrollZoom: true,
         showTimesliderToggleButton: false,
       })
     );

diff --git a/x-pack/plugins/maps/public/reducers/map/default_map_settings.ts b/x-pack/plugins/maps/public/reducers/map/default_map_settings.ts
@@ -22,6 +22,7 @@ export function getDefaultMapSettings(): MapSettings {
     initialLocation: INITIAL_LOCATION.LAST_SAVED_LOCATION,
     fixedLocation: { lat: 0, lon: 0, zoom: 2 },
     browserLocation: { zoom: 2 },
+    keydownScrollZoom: false,
     maxZoom: MAX_ZOOM,
     minZoom: MIN_ZOOM,
     showScaleControl: false,

diff --git a/x-pack/plugins/maps/public/reducers/map/map.ts b/x-pack/plugins/maps/public/reducers/map/map.ts
@@ -37,7 +37,6 @@ import {
   REMOVE_TRACKED_LAYER_STATE,
   UPDATE_SOURCE_DATA_REQUEST,
   SET_OPEN_TOOLTIPS,
-  SET_SCROLL_ZOOM,
   SET_MAP_INIT_ERROR,
   UPDATE_DRAW_STATE,
   SET_WAITING_FOR_READY_HIDDEN_LAYERS,
@@ -70,7 +69,6 @@ export const DEFAULT_MAP_STATE: MapState = {
   mapState: {
     zoom: undefined, // setting this value does not adjust map zoom, read only value used to store current map zoom for persisting between sessions
     center: undefined, // setting this value does not adjust map view, read only value used to store current map center for persisting between sessions
-    scrollZoom: true,
     extent: undefined,
     mouseCoordinates: undefined,
     timeFilters: undefined,
@@ -302,14 +300,6 @@ export function map(state: MapState = DEFAULT_MAP_STATE, action: Record<string,
         ...state.layerList[index].style,
         __styleMeta: styleMeta,
       });
-    case SET_SCROLL_ZOOM:
-      return {
-        ...state,
-        mapState: {
-          ...state.mapState,
-          scrollZoom: action.scrollZoom,
-        },
-      };
     case SET_MAP_INIT_ERROR:
       return {
         ...state,

diff --git a/x-pack/plugins/maps/public/reducers/map/types.ts b/x-pack/plugins/maps/public/reducers/map/types.ts
@@ -34,7 +34,6 @@ export type MapViewContext = MapExtentState & {
 };
 
 export type MapContext = Partial<MapViewContext> & {
-  scrollZoom: boolean;
   mouseCoordinates?: {
     lat: number;
     lon: number;
@@ -67,6 +66,7 @@ export type MapSettings = {
   browserLocation: {
     zoom: number;
   };
+  keydownScrollZoom: boolean;
   maxZoom: number;
   minZoom: number;
   showScaleControl: boolean;

diff --git a/x-pack/plugins/maps/public/selectors/map_selectors.ts b/x-pack/plugins/maps/public/selectors/map_selectors.ts
@@ -173,8 +173,6 @@ export const getLayerListRaw = ({ map }: MapStoreState): LayerDescriptor[] =>
 export const getWaitingForMapReadyLayerListRaw = ({ map }: MapStoreState): LayerDescriptor[] =>
   map.waitingForMapReadyLayerList ? map.waitingForMapReadyLayerList : [];
 
-export const getScrollZoom = ({ map }: MapStoreState): boolean => map.mapState.scrollZoom;
-
 export const getMapExtent = ({ map }: MapStoreState): MapExtent | undefined => map.mapState.extent;
 
 export const getMapBuffer = ({ map }: MapStoreState): MapExtent | undefined => map.mapState.buffer;