Make templating more responsive

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

@@ -15,7 +15,6 @@ export const SETPARENT = '[Map] SetParent';
 export const STARTSEARCH = '[Map] StartSearch';
 export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
 export const SELECTFEATURE = '[Map] SelectFeature';
-export const CLICKFEATURE = '[Map] ClickFeature';
 export const SELECTITEM = '[Map] SelectItem';
 export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
 export const SELECTTEMPORALITEMSSUCCESS = '[Map] SelectTemporalItemsSuccess';
@@ -42,6 +41,12 @@ export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
 export const DOQUERY = '[Map] DoQuery';
 export const SETSTYLE = '[Map] SetStyle';
 export const SHOWLAYERSWITCHER = '[Map] ShowLayerSwitcher';
+export const CLEAR = '[Map] Clear';
+
+export class Clear implements Action {
+  readonly type = CLEAR;
+  constructor() {}
+}
 
 export class SetState implements Action {
   readonly type = SETSTATE;
@@ -91,12 +96,6 @@ export class SelectFeature implements Action {
   constructor(public feature:Feature) { }
 }
 
-export class ClickFeature implements Action {
-  readonly type = CLICKFEATURE;
-
-  constructor(public feature:Feature) { }
-}
-
 export class SelectItem implements Action {
   readonly type = SELECTITEM;
 
@@ -254,11 +253,11 @@ export class ShowLayerSwitcher implements Action {
 
 export type Actions = SetMapState
   | Init
+  | Clear
   | SetParent
   | StartSearch
   | StartSearchSuccess
   | SelectFeature
-  | ClickFeature
   | SelectItem
   | SelectItemSuccess
   | SelectTemporalItemsSuccess

projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts

@@ -32,7 +32,7 @@ export class ZoomToExtentComponent implements OnChanges {
         left = 23 * rem;
       }
       options.padding = [top, right, bottom, left];
-      if (this.animate) options["duration"] = 2000;
+      if (this.animate) options["duration"] = 1000;
       this.view.instance.fit(this.extent, options);
     }
   }

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -49,9 +49,9 @@ export class FeatureListContainerComponent {
     viewContainerRef.clear();
 
     this.componentRef = viewContainerRef.createComponent(componentFactory);
-    (<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
-    (<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
-    (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
+    (<AbstractFeatureListComponent>this.componentRef.instance).features = null;
+    (<AbstractFeatureListComponent>this.componentRef.instance).queryState = queryState;
+    (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = null;
   }
 
   ngOnInit() {
@@ -61,10 +61,11 @@ export class FeatureListContainerComponent {
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if ((changes["queryState"] && changes["queryState"].currentValue)) {
+        this.loadComponent(changes["queryState"].currentValue);
+    }
     if ((changes["features"] && changes["features"].currentValue)) {
-      if (this.queryState) {
-        this.loadComponent(this.queryState);
-      }
+      (<AbstractFeatureListComponent>this.componentRef.instance).features = changes["features"].currentValue;
     }
     if(changes["selectedFeature"]) {
       (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = changes["selectedFeature"].currentValue;

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html

@@ -1,11 +1,11 @@
-<div *ngIf="features;let features">
-  <div class="card border-0">
-    <div class="card-body" *ngIf="(schemeItem|async);let schemeItem">
-      <div><a href="#" (click)="handleBackClick($event)" i18n>back</a></div>
-      <h4 i18n>Farm</h4>
-      <h3>{{schemeItem.name}}</h3>
-      <div class="cropfields">
-        <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+<div class="card border-0">
+  <div class="card-body" *ngIf="(schemeItem|async);let schemeItem">
+    <div><a href="#" (click)="handleBackClick($event)" i18n>back</a></div>
+    <h4 i18n>Farm</h4>
+    <h3>{{schemeItem.name}}</h3>
+    <div *ngIf="features;let features">
+        <div class="cropfields">
+          <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html

@@ -1,13 +1,13 @@
-<div *ngIf="features;let features">
-  <div class="card border-0">
-    <div class="card-body">
-      <div><a href="#" (click)="handleBackClick($event)" i18n>Back</a></div>
+<div class="card border-0">
+  <div class="card-body">
+    <div><a href="#" (click)="handleBackClick($event)" i18n>Back</a></div>
       <h3><i class="fm fm-farm"></i>&nbsp;<span i18n>Farms</span></h3>
+      <div *ngIf="features;let features">
       <div class="farms">
         <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
-      </div>
+      </div>      
     </div>
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit,ChangeDetectorRef,NgZone } from '@angular/core';
 import { Location } from '@angular/common';
-import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
-import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
+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 { Store } from '@ngrx/store';
 //import { proj,Map } from 'openlayers';
@@ -63,7 +63,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   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 clickedFeature: Observable<Feature> = this.store.select(mapReducers.selectGetClickedFeature);
+  public clickedFeature: Subject<Feature> = new Subject<Feature>();
   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);
@@ -115,7 +115,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleFeatureClick(feature: Feature) {
-    this.store.dispatch(new mapActions.ClickFeature(feature));
+    this.clickedFeature.next(feature);
   }
 
   handleFeatureHover(feature: Feature) {
@@ -127,7 +127,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   ngOnInit() {
-    this.store.dispatch(new mapActions.Init());   
+    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]) =>{
@@ -191,9 +191,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.setStateCount$),withLatestFrom(this.queryState$),withLatestFrom(this.mapState$)).subscribe( ([[[params,setStateCount],lastQueryState],lastMapState]) => {
       var newMapState: IMapState = lastMapState;
       var newQueryState: IQueryState = lastQueryState;
-      var mapStateChanged = false;
+      var hasUrlmapState = params.has("xCenter") && params.has("yCenter");
       var queryStateChanged = false;
-      if (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"));

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

@@ -43,7 +43,6 @@ export interface State {
   panelVisible: boolean,
   panelCollapsed: boolean,
   selectedFeature: Feature,
-  clickedFeature: Feature,
   selectedItem:IItem,
   clearEnabled: boolean,
   searchCollapsed: boolean,
@@ -80,7 +79,6 @@ export const initialState: State = {
   panelVisible: false,
   panelCollapsed: false,
   selectedFeature: null,
-  clickedFeature: null,
   selectedItem: null, 
   clearEnabled: false,
   searchCollapsed: true,
@@ -139,10 +137,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           }
         }  
       }
-      return tassign(state, {
-        panelVisible: true,
-        clearEnabled: true,
-        searchMinified: true,
+      return tassign(state, {       
         features: a.features,
         extent:extent
       });
@@ -150,16 +145,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.SELECTFEATURE: {
       let a = action as mapActions.SelectFeature;
       return tassign(state, {
-        selectedFeature: state.selectedItem?state.selectedFeature: a.feature,
-        clickedFeature:null
+        selectedFeature: state.selectedItem?state.selectedFeature: a.feature
       });
-    }
-    case mapActions.CLICKFEATURE: {
-      let a = action as mapActions.ClickFeature;
-      return tassign(state, {
-        clickedFeature: a.feature
-      });
-    }
+    }    
     case mapActions.SELECTITEM: {
       return tassign(state, {
         selectedItem: null,
@@ -270,9 +258,13 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let a = action as mapActions.StartSearch;
       return tassign(state, {
         selectedItem: null,
+        features:[],
         selectedItemLayer:null,
         queryState: tassign(a.queryState),
         searchCollapsed: false,
+        panelVisible: true,
+        clearEnabled: true,
+        searchMinified: true,
       });
     }
     case mapActions.DOQUERY: {
@@ -288,7 +280,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         panelVisible: true,
         selectedFeature: a.feature,
-        clickedFeature:null,
         extent: a.feature.getGeometry().getExtent(),
         searchCollapsed: false,
         clearEnabled:true,
@@ -444,7 +435,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           selectedItem: null,
           selectedItemLayer: null,
           selectedFeature: null,
-          clickedFeature:null,
           queryState: newQueryState,
           clearEnabled: false,
           searchCollapsed: true,
@@ -467,8 +457,8 @@ 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});
+    case mapActions.CLEAR:{
+      return tassign(state,{setStateCount:0,features:[],selectedFeature:null,selectedItem:null});
     }
     default: {
       return state;
@@ -482,7 +472,6 @@ export const getFeatures = (state: State) => state.features;
 export const getPanelVisible = (state: State) => state.panelVisible;
 export const getPanelCollapsed = (state: State) => state.panelCollapsed;
 export const getSelectedFeature = (state: State) => state.selectedFeature;
-export const getClickedFeature = (state: State) => state.clickedFeature;
 export const getSelectedItem = (state: State) => state.selectedItem;
 export const getQueryState = (state: State) => state.queryState;
 export const getClearEnabled = (state: State) => state.clearEnabled;
@@ -508,7 +497,6 @@ export const selectGetFeatures = createSelector(selectMapState, getFeatures);
 export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible);
 export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
 export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
-export const selectGetClickedFeature =  createSelector(selectMapState, getClickedFeature);
 export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
 export const selectGetQueryState = createSelector(selectMapState, getQueryState);
 export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);