Refactoring map, place state where it belongs

2020-02-20 21:20:50 +01:00 · 2020-02-20 21:20:50 +01:00 · abfef73cd1
parent f82125a486
commit abfef73cd1
3 changed files with 55 additions and 96 deletions
--- a/projects/common-map/src/fm-map/components/map/map.component.ts
+++ b/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");
+  ngAfterViewInit() {   
+    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();
@ -264,14 +224,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
    event.preventDefault();
    var queryState = tassign(mapReducers.initialQueryState, query);
    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)})`);
--- a/projects/common-map/src/fm-map/effects/map.effects.ts
+++ b/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'


--- a/projects/common-map/src/fm-map/reducers/map.reducer.ts
+++ b/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);