From 4068836a42962c306a79f8baec099df0d0f4377f Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 4 May 2016 21:08:59 -0400 Subject: [PATCH] Reduce core.title.js size --- src/core/core.title.js | 115 ++++++++++++++++----------------------- test/core.title.tests.js | 14 ++++- 2 files changed, 61 insertions(+), 68 deletions(-) diff --git a/src/core/core.title.js b/src/core/core.title.js index 33de0f4a7..91bfc74f0 100644 --- 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 ctx = this.ctx, + valueOrDefault = helpers.getValueOrDefault, + opts = this.options, + globalDefaults = Chart.defaults.global; - 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); + 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 = fontColor; // render in correct colour + 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 c18bf8568..ce1c437ea 100644 --- 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: [] }]); });