[OpenLayers-Commits] r10976 - in trunk/openlayers: examples
lib/OpenLayers/Renderer tests/Renderer
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Dec 29 07:06:47 EST 2010
Author: ahocevar
Date: 2010-12-29 04:06:46 -0800 (Wed, 29 Dec 2010)
New Revision: 10976
Modified:
trunk/openlayers/examples/graphic-name.html
trunk/openlayers/lib/OpenLayers/Renderer/SVG.js
trunk/openlayers/tests/Renderer/SVG.html
Log:
Always copy graphicName symbols, because there were too many issues with use/defs. Ctrl-Click and Shift-Click now works as expected on graphicName symbols. p=marcjansen, r=me (closes #2985)
Modified: trunk/openlayers/examples/graphic-name.html
===================================================================
--- trunk/openlayers/examples/graphic-name.html 2010-12-17 23:46:22 UTC (rev 10975)
+++ trunk/openlayers/examples/graphic-name.html 2010-12-29 12:06:46 UTC (rev 10976)
@@ -1,91 +1,39 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>OpenLayers Graphic Names</title>
- <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
- <link rel="stylesheet" href="style.css" type="text/css" />
- <script src="../lib/OpenLayers.js"></script>
- <script type="text/javascript">
- // user custom graphicname
-
- OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
- OpenLayers.Renderer.symbol.rectangle = [0,0, 4,0, 4,10, 0,10, 0,0];
-
- var map;
-
- function init() {
- map = new OpenLayers.Map('map');
-
- // list of well-known graphic names
- var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"];
-
- // Create one feature for each well known graphic.
- // Give features a type attribute with the graphic name.
- var num = graphics.length;
- var slot = map.maxExtent.getWidth() / num;
- var features = Array(num);
- for(var i=0; i<graphics.length; ++i) {
- lon = map.maxExtent.left + (i * slot) + (slot / 2);
- features[i] = new OpenLayers.Feature.Vector(
- new OpenLayers.Geometry.Point(
- map.maxExtent.left + (i * slot) + (slot / 2), 0
- ), {
- type: graphics[i]
- }
- );
- }
-
- // Create a style map for painting the features.
- // The graphicName property of the symbolizer is evaluated using
- // the type attribute on each feature (set above).
- var styles = new OpenLayers.StyleMap({
- "default": {
- graphicName: "${type}",
- pointRadius: 10,
- strokeColor: "fuchsia",
- strokeWidth: 2,
- fillColor: "lime",
- fillOpacity: 0.6
- },
- "select": {
- pointRadius: 20,
- fillOpacity: 1,
- rotation: 45
- }
- });
-
- // Create a vector layer and give it your style map.
- var layer = new OpenLayers.Layer.Vector(
- "Graphics", {styleMap: styles, isBaseLayer: true}
- );
- layer.addFeatures(features);
- map.addLayer(layer);
-
- // Create a select feature control and add it to the map.
- var select = new OpenLayers.Control.SelectFeature(layer, {hover: true});
- map.addControl(select);
- select.activate();
-
- map.setCenter(new OpenLayers.LonLat(0, 0), 0);
- }
- </script>
- </head>
- <body onload="init()">
- <h1 id="title">Named Graphics Example</h1>
-
- <div id="tags">
- vector, named graphic, star, cross, x, square, triangle, circle, style
- </div>
-
- <p id="shortdesc">
- Shows how to use well-known graphic names.
- </p>
-
- <div id="map" class="smallmap"></div>
-
- <div id="docs">
- OpenLayers supports well-known names for a few graphics. You can use
- the names "star", "cross", "x", "square", "triangle", and "circle" as
- the value for the graphicName property of a symbolizer.
- </div>
- </body>
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>OpenLayers Graphic Names</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <script src="../lib/OpenLayers.js" type="text/javascript"></script>
+ <script src="./graphic-name.js" type="text/javascript"></script>
+ </head>
+ <body onload="init();">
+ <h1 id="title">Named Graphics Example</h1>
+ <div id="tags">
+ vector, named graphic, star, cross, x, square, triangle, circle, style
+ </div>
+ <p id="shortdesc">
+ Shows how to use well-known graphic names.
+ </p>
+ <div id="map" class="smallmap">
+ </div>
+ <div id="docs">
+ <p>
+ OpenLayers supports well-known names for a few graphics. You
+ can use the names "star", "cross",
+ "x", "square", "triangle", and
+ "circle" as value for the graphicName property of a
+ symbolizer.
+ </p>
+ <p>
+ The named symbols "lightning", "rectangle"
+ and "church" are user defined.
+ </p>
+ <p>
+ See <a href="./graphic-name.js">graphic-name.js</a>
+ for the source code of this example.
+ </p>
+ </div>
+ </body>
+</html>
Modified: trunk/openlayers/lib/OpenLayers/Renderer/SVG.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Renderer/SVG.js 2010-12-17 23:46:22 UTC (rev 10975)
+++ trunk/openlayers/lib/OpenLayers/Renderer/SVG.js 2010-12-29 12:06:46 UTC (rev 10976)
@@ -50,14 +50,6 @@
symbolMetrics: null,
/**
- * Property: supportUse
- * {Boolean} true if defs/use is supported - known to not work as expected
- * at least in some applewebkit/5* builds.
- * See https://bugs.webkit.org/show_bug.cgi?id=33322
- */
- supportUse: null,
-
- /**
* Constructor: OpenLayers.Renderer.SVG
*
* Parameters:
@@ -70,7 +62,6 @@
OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
arguments);
this.translationParameters = {x: 0, y: 0};
- this.supportUse = (navigator.userAgent.toLowerCase().indexOf("applewebkit/5") == -1);
this.symbolMetrics = {};
},
@@ -215,7 +206,7 @@
if (style.externalGraphic) {
nodeType = "image";
} else if (this.isComplexSymbol(style.graphicName)) {
- nodeType = this.supportUse === false ? "svg" : "use";
+ nodeType = "svg";
} else {
nodeType = "circle";
}
@@ -306,17 +297,17 @@
parent.removeChild(node);
}
- if(this.supportUse === false) {
- // workaround for webkit versions that cannot do defs/use
- // (see https://bugs.webkit.org/show_bug.cgi?id=33322):
- // copy the symbol instead of referencing it
- var src = document.getElementById(id);
- node.firstChild && node.removeChild(node.firstChild);
- node.appendChild(src.firstChild.cloneNode(true));
- node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox"));
- } else {
- node.setAttributeNS(this.xlinkns, "href", "#" + id);
- }
+ // The more appropriate way to implement this would be use/defs,
+ // but due to various issues in several browsers, it is safer to
+ // copy the symbols instead of referencing them.
+ // See e.g. ticket http://trac.osgeo.org/openlayers/ticket/2985
+ // and this email thread
+ // http://osgeo-org.1803224.n2.nabble.com/Select-Control-Ctrl-click-on-Feature-with-a-graphicName-opens-new-browser-window-tc5846039.html
+ var src = document.getElementById(id);
+ node.firstChild && node.removeChild(node.firstChild);
+ node.appendChild(src.firstChild.cloneNode(true));
+ node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox"));
+
node.setAttributeNS(null, "width", size);
node.setAttributeNS(null, "height", size);
node.setAttributeNS(null, "x", pos.x - offset);
@@ -334,19 +325,15 @@
}
var rotation = style.rotation;
+
if ((rotation !== undefined || node._rotation !== undefined) && pos) {
node._rotation = rotation;
rotation |= 0;
- if(node.nodeName !== "svg") {
- node.setAttributeNS(null, "transform",
- "rotate(" + rotation + " " + pos.x + " " +
- pos.y + ")");
- } else {
- var metrics = this.symbolMetrics[id];
- node.firstChild.setAttributeNS(null, "transform",
- "rotate(" + style.rotation + " " + metrics[1] +
- " " + metrics[2] + ")");
- }
+ var metrics = this.symbolMetrics[id];
+ node.firstChild.setAttributeNS(null, "transform", "rotate("
+ + rotation + " "
+ + metrics[1] + " "
+ + metrics[2] + ")");
}
}
@@ -951,7 +938,7 @@
*/
getFeatureIdFromEvent: function(evt) {
var featureId = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent.apply(this, arguments);
- if(this.supportUse === false && !featureId) {
+ if(!featureId) {
var target = evt.target;
featureId = target.parentNode && target != this.rendererRoot &&
target.parentNode._featureId;
Modified: trunk/openlayers/tests/Renderer/SVG.html
===================================================================
--- trunk/openlayers/tests/Renderer/SVG.html 2010-12-17 23:46:22 UTC (rev 10975)
+++ trunk/openlayers/tests/Renderer/SVG.html 2010-12-29 12:06:46 UTC (rev 10976)
@@ -378,23 +378,7 @@
var string = r.getShortString(point);
t.eq(string, "2,-4", "returned string is correct");
}
-
- function test_svg_getnodetype(t) {
- if (!OpenLayers.Renderer.SVG.prototype.supported()) {
- t.plan(0);
- return;
- }
-
- t.plan(1);
- var r = new OpenLayers.Renderer.SVG(document.body);
-
- var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
- var s = {graphicName: "square"};
-
- t.eq(r.getNodeType(g, s), r.supportUse ? "use" : "svg", "Correct node type for well known symbols");
- }
-
function test_svg_importsymbol(t) {
if (!OpenLayers.Renderer.SVG.prototype.supported()) {
t.plan(0);
More information about the Commits
mailing list