Fix feature highlighting

2020-04-16 13:19:06 +02:00 · 2020-04-16 13:19:06 +02:00 · d34a2069d6
parent 9fbc946c68
commit d34a2069d6
14 changed files with 101 additions and 79 deletions
--- 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
@ -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) => {        
-        return this.getSelectedStyle(feature);
-      },
+      style:null,
      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());
--- a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss
+++ b/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');
 }

--- a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts
+++ b/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);
-    (<AbstractFeatureListComponent>componentRef.instance).features = this.features;
-    (<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
+    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;
  }

  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;
+    }
  }
 }
--- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
+++ b/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>
--- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss
+++ b/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');
 }

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

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