Make templating more responsive

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"));