Added fix to jQuery.attr() function to make it work with SVG elements, started work on marker color changing

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1355 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.js

@@ -42,7 +42,6 @@ function svg_edit_setup() {
 		default_img_url = "images/logo.png",
 		workarea = $("#workarea");
 	
-	
 	// Store and retrieve preferences
 	$.pref = function(key, val) {
 		if(val) curPrefs[key] = val;

editor/svgcanvas.js

@@ -20,6 +20,68 @@ if(window.opera) {
 	window.console.dir = function(str) {};
 }
 
+(function() {
+
+	// This fixes $(...).attr() to work as expected with SVG elements.
+	// Does not currently use *AttributeNS() since we rarely need that.
+	
+	// See http://api.jquery.com/attr/ for basic documentation of .attr()
+	
+	// Additional functionality: 
+	// - When getting attributes, a string that's a number is return as type number.
+	// - If an array is supplied as first parameter, multiple values are returned
+	// as an object with values for each given attributes
+	
+	var proxied = jQuery.fn.attr, svgns = "http://www.w3.org/2000/svg";
+	jQuery.fn.attr = function(key, value) {
+		var len = this.length;
+		if(!len) return this;
+		for(var i=0; i<len; i++) {
+			var elem = this[i];
+			// set/get SVG attribute
+			if(elem.namespaceURI === svgns) {
+				// Setting attribute
+				if(value !== undefined) {
+					elem.setAttribute(key, value);
+				} else if($.isArray(key)) {
+					// Getting attributes from array
+					var j = key.length, obj = {};
+
+					while(j--) {
+						var aname = key[j];
+						var attr = elem.getAttribute(aname);
+						// This returns a number when appropriate
+						if(attr || attr === "0") {
+							attr = isNaN(attr)?attr:attr-0;
+						}
+						obj[aname] = attr;
+					}
+					return obj;
+				
+				} else if(typeof key === "object") {
+					// Setting attributes form object
+					for(v in key) {
+						elem.setAttribute(v, key[v]);
+					}
+				// Getting attribute
+				} else {
+					var attr = elem.getAttribute(key);
+					if(attr || attr === "0") {
+						attr = isNaN(attr)?attr:attr-0;
+					}
+
+					return attr;
+				}
+			} else {
+				return proxied.apply(this, arguments);
+			}
+		}
+		return this;
+	};
+
+}());
+
+
 function SvgCanvas(container)
 {
 var isOpera = !!window.opera,
@@ -882,25 +944,26 @@ function BatchCommand(text) {
 		idprefix = "svg_",
 		svgdoc  = container.ownerDocument,
 		svgroot = svgdoc.createElementNS(svgns, "svg");
-	svgroot.setAttribute("width", 640);
+
-	svgroot.setAttribute("height", 480);
+	$(svgroot).attr({
-	svgroot.setAttribute("id", "svgroot");
+		width: 640,
-	svgroot.setAttribute("xmlns", svgns);
+		height: 480,
-	svgroot.setAttribute("xmlns:xlink", xlinkns);
+		id: "svgroot",
-	container.appendChild(svgroot);
+		xmlns: svgns,
+		"xmlns:xlink": xlinkns
+	}).appendTo(container);
+	
 	var svgcontent = svgdoc.createElementNS(svgns, "svg");
-	svgcontent.setAttribute('id', 'svgcontent');
+	$(svgcontent).attr({
-// 	svgcontent.setAttribute('viewBox', '0 0 640 480');
+		id: 'svgcontent',
-	svgcontent.setAttribute('width', '640');
+		width: 640,
-	svgcontent.setAttribute('height', '480');
+		height: 480,
-	svgcontent.setAttribute('x', '640');
+		x: 640,
-	svgcontent.setAttribute('y', '480');
+		y: 480,
-	svgcontent.setAttribute('overflow', 'visible');
+		overflow: 'visible',
-	
+		xmlns: svgns,
-	
+		"xmlns:xlink": xlinkns
-	svgcontent.setAttribute("xmlns", svgns);
+	}).appendTo(svgroot);
-	svgcontent.setAttribute("xmlns:xlink", xlinkns);
-	svgroot.appendChild(svgcontent);
 
 	(function() {
 		// TODO: make this string optional and set by the client
@@ -6025,9 +6088,10 @@ function BatchCommand(text) {
 		}
 
 		if (elems.length > 0) {
-			if (!preventUndo) 
+			if (!preventUndo) {
 				this.changeSelectedAttribute("stroke", val, elems);
-			else 
+				call("changed", elems);
+			} else 
 				this.changeSelectedAttributeNoUndo("stroke", val, elems);
 		}
 	};
@@ -6053,9 +6117,10 @@ function BatchCommand(text) {
 			}
 		}
 		if (elems.length > 0) {
-			if (!preventUndo) 
+			if (!preventUndo) {
 				this.changeSelectedAttribute("fill", val, elems);
-			else
+				call("changed", elems);
+			} else
 				this.changeSelectedAttributeNoUndo("fill", val, elems);
 		}
 	};

extensions/ext-arrows.js

@@ -133,6 +133,32 @@ $(function() {
 			S.call("changed", selElems);
 		}
 		
+		function colorChanged(elem) {
+			var color = elem.getAttribute('stroke');
+			
+			var markers = ['start','mid','end'];
+			
+			$.each(markers, function(i, type) {
+				var href = elem.getAttribute('marker-'+type);
+				if(href) {
+					var marker_id = href.match(/\(\#(.*)\)/)[1];
+					var marker = S.getElem(marker_id);
+					var shape = marker.firstChild;
+					var cur_color = shape.getAttribute('fill');
+					console.log(cur_color, color);
+					
+					
+					// If color matches, ignore
+					// If color doesn't match, look for marker with shape that does match color
+					// - Found? Use its URL!
+					// - Not found? Create new one (based on this one) but with new fill
+					// (don't remove old marker: removeUnused* can take care of that)
+				}
+
+			});
+			
+		}
+		
 		return {
 			name: "Arrows",
 			context_tools: [{
@@ -181,6 +207,21 @@ $(function() {
 						showPanel(false);
 					}
 				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+				if(elem && (
+					elem.getAttribute("marker-start") ||
+					elem.getAttribute("marker-mid") ||
+					elem.getAttribute("marker-end")
+				)) {
+	// 								var start = elem.getAttribute("marker-start");
+	// 								var mid = elem.getAttribute("marker-mid");
+	// 								var end = elem.getAttribute("marker-end");
+					// Has marker, so see if it should match color
+					colorChanged(elem);
+				}
+				
 			}
 		};
 	});