From 3e0cf6d6915847007ab0696206b4abff1e75b0ef Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Thu, 16 Apr 2020 15:47:15 +0200 Subject: [PATCH] Fix click on feature --- .../common-map/src/fm-map/actions/map.actions.ts | 8 ++++++++ .../feature-list-container.component.ts | 8 ++++++++ .../feature-list-croppingscheme.component.ts | 7 ++++--- .../feature-list/feature-list.component.ts | 15 +++++++++++---- .../src/fm-map/components/map/map.component.html | 4 ++-- .../src/fm-map/components/map/map.component.ts | 8 +++----- .../common-map/src/fm-map/reducers/map.reducer.ts | 15 ++++++++++++++- 7 files changed, 50 insertions(+), 15 deletions(-) diff --git a/projects/common-map/src/fm-map/actions/map.actions.ts b/projects/common-map/src/fm-map/actions/map.actions.ts index e492005..33b9a64 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/projects/common-map/src/fm-map/actions/map.actions.ts @@ -15,6 +15,7 @@ export const SETPARENT = '[Map] SetParent'; export const STARTSEARCH = '[Map] StartSearch'; export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess'; export const SELECTFEATURE = '[Map] SelectFeature'; +export const CLICKFEATURE = '[Map] ClickFeature'; export const SELECTITEM = '[Map] SelectItem'; export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess'; export const SELECTTEMPORALITEMSSUCCESS = '[Map] SelectTemporalItemsSuccess'; @@ -90,6 +91,12 @@ export class SelectFeature implements Action { constructor(public feature:Feature) { } } +export class ClickFeature implements Action { + readonly type = CLICKFEATURE; + + constructor(public feature:Feature) { } +} + export class SelectItem implements Action { readonly type = SELECTITEM; @@ -251,6 +258,7 @@ export type Actions = SetMapState | StartSearch | StartSearchSuccess | SelectFeature + | ClickFeature | SelectItem | SelectItemSuccess | SelectTemporalItemsSuccess 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 2135d74..3c870e7 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 @@ -6,6 +6,7 @@ import {IQueryState } from '@farmmaps/common'; import * as mapReducers from '../../reducers/map.reducer'; import * as mapActions from '../../actions/map.actions'; import { Store } from '@ngrx/store'; +import { Observable } from 'rxjs'; @Component({ @@ -21,6 +22,7 @@ export class FeatureListContainerComponent { @Input() features: Array @Input() queryState: IQueryState; @Input() selectedFeature: Feature; + @Input() clickedFeature:Observable; @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; componentRef:any; @@ -52,6 +54,12 @@ export class FeatureListContainerComponent { (this.componentRef.instance).selectedFeature = this.selectedFeature; } + ngOnInit() { + this.clickedFeature.subscribe((feature => { + (this.componentRef.instance).handleFeatureClick(feature); + })); + } + ngOnChanges(changes: SimpleChanges) { if ((changes["features"] && changes["features"].currentValue)) { if (this.queryState) { 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 40e960e..9e359c3 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 @@ -2,12 +2,13 @@ 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 { Store,Action } 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'; +import { Feature } from 'ol'; @ForItemType("vnd.farmmaps.itemtype.croppingscheme") @Injectable() @@ -22,8 +23,8 @@ export class FeatureListCroppingschemeComponent extends AbstractFeatureListCompo super(store, itemTypeService, location); } - handleFeatureClick(feature) { + getAction(feature:Feature):Action { var queryState = tassign(mapReducers.initialState.queryState, { parentCode: feature.get('code'), itemType: "vnd.farmmaps.itemtype.cropfield" }); - this.store.dispatch(new mapActions.DoQuery(queryState)); + return new mapActions.DoQuery(queryState); } } 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 5aff598..4661d4c 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,7 +1,7 @@ import { Component, Input, Injectable,Directive,SimpleChanges } from '@angular/core'; import { Location } from '@angular/common'; import { Feature } from 'ol'; -import { Store } from '@ngrx/store'; +import { Store,Action} from '@ngrx/store'; import * as mapReducers from '../../reducers/map.reducer'; import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common'; import * as mapActions from '../../actions/map.actions'; @@ -21,9 +21,16 @@ export abstract class AbstractFeatureListComponent { } handleFeatureClick(feature:Feature) { - var newQuery: any = tassign(mapReducers.initialState.query); - newQuery.itemCode = feature.get('code'); - this.store.dispatch(new mapActions.DoQuery(newQuery)); + if(feature) { + let action = this.getAction(feature); + this.store.dispatch(action); + } + } + + getAction(feature:Feature):Action { + var newQuery: any = tassign(mapReducers.initialState.query); + newQuery.itemCode = feature.get('code'); + return new mapActions.DoQuery(newQuery) } handleFeatureMouseEnter(feature) { 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 68d9d83..ddead55 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 6d42602..7c34f0e 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 @@ -63,6 +63,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { public panelVisible$: Observable = this.store.select(mapReducers.selectGetPanelVisible); public panelCollapsed$: Observable = this.store.select(mapReducers.selectGetPanelCollapsed); public selectedFeature$: Observable = this.store.select(mapReducers.selectGetSelectedFeature); + public clickedFeature: Observable = this.store.select(mapReducers.selectGetClickedFeature); public selectedItem$: Observable = this.store.select(mapReducers.selectGetSelectedItem); public queryState$: Observable = this.store.select(mapReducers.selectGetQueryState); public period$: Observable = this.store.select(mapReducers.selectGetPeriod); @@ -113,11 +114,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry }); } - handleFeaturesSelected(feature: Feature) { - if (feature) { - let newQuery = tassign(mapReducers.initialQueryState, { parentCode: feature.get('parentCode'), itemCode: feature.get('code'),itemType:feature.get('itemType') }); - this.store.dispatch(new mapActions.DoQuery(newQuery)); - } + handleFeatureClick(feature: Feature) { + this.store.dispatch(new mapActions.ClickFeature(feature)); } handleFeatureHover(feature: Feature) { diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index 2cdea4e..169de10 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -43,6 +43,7 @@ export interface State { panelVisible: boolean, panelCollapsed: boolean, selectedFeature: Feature, + clickedFeature: Feature, selectedItem:IItem, clearEnabled: boolean, searchCollapsed: boolean, @@ -79,6 +80,7 @@ export const initialState: State = { panelVisible: false, panelCollapsed: false, selectedFeature: null, + clickedFeature: null, selectedItem: null, clearEnabled: false, searchCollapsed: true, @@ -148,7 +150,14 @@ export function reducer(state = initialState, action: mapActions.Actions | commo case mapActions.SELECTFEATURE: { let a = action as mapActions.SelectFeature; return tassign(state, { - selectedFeature: state.selectedItem?state.selectedFeature: a.feature + selectedFeature: state.selectedItem?state.selectedFeature: a.feature, + clickedFeature:null + }); + } + case mapActions.CLICKFEATURE: { + let a = action as mapActions.ClickFeature; + return tassign(state, { + clickedFeature: a.feature }); } case mapActions.SELECTITEM: { @@ -279,6 +288,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo return tassign(state, { panelVisible: true, selectedFeature: a.feature, + clickedFeature:null, extent: a.feature.getGeometry().getExtent(), searchCollapsed: false, clearEnabled:true, @@ -434,6 +444,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo selectedItem: null, selectedItemLayer: null, selectedFeature: null, + clickedFeature:null, queryState: newQueryState, clearEnabled: false, searchCollapsed: true, @@ -471,6 +482,7 @@ export const getFeatures = (state: State) => state.features; export const getPanelVisible = (state: State) => state.panelVisible; export const getPanelCollapsed = (state: State) => state.panelCollapsed; export const getSelectedFeature = (state: State) => state.selectedFeature; +export const getClickedFeature = (state: State) => state.clickedFeature; export const getSelectedItem = (state: State) => state.selectedItem; export const getQueryState = (state: State) => state.queryState; export const getClearEnabled = (state: State) => state.clearEnabled; @@ -496,6 +508,7 @@ export const selectGetFeatures = createSelector(selectMapState, getFeatures); export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible); export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed); export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature); +export const selectGetClickedFeature = createSelector(selectMapState, getClickedFeature); export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem); export const selectGetQueryState = createSelector(selectMapState, getQueryState); export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);