Fix legend and title layout options update

diff --git a/src/core/core.layoutService.js b/src/core/core.layoutService.js
index 045a7490129afb0f2966a69e5e15bf1dbe38581b..8d50db80a9984866a4b1bfdb75854be944241b3a 100644 (file)
--- a/src/core/core.layoutService.js
+++ b/src/core/core.layoutService.js
@@ -54,18 +54,19 @@ module.exports = function(Chart) {
                 * Register a box to a chart.
                 * A box is simply a reference to an object that requires layout. eg. Scales, Legend, Title.
                 * @param {Chart} chart - the chart to use
-                * @param {ILayoutItem} layoutItem - the item to add to be layed out
+                * @param {ILayoutItem} item - the item to add to be layed out
                 */
-               addBox: function(chart, layoutItem) {
+               addBox: function(chart, item) {
                        if (!chart.boxes) {
                                chart.boxes = [];
                        }
 
-                       // Ensure that all layout items have a weight
-                       if (!layoutItem.weight) {
-                               layoutItem.weight = 0;
-                       }
-                       chart.boxes.push(layoutItem);
+                       // initialize item with default values
+                       item.fullWidth = item.fullWidth || false;
+                       item.position = item.position || 'top';
+                       item.weight = item.weight || 0;
+
+                       chart.boxes.push(item);
                },
 
                /**
@@ -80,6 +81,26 @@ module.exports = function(Chart) {
                        }
                },
 
+               /**
+                * Sets (or updates) options on the given `item`.
+                * @param {Chart} chart - the chart in which the item lives (or will be added to)
+                * @param {Object} item - the item to configure with the given options
+                * @param {Object} options - the new item options.
+                */
+               configure: function(chart, item, options) {
+                       var props = ['fullWidth', 'position', 'weight'];
+                       var ilen = props.length;
+                       var i = 0;
+                       var prop;
+
+                       for (; i<ilen; ++i) {
+                               prop = props[i];
+                               if (options.hasOwnProperty(prop)) {
+                                       item[prop] = options[prop];
+                               }
+                       }
+               },
+
                /**
                 * Fits boxes of the given chart into the given size by having each box measure itself
                 * then running a fitting algorithm

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index a2d21d0b625d4793669e56a45211ef2e0a8846bf..cd52b1f9aee72355fb8118445b66213070e99da7 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -3,14 +3,15 @@
 module.exports = function(Chart) {
 
        var helpers = Chart.helpers;
+       var layout = Chart.layoutService;
        var noop = helpers.noop;
 
        Chart.defaults.global.legend = {
-
                display: true,
                position: 'top',
-               fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
+               fullWidth: true,
                reverse: false,
+               weight: 1000,
 
                // a callback that will handle
                onClick: function(e, legendItem) {
@@ -495,16 +496,12 @@ module.exports = function(Chart) {
                var legend = new Chart.Legend({
                        ctx: chart.ctx,
                        options: legendOpts,
-                       chart: chart,
-
-                       // ILayoutItem parameters for layout service
-                       // pick a large number to ensure we are on the outside after any axes
-                       weight: 1000,
-                       position: legendOpts.position,
-                       fullWidth: legendOpts.fullWidth,
+                       chart: chart
                });
+
+               layout.configure(chart, legend, legendOpts);
+               layout.addBox(chart, legend);
                chart.legend = legend;
-               Chart.layoutService.addBox(chart, legend);
        }
 
        return {
@@ -517,6 +514,7 @@ module.exports = function(Chart) {
                                createNewLegendAndAttach(chart, legendOpts);
                        }
                },
+
                beforeUpdate: function(chart) {
                        var legendOpts = chart.options.legend;
                        var legend = chart.legend;
@@ -525,15 +523,17 @@ module.exports = function(Chart) {
                                legendOpts = helpers.configMerge(Chart.defaults.global.legend, legendOpts);
 
                                if (legend) {
+                                       layout.configure(chart, legend, legendOpts);
                                        legend.options = legendOpts;
                                } else {
                                        createNewLegendAndAttach(chart, legendOpts);
                                }
                        } else if (legend) {
-                               Chart.layoutService.removeBox(chart, legend);
+                               layout.removeBox(chart, legend);
                                delete chart.legend;
                        }
                },
+
                afterEvent: function(chart, e) {
                        var legend = chart.legend;
                        if (legend) {

diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js
index 34490c16f909624c75174763675fdf70db7e0f7e..b4c194a46bd4611697bb14a5bf0afc9c32808234 100644 (file)
--- a/src/plugins/plugin.title.js
+++ b/src/plugins/plugin.title.js
@@ -3,13 +3,14 @@
 module.exports = function(Chart) {
 
        var helpers = Chart.helpers;
+       var layout = Chart.layoutService;
        var noop = helpers.noop;
 
        Chart.defaults.global.title = {
                display: false,
                position: 'top',
-               fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
-
+               fullWidth: true,
+               weight: 2000,        // by default greater than legend (1000) to be above
                fontStyle: 'bold',
                padding: 10,
 
@@ -184,15 +185,12 @@ module.exports = function(Chart) {
                var title = new Chart.Title({
                        ctx: chart.ctx,
                        options: titleOpts,
-                       chart: chart,
-
-                       // ILayoutItem parameters
-                       weight: 2000, // greater than legend to be above
-                       position: titleOpts.position,
-                       fullWidth: titleOpts.fullWidth,
+                       chart: chart
                });
+
+               layout.configure(chart, title, titleOpts);
+               layout.addBox(chart, title);
                chart.titleBlock = title;
-               Chart.layoutService.addBox(chart, title);
        }
 
        return {
@@ -205,6 +203,7 @@ module.exports = function(Chart) {
                                createNewTitleBlockAndAttach(chart, titleOpts);
                        }
                },
+
                beforeUpdate: function(chart) {
                        var titleOpts = chart.options.title;
                        var titleBlock = chart.titleBlock;
@@ -213,6 +212,7 @@ module.exports = function(Chart) {
                                titleOpts = helpers.configMerge(Chart.defaults.global.title, titleOpts);
 
                                if (titleBlock) {
+                                       layout.configure(chart, titleBlock, titleOpts);
                                        titleBlock.options = titleOpts;
                                } else {
                                        createNewTitleBlockAndAttach(chart, titleOpts);

diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js
index 109a209e05cfe4402466e42abdbb08491d1457f8..1b3b84a4b5d3695778e495e58edaf6091cf3ae66 100644 (file)
--- a/test/specs/plugin.legend.tests.js
+++ b/test/specs/plugin.legend.tests.js
@@ -11,6 +11,7 @@ describe('Legend block tests', function() {
                        position: 'top',
                        fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
                        reverse: false,
+                       weight: 1000,
 
                        // a callback that will handle
                        onClick: jasmine.any(Function),
@@ -391,6 +392,33 @@ describe('Legend block tests', function() {
                        expect(chart.legend.options.display).toBe(false);
                });
 
+               it ('should update the associated layout item', function() {
+                       var chart = acquireChart({
+                               type: 'line',
+                               data: {},
+                               options: {
+                                       legend: {
+                                               fullWidth: true,
+                                               position: 'top',
+                                               weight: 150
+                                       }
+                               }
+                       });
+
+                       expect(chart.legend.fullWidth).toBe(true);
+                       expect(chart.legend.position).toBe('top');
+                       expect(chart.legend.weight).toBe(150);
+
+                       chart.options.legend.fullWidth = false;
+                       chart.options.legend.position = 'left';
+                       chart.options.legend.weight = 42;
+                       chart.update();
+
+                       expect(chart.legend.fullWidth).toBe(false);
+                       expect(chart.legend.position).toBe('left');
+                       expect(chart.legend.weight).toBe(42);
+               });
+
                it ('should remove the legend if the new options are false', function() {
                        var chart = acquireChart({
                                type: 'line',

diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js
index f334a1c6c674b8e11cf2e9277cd82c7dce5d09f0..686e9f5e0f41f760570bff59f80f17e5feb327da 100644 (file)
--- a/test/specs/plugin.title.tests.js
+++ b/test/specs/plugin.title.tests.js
@@ -11,6 +11,7 @@ describe('Title block tests', function() {
                        display: false,
                        position: 'top',
                        fullWidth: true,
+                       weight: 2000,
                        fontStyle: 'bold',
                        padding: 10,
                        text: ''
@@ -231,6 +232,33 @@ describe('Title block tests', function() {
                        expect(chart.titleBlock.options.display).toBe(false);
                });
 
+               it ('should update the associated layout item', function() {
+                       var chart = acquireChart({
+                               type: 'line',
+                               data: {},
+                               options: {
+                                       title: {
+                                               fullWidth: true,
+                                               position: 'top',
+                                               weight: 150
+                                       }
+                               }
+                       });
+
+                       expect(chart.titleBlock.fullWidth).toBe(true);
+                       expect(chart.titleBlock.position).toBe('top');
+                       expect(chart.titleBlock.weight).toBe(150);
+
+                       chart.options.title.fullWidth = false;
+                       chart.options.title.position = 'left';
+                       chart.options.title.weight = 42;
+                       chart.update();
+
+                       expect(chart.titleBlock.fullWidth).toBe(false);
+                       expect(chart.titleBlock.position).toBe('left');
+                       expect(chart.titleBlock.weight).toBe(42);
+               });
+
                it ('should remove the title if the new options are false', function() {
                        var chart = acquireChart({
                                type: 'line',