feat(markers,paths,geojson,watchOptions): More flexible watch options…

… and more watch-options has been expanded to include paths and redesigned to handle more types of watching. `markersWatchOptions` and `geojsonWatchOptions` are no longer supported. Instead, this direcitve now supports the `watch-options` attribute, which takes an object that contains the watch options for each map element type: ``` watchOptions = { markers: <markerWatchOptions>, geojson: <geojsonWatchOptions>, paths: <pathsWatchOptions> } ``` The watch options for these map element types looks like: ``` { type: <watchTypes>, individual: { type: <watchTypes> } } ``` `<watchTypes>` can be one of: -`'watch'`: `$scope.$watch` with no deep watch on the object -`'watchDeep'`: `$scope.$watch` with a deep watch on the object -`'watchCollection'`: `$scope.$watchCollection` on the object -`null`: Do not watch the collection (note: you must explicity `null`, `undefined` will not work). I've removed support for the directive attributes `watch-markers` and `watch-paths`. While these make sense when set to false, it's ambiguous how they should function when set to `true`, especially when combined with `watch-options`. There are some other minor fixes in this commit (fixing breaking examples, and another small bug). BREAKING CHANGE: `markersWatchOptions`, `geojsonWatchOptions`, `watch-markers`, and `watch-paths` are no longer supported. The format of the watch options has also changed. Before: ``` <leaflet defaults='defaults' markers-watch-options='markerWatchOptions'> ``` After: ``` <leaflet defaults='defaults' watch-options='watchOptions'> <script> $scope.watchOptions = { markers: <watchOptions> } </script> ``` The same can be said for `geojson`. WatchOptions. `shouldWatch` and `isDeep` are no longer supported, but the same behaviour can be achieved: `shouldWatch: true`, `isDeep: true` = `type = 'watchDeep'` `shouldWatch: true`, `isDeep: false` = `type = 'watch'` `shouldWatch: false`, `isDeep: false` = `type = null` `shouldWatch: false`, `isDeep: true` = `type = null` Furthermore, Before: ``` <leaflet watch-markers='false'> ``` After: ``` <leaflet watch-options='watchOptions'> <script> $scope.watchOptions = { markers: { type: null, individual: { type: null } } }; </script> ``` `watch-paths='false'` can be achieved in a similar manner.
angular-ui · Nov 3, 2015 · 963de33 · 963de33
1 parent ffcfa2f
commit 963de33
Show file tree

Hide file tree

Showing 25 changed files with 474 additions and 360 deletions.
diff --git a/dist/ui-leaflet.js b/dist/ui-leaflet.js
diff --git a/dist/ui-leaflet.min.js b/dist/ui-leaflet.min.js
diff --git a/dist/ui-leaflet.min.no-header.js b/dist/ui-leaflet.min.no-header.js
diff --git a/dist/ui-leaflet_dev_mapped.js b/dist/ui-leaflet_dev_mapped.js
diff --git a/dist/ui-leaflet_dev_mapped.js.map b/dist/ui-leaflet_dev_mapped.js.map
diff --git a/doc/markers-attribute.md b/doc/markers-attribute.md
@@ -96,7 +96,13 @@ Markers watches
 Every marker you add to the map is watched for changes by default, so a change in a marker property will be reflected on the map directly. This feature can be disabled if you don't need to dynamic modification of markers and prefer better performance. This is the command used to disable markers watchers:
 
 ```
-<leaflet markers="markers" watch-markers="false"></leaflet>
+<leaflet markers="markers" watch-options='watchOptions'></leaflet>
+```
+
+where:
+
+```
+scope.watchOptions = { markers: { type: null, individual: { type: null } } };
 ```
 
 By default the markers will be watched, so we can change its properties dynamically, like in [this demo](http://angular-ui.github.io/ui-leaflet/examples/markers-update-example.html).

diff --git a/examples/0118-basic-double-map-events-example.html b/examples/0118-basic-double-map-events-example.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
     <script>
         var app = angular.module("demoapp", ['ui-leaflet']);
-        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
+        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -30,12 +30,12 @@
 
             $scope.events = {
                 map: {
-                    enable: leafletEvents.getAvailableMapEvents(),
+                    enable: leafletMapEvents.getAvailableMapEvents(),
                     logic: 'emit'
                 }
             };
 
-            var mapEvents = leafletEvents.getAvailableMapEvents();
+            var mapEvents = leafletMapEvents.getAvailableMapEvents();
             for (var k in mapEvents) {
                 var eventName = 'leafletDirectiveMap.' + mapEvents[k];
                 $scope.$on(eventName, function(event){

diff --git a/examples/0303-paths-3000-items-example.html b/examples/0303-paths-3000-items-example.html
@@ -17,6 +17,14 @@
                 defaults: {
                     scrollWheelZoom: false
                 },
+                watchOptions: {
+                    paths: {
+                        type: 'watch',
+                        individual: {
+                            type: null
+                        }
+                    }
+                },
                 //restrict map panning for this region
                 maxbounds: {
                     northEast: {
@@ -50,15 +58,19 @@
 
             //bind locationGrid to zoom level
             $scope.$watch("centroid.zoom", function (zoom) {
+                var tempPaths;
                 if (zoom <= 3) {
                     //clear path object
                     $scope.paths = {};
 
+                    //make new paths
+                    tempPaths = {};
+
                     //get location data and initialize leaflet circles
                     LocationDataService.getLocationsTenGrid().then(function (res) {
                         angular.forEach(res.data, function (value, key) {
                             if (value.lat !== null && value.lon !== null) {
-                                $scope.paths['circle' + key] = {
+                                tempPaths['circle' + key] = {
                                     type: 'circle',
                                     className: 'testClass',
                                     fillColor: 'DarkSlateGray',
@@ -73,6 +85,7 @@
                                 };
                             }
                         });
+                        $scope.paths = tempPaths;
                     }, function (error) {
                         console.log('An error occured!', error);
                     });
@@ -81,11 +94,14 @@
                     //clear path object
                     $scope.paths = {};
 
+                    //make new paths
+                    tempPaths = {};
+
                     //get location data and initialize leaflet circles
                     LocationDataService.getLocationsZeroOneGrid().then(function (res) {
                         angular.forEach(res.data, function (value, key) {
                             if (value.lat !== null && value.lon !== null) {
-                                $scope.paths['circle' + key] = {
+                                tempPaths['circle' + key] = {
                                     type: 'circle',
                                     className: 'testClass',
                                     fillColor: 'DarkSlateGray',
@@ -100,6 +116,7 @@
                                 };
                             }
                         });
+                        $scope.paths = tempPaths;
                     }, function (error) {
                         console.log('An error occured!', error);
                     });
@@ -141,7 +158,7 @@
     </script>
   </head>
   <body ng-controller="Paths3000ItemsController">
-      <leaflet watch-paths="false" lf-center="centroid" maxbounds="maxbounds" layers="layers" paths="paths" defaults="defaults" width="100%" height="480px"></leaflet>
+      <leaflet watch-options="watchOptions" lf-center="centroid" maxbounds="maxbounds" layers="layers" paths="paths" defaults="defaults" width="100%" height="480px"></leaflet>
       <h1>3000 items in a map performance</h1>
   </body>
 </html>
diff --git a/examples/0514-markers-delayed-events.html b/examples/0514-markers-delayed-events.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
     <script>
         var app = angular.module("demoapp", ['ui-leaflet']);
-        app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
+        app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -40,12 +40,12 @@
 
             $scope.events = {
                 markers: {
-                    enable: leafletEvents.getAvailableMarkerEvents(),
+                    enable: leafletMarkerEvents.getAvailableEvents(),
                 }
             };
 
             $scope.eventDetected = "No events yet...";
-            var markerEvents = leafletEvents.getAvailableMarkerEvents();
+            var markerEvents = leafletMarkerEvents.getAvailableEvents();
             for (var k in markerEvents){
                 var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
                 $scope.$on(eventName, function(event, args){

diff --git a/examples/0604-mixed-markers-nested-events-example.html b/examples/0604-mixed-markers-nested-events-example.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css"/>
     <script>
     var app = angular.module("demoapp", ['ui-leaflet']);
-    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
+    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
         $scope.map = {
             show: true
         };
@@ -53,12 +53,12 @@
 
         $scope.events = {
             markers: {
-                enable: leafletEvents.getAvailableMarkerEvents()
+                enable: leafletMarkerEvents.getAvailableEvents()
             }
         };
 
         $scope.eventDetected = "No events yet...";
-        var markerEvents = leafletEvents.getAvailableMarkerEvents();
+        var markerEvents = leafletMarkerEvents.getAvailableEvents();
         for (var k in markerEvents) {
             var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
             $scope.$on(eventName, function (event, args) {

diff --git a/examples/0605-mixed-overlays-markers-nested-no-watch-example.html b/examples/0605-mixed-overlays-markers-nested-no-watch-example.html
@@ -33,12 +33,12 @@
             });
         }, 4000);
         angular.extend($scope, {
-            markersWatchOptions: {
-                doWatch: false,
-                isDeep: false,
-                individual: {
-                    doWatch: false,
-                    isDeep: false
+            watchOptions: {
+                markers: {
+                    type: null,
+                    individual: {
+                        type: null
+                    }
                 }
             },
             center: {
@@ -160,7 +160,7 @@
         markers="markers"
         layers="layers"
         markers-nested="true"
-        markers-watch-options="markersWatchOptions"
+        watch-options="watchOptions"
         height="480px" width="100%">
     </leaflet>
     <h1>Overlays with nested markers no watchers example</h1>

diff --git a/examples/js/controllers.js b/examples/js/controllers.js
@@ -127,7 +127,7 @@ var app = angular.module('webapp');
                 });
             };
         }]);
-        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
+        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -147,11 +147,11 @@ var app = angular.module('webapp');
             });
             $scope.events = {
                 map: {
-                    enable: leafletEvents.getAvailableMapEvents(),
+                    enable: leafletMapEvents.getAvailableMapEvents(),
                     logic: 'emit'
                 }
             };
-            var mapEvents = leafletEvents.getAvailableMapEvents();
+            var mapEvents = leafletMapEvents.getAvailableMapEvents();
             for (var k in mapEvents) {
                 var eventName = 'leafletDirectiveMap.' + mapEvents[k];
                 $scope.$on(eventName, function(event){
@@ -3232,7 +3232,7 @@ var app = angular.module('webapp');
                 },
             });
         } ]);
-        app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
+        app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -3261,11 +3261,11 @@ var app = angular.module('webapp');
             };
             $scope.events = {
                 markers: {
-                    enable: leafletEvents.getAvailableMarkerEvents(),
+                    enable: leafletMarkerEvents.getAvailableEvents(),
                 }
             };
             $scope.eventDetected = "No events yet...";
-            var markerEvents = leafletEvents.getAvailableMarkerEvents();
+            var markerEvents = leafletMarkerEvents.getAvailableEvents();
             for (var k in markerEvents){
                 var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
                 $scope.$on(eventName, function(event, args){
@@ -4058,12 +4058,12 @@ var app = angular.module('webapp');
             });
         }, 4000);
         angular.extend($scope, {
-            markersWatchOptions: {
-                doWatch: false,
-                isDeep: false,
-                individual: {
-                    doWatch: false,
-                    isDeep: false
+            watchOptions: {
+                markers: {
+                    type: null
+                    individual: {
+                        type: null
+                    }
                 }
             },
             center: {
@@ -4196,7 +4196,7 @@ var app = angular.module('webapp');
                 console.log(data);
             });
         }]);
-    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
+    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
         $scope.map = {
             show: true
         };
@@ -4238,11 +4238,11 @@ var app = angular.module('webapp');
         };
         $scope.events = {
             markers: {
-                enable: leafletEvents.getAvailableMarkerEvents()
+                enable: leafletMarkerEvents.getAvailableEvents()
             }
         };
         $scope.eventDetected = "No events yet...";
-        var markerEvents = leafletEvents.getAvailableMarkerEvents();
+        var markerEvents = leafletMarkerEvents.getAvailableEvents();
         for (var k in markerEvents) {
             var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
             $scope.$on(eventName, function (event, args) {

diff --git a/examples/js/controllers/BasicDoubleMapEventsController.js b/examples/js/controllers/BasicDoubleMapEventsController.js
@@ -1,4 +1,4 @@
-        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
+        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -18,11 +18,11 @@
             });
             $scope.events = {
                 map: {
-                    enable: leafletEvents.getAvailableMapEvents(),
+                    enable: leafletMapEvents.getAvailableMapEvents(),
                     logic: 'emit'
                 }
             };
-            var mapEvents = leafletEvents.getAvailableMapEvents();
+            var mapEvents = leafletMapEvents.getAvailableMapEvents();
             for (var k in mapEvents) {
                 var eventName = 'leafletDirectiveMap.' + mapEvents[k];
                 $scope.$on(eventName, function(event){

diff --git a/examples/js/controllers/MarkersDelayedEventsController.js b/examples/js/controllers/MarkersDelayedEventsController.js
@@ -1,4 +1,4 @@
-        app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
+        app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -27,11 +27,11 @@
             };
             $scope.events = {
                 markers: {
-                    enable: leafletEvents.getAvailableMarkerEvents(),
+                    enable: leafletMarkerEvents.getAvailableEvents(),
                 }
             };
             $scope.eventDetected = "No events yet...";
-            var markerEvents = leafletEvents.getAvailableMarkerEvents();
+            var markerEvents = leafletMarkerEvents.getAvailableEvents();
             for (var k in markerEvents){
                 var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
                 $scope.$on(eventName, function(event, args){

diff --git a/examples/js/controllers/MixedMOverlaysMarkersNestedNoWatchController.js b/examples/js/controllers/MixedMOverlaysMarkersNestedNoWatchController.js
@@ -21,12 +21,12 @@
             });
         }, 4000);
         angular.extend($scope, {
-            markersWatchOptions: {
-                doWatch: false,
-                isDeep: false,
-                individual: {
-                    doWatch: false,
-                    isDeep: false
+            watchOptions: {
+                markers: {
+                    type: null
+                    individual: {
+                        type: null
+                    }
                 }
             },
             center: {

diff --git a/examples/js/controllers/MixedMarkersNestedEventsController.js b/examples/js/controllers/MixedMarkersNestedEventsController.js
@@ -1,4 +1,4 @@
-    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
+    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
         $scope.map = {
             show: true
         };
@@ -40,11 +40,11 @@
         };
         $scope.events = {
             markers: {
-                enable: leafletEvents.getAvailableMarkerEvents()
+                enable: leafletMarkerEvents.getAvailableEvents()
             }
         };
         $scope.eventDetected = "No events yet...";
-        var markerEvents = leafletEvents.getAvailableMarkerEvents();
+        var markerEvents = leafletMarkerEvents.getAvailableEvents();
         for (var k in markerEvents) {
             var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
             $scope.$on(eventName, function (event, args) {

diff --git a/src/directives/geojson.js b/src/directives/geojson.js
@@ -2,7 +2,7 @@ angular.module('ui-leaflet')
 .directive('geojson', function (leafletLogger, $rootScope, leafletData, leafletHelpers,
     leafletWatchHelpers, leafletDirectiveControlsHelpers,leafletIterators, leafletGeoJsonEvents) {
     var _maybeWatch = leafletWatchHelpers.maybeWatch,
-        _watchOptions = leafletHelpers.watchOptions,
+        _defaultWatchOptions = leafletHelpers.watchOptions,
         _extendDirectiveControls = leafletDirectiveControlsHelpers.extend,
         hlp = leafletHelpers,
         $it = leafletIterators;
@@ -21,7 +21,13 @@ angular.module('ui-leaflet')
                 _hasSetLeafletData = false;
 
             controller.getMap().then(function(map) {
-                var watchOptions = leafletScope.geojsonWatchOptions || _watchOptions;
+                var watchOptions;
+                 if(leafletScope.watchOptions && leafletScope.watchOptions.geojson) {
+                    watchOptions = leafletScope.watchOptions.geojson;
+                 }
+                 else {
+                    watchOptions = _defaultWatchOptions;
+                 }
 
                 var _hookUpEvents = function(geojson, maybeName){
                     var onEachFeature;

diff --git a/src/directives/leaflet.js b/src/directives/leaflet.js
@@ -18,8 +18,7 @@ angular.module('ui-leaflet', ['nemLogging']).directive('leaflet',
             controls       : '=',
             decorations    : '=',
             eventBroadcast : '=',
-            markersWatchOptions : '=',
-            geojsonWatchOptions : '='
+            watchOptions   : '='
         },
         transclude: true,
         template: '<div class="angular-leaflet-map"><div ng-transclude></div></div>',