Changeset 4

Show
Ignore:
Timestamp:
07/03/06 00:56:36 (2 years ago)
Author:
al
Message:

Alright, here's total IE support for SVG and SVG text label support

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • plotkit/trunk/PlotKit/Canvas.js

    r1 r4  
    9494        "axisTickSize": 3, 
    9595        "axisLabelColor": Color.blackColor(), 
     96        "axisLabelFont": "Arial", 
    9697        "axisLabelFontSize": 9, 
    9798                "axisLabelWidth": 50, 
    …… 
    415416                context.beginPath(); 
    416417                context.moveTo(x, y); 
    417                 context.lineTo(x, y + 3); 
     418                context.lineTo(x, y + this.options.axisTickSize); 
    418419                context.closePath(); 
    419420                context.stroke(); 

  • plotkit/trunk/PlotKit/SVG.js

    r1 r4  
    6666        "axisTickSize": 3, 
    6767        "axisLabelColor": Color.blackColor(), 
     68        "axisLabelFont": "Arial", 
    6869        "axisLabelFontSize": 10, 
    6970        "axisLabelWidth": 50, 
    …… 
    7778    this.element = MochiKit.DOM.getElement(element); 
    7879    this.container = this.element.parentNode; 
    79     this.height = element.getAttribute('height'); 
    80     this.width = element.getAttribute('width'); 
     80    this.height = parseInt(element.getAttribute("height")); 
     81    this.width = parseInt(element.getAttribute("width")); 
     82    this.document = document; 
     83    this.root = this.element; 
     84 
     85    // Adobe SVG Support: 
     86    // - if an exception is thrown, then no Adobe SVG Plugin support. 
     87    try { 
     88        this.document = this.element.getSVGDocument(); 
     89        this.root = isNil(this.document.documentElement) ? this.element : this.document.documentElement; 
     90    } 
     91    catch (e) { 
     92    } 
    8193 
    8294    this.element.style.zIndex = 1; 
    8395 
    8496    if (isNil(this.element)) 
    85         throw "SVGRenderer() - passed canvas is not found"; 
     97        throw "SVGRenderer() - passed SVG object is not found"; 
     98    if (isNil(this.container)) 
     99        throw "SVGRenderer() - No DIV's around the SVG."; 
    86100 
    87101    // internal state 
    …… 
    96110    }; 
    97111 
    98   MochiKit.DOM.updateNodeAttributes(this.container,  
     112    MochiKit.DOM.updateNodeAttributes(this.container,  
    99113    {"style":{ "position": "relative", "width": this.width + "px"}}); 
    100114 
    …… 
    132146        var attrs = new Array(); 
    133147        var color = colorScheme[i%colorCount]; 
     148 
    134149        if (this.options.shouldFill) 
    135150            attrs["fill"] = color.toRGBString(); 
    …… 
    189204        this._tempPointsBuffer += (this.area.w + this.area.x) + ","  +(this.area.h + this.area.y); 
    190205        attrs["points"] = this._tempPointsBuffer; 
    191         var poly = PlotKit.SVGRenderer.POLYGON(attrs); 
    192         this.element.appendChild(poly); 
     206        var elem = this.createSVGElement("polygon", attrs); 
     207        this.root.appendChild(elem); 
    193208    }; 
    194209 
    …… 
    228243            attrs["strokeWidth"] = this.options.strokeWidth; 
    229244        } 
    230         this.element.appendChild(PlotKit.SVGRenderer.CIRCLE(attrs)); 
     245        this.root.appendChild(this.createSVGElement("circle", attrs)); 
    231246        return; 
    232247        } 
    …… 
    265280        attrs["d"] = pathString; 
    266281 
    267         var slice = PlotKit.SVGRenderer.PATH(attrs); 
    268         this.element.appendChild(slice); 
     282        var slice = this.createSVGElement("path", attrs); 
     283        this.root.appendChild(slice); 
    269284    } 
    270285}; 
    …… 
    312327                    var label = DIV(labelStyle, tick[1]); 
    313328                    label.style.top = (y - this.options.axisLabelFontSize) + "px"; 
    314                     label.style.left = (x - this.options.padding.left + 3) + "px"; 
     329                    label.style.left = (x - this.options.padding.left + this.options.axisTickSize) + "px"; 
    315330                    label.style.textAlign = "left"; 
    316331                    label.style.width = (this.options.padding.left - 3) + "px"; 
    …… 
    320335                else { 
    321336                    var attrs = { 
    322                         y: (y - this.options.axisLabelFontSize), 
     337                        y: y + 3, 
    323338                        x: (x - this.options.padding.left + 3), 
    324                         fontFamily: "arial", 
     339                        width: (this.options.padding.left - this.options.axisTickSize) + "px", 
     340                        height: (this.options.axisLabelFontSize + 3) + "px", 
     341                        fontFamily: "Arial", 
    325342                        fontSize: this.options.axisLabelFontSize + "px", 
    326343                        fill: this.options.axisLabelColor.toRGBString() 
    327344                    }; 
    328                     var label = PlotKit.SVGRenderer.TEXT(attrs, tick[1]); 
    329                     this.element.appendChild(label); 
     345                    var label = this.createSVGElement("text", attrs); 
     346                    label.appendChild(this.document.createTextNode(tick[1])); 
     347                    this.root.appendChild(label); 
    330348                } 
    331349            }; 
    …… 
    342360                var x = this.area.x + tick[0] * this.area.w; 
    343361                var y = this.area.y + this.area.h; 
    344                 this._drawLine(x, y, x, y + 3, lineAttrs); 
     362                this._drawLine(x, y, x, y + this.options.axisTickSize, lineAttrs); 
    345363 
    346364                if (this.options.axisLabelUseDiv) { 
    347365                    var label = DIV(labelStyle, tick[1]); 
    348                     label.style.top = (y + 3) + "px"; 
     366                    label.style.top = (y + this.options.axisTickSize) + "px"; 
    349367                    label.style.left = (x - this.options.axisLabelWidth/2) + "px"; 
    350368                    label.style.textAlign = "center"; 
    …… 
    354372                } 
    355373                else { 
    356                      var attrs = { 
    357                          y: (y - this.options.axisLabelFontSize), 
    358                          x: (x - this.options.padding.left + 3), 
    359                          fill: this.options.axisLabelColor.toRGBString() 
    360                      }; 
    361                      var label = PlotKit.SVGRenderer.TEXT(attrs, tick[1]); 
    362                      MochiKit.DOM.appendChildNodes(this.element, label); 
     374                    var attrs = { 
     375                        y: (y + this.options.axisTickSize + this.options.axisLabelFontSize), 
     376                        x: x - 3, 
     377                        width: this.options.axisLabelWidth + "px", 
     378                        height: (this.options.axisLabelFontSize + 3) + "px", 
     379                        fontFamily: "Arial", 
     380                        fontSize: this.options.axisLabelFontSize + "px", 
     381                        fill: this.options.axisLabelColor.toRGBString(), 
     382                        textAnchor: "middle" 
     383                    }; 
     384                    var label = this.createSVGElement("text", attrs); 
     385                    label.appendChild(this.document.createTextNode(tick[1])); 
     386                    this.root.appendChild(label); 
    363387                } 
    364388            }; 
    …… 
    410434                        }; 
    411435 
     436            var svgattrib = {"width": labelWidth + "px", 
     437                             "fontSize": this.options.axisLabelFontSize + "px", 
     438                             "height": (this.options.axisLabelFontSize + 3) + "px" 
     439            }; 
     440 
    412441            if (normalisedAngle <= Math.PI * 0.5) { 
    413442                // text on top and align left 
    414                 attrib["textAlign"] = "left"; 
    415                 attrib["verticalAlign"] = "top"; 
    416                 attrib["left"] = labelx + "px"; 
    417                 attrib["top"] = (labely - this.options.axisLabelFontSize) + "px"; 
     443                MochiKit.Base.update(attrib, { 
     444                    'textAlign': 'left', 'verticalAlign': 'top', 
     445                    'left': labelx + 'px', 
     446                    'top':  (labely - this.options.axisLabelFontSize) + "px" 
     447                }); 
     448                MochiKit.Base.update(svgattrib, { 
     449                    "x": labelx, 
     450                    "y" :(labely - this.options.axisLabelFontSize), 
     451                    "textAnchor": "left" 
     452                        }); 
    418453            } 
    419454            else if ((normalisedAngle > Math.PI * 0.5) && (normalisedAngle <= Math.PI)) { 
    420455                // text on bottom and align left 
    421                 attrib["textAlign"] = "left"; 
    422                 attrib["verticalAlign"] = "bottom";      
    423                 attrib["left"] = labelx + "px"; 
    424                 attrib["top"] = labely + "px"; 
    425  
     456                MochiKit.Base.update(attrib, { 
     457                    'textAlign': 'left', 'verticalAlign': 'bottom', 
     458                    'left': labelx + 'px', 
     459                    'top':  labely + "px" 
     460                }); 
     461                MochiKit.Base.update(svgattrib, { 
     462                    'textAnchor': 'left', 
     463                    'x': labelx, 
     464                    'y':  labely 
     465                }); 
    426466            } 
    427467            else if ((normalisedAngle > Math.PI) && (normalisedAngle <= Math.PI*1.5)) { 
    428468                // text on bottom and align right 
    429                 attrib["textAlign"] = "right"; 
    430                 attrib["verticalAlign"] = "bottom";  
    431                 attrib["left"] = (labelx  - labelWidth) + "px"; 
    432                 attrib["top"] = labely + "px"; 
     469                MochiKit.Base.update(attrib, { 
     470                    'textAlign': 'right', 'verticalAlign': 'bottom', 
     471                    'left': labelx + 'px', 
     472                    'top':  labely + "px" 
     473                }); 
     474                MochiKit.Base.update(svgattrib, { 
     475                    'textAnchor': 'right', 
     476                    'x': labelx - labelWidth, 
     477                    'y':  labely 
     478                }); 
    433479            } 
    434480            else { 
    435481                // text on top and align right 
    436                 attrib["textAlign"] = "left"; 
    437                 attrib["verticalAlign"] = "bottom";   
    438                 attrib["left"] = (labelx  - labelWidth) + "px"; 
    439                 attrib["top"] = (labely - this.options.axisLabelFontSize) + "px"; 
     482                MochiKit.Base.update(attrib, { 
     483                    'textAlign': 'left', 'verticalAlign': 'bottom', 
     484                    'left': labelx + 'px', 
     485                    'top':  labely + "px" 
     486                }); 
     487                MochiKit.Base.update(svgattrib, { 
     488                    'textAnchor': 'left', 
     489                    'x': labelx - labelWidth, 
     490                    'y':  labely - this.options.axisLabelFontSize 
     491                }); 
    440492            } 
    441      
    442             var label = DIV({'style': attrib}, this.layout.xticks[i][1]); 
    443             this.xlabels.push(label); 
    444             MochiKit.DOM.appendChildNodes(this.container, label); 
     493 
     494            if (this.options.axisLabelUseDiv) { 
     495                var label = DIV({'style': attrib}, this.layout.xticks[i][1]); 
     496                this.xlabels.push(label); 
     497                MochiKit.DOM.appendChildNodes(this.container, label); 
     498            } 
     499            else { 
     500                var label = this.createSVGElement("text", svgattrib); 
     501                label.appendChild(this.document.createTextNode(this.layout.xticks[i][1])) 
     502                this.root.appendChild(label); 
     503            } 
    445504      } 
    446505         
    …… 
    460519        MochiKit.Base.update(attrs, moreattrs); 
    461520 
    462     var elem = PlotKit.SVGRenderer.RECT(attrs); 
    463     this.element.appendChild(elem); 
     521    var elem = this.createSVGElement("rect", attrs); 
     522    this.root.appendChild(elem); 
    464523}; 
    465524 
    …… 
    469528        MochiKit.Base.update(attrs, moreattrs); 
    470529 
    471     var elem = PlotKit.SVGRenderer.LINE(attrs); 
    472     this.element.appendChild(elem); 
     530    var elem = this.createSVGElement("line", attrs); 
     531    this.root.appendChild(elem); 
    473532} 
    474533 
    …… 
    490549}; 
    491550 
    492 PlotKit.SVGRenderer.createSVGDOM = function(name, attrs/*, nodes.. */) { 
    493     var elem = document.createElementNS("http://www.w3.org/2000/svg", name); 
     551PlotKit.SVGRenderer.prototype.createSVGElement = function(name, attrs) { 
     552    var isNil = MochiKit.Base.isUndefinedOrNull; 
     553    var elem; 
     554    var doc = isNil(this.document) ? document : this.document; 
     555 
     556    try { 
     557        elem = doc.createElementNS("http://www.w3.org/2000/svg", name); 
     558    } 
     559    catch (e) { 
     560        elem = doc.createElement(name); 
     561        elem.setAttribute("xmlns", "http://www.w3.org/2000/svg"); 
     562    } 
     563 
    494564    if (attrs) 
    495565        MochiKit.DOM.updateNodeAttributes(elem, attrs); 
    496566 
    497     if (arguments.length <= 3) { 
    498         return elem; 
     567    // TODO: we don't completely emulate the MochiKit.DOM.createElement 
     568    //       as we don't care about nodes contained. We really should though. 
     569 
     570    return elem; 
     571 
     572}; 
     573 
     574PlotKit.SVGRenderer.SVGNS = 'http://www.w3.org/2000/svg'; 
     575 
     576PlotKit.SVGRenderer.SVG = function(attrs) { 
     577    // we have to do things differently for IE+AdobeSVG. 
     578    // My guess this works (via trial and error) is that we need to 
     579    // have an SVG object in order to use SVGDocument.createElementNS 
     580    // but IE doesn't allow us to that. 
     581 
     582    var ie = navigator.appVersion.match(/MSIE (\d\.\d)/); 
     583    var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1); 
     584    if (ie && (ie[1] >= 6) && (!opera)) { 
     585        var width = attrs["width"] ? attrs["width"] : "100"; 
     586        var height = attrs["height"] ? attrs["height"] : "100"; 
     587        var eid = attrs["id"] ? attrs["id"] : "notunique"; 
     588         
     589        var html = '<svg:svg width="' + width + '" height="' + height + '" '; 
     590        html += 'id="' + eid + '" version="1.1" baseProfile="full">'; 
     591 
     592        var canvas = document.createElement(html); 
     593 
     594        // create embedded SVG inside SVG. 
     595        var group = canvas.getSVGDocument().createElementNS(PlotKit.SVGRenderer.SVGNS, "svg"); 
     596        group.setAttribute("width", width); 
     597        group.setAttribute("height", height); 
     598        canvas.getSVGDocument().appendChild(group); 
     599 
     600        return canvas; 
    499601    } 
    500602    else { 
    501         var args = MochiKit.Base.extend([elem], arguments, 2); 
    502         return MochiKit.DOM.appendChildNodes.apply(this, args); 
    503     } 
    504 }; 
    505  
    506 PlotKit.SVGRenderer.createSVGDOMFunc = function(/* tag, attrs, nodes */) { 
    507     return MochiKit.Base.partial.apply(this, MochiKit.Base.extend([PlotKit.SVGRenderer.createSVGDOM], arguments)); 
    508 }; 
    509  
    510 PlotKit.SVGRenderer.RECT = PlotKit.SVGRenderer.createSVGDOMFunc("rect"); 
    511 PlotKit.SVGRenderer.POLYGON = PlotKit.SVGRenderer.createSVGDOMFunc("polygon"); 
    512 PlotKit.SVGRenderer.PATH = PlotKit.SVGRenderer.createSVGDOMFunc("path"); 
    513 PlotKit.SVGRenderer.SVG = PlotKit.SVGRenderer.createSVGDOMFunc("svg"); 
    514 PlotKit.SVGRenderer.LINE = PlotKit.SVGRenderer.createSVGDOMFunc("line"); 
    515 PlotKit.SVGRenderer.CIRCLE = PlotKit.SVGRenderer.createSVGDOMFunc("circle"); 
    516 PlotKit.SVGRenderer.TEXT = PlotKit.SVGRenderer.createSVGDOMFunc("text"); 
     603        return PlotKit.SVGRenderer.prototype.createSVGElement("svg", attrs); 
     604    } 
     605}; 
     606                                                             
     607 
     608//PlotKit.SVGRenderer.SVG = MochiKit.Base.partial(PlotKit.SVGRenderer.prototype.createSVGElement, "svg"); 
    517609 
    518610/* 

  • plotkit/trunk/PlotKit/SweetCanvas.js

    r1 r4  
    150150        context.save(); 
    151151        context.fillStyle = Color.blackColor().colorWithAlpha(0.2).toRGBString(); 
    152         context.translate(0, -2); 
     152        context.translate(-1, -2); 
    153153        bind(makePath, this)();         
    154154        context.fill(); 

  • plotkit/trunk/tests/svg.html

    r3 r4  
    33<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    44<head> 
    5         <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object> 
    6    <?import namespace="svg" implementation="#AdobeSVG"?> 
    75   <title>PlotKit: SVGRenderer Test</title> 
    86   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    …… 
    2725    <div id="body"> 
    2826    <h2>SVG Renderer Tests</h2> 
    29      
     27 
     28    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object> 
     29    <?import namespace="svg" implementation="#AdobeSVG"?> 
     30 
    3031    <div id="tests"></div> 
    3132     

  • plotkit/trunk/tests/svg.js

    r1 r4  
    77    "padding": {top: 5, bottom: 20, left: 40, right: 10}, 
    88    "backgroundColor": Color.whiteColor(), 
    9     "strokeColor": null 
     9    "strokeColor": null, 
     10    "axisLabelUseDiv": false 
    1011}; 
    1112 
    …… 
    7778     
    7879    return DIV({"class": "unit"}, [table, canvas, ending]); 
     80    return DIV({"class": "unit"}, [table, ending]); 
    7981} 
    8082 
    …… 
    9698    tests.appendChild(H2(null, "Simple Tests")); 
    9799 
    98     tests.appendChild(generateUnitTest(1, genericTest, simpleData1, 
    99     "bar", "")); 
     100    tests.appendChild(generateUnitTest(1, genericTest, simpleData1, "bar", "")); 
    100101 
    101102    tests.appendChild(generateUnitTest(2, genericTest, simpleData1,  
    …… 
    141142     tests.appendChild(generateUnitTest(16, genericTest, ninety, 
    142143     "pie", "")); 
     144 
    143145} 
    144146