FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor map component
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2020-10-28 13:31:12 +01:00
parent fad2f19ae4
commit 9fb5a9698c
4 changed files with 123 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@@ -1,6 +1,6 @@
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 { Observable, Subject, Subscription, from,of ,EMPTY } from 'rxjs';
import { withLatestFrom, switchMap,skip } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Store } from '@ngrx/store';
@@ -66,7 +66,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
public parentItem$: Observable<IItem> =this.store.select(mapReducers.selectGetParentItem);
public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
public state$:Observable<{mapState:IMapState,queryState:IQueryState,setStateCount:number}> = this.store.select(mapReducers.selectGetState);
public state$:Observable<{mapState:IMapState,queryState:IQueryState}> = this.store.select(mapReducers.selectGetState);
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);
@@ -79,8 +79,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public overlayLayersCollapsed: boolean = true;
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);
private lastUrl = "";
private initialized: boolean = false;
@ViewChild('map') map;
@@ -94,10 +94,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
private geolocationService: GeolocationService,
private zone: NgZone,
private deviceorientationService:DeviceOrientationService) {
this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$)).subscribe(([queryState,mapState]) =>{
if(queryState) {
let newQueryState = tassign(mapReducers.initialQueryState);
console.debug(`Do Query ${setStateCount}`);
console.debug(`Do Query`);
let urlparts=[];
if (queryState.itemCode && queryState.itemCode != "") {
if(queryState.itemType && queryState.itemType!= "") {
@@ -115,7 +115,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
if(urlparts.length==0 ) {
newQueryState.itemCode = queryState.itemCode;
this.zone.run(() => {
this.store.dispatch(new mapActions.SetQueryState(newQueryState,false));
this.replaceUrl(mapState,newQueryState,false);
})
} else {
this.router.navigate(urlparts);
@@ -157,6 +157,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
ngOnInit() {
this.initialized = false;
console.debug("Init");
this.store.dispatch(new mapActions.Clear());
this.selectedFeatures$.next({x:0,y:0,features:[]});
@@ -234,44 +235,39 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
// 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;
var mapStateChanged = false;
let urlMapState = this.getMapStateFromUrl(params);
if(urlMapState) {
newMapState = urlMapState;
mapStateChanged = this.serializeMapState(state.mapState) != this.serializeMapState(newMapState);
let urlMapState = this.getMapStateFromUrl(this.route.snapshot.paramMap);
let urlQueryState = this.getQueryStateFromUrl(this.route.snapshot.paramMap);
if(urlQueryState && urlMapState) {
this.store.dispatch(new mapActions.SetState(urlMapState,urlQueryState));
window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(urlMapState));
} else if(urlQueryState) {
this.store.dispatch(new mapActions.SetQueryState(urlQueryState));
} else {
this.store.dispatch(new mapActions.SetReplaceUrl(true));
}
let urlQueryState = this.getQueryStateFromUrl(params);
if(urlQueryState) {
newQueryState = urlQueryState;
queryStateChanged = this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState);
}
if(queryStateChanged && mapStateChanged && state.setStateCount ==0) {
return of(new mapActions.SetState(newMapState,newQueryState));
window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState));
} else if(queryStateChanged) {
return of(new mapActions.SetQueryState(newQueryState));
} return of(new mapActions.SetReplaceUrl(true));
})).subscribe((action) => {
if(action) {
this.zone.run(() => {
console.debug("Url to state");
this.store.dispatch(action);
});
}
});
this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$),switchMap(([params,state]) => {
if(this.initialized) {
let urlQueryState = this.getQueryStateFromUrl(params);
if( this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState)) {
return of(new mapActions.SetState(state.mapState,urlQueryState));
}
}
return EMPTY;
})).subscribe((action) => {
if(action) {
this.zone.run(() => {
console.debug("Url to state");
this.store.dispatch(action);
});
}
});
// state to url
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) {
if(this.lastUrl!=newUrl) {
this.lastUrl=newUrl;
return of(state);
}
@@ -280,14 +276,15 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
})).subscribe((newUrlState) =>{
if(newUrlState) {
console.debug(`State to url ${newUrlState.setStateCount}`);
console.debug(`State to url`);
this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl);
}
});
this.initialized = true;
// setTimeout(() => {
// this.map.instance.updateSize();
setTimeout(() => {
this.map.instance.updateSize();
}, 500);
// }, 500);
}
handleSearchCollapse(event) {
@@ -319,39 +316,49 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
let parts =["."];
parts.push(mapState.xCenter.toFixed(5));
parts.push(mapState.yCenter.toFixed(5));
parts.push( mapState.zoom.toFixed(0));
parts.push( mapState.rotation.toFixed(2));
if(mapState.baseLayerCode!="") {
let newMapState = this.serializeMapState(mapState);
let newQueryState = this.serializeService.serialize(queryState);
let currentMapState = this.serializeMapState(this.getMapStateFromUrl(this.route.snapshot.paramMap));
let urlQueryState = this.getQueryStateFromUrl(this.route.snapshot.paramMap);
let currentQueryState = urlQueryState==null?"":this.serializeService.serialize(urlQueryState);
if(mapState.baseLayerCode!="" && ((newMapState!= currentMapState) || (newQueryState!=currentQueryState))) {
let parts =["."];
parts.push(mapState.xCenter.toFixed(5));
parts.push(mapState.yCenter.toFixed(5));
parts.push( mapState.zoom.toFixed(0));
parts.push( mapState.rotation.toFixed(2));
parts.push(mapState.baseLayerCode);
parts.push( this.serializeService.serialize(queryState));
console.debug("Replace url",parts);
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
}
}
handleOnMoveEnd(event) {
console.debug("Move end");
this.zone.run(() =>{
var map = event.map;
var view = map.getView();
var rotation = view.getRotation();
var zoom = view.getZoom();
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
var extent = view.calculateExtent(this.map.instance.getSize());
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
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) { // 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));
}
handleOnMoveEnd(event) {
if(this.initialized) {
this.zone.run(() =>{
console.debug("Move end");
var map = event.map;
var view = map.getView();
var rotation = view.getRotation();
var zoom = view.getZoom();
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
var viewExtent = view.calculateExtent(this.map.instance.getSize());
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
let state = { mapState: mapState, viewExtent: viewExtent };
console.debug("Center: ",center[0],center[1] );
let source = from([state]);
source.pipe(withLatestFrom(this.selectedBaseLayer$)).subscribe(([state, baselayer]) => {
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.viewExtent));
}
});
});
});
}
}
handleOnMouseDown(event: MouseEvent) {
@@ -366,7 +373,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
handleClearSearch(event) {
this.store.dispatch(new commonActions.Escape(true, false));
this.store.dispatch(new mapActions.Clear());
}
handleOnDelete(itemLayer: IItemLayer) {