stroke style directive

.gitignore

@@ -17,6 +17,7 @@ npm-debug.log
 # Windows
 Thumbs.db
 Desktop.ini
+.vscode/*
 
 # Mac
 .DS_Store

example/src/app/app.component.html

@@ -18,6 +18,18 @@
       </aol-feature>
     </aol-source-vector>
   </aol-layer-vector>
+  <aol-layer-vector>
+    <aol-source-vector>
+      <aol-feature>
+        <aol-geometry-linestring>
+          <aol-collection-coordinates [coordinates]="[[5, 45],[5.01, 45.01]]" [srid]="'EPSG:4326'"></aol-collection-coordinates>
+        </aol-geometry-linestring>
+        <aol-style>
+          <aol-style-stroke [color]="[255,0,0,0.8]" [width]="5" [lineDash]="[5,10]"></aol-style-stroke>
+        </aol-style>
+      </aol-feature>
+    </aol-source-vector>
+</aol-layer-vector>
   <aol-control-zoomslider></aol-control-zoomslider>
   <aol-control-zoom></aol-control-zoom>
   <aol-control-attribution></aol-control-attribution>

example/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
-import { AngularOpenlayersModule } from './ng2-ol';
+import { AngularOpenlayersModule } from '../../../dist';
 
 import { AppComponent } from './app.component';
 

src/components.ts

@@ -7,7 +7,7 @@ import {ViewComponent} from "./components/view.component";
 import {FeatureComponent} from "./components/feature.component";
 import {GeometryLinestringComponent, GeometryPointComponent} from "./components/geometry.components";
 import {CoordinateComponent, CollectionCoordinatesComponent} from "./components/coordinate.component";
-import {StyleComponent, IconStyleDirective} from "./components/style.components";
+import {StyleComponent, IconStyleDirective, StrokeStyleDirective} from "./components/style.components";
 import {controls} from './components/controls/controls';
 
 // Export all components
@@ -38,6 +38,7 @@ export function components(): any[] {
     CollectionCoordinatesComponent,
     StyleComponent,
     IconStyleDirective,
+    StrokeStyleDirective,
     controls()
   ]
 };

src/components/style.components.ts

@@ -1,5 +1,6 @@
 import { Component, Directive, EventEmitter, Host, OnDestroy, OnChanges, AfterContentInit, Input, Output, ContentChild } from '@angular/core';
 import { style } from 'openlayers';
+import { Subscription } from 'rxjs/Subscription';
 import { FeatureComponent } from "./feature.component";
 
 @Directive({
@@ -28,22 +29,41 @@ export class IconStyleDirective implements OnChanges {
 
     @Output() onChanged = new EventEmitter<any>();
 
-    constructor() { }
-
     ngOnChanges() {
         this.onChanged.emit(this.src);
     }
 }
 
+@Directive({
+    selector: 'aol-style-stroke'
+})
+export class StrokeStyleDirective implements OnChanges {
+
+    // For usage info see: http://openlayers.org/en/latest/apidoc/ol.style.Stroke.html
+    @Input('color') color: [number, number, number, number];
+    @Input('lineCap') lineCap: 'butt' | 'round' | 'square';
+    @Input('lineJoin') lineJoin: 'bevel' | 'round' | 'miter';
+    @Input('lineDash') lineDash: number[];
+    @Input('miterLimit') miterLimit: number;
+    @Input('width') width: number;
+
+    @Output() onChanged = new EventEmitter<any>();
+
+    ngOnChanges() {
+        this.onChanged.emit();
+    }
+}
+
 @Component({
     selector: 'aol-style',
     template: `<ng-content></ng-content>`
 })
 export class StyleComponent implements OnDestroy, AfterContentInit {
     private _host_: FeatureComponent;
-    private childSubscription$: any;
+    private childSubscription$: Subscription;
 
     @ContentChild(IconStyleDirective) iconStyleDirective: IconStyleDirective;
+    @ContentChild(StrokeStyleDirective) strokeStyleDirective: StrokeStyleDirective;
 
     constructor( @Host() feature: FeatureComponent) {
         console.log('instancing aol-style');
@@ -52,13 +72,31 @@ export class StyleComponent implements OnDestroy, AfterContentInit {
 
     ngAfterContentInit() {
         this.update();
-        this.childSubscription$ = this.iconStyleDirective.onChanged.subscribe((): void => {
-            this.update();
-        });
+        if (this.iconStyleDirective) {
+            this.childSubscription$ = this.iconStyleDirective.onChanged.subscribe((): void => this.update());
+        }
+        else if (this.strokeStyleDirective) {
+            this.childSubscription$ = this.strokeStyleDirective.onChanged.subscribe((): void => this.update());
+        }
     }
 
     update() {
-        this._host_.setStyle(new style.Style({
+        let styles = new Array<style.Style>();
+        if (this.iconStyleDirective) {
+            styles.push(this.getIconStyle());
+        }
+        if (this.strokeStyleDirective) {
+            styles.push(this.getStrokeStyle());
+        }
+        this._host_.setStyle(styles);
+    }
+
+    ngOnDestroy() {
+        this.childSubscription$.unsubscribe();
+    }
+
+    private getIconStyle(): style.Style {
+        return new style.Style({
             image: new style.Icon({
                 anchor: this.iconStyleDirective.anchor,
                 anchorOrigin: this.iconStyleDirective.anchorOrigin,
@@ -78,10 +116,19 @@ export class StyleComponent implements OnDestroy, AfterContentInit {
                 imgSize: this.iconStyleDirective.imgSize,
                 src: this.iconStyleDirective.src
             })
-        }));
+        });
     }
 
-    ngOnDestroy() {
-        this.childSubscription$.unsubscribe();
+    private getStrokeStyle(): style.Style {
+        return new style.Style({
+            stroke: new style.Stroke({
+                color: this.strokeStyleDirective.color,
+                lineCap: this.strokeStyleDirective.lineCap,
+                lineJoin: this.strokeStyleDirective.lineJoin,
+                lineDash: this.strokeStyleDirective.lineDash,
+                miterLimit: this.strokeStyleDirective.miterLimit,
+                width: this.strokeStyleDirective.width
+            })
+        });
     }
 }