feat(layers): Remove and change order tools (#159)

* feat(layers): Remove and change order tools

src/app/app.component.styl

@@ -45,6 +45,15 @@ main {
   padding: 0 8px;
 }
 
+:host >>> .mat-slider-horizontal{
+  height: 40px;
+  padding: 4px;
+}
+
+:host >>> .mat-slider-horizontal .mat-slider-wrapper {
+  top: 20px;
+}
+
 
 /*--- Spinner ---*/
 igo-spinner {

src/app/context/context-list/context-list.component.ts

@@ -28,19 +28,22 @@ export class ContextListComponent implements ToolComponent, OnInit {
   selectedContext?: Context;
 
   get edition (): boolean {
-    return this.editTool !== undefined;
+    return this.contextEditor !== undefined;
   }
 
-  private editTool: Tool;
+  private contextEditor: Tool;
+  private mapEditor: Tool;
 
   constructor(private contextService: ContextService,
               private store: Store<IgoStore>) { }
 
   ngOnInit() {
     this.store
       .select(s => s.tools)
-      .subscribe((tools: Tool[]) =>
-        this.editTool = tools.find(t => t.name === 'contextEditor'));
+      .subscribe((tools: Tool[]) => {
+        this.contextEditor = tools.find(t => t.name === 'contextEditor');
+        this.mapEditor = tools.find(t => t.name === 'mapEditor');
+      });
 
     this.store
       .select(s => s.activeContext)
@@ -52,13 +55,16 @@ export class ContextListComponent implements ToolComponent, OnInit {
   selectContext(context: Context) {
     if (context.uri !== this.selectedContext.uri) {
       this.contextService.loadContext(context.uri);
+      if (this.mapEditor !== undefined) {
+        this.store.dispatch({type: 'SELECT_TOOL', payload: this.mapEditor});
+      }
     }
   }
 
   editContext(context: Context) {
-    if (this.editTool !== undefined) {
+    if (this.contextEditor !== undefined) {
       this.store.dispatch({type: 'EDIT_CONTEXT', payload: context});
-      this.store.dispatch({type: 'SELECT_TOOL', payload: this.editTool});
+      this.store.dispatch({type: 'SELECT_TOOL', payload: this.contextEditor});
     }
   }
 }

src/app/map/layer-list-item/layer-list-item.component.html

@@ -1,8 +1,14 @@
-<igo-collapsible
-  [title]="layer.options.name"
-  [state]="state"
-  (collapse)="collapse()"
-  (expand)="expand()">
+<md-list-item class="igo-collapsible-header">
+  <md-icon
+    id="legend-toggle"
+    md-list-avatar
+    igoCollapse
+    [target]="legend"
+    [collapsed]="layer.collapsed"
+    (toggle)="toggleLegend($event)">
+  </md-icon>
+  <h4 md-line>{{layer.options.name}}</h4>
+
   <button
     md-icon-button
     collapsibleButton
@@ -22,15 +28,69 @@
 
   <button
     md-icon-button
-    collapsibleButton
+    igoCollapse
     class="igo-icon-button"
-    (click)="editLayer.emit(layer)"
-    *ngIf="edition"
-    [md-tooltip]="'Edit Layer' | translate"
-    tooltip-position="below">
-    <md-icon>settings</md-icon>
+    [target]="actions" [collapsed]="true">
+    <md-icon>more_horiz</md-icon>
   </button>
+</md-list-item>
+
+<div #actions class="igo-layer-actions">
+  <div class="igo-col igo-col-40 igo-col-100-m">
+    <md-slider 
+      id="opacity-slider"
+      thumbLabel
+      tickInterval="5" 
+      [min]="0" [max]="100"
+      [(ngModel)]="opacity"
+      [md-tooltip]="'Opacity' | translate"
+      tooltip-position="below">  
+    </md-slider>
+  </div>
+
+  <div class="igo-col igo-col-60 igo-col-100-m">
+    <div class="igo-layer-button-group">
+      <button
+        md-icon-button
+        class="igo-icon-button"
+        (click)="raiseLayer.emit(layer)"
+        [md-tooltip]="'Raise Layer' | translate"
+        tooltip-position="below">
+        <md-icon>arrow_upward</md-icon>
+      </button>
+
+      <button
+        md-icon-button
+        class="igo-icon-button"
+        (click)="lowerLayer.emit(layer)"
+        [md-tooltip]="'Lower Layer' | translate"
+        tooltip-position="below">
+        <md-icon>arrow_downward</md-icon>
+      </button>
+
+       <button
+        md-icon-button
+        class="igo-icon-button"
+        (click)="removeLayer.emit(layer)"
+        [md-tooltip]="'Remove Layer' | translate"
+        tooltip-position="below">
+        <md-icon>delete</md-icon>
+      </button>
+
+      <button
+        md-icon-button
+        collapsibleButton
+        class="igo-icon-button"
+        (click)="editLayer.emit(layer)"
+        *ngIf="edition"
+        [md-tooltip]="'Edit Layer' | translate"
+        tooltip-position="below">
+        <md-icon>settings</md-icon>
+      </button>
+    </div>
+  </div>
+</div>
 
-  <p>Opacity slider</p>
-  <p>Legend</p>
-</igo-collapsible>
+<div #legend class="igo-layer-legend">
+  The legend will go here
+</div>

src/app/map/layer-list-item/layer-list-item.component.styl

@@ -0,0 +1,43 @@
+@require '../../../css/media.styl';
+@require '../../../css/theme.styl';
+@require '../../shared/list/list.component.styl';
+
+.igo-layer-actions,
+.igo-layer-legend {
+  width: 100%;
+  padding: $igo-list-item-padding;
+  display: inline-block;
+}
+
+.igo-layer-actions {
+  bordered-top();
+  bordered-bottom();
+}
+
+.igo-layer-actions > div {
+  text-align: center;
+}
+
+#opacity-slider {
+  width: 100%;
+
+  +media(mobile) {
+    width: 70%;
+  }
+}
+
+.igo-layer-button-group {
+  float: right;
+
+  +media(mobile) {
+    float: none;
+  }
+}
+
+#legend-toggle:after {
+  content: 'expand_more'
+}
+
+#legend-toggle.collapsed:after {
+  content: 'expand_less'
+}

src/app/map/layer-list-item/layer-list-item.component.ts

@@ -1,41 +1,41 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output,
+         EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
 import { Layer } from '../shared/layers/layer';
 
 @Component({
   selector: 'igo-layer-list-item',
   templateUrl: './layer-list-item.component.html',
-  styleUrls: ['./layer-list-item.component.styl']
+  styleUrls: ['./layer-list-item.component.styl'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LayerListItemComponent {
 
   @Input() layer: Layer;
   @Input() edition: boolean = true;
 
   @Output() editLayer: EventEmitter<Layer> = new EventEmitter();
+  @Output() removeLayer: EventEmitter<Layer> = new EventEmitter();
+  @Output() raiseLayer: EventEmitter<Layer> = new EventEmitter();
+  @Output() lowerLayer: EventEmitter<Layer> = new EventEmitter();
 
-  get state () {
-    let collapsed = this.layer.options.collapsed;
-    if (collapsed === undefined) {
-      collapsed = !this.layer.visible;
-    }
+  get opacity () {
+    return this.layer.opacity * 100;
+  }
 
-    return collapsed ? 'collapsed' : 'expanded';
+  set opacity (opacity: number) {
+    this.layer.opacity = opacity / 100;
   }
 
   constructor() { }
 
-  toggleVisibility() {
-    this.layer.toggleVisibility();
-    this.layer.visible ? this.expand() : this.collapse();
+  toggleLegend(collapsed: boolean) {
+    this.layer.collapsed = collapsed;
   }
 
-  expand() {
-    this.layer.options.collapsed = false;
-  }
-
-  collapse() {
-    this.layer.options.collapsed = true;
+  toggleVisibility() {
+    this.layer.visible = !this.layer.visible;
+    this.toggleLegend(!this.layer.visible);
   }
 
 }

src/app/map/layer-list/layer-list.component.html

@@ -1,10 +1,13 @@
 <igo-list [navigation]="true" [selection]="false"> 
-  <template ngFor let-layer [ngForOf]="layers">
+  <template ngFor let-layer [ngForOf]="map.layers | async">
     <igo-layer-list-item
       igoListItem
       [layer]="layer"
       [edition]="edition"
-      (editLayer)="editLayer($event)">
+      (editLayer)="editLayer($event)"
+      (removeLayer)="removeLayer($event)"
+      (raiseLayer)="raiseLayer($event)"
+      (lowerLayer)="lowerLayer($event)">
     </igo-layer-list-item>
   </template>
 </igo-list>

src/app/map/layer-list/layer-list.component.ts

@@ -5,6 +5,7 @@ import { IgoStore } from '../../store/store';
 
 import { Tool } from '../../tool/shared/tool.interface';
 
+import { IgoMap } from '../shared/map';
 import { Layer } from '../shared/layers/layer';
 import { LayerService } from '../shared/layer.service';
 
@@ -15,7 +16,8 @@ import { LayerService } from '../shared/layer.service';
 })
 export class LayerListComponent implements OnInit {
 
-  @Input() layers: Layer[];
+  @Input() map: IgoMap;
+  layers: Layer[];
 
   get edition (): boolean {
     return this.editTool !== undefined;
@@ -40,4 +42,16 @@ export class LayerListComponent implements OnInit {
     }
   }
 
+  removeLayer(layer: Layer) {
+    this.map.removeLayer(layer);
+  }
+
+  raiseLayer(layer: Layer) {
+    this.map.raiseLayer(layer);
+  }
+
+  lowerLayer(layer: Layer) {
+    this.map.lowerLayer(layer);
+  }
+
 }

src/app/map/map-editor/map-editor.component.html

@@ -1 +1 @@
-<igo-layer-list [layers]="layers"></igo-layer-list>
+<igo-layer-list [map]="map"></igo-layer-list>

src/app/map/map-editor/map-editor.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 import { Register } from '../../tool/shared/tool.service';
 
 import { IgoMap } from '../shared/map';
-import { Layer } from '../shared/layers/layer';
 import { MapService } from '../shared/map.service';
 
 @Register()
@@ -20,16 +19,11 @@ export class MapEditorComponent implements OnInit {
   static defaultOptions: any = {};
 
   map: IgoMap;
-  layers: Layer[];
 
   constructor(private mapService: MapService) { }
 
   ngOnInit() {
     this.map = this.mapService.getMap();
-
-    this.layers = this.map.getLayers();
-    this.map.layers
-      .subscribe((layers: Layer[]) => this.layers = layers);
   }
 
 }

src/app/map/shared/layers/layer.ts

@@ -1,8 +1,12 @@
 export interface LayerOptions extends olx.layer.BaseOptions {
   name: string;
   type: string;
-  collapsed?: boolean;
   visible?: boolean;
+  legend?: LayerLegendOptions;
+}
+
+export interface LayerLegendOptions {
+  collapsed?: boolean;
 }
 
 export abstract class Layer {
@@ -16,13 +20,23 @@ export abstract class Layer {
   }
 
   set visible (visibility: boolean) {
-    this.getOlLayer().set('visible', visibility);
+    this.getOlLayer().setVisible(visibility);
+  }
+
+  get opacity (): number {
+    return this.getOlLayer().get('opacity');
+  }
+
+  set opacity (opacity: number) {
+    this.getOlLayer().setOpacity(opacity);
   }
 
   constructor(options: LayerOptions) {
     this.options = options;
     this.visible = options.visible === undefined ? true : options.visible;
-    this.collapsed = options.collapsed === undefined ? true : options.collapsed;
+
+    const legend = options.legend || {};
+    this.collapsed = legend.collapsed === undefined ? true : !this.visible;
   }
 
   protected abstract createOlLayer(): ol.layer.Layer;
@@ -38,8 +52,4 @@ export abstract class Layer {
   getSource() {
     return this.getOlLayer().getSource();
   }
-
-  toggleVisibility() {
-    this.visible = !this.visible;
-  }
 }