From 2388968f2aeed0f05338bff26ab6391582d049b0 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 3 Mar 2020 19:24:01 +0100 Subject: [PATCH] Fix layer selection --- .../aol/item-layers/item-layers.component.ts | 2 +- .../selected-item-geotiff.component.html | 8 +- .../selected-item-shape.component.html | 6 +- .../selected-item-shape.component.ts | 62 +++++++------ .../selected-item-temporal.component.html | 8 +- .../selected-item-temporal.component.ts | 2 - .../src/fm-map/models/item.layer.ts | 3 +- .../src/fm-map/reducers/map.reducer.ts | 88 +++++++++++++++---- 8 files changed, 117 insertions(+), 62 deletions(-) diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts index 5bccd13..cb51398 100644 --- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts @@ -278,7 +278,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange itemLayers.forEach((itemLayer, index) => { if(itemLayer.item.itemType == 'vnd.farmmaps.itemtype.temporal') { let il = itemLayer as ITemporalItemLayer; - let previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length); + let previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length); if(previousLayer) newLayers.push(previousLayer); let selectedLayer = this.addOrUpdateOlLayer(il.selectedItemLayer,newLayers.length); if(selectedLayer) newLayers.push(selectedLayer); diff --git a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html index 25e1951..75adccd 100644 --- a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html +++ b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html @@ -9,18 +9,18 @@
- +
- +
diff --git a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html index 1507e8d..63ff300 100644 --- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html +++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html @@ -9,18 +9,18 @@
-
- +
diff --git a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts index 1a0a445..2b54f5b 100644 --- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts +++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts @@ -1,32 +1,30 @@ -import { Component, Input, Injectable, OnInit } from '@angular/core'; -import { Location } from '@angular/common'; -import { Feature } from 'ol'; -import { Store } from '@ngrx/store'; -import * as mapReducers from '../../reducers/map.reducer'; -import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common'; -import * as mapActions from '../../actions/map.actions'; -import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router'; -import { ForItemType } from '../for-item/for-itemtype.decorator'; -import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component'; -import { Observable } from 'rxjs'; - - -@ForItemType("vnd.farmmaps.itemtype.shape.processed") -@Injectable() -@Component({ - selector: 'fm-map-selected-item-shape', - templateUrl: './selected-item-shape.component.html', - styleUrls: ['./selected-item-shape.component.scss'] -}) -export class SelectedItemShapeComponent extends AbstractSelectedItemComponent { - - constructor(store: Store, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) { - super(store, itemTypeService,location,router); - } - public selectedLayer: number = 0; - - onLayerChanged(layerIndex: number) { - this.selectedLayer = layerIndex; - this.store.dispatch(new mapActions.SetLayerIndex(layerIndex)); - } -} +import { Component, Input, Injectable, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; +import { Feature } from 'ol'; +import { Store } from '@ngrx/store'; +import * as mapReducers from '../../reducers/map.reducer'; +import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common'; +import * as mapActions from '../../actions/map.actions'; +import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router'; +import { ForItemType } from '../for-item/for-itemtype.decorator'; +import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component'; +import { Observable } from 'rxjs'; + + +@ForItemType("vnd.farmmaps.itemtype.shape.processed") +@Injectable() +@Component({ + selector: 'fm-map-selected-item-shape', + templateUrl: './selected-item-shape.component.html', + styleUrls: ['./selected-item-shape.component.scss'] +}) +export class SelectedItemShapeComponent extends AbstractSelectedItemComponent { + + constructor(store: Store, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) { + super(store, itemTypeService,location,router); + } + + onLayerChanged(layerIndex: number) { + this.store.dispatch(new mapActions.SetLayerIndex(layerIndex)); + } +} diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html index b718c92..ed64370 100644 --- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html +++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html @@ -10,17 +10,17 @@
- +
- +
diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts index b5917bc..c546a98 100644 --- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts +++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts @@ -22,10 +22,8 @@ export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent constructor(store: Store, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) { super(store, itemTypeService,location,router); } - public selectedLayer: number = 0; onLayerChanged(layerIndex: number) { - this.selectedLayer = layerIndex; this.store.dispatch(new mapActions.SetLayerIndex(layerIndex)); } diff --git a/projects/common-map/src/fm-map/models/item.layer.ts b/projects/common-map/src/fm-map/models/item.layer.ts index 29a5b04..ede7354 100644 --- a/projects/common-map/src/fm-map/models/item.layer.ts +++ b/projects/common-map/src/fm-map/models/item.layer.ts @@ -20,10 +20,11 @@ export class ItemLayer implements IItemLayer { public opacity: number = 1; public layerIndex: number = -1; - constructor(item:IItem,opacity:number = 1, visible:boolean = true) { + constructor(item:IItem,opacity:number = 1, visible:boolean = true,layerIndex:number=-1) { this.item = item; this.opacity = opacity; this.visible = visible; + this.layerIndex = layerIndex; } } 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 d0d3c0a..6d5cdd5 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -164,8 +164,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo var itemLayer = null; if (a.item && "vnd.farmmaps.itemtype.layer,vnd.farmmaps.itemtype.shape.processed,vnd.farmmaps.itemtype.geotiff.processed".indexOf(a.item.itemType) >=0 ) { itemLayer = new ItemLayer(a.item); + itemLayer.layerIndex = a.item.data.layers[0].index; } else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") { - itemLayer = new TemporalItemLayer(a.item); + itemLayer = new TemporalItemLayer(a.item); } return tassign(state, { selectedItem: a.item, @@ -180,10 +181,22 @@ export function reducer(state = initialState, action: mapActions.Actions | commo case mapActions.SELECTTEMPORALITEMSSUCCESS:{ let a = action as mapActions.SelectTemporalItemsSuccess; let selectedItemLayer=tassign(state.selectedItemLayer) as TemporalItemLayer; + let layerIndex=-1; selectedItemLayer.temporalItems = a.temporalItems; - selectedItemLayer.selectedItemLayer = a.temporalItems.length>0?new ItemLayer(a.temporalItems[a.temporalItems.length-1]):null; - selectedItemLayer.previousItemLayer = a.temporalItems.length>1?new ItemLayer(a.temporalItems[a.temporalItems.length-2],0):null; + if(a.temporalItems.length>0) { + let item = a.temporalItems[a.temporalItems.length-1]; + layerIndex = item.data.layers[0].index; + selectedItemLayer.selectedItemLayer = new ItemLayer(item,1,true,layerIndex); + } else { + selectedItemLayer.selectedItemLayer = null; + } + selectedItemLayer.previousItemLayer = a.temporalItems.length>1?new ItemLayer(a.temporalItems[a.temporalItems.length-2],0,true,layerIndex):null; selectedItemLayer.nextItemLayer = null; + if(selectedItemLayer.selectedItemLayer) { + let layerIndex = selectedItemLayer.selectedItemLayer.item.data.layers[0].index; + selectedItemLayer.layerIndex = layerIndex; + } + return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,selectedItemLayer as ItemLayer)}); } case mapActions.NEXTTEMPORAL: { @@ -194,11 +207,20 @@ export function reducer(state = initialState, action: mapActions.Actions | commo return state; } else { temporalLayer.previousItemLayer = temporalLayer.selectedItemLayer; - if( temporalLayer.previousItemLayer) temporalLayer.previousItemLayer.opacity=0; + if( temporalLayer.previousItemLayer) { + temporalLayer.previousItemLayer.opacity=0; + temporalLayer.previousItemLayer.layerIndex = temporalLayer.layerIndex; + } temporalLayer.selectedItemLayer = temporalLayer.nextItemLayer; - if( temporalLayer.selectedItemLayer) temporalLayer.selectedItemLayer.opacity=1; - temporalLayer.nextItemLayer = index+2 < temporalLayer.temporalItems.length ? new ItemLayer(temporalLayer.temporalItems[index+2],0):null; - if( temporalLayer.nextItemLayer) temporalLayer.nextItemLayer.opacity=0; + if( temporalLayer.selectedItemLayer) { + temporalLayer.selectedItemLayer.opacity=1; + temporalLayer.selectedItemLayer.layerIndex=temporalLayer.layerIndex; + } + temporalLayer.nextItemLayer = index+2 < temporalLayer.temporalItems.length ? new ItemLayer(temporalLayer.temporalItems[index+2],0,true,temporalLayer.layerIndex):null; + if( temporalLayer.nextItemLayer) { + temporalLayer.nextItemLayer.opacity=0; + temporalLayer.nextItemLayer.layerIndex = temporalLayer.layerIndex; + } return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,temporalLayer as ItemLayer)}); } } else { @@ -213,11 +235,20 @@ export function reducer(state = initialState, action: mapActions.Actions | commo return state; } else { temporalLayer.nextItemLayer = temporalLayer.selectedItemLayer; - if( temporalLayer.nextItemLayer) temporalLayer.nextItemLayer.opacity=0; - temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer; - if( temporalLayer.selectedItemLayer) temporalLayer.selectedItemLayer.opacity=1; - temporalLayer.previousItemLayer = index-2 >=0? new ItemLayer(temporalLayer.temporalItems[index-2],0):null; - if( temporalLayer.previousItemLayer) temporalLayer.previousItemLayer.opacity=0; + if( temporalLayer.nextItemLayer) { + temporalLayer.nextItemLayer.opacity=0; + temporalLayer.nextItemLayer.layerIndex = temporalLayer.layerIndex; + } + temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer; + if( temporalLayer.selectedItemLayer) { + temporalLayer.selectedItemLayer.opacity=1; + temporalLayer.selectedItemLayer.layerIndex = temporalLayer.layerIndex; + } + temporalLayer.previousItemLayer = index-2 >=0? new ItemLayer(temporalLayer.temporalItems[index-2],0,true,temporalLayer.layerIndex):null; + if( temporalLayer.previousItemLayer) { + temporalLayer.previousItemLayer.opacity=0; + temporalLayer.previousItemLayer.layerIndex = temporalLayer.layerIndex; + } return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,temporalLayer as ItemLayer)}); } } else { @@ -316,9 +347,36 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } case mapActions.SETLAYERINDEX: { let a = action as mapActions.SetLayerIndex; - if (a.itemLayer == null) { - var newItemlayer = new ItemLayer(state.selectedItemLayer.item); - newItemlayer.layerIndex = a.layerIndex; + if (a.itemLayer == null) { + if(state.selectedItemLayer.item.itemType == "vnd.farmmaps.itemtype.temporal") { + var newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex}); + let tl = newItemlayer as ITemporalItemLayer; + if(tl.previousItemLayer) { + let nl = new ItemLayer(tl.previousItemLayer.item); + nl.opacity = tl.previousItemLayer.opacity; + nl.visible = tl.previousItemLayer.visible; + nl.layerIndex = a.layerIndex; + tl.previousItemLayer = nl; + } + if(tl.selectedItemLayer) { + let nl = new ItemLayer(tl.selectedItemLayer.item); + nl.opacity = tl.selectedItemLayer.opacity; + nl.visible = tl.selectedItemLayer.visible; + nl.layerIndex = a.layerIndex; + tl.selectedItemLayer = nl; + } + if(tl.nextItemLayer) { + let nl = new ItemLayer(tl.nextItemLayer.item); + nl.opacity = tl.nextItemLayer.opacity; + nl.visible = tl.nextItemLayer.visible; + nl.layerIndex = a.layerIndex; + tl.nextItemLayer = nl; + } + } else { + var newItemlayer = new ItemLayer(state.selectedItemLayer.item); + newItemlayer.layerIndex = a.layerIndex; + + } return tassign(state, { selectedItemLayer: newItemlayer}) } else { let newLayers = state.overlayLayers.slice(0);