Refactoring map, place state where it belongs

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -43,40 +43,42 @@ import * as style from 'ol/style';
 
 export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   title: string = 'Map';
-  public openedModalName$: Observable<string>;
+  public openedModalName$: Observable<string> = this.store.select(commonReducers.selectOpenedModalName);
   public itemTypes$: Observable<{ [id: string]: IItemType }>;
-  public mapState$: Observable<IMapState>;
-  public features$: Observable<Array<Feature>>;
-  public overlayLayers$: Observable<Array<IItemLayer>>;
-  public selectedOverlayLayer$: Observable<IItemLayer>;
-  public selectedItemLayer$: Observable<IItemLayer>;
-  public baseLayers$: Observable<Array<IItemLayer>>;
-  public selectedBaseLayer$: Observable<IItemLayer>;
-  public projection$: Observable<string>;
+  public mapState$: Observable<IMapState> = this.store.select(mapReducers.selectGetMapState);
+  public features$: Observable<Array<Feature>> = this.store.select(mapReducers.selectGetFeatures);
+  public overlayLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetOverlayLayers);
+  public selectedOverlayLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
+  public selectedItemLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedItemLayer);
+  public baseLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetBaseLayers);
+  public selectedBaseLayer$: Observable<IItemLayer> =  this.store.select(mapReducers.selectGetSelectedBaseLayer);
+  public projection$: Observable<string> = this.store.select(mapReducers.selectGetProjection);
   public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
   public droppedFile$: Subject<IDroppedFile>  = new Subject<IDroppedFile>();
   private paramSub: Subscription;
   private itemTypeSub: Subscription;
   private mapStateSub: Subscription;
   private queryStateSub: Subscription;
-  public parentCode$: Observable<string>;
-  public panelVisible$: Observable<boolean>;
-  public panelCollapsed$: Observable<boolean>;
-  public selectedFeature$: Observable<Feature>;
-  public selectedItem$: Observable<IItem>;
-  public queryState$: Observable<IQueryState>;
-  public period$: Observable<IPeriodState>;
-  public clearEnabled$: Observable<boolean>;
-  public searchCollapsed$: Observable<boolean>;
-  public searchMinified$: Observable<boolean>;
+  public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
+  public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
+  public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
+  public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
+  public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
+  public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
+  public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);
+  public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
+  public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
+  public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
   public menuVisible$: Observable<boolean>;
-  public query$: Observable<IQueryState>;
-  public position$: Observable<Position>;
-  public compassHeading$: Observable<number>;
+  public query$: Observable<IQueryState> =  this.store.select(mapReducers.selectGetQuery);
+  public position$: Observable<Position> = this.geolocationService.getCurrentPosition();
+  public compassHeading$: Observable<number> = this.deviceorientationService.getCurrentCompassHeading();
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
-  public extent$: Observable<Extent>;
-  public styles$:Observable<IStyles>;
+  public extent$: Observable<Extent> = this.store.select(mapReducers.selectGetExtent);
+  public styles$:Observable<IStyles> = this.store.select(mapReducers.selectGetStyles);
+  private setStateCount$:Observable<number> =  this.store.select(mapReducers.selectgetSetStateCount);
+
   @ViewChild('map', { static: false }) map;
   
   constructor(private store: Store<mapReducers.State | commonReducers.State>, 
@@ -89,6 +91,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     private geolocationService: GeolocationService,
     private zone: NgZone,
     private deviceorientationService:DeviceOrientationService) {
+      this.initCustomStyles();
   }
 
   @HostListener('document:keyup', ['$event'])
@@ -123,40 +126,12 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   ngOnInit() {
+    this.store.dispatch(new mapActions.Init());
     this.selectedFeatures$.next({x:0,y:0,features:[]});
-    this.mapState$ = this.store.select(mapReducers.selectGetMapState);
-    this.parentCode$ = this.store.select(mapReducers.selectGetParentCode);
-    this.features$ = this.store.select(mapReducers.selectGetFeatures);
-    this.overlayLayers$ = this.store.select(mapReducers.selectGetOverlayLayers);
-    this.selectedOverlayLayer$ = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
-    this.baseLayers$ = this.store.select(mapReducers.selectGetBaseLayers);
-    this.projection$ = this.store.select(mapReducers.selectGetProjection);
-    this.selectedBaseLayer$ = this.store.select(mapReducers.selectGetSelectedBaseLayer);
-    this.panelVisible$ = this.store.select(mapReducers.selectGetPanelVisible);
-    this.panelCollapsed$ = this.store.select(mapReducers.selectGetPanelCollapsed);
-    this.selectedFeature$ = this.store.select(mapReducers.selectGetSelectedFeature);
-    this.selectedItem$ = this.store.select(mapReducers.selectGetSelectedItem);
-    this.queryState$ = this.store.select(mapReducers.selectGetQueryState);
-    this.clearEnabled$ = this.store.select(mapReducers.selectGetClearEnabled);
-    this.searchCollapsed$ = this.store.select(mapReducers.selectGetSearchCollapsed);
-    this.searchMinified$ = this.store.select(mapReducers.selectGetSearchMinified);
-    this.openedModalName$ = this.store.select(commonReducers.selectOpenedModalName);
-    this.query$ = this.store.select(mapReducers.selectGetQuery);
-    this.extent$ = this.store.select(mapReducers.selectGetExtent);
     this.selectedFeatures$.next(null);
-    this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer);
-    this.period$ = this.store.select(mapReducers.selectGetPeriod);
-    this.position$ = this.geolocationService.getCurrentPosition();
-    this.compassHeading$ = this.deviceorientationService.getCurrentCompassHeading();
-    this.styles$ = this.store.select(mapReducers.selectGetStyles);
-
-    // this.mapState$.pipe(withLatestFrom(this.queryState$)).subscribe((state) => {
-    //   this.replaceUrl(state[0], state[1], true);
-    // });
-    this.query$.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
-      this.replaceUrl(state[1], state[0],this.stateSetCount == 0);
+    this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe((state) => {
+      if(state[1]>0) this.replaceUrl(state[0][1], state[0][0],false);      
     });
-    this.initCustomStyles();
   }
 
   initCustomStyles() {
@@ -178,13 +153,12 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     })));
   }
 
-  private stateSetCount: number = 0;
-  private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
-  private lastMapState: string = "";
   ngAfterViewInit() {   
-    this.store.dispatch(new mapActions.Init());
-    this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
-      //console.log("Param sub");
+    this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.setStateCount$),withLatestFrom(this.queryState$),withLatestFrom(this.mapState$)).subscribe( (state) => {
+      let params: ParamMap = state[0][0][0];  
+      let setStateCount:number = state[0][0][1];
+      let lastQueryState:IQueryState = state[0][1];
+      let lastMapState:IMapState = state[1];
       var newMapState: IMapState = null;
       var newQueryState: IQueryState = null;
       var mapStateChanged = false;
@@ -196,9 +170,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         let rotation = parseFloat(params.get("rotation"));
         let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
         newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
-        mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
-        this.lastMapState = JSON.stringify(newMapState);
-        window.localStorage.setItem("FarmMapsCommonMap_mapState",this.lastMapState);
+        mapStateChanged = JSON.stringify(lastMapState) != JSON.stringify(newMapState);
+        window.localStorage.setItem("FarmMapsCommonMap_mapState",JSON.stringify(newMapState));
       }
       if (params.has("queryState")) {
         let queryState = params.get("queryState");
@@ -207,8 +180,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
           newQueryState = this.serializeService.deserialize(queryState);
           queryState = this.serializeService.serialize(newQueryState);
         }
-        queryStateChanged = this.lastQueryState !=  queryState;
-        this.lastQueryState = queryState;
+        queryStateChanged = this.serializeService.serialize(lastQueryState) !=  queryState;
       }
       this.zone.run(()=> {
         if ( queryStateChanged) {
@@ -220,18 +192,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         }
       })
      
-
-      // if (mapStateChanged && queryStateChanged) {
-      //   console.debug("Both states");
-      //   this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
-      // } else if (mapStateChanged) {
-      //   console.debug("Map state");
-      //   this.store.dispatch(new mapActions.SetMapState(newMapState));
-      // } else if (queryStateChanged) {
-      //   console.debug("Query state");
-      //   this.store.dispatch(new mapActions.SetQueryState(newQueryState));
-      // }
-      this.stateSetCount += 1;
     });
     setTimeout(() => {
       this.map.instance.updateSize();
@@ -266,13 +226,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.store.dispatch(new mapActions.DoQuery(queryState));
   } 
 
-  handleTrijntjeClick(event: MouseEvent, query: any) {
-    event.preventDefault();
-    var queryState = tassign(mapReducers.initialQueryState, query);
-    var mapState = JSON.parse(this.lastMapState);
-    this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
-  }
-
   replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
       console.debug(`Replace url : Baselayer(${mapState.baseLayerCode}) Querystate(${this.serializeService.serialize(queryState)})`);
       let parts =["."];

projects/common-map/src/fm-map/effects/map.effects.ts

@@ -1,15 +1,14 @@
-import { Injectable, Inject } from '@angular/core';
-import { Router } from '@angular/router';
+import { Injectable } from '@angular/core';
 
 import { Store, Action } from '@ngrx/store';
 import { Effect, Actions,ofType } from '@ngrx/effects';
 
 import { Observable ,  of } from 'rxjs';
-import { withLatestFrom, switchMap, map, catchError, mergeMap, delay} from 'rxjs/operators';
+import { withLatestFrom, switchMap, map, catchError, mergeMap } from 'rxjs/operators';
 
 import {GeoJSON,WKT} from 'ol/format';
 import {Feature} from 'ol';
-import { getCenter, Extent, createEmpty, extend} from 'ol/extent';
+import { getCenter } from 'ol/extent';
 import {Point} from 'ol/geom'
 
 

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -55,7 +55,8 @@ export interface State {
   selectedBaseLayer: IItemLayer,
   selectedOverlayLayer: IItemLayer,
   styles:IStyles,
-  showLayerSwitcher:boolean
+  showLayerSwitcher:boolean,
+  setStateCount:number
 }
 
 export const initialState: State = {
@@ -90,7 +91,8 @@ export const initialState: State = {
   selectedOverlayLayer: null,
   selectedItemLayer: null,
   styles: {},
-  showLayerSwitcher: false
+  showLayerSwitcher: false,
+  setStateCount: 0
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {    
@@ -102,16 +104,16 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.SETMAPSTATE: {
       let a = action as mapActions.SetMapState;
       return tassign(state, {
-        mapState: a.mapState
+        mapState: a.mapState,setStateCount: state.setStateCount+1
       });
     }
     case mapActions.SETQUERYSTATE: {
       let a = action as mapActions.SetQueryState;
-      return tassign(state, { queryState: tassign(a.queryState )});
+      return tassign(state, { queryState: tassign(a.queryState ),setStateCount: state.setStateCount+1});
     }
     case mapActions.SETSTATE: {
       let a = action as mapActions.SetState;
-      return tassign(state, { mapState: tassign(a.mapState), queryState: tassign(a.queryState)});
+      return tassign(state, { mapState: tassign(a.mapState), queryState: tassign(a.queryState),setStateCount: state.setStateCount+1});
     }
     case mapActions.SETVIEWEXTENT: {
       let a = action as mapActions.SetViewExtent;
@@ -337,6 +339,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let a = action as mapActions.ShowLayerSwitcher;
       return tassign(state,{showLayerSwitcher:a.show});
     }
+    case mapActions.INIT:{
+      return tassign(state,{setStateCount:0});
+    }
     default: {
       return state;
     }
@@ -365,6 +370,7 @@ export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
 export const getPeriod = (state:State) => state.period;
 export const getStyles = (state:State) => state.styles;
 export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
+export const getSetStateCount = (state:State) => state.setStateCount;
 
 export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
 export const selectGetMapState= createSelector(selectMapState, getMapState);
@@ -389,5 +395,6 @@ export const selectGetSelectedItemLayer = createSelector(selectMapState, getSele
 export const selectGetPeriod = createSelector(selectMapState, getPeriod);
 export const selectGetStyles = createSelector(selectMapState, getStyles);
 export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);
+export const selectgetSetStateCount = createSelector(selectMapState,getSetStateCount);