Fix hover animations and optimize pivot() (chartjs#6129)

Author: nagix

src/core/core.element.js

@@ -66,7 +66,7 @@ helpers.extend(Element.prototype, {
 	pivot: function() {
 		var me = this;
 		if (!me._view) {
-			me._view = helpers.clone(me._model);
+			me._view = helpers.extend({}, me._model);
 		}
 		me._start = {};
 		return me;
@@ -80,7 +80,7 @@ helpers.extend(Element.prototype, {
 
 		// No animation -> No Transition
 		if (!model || ease === 1) {
-			me._view = model;
+			me._view = helpers.extend({}, model);
 			me._start = null;
 			return me;
 		}

test/specs/core.element.tests.js

@@ -18,6 +18,7 @@ describe('Core element tests', function() {
 		element.transition(0.25);
 
 		expect(element._view).toEqual(element._model);
+		expect(element._view).not.toBe(element._model);
 		expect(element._view.objectProp).toBe(element._model.objectProp); // not cloned
 
 		element._model.numberProp = 100;
@@ -40,5 +41,11 @@ describe('Core element tests', function() {
 			},
 			colorProp: 'rgb(64, 64, 0)',
 		});
+
+		// Final transition clones model into view
+		element.transition(1);
+
+		expect(element._view).toEqual(element._model);
+		expect(element._view).not.toBe(element._model);
 	});
 });

test/specs/core.tooltip.tests.js

@@ -137,11 +137,11 @@ describe('Core.Tooltip', function() {
 				footer: [],
 				caretPadding: 2,
 				labelColors: [{
-					borderColor: 'rgb(255, 0, 0)',
-					backgroundColor: 'rgb(0, 255, 0)'
+					borderColor: globalDefaults.defaultColor,
+					backgroundColor: globalDefaults.defaultColor
 				}, {
-					borderColor: 'rgb(0, 0, 255)',
-					backgroundColor: 'rgb(0, 255, 255)'
+					borderColor: globalDefaults.defaultColor,
+					backgroundColor: globalDefaults.defaultColor
 				}]
 			}));
 
@@ -338,8 +338,8 @@ describe('Core.Tooltip', function() {
 			caretPadding: 2,
 			labelTextColors: ['#fff'],
 			labelColors: [{
-				borderColor: 'rgb(255, 0, 0)',
-				backgroundColor: 'rgb(0, 255, 0)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}]
 		}));
 
@@ -488,11 +488,11 @@ describe('Core.Tooltip', function() {
 			caretPadding: 2,
 			labelTextColors: ['labelTextColor', 'labelTextColor'],
 			labelColors: [{
-				borderColor: 'rgb(255, 0, 0)',
-				backgroundColor: 'rgb(0, 255, 0)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}, {
-				borderColor: 'rgb(0, 0, 255)',
-				backgroundColor: 'rgb(0, 255, 255)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}]
 		}));
 
@@ -547,6 +547,7 @@ describe('Core.Tooltip', function() {
 
 		// Check and see if tooltip was displayed
 		var tooltip = chart.tooltip;
+		var globalDefaults = Chart.defaults.global;
 
 		expect(tooltip._view).toEqual(jasmine.objectContaining({
 			// Positioning
@@ -568,11 +569,11 @@ describe('Core.Tooltip', function() {
 			afterBody: [],
 			footer: [],
 			labelColors: [{
-				borderColor: 'rgb(0, 0, 255)',
-				backgroundColor: 'rgb(0, 255, 255)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}, {
-				borderColor: 'rgb(255, 0, 0)',
-				backgroundColor: 'rgb(0, 255, 0)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}]
 		}));
 
@@ -629,6 +630,7 @@ describe('Core.Tooltip', function() {
 
 		// Check and see if tooltip was displayed
 		var tooltip = chart.tooltip;
+		var globalDefaults = Chart.defaults.global;
 
 		expect(tooltip._view).toEqual(jasmine.objectContaining({
 			// Positioning
@@ -646,8 +648,8 @@ describe('Core.Tooltip', function() {
 			afterBody: [],
 			footer: [],
 			labelColors: [{
-				borderColor: 'rgb(0, 0, 255)',
-				backgroundColor: 'rgb(0, 255, 255)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}]
 		}));
 	});
@@ -1088,11 +1090,11 @@ describe('Core.Tooltip', function() {
 			caretPadding: 2,
 			labelTextColors: ['labelTextColor', 'labelTextColor'],
 			labelColors: [{
-				borderColor: 'rgb(255, 0, 0)',
-				backgroundColor: 'rgb(0, 255, 0)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}, {
-				borderColor: 'rgb(0, 0, 255)',
-				backgroundColor: 'rgb(0, 255, 255)'
+				borderColor: globalDefaults.defaultColor,
+				backgroundColor: globalDefaults.defaultColor
 			}]
 		}));
 	});