From 5ea4f8ee84ecd2cee907088d1a796d1b8cafdc95 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Tue, 12 Mar 2019 01:53:33 +0900 Subject: [PATCH 1/4] Make hover animation work --- src/core/core.element.js | 2 +- test/specs/core.element.tests.js | 7 ++++++ test/specs/core.tooltip.tests.js | 42 +++++++++++++++++--------------- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/core/core.element.js b/src/core/core.element.js index 665f20c4302..0a5f9d287db 100644 --- a/src/core/core.element.js +++ b/src/core/core.element.js @@ -80,7 +80,7 @@ helpers.extend(Element.prototype, { // No animation -> No Transition if (!model || ease === 1) { - me._view = model; + me._view = helpers.clone(model); me._start = null; return me; } diff --git a/test/specs/core.element.tests.js b/test/specs/core.element.tests.js index ca8f9b03e7c..8b72a0ccc5a 100644 --- a/test/specs/core.element.tests.js +++ b/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); }); }); diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index a55e80eb952..6fb4880cb65 100755 --- a/test/specs/core.tooltip.tests.js +++ b/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 }] })); }); From 570633c2adcdd291a6d6240b21ba048ddce4c3fc Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Thu, 14 Mar 2019 13:45:56 +0900 Subject: [PATCH 2/4] Optimize final transition --- src/core/core.element.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/core/core.element.js b/src/core/core.element.js index 0a5f9d287db..b838e5442f6 100644 --- a/src/core/core.element.js +++ b/src/core/core.element.js @@ -78,9 +78,8 @@ helpers.extend(Element.prototype, { var start = me._start; var view = me._view; - // No animation -> No Transition - if (!model || ease === 1) { - me._view = helpers.clone(model); + if (!model) { + me._view = model; me._start = null; return me; } @@ -95,6 +94,10 @@ helpers.extend(Element.prototype, { interpolate(start, view, model, ease); + if (ease === 1) { + me._start = null; + } + return me; }, From d8f5ef6117e45b46896eee1acb0b454aff234a5d Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Thu, 14 Mar 2019 14:21:51 +0900 Subject: [PATCH 3/4] Revert the previous change --- src/core/core.element.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/core/core.element.js b/src/core/core.element.js index b838e5442f6..0a5f9d287db 100644 --- a/src/core/core.element.js +++ b/src/core/core.element.js @@ -78,8 +78,9 @@ helpers.extend(Element.prototype, { var start = me._start; var view = me._view; - if (!model) { - me._view = model; + // No animation -> No Transition + if (!model || ease === 1) { + me._view = helpers.clone(model); me._start = null; return me; } @@ -94,10 +95,6 @@ helpers.extend(Element.prototype, { interpolate(start, view, model, ease); - if (ease === 1) { - me._start = null; - } - return me; }, From 52e6b766e34224ebf60d35a80e30a93a8ee6e0bc Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Fri, 15 Mar 2019 16:36:40 +0900 Subject: [PATCH 4/4] Use helper.extend instead of helper.clone --- src/core/core.element.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/core.element.js b/src/core/core.element.js index 0a5f9d287db..ecfec2c994d 100644 --- a/src/core/core.element.js +++ b/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 = helpers.clone(model); + me._view = helpers.extend({}, model); me._start = null; return me; }