feat(tool): some tools and working toolbox

src/demo-app/app/app.component.html

@@ -46,18 +46,17 @@
     <md-card-title>feature-list.component</md-card-title>
     <md-card-content>
       <igo-feature-list
-        igoFeatureListBehavior
+        igoFeatureListBinding
         [focusFirst]="true"
-        [focusedFeature]="feature$ | async"
         (focus)="handleFeatureFocus($event)"
         (select)="handleFeatureSelect($event)">
       </igo-feature-list>
     </md-card-content>
 
     <md-card-title>feature-details.component</md-card-title>
-    <md-card-content *ngIf="(feature$ | async)">
+    <md-card-content>
       <igo-panel [title]="'Details'">
-        <igo-feature-details [feature]="feature$ | async"></igo-feature-details>
+        <igo-feature-details [feature]="featureService.focusedFeature$ | async"></igo-feature-details>
 
         <button
           md-icon-button
@@ -108,17 +107,17 @@
     <md-card-content>
       <igo-toolbar
         igoToolContext
-        igoToolbarBehavior
+        igoToolbarBinding
         [withIcon]="true"
         [withTitle]="true"
         [horizontal]="true"
         (select)="handleToolSelect($event)">
       </igo-toolbar>
     </md-card-content>
 
-    <!--md-card-title>toolbox.component</md-card-title>
+    <md-card-title>toolbox.component</md-card-title>
     <md-card-content>
-      <igo-toolbox></igo-toolbox>
-    </md-card-content-->
+        <igo-toolbox></igo-toolbox>
+    </md-card-content>
   </md-card>
 </md-sidenav-container>

src/demo-app/app/app.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { IgoMap, Tool, QueryFormat,
-         OverlayService, ContextService, Feature,
-         WMSLayerOptions, LanguageService } from '../../lib';
+import { ContextService, Feature, FeatureService, IgoMap,
+         LanguageService, OverlayService, QueryFormat,
+         Tool, WMSLayerOptions } from '../../lib';
 
 @Component({
   selector: 'igo-demo',
@@ -13,11 +12,11 @@ import { IgoMap, Tool, QueryFormat,
 export class AppComponent implements OnInit {
 
   public searchTerm: string;
-  public feature$ = new BehaviorSubject<Feature>(undefined);
 
   public map = new IgoMap();
 
   constructor(public contextService: ContextService,
+              public featureService: FeatureService,
               public overlayService: OverlayService,
               public language: LanguageService) {}
 
@@ -73,19 +72,19 @@ export class AppComponent implements OnInit {
         } as WMSLayerOptions
       ],
       toolbar: [
-        'featureList',
-        'layerList',
+        'searchResults',
+        'map',
         'timeFilter'
       ],
       tools: [
         {
-          name: 'featureList'
+          name: 'searchResults'
         },
         {
-          name: 'layerList'
+          name: 'map'
         },
         {
-          name: 'timeFilter'
+          name: 'timeAnalysis'
         }
       ]
     });
@@ -96,12 +95,10 @@ export class AppComponent implements OnInit {
   }
 
   handleFeatureFocus(feature: Feature) {
-    this.feature$.next(feature);
     this.overlayService.setFeatures([feature], 'move');
   }
 
   handleFeatureSelect(feature: Feature) {
-    this.feature$.next(feature);
     this.overlayService.setFeatures([feature], 'zoom');
   }
 
@@ -110,7 +107,7 @@ export class AppComponent implements OnInit {
   }
 
   clearFeature() {
-    this.feature$.next(undefined);
+    this.featureService.unfocusFeature();
     this.overlayService.clear();
   }
 }

src/demo-app/main.ts

@@ -1,7 +1,7 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { AppModule } from './app/module';
 import { environment } from './environments/environment';
 
 if (environment.production) {

src/lib/feature/feature-details/feature-details-binding.directive.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+
+describe('FeatureDetailsBindingDirective', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: []
+    });
+  });
+
+  it('should create an instance', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/lib/feature/feature-details/feature-details-binding.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, Self, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { FeatureService } from '../shared';
+import { FeatureDetailsComponent } from './feature-details.component';
+
+
+@Directive({
+  selector: '[igoFeatureDetailsBinding]'
+})
+export class FeatureDetailsBindingDirective implements OnInit, OnDestroy {
+
+  private component: FeatureDetailsComponent;
+  private focusedFeatures$$: Subscription;
+
+  constructor(@Self() component: FeatureDetailsComponent,
+              private featureService: FeatureService) {
+    this.component = component;
+  }
+
+  ngOnInit() {
+    this.focusedFeatures$$ = this.featureService.focusedFeature$
+      .subscribe(feature => this.component.feature = feature);
+  }
+
+  ngOnDestroy() {
+    this.focusedFeatures$$.unsubscribe();
+  }
+
+}

src/lib/feature/feature-details/feature-details.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy,
+         ChangeDetectorRef } from '@angular/core';
 
 import { Feature } from '../shared';
 
@@ -14,9 +15,10 @@ export class FeatureDetailsComponent {
   get feature(): Feature { return this._feature; }
   set feature(value: Feature) {
     this._feature = value;
+    this.cdRef.detectChanges();
   }
   private _feature: Feature;
 
-  constructor() { }
+  constructor(private cdRef: ChangeDetectorRef) { }
 
 }

src/lib/feature/feature-details/index.ts

@@ -1 +1,2 @@
 export * from './feature-details.component';
+export * from './feature-details-binding.directive';

src/lib/feature/feature-list/feature-list-behavior.directive.spec.ts → src/lib/feature/feature-list/feature-list-binding.directive.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
-describe('FeatureListBehaviorDirective', () => {
+describe('FeatureListBindingDirective', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [],

src/lib/feature/feature-list/feature-list-behavior.directive.ts → src/lib/feature/feature-list/feature-list-binding.directive.ts

@@ -7,12 +7,13 @@ import { FeatureListComponent } from './feature-list.component';
 
 
 @Directive({
-  selector: '[igoFeatureListBehavior]'
+  selector: '[igoFeatureListBinding]'
 })
-export class FeatureListBehaviorDirective implements OnInit, OnDestroy {
+export class FeatureListBindingDirective implements OnInit, OnDestroy {
 
   private component: FeatureListComponent;
   private features$$: Subscription;
+  private focusedFeatures$$: Subscription;
 
   @HostListener('focus', ['$event']) onFocus(feature: Feature) {
     this.featureService.focusFeature(feature);
@@ -33,10 +34,20 @@ export class FeatureListBehaviorDirective implements OnInit, OnDestroy {
 
     this.features$$ = this.featureService.features$
       .subscribe(features => this.component.features = features);
+
+    // When there are multiple feature list with this directive,
+    // selecting moving up and down using the keyboard skips some features.
+    // We can bypass this issue using a debounce time. Since
+    // having multiple feature list is unusual, no better fix is provided
+    // for now.
+    this.focusedFeatures$$ = this.featureService.focusedFeature$
+      .debounceTime(100)
+      .subscribe(feature => this.component.focusedFeature = feature);
   }
 
   ngOnDestroy() {
     this.features$$.unsubscribe();
+    this.focusedFeatures$$.unsubscribe();
   }
 
 }

src/lib/feature/feature-list/index.ts

@@ -1,2 +1,2 @@
 export * from './feature-list.component';
-export * from './feature-list-behavior.directive';
+export * from './feature-list-binding.directive';

src/lib/feature/module.ts

@@ -3,9 +3,10 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { IgoSharedModule } from '../shared';
 
 import { FeatureService, FeatureGroupPipe } from './shared';
-import { FeatureDetailsComponent } from './feature-details';
+import { FeatureDetailsComponent,
+         FeatureDetailsBindingDirective } from './feature-details';
 import { FeatureListComponent,
-         FeatureListBehaviorDirective } from './feature-list';
+         FeatureListBindingDirective } from './feature-list';
 import { FeatureItemComponent } from './feature-item';
 
 
@@ -15,15 +16,17 @@ import { FeatureItemComponent } from './feature-item';
   ],
   exports: [
     FeatureDetailsComponent,
+    FeatureDetailsBindingDirective,
     FeatureListComponent,
-    FeatureListBehaviorDirective,
+    FeatureListBindingDirective,
     FeatureItemComponent,
     FeatureGroupPipe
   ],
   declarations: [
     FeatureDetailsComponent,
+    FeatureDetailsBindingDirective,
     FeatureListComponent,
-    FeatureListBehaviorDirective,
+    FeatureListBindingDirective,
     FeatureItemComponent,
     FeatureGroupPipe
   ]

src/lib/feature/shared/feature.service.ts

@@ -38,7 +38,12 @@ export class FeatureService {
     this.focusFeature(feature);
   }
 
-  selectNextFeature() {
-    this.selectedFeature$.next(this.features$.value[4]);
+  unfocusFeature() {
+    this.focusFeature(undefined);
   }
+
+  unselectFeature() {
+    this.selectFeature(undefined);
+  }
+
 }

src/lib/filter/module.ts

@@ -7,7 +7,8 @@ import { IgoSharedModule } from '../shared';
 import { FilterableLayerPipe } from './shared';
 import { TimeFilterFormComponent } from './time-filter-form';
 import { TimeFilterItemComponent } from './time-filter-item';
-import { TimeFilterListComponent } from './time-filter-list/';
+import { TimeFilterListComponent,
+         TimeFilterListBindingDirective } from './time-filter-list/';
 
 @NgModule({
   imports: [
@@ -19,13 +20,15 @@ import { TimeFilterListComponent } from './time-filter-list/';
     FilterableLayerPipe,
     TimeFilterFormComponent,
     TimeFilterItemComponent,
-    TimeFilterListComponent
+    TimeFilterListComponent,
+    TimeFilterListBindingDirective
   ],
   declarations: [
     FilterableLayerPipe,
     TimeFilterFormComponent,
     TimeFilterItemComponent,
-    TimeFilterListComponent
+    TimeFilterListComponent,
+    TimeFilterListBindingDirective
   ]
 })
 export class IgoFilterModule {

src/lib/filter/shared/filterable-layer.pipe.ts

@@ -8,7 +8,7 @@ import { Layer, FilterableLayer } from '../../layer';
 export class FilterableLayerPipe implements PipeTransform {
 
   transform(value: Layer[], arg: string): any {
-    let layers = value;
+    let layers;
 
     if (arg === 'time') {
       layers = value.filter(layer => {

src/lib/filter/time-filter-list/index.ts

@@ -1 +1,2 @@
 export * from './time-filter-list.component';
+export * from './time-filter-list-binding.directive';

src/lib/filter/time-filter-list/time-filter-list-binding.directive.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+
+describe('TimeFilterListBindingDirective', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: []
+    });
+  });
+
+  it('should create an instance', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/lib/filter/time-filter-list/time-filter-list-binding.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, Self, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { MapService } from '../../map';
+import { TimeFilterListComponent } from './time-filter-list.component';
+
+
+@Directive({
+  selector: '[igoTimeFilterListBinding]'
+})
+export class TimeFilterListBindingDirective implements OnInit, OnDestroy {
+
+  private component: TimeFilterListComponent;
+  private layers$$: Subscription;
+
+
+  constructor(@Self() component: TimeFilterListComponent,
+              private mapService: MapService) {
+    this.component = component;
+  }
+
+  ngOnInit() {
+    // Override input layers
+    this.component.layers = [];
+
+    this.layers$$ = this.mapService.getMap().layers$
+      .subscribe(layers => this.component.layers = layers);
+  }
+
+  ngOnDestroy() {
+    this.layers$$.unsubscribe();
+  }
+
+}