Commit e8ef7084 authored by David Schnur's avatar David Schnur

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.
parent 7c6993e7
...@@ -132,10 +132,10 @@ browser, but needs to redraw with canvas text when exporting as an image. ...@@ -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) { 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; var textStyle, layerCache, styleCache, info;
...@@ -251,13 +251,13 @@ browser, but needs to redraw with canvas text when exporting as an image. ...@@ -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. // 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) { 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; lines = info.lines;
// Mark the text for inclusion in the next render pass // Mark the text for inclusion in the next render pass
......
...@@ -273,9 +273,10 @@ Licensed under the MIT license. ...@@ -273,9 +273,10 @@ Licensed under the MIT license.
// classes or a font-spec object, defining the text's font and style. // 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. // @param {number=} angle Angle at which to rotate the text, in degrees.
// Angle is currently unused, it will be implemented in the future. // 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. // @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; var textStyle, layerCache, styleCache, info;
...@@ -314,6 +315,7 @@ Licensed under the MIT license. ...@@ -314,6 +315,7 @@ Licensed under the MIT license.
var element = $("<div></div>").html(text) var element = $("<div></div>").html(text)
.css({ .css({
position: "absolute", position: "absolute",
'max-width': width,
top: -9999 top: -9999
}) })
.appendTo(this.getTextLayer(layer)); .appendTo(this.getTextLayer(layer));
...@@ -355,14 +357,15 @@ Licensed under the MIT license. ...@@ -355,14 +357,15 @@ Licensed under the MIT license.
// classes or a font-spec object, defining the text's font and style. // 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. // @param {number=} angle Angle at which to rotate the text, in degrees.
// Angle is currently unused, it will be implemented in the future. // 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", // @param {string=} halign Horizontal alignment of the text; either "left",
// "center" or "right". // "center" or "right".
// @param {string=} valign Vertical alignment of the text; either "top", // @param {string=} valign Vertical alignment of the text; either "top",
// "middle" or "bottom". // "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 // Mark the div for inclusion in the next render pass
...@@ -386,7 +389,8 @@ Licensed under the MIT license. ...@@ -386,7 +389,8 @@ Licensed under the MIT license.
info.element.css({ info.element.css({
top: Math.round(y), 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. ...@@ -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);
} }
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment