From 53ce9ad123a9c83c8fea1ce734db2cd150804c6f Mon Sep 17 00:00:00 2001
From: David Schnur <dnschnur@gmail.com>
Date: Tue, 5 Mar 2013 20:30:08 -0500
Subject: [PATCH] Move canvas reuse up into the Canvas constructor.

This allows us to reuse the canvas elements without having to retain the
rest of the Canvas object, which should really be reset when the plot is
reconstructed.  It's also a little simpler, and the Canvas constructor
just feels like the right place for this code.
---
 jquery.flot.js | 80 +++++++++++++++++++-------------------------------
 1 file changed, 31 insertions(+), 49 deletions(-)

diff --git a/jquery.flot.js b/jquery.flot.js
index 56a0e66..e3da6f7 100644
--- a/jquery.flot.js
+++ b/jquery.flot.js
@@ -60,26 +60,30 @@ Licensed under the MIT license.
 
 	function Canvas(cls, container) {
 
-		var element = document.createElement("canvas");
-		element.className = cls;
-		this.element = element;
+		var element = container.children("." + cls)[0];
+
+		if (element == null) {
 
-		$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
-			.data("canvas", this)
-			.appendTo(container);
+			element = document.createElement("canvas");
+			element.className = cls;
 
-		// If HTML5 Canvas isn't available, fall back to Excanvas
+			$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
+				.appendTo(container);
 
-		if (!element.getContext) {
-			if (window.G_vmlCanvasManager) {
-				element = window.G_vmlCanvasManager.initElement(element);
-			} else {
-				throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
+			// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas
+
+			if (!element.getContext) {
+				if (window.G_vmlCanvasManager) {
+					element = window.G_vmlCanvasManager.initElement(element);
+				} else {
+					throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
+				}
 			}
 		}
 
-		var context = element.getContext("2d");
-		this.context = context;
+		this.element = element;
+
+		var context = this.context = element.getContext("2d");
 
 		// Determine the screen's ratio of physical to device-independent
 		// pixels.  This is the ratio between the canvas width that the browser
@@ -1151,54 +1155,32 @@ Licensed under the MIT license.
         }
 
         function setupCanvases() {
-            var reused,
-                existingSurface = placeholder.children("canvas.flot-base"),
-                existingOverlay = placeholder.children("canvas.flot-overlay");
 
-            if (existingSurface.length == 0 || existingOverlay == 0) {
-                // init everything
+            // Make sure the placeholder is clear of everything except canvases
+            // from a previous plot in this container that we'll try to re-use.
 
-                placeholder.html(""); // make sure placeholder is clear
+            placeholder.css("padding", 0) // padding messes up the positioning
+                .children(":not(.flot-base,.flot-overlay)").remove();
 
-                placeholder.css({ padding: 0 }); // padding messes up the positioning
+            if (placeholder.css("position") == 'static')
+                placeholder.css("position", "relative"); // for positioning labels and overlay
 
-                if (placeholder.css("position") == 'static')
-                    placeholder.css("position", "relative"); // for positioning labels and overlay
-
-                surface = new Canvas("flot-base", placeholder);
-                overlay = new Canvas("flot-overlay", placeholder); // overlay canvas for interactive features
-
-                reused = false;
-            }
-            else {
-                // reuse existing elements
-
-                surface = existingSurface.data("canvas");
-                overlay = existingOverlay.data("canvas");
-
-                reused = true;
-            }
+            surface = new Canvas("flot-base", placeholder);
+            overlay = new Canvas("flot-overlay", placeholder); // overlay canvas for interactive features
 
             ctx = surface.context;
             octx = overlay.context;
 
             // define which element we're listening for events on
-            eventHolder = $(overlay.element);
-
-            if (reused) {
-                // run shutdown in the old plot object
-                placeholder.data("plot").shutdown();
+            eventHolder = $(overlay.element).unbind();
 
-                // reset reused canvases
-                plot.resize();
+            // If we're re-using a plot object, shut down the old one
 
-                // make sure overlay pixels are cleared (canvas is cleared when we redraw)
+            var existing = placeholder.data("plot");
 
+            if (existing) {
+                existing.shutdown();
                 overlay.clear();
-
-                // then whack any remaining obvious garbage left
-                eventHolder.unbind();
-                placeholder.children(":not(.flot-base,.flot-overlay,.flot-text)").remove();
             }
 
             // save in case we get replotted