OpenLayers OpenLayers

Ticket #1126: 1126-r7667-A0.patch

File 1126-r7667-A0.patch, 10.2 kB (added by ahocevar, 1 month ago)

new patch with the improvements suggested by crschmidt, except for strokeDashStyle. Since the property is called dashstyle (all lowercase) in VML, I would prefer to keep it like it is.

  • tests/Renderer/VML.html

    old new  
    370370        t.ok(r.symbolCache["-square"], "Symbol has been cached correctly."); 
    371371         
    372372    } 
     373     
     374    function test_vml_dashstyle(t) { 
     375        if (!OpenLayers.Renderer.VML.prototype.supported()) { 
     376            t.plan(0); 
     377            return; 
     378        } 
    373379         
     380        t.plan(5); 
     381         
     382        var r = new OpenLayers.Renderer.VML(document.body); 
     383         
     384        t.eq(r.dashStyle({strokeDashstyle: "1 4"}), "dot", "dot pattern recognized correctly."); 
     385        t.eq(r.dashStyle({strokeDashstyle: "4 4"}), "dash", "dash pattern recognized correctly."); 
     386        t.eq(r.dashStyle({strokeDashstyle: "8 4"}), "longdash", "longdash pattern recognized correctly."); 
     387        t.eq(r.dashStyle({strokeDashstyle: "4 4 1 4"}), "dashdot", "dashdot pattern recognized correctly."); 
     388        t.eq(r.dashStyle({strokeDashstyle: "8 4 1 4"}), "longdashdot", "longdashdot pattern recognized correctly."); 
     389    } 
     390         
    374391  </script> 
    375392</head> 
    376393<body> 

  • tests/Renderer/SVG.html

    old new  
    407407        t.ok(r.symbolSize["-square"], "Symbol size cached correctly."); 
    408408    } 
    409409         
     410    function test_svg_dashstyle(t) { 
     411        if (!OpenLayers.Renderer.SVG.prototype.supported()) { 
     412            t.plan(0); 
     413            return; 
     414        } 
     415 
     416        t.plan(5); 
     417         
     418        var r = new OpenLayers.Renderer.SVG(document.body); 
     419 
     420        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dot"}, 1), "1,4", "dot dasharray created correctly"); 
     421        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dash"}, 1), "4,4", "dash dasharray created correctly"); 
     422        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdash"}, 1), "8,4", "longdash dasharray created correctly"); 
     423        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dashdot"}, 1), "4,4,1,4", "dashdot dasharray created correctly"); 
     424        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdashdot"}, 1), "8,4,1,4", "dashdot dasharray created correctly"); 
     425    } 
     426 
    410427  </script> 
    411428</head> 
    412429<body> 

  • lib/OpenLayers/Format/SLD/v1.js

    old new  
    5252        strokeColor: "#000000", 
    5353        strokeOpacity: 1, 
    5454        strokeWidth: 1, 
     55        strokeDashstyle: "solid", 
    5556        pointRadius: 3, 
    5657        graphicName: "square" 
    5758    }, 
    …… 
    293294        "stroke-opacity": "strokeOpacity", 
    294295        "stroke-width": "strokeWidth", 
    295296        "stroke-linecap": "strokeLinecap", 
     297        "stroke-dasharray": "strokeDashstyle", 
    296298        "fill": "fillColor", 
    297299        "fill-opacity": "fillOpacity", 
    298300        "font-family": "fontFamily", 

  • lib/OpenLayers/Feature/Vector.js

    old new  
    308308 *  - strokeColor: "#ee9900", 
    309309 *  - strokeOpacity: 1, 
    310310 *  - strokeWidth: 1, 
    311  *  - strokeLinecap: "round", 
     311 *  - strokeLinecap: "round",  [butt | round | square] 
     312 *  - strokeDashstyle: "solid", [dot | dash | dashdot | longdash | longdashdot | solid] 
    312313 *  - hoverStrokeColor: "red", 
    313314 *  - hoverStrokeOpacity: 1, 
    314315 *  - hoverStrokeWidth: 0.2, 
    …… 
    339340        strokeOpacity: 1, 
    340341        strokeWidth: 1, 
    341342        strokeLinecap: "round", 
     343        strokeDashstyle: "solid", 
    342344        hoverStrokeColor: "red", 
    343345        hoverStrokeOpacity: 1, 
    344346        hoverStrokeWidth: 0.2, 
    …… 
    357359        strokeOpacity: 1, 
    358360        strokeWidth: 2, 
    359361        strokeLinecap: "round", 
     362        strokeDashstyle: "solid", 
    360363        hoverStrokeColor: "red", 
    361364        hoverStrokeOpacity: 1, 
    362365        hoverStrokeWidth: 0.2, 
    …… 
    375378        strokeOpacity: 1, 
    376379        strokeLinecap: "round", 
    377380        strokeWidth: 4, 
     381        strokeDashstyle: "solid", 
    378382        hoverStrokeColor: "red", 
    379383        hoverStrokeOpacity: 1, 
    380384        hoverStrokeWidth: 0.2, 

  • lib/OpenLayers/Renderer/Elements.js

    old new  
    347347    minimumSymbolizer: { 
    348348        strokeLinecap: "round", 
    349349        strokeOpacity: 1, 
     350        strokeDashstyle: "solid", 
    350351        fillOpacity: 1, 
    351352        pointRadius: 0 
    352353    }, 

  • lib/OpenLayers/Renderer/VML.js

    old new  
    286286            } 
    287287            stroke.setAttribute("opacity", style.strokeOpacity); 
    288288            stroke.setAttribute("endcap", !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap); 
     289            stroke.setAttribute("dashstyle", this.dashStyle(style)); 
    289290        } 
    290291         
    291292        if (style.cursor != "inherit" && style.cursor != null) { 
    …… 
    455456            node.coordsize = scaledBox.getWidth()+ " " + scaledBox.getHeight(); 
    456457        } 
    457458    }, 
     459     
     460    /**  
     461     * Method: dashStyle 
     462     *  
     463     * Parameters: 
     464     * style - {Object} 
     465     *  
     466     * Returns: 
     467     * {String} A VML compliant 'stroke-dasharray' value 
     468     */ 
     469    dashStyle: function(style) { 
     470        var dash = style.strokeDashstyle; 
     471        switch (dash) { 
     472            case 'solid': 
     473            case 'dot': 
     474            case 'dash': 
     475            case 'dashdot': 
     476            case 'longdash': 
     477            case 'longdashdot': 
     478                return dash; 
     479            default: 
     480                // very basic guessing of dash style patterns 
     481                var parts = dash.split(/[ ,]/); 
     482                if (parts.length == 2) { 
     483                    if (1*parts[0] >= 2*parts[1]) { 
     484                        return "longdash"; 
     485                    } 
     486                    return (parts[0] == 1 || parts[1] == 1) ? "dot" : "dash"; 
     487                } else if (parts.length == 4) { 
     488                    return (1*parts[0] >= 2*parts[1]) ? "longdashdot" : 
     489                        "dashdot" 
     490                } 
     491                return "solid"; 
     492        } 
     493    }, 
    458494 
    459495    /** 
    460496     * Method: createNode 

  • lib/OpenLayers/Renderer/SVG.js

    old new  
    273273            node.setAttributeNS(null, "stroke-opacity", style.strokeOpacity); 
    274274            node.setAttributeNS(null, "stroke-width", style.strokeWidth * widthFactor); 
    275275            node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap); 
     276            // Hard-coded linejoin for now, to make it look the same as in VML. 
     277            // There is no strokeLinejoin property yet for symbolizers. 
     278            node.setAttributeNS(null, "stroke-linejoin", "round"); 
     279            node.setAttributeNS(null, "stroke-dasharray", this.dashStyle(style, 
     280                widthFactor)); 
    276281        } else { 
    277282            node.setAttributeNS(null, "stroke", "none"); 
    278283        } 
    …… 
    288293    }, 
    289294 
    290295    /**  
     296     * Method: dashStyle 
     297     *  
     298     * Parameters: 
     299     * style - {Object} 
     300     * widthFactor - {Number} 
     301     *  
     302     * Returns: 
     303     * {String} A SVG compliant 'stroke-dasharray' value 
     304     */ 
     305    dashStyle: function(style, widthFactor) { 
     306        var w = style.strokeWidth * widthFactor; 
     307 
     308        switch (style.strokeDashstyle) { 
     309            case 'solid': 
     310                return 'none'; 
     311            case 'dot': 
     312                return [1, 4 * w].join(); 
     313            case 'dash': 
     314                return [4 * w, 4 * w].join(); 
     315            case 'dashdot': 
     316                return [4 * w, 4 * w, 1, 4 * w].join(); 
     317            case 'longdash': 
     318                return [8 * w, 4 * w].join(); 
     319            case 'longdashdot': 
     320                return [8 * w, 4 * w, 1, 4 * w].join(); 
     321            default: 
     322                return style.strokeDashstyle.replace(/ /g, ","); 
     323        } 
     324    }, 
     325     
     326    /**  
    291327     * Method: createNode 
    292328     *  
    293329     * Parameters: 
    …… 
    619655        } 
    620656         
    621657        node.setAttributeNS(null, "points", points); 
    622         // Hard-coded linejoin for now, to make it look the same as in VML. 
    623         // There is no strokeLinejoin property yet for symbolizers. 
    624         node.setAttributeNS(null, "stroke-linejoin", "round"); 
    625658         
    626659        var width = symbolExtent.getWidth(); 
    627660        var height = symbolExtent.getHeight(); 

  • examples/vector-features.html

    old new  
    3838            var style_green = { 
    3939                strokeColor: "#00FF00", 
    4040                strokeWidth: 3, 
     41                strokeDashstyle: "dashdot", 
    4142                pointRadius: 6, 
    4243                pointerEvents: "visiblePainted" 
    4344            }; 
    …… 
    7475            // create a line feature from a list of points 
    7576            var pointList = []; 
    7677            var newPoint = point; 
    77             for(var p=0; p<5; ++p) { 
     78            for(var p=0; p<15; ++p) { 
    7879                newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1), 
    7980                                                         newPoint.y + Math.random(1)); 
    8081                pointList.push(newPoint); 

  • examples/tasmania/sld-tasmania.xml

    old new  
    581581              <sld:CssParameter name="stroke-width"> 
    582582                <ogc:Literal>1</ogc:Literal> 
    583583              </sld:CssParameter> 
     584              <sld:CssParameter name="stroke-dasharray"> 
     585                <ogc:Literal>3 5 1 5</ogc:Literal> 
     586              </sld:CssParameter> 
    584587            </sld:Stroke> 
    585588          </sld:PolygonSymbolizer> 
    586589        </sld:Rule>