[fix] Improved split+unsynced mode for better handling (#2176)

keplergl · Mar 30, 2023 · 485252a · 485252a
1 parent 9057272
commit 485252a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/src/components/src/index.ts b/src/components/src/index.ts
@@ -264,6 +264,7 @@ export type {DatasetTagProps} from './side-panel/common/dataset-tag';
 export type {CustomPanelsProps} from './side-panel/custom-panel';
 export type {LayerTypeListItemType} from './side-panel/layer-panel/layer-type-list-item';
 export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-layer-group-color-picker';
+export type {MapLegendPanelProps, MapLegendPanelFactoryDeps} from './map/map-legend-panel';
 
 export {
   Icons,

diff --git a/src/components/src/map/map-control-panel.tsx b/src/components/src/map/map-control-panel.tsx
@@ -116,6 +116,7 @@ export type MapControlPanelProps = {
   logoComponent?: Element;
   mapState?: MapState;
   onToggleSplitMapViewport?: ActionHandler<typeof toggleSplitMapViewport>;
+  isViewportUnsyncAllowed?: boolean;
 };
 
 function MapControlPanelFactory() {
@@ -131,7 +132,8 @@ function MapControlPanelFactory() {
       isExport,
       logoComponent,
       mapState,
-      onToggleSplitMapViewport
+      onToggleSplitMapViewport,
+      isViewportUnsyncAllowed
     }) => {
       const {isViewportSynced, isZoomLocked} = mapState || {};
       const onUnlockViewportChange = useCallback(() => {
@@ -150,7 +152,7 @@ function MapControlPanelFactory() {
             marginBottom: '8px !important'
           }}
         >
-          {mapState?.isSplit ? (
+          {mapState?.isSplit && isViewportUnsyncAllowed ? (
             <StyledMapControlPanelHeaderSplitViewportsTools>
               <StyledSBCenterFlexbox style={{paddingBottom: '6px'}}>
                 <FormattedMessage id="Unlock Viewport" />

diff --git a/src/components/src/map/map-legend-panel.tsx b/src/components/src/map/map-legend-panel.tsx
@@ -36,6 +36,11 @@ import {ActionHandler, toggleSplitMapViewport} from '@kepler.gl/actions';
 
 MapLegendPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory, MapLegendFactory];
 
+export type MapLegendPanelFactoryDeps = [
+  typeof MapControlTooltipFactory,
+  typeof MapControlPanelFactory,
+  typeof MapLegendFactory
+];
 interface PinToBottomProps {
   offsetRight?: number;
 }
@@ -71,6 +76,7 @@ export type MapLegendPanelProps = {
   mapHeight?: number;
   offsetRight?: number;
   onToggleSplitMapViewport?: ActionHandler<typeof toggleSplitMapViewport>;
+  isViewportUnsyncAllowed?: boolean;
 };
 
 function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
@@ -89,7 +95,8 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
     mapState,
     mapHeight,
     offsetRight,
-    onToggleSplitMapViewport
+    onToggleSplitMapViewport,
+    isViewportUnsyncAllowed = true
   }) => {
     const mapLegend = mapControls?.mapLegend || ({} as MapControl);
     const {active: isPinned} = mapLegend || {};
@@ -136,6 +143,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
         logoComponent={logoComponent}
         mapState={mapState}
         onToggleSplitMapViewport={onToggleSplitMapViewport}
+        isViewportUnsyncAllowed={isViewportUnsyncAllowed}
       >
         <MapLegend layers={layers} mapHeight={mapHeight} />
       </MapControlPanel>

diff --git a/src/reducers/src/map-state-updaters.ts b/src/reducers/src/map-state-updaters.ts
@@ -324,7 +324,7 @@ export const toggleSplitMapViewportUpdater = (
   state: MapState,
   action: MapStateActions.ToggleSplitMapViewportUpdaterAction
 ) => {
-  // new map state immediately gets the new payload values for isViewportSynced and isZoomLocked
+  // new map state immediately gets the new, optional payload values for isViewportSynced and/or isZoomLocked
   const newMapState = {
     ...state,
     ...(action.payload || {})