From d34a2069d6c1ea8f9c3ff8e1ee1ec5babc760df2 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Thu, 16 Apr 2020 13:19:06 +0200 Subject: [PATCH] Fix feature highlighting --- .../item-vector-source.component.ts | 16 +++-- .../feature-list-container.component.scss | 2 +- .../feature-list-container.component.ts | 16 +++-- .../feature-list-cropfield.component.html | 2 +- .../feature-list-cropfield.component.scss | 2 +- .../feature-list-cropfield.component.ts | 60 +++++++++---------- ...feature-list-croppingscheme.component.html | 2 +- ...feature-list-croppingscheme.component.scss | 2 +- .../feature-list-croppingscheme.component.ts | 58 +++++++++--------- .../feature-list/feature-list.component.html | 2 +- .../feature-list/feature-list.component.scss | 2 +- .../feature-list/feature-list.component.ts | 8 ++- .../fm-map/components/map/map.component.html | 4 +- .../fm-map/components/map/map.component.ts | 4 ++ 14 files changed, 101 insertions(+), 79 deletions(-) diff --git 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 index 9c2e6df..cf3917c 100644 --- 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 = new EventEmitter(); + @Output() onFeatureHover: EventEmitter = new EventEmitter(); 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()); diff --git 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 index 9317554..c14a57a 100644 --- 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'); } diff --git 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 index 80482a2..2135d74 100644 --- 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 @Input() queryState: IQueryState; + @Input() selectedFeature: Feature; @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; + componentRef:any; loadComponent(queryState:IQueryState) { var componentFactory: ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default @@ -44,16 +46,20 @@ export class FeatureListContainerComponent { const viewContainerRef = this.widgetHost.viewContainerRef; viewContainerRef.clear(); - const componentRef = viewContainerRef.createComponent(componentFactory); - (componentRef.instance).features = this.features; - (componentRef.instance).queryState = this.queryState; + this.componentRef = viewContainerRef.createComponent(componentFactory); + (this.componentRef.instance).features = this.features; + (this.componentRef.instance).queryState = this.queryState; + (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"]) { + (this.componentRef.instance).selectedFeature = changes["selectedFeature"].currentValue; + } } } diff --git 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 index ef25eea..b2262c2 100644 --- 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 @@

Farm

{{schemeItem.name}}

-
+
diff --git 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 index 3706754..091b8bb 100644 --- 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'); } diff --git 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 index 8f9c3ff..9e28814 100644 --- 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, itemTypeService: ItemTypeService, location: Location, private itemService: ItemService) { - super(store, itemTypeService,location); - } - - public schemeItem: Observable - - 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, itemTypeService: ItemTypeService, location: Location, private itemService: ItemService) { + super(store, itemTypeService,location); + } + + public schemeItem: Observable + + ngOnInit() { + this.schemeItem = this.itemService.getItem(this.queryState.parentCode); + } +} diff --git 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 index aafd84d..6cb9b5a 100644 --- 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 @@

 Farms

-
+
diff --git 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 index 966dc09..2bcf68b 100644 --- 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'); } diff --git 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 index f9bafb5..40e960e 100644 --- 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, 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, 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)); + } +} diff --git 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 index 7afdb97..be62e8b 100644 --- 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 @@
Go back -
+
diff --git 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 index c6b4418..6a0803d 100644 --- 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'); } diff --git 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 index 791a9cd..5aff598 100644 --- 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; @Input() queryState: IQueryState; + @Input() selectedFeature: Feature; constructor(public store: Store, 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() diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html index 1d3c233..68d9d83 100644 --- 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 @@ - +
@@ -53,7 +53,7 @@
- +
diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 9a9598a..6d42602 100644 --- 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)); }