Fix layer selection

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

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html

@@ -9,18 +9,18 @@
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
           <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
+            <select (change)="onLayerChanged($event.target.value)"  [value]="itemLayer.layerIndex">
-              <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
+              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [layer]="layers[itemLayer.layerIndex]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
         </ul>
       </div>
     </div>

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html

@@ -9,18 +9,18 @@
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
           <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
+            <select (change)="onLayerChanged($event.target.value)" [value]="itemLayer.layerIndex">
               <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[itemLayer.layerIndex]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
         </ul>
       </div>
     </div>

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 { Component, Input, Injectable, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
+import { Location } from '@angular/common';
-import { Feature } from 'ol';
+import { Feature } from 'ol';
-import { Store } from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
+import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
+import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
-import * as mapActions from '../../actions/map.actions';
+import * as mapActions from '../../actions/map.actions';
-import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
-import { ForItemType } from '../for-item/for-itemtype.decorator';
+import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs';
-
+
-
+
-@ForItemType("vnd.farmmaps.itemtype.shape.processed")
+@ForItemType("vnd.farmmaps.itemtype.shape.processed")
-@Injectable()
+@Injectable()
-@Component({
+@Component({
-  selector: 'fm-map-selected-item-shape',
+  selector: 'fm-map-selected-item-shape',
-  templateUrl: './selected-item-shape.component.html',
+  templateUrl: './selected-item-shape.component.html',
-  styleUrls: ['./selected-item-shape.component.scss']
+  styleUrls: ['./selected-item-shape.component.scss']
-})
+})
-export class SelectedItemShapeComponent extends AbstractSelectedItemComponent {
+export class SelectedItemShapeComponent extends AbstractSelectedItemComponent {
-
+
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
-    super(store, itemTypeService,location,router);
+    super(store, itemTypeService,location,router);
-  }
+  }
-  public selectedLayer: number = 0;
+  
-
+  onLayerChanged(layerIndex: number) {
-  onLayerChanged(layerIndex: number) {
+    this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
-    this.selectedLayer = layerIndex;
+  }
-    this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
+}
-  }
-}

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html

@@ -10,17 +10,17 @@
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
           <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
+            <select (change)="onLayerChanged($event.target.value)" [value]="itemLayer.layerIndex">
-              <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
+              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [layer]="layers[itemLayer.layerIndex]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
           <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
           <li *ngIf="hasNext()"><a href="#" (click)="handleNextTemporal($event)" class="mt-1 mr-1" i18n>Next <span>({{nextDate()|date}})</span></a></li>
           <li *ngIf="hasPrevious()"><a href="#" (click)="handlePreviousTemporal($event)" class="mt-1 mr-1" i18n>Previous <span>({{previousDate()|date}})</span></a></li>
         </ul>

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<mapReducers.State | commonReducers.State>, 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));
   }
 

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

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;
+      if(a.temporalItems.length>0) {
-      selectedItemLayer.previousItemLayer = a.temporalItems.length>1?new ItemLayer(a.temporalItems[a.temporalItems.length-2],0):null;
+        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;
+          if( temporalLayer.selectedItemLayer)  {
-          temporalLayer.nextItemLayer = index+2 < temporalLayer.temporalItems.length ? new ItemLayer(temporalLayer.temporalItems[index+2],0):null;
+            temporalLayer.selectedItemLayer.opacity=1;
-          if( temporalLayer.nextItemLayer)  temporalLayer.nextItemLayer.opacity=0;
+            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;
+          if( temporalLayer.nextItemLayer)  {
-          temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer;
+            temporalLayer.nextItemLayer.opacity=0;
-          if( temporalLayer.selectedItemLayer)  temporalLayer.selectedItemLayer.opacity=1;
+            temporalLayer.nextItemLayer.layerIndex = temporalLayer.layerIndex;
-          temporalLayer.previousItemLayer = index-2 >=0? new ItemLayer(temporalLayer.temporalItems[index-2],0):null;
+          }
-          if( temporalLayer.previousItemLayer)  temporalLayer.previousItemLayer.opacity=0;
+          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) {
+      if (a.itemLayer == null) {      
-        var newItemlayer = new ItemLayer(state.selectedItemLayer.item);
+        if(state.selectedItemLayer.item.itemType == "vnd.farmmaps.itemtype.temporal") {
-        newItemlayer.layerIndex = a.layerIndex;
+          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);