fix(model-key): model-key comparison on objects

Change model-key to use lodash to compare objects - When objects (outside of coords) are compared via ===, the comparison always returns falls, even if objects are same. Thus, with a false comparison, all markers get marked as needing update, negating doRebuildAll=false. This fixes false negative on comparison. - Add simple examples page with examples controller for issue #1485. - Update model-key spec to include a non-coord comparison on markers Closes #1485
angular-ui · Apr 7, 2016 · 139c5e4 · 139c5e4
1 parent cbd17a3
commit 139c5e4
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 2 deletions.
diff --git a/example/assets/scripts/controllers/issue-1485-doRebuildAll.js b/example/assets/scripts/controllers/issue-1485-doRebuildAll.js
@@ -0,0 +1,82 @@
+angular.module('testApp', ['uiGmapgoogle-maps'])
+.config(['uiGmapGoogleMapApiProvider', function (GoogleMapApiProvider) {
+  GoogleMapApiProvider.configure({
+        //    key: 'your api key',
+        v: '3.17',
+        libraries: 'weather,geometry,visualization,places'
+    });
+}])
+.controller('TestController', ['$scope','uiGmapGoogleMapApi', function ($scope,GoogleMapApi) {
+
+  $scope.map = {
+		center: {
+			latitude: 33.7550,
+			longitude: -84.3900
+		},
+		zoom: 14,
+		options: {
+			scrollwheel: false,
+			panControl: false,
+			scaleControl: false,
+			draggable: true,
+			doRebuildAll: false,
+			maxZoom: 22,
+			minZoom: 0
+		},
+		clusterOptions: {
+        averageCenter: true,
+        minimumClusterSize: 10,
+        zoomOnClick: true
+		},
+		clusterEvents: {},
+		refresh : false,
+		bounds: {},
+		events: {
+			idle: function() {
+				console.log('idle');
+			}
+		},
+	};
+
+  $scope.addMarker = function(){
+    var marker = buildMarker();
+    $scope.markers.push(marker);
+  }
+
+  buildMarker = function(){
+    var randomLat = getRandomInt(336550, 338550) / 10000;
+    var randomLng =  getRandomInt(-843900,-843700) / 10000;
+    return {
+      id: nextId(),
+      coords: {
+        latitude: randomLat,
+        longitude: randomLng,
+      },
+      options: $scope.markerOptions
+    }
+  }
+
+	nextId = function() {
+	  return $scope.markers.length + 1;
+	}
+
+	getRandomInt = function(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+	$scope.markers = [];
+
+  GoogleMapApi.then(function(maps) {
+    console.log('start');
+    $scope.maps = maps;
+    $scope.markerOptions = {
+      animation: $scope.maps.Animation.DROP,
+      visible: true
+    }
+    $scope.addMarker();
+    $scope.addMarker();
+    $scope.addMarker();
+    $scope.doRebuildAll = false;
+  });
+
+}]);
diff --git a/example/issue-1485-doRebuildAll.html b/example/issue-1485-doRebuildAll.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html ng-app="testApp">
+
+<head>
+    <script src="http://maps.googleapis.com/maps/api/js?libraries=visualization&language=en&v=3.13"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
+    <script src="../website_libs/dev_deps.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js" type="text/javascript"></script>
+    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
+    <script src="../dist/angular-google-maps.js"></script>
+
+    <link href="assets/stylesheets/example.css" rel="stylesheet" type="text/css">
+</head>
+
+<body ng-controller="TestController">
+    {{sites}}
+    <ui-gmap-google-map class="col-sm-12 pad-none" center="map.center" zoom="map.zoom" style="min-height: 600px" draggable="true">
+      <ui-gmap-markers fit="true" doRebuildAll="doRebuildAll" models="markers" coords="'coords'" options="'options'" clusteroptions="map.clusterOptions">
+      </ui-gmap-markers>
+    </ui-gmap-google-map>
+
+    <button ng-click="addMarker()">Add Marker</button>
+</body>
+<script src="assets/scripts/controllers/issue-1485-doRebuildAll.js"></script>
+</html>
diff --git a/spec/coffee/directives/api/utils/model-key.spec.coffee b/spec/coffee/directives/api/utils/model-key.spec.coffee
@@ -20,7 +20,10 @@ describe 'ModelKey Tests', ->
       @model1 = {coords: {latitude: 41, longitude: -27}}
       @model2 = {coords: {latitude: 40, longitude: -27}}
       @model3 = {coords: { type: 'Point', coordinates: [ -27, 40 ] }}
-      @subject.interface.scopeKeys = ['coords']
+      @model4 = {options: {animation: 2, visible: true}, coords: {latitude: 41, longitude: -27}}
+      @model5 = {options: {animation: 2, visible: true}, coords: {latitude: 41, longitude: -27}}
+      @model6 = {options: {animation: 2, visible: false}, coords: {latitude: 41, longitude: -27}}
+      @subject.interface.scopeKeys = ['coords','options']
       delete @scope.coords
 
     it 'throws with no scope', ->
@@ -41,6 +44,17 @@ describe 'ModelKey Tests', ->
       expect(@subject.modelKeyComparison(@model2, @model3))
       .toEqual(true)
 
+    it 'model4 to model5 with options is same by values', ->
+      @scope.coords = 'coords'
+      @scope.options = 'options'
+      expect(@subject.modelKeyComparison(@model4, @model5))
+      .toEqual(true)
+    it 'model4 to model6 with different options is diff', ->
+      @scope.coords = 'coords'
+      @scope.options = 'options'
+      expect(@subject.modelKeyComparison(@model4, @model6))
+      .toEqual(false)
+
   it 'should properly set id key', ->
     expect(@subject.idKey).toEqual(undefined)
     expect(@subject.setIdKey(@scope)).toEqual('id')

diff --git a/src/coffee/directives/api/utils/model-key.coffee b/src/coffee/directives/api/utils/model-key.coffee
@@ -36,7 +36,7 @@ angular.module('uiGmapgoogle-maps.directives.api.utils')
         #compare the rest of the properties that are being watched by scope
         without = _.without(@interface.scopeKeys, 'coords')
         isEqual = _.every without, (k) =>
-          @scopeOrModelVal(scope[k], scope, model1) == @scopeOrModelVal(scope[k], scope, model2)
+          _.isEqual(@scopeOrModelVal(scope[k], scope, model1), @scopeOrModelVal(scope[k], scope, model2))
         isEqual