Add text to its actual layer before measuring it.

The getTextInfo method previously added new text to the top-level container when measuring it. Now it adds the text to the text layer, just as it will be when rendered, so that parent-child CSS rules can resolve correctly. This also avoids having to safe a reference to the top-level container, since it wasn't used anywhere else.

Add text to its actual layer before measuring it.
The getTextInfo method previously added new text to the top-level container when measuring it. Now it adds the text to the text layer, just as it will be when rendered, so that parent-child CSS rules can resolve correctly. This also avoids having to safe a reference to the top-level container, since it wasn't used anywhere else.
4203a66e · David Schnur · e7de8735 · 4203a66e · 4203a66e · 4203a66e
Commit 4203a66e authored Feb 24, 2013 by David Schnur
Show whitespace changes
Inline Side-by-side

Showing with 50 additions and 9 deletions

basic-canvas.html examples/basic-canvas.html +39 -0

jquery.flot.canvas.js jquery.flot.canvas.js +5 -1

jquery.flot.js jquery.flot.js +6 -8

No files found.
--- a/examples/basic-canvas.html
+++ b/examples/basic-canvas.html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Flot Examples</title>
+    <link href="layout.css" rel="stylesheet" type="text/css">
+    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.canvas.js"></script>
+ </head>
+    <body>
+    <h1>Flot Examples</h1>
+    <div id="placeholder" style="width:600px;height:300px;"></div>
+    <p>Simple example. You don't need to specify much to get an
+       attractive look. Put in a placeholder, make sure you set its
+       dimensions (otherwise the plot library will barf) and call the
+       plot function with the data. The axes are automatically
+       scaled.</p>
+<script type="text/javascript">
+$(function () {
+    var d1 = [];
+    for (var i = 0; i < 14; i += 0.5)
+        d1.push([i, Math.sin(i)]);
+    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
+    // a null signifies separate line segments
+    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
+    $.plot($("#placeholder"), [ d1, d2, d3 ], {canvas: true});
+});
+</script>
+ </body>
+</html>
--- a/jquery.flot.canvas.js
+++ b/jquery.flot.canvas.js
@@ -201,7 +201,11 @@ browser, but needs to redraw with canvas text when exporting as an image.
 					var element = $("<div></div>").html(text)
 						.addClass(typeof font === "string" ? font : null)
-						.appendTo(this.container);
+						.css({
+							position: "absolute",
+							top: -9999
+						})
+						.appendTo(this.getTextLayer());
 					font = {
 						style: element.css("font-style"),

--- a/jquery.flot.js
+++ b/jquery.flot.js
@@ -56,8 +56,6 @@ Licensed under the MIT license.
 	function Canvas(cls, container) {
-		this.container = container;
 		var element = document.createElement("canvas");
 		element.className = cls;
 		this.element = element;
@@ -292,10 +290,12 @@ Licensed under the MIT license.
 		if (info == null) {
-			var element = $("<div></div>").html(text).css({
+			var element = $("<div></div>").html(text)
+				.css({
 					position: "absolute",
 					top: -9999
-			});
+				})
+				.appendTo(this.getTextLayer());
 			if (typeof font === "object") {
 				element.css({
@@ -306,8 +306,6 @@ Licensed under the MIT license.
 				element.addClass(font);
 			}
-			element.appendTo(this.container);
 			info = {
 				active: false,
 				rendered: false,