Fix click on feature

2020-04-16 15:47:15 +02:00 · 2020-04-16 15:47:15 +02:00 · 3e0cf6d691
parent d34a2069d6
commit 3e0cf6d691
7 changed files with 50 additions and 15 deletions
--- 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
--- 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<Feature>
  @Input() queryState: IQueryState;
  @Input() selectedFeature: Feature;
+  @Input() clickedFeature:Observable<Feature>;

  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
  componentRef:any;
@ -52,6 +54,12 @@ export class FeatureListContainerComponent {
    (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
  }

+  ngOnInit() {
+    this.clickedFeature.subscribe((feature => {
+      (<AbstractFeatureListComponent>this.componentRef.instance).handleFeatureClick(feature);
+    }));
+  }
+
  ngOnChanges(changes: SimpleChanges) {
    if ((changes["features"] && changes["features"].currentValue)) {
      if (this.queryState) {
--- 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);
    }
 }
--- 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) {
--- 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)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
+      <fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeaturesSelected)="handleFeatureClick($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" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState"></fm-map-feature-list-container>
+          <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></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
@ -63,6 +63,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
  public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
  public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
  public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
+  public clickedFeature: Observable<Feature> = this.store.select(mapReducers.selectGetClickedFeature);
  public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
  public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
  public period$: Observable<IPeriodState> = 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) {
--- 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);