From e8ef7084940a4ee8e5ee6a957cddab91fd21ba2a Mon Sep 17 00:00:00 2001 From: David Schnur Date: Sun, 5 May 2013 16:51:19 -0400 Subject: [PATCH] Added a width parameter to control text wrapping. The optional width parameter establishes a maximum width for the text's bounding box, forcing it to wrap when it reaches that size. --- jquery.flot.canvas.js | 10 +++++----- jquery.flot.js | 14 +++++++++----- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/jquery.flot.canvas.js b/jquery.flot.canvas.js index 392c554..07b0623 100644 --- a/jquery.flot.canvas.js +++ b/jquery.flot.canvas.js @@ -132,10 +132,10 @@ browser, but needs to redraw with canvas text when exporting as an image. // }, // } - Canvas.prototype.getTextInfo = function(layer, text, font, angle) { + Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) { if (!plot.getOptions().canvas) { - return getTextInfo.call(this, layer, text, font, angle); + return getTextInfo.call(this, layer, text, font, angle, width); } var textStyle, layerCache, styleCache, info; @@ -251,13 +251,13 @@ browser, but needs to redraw with canvas text when exporting as an image. // Adds a text string to the canvas text overlay. - Canvas.prototype.addText = function(layer, x, y, text, font, angle, halign, valign) { + Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) { if (!plot.getOptions().canvas) { - return addText.call(this, layer, x, y, text, font, angle, halign, valign); + return addText.call(this, layer, x, y, text, font, angle, width, halign, valign); } - var info = this.getTextInfo(layer, text, font, angle), + var info = this.getTextInfo(layer, text, font, angle, width), lines = info.lines; // Mark the text for inclusion in the next render pass diff --git a/jquery.flot.js b/jquery.flot.js index 15938fc..81eb981 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -273,9 +273,10 @@ Licensed under the MIT license. // classes or a font-spec object, defining the text's font and style. // @param {number=} angle Angle at which to rotate the text, in degrees. // Angle is currently unused, it will be implemented in the future. + // @param {number=} width Maximum width of the text before it wraps. // @return {object} a text info object. - Canvas.prototype.getTextInfo = function(layer, text, font, angle) { + Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) { var textStyle, layerCache, styleCache, info; @@ -314,6 +315,7 @@ Licensed under the MIT license. var element = $("
").html(text) .css({ position: "absolute", + 'max-width': width, top: -9999 }) .appendTo(this.getTextLayer(layer)); @@ -355,14 +357,15 @@ Licensed under the MIT license. // classes or a font-spec object, defining the text's font and style. // @param {number=} angle Angle at which to rotate the text, in degrees. // Angle is currently unused, it will be implemented in the future. + // @param {number=} width Maximum width of the text before it wraps. // @param {string=} halign Horizontal alignment of the text; either "left", // "center" or "right". // @param {string=} valign Vertical alignment of the text; either "top", // "middle" or "bottom". - Canvas.prototype.addText = function(layer, x, y, text, font, angle, halign, valign) { + Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) { - var info = this.getTextInfo(layer, text, font, angle); + var info = this.getTextInfo(layer, text, font, angle, width); // Mark the div for inclusion in the next render pass @@ -386,7 +389,8 @@ Licensed under the MIT license. info.element.css({ top: Math.round(y), - left: Math.round(x) + left: Math.round(x), + 'text-align': halign // In case the text wraps }); }; @@ -2065,7 +2069,7 @@ Licensed under the MIT license. } } - surface.addText(layer, x, y, tick.label, font, null, halign, valign); + surface.addText(layer, x, y, tick.label, font, null, null, halign, valign); } }); }