Reduce core.title.js size

diff --git a/src/core/core.title.js b/src/core/core.title.js
index 33de0f4a78ea7e025468cfb2d1cba4def2ecf670..91bfc74f0378ce0dadaf6e246dbd32bae6ca6925 100644 (file)
--- a/src/core/core.title.js
+++ b/src/core/core.title.js
@@ -16,6 +16,7 @@ module.exports = function(Chart) {
                text: ''
        };
 
+       var noop = helpers.noop;
        Chart.Title = Chart.Element.extend({
 
                initialize: function(config) {
@@ -28,7 +29,7 @@ module.exports = function(Chart) {
 
                // These methods are ordered by lifecyle. Utilities then follow.
 
-               beforeUpdate: helpers.noop,
+               beforeUpdate: noop,
                update: function(maxWidth, maxHeight, margins) {
 
                        // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
@@ -58,11 +59,11 @@ module.exports = function(Chart) {
                        return this.minSize;
 
                },
-               afterUpdate: helpers.noop,
+               afterUpdate: noop,
 
                //
 
-               beforeSetDimensions: helpers.noop,
+               beforeSetDimensions: noop,
                setDimensions: function() {
                        // Set the unconstrained dimension before label rotation
                        if (this.isHorizontal()) {
@@ -90,103 +91,83 @@ module.exports = function(Chart) {
                                height: 0
                        };
                },
-               afterSetDimensions: helpers.noop,
+               afterSetDimensions: noop,
 
                //
 
-               beforeBuildLabels: helpers.noop,
-               buildLabels: helpers.noop,
-               afterBuildLabels: helpers.noop,
+               beforeBuildLabels: noop,
+               buildLabels: noop,
+               afterBuildLabels: noop,
 
                //
 
-               beforeFit: helpers.noop,
+               beforeFit: noop,
                fit: function() {
 
-                       var ctx = this.ctx;
-                       var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
-                       var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
-                       var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
-                       var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+                       var ctx = this.ctx,
+                               valueOrDefault = helpers.getValueOrDefault,
+                               opts = this.options,
+                               globalDefaults = Chart.defaults.global,
+                               display = opts.display,
+                               fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize),
+                               minSize = this.minSize;
 
-                       // Width
                        if (this.isHorizontal()) {
-                               this.minSize.width = this.maxWidth; // fill all the width
+                               minSize.width = this.maxWidth; // fill all the width
+                               minSize.height = display ? fontSize + (opts.padding * 2) : 0;
                        } else {
-                               this.minSize.width = 0;
+                               minSize.width = display ? fontSize + (opts.padding * 2) : 0;
+                               minSize.height = this.maxHeight; // fill all the height
                        }
 
-                       // height
-                       if (this.isHorizontal()) {
-                               this.minSize.height = 0;
-                       } else {
-                               this.minSize.height = this.maxHeight; // fill all the height
-                       }
-
-                       // Increase sizes here
-                       if (this.isHorizontal()) {
-
-                               // Title
-                               if (this.options.display) {
-                                       this.minSize.height += fontSize + (this.options.padding * 2);
-                               }
-                       } else {
-                               if (this.options.display) {
-                                       this.minSize.width += fontSize + (this.options.padding * 2);
-                               }
-                       }
-
-                       this.width = this.minSize.width;
-                       this.height = this.minSize.height;
+                       this.width = minSize.width;
+                       this.height = minSize.height;
 
                },
-               afterFit: helpers.noop,
+               afterFit: noop,
 
                // Shared Methods
                isHorizontal: function() {
-                       return this.options.position === "top" || this.options.position === "bottom";
+                       var pos = this.options.position;
+                       return pos === "top" || pos === "bottom";
                },
 
                // Actualy draw the title block on the canvas
                draw: function() {
-                       if (this.options.display) {
-                               var ctx = this.ctx;
-                               var titleX, titleY;
-
-                               var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor);
-                               var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
-                               var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
-                               var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
-                               var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
-
-                               ctx.fillStyle = fontColor; // render in correct colour
+                       var ctx = this.ctx,
+                               valueOrDefault = helpers.getValueOrDefault,
+                               opts = this.options,
+                               globalDefaults = Chart.defaults.global;
+
+                       if (opts.display) {
+                               var fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize),
+                                       fontStyle = valueOrDefault(opts.fontStyle, globalDefaults.defaultFontStyle),
+                                       fontFamily = valueOrDefault(opts.fontFamily, globalDefaults.defaultFontFamily),
+                                       titleFont = helpers.fontString(fontSize, fontStyle, fontFamily),
+                                       rotation = 0,
+                                       titleX, 
+                                       titleY;
+
+                               ctx.fillStyle = valueOrDefault(opts.fontColor, globalDefaults.defaultFontColor); // render in correct colour
                                ctx.font = titleFont;
 
                                // Horizontal
                                if (this.isHorizontal()) {
-                                       // Title
-                                       ctx.textAlign = "center";
-                                       ctx.textBaseline = 'middle';
-
                                        titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
                                        titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
-
-                                       ctx.fillText(this.options.text, titleX, titleY);
                                } else {
-
-                                       // Title
-                                       titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
+                                       titleX = opts.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
                                        titleY = this.top + ((this.bottom - this.top) / 2);
-                                       var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
-
-                                       ctx.save();
-                                       ctx.translate(titleX, titleY);
-                                       ctx.rotate(rotation);
-                                       ctx.textAlign = "center";
-                                       ctx.textBaseline = 'middle';
-                                       ctx.fillText(this.options.text, 0, 0);
-                                       ctx.restore();
+                                       rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5);
                                }
+
+                               ctx.save();
+                               ctx.translate(titleX, titleY);
+                               ctx.rotate(rotation);
+                               ctx.textAlign = 'center';
+                               ctx.textBaseline = 'middle';
+                               ctx.fillText(opts.text, 0, 0);
+                               ctx.restore();
                        }
                }
        });

diff --git a/test/core.title.tests.js b/test/core.title.tests.js
index c18bf8568c4224e4e08b0e56036aef368a44b631..ce1c437ea9ef1af90016992c72b15c298f6c7343 100644 (file)
--- a/test/core.title.tests.js
+++ b/test/core.title.tests.js
@@ -107,9 +107,21 @@ describe('Title block tests', function() {
                expect(context.getCalls()).toEqual([{
                        name: 'setFillStyle',
                        args: ['#666']
+               }, {
+                       name: 'save',
+                       args: []
+               }, {
+                       name: 'translate',
+                       args: [300, 66]
+               }, {
+                       name: 'rotate',
+                       args: [0]
                }, {
                        name: 'fillText',
-                       args: ['My title', 300, 66]
+                       args: ['My title', 0, 0]
+               }, {
+                       name: 'restore',
+                       args: []
                }]);
        });