Fix feature highlighting

projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts

@@ -35,6 +35,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
   @Input() selectedItem: IItem;
   @Input() styles:IStyles;
   @Output() onFeaturesSelected: EventEmitter<Feature> = new EventEmitter<Feature>();
+  @Output() onFeatureHover: EventEmitter<Feature> = new EventEmitter<Feature>();
   private stylesCache:IStyles = {};
 
   constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, @Host() private map: MapComponent, private itemTypeService: ItemTypeService,private featureIconService$:FeatureIconService) {
@@ -77,14 +78,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     this.strategy = loadingstrategy.bbox;
     this.format = new GeoJSON();
     this._select = new Select({
-      style: (feature) => {        
+      style:null,
-        return this.getSelectedStyle(feature);
-      },
       hitTolerance: 10,
       layers: [this.layer.instance as Layer]
     });
     this._hoverSelect = new Select({
-      style: (feature) => {
+      style: (feature) => {        
         return this.getSelectedStyle(feature);
       },
       hitTolerance: 10,
@@ -102,6 +101,13 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
         this.onFeaturesSelected.emit(null);
       }
     });
+    this._hoverSelect.on('select', (e) => {
+      if (e.selected.length > 0 && e.selected[0]) {
+        this.onFeatureHover.emit(e.selected[0]);
+      } else {
+        this.onFeatureHover.emit(null);
+      }
+    });
     this.instance = new Vector(this);
     this.host.instance.setSource(this.instance);
       
@@ -153,7 +159,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     }
 
     if (changes["selectedFeature"] && this.instance) {
-      var features = this._select.getFeatures();
+      var features = this._hoverSelect.getFeatures();
       var feature = changes["selectedFeature"].currentValue
       //this.instance.clear(false);
       //this.instance.addFeatures(features.getArray());

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

@@ -7,7 +7,7 @@
   user-select: none;
 }
 
-.row:hover {
+.row.selected {
   background-color: gray('100');
 }
 

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
+import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject} from '@angular/core';
 import { Feature } from 'ol';
 import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
@@ -20,8 +20,10 @@ export class FeatureListContainerComponent {
 
   @Input() features: Array<Feature>
   @Input() queryState: IQueryState;
+  @Input() selectedFeature: Feature;
 
   @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
+  componentRef:any;
 
   loadComponent(queryState:IQueryState) {
     var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
@@ -44,16 +46,20 @@ export class FeatureListContainerComponent {
     const viewContainerRef = this.widgetHost.viewContainerRef;
     viewContainerRef.clear();
 
-    const componentRef = viewContainerRef.createComponent(componentFactory);
+    this.componentRef = viewContainerRef.createComponent(componentFactory);
-    (<AbstractFeatureListComponent>componentRef.instance).features = this.features;
+    (<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
-    (<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
+    (<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
+    (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes["features"] && changes["features"].currentValue) {
+    if ((changes["features"] && changes["features"].currentValue)) {
       if (this.queryState) {
         this.loadComponent(this.queryState);
       }
     }
+    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

@@ -5,7 +5,7 @@
       <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" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+        <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-cropfield/feature-list-cropfield.component.scss

@@ -11,7 +11,7 @@ fm-map-feature-list-feature-container {
   padding-left:1.5rem;
 }
 
-.row:hover {
+.row.selected {
   background-color: gray('100');
 }
 

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

@@ -1,30 +1,30 @@
-import { Component, Injectable,AfterViewInit, OnInit} from '@angular/core';
+import { Component, Injectable,AfterViewInit, OnInit,SimpleChanges, ChangeDetectorRef} from '@angular/core';
-import { Location } from '@angular/common';
+import { Location } from '@angular/common';
-import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
+import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
-import {ForItemType } from '../for-item/for-itemtype.decorator';
+import {ForItemType } from '../for-item/for-itemtype.decorator';
-import {ForChild } from '../for-item/for-child.decorator';
+import {ForChild } from '../for-item/for-child.decorator';
-import { Store } from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
+import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem,ItemService } from '@farmmaps/common';
+import { commonReducers, ItemTypeService, IItem,ItemService } from '@farmmaps/common';
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs';
-
+
-@ForChild()
+@ForChild()
-@ForItemType("vnd.farmmaps.itemtype.cropfield")
+@ForItemType("vnd.farmmaps.itemtype.cropfield")
-@Injectable()
+@Injectable()
-@Component({
+@Component({
-  selector: 'fm-map-feature-list-cropfield',
+  selector: 'fm-map-feature-list-cropfield',
-    templateUrl: './feature-list-cropfield.component.html',
+    templateUrl: './feature-list-cropfield.component.html',
-    styleUrls: ['./feature-list-cropfield.component.scss']
+    styleUrls: ['./feature-list-cropfield.component.scss']
-})
+})
-export class FeatureListCropfieldComponent extends AbstractFeatureListComponent implements OnInit {
+export class FeatureListCropfieldComponent extends AbstractFeatureListComponent implements OnInit {
-
+
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, private itemService: ItemService) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, private itemService: ItemService) {
-    super(store, itemTypeService,location);
+    super(store, itemTypeService,location);
-  }
+  }
-
+
-  public schemeItem: Observable<IItem>
+  public schemeItem: Observable<IItem>
-
+
-  ngOnInit() {
+  ngOnInit() {
-    this.schemeItem = this.itemService.getItem(this.queryState.parentCode);
+    this.schemeItem = this.itemService.getItem(this.queryState.parentCode);
-  }
+  } 
-}
+}

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

@@ -4,7 +4,7 @@
       <div><a href="#" (click)="handleBackClick($event)" i18n>Back</a></div>
       <h3><i class="fm fm-farm"></i>&nbsp;<span i18n>Farms</span></h3>
       <div class="farms">
-        <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+        <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.scss

@@ -11,7 +11,7 @@ fm-map-feature-list-feature-container {
   padding-left:1.5rem;
 }
 
-.row:hover {
+.row.selected {
   background-color: gray('100');
 }
 

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

@@ -1,29 +1,29 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, Injectable } from '@angular/core';
-import { Location } from '@angular/common';
+import { Location } from '@angular/common';
-import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
+import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
-import { ForItemType } from '../for-item/for-itemtype.decorator';
+import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { Store } from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
+import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService } from '@farmmaps/common';
+import { commonReducers, ItemTypeService } from '@farmmaps/common';
-import * as mapActions from '../../actions/map.actions';
+import * as mapActions from '../../actions/map.actions';
-import { tassign } from 'tassign';
+import { tassign } from 'tassign';
-import { Router } from '@angular/router';
+import { Router } from '@angular/router';
-
+
-@ForItemType("vnd.farmmaps.itemtype.croppingscheme")
+@ForItemType("vnd.farmmaps.itemtype.croppingscheme")
-@Injectable()
+@Injectable()
-@Component({
+@Component({
-    selector: 'fm-map-feature-list-croppingscheme',
+    selector: 'fm-map-feature-list-croppingscheme',
-    templateUrl: './feature-list-croppingscheme.component.html',
+    templateUrl: './feature-list-croppingscheme.component.html',
-    styleUrls: ['./feature-list-croppingscheme.component.scss']
+    styleUrls: ['./feature-list-croppingscheme.component.scss']
-})
+})
-export class FeatureListCroppingschemeComponent extends AbstractFeatureListComponent {
+export class FeatureListCroppingschemeComponent extends AbstractFeatureListComponent {
-
+
-    constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, private router: Router) {
+    constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, private router: Router) {
-        super(store, itemTypeService, location);
+        super(store, itemTypeService, location);
-    }
+    }
-
+
-    handleFeatureClick(feature) {
+    handleFeatureClick(feature) {
-        var queryState = tassign(mapReducers.initialState.queryState, { parentCode: feature.get('code'), itemType: "vnd.farmmaps.itemtype.cropfield" });
+        var queryState = tassign(mapReducers.initialState.queryState, { parentCode: feature.get('code'), itemType: "vnd.farmmaps.itemtype.cropfield" });
-        this.store.dispatch(new mapActions.DoQuery(queryState));
+        this.store.dispatch(new mapActions.DoQuery(queryState));
-    }
+    }
-}
+}

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

@@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
   <a href="#" (click)="handleBackClick($event)">Go back</a>
-  <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+  <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/feature-list.component.scss

@@ -10,6 +10,6 @@ fm-map-feature-list-feature-container {
   user-select: none;
 }
 
-.row:hover {
+.row.selected {
   background-color: gray('100');
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, Injectable,Directive } from '@angular/core';
+import { Component, Input, Injectable,Directive,SimpleChanges } from '@angular/core';
 import { Location } from '@angular/common';
 import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
@@ -16,6 +16,7 @@ import { IQueryState } from '@farmmaps/common';
 export abstract class AbstractFeatureListComponent {
   @Input() features: Array<Feature>;
   @Input() queryState: IQueryState;
+  @Input() selectedFeature: Feature;
   constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location) {
   }
 
@@ -37,6 +38,11 @@ export abstract class AbstractFeatureListComponent {
     event.preventDefault();
     this.location.back();
   }
+
+  isFeatureSelected(feature:Feature):boolean {
+    if(!this.selectedFeature) return false;
+    return feature.getId() == this.selectedFeature.getId();
+  }  
 }
 
 @Injectable()

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

@@ -34,7 +34,7 @@
     <fm-map-item-layers [itemLayers]="state.overlayLayers"></fm-map-item-layers>
     <fm-map-item-layers [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
     <aol-layer-vector>
-      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
+      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeaturesSelected($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
     </aol-layer-vector>
     <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container">
@@ -53,7 +53,7 @@
       <div class="panel-bottom">
   
         <div *ngIf="!(state.selectedItem)">
-          <fm-map-feature-list-container [features]="state.features" [queryState]="state.queryState"></fm-map-feature-list-container>
+          <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState"></fm-map-feature-list-container>
         </div>
   
         <div *ngIf="state.selectedItem;let item">

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

@@ -120,6 +120,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     }
   }
 
+  handleFeatureHover(feature: Feature) {
+    this.store.dispatch(new mapActions.SelectFeature(feature));
+  }
+
   handleSearch(queryState: IQueryState) {
     this.store.dispatch(new mapActions.DoQuery(queryState));
   }