Merge branch 'fix-disappearing-countries'

1 files changed, 32 insertions, 17 deletions

diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index 4884e57861..0713faf7e2 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -49,7 +49,8 @@ interface IState {
   zoomLevel: number;
   visibleGeometry: IGeometryLeaf[];
   visibleStatesProvincesLines: IProvinceAndStateLineLeaf[];
-  viewportBbox: BBox;
+  // combine previous and current viewports to get the rough area of transition.
+  viewportBboxes: BBox[];
 }
 
 const MOVE_SPEED = 2000;
@@ -61,13 +62,15 @@ export default class SvgMap extends React.Component<IProps, IState> {
     zoomLevel: 1,
     visibleGeometry: [],
     visibleStatesProvincesLines: [],
-    viewportBbox: [0, 0, 0, 0],
+    viewportBboxes: [],
   };
 
   private projectionConfig = {
     scale: 160,
   };
 
+  private transitionEndTimeout?: number;
+
   constructor(props: IProps) {
     super(props);
 
@@ -96,6 +99,19 @@ export default class SvgMap extends React.Component<IProps, IState> {
     );
   }
 
+  public componentDidUpdate(_prevProps: IProps, _prevState: IState) {
+    if (this.state.viewportBboxes.length > 1) {
+      clearTimeout(this.transitionEndTimeout);
+      this.transitionEndTimeout = setTimeout(() => {
+        this.setState((state) => this.removeOldViewportBboxes(state));
+      }, MOVE_SPEED);
+    }
+  }
+
+  public componentWillUnmount() {
+    clearTimeout(this.transitionEndTimeout);
+  }
+
   public render() {
     const mapStyle = {
       width: '100%',
@@ -267,9 +283,11 @@ export default class SvgMap extends React.Component<IProps, IState> {
 
   private getNextState(prevState: IState | null, nextProps: IProps): IState {
     const { width, height, center, offset, zoomLevel } = nextProps;
+    const viewportBboxes = prevState === null ? [] : prevState.viewportBboxes;
 
     const projection = this.getProjection(width, height, this.projectionConfig);
     const zoomCenter = this.getZoomCenter(center, offset, projection, zoomLevel);
+
     const viewportBbox = this.getViewportGeoBoundingBox(
       zoomCenter,
       width,
@@ -277,21 +295,14 @@ export default class SvgMap extends React.Component<IProps, IState> {
       projection,
       zoomLevel,
     );
+    viewportBboxes.push(viewportBbox);
 
-    // combine previous and current viewports to get the rough area of transition
-    const combinedViewportBboxMatch = prevState
-      ? {
-          minX: Math.min(viewportBbox[0], prevState.viewportBbox[0]),
-          minY: Math.min(viewportBbox[1], prevState.viewportBbox[1]),
-          maxX: Math.max(viewportBbox[2], prevState.viewportBbox[2]),
-          maxY: Math.max(viewportBbox[3], prevState.viewportBbox[3]),
-        }
-      : {
-          minX: viewportBbox[0],
-          minY: viewportBbox[1],
-          maxX: viewportBbox[2],
-          maxY: viewportBbox[3],
-        };
+    const combinedViewportBboxMatch = {
+      minX: Math.min(...viewportBboxes.map((viewportBbox) => viewportBbox[0])),
+      minY: Math.min(...viewportBboxes.map((viewportBbox) => viewportBbox[1])),
+      maxX: Math.max(...viewportBboxes.map((viewportBbox) => viewportBbox[2])),
+      maxY: Math.max(...viewportBboxes.map((viewportBbox) => viewportBbox[3])),
+    };
 
     const visibleGeometry = geometryTree.search(combinedViewportBboxMatch);
     const visibleStatesProvincesLines = provincesStatesLinesTree.search(combinedViewportBboxMatch);
@@ -301,7 +312,11 @@ export default class SvgMap extends React.Component<IProps, IState> {
       zoomLevel,
       visibleGeometry,
       visibleStatesProvincesLines,
-      viewportBbox,
+      viewportBboxes,
     };
   }
+
+  private removeOldViewportBboxes(state: IState) {
+    return { viewportBboxes: state.viewportBboxes.slice(-1) };
+  }
 }