diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 3527955..f09581d 100644 --- 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; + public openedModalName$: Observable = this.store.select(commonReducers.selectOpenedModalName); public itemTypes$: Observable<{ [id: string]: IItemType }>; - public mapState$: Observable; - public features$: Observable>; - public overlayLayers$: Observable>; - public selectedOverlayLayer$: Observable; - public selectedItemLayer$: Observable; - public baseLayers$: Observable>; - public selectedBaseLayer$: Observable; - public projection$: Observable; + public mapState$: Observable = this.store.select(mapReducers.selectGetMapState); + public features$: Observable> = this.store.select(mapReducers.selectGetFeatures); + public overlayLayers$: Observable> = this.store.select(mapReducers.selectGetOverlayLayers); + public selectedOverlayLayer$: Observable = this.store.select(mapReducers.selectGetSelectedOverlayLayer); + public selectedItemLayer$: Observable = this.store.select(mapReducers.selectGetSelectedItemLayer); + public baseLayers$: Observable> = this.store.select(mapReducers.selectGetBaseLayers); + public selectedBaseLayer$: Observable = this.store.select(mapReducers.selectGetSelectedBaseLayer); + public projection$: Observable = this.store.select(mapReducers.selectGetProjection); public selectedFeatures$: Subject = new Subject(); public droppedFile$: Subject = new Subject(); private paramSub: Subscription; private itemTypeSub: Subscription; private mapStateSub: Subscription; private queryStateSub: Subscription; - public parentCode$: Observable; - public panelVisible$: Observable; - public panelCollapsed$: Observable; - public selectedFeature$: Observable; - public selectedItem$: Observable; - public queryState$: Observable; - public period$: Observable; - public clearEnabled$: Observable; - public searchCollapsed$: Observable; - public searchMinified$: Observable; + public parentCode$: Observable =this.store.select(mapReducers.selectGetParentCode); + public panelVisible$: Observable = this.store.select(mapReducers.selectGetPanelVisible); + public panelCollapsed$: Observable = this.store.select(mapReducers.selectGetPanelCollapsed); + public selectedFeature$: Observable = this.store.select(mapReducers.selectGetSelectedFeature); + public selectedItem$: Observable = this.store.select(mapReducers.selectGetSelectedItem); + public queryState$: Observable = this.store.select(mapReducers.selectGetQueryState); + public period$: Observable = this.store.select(mapReducers.selectGetPeriod); + public clearEnabled$: Observable = this.store.select(mapReducers.selectGetClearEnabled); + public searchCollapsed$: Observable = this.store.select(mapReducers.selectGetSearchCollapsed); + public searchMinified$: Observable = this.store.select(mapReducers.selectGetSearchMinified); public menuVisible$: Observable; - public query$: Observable; - public position$: Observable; - public compassHeading$: Observable; + public query$: Observable = this.store.select(mapReducers.selectGetQuery); + public position$: Observable = this.geolocationService.getCurrentPosition(); + public compassHeading$: Observable = this.deviceorientationService.getCurrentCompassHeading(); public baseLayersCollapsed:boolean = true; public overlayLayersCollapsed: boolean = true; - public extent$: Observable; - public styles$:Observable; + public extent$: Observable = this.store.select(mapReducers.selectGetExtent); + public styles$:Observable = this.store.select(mapReducers.selectGetStyles); + private setStateCount$:Observable = this.store.select(mapReducers.selectgetSetStateCount); + @ViewChild('map', { static: false }) map; constructor(private store: Store, @@ -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)})`); diff --git a/projects/common-map/src/fm-map/effects/map.effects.ts b/projects/common-map/src/fm-map/effects/map.effects.ts index e47c26f..64c20ab 100644 --- 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' diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index 903d8e9..8b79c9b 100644 --- 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(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);