FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix feature highlighting
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-04-16 13:19:06 +02:00
parent 9fbc946c68
commit d34a2069d6
14 changed files with 101 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,9 +78,7 @@ 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]
});
@ -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());

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

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

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

@ -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;
}
}
}

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

@ -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>

2
projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss
View File

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

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

@ -1,4 +1,4 @@
import { Component, Injectable,AfterViewInit, OnInit} from '@angular/core';
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';

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

@ -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>

2
projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss
View File

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

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

@ -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>

2
projects/common-map/src/fm-map/components/feature-list/feature-list.component.scss
View File

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

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

@ -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()

4
projects/common-map/src/fm-map/components/map/map.component.html
View File

@ -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">

4
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@ -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));
}