From b22e32c007d684395e889bf3518bc50c1b14e997 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 31 May 2016 22:16:29 -0400 Subject: [PATCH 1/3] Remove clipping and add plugin hooks. Zoom plugin can then do the clipping itself --- src/core/core.controller.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 41b37d293..cc564b65a 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -288,12 +288,7 @@ module.exports = function(Chart) { this.scale.draw(); } - // Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function - var context = this.chart.ctx; - context.save(); - context.beginPath(); - context.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top); - context.clip(); + Chart.pluginService.notifyPlugins('beforeElementDraw', [this, easingDecimal]); // Draw each dataset via its respective controller (reversed to support proper line stacking) helpers.each(this.data.datasets, function(dataset, datasetIndex) { @@ -302,8 +297,7 @@ module.exports = function(Chart) { } }, this, true); - // Restore from the clipping operation - context.restore(); + Chart.pluginService.notifyPlugins('afterElementDraw', [this, easingDecimal]); // Finally draw the tooltip this.tooltip.transition(easingDecimal).draw(); From b96fdcaf857f433fe2ebe4a39448a002dc507e68 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 31 May 2016 22:28:22 -0400 Subject: [PATCH 2/3] Docs on new plugin callback --- docs/09-Advanced.md | 5 ++++- src/core/core.controller.js | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md index ff2810f85..2641856c5 100644 --- a/docs/09-Advanced.md +++ b/docs/09-Advanced.md @@ -399,7 +399,10 @@ Plugins should derive from Chart.PluginBase and implement the following interfac // Easing is for animation beforeDraw: function(chartInstance, easing) { }, - afterDraw: function(chartInstance, easing) { } + afterDraw: function(chartInstance, easing) { }, + // Before the datasets are drawn but after scales are drawn + beforeDatasetDraw: function(chartInstance, easing) { }, + afterDatasetDraw: function(chartInstance, easing) { }, destroy: function(chartInstance) { } } diff --git a/src/core/core.controller.js b/src/core/core.controller.js index cc564b65a..195475514 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -288,7 +288,7 @@ module.exports = function(Chart) { this.scale.draw(); } - Chart.pluginService.notifyPlugins('beforeElementDraw', [this, easingDecimal]); + Chart.pluginService.notifyPlugins('beforeDatasetDraw', [this, easingDecimal]); // Draw each dataset via its respective controller (reversed to support proper line stacking) helpers.each(this.data.datasets, function(dataset, datasetIndex) { @@ -302,7 +302,7 @@ module.exports = function(Chart) { // Finally draw the tooltip this.tooltip.transition(easingDecimal).draw(); - Chart.pluginService.notifyPlugins('afterDraw', [this, easingDecimal]); + Chart.pluginService.notifyPlugins('afterDatasetDraw', [this, easingDecimal]); }, // Get the single element that was clicked on From 10f01088e43f6632c0fbb977c43dfae4996c7dcc Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 1 Jun 2016 07:18:27 -0400 Subject: [PATCH 3/3] add afterDatasetDraw in correct place --- src/core/core.controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 195475514..0e103d2bd 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -297,12 +297,12 @@ module.exports = function(Chart) { } }, this, true); - Chart.pluginService.notifyPlugins('afterElementDraw', [this, easingDecimal]); + Chart.pluginService.notifyPlugins('afterDatasetDraw', [this, easingDecimal]); // Finally draw the tooltip this.tooltip.transition(easingDecimal).draw(); - Chart.pluginService.notifyPlugins('afterDatasetDraw', [this, easingDecimal]); + Chart.pluginService.notifyPlugins('afterDraw', [this, easingDecimal]); }, // Get the single element that was clicked on