Changeset 10

Timestamp:

17/03/06 04:43:04 (2 years ago)

Author:

al

Message:

fixed major bug with Canvas on IE support, now should work transparently for user in both the case where CANVAS is dynamically generated or already existing on the page. If it exists on the page, we need to remove it and regenerate it so it is in the correct name space that IE understands.

Files:

• plotkit/trunk/PlotKit/Base.js (modified) (1 diff)
• plotkit/trunk/PlotKit/Canvas.js (modified) (13 diffs)
• plotkit/trunk/PlotKit/SVG.js (modified) (1 diff)
• plotkit/trunk/PlotKit/SweetCanvas.js (modified) (7 diffs)
• plotkit/trunk/doc/PlotKit.QuickStart.html (modified) (3 diffs)
• plotkit/trunk/doc/PlotKit.QuickStart.txt (modified) (3 diffs)
• plotkit/trunk/tests/sweet.js (modified) (5 diffs)

plotkit/trunk/PlotKit/Base.js

@@ -231 +231 @@
-    "axisLabelColor": Color.grayColor(),
-    "axisLineColor": Color.whiteColor(),
-
-
+
-};    
-

plotkit/trunk/PlotKit/Canvas.js

@@ -101 +101 @@
-        "IECanvasHTC": "PlotKit/iecanvas.htc"
-    };
-
-    MochiKit.Base.update(this.options, options ? options : {});
+
+    // we need to refetch the element because of this horrible Canvas on IE
+    // crap
+    this.element_id = element.id ? element.id : element;
+
+    // Stuff relating to Canvas on IE support
+    var self = PlotKit.CanvasRenderer;
+    this.isIE = self.IECanvasEmulationIfNeeded(this.options.IECanvasHTC);
+    this.IEDelay = 0.5;
+    this.maxTries = 5;
+    this.renderDelay = null;
+    this.clearDelay = null;
+
-    this.layout = layout;
-    this.style = layout.style;
-
+
+
-    this.container = this.element.parentNode;
-    this.height = element.height;
@@ -115 +128 @@
-        throw "CanvasRenderer() - passed canvas is not found";
-
-    this.isIE = this.IECanvasEmulationIfNeeded(this.element);
-    this.IEDelay = 0.3;
-    if (!this.isIE && !(PlotKit.CanvasRenderer.isSupported(this.element)))
-        throw "CanvasRenderer() - Canvas is not supported.";
-
-== "div
+!= "DIV
-        throw "CanvasRenderer() - <canvas> needs to be enclosed in <div>";
-
@@ -138 +149 @@
-    {"style":{ "position": "relative", "width": this.width + "px"}});
-
+
+
-    // load event system if we have Signals
-    this.event_isinside = null;
@@ -146 +159 @@
-};
-
-prototype.IECanvasEmulationIfNeeded = function(elem
+IECanvasEmulationIfNeeded = function(htc
-    var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
-    var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
@@ -152 +165 @@
-        return false;
-
-    this.element.style.width = this.element.width + "px";
-    this.element.style.height = this.element.height + "px";
-
-    if (isUndefinedOrNull(MochiKit.DOM.getElement('VMLRender'))) {
+        // before we add VMLRender, we need to recreate all canvas tags
+        // programmatically otherwise IE will not recognise it
+
+        var nodes = document.getElementsByTagName('canvas');
+        for (var i = 0; i < nodes.length; i++) {
+            var node = nodes[i];
+            if (node.getContext) { return; } // Other implementation, abort
+            var newNode = MochiKit.DOM.CANVAS(
+               {id: node.id, 
+                width: "" + parseInt(node.width),
+                height: "" + parseInt(node.height)}, "");
+            newNode.style.width = parseInt(node.width) + "px";
+            newNode.style.height = parseInt(node.height) + "px";
+            node.id = node.id + "_old";
+            MochiKit.DOM.swapDOM(node, newNode);
+        }
+
-        document.namespaces.add("v");
-        var vmlopts = {'id':'VMLRender',
@@ -162 +189 @@
-        var vml = MochiKit.DOM.createDOM('object', vmlopts);
-        document.body.appendChild(vml);
-        var htc = this.options.IECanvasHTC;
-        var vmlStyle = document.createStyleSheet();
-        vmlStyle.addRule("canvas", "behavior: url('" + htc + "');");
-        vmlStyle.addRule("v\\:*", "behavior: url(#VMLRender);");
-    }
-
-    return true;
-};
@@ -175 +200 @@
-        // VML takes a while to start up, so we just poll every this.IEDelay
-        try {
+            if (this.renderDelay) {
+                this.renderDelay.cancel();
+                this.renderDelay = null;
+            }
-            var context = this.element.getContext("2d");
-        }
-        catch (e) {
-            this.isFirstRender = false;
-
-
+
+
+
+
+
-            return;
-        }
@@ -303 +335 @@
-PlotKit.CanvasRenderer.prototype._renderPieChart = function() {
-    var context = this.element.getContext("2d");
-    context.save();
-
-    var colorCount = this.options.colorScheme.length;
-    var slices = this.layout.slices;
@@ -312 +342 @@
-    var radius = Math.min(this.area.w * this.options.pieRadius, 
-                          this.area.h * this.options.pieRadius);
+
+    if (this.isIE) {
+        centerx = parseInt(centerx);
+        centery = parseInt(centery);
+        radius = parseInt(radius);
+    }
+
-
-        // NOTE NOTE!! Canvas Tag draws the circle clockwise from the y = 0, x = 1
@@ -332 +369 @@
-        };
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        context.restore();
-    }
@@ -527 +566 @@
-PlotKit.CanvasRenderer.prototype._renderBackground = function() {
-    var context = this.element.getContext("2d");
+    context.save();
-    context.fillStyle = this.options.backgroundColor.toString();
-    context.fillRect(0, 0, this.width, this.height);
+    context.restore();
-};
-
@@ -535 +576 @@
-        // VML takes a while to start up, so we just poll every this.IEDelay
-        try {
+            if (this.clearDelay) {
+                this.clearDelay.cancel();
+                this.clearDelay = null;
+            }
-            var context = this.element.getContext("2d");
-        }
-        catch (e) {
-            this.isFirstRender = false;
-d
-d
+clearD
+clearD
-            return;
-        }
@@ -578 +623 @@
-    var y = (e.mouse().page.y - PlotKit.Base.findPosY(this.element) - this.area.y) / this.area.h;
-        
-
+//
-
-    var isHit = this.layout.hitTest(x, y);

plotkit/trunk/PlotKit/SVG.js

@@ -107 +107 @@
-    if (isNil(this.element))
-        throw "SVGRenderer() - passed SVG object is not found";
-
+
+
-        throw "SVGRenderer() - No DIV's around the SVG.";
-

plotkit/trunk/PlotKit/SweetCanvas.js

@@ -58 +58 @@
-// ---------------------------------------------------------------------
-
-ement, layout, option
-additionalOption
-additionalOptions, option
-ement, layout, additionalOption
+, layout, opt
+moreOpt
+moreOpts, opt
+, layout, moreOpt
-};
-
@@ -105 +105 @@
-        context.shadowBlur = 5.0;
-        context.shadowColor = Color.fromHexString("#888888").toRGBString();
-
-
+
+
+
+
+
+
+
+
+
+
+
-        context.fillStyle = chooseColor(bar.name).toRGBString();
-        context.fillRect(x, y, w, h);
@@ -157 +166 @@
-        // faux shadow for firefox
-        context.save();
-
+
+
+
+
+
+
+
-        context.translate(-1, -2);
-        bind(makePath, this)();        
@@ -178 +193 @@
-};
-
-
-PlotKit.CanvasRenderer.prototype._renderPieChart = function() {
-    var context = this.element.getContext("2d");
-    context.save();
-
-    var colorCount = this.options.colorScheme.length;
@@ -191 +204 @@
-                          this.area.h * this.options.pieRadius);
-
+    if (this.isIE) {
+        centerx = parseInt(centerx);
+        centery = parseInt(centery);
+        radius = parseInt(radius);
+    }
+
-        // NOTE NOTE!! Canvas Tag draws the circle clockwise from the y = 0, x = 1
-        // so we have to subtract 90 degrees to make it start at y = 1, x = 0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
-
-    context.strokeStyle = Color.whiteColor().toRGBString();
-    context.lineWidth = 2.0;    
+    context.save();
-    for (var i = 0; i < slices.length; i++) {
-        var color = this.options.colorScheme[i%colorCount];
-        context.save();
-        context.fillStyle = color.toRGBString();
-
@@ -225 +244 @@
-            context.closePath();
-        };
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-PlotKit.SweetCanvasRenderer.prototype._renderBackground = function() {
-    var context = this.element.getContext("2d");
-
-
-
-
-
-
+
-    if (this.layout.style == "bar" || this.layout.style == "line") {
-        context.save();
+        context.fillStyle = this.options.backgroundColor.toRGBString();
+        context.fillRect(this.area.x, this.area.y, this.area.w, this.area.h);
-        context.strokeStyle = Color.whiteColor().toRGBString();
-        context.lineWidth = 1.0;
@@ -264 +278 @@
-        PlotKit.SweetCanvasRenderer.__super__._renderBackground.call(this);
-    }
-
-
+

plotkit/trunk/doc/PlotKit.QuickStart.html

@@ -181 +181 @@
-</p>
-<pre><code>var options = {
-../PlotK
+/plotk
-   &quot;colorScheme&quot;: PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
-   &quot;padding&quot;: {left: 0, right: 0, top: 10, bottom: 30},
@@ -249 +249 @@
-<script type="text/javascript">
-<!--
+
-var options = {
-PlotK
-
+plotk
+ 
-   "padding": {left: 10, right: 10, top: 10, bottom: 30},
-   "xTicks": [{v:0, label:"zero"}, 
@@ -261 +262 @@
-   "pieRadius": 0.35
-};
+
-
-function drawBarGraph() {

plotkit/trunk/doc/PlotKit.QuickStart.txt

@@ -148 +148 @@
-
-    var options = {
-../PlotK
+/plotk
-       "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
-       "padding": {left: 0, right: 0, top: 10, bottom: 30},
@@ -212 +212 @@
-<script type="text/javascript">
-<!--
+
-var options = {
-PlotK
-
+plotk
+ 
-   "padding": {left: 10, right: 10, top: 10, bottom: 30},
-   "xTicks": [{v:0, label:"zero"}, 
@@ -225 +226 @@
-};
-
+
-function drawBarGraph() {
-   var layout = new PlotKit.Layout("bar", options);

plotkit/trunk/tests/sweet.js

@@ -1 +1 @@
-/* actual tests */
-
-
-
+
+
+
+
-
-function genericTest(num, plotStyle) {
@@ -9 +11 @@
-        l.evaluate();
-        var c = $("test" + num + "canvas");
-ion
+
-        g.render();
-}
@@ -17 +19 @@
-        l.addDatasetFromTable("data1." + num, $("test" + num), 0, 1);   
-        l.addDatasetFromTable("data2." + num, $("test" + num), 0, 2);   
-        l.addDatasetFromTable("data3." + num, $("test" + num), 0, 1);   
-        l.addDatasetFromTable("data4." + num, $("test" + num), 0, 2);   
-        l.addDatasetFromTable("data5." + num, $("test" + num), 0, 1);   
-        l.addDatasetFromTable("data6." + num, $("test" + num), 0, 2);   
-        l.evaluate();
-        var c = $("test" + num + "canvas");
-ion
+
-        g.render();
-}
@@ -71 +69 @@
-    var missingData = [[0, 1], [1, 4], [3, 16], [5, 17]];
-    
-]; // 
+
-
-    tests.appendChild(H2(null, "Simple Tests"));
@@ -87 +85 @@
-    tests.appendChild(generateUnitTest(5, genericTest, simpleData1,
-    "pie", ""));
+
-}
-