feat(map editor): Basics for the map editor tool

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

@@ -1,8 +1,7 @@
 <igo-list [navigation]="true"> 
-  <template ngFor let-context [ngForOf]="contexts | async" let-i="index">
+  <template ngFor let-context [ngForOf]="contexts | async">
     <igo-context-list-item
       igoListItem
-      tabindex="{{i}}"
       [selected]="selectedContext && selectedContext.uri === context.uri"
       [context]="context"
       [edition]="edition"

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

@@ -40,7 +40,7 @@ export class ContextListComponent implements ToolComponent, OnInit {
     this.store
       .select(s => s.tools)
       .subscribe((tools: Tool[]) =>
-          this.editTool = tools.find(t => t.name === 'contextEditor'));
+        this.editTool = tools.find(t => t.name === 'contextEditor'));
 
     this.store
       .select(s => s.activeContext)

src/app/context/shared/context.service.ts

@@ -53,11 +53,11 @@ export class ContextService {
     this.store.dispatch({type: 'SET_CONTEXT', payload: context});
 
     // TODO: Handle "useCurrentView" option
-    const view: MapViewOptions = context.map.view;
-    this.store.dispatch({type: 'SET_VIEW', payload: view});
+    const mapOptions: MapViewOptions = context.map;
+    this.store.dispatch({type: 'SET_MAP', payload: mapOptions});
 
-    const layers: Array<LayerOptions> = context.layers;
-    this.store.dispatch({type: 'SET_LAYERS', payload: layers});
+    const layerOptions: Array<LayerOptions> = context.layers;
+    this.store.dispatch({type: 'SET_LAYERS', payload: layerOptions});
 
     const tools: Array<Tool> = [];
     (context.tools || []).forEach((tool_: Tool) => {

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

@@ -0,0 +1,3 @@
+<p>
+  {{layer.options.name}}
+</p>

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

@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestModule } from '../../test.module';
+
+import { OSMLayer } from '../shared/layers/layer-osm';
+import { LayerEditorComponent } from './layer-editor.component';
+import { LayerService } from '../shared/layer.service';
+
+describe('LayerEditorComponent', () => {
+  let component: LayerEditorComponent;
+  let fixture: ComponentFixture<LayerEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestModule
+      ],
+      declarations: [ LayerEditorComponent ],
+      providers: [
+        LayerService
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayerEditorComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.layer = new OSMLayer({name: 'foo', type: 'osm'});
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Register } from '../../tool/shared/tool.service';
+
+import { Layer } from '../shared/layers/layer';
+import { LayerService } from '../shared/layer.service';
+
+@Register()
+@Component({
+  selector: 'igo-layer-editor',
+  templateUrl: './layer-editor.component.html',
+  styleUrls: ['./layer-editor.component.styl']
+})
+export class LayerEditorComponent implements OnInit {
+
+  static name_: string = 'layerEditor';
+  static title: string = 'Edit Layer';
+  static icon: string = 'layers';
+  static defaultOptions: any = {};
+
+  layer: Layer;
+
+  constructor(private layerService: LayerService) { }
+
+  ngOnInit() {
+    this.layerService.editedLayer
+      .subscribe((layer: Layer) => this.layer = layer);
+  }
+
+  updateLayer() {
+    console.log(this.layer);
+  }
+
+}

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

@@ -0,0 +1,13 @@
+<md-list-item>
+  <md-icon md-list-avatar>layers</md-icon>
+  <h4 md-line>{{layer.options.name}}</h4>
+  <button
+    md-icon-button
+    class="igo-icon-button"
+    (click)="editLayer.emit(layer)"
+    *ngIf="edition"
+    [md-tooltip]="'Edit Layer' | translate"
+    tooltip-position="below">
+    <md-icon>settings</md-icon>
+  </button>
+</md-list-item>

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

@@ -0,0 +1,33 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestModule } from '../../test.module';
+import { SharedModule } from '../../shared/shared.module';
+
+import { OSMLayer } from '../shared/layers/layer-osm';
+import { LayerListItemComponent } from './layer-list-item.component';
+
+describe('LayerListItemComponent', () => {
+  let component: LayerListItemComponent;
+  let fixture: ComponentFixture<LayerListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestModule,
+        SharedModule
+      ],
+      declarations: [ LayerListItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayerListItemComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.layer = new OSMLayer({name: 'foo', type: 'osm'});
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,19 @@
+import { Component, Input, Output, EventEmitter } 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']
+})
+export class LayerListItemComponent {
+
+  @Input() layer: Layer;
+  @Input() edition: boolean = true;
+
+  @Output() editLayer: EventEmitter<Layer> = new EventEmitter();
+
+  constructor() { }
+
+}

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

@@ -0,0 +1,10 @@
+<igo-list [navigation]="true"> 
+  <template ngFor let-layer [ngForOf]="layers">
+    <igo-layer-list-item
+      igoListItem
+      [layer]="layer"
+      [edition]="edition"
+      (editLayer)="editLayer($event)">
+    </igo-layer-list-item>
+  </template>
+</igo-list>

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

@@ -0,0 +1,40 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestModule } from '../../test.module';
+import { SharedModule } from '../../shared/shared.module';
+
+import { LayerService } from '../shared/layer.service';
+import { LayerListComponent } from './layer-list.component';
+import { LayerListItemComponent } from '../layer-list-item/layer-list-item.component';
+
+describe('LayerListComponent', () => {
+  let component: LayerListComponent;
+  let fixture: ComponentFixture<LayerListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestModule,
+        SharedModule
+      ],
+      declarations: [
+        LayerListComponent,
+        LayerListItemComponent
+      ],
+      providers: [
+        LayerService
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayerListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.layers = [];
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+import { IgoStore } from '../../store/store';
+
+import { Tool } from '../../tool/shared/tool.interface';
+
+import { Layer } from '../shared/layers/layer';
+import { LayerService } from '../shared/layer.service';
+
+@Component({
+  selector: 'igo-layer-list',
+  templateUrl: './layer-list.component.html',
+  styleUrls: ['./layer-list.component.styl']
+})
+export class LayerListComponent implements OnInit {
+
+  @Input() layers: Layer[];
+
+  get edition (): boolean {
+    return this.editTool !== undefined;
+  }
+
+  private editTool: Tool;
+
+  constructor(private store: Store<IgoStore>,
+              private layerService: LayerService) { }
+
+  ngOnInit() {
+    this.store
+      .select(s => s.tools)
+      .subscribe((tools: Tool[]) =>
+        this.editTool = tools.find(t => t.name === 'layerEditor'));
+  }
+
+  editLayer(layer: Layer) {
+    if (this.editTool !== undefined) {
+      this.layerService.editLayer(layer);
+      this.store.dispatch({type: 'SELECT_TOOL', payload: this.editTool});
+    }
+  }
+
+}

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

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

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

@@ -0,0 +1,44 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestModule } from '../../test.module';
+import { SharedModule } from '../../shared/shared.module';
+
+import { MapService } from '../shared/map.service';
+import { LayerService } from '../shared/layer.service';
+import { MapEditorComponent } from './map-editor.component';
+import { LayerListComponent } from '../layer-list/layer-list.component';
+import { LayerListItemComponent } from '../layer-list-item/layer-list-item.component';
+
+describe('MapEditorComponent', () => {
+  let component: MapEditorComponent;
+  let fixture: ComponentFixture<MapEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestModule,
+        SharedModule
+      ],
+      declarations: [
+        MapEditorComponent,
+        LayerListComponent,
+        LayerListItemComponent
+      ],
+      providers: [
+        MapService,
+        LayerService
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapEditorComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.layers = [];
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,35 @@
+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()
+@Component({
+  selector: 'igo-map-editor',
+  templateUrl: './map-editor.component.html',
+  styleUrls: ['./map-editor.component.styl']
+})
+export class MapEditorComponent implements OnInit {
+
+  static name_: string = 'mapEditor';
+  static title: string = 'Map';
+  static icon: string = 'map';
+  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/map.module.ts

@@ -5,6 +5,10 @@ import { MapService } from './shared/map.service';
 import { LayerService } from './shared/layer.service';
 import { MapComponent } from './map/map.component';
 import { ZoomComponent } from './zoom/zoom.component';
+import { MapEditorComponent } from './map-editor/map-editor.component';
+import { LayerListComponent } from './layer-list/layer-list.component';
+import { LayerListItemComponent } from './layer-list-item/layer-list-item.component';
+import { LayerEditorComponent } from './layer-editor/layer-editor.component';
 
 @NgModule({
   imports: [
@@ -13,7 +17,15 @@ import { ZoomComponent } from './zoom/zoom.component';
   exports: [MapComponent],
   declarations: [
     MapComponent,
-    ZoomComponent
+    ZoomComponent,
+    MapEditorComponent,
+    LayerListComponent,
+    LayerListItemComponent,
+    LayerEditorComponent
+  ],
+  entryComponents: [
+    MapEditorComponent,
+    LayerEditorComponent
   ],
   providers: [
     LayerService,