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

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="legend-container" *ngIf="item?.data.layers;let layers">
<div class="card menu-card"> <div class="card menu-card">
<div *ngIf="layers.length>1"> <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> </select>
</div> </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> </div>
<div class="card menu-card"> <div class="card menu-card">
<ul class="p-0 mt-2"> <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><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="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> </ul>
</div> </div>
</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="legend-container" *ngIf="item?.data.layers;let layers">
<div class="card menu-card"> <div class="card menu-card">
<div *ngIf="layers.length>1"> <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> <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
</select> </select>
</div> </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> </div>
<div class="card menu-card"> <div class="card menu-card">
<ul class="p-0 mt-2"> <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><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="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> </ul>
</div> </div>
</div> </div>

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

@ -23,10 +23,8 @@ 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.selectedLayer = layerIndex;
this.store.dispatch(new mapActions.SetLayerIndex(layerIndex)); 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="legend-container" *ngIf="item?.data.layers;let layers">
<div class="card menu-card"> <div class="card menu-card">
<div *ngIf="layers.length>1"> <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> </select>
</div> </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> </div>
<div class="card menu-card"> <div class="card menu-card">
<ul class="p-0 mt-2"> <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="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="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> <li *ngIf="hasPrevious()"><a href="#" (click)="handlePreviousTemporal($event)" class="mt-1 mr-1" i18n>Previous <span>({{previousDate()|date}})</span></a></li>
</ul> </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) { 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.selectedLayer = layerIndex;
this.store.dispatch(new mapActions.SetLayerIndex(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 opacity: number = 1;
public layerIndex: 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.item = item;
this.opacity = opacity; this.opacity = opacity;
this.visible = visible; this.visible = visible;
this.layerIndex = layerIndex;
} }
} }

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

@ -164,6 +164,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
var itemLayer = null; 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 ) { 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 = new ItemLayer(a.item);
itemLayer.layerIndex = a.item.data.layers[0].index;
} else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") { } else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") {
itemLayer = new TemporalItemLayer(a.item); itemLayer = new TemporalItemLayer(a.item);
} }
@ -180,10 +181,22 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
case mapActions.SELECTTEMPORALITEMSSUCCESS:{ case mapActions.SELECTTEMPORALITEMSSUCCESS:{
let a = action as mapActions.SelectTemporalItemsSuccess; let a = action as mapActions.SelectTemporalItemsSuccess;
let selectedItemLayer=tassign(state.selectedItemLayer) as TemporalItemLayer; let selectedItemLayer=tassign(state.selectedItemLayer) as TemporalItemLayer;
let layerIndex=-1;
selectedItemLayer.temporalItems = a.temporalItems; 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; 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)}); return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,selectedItemLayer as ItemLayer)});
} }
case mapActions.NEXTTEMPORAL: { case mapActions.NEXTTEMPORAL: {
@ -194,11 +207,20 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return state; return state;
} else { } else {
temporalLayer.previousItemLayer = temporalLayer.selectedItemLayer; 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; 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)}); return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,temporalLayer as ItemLayer)});
} }
} else { } else {
@ -213,11 +235,20 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return state; return state;
} else { } else {
temporalLayer.nextItemLayer = temporalLayer.selectedItemLayer; temporalLayer.nextItemLayer = temporalLayer.selectedItemLayer;
if( temporalLayer.nextItemLayer) temporalLayer.nextItemLayer.opacity=0; if( temporalLayer.nextItemLayer) {
temporalLayer.nextItemLayer.opacity=0;
temporalLayer.nextItemLayer.layerIndex = temporalLayer.layerIndex;
}
temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer; temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer;
if( temporalLayer.selectedItemLayer) temporalLayer.selectedItemLayer.opacity=1; if( temporalLayer.selectedItemLayer) {
temporalLayer.previousItemLayer = index-2 >=0? new ItemLayer(temporalLayer.temporalItems[index-2],0):null; temporalLayer.selectedItemLayer.opacity=1;
if( temporalLayer.previousItemLayer) temporalLayer.previousItemLayer.opacity=0; 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)}); return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,temporalLayer as ItemLayer)});
} }
} else { } else {
@ -317,8 +348,35 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
case mapActions.SETLAYERINDEX: { case mapActions.SETLAYERINDEX: {
let a = action as 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}) return tassign(state, { selectedItemLayer: newItemlayer})
} else { } else {
let newLayers = state.overlayLayers.slice(0); let newLayers = state.overlayLayers.slice(0);