From c6d7f6b0cbc606243d3ab7addccdac5fe011f0e3 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Fri, 17 Apr 2020 13:26:50 +0200 Subject: [PATCH 1/8] Add action logging and some refactoring --- .../fm-map/components/map/map.component.ts | 93 ++++++++++--------- .../src/fm-map/effects/map.effects.ts | 38 +++++--- .../src/fm-map/reducers/map.reducer.ts | 39 +++++--- src/app/app.module.ts | 16 +++- 4 files changed, 117 insertions(+), 69 deletions(-) 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 6bcdf9c..1ab4af7 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 @@ -59,6 +59,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { private itemTypeSub: Subscription; private mapStateSub: Subscription; private queryStateSub: Subscription; + private querySub: Subscription; public parentCode$: Observable =this.store.select(mapReducers.selectGetParentCode); public panelVisible$: Observable = this.store.select(mapReducers.selectGetPanelVisible); public panelCollapsed$: Observable = this.store.select(mapReducers.selectGetPanelCollapsed); @@ -92,7 +93,47 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { private geolocationService: GeolocationService, private zone: NgZone, private deviceorientationService:DeviceOrientationService) { - + this.querySub = this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ + if(queryState) { + let newQueryState = tassign(mapReducers.initialQueryState); + let initial = this.serializeService.serialize(newQueryState) == this.serializeService.serialize(queryState); + if(setStateCount>1 && !initial) { + console.debug(`Do Query ${setStateCount}`); + let urlparts=[]; + if (queryState.itemCode && queryState.itemCode != "") { + if(queryState.itemType && queryState.itemType!= "") { + let itemType = this.itemTypeService.itemTypes[queryState.itemType]; + if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { + urlparts.push('/editor'); + urlparts.push(itemType.editor); + urlparts.push('item'); + urlparts.push(queryState.itemCode); + } + } + } else { + newQueryState= queryState; + } + if(urlparts.length==0 ) { + newQueryState.itemCode = queryState.itemCode; + this.replaceUrl(mapState,newQueryState,false); + } else { + this.router.navigate(urlparts); + } + } + } + }); + this.mapStateSub = this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{ + if(setStateCount>0) { + console.debug(`Mapstate ${setStateCount}`); + this.replaceUrl(mapState,queryState,true); + } + }); + this.queryStateSub = this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ + if(setStateCount>0) { + console.debug(`Querystate ${setStateCount}`); + this.replaceUrl(mapState,queryState,true); + } + }) } @HostListener('document:keyup', ['$event']) @@ -132,44 +173,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { this.store.dispatch(new mapActions.Clear()); this.selectedFeatures$.next({x:0,y:0,features:[]}); this.selectedFeatures$.next(null); - this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ - console.debug(`Do Query ${setStateCount}`); - if(setStateCount>1) { - let newQueryState = tassign(mapReducers.initialQueryState); - let urlparts=[]; - if (queryState.itemCode && queryState.itemCode != "") { - if(queryState.itemType && queryState.itemType!= "") { - let itemType = this.itemTypeService.itemTypes[queryState.itemType]; - if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { - urlparts.push('/editor'); - urlparts.push(itemType.editor); - urlparts.push('item'); - urlparts.push(queryState.itemCode); - } - } - } else { - newQueryState= queryState; - } - if(urlparts.length==0 ) { - newQueryState.itemCode = queryState.itemCode; - this.replaceUrl(mapState,newQueryState,false); - } else { - this.router.navigate(urlparts); - } - } - }); - this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{ - console.debug(`Mapstate ${setStateCount}`); - if(setStateCount>0) { - this.replaceUrl(mapState,queryState,true); - } - }); - this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ - console.debug(`Querystate ${setStateCount}`); - if(setStateCount>0) { - this.replaceUrl(mapState,queryState,true); - } - }) + } initCustomStyles() { @@ -213,11 +217,13 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { let queryState = params.get("queryState"); newQueryState = tassign(mapReducers.initialQueryState); if (queryState != "") { - newQueryState = this.serializeService.deserialize(queryState); + newQueryState = this.serializeService.deserialize(queryState); queryState = this.serializeService.serialize(newQueryState); } queryStateChanged = this.serializeService.serialize(lastQueryState) != queryState; } + console.debug(newQueryState); + console.debug(queryStateChanged?"Changed":""); let t =0; if(setStateCount==0) t=600; setTimeout(() => { @@ -272,6 +278,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { if(mapState.baseLayerCode!="") { parts.push(mapState.baseLayerCode); parts.push( this.serializeService.serialize(queryState)); + console.debug("Replace url",mapState,queryState,replace); this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent }); } } @@ -341,8 +348,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { } ngOnDestroy() { - this.paramSub.unsubscribe(); + if (this.paramSub) this.paramSub.unsubscribe(); if (this.itemTypeSub) this.itemTypeSub.unsubscribe(); if (this.mapStateSub) this.mapStateSub.unsubscribe(); - if (this.queryStateSub) this.queryStateSub.unsubscribe(); } + if (this.queryStateSub) this.queryStateSub.unsubscribe(); + if (this.querySub) this.querySub.unsubscribe(); + } } 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 e9efd4d..a0207e0 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -129,7 +129,7 @@ export class MapEffects { ), catchError(error => of(new commonActions.Fail(error)))); } else { - newAction= of(new commonActions.Escape(true,false)); + return []; } return newAction; })); @@ -251,27 +251,39 @@ export class MapEffects { @Effect() setQueryState$: Observable = this.actions$.pipe( ofType(mapActions.SETQUERYSTATE), - switchMap((action: mapActions.SetQueryState) => { - var newAction:Action; - if (action.queryState.itemCode && action.queryState.itemCode != "") { - newAction= new mapActions.SelectItem(action.queryState.itemCode); + withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)), + switchMap(([action,inSearch]) => { + if(!inSearch) { + let a = action as mapActions.SetQueryState; + var newAction:Action; + if (a.queryState.itemCode && a.queryState.itemCode != "") { + newAction= new mapActions.SelectItem(a.queryState.itemCode); + } else { + newAction= new mapActions.StartSearch(a.queryState); + } + return of(newAction); } else { - newAction= new mapActions.StartSearch(action.queryState); + return []; } - return of(newAction); })); @Effect() setState$: Observable = this.actions$.pipe( ofType(mapActions.SETSTATE), - switchMap((action: mapActions.SetState) => { - var newAction:Action; - if (action.queryState.itemCode && action.queryState.itemCode != "") { - newAction= new mapActions.SelectItem(action.queryState.itemCode); + withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)), + switchMap(([action,inSearch]) => { + if(!inSearch) { + let a = action as mapActions.SetQueryState; + var newAction:Action; + if (a.queryState.itemCode && a.queryState.itemCode != "") { + newAction= new mapActions.SelectItem(a.queryState.itemCode); + } else { + newAction= new mapActions.StartSearch(a.queryState); + } + return of(newAction); } else { - newAction= new mapActions.StartSearch(action.queryState); + return []; } - return of(newAction); })); constructor(private actions$: Actions, private store$: Store, private folderService$: FolderService, private itemService$: ItemService,private featureIconService$:FeatureIconService,private itemTypeService$:ItemTypeService) { 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 538f695..15ccad4 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -56,7 +56,8 @@ export interface State { selectedOverlayLayer: IItemLayer, styles:IStyles, showLayerSwitcher:boolean, - setStateCount:number + setStateCount:number, + inSearch:boolean } export const initialState: State = { @@ -73,7 +74,7 @@ export const initialState: State = { }, viewExtent:[], queryState: tassign(initialQueryState), - query: tassign(initialQueryState), + query: null, parentCode: null, features: [], panelVisible: false, @@ -92,7 +93,8 @@ export const initialState: State = { selectedItemLayer: null, styles: {}, showLayerSwitcher: false, - setStateCount: 0 + setStateCount: 0, + inSearch:false } export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State { @@ -138,7 +140,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } return tassign(state, { features: a.features, - extent:extent + extent:extent, + inSearch:false }); } case mapActions.SELECTFEATURE: { @@ -147,11 +150,15 @@ export function reducer(state = initialState, action: mapActions.Actions | commo selectedFeature: state.selectedItem?state.selectedFeature: a.feature }); } - case mapActions.SELECTITEM: { + case mapActions.SELECTITEM: { + let a = action as mapActions.SelectItem; + let itemCode = state.selectedItem ? state.selectedItem.code : ""; + let inSearch = (a.itemCode != itemCode || state.setStateCount == 1) return tassign(state, { selectedItem: null, selectedItemLayer: null, - features:[] + features:[], + inSearch:inSearch }); } case mapActions.SELECTITEMSUCCESS: { @@ -164,6 +171,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo itemLayer = new TemporalItemLayer(a.item); } return tassign(state, { + inSearch:false, selectedItem: a.item, selectedItemLayer: itemLayer, panelVisible: a.item != null, @@ -255,17 +263,21 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } case mapActions.STARTSEARCH: { let a = action as mapActions.StartSearch; + let panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null; return tassign(state, { selectedItem: null, features:[], selectedItemLayer:null, - queryState: tassign(a.queryState), - searchCollapsed: false, - panelVisible: true, - clearEnabled: true, - searchMinified: true, + searchCollapsed: !panelVisible, + panelVisible: panelVisible, + clearEnabled: panelVisible, + searchMinified: panelVisible, + inSearch:panelVisible }); } + case commonActions.FAIL:{ + return tassign(state,{inSearch:false}); + } case mapActions.DOQUERY: { let a = action as mapActions.DoQuery; return tassign(state, { @@ -455,7 +467,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo let a = action as mapActions.ShowLayerSwitcher; return tassign(state,{showLayerSwitcher:a.show}); } - case mapActions.CLEAR:{ + + case commonActions.INITUSER: { return tassign(state,{setStateCount:0,features:[],selectedFeature:null,selectedItem:null}); } default: { @@ -487,6 +500,7 @@ 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 getInSearch = (state:State) => state.inSearch; export const selectMapState = createFeatureSelector(MODULE_NAME); export const selectGetMapState= createSelector(selectMapState, getMapState); @@ -512,5 +526,6 @@ export const selectGetPeriod = createSelector(selectMapState, getPeriod); export const selectGetStyles = createSelector(selectMapState, getStyles); export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher); export const selectgetSetStateCount = createSelector(selectMapState,getSetStateCount); +export const selectGetInSearch = createSelector(selectMapState,getInSearch); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fd010c3..b1e3921 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,7 @@ import { AppCommonMapModule} from '@farmmaps/common-map'; import {AppRootComponent} from './app.component'; -import {StoreModule, Store} from '@ngrx/store'; +import {StoreModule, ActionReducer,MetaReducer} from '@ngrx/store'; import {EffectsModule, EffectSources} from '@ngrx/effects'; import { StoreRouterConnectingModule} from '@ngrx/router-store'; @@ -48,6 +48,18 @@ export function provideBootstrapEffects(effects: Type[]) { ]; } +// console.log all actions +export function debug(reducer: ActionReducer): ActionReducer { + return function(state, action) { + console.debug('-- State', state); + console.debug('-- Action', action); + + return reducer(state, action); + }; +} + +export const metaReducers: MetaReducer[] = [debug]; + @NgModule({ declarations: [ AppRootComponent, @@ -61,7 +73,7 @@ export function provideBootstrapEffects(effects: Type[]) { AppCommonServiceModule.forRoot(), AppCommonMapModule.forRoot(), BrowserModule, - StoreModule.forRoot({},{runtimeChecks: { // TODO fix this should all be true + StoreModule.forRoot({},{metaReducers,runtimeChecks: { // TODO fix this should all be true strictStateImmutability: false, strictActionImmutability: false, strictStateSerializability: false, From 4e83bc615804726cfe048eb7b4aabe6b2e92805f Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 21 Apr 2020 12:31:20 +0200 Subject: [PATCH 2/8] Some refactoring --- .../fm-map/components/map/map.component.ts | 167 +++++++++++------- .../src/fm-map/effects/map.effects.ts | 43 ++--- .../src/fm-map/reducers/map.reducer.ts | 8 +- 3 files changed, 129 insertions(+), 89 deletions(-) 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 1ab4af7..be31c0c 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 @@ -1,8 +1,8 @@ -import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit,ChangeDetectorRef,NgZone } from '@angular/core'; +import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit,NgZone } from '@angular/core'; import { Location } from '@angular/common'; -import { Observable, Subject, Subscription,combineLatest, from,interval } from 'rxjs'; -import { debounce, withLatestFrom, first, combineAll,throttle } from 'rxjs/operators'; -import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router'; +import { Observable, Subject, Subscription, from,of } from 'rxjs'; +import { withLatestFrom, switchMap } from 'rxjs/operators'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Store } from '@ngrx/store'; //import { proj,Map } from 'openlayers'; @@ -16,7 +16,6 @@ import { IQueryState } from '@farmmaps/common'; import { IPeriodState } from '../../models/period.state'; import {IStyles} from '../../models/style.cache'; import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component'; -import { IMetaData } from '../meta-data-modal/meta-data-modal.component'; import { StateSerializerService } from '@farmmaps/common'; import { GeolocationService} from '../../services/geolocation.service'; import {DeviceOrientationService} from '../../services/device-orientation.service'; @@ -30,7 +29,6 @@ import {commonActions} from '@farmmaps/common'; import {Feature} from 'ol'; import {Extent,createEmpty,extend } from 'ol/extent'; import {transform} from 'ol/proj'; -import { query } from '@angular/animations'; import { tassign } from 'tassign'; import * as style from 'ol/style'; @@ -57,7 +55,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { public droppedFile$: Subject = new Subject(); private paramSub: Subscription; private itemTypeSub: Subscription; - private mapStateSub: Subscription; + private stateSub: Subscription; private queryStateSub: Subscription; private querySub: Subscription; public parentCode$: Observable =this.store.select(mapReducers.selectGetParentCode); @@ -67,6 +65,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { public clickedFeature: Subject = new Subject(); public selectedItem$: Observable = this.store.select(mapReducers.selectGetSelectedItem); public queryState$: Observable = this.store.select(mapReducers.selectGetQueryState); + public state$:Observable<{mapState:IMapState,queryState:IQueryState,setStateCount:number}> = this.store.select(mapReducers.selectGetState); public period$: Observable = this.store.select(mapReducers.selectGetPeriod); public clearEnabled$: Observable = this.store.select(mapReducers.selectGetClearEnabled); public searchCollapsed$: Observable = this.store.select(mapReducers.selectGetSearchCollapsed); @@ -80,6 +79,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { public extent$: Observable = this.store.select(mapReducers.selectGetExtent); public styles$:Observable = this.store.select(mapReducers.selectGetStyles); private setStateCount$:Observable = this.store.select(mapReducers.selectgetSetStateCount); + private lastUrl = ""; @ViewChild('map') map; @@ -121,19 +121,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { } } } - }); - this.mapStateSub = this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{ - if(setStateCount>0) { - console.debug(`Mapstate ${setStateCount}`); - this.replaceUrl(mapState,queryState,true); - } - }); - this.queryStateSub = this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ - if(setStateCount>0) { - console.debug(`Querystate ${setStateCount}`); - this.replaceUrl(mapState,queryState,true); - } - }) + }); } @HostListener('document:keyup', ['$event']) @@ -172,8 +160,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { console.debug("Init"); this.store.dispatch(new mapActions.Clear()); this.selectedFeatures$.next({x:0,y:0,features:[]}); - this.selectedFeatures$.next(null); - + this.selectedFeatures$.next(null); } initCustomStyles() { @@ -195,47 +182,107 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { }))); } + round(value:number,decimals:number):number { + let d = Math.pow(10, decimals); + return Math.round((value + Number.EPSILON)*d)/d; + } + + getMapStateFromUrl(params:ParamMap):IMapState { + var hasUrlmapState = params.has("xCenter") && params.has("yCenter"); + if (hasUrlmapState) { + let xCenter = parseFloat(params.get("xCenter")); + let yCenter = parseFloat(params.get("yCenter")); + let zoom = parseFloat(params.get("zoom")); + let rotation = parseFloat(params.get("rotation")); + let baseLayer = params.get("baseLayer")?params.get("baseLayer"):""; + var newMapState = {zoom: zoom, rotation: rotation, xCenter: xCenter, yCenter: yCenter, baseLayerCode: baseLayer }; + return newMapState; + } else { + return null; + } + } + + normalizeMapState(mapState:IMapState):IMapState { + if(!mapState) return null; + return {zoom: this.round(mapState.zoom,0), + rotation: this.round(mapState.rotation,2), + xCenter: this.round(mapState.xCenter,5), + yCenter: this.round(mapState.yCenter,5), + baseLayerCode: mapState.baseLayerCode }; + } + + serializeMapState(mapState:IMapState):string { + return JSON.stringify(this.normalizeMapState(mapState)); + } + + getQueryStateFromUrl(params:ParamMap):IQueryState { + if (params.has("queryState")) { + let queryState = params.get("queryState"); + var newQueryState = tassign(mapReducers.initialQueryState); + if (queryState != "") { + newQueryState = this.serializeService.deserialize(queryState); + } + return newQueryState; + } else { + return null; + } + } + ngAfterViewInit() { console.debug("View init"); this.initCustomStyles(); - this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.setStateCount$),withLatestFrom(this.queryState$),withLatestFrom(this.mapState$)).subscribe( ([[[params,setStateCount],lastQueryState],lastMapState]) => { - console.debug(`Url change ${setStateCount}`); - var newMapState: IMapState = lastMapState; - var newQueryState: IQueryState = lastQueryState; - var hasUrlmapState = params.has("xCenter") && params.has("yCenter"); + + // url to state + + this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$),switchMap(([params,state]) => { + var newMapState: IMapState = state.mapState; + var newQueryState: IQueryState = state.queryState; + var queryStateChanged = false; - if (hasUrlmapState) { - let xCenter = parseFloat(params.get("xCenter")); - let yCenter = parseFloat(params.get("yCenter")); - let zoom = parseFloat(params.get("zoom")); - 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 } - window.localStorage.setItem("FarmMapsCommonMap_mapState",JSON.stringify(newMapState)); + var mapStateChanged = false; + let urlMapState = this.getMapStateFromUrl(params); + if(urlMapState) { + newMapState = urlMapState; + mapStateChanged = this.serializeMapState(state.mapState) != this.serializeMapState(newMapState); } - if (params.has("queryState")) { - let queryState = params.get("queryState"); - newQueryState = tassign(mapReducers.initialQueryState); - if (queryState != "") { - newQueryState = this.serializeService.deserialize(queryState); - queryState = this.serializeService.serialize(newQueryState); - } - queryStateChanged = this.serializeService.serialize(lastQueryState) != queryState; - } - console.debug(newQueryState); - console.debug(queryStateChanged?"Changed":""); - let t =0; - if(setStateCount==0) t=600; - setTimeout(() => { - this.zone.run(()=> { - if (setStateCount ==0) { - this.store.dispatch(new mapActions.SetState(newMapState,newQueryState)); - } else if(queryStateChanged) { - this.store.dispatch(new mapActions.SetQueryState(newQueryState)); - } - }) - },t); + + let urlQueryState = this.getQueryStateFromUrl(params); + if(urlQueryState) { + newQueryState = urlQueryState; + queryStateChanged = this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState); + } + + if(queryStateChanged || mapStateChanged) { + return of(new mapActions.SetState(newMapState,newQueryState)); + } else { + return of(null); + } + })).subscribe((action) => { + if(action) { + window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(action.mapState)); + console.debug("Url to state"); + this.store.dispatch(action); + } }); + + // state to url + + this.stateSub = this.state$.pipe(withLatestFrom(this.route.paramMap),switchMap(([state,params]) => { + let newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState); + if(this.lastUrl!=newUrl && state.setStateCount>0) { + this.lastUrl=newUrl; + return of(state); + } + else { + return of(null); + } + })).subscribe((newUrlState) =>{ + if(newUrlState) { + console.debug(`State to url ${newUrlState.setStateCount}`); + this.replaceUrl(newUrlState.mapState,newUrlState.queryState,true); + } + }); + setTimeout(() => { this.map.instance.updateSize(); }, 500); @@ -278,7 +325,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { if(mapState.baseLayerCode!="") { parts.push(mapState.baseLayerCode); parts.push( this.serializeService.serialize(queryState)); - console.debug("Replace url",mapState,queryState,replace); + console.debug("Replace url",parts); this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent }); } } @@ -296,7 +343,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { let state = { mapState: mapState, extent: extent }; let source = from([state]); source.pipe(withLatestFrom(this.selectedBaseLayer$),withLatestFrom(this.setStateCount$)).subscribe(([[state, baselayer],setStateCount]) => { - if (mapState && baselayer && setStateCount > 0) { // do not react on first move + if (mapState && baselayer) { // do not react on first move let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code }); this.store.dispatch(new mapActions.SetMapState(newMapState)); this.store.dispatch(new mapActions.SetViewExtent(state.extent)); @@ -350,7 +397,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { ngOnDestroy() { if (this.paramSub) this.paramSub.unsubscribe(); if (this.itemTypeSub) this.itemTypeSub.unsubscribe(); - if (this.mapStateSub) this.mapStateSub.unsubscribe(); + if (this.stateSub) this.stateSub.unsubscribe(); if (this.queryStateSub) this.queryStateSub.unsubscribe(); if (this.querySub) this.querySub.unsubscribe(); } 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 a0207e0..3c4ac09 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -27,6 +27,7 @@ import {FeatureIconService} from '../services/feature-icon.service'; import * as style from 'ol/style'; import { ItemTypeService } from '@farmmaps/common'; +import { IQueryState } from 'dist/common/public-api'; @Injectable() @@ -248,23 +249,27 @@ export class MapEffects { } })); + getActionFromQueryState(queryState:IQueryState, inSearch:boolean):Observable|[] { + if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemType)) { + var newAction:Action; + if (queryState.itemCode && queryState.itemCode != "") { + newAction= new mapActions.SelectItem(queryState.itemCode); + } else { + newAction= new mapActions.StartSearch(queryState); + } + return of(newAction); + } else { + return []; + } + } + @Effect() setQueryState$: Observable = this.actions$.pipe( ofType(mapActions.SETQUERYSTATE), withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)), switchMap(([action,inSearch]) => { - if(!inSearch) { - let a = action as mapActions.SetQueryState; - var newAction:Action; - if (a.queryState.itemCode && a.queryState.itemCode != "") { - newAction= new mapActions.SelectItem(a.queryState.itemCode); - } else { - newAction= new mapActions.StartSearch(a.queryState); - } - return of(newAction); - } else { - return []; - } + let a = action as mapActions.SetQueryState; + return this.getActionFromQueryState(a.queryState,inSearch); })); @Effect() @@ -272,18 +277,8 @@ export class MapEffects { ofType(mapActions.SETSTATE), withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)), switchMap(([action,inSearch]) => { - if(!inSearch) { - let a = action as mapActions.SetQueryState; - var newAction:Action; - if (a.queryState.itemCode && a.queryState.itemCode != "") { - newAction= new mapActions.SelectItem(a.queryState.itemCode); - } else { - newAction= new mapActions.StartSearch(a.queryState); - } - return of(newAction); - } else { - return []; - } + let a = action as mapActions.SetState; + return this.getActionFromQueryState(a.queryState,inSearch); })); constructor(private actions$: Actions, private store$: Store, private folderService$: FolderService, private itemService$: ItemService,private featureIconService$:FeatureIconService,private itemTypeService$:ItemTypeService) { 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 15ccad4..1e0e9ce 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -466,11 +466,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo case mapActions.SHOWLAYERSWITCHER:{ let a = action as mapActions.ShowLayerSwitcher; return tassign(state,{showLayerSwitcher:a.show}); - } - - case commonActions.INITUSER: { - return tassign(state,{setStateCount:0,features:[],selectedFeature:null,selectedItem:null}); - } + } default: { return state; } @@ -501,6 +497,7 @@ export const getStyles = (state:State) => state.styles; export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher; export const getSetStateCount = (state:State) => state.setStateCount; export const getInSearch = (state:State) => state.inSearch; +export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,setStateCount:state.setStateCount};} export const selectMapState = createFeatureSelector(MODULE_NAME); export const selectGetMapState= createSelector(selectMapState, getMapState); @@ -527,5 +524,6 @@ export const selectGetStyles = createSelector(selectMapState, getStyles); export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher); export const selectgetSetStateCount = createSelector(selectMapState,getSetStateCount); export const selectGetInSearch = createSelector(selectMapState,getInSearch); +export const selectGetState = createSelector(selectMapState,getState); From e41c728fb27bf8b3504a4470aaf6d482ade647f4 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 21 Apr 2020 13:22:54 +0200 Subject: [PATCH 3/8] Fix zoom to extent --- .../src/fm-map/effects/map.effects.ts | 27 ++++++++++++++++--- .../src/fm-map/reducers/map.reducer.ts | 12 +-------- 2 files changed, 24 insertions(+), 15 deletions(-) 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 3c4ac09..b6e5bda 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -4,11 +4,11 @@ import { Store, Action } from '@ngrx/store'; import { Effect, Actions,ofType } from '@ngrx/effects'; import { Observable , of } from 'rxjs'; -import { withLatestFrom, switchMap, map, catchError, mergeMap } from 'rxjs/operators'; +import { withLatestFrom, switchMap, map, catchError, mergeMap,delay } from 'rxjs/operators'; import {GeoJSON,WKT} from 'ol/format'; import {Feature} from 'ol'; -import { getCenter } from 'ol/extent'; +import { getCenter,createEmpty,extend } from 'ol/extent'; import {Point} from 'ol/geom' @@ -137,10 +137,29 @@ export class MapEffects { @Effect() - startSearchSucces$: Observable = this.actions$.pipe( + zoomToExtent$: Observable = this.actions$.pipe( + ofType(mapActions.STARTSEARCHSUCCESS), + delay(500), + mergeMap((action: mapActions.StartSearchSuccess) => { + let actions =[]; + actions.push(new commonActions.SetMenuVisible(false)); + let extent = createEmpty(); + if (!action.query.bboxFilter) { + if (extent) { + for (let f of action.features) { + extend(extent, (f as Feature).getGeometry().getExtent()); + } + } + actions.push(new mapActions.SetExtent(extent)); + } + return actions; + })); + + @Effect() + hideMenu$: Observable = this.actions$.pipe( ofType(mapActions.STARTSEARCHSUCCESS), mergeMap((action: mapActions.StartSearchSuccess) => { - return [new commonActions.SetMenuVisible(false)]; + return of(new commonActions.SetMenuVisible(false)); })); @Effect() 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 1e0e9ce..069d498 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -10,7 +10,7 @@ import {commonActions} from '@farmmaps/common'; import { createSelector, createFeatureSelector } from '@ngrx/store'; import {Feature} from 'ol'; -import { createEmpty, extend} from 'ol/extent'; + import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store'; @@ -129,18 +129,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } case mapActions.STARTSEARCHSUCCESS: { let a = action as mapActions.StartSearchSuccess; - let extent = state.extent; - if (!action.query.bboxFilter) { - extent = createEmpty(); - if (extent) { - for (let f of action.features) { - extend(extent, (f as Feature).getGeometry().getExtent()); - } - } - } return tassign(state, { features: a.features, - extent:extent, inSearch:false }); } From ef81b04f4e0bed0423ed2402dcba4d1423bafee2 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 21 Apr 2020 14:54:13 +0200 Subject: [PATCH 4/8] More refactoring --- .../feature-list/feature-list.component.ts | 2 +- .../src/fm-map/components/map/map.component.ts | 13 +++++++------ .../common-map/src/fm-map/effects/map.effects.ts | 4 ++-- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts index f24c7bf..241de46 100644 --- a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts +++ b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts @@ -28,7 +28,7 @@ export abstract class AbstractFeatureListComponent { } getAction(feature:Feature):Action { - var newQuery: any = tassign(mapReducers.initialState.query); + var newQuery: any = tassign(mapReducers.initialState.queryState); newQuery.parentCode = feature.get('parentCode'); newQuery.itemCode = feature.get('code'); newQuery.itemType = feature.get('itemType'); 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 be31c0c..3657f42 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 @@ -252,14 +252,14 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { queryStateChanged = this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState); } - if(queryStateChanged || mapStateChanged) { + if(queryStateChanged && mapStateChanged && state.setStateCount ==0) { return of(new mapActions.SetState(newMapState,newQueryState)); - } else { - return of(null); - } + window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState)); + } else if(queryStateChanged) { + return of(new mapActions.SetQueryState(newQueryState)); + } return of(null) })).subscribe((action) => { - if(action) { - window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(action.mapState)); + if(action) { console.debug("Url to state"); this.store.dispatch(action); } @@ -353,6 +353,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { } handleOnMouseDown(event: MouseEvent) { + event.stopPropagation(); this.zone.run(() =>{ this.store.dispatch(new mapActions.CollapseSearch()); }); 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 b6e5bda..3a9a501 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -269,7 +269,7 @@ export class MapEffects { })); getActionFromQueryState(queryState:IQueryState, inSearch:boolean):Observable|[] { - if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemType)) { + if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemCode)) { var newAction:Action; if (queryState.itemCode && queryState.itemCode != "") { newAction= new mapActions.SelectItem(queryState.itemCode); @@ -278,7 +278,7 @@ export class MapEffects { } return of(newAction); } else { - return []; + return of(new commonActions.Escape(true,false)); } } From 69751540d36b49e85e04e929812781e3acf95ce7 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 22 Apr 2020 08:11:50 +0200 Subject: [PATCH 5/8] More refactoring, add thematic maps button --- .../src/fm-map/actions/map.actions.ts | 11 +++++++++-- .../fm-map/components/map/map.component.ts | 19 ++++++++++--------- .../src/fm-map/reducers/map.reducer.ts | 14 ++++++++++---- src/app/menu/menu.component.html | 6 +++++- 4 files changed, 34 insertions(+), 16 deletions(-) diff --git a/projects/common-map/src/fm-map/actions/map.actions.ts b/projects/common-map/src/fm-map/actions/map.actions.ts index b6be6ed..3cd9b05 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/projects/common-map/src/fm-map/actions/map.actions.ts @@ -42,6 +42,7 @@ export const DOQUERY = '[Map] DoQuery'; export const SETSTYLE = '[Map] SetStyle'; export const SHOWLAYERSWITCHER = '[Map] ShowLayerSwitcher'; export const CLEAR = '[Map] Clear'; +export const SETREPLACEURL = '[Map] SetReplaceUrl'; export class Clear implements Action { readonly type = CLEAR; @@ -165,7 +166,7 @@ export class SetExtent implements Action { export class SetQueryState implements Action { readonly type = SETQUERYSTATE; - constructor(public queryState: IQueryState) { } + constructor(public queryState: IQueryState,public replaceUrl:boolean = true) { } } export class SetTimeSpan implements Action { @@ -251,6 +252,11 @@ export class ShowLayerSwitcher implements Action { constructor(public show:boolean) {} } +export class SetReplaceUrl implements Action { + readonly type = SETREPLACEURL; + constructor(public replaceUrl:boolean) {} +} + export type Actions = SetMapState | Init | Clear @@ -285,5 +291,6 @@ export type Actions = SetMapState | SetViewExtent | DoQuery | SetStyle - | ShowLayerSwitcher; + | ShowLayerSwitcher + | SetReplaceUrl; 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 3657f42..10904b6 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 @@ -113,9 +113,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { } else { newQueryState= queryState; } - if(urlparts.length==0 ) { + if(urlparts.length==0 ) { newQueryState.itemCode = queryState.itemCode; - this.replaceUrl(mapState,newQueryState,false); + this.store.dispatch(new mapActions.SetQueryState(newQueryState,false)); + //this.replaceUrl(mapState,newQueryState,false); } else { this.router.navigate(urlparts); } @@ -257,17 +258,17 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState)); } else if(queryStateChanged) { return of(new mapActions.SetQueryState(newQueryState)); - } return of(null) + } return of(new mapActions.SetReplaceUrl(true)); })).subscribe((action) => { - if(action) { - console.debug("Url to state"); - this.store.dispatch(action); - } + if(action) { + console.debug("Url to state"); + this.store.dispatch(action); + } }); // state to url - this.stateSub = this.state$.pipe(withLatestFrom(this.route.paramMap),switchMap(([state,params]) => { + this.stateSub = this.state$.pipe(switchMap((state) => { let newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState); if(this.lastUrl!=newUrl && state.setStateCount>0) { this.lastUrl=newUrl; @@ -279,7 +280,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { })).subscribe((newUrlState) =>{ if(newUrlState) { console.debug(`State to url ${newUrlState.setStateCount}`); - this.replaceUrl(newUrlState.mapState,newUrlState.queryState,true); + this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl); } }); 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 069d498..c19a4d5 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -57,7 +57,8 @@ export interface State { styles:IStyles, showLayerSwitcher:boolean, setStateCount:number, - inSearch:boolean + inSearch:boolean, + replaceUrl:boolean } export const initialState: State = { @@ -94,7 +95,8 @@ export const initialState: State = { styles: {}, showLayerSwitcher: false, setStateCount: 0, - inSearch:false + inSearch:false, + replaceUrl:true } export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State { @@ -111,7 +113,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } case mapActions.SETQUERYSTATE: { let a = action as mapActions.SetQueryState; - return tassign(state, { queryState: tassign(a.queryState ),setStateCount: state.setStateCount+1}); + return tassign(state, { queryState: tassign(a.queryState ),setStateCount: state.setStateCount+1,replaceUrl:a.replaceUrl}); } case mapActions.SETSTATE: { let a = action as mapActions.SetState; @@ -457,6 +459,10 @@ export function reducer(state = initialState, action: mapActions.Actions | commo let a = action as mapActions.ShowLayerSwitcher; return tassign(state,{showLayerSwitcher:a.show}); } + case mapActions.SETREPLACEURL: { + let a= action as mapActions.SetReplaceUrl; + return tassign(state,{replaceUrl:a.replaceUrl}); + } default: { return state; } @@ -487,7 +493,7 @@ export const getStyles = (state:State) => state.styles; export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher; export const getSetStateCount = (state:State) => state.setStateCount; export const getInSearch = (state:State) => state.inSearch; -export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,setStateCount:state.setStateCount};} +export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,setStateCount:state.setStateCount,replaceUrl:state.replaceUrl};} export const selectMapState = createFeatureSelector(MODULE_NAME); export const selectGetMapState= createSelector(selectMapState, getMapState); diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html index 0cbdd05..345c400 100644 --- a/src/app/menu/menu.component.html +++ b/src/app/menu/menu.component.html @@ -4,7 +4,11 @@
Farms
-
+ +
+
+
Thematic maps
+
From 7eef50eb7a5ae51ed664719730268e3d11d45890 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 22 Apr 2020 08:59:04 +0200 Subject: [PATCH 6/8] Remove uneeded delay --- .../src/fm-map/actions/map.actions.ts | 2 +- .../src/fm-map/effects/map.effects.ts | 20 ++++++++++--------- .../src/fm-map/reducers/map.reducer.ts | 4 +++- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/projects/common-map/src/fm-map/actions/map.actions.ts b/projects/common-map/src/fm-map/actions/map.actions.ts index 3cd9b05..e025855 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/projects/common-map/src/fm-map/actions/map.actions.ts @@ -88,7 +88,7 @@ export class StartSearch implements Action { export class StartSearchSuccess implements Action { readonly type = STARTSEARCHSUCCESS; - constructor(public features: Array, public query:IQueryState) { } + constructor(public features: Array, public query:IQueryState,public setStateCount:number) { } } export class SelectFeature implements Action { 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 3a9a501..f4a1691 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -3,8 +3,8 @@ 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 { Observable , of, interval } from 'rxjs'; +import { withLatestFrom, switchMap, map, catchError, mergeMap,delayWhen } from 'rxjs/operators'; import {GeoJSON,WKT} from 'ol/format'; import {Feature} from 'ol'; @@ -113,19 +113,21 @@ export class MapEffects { @Effect() startSearch$: Observable = this.actions$.pipe( ofType(mapActions.STARTSEARCH), - switchMap((action: mapActions.StartSearch) => { - var startDate = action.queryState.startDate; - var endDate = action.queryState.endDate; + withLatestFrom(this.store$.select(mapReducers.selectgetSetStateCount)), + switchMap(([action,setStateCount]) => { + let a = action as mapActions.StartSearch; + var startDate = a.queryState.startDate; + var endDate = a.queryState.endDate; var newAction:Observable; - if (action.queryState.itemCode || action.queryState.parentCode || action.queryState.itemType || action.queryState.query || action.queryState.tags) { - newAction= this.itemService$.getFeatures(action.queryState.bbox, "EPSG:3857", action.queryState.query, action.queryState.tags, startDate, endDate, action.queryState.itemType, action.queryState.parentCode).pipe( + if (a.queryState.itemCode || a.queryState.parentCode || a.queryState.itemType || a.queryState.query || a.queryState.tags) { + newAction= this.itemService$.getFeatures(a.queryState.bbox, "EPSG:3857", a.queryState.query, a.queryState.tags, startDate, endDate, a.queryState.itemType, a.queryState.parentCode).pipe( switchMap((features: any) => { for (let f of features.features) { if (f.properties && f.properties["code"]) { f.id = f.properties["code"]; } } - return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), action.queryState)); + return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), a.queryState,setStateCount)); } ), catchError(error => of(new commonActions.Fail(error)))); @@ -139,7 +141,7 @@ export class MapEffects { @Effect() zoomToExtent$: Observable = this.actions$.pipe( ofType(mapActions.STARTSEARCHSUCCESS), - delay(500), + delayWhen(action => (action as mapActions.StartSearchSuccess).setStateCount == 1 ? interval(500):interval(0)), mergeMap((action: mapActions.StartSearchSuccess) => { let actions =[]; actions.push(new commonActions.SetMenuVisible(false)); 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 c19a4d5..27291d8 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -273,7 +273,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo case mapActions.DOQUERY: { let a = action as mapActions.DoQuery; return tassign(state, { - setStateCount:state.setStateCount+1, query: tassign(a.query, { bbox: a.query.bboxFilter ? state.viewExtent : [] })}); } case mapActions.ADDFEATURESUCCESS: { @@ -463,6 +462,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo let a= action as mapActions.SetReplaceUrl; return tassign(state,{replaceUrl:a.replaceUrl}); } + case mapActions.CLEAR: { + return tassign(state,{setStateCount:0}); + } default: { return state; } From 4dfa2cd96c13bb9bba4d792ea608285104106ae8 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 22 Apr 2020 09:25:10 +0200 Subject: [PATCH 7/8] Fix query --- projects/common-map/src/fm-map/effects/map.effects.ts | 2 +- projects/common-map/src/fm-map/reducers/map.reducer.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 f4a1691..1c44ffe 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -271,7 +271,7 @@ export class MapEffects { })); getActionFromQueryState(queryState:IQueryState, inSearch:boolean):Observable|[] { - if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemCode)) { + if(!inSearch && (queryState.itemType || queryState.parentCode || queryState.itemCode || queryState.query || queryState.tags)) { var newAction:Action; if (queryState.itemCode && queryState.itemCode != "") { newAction= new mapActions.SelectItem(queryState.itemCode); 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 27291d8..9e54c30 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -255,7 +255,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } case mapActions.STARTSEARCH: { let a = action as mapActions.StartSearch; - let panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null; + let panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null || a.queryState.query != null || a.queryState.tags != null; return tassign(state, { selectedItem: null, features:[], From d57ffe59e7816531dcc60d7f65ad88c51e97ce4f Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 22 Apr 2020 12:16:03 +0200 Subject: [PATCH 8/8] Fix style --- .../item-vector-source.component.ts | 2 +- .../fm-map/components/map/map.component.ts | 58 +++++++++---------- .../src/fm-map/effects/map.effects.ts | 15 ----- 3 files changed, 30 insertions(+), 45 deletions(-) diff --git a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts index cf3917c..171a136 100644 --- a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts @@ -68,7 +68,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements } else { evaluatedStyle = this.stylesCache["selected"]; } - if(evaluatedStyle && evaluatedStyle.geometry_ == null) { + if(evaluatedStyle ) { evaluatedStyle.setGeometry((feature) => this.geometry(feature)); } return evaluatedStyle 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 10904b6..23c0c8f 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 @@ -1,7 +1,7 @@ import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit,NgZone } from '@angular/core'; import { Location } from '@angular/common'; import { Observable, Subject, Subscription, from,of } from 'rxjs'; -import { withLatestFrom, switchMap } from 'rxjs/operators'; +import { withLatestFrom, switchMap,skip } from 'rxjs/operators'; import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Store } from '@ngrx/store'; //import { proj,Map } from 'openlayers'; @@ -93,34 +93,32 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { private geolocationService: GeolocationService, private zone: NgZone, private deviceorientationService:DeviceOrientationService) { - this.querySub = this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ + this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ if(queryState) { let newQueryState = tassign(mapReducers.initialQueryState); - let initial = this.serializeService.serialize(newQueryState) == this.serializeService.serialize(queryState); - if(setStateCount>1 && !initial) { - console.debug(`Do Query ${setStateCount}`); - let urlparts=[]; - if (queryState.itemCode && queryState.itemCode != "") { - if(queryState.itemType && queryState.itemType!= "") { - let itemType = this.itemTypeService.itemTypes[queryState.itemType]; - if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { - urlparts.push('/editor'); - urlparts.push(itemType.editor); - urlparts.push('item'); - urlparts.push(queryState.itemCode); - } - } - } else { - newQueryState= queryState; - } - if(urlparts.length==0 ) { - newQueryState.itemCode = queryState.itemCode; - this.store.dispatch(new mapActions.SetQueryState(newQueryState,false)); - //this.replaceUrl(mapState,newQueryState,false); - } else { - this.router.navigate(urlparts); - } + console.debug(`Do Query ${setStateCount}`); + let urlparts=[]; + if (queryState.itemCode && queryState.itemCode != "") { + if(queryState.itemType && queryState.itemType!= "") { + let itemType = this.itemTypeService.itemTypes[queryState.itemType]; + if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { + urlparts.push('/editor'); + urlparts.push(itemType.editor); + urlparts.push('item'); + urlparts.push(queryState.itemCode); + } + } + } else { + newQueryState= queryState; } + if(urlparts.length==0 ) { + newQueryState.itemCode = queryState.itemCode; + this.zone.run(() => { + this.store.dispatch(new mapActions.SetQueryState(newQueryState,false)); + }) + } else { + this.router.navigate(urlparts); + } } }); } @@ -260,9 +258,11 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { return of(new mapActions.SetQueryState(newQueryState)); } return of(new mapActions.SetReplaceUrl(true)); })).subscribe((action) => { - if(action) { - console.debug("Url to state"); - this.store.dispatch(action); + if(action) { + this.zone.run(() => { + console.debug("Url to state"); + this.store.dispatch(action); + }); } }); 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 1c44ffe..1715dd1 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -220,21 +220,6 @@ export class MapEffects { switchMap((action: commonActions.UploadedFileClick) => of(new mapActions.DoQuery(tassign(mapReducers.initialState.query, {itemCode:action.itemCode}))) )); - //@Effect() - //itemAdded$: Observable = this.actions$.pipe( - // ofType(commonActions.ITEMADDEDEVENT), - // withLatestFrom(this.store$.select(mapReducers.selectGetParentCode)), - // mergeMap(([action, parentCode]) => { - // let itemAddedAction = action as commonActions.ItemAddedEvent; - // if (parentCode && itemAddedAction.attributes["parentCode"] == parentCode) { - // return this.itemService$.getFeature(itemAddedAction.itemCode,"EPSG:3857").pipe( - // map((feature: Feature) => new mapActions.AddFeatureSuccess(this.toPointFeature(feature))), - // catchError(error => of(new commonActions.Fail(error)))) - // } else - // return [ - // ]; - // })); - @Effect() featureUpdate$: Observable = this.actions$.pipe( ofType(commonActions.DEVICEUPDATEEVENT),