feat(tool): tool module with toolbar, toolbox and tool service

demo-app/app/app.component.html

@@ -34,8 +34,10 @@
   <md-card-title>map-browser.component</md-card-title>
   <md-card-content class="igo-map-browser-container">
     <igo-map-browser
-      [map]="map" [view]="mapView"
-      igoQuery igoOverlay>
+      igoQuery
+      igoOverlay
+      [map]="map"
+      [view]="mapView">
       <igo-zoom [map]="map" color="primary"></igo-zoom>
     </igo-map-browser>
   </md-card-content>
@@ -56,3 +58,22 @@
     <igo-time-filter-list [layers]="map.layers$ | async"></igo-time-filter-list>
   </md-card-content>
 </md-card>
+
+<md-card>
+  <md-card-subtitle>Tool module</md-card-subtitle>
+  <md-card-title>toolbar.component</md-card-title>   
+  <md-card-content>
+    <igo-toolbar
+      [tools]="tools"
+      [withIcon]="true"
+      [withTitle]="true"
+      [horizontal]="true"
+      (select)="handleToolSelect($event)">
+    </igo-toolbar>
+  </md-card-content>
+
+  <!--md-card-title>toolbox.component</md-card-title>
+  <md-card-content>
+    <igo-toolbox></igo-toolbox>
+  </md-card-content-->
+</md-card>

demo-app/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { IgoMap, LayerService,
+import { IgoMap, LayerService, Tool,
          OverlayService, QueryFormat,
          Feature, FeatureService,
          WMSLayerOptions, LanguageService } from '../../lib/src';
@@ -23,6 +23,11 @@ export class AppComponent implements OnInit {
     zoom: 6
   };
 
+  public tools = [
+    {name: 'tool1', title: 'Tool 1', icon: 'map', tooltip: 'tooltip1'},
+    {name: 'tool2', title: 'Tool 2', icon: 'bookmark', tooltip: 'tooltip2'}
+  ];
+
   constructor(public featureService: FeatureService,
               public layerService: LayerService,
               public overlayService: OverlayService,
@@ -89,4 +94,8 @@ export class AppComponent implements OnInit {
     this.feature$.next(feature);
     this.overlayService.setFeatures([feature], 'zoom');
   }
+
+  handleToolSelect(tool: Tool) {
+    alert(`Tool '${tool.name}' selected!`);
+  }
 }

demo-app/css/styles.styl

@@ -39,3 +39,7 @@
   font-feature-settings: 'liga' 1;
   -ms-font-feature-settings: 'liga' 1;
 }
+
+md-card {
+  margin: 20px;
+}

lib/src/feature/feature-list/feature-list.component.html

@@ -7,7 +7,8 @@
       <igo-collapsible title="{{sourceFeature[0]}} ({{sourceFeature[1].length}})">
         <ng-template ngFor let-feature let-j="index" [ngForOf]="sourceFeature[1]">
           <igo-feature-item
-            igoListItem color="accent"
+            igoListItem
+            color="accent"
             [feature]="feature"
             [focused]="focusFirst && i + j === 0"
             (focus)="focus.emit(feature)"

lib/src/feature/feature-list/feature-list.component.styl

@@ -1,9 +1 @@
-@require '../../shared/collapsible/collapsible.component.styl';
-
-// padding - mat-list padding - md-icon padding
-$igo-search-tool-padding = $igo-collapsible-content-padding - 8px;
-
-:host >>> .igo-collapsible-content > .igo-flexible-main .igo-container {
-  padding: 0 $igo-search-tool-padding !important;
-}
 

lib/src/index.ts

@@ -9,3 +9,4 @@ export * from './map';
 export * from './overlay';
 export * from './query';
 export * from './search';
+export * from './tool';

lib/src/layer/layer-item/layer-item.component.spec.ts

@@ -1,5 +1,4 @@
-import { async, TestBed } from '@angular/core/testing';
-import { ComponentFixture } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IgoTestModule } from '../../../test/module';
 import { IgoSharedModule } from '../../shared';

lib/src/layer/shared/capabilities.service.ts

@@ -92,13 +92,6 @@ export class CapabilitiesService {
       options.minResolution = layer.MinScaleDenominator;
     }
 
-    if (layer.DataURL && layer.DataURL[0] && layer.DataURL.OnlineResource) {
-      options.dataUrl = {
-        format: layer.DataURL[0].Format,
-        onlineResource: layer.DataURL[0].OnlineResource
-      };
-    }
-
     return Object.assign(options, baseOptions);
   }
 

lib/src/layer/shared/layers/layer-wms.interface.ts

@@ -3,11 +3,5 @@ import { QueryableLayerOptions, FilterableLayerOptions } from './layer.interface
 export interface WMSLayerOptions extends QueryableLayerOptions, FilterableLayerOptions {
   source: olx.source.ImageWMSOptions;
   view?: olx.layer.TileOptions;
-  dataUrl?: DataUrl;
   optionsFromCapabilities?: boolean;
 }
-
-export interface DataUrl {
-  format: string;
-  onlineResource: string;
-}

lib/src/module.ts

@@ -21,6 +21,7 @@ import { IgoOverlayModule } from './overlay/index';
 import { IgoQueryModule } from './query/index';
 import { IgoSearchModule } from './search/index';
 import { IgoSharedModule } from './shared/index';
+import { IgoToolModule } from './tool/index';
 
 
 const IGO_MODULES = [
@@ -32,7 +33,8 @@ const IGO_MODULES = [
   IgoOverlayModule,
   IgoQueryModule,
   IgoSearchModule,
-  IgoSharedModule
+  IgoSharedModule,
+  IgoToolModule
 ];
 
 @NgModule({
@@ -47,7 +49,8 @@ const IGO_MODULES = [
     IgoMapModule.forRoot(),
     IgoOverlayModule.forRoot(),
     IgoQueryModule.forRoot(),
-    IgoSearchModule.forRoot()
+    IgoSearchModule.forRoot(),
+    IgoToolModule.forRoot()
   ],
   exports: IGO_MODULES
 })

lib/src/shared/list/list.component.styl

@@ -21,7 +21,7 @@ md-list {
   position: static;
 }
 
-:host >>> .mat-list .mat-list-item .mat-list-item-content {
+:host >>> .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content {
   height: $igo-list-item-height;
   padding: $igo-list-item-padding;
 }

lib/src/tool/index.ts

@@ -0,0 +1 @@
+export * from './module';

lib/src/tool/module.ts

@@ -0,0 +1,40 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { IgoSharedModule } from '../shared';
+
+import { ToolService } from './shared';
+import { ToolbarComponent, ToolbarBaseComponent } from './toolbar';
+import { ToolbarItemComponent } from './toolbar-item';
+import { ToolboxComponent } from './toolbox';
+
+@NgModule({
+  imports: [
+    IgoSharedModule
+  ],
+  exports: [
+    ToolbarBaseComponent,
+    ToolbarComponent,
+    ToolbarItemComponent,
+    ToolboxComponent
+  ],
+  declarations: [
+    ToolbarBaseComponent,
+    ToolbarComponent,
+    ToolbarItemComponent,
+    ToolboxComponent
+  ]})
+export class IgoToolModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: IgoToolModule,
+      providers: [
+        ToolService
+      ]
+    };
+  }
+}
+
+export * from './shared';
+export * from './toolbar';
+export * from './toolbar-item';
+export * from './toolbox';

lib/src/tool/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './tool.interface';
+export * from './tool.service';

lib/src/tool/shared/tool.interface.ts

@@ -0,0 +1,8 @@
+export interface Tool {
+  name: string;
+  title?: string;
+  icon?: string;
+  toolbar?: boolean;
+  tooltip?: string;
+  options?: {[key: string]: any};
+}

lib/src/tool/shared/tool.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ToolService } from './tool.service';
+
+describe('ToolService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ToolService]
+    });
+  });
+
+  it('should ...', inject([ToolService], (service: ToolService) => {
+    expect(service).toBeTruthy();
+  }));
+});

lib/src/tool/shared/tool.service.ts

@@ -0,0 +1,68 @@
+import { Injectable, Component } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+import { Tool } from './tool.interface';
+// import { ToolComponent } from './tool-component';
+
+export function Register(toolDef: Tool) {
+  return function(cls) {
+    ToolService.register(cls, toolDef);
+  };
+}
+
+@Injectable()
+export class ToolService {
+
+  static tools: {[key: string]: [Tool, (typeof Component)]} = {};
+
+  public toolHistory$ = new BehaviorSubject<Tool[]>([]);
+
+  static register(cls: any, toolDef: Tool) {
+    const tool = Object.assign({}, toolDef);
+
+    if (cls.toolbar !== undefined) {
+      tool['toolbar'] = cls.toolbar;
+    }
+
+    ToolService.tools[tool.name] = [tool, cls];
+  }
+
+  constructor() {}
+
+  getTool(name: string) {
+    const tool = ToolService.tools[name];
+
+    return tool === undefined ? undefined : tool[0];
+  }
+
+  getToolClass(name: string) {
+    const tool = ToolService.tools[name];
+
+    return tool === undefined ? undefined : tool[1];
+  }
+
+  getSelectedTool() {
+    const toolHistory = this.toolHistory$.value;
+
+    return toolHistory[toolHistory.length - 1];
+  }
+
+  selectTool(tool: Tool) {
+    const selectedTool = this.getSelectedTool();
+    if (selectedTool && tool.name === selectedTool.name) {
+      return;
+    }
+
+    const toolHistory = this.toolHistory$.value
+      .filter(t => t.name !== tool.name)
+      .concat([Object.assign({}, tool)]);
+
+    this.toolHistory$.next(toolHistory);
+  }
+
+  selectPreviousTool() {
+    const toolHistory = this.toolHistory$.value.slice(0, -1);
+
+    this.toolHistory$.next(toolHistory);
+  }
+}

lib/src/tool/toolbar-item/index.ts

@@ -0,0 +1 @@
+export * from './toolbar-item.component';

lib/src/tool/toolbar-item/toolbar-item.component.html

@@ -0,0 +1,7 @@
+<md-list-item
+  tooltip-position="below"
+  [md-tooltip]="tool.tooltip | translate"
+  (select)="select.emit(tool)">
+  <md-icon *ngIf="withIcon" md-list-avatar>{{tool.icon}}</md-icon>
+  <h4 *ngIf="withTitle" md-line>{{tool.title | translate}}</h4>
+</md-list-item>

lib/src/tool/toolbar-item/toolbar-item.component.spec.ts

@@ -0,0 +1,37 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgoTestModule } from '../../../test/module';
+import { IgoSharedModule } from '../../shared';
+
+import { ToolbarItemComponent } from './toolbar-item.component';
+
+describe('ToolbarItemComponent', () => {
+  let component: ToolbarItemComponent;
+  let fixture: ComponentFixture<ToolbarItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoTestModule,
+        IgoSharedModule
+      ],
+      declarations: [ ToolbarItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolbarItemComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.tool = {
+      title: 'foo',
+      name: 'bar',
+      icon: 'icon'
+    };
+
+    expect(component).toBeTruthy();
+  });
+});