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

Fix layer selection
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-03-03 19:24:01 +01:00
parent 24f41879bf
commit 2388968f2a
8 changed files with 117 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
View File

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

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

@ -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)">
<option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
<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 [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>

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

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

62
projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts
View File

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

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

@ -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)">
<option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
<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 [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>

2
projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts
View File

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

3
projects/common-map/src/fm-map/models/item.layer.ts
View File

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

88
projects/common-map/src/fm-map/reducers/map.reducer.ts
View File

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