Refactor setDecorationOptions so that it calls setPaths and setPatterns. Add unit tests for decorations directive.

Author: justinmanley

Gruntfile.js

@@ -252,6 +252,7 @@ module.exports = function(grunt) {
                     'src/directives/controls.js',
                     'src/directives/eventBroadcast.js',
                     'src/directives/maxbounds.js',
+                    'src/directives/decorations.js',
                     'src/services/leafletData.js',
                     'src/services/leafletMapDefaults.js',
                     'src/services/leafletEvents.js',

bower.json

@@ -30,7 +30,8 @@
     "esri-leaflet": "0.0.1-beta.4",
     "proj4": "~2.1.2",
     "proj4leaflet": "~0.7.0",
-    "Leaflet.MakiMarkers": "~1.0.1"
+    "Leaflet.MakiMarkers": "~1.0.1",
+    "Leaflet.PolylineDecorator": "bbecquet/Leaflet.PolylineDecorator"
   },
   "ignore": [
     "**/.*",

dist/angular-leaflet-directive.js

@@ -1060,6 +1060,58 @@
       };
     }
   ]);
+  angular.module('leaflet-directive').directive('decorations', [
+    '$log',
+    'leafletHelpers',
+    function ($log, leafletHelpers) {
+      return {
+        restrict: 'A',
+        scope: false,
+        replace: false,
+        require: 'leaflet',
+        link: function (scope, element, attrs, controller) {
+          var leafletScope = controller.getLeafletScope(), PolylineDecoratorPlugin = leafletHelpers.PolylineDecoratorPlugin, isDefined = leafletHelpers.isDefined, leafletDecorations = {};
+          /* Creates an "empty" decoration with a set of coordinates, but no pattern. */
+          function createDecoration(options) {
+            if (isDefined(options) && isDefined(options.coordinates)) {
+              if (!PolylineDecoratorPlugin.isLoaded()) {
+                $log.error('[AngularJS - Leaflet] The PolylineDecorator Plugin is not loaded.');
+              }
+            }
+            return L.polylineDecorator(options.coordinates);
+          }
+          /* Updates the path and the patterns for the provided decoration, and returns the decoration. */
+          function setDecorationOptions(decoration, options) {
+            if (isDefined(decoration) && isDefined(options)) {
+              if (isDefined(options.coordinates) && isDefined(options.patterns)) {
+                decoration.setPaths(options.coordinates);
+                decoration.setPatterns(options.patterns);
+                return decoration;
+              }
+            }
+          }
+          controller.getMap().then(function (map) {
+            leafletScope.$watch('decorations', function (newDecorations) {
+              for (var name in leafletDecorations) {
+                if (!isDefined(newDecorations) || !isDefined(newDecorations[name])) {
+                  delete leafletDecorations[name];
+                }
+                map.removeLayer(leafletDecorations[name]);
+              }
+              for (var newName in newDecorations) {
+                var decorationData = newDecorations[newName], newDecoration = createDecoration(decorationData);
+                if (isDefined(newDecoration)) {
+                  leafletDecorations[newName] = newDecoration;
+                  map.addLayer(newDecoration);
+                  setDecorationOptions(newDecoration, decorationData);
+                }
+              }
+            }, true);
+          });
+        }
+      };
+    }
+  ]);
   angular.module('leaflet-directive').service('leafletData', [
     '$log',
     '$q',
@@ -1072,6 +1124,7 @@
       var paths = {};
       var markers = {};
       var geoJSON = {};
+      var decorations = {};
       this.setMap = function (leafletMap, scopeId) {
         var defer = getUnresolvedDefer(maps, scopeId);
         defer.resolve(leafletMap);
@@ -1130,6 +1183,15 @@
         var defer = getDefer(geoJSON, scopeId);
         return defer.promise;
       };
+      this.setDecorations = function (leafletDecorations, scopeId) {
+        var defer = getUnresolvedDefer(decorations, scopeId);
+        defer.resolve(leafletDecorations);
+        setResolvedDefer(decorations, scopeId);
+      };
+      this.getDecorations = function (scopeId) {
+        var defer = getDefer(decorations, scopeId);
+        return defer.promise;
+      };
     }
   ]);
   angular.module('leaflet-directive').factory('leafletMapDefaults', [

dist/angular-leaflet-directive.min.js

@@ -7,34 +7,33 @@ angular.module("leaflet-directive").directive("decorations", function($log, leaf
 
 		link: function(scope, element, attrs, controller) {
 			var leafletScope = controller.getLeafletScope(),
+				PolylineDecoratorPlugin = leafletHelpers.PolylineDecoratorPlugin,
 				isDefined = leafletHelpers.isDefined,
 				leafletDecorations = {};
 
+			/* Creates an "empty" decoration with a set of coordinates, but no pattern. */
 			function createDecoration(options) {
-				var decoration = L.polylineDecorator(options.coordinates);
-				return decoration;
+				if (isDefined(options) && isDefined(options.coordinates)) {
+					if (!PolylineDecoratorPlugin.isLoaded()) {
+						$log.error('[AngularJS - Leaflet] The PolylineDecorator Plugin is not loaded.');
+					}
+				}
+
+				return L.polylineDecorator(options.coordinates);
 			}
 
+			/* Updates the path and the patterns for the provided decoration, and returns the decoration. */
 			function setDecorationOptions(decoration, options) {
-				decoration.setPaths(options.coordinates);
-				return options.setAnimatedPatterns(decoration);
+				if (isDefined(decoration) && isDefined(options)) {
+					if (isDefined(options.coordinates) && isDefined(options.patterns)) {
+						decoration.setPaths(options.coordinates);
+						decoration.setPatterns(options.patterns);
+						return decoration;
+					}
+				}
 			}
 
 			controller.getMap().then(function(map) {
-				// var watchDecoration = function(leafletDecoration, name) {
-				// 	var animationId;
-				// 	var deregisterWatch = leafletScope.$watch("decorations." + name, function(decorationData) {
-				// 		clearInterval(animationId);
-				// 		if (!isDefined(decorationData)) {
-				// 			map.removeLayer(leafletDecoration);
-				// 			deregisterWatch();
-				// 			return;
-				// 		}
-				// 		animationId = setDecorationOptions(leafletDecoration, decorationData);
-				// 	}, true);
-				// };
-
-				var animationId;
 				leafletScope.$watch("decorations", function(newDecorations) {
 					for (var name in leafletDecorations) {
 						if (!isDefined(newDecorations) || !isDefined(newDecorations[name])) {
@@ -50,9 +49,8 @@ angular.module("leaflet-directive").directive("decorations", function($log, leaf
 						if (isDefined(newDecoration)) {
 							leafletDecorations[newName] = newDecoration;
 							map.addLayer(newDecoration);
+							setDecorationOptions(newDecoration, decorationData);
 						}
-						clearInterval(animationId);						
-						animationId = setDecorationOptions(newDecoration, decorationData);
 					}
 				}, true);
 			});

src/directives/decorations.js

@@ -9,6 +9,7 @@ angular.module("leaflet-directive").service('leafletData', function ($log, $q, l
     var paths = {};
     var markers = {};
     var geoJSON = {};
+    var decorations = {};
 
     this.setMap = function(leafletMap, scopeId) {
         var defer = getUnresolvedDefer(maps, scopeId);
@@ -80,4 +81,15 @@ angular.module("leaflet-directive").service('leafletData', function ($log, $q, l
         var defer = getDefer(geoJSON, scopeId);
         return defer.promise;
     };
+
+    this.setDecorations = function(leafletDecorations, scopeId) {
+        var defer = getUnresolvedDefer(decorations, scopeId);
+        defer.resolve(leafletDecorations);
+        setResolvedDefer(decorations, scopeId);
+    };
+
+    this.getDecorations = function(scopeId) {
+        var defer = getDefer(decorations, scopeId);
+        return defer.promise;
+    };
 });

src/services/leafletData.js

@@ -11,7 +11,8 @@ module.exports = function(karma) {
             'bower_components/angular-mocks/angular-mocks.js',
             'dist/angular-leaflet-directive.js',
             //'src/**/*.js',
-            'test/unit/*.js'
+            'test/unit/*.js',
+            'bower_components/Leaflet.PolylineDecorator/leaflet.polylineDecorator.js'
         ],
 
         // Frameworks

test/karma-unit.conf.js

@@ -0,0 +1,57 @@
+'use strict';
+
+/*jshint -W117 */
+/*jshint globalstrict: true*/
+/* jasmine specs for directives go here */
+
+describe('Directive: decorations', function() {
+	var $compile, $rootScope, leafletData, leafletHelpers, mainCoordinates, mainDecorations;
+
+	beforeEach(module('leaflet-directive'));
+	beforeEach(inject(function(_$compile_, _$rootScope_, _leafletData_, _leafletHelpers_) {
+		$compile = _$compile_;
+		$rootScope = _$rootScope_;
+		leafletData = _leafletData_;
+		leafletHelpers = _leafletHelpers_;
+	}));
+	beforeEach(function() {
+		mainCoordinates = [
+            [ 0.966, 2.02 ],
+            [ 2.02, 4.04 ]
+        ];
+		mainDecorations = {
+			arrow: {
+				coordinates: mainCoordinates,
+				patterns: [{offset: '10%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})}]
+			},
+			markers: {
+				coordinates: mainCoordinates,
+				patterns: { offset: '5%', repeat: '10%', symbol: L.Symbol.marker()}				
+			}
+		};
+	});
+
+	afterEach(inject(function($rootScope) {
+		$rootScope.$apply();
+	}));
+
+	it("should create a decoration on the map", function() {
+		angular.extend($rootScope, {
+			decorations: {
+				arrow: mainDecorations.arrow
+			}
+		});
+
+		var element = angular.element('<leaflet decorations="decorations"></leaflet>');
+		element = $compile(element)($rootScope);
+		$rootScope.$digest();
+		leafletData.getDecorations().then(function(leafletDecorations) {
+			var leafletArrow = leafletDecorations.arrow;
+
+			// Unfortunately, the L.PolylineDecorator class does not currently expose any value accessors.
+			expect(leafletArrow.options.patterns.offset).toBe('10%');
+			expect(leafletArrow.options.patterns.repeat).toBe(0);
+			expect(leafletArrow.options.symbol).toEqual(L.Symbol.arrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}}));
+		});
+	});
+});