syncronize map movement

x-pack/plugins/maps/public/routes/map_test_page.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { Provider } from 'react-redux';
 import { EuiEmptyPrompt, EuiTitle } from '@elastic/eui';
@@ -22,6 +22,14 @@ import { SavedMap } from './map_page';
 import { waitUntilTimeLayersLoad$ } from './map_page/map_app/wait_until_time_layers_load';
 import { getSpacesApi } from '../kibana_services';
 import { MapContainer } from '../connected_components/map_container';
+import { getMapSettings } from '../selectors/map_selectors';
+import {
+  setMapSettings,
+  setReadOnly,
+  setGotoWithCenter,
+} from '../actions';
+import { setOnMapMove } from '../reducers/non_serializable_instances';
+import { mapEmbeddablesSingleton } from '../embeddable/map_embeddables_singleton';
 
 type MapApi = DefaultPresentationPanelApi &
   HasEditCapabilities & { someSpecialMapFunction: () => void };
@@ -44,12 +52,79 @@ const mapEmbeddableFactory: EmbeddableComponentFactory<MapInput, MapApi> = {
     await savedMap.whenReady();
 
     const viewMode$ = new BehaviorSubject<ViewMode>('edit');
+    let isMovementSynchronized = initialState.isMovementSynchronized ?? true;
+    let filterByMapExtent = initialState.filterByMapExtent ?? false;
+
+    function propogateMapMovement(lat: number, lon: number, zoom: number) {
+      if (isMovementSynchronized) {
+        mapEmbeddablesSingleton.setLocation(initialState.id, lat, lon, zoom);
+      }
+    };
+    // Passing callback into redux store instead of regular pattern of getting redux state changes for performance reasons
+    savedMap.getStore().dispatch(setOnMapMove(propogateMapMovement));
+
+    savedMap.getStore().dispatch(setReadOnly(true));
+    savedMap.getStore().dispatch(
+      setMapSettings({
+        keydownScrollZoom: true,
+        showTimesliderToggleButton: false,
+      })
+    );
 
     /**
      * Here we create the actual Component inline. This would be the equavalent of the
      *`Embeddable` class in the legacy system.
      */
     return CreateEmbeddableComponent((apiRef) => {
+      useEffect(
+        () => {
+          mapEmbeddablesSingleton.register(initialState.id, {
+            getTitle: () => {
+              return initialState.id;
+            },
+            onLocationChange: (lat: number, lon: number, zoom: number) => {
+              // auto fit to bounds is not compatable with map synchronization
+              // auto fit to bounds may cause map location to never stablize and bound back and forth between bounds on different maps
+              if (getMapSettings(savedMap.getStore().getState()).autoFitToDataBounds) {
+                savedMap.getStore().dispatch(setMapSettings({ autoFitToDataBounds: false }));
+              }
+              savedMap.getStore().dispatch(setGotoWithCenter({ lat, lon, zoom }));
+            },
+            getIsMovementSynchronized: () => {
+              return isMovementSynchronized;
+            },
+            setIsMovementSynchronized: (nextIsMovementSynchronized: boolean) => {
+              isMovementSynchronized = nextIsMovementSynchronized;
+              if (nextIsMovementSynchronized) {
+                //this._gotoSynchronizedLocation();
+              } else if (!nextIsMovementSynchronized && savedMap.getAutoFitToBounds()) {
+                // restore autoFitToBounds when isMovementSynchronized disabled
+                savedMap.getStore().dispatch(setMapSettings({ autoFitToDataBounds: true }));
+              }
+            },
+            getIsFilterByMapExtent: () => {
+              return filterByMapExtent;
+            },
+            setIsFilterByMapExtent: (nextFilterByMapExtent: boolean) => {
+              filterByMapExtent = nextFilterByMapExtent;
+              if (nextFilterByMapExtent) {
+                //this._setMapExtentFilter();
+              } else {
+                //this._clearMapExtentFilter();
+              }
+            },
+            getGeoFieldNames: () => {
+              return getGeoFieldNames(savedMap.getStore().getState());
+            },
+          });
+
+          return () => {
+            mapEmbeddablesSingleton.unregister(initialState.id);
+          };
+        },
+        []
+      );
+
       /**
        * Implement all functions that need to be used externally here. Eventually this will include serialization and
        * diff-checking code for the Dashboard to use.
@@ -67,7 +142,7 @@ const mapEmbeddableFactory: EmbeddableComponentFactory<MapInput, MapApi> = {
              * Here we could open a flyout or modal to edit the embeddable.
              */
           },
-          //type: MAP_SAVED_OBJECT_TYPE,
+          type: MAP_SAVED_OBJECT_TYPE,
           viewMode: viewMode$,
           someSpecialMapFunction: () => {
             console.log('look at me, I am a special map function');
@@ -132,7 +207,8 @@ export const MapTestPage = () => {
         <h1>Map Test Page</h1>
       </EuiTitle>
 
-      <PresentationPanel<MapApi> Component={mapEmbeddableFactory.getComponent(mapInput)} />
+      <PresentationPanel<MapApi> Component={mapEmbeddableFactory.getComponent({ ...mapInput, id: '1' })} />
+      <PresentationPanel<MapApi> Component={mapEmbeddableFactory.getComponent({ ...mapInput, id: '2' })} />
     </>
   );
 };

x-pack/plugins/maps/public/trigger_actions/filter_by_map_extent/is_compatible.ts

@@ -5,14 +5,16 @@
  * 2.0.
  */
 
+import { apiIsOfType } from '@kbn/presentation-publishing';
 import { MAP_SAVED_OBJECT_TYPE } from '../../../common/constants';
 import { isLegacyMap } from '../../legacy_visualizations/is_legacy_map';
 import type { FilterByMapExtentActionContext } from './types';
 
 export function isCompatible({ embeddable }: FilterByMapExtentActionContext) {
-  console.log('embeddable.type', embeddable.type);
-  return (
+  // TODO check legacy map and disableTriggers
+  return apiIsOfType(embeddable, MAP_SAVED_OBJECT_TYPE);
+  /*return (
     (embeddable.type === MAP_SAVED_OBJECT_TYPE || isLegacyMap(embeddable)) &&
     !embeddable.getInput().disableTriggers
-  );
+  );*/
 }