Radial Gradients

Sync with latest SVG-Edit, which 
supports radial gradients.

public/svg-edit/editor/jgraduate/css/jgraduate.css

@@ -26,7 +26,7 @@ h2.jGraduate_Title {
 	padding: 10px;
 }
 
-li.jGraduate_tab_color, li.jGraduate_tab_lingrad {
+.jGraduate_tabs li {
 	background-color: #ccc;
 	display: inline;
 	border: solid 1px grey;
@@ -55,6 +55,14 @@ li.jGraduate_tab_current {
 	overflow: auto;
 }
 
+.jGraduate_rgPick {	
+	display: none;
+	border: outset 1px #666;
+	padding: 10px 7px 5px 5px;
+	overflow: auto;
+/*	position: relative;*/
+}
+
 .jGraduate_tabs {
 	position: relative;
 	background-color: #EFEFEF;
@@ -90,7 +98,7 @@ div.jGraduate_Opacity {
 	cursor: ew-resize;
 }
 
-div.jGraduate_OpacityField {
+div.lg_jGraduate_OpacityField {
 	position: absolute;
 	bottom: 25px;
 	left: 292px;
@@ -107,6 +115,41 @@ div.jGraduate_StopSection {
 	text-align: center;
 }
 
+div.jGraduate_RadiusField {
+	
+	text-align: center;
+	float: left;
+}
+
+div.jGraduate_RadiusField input {
+	margin-top: 10px;
+}
+
+.jGraduate_RadiusField .jGraduate_Form_Section {
+	width: 250px;
+	padding: 2px;
+	height: 80px;
+	overflow: visible;
+}
+
+.jGraduate_Radius {
+	border:1px solid #BBB;
+	cursor:ew-resize;
+	height:20px;
+	margin-top:14px;
+	position: relative;
+}
+
+
+.jGraduate_RadiusArrows {
+	top: 0;
+	left: 0;
+	position: absolute;
+	margin-top: -10px;
+	margin-left: 250.5px;
+}
+
+
 div.jGraduate_OkCancel {
 	float: left;
 	width: 113px;
@@ -173,4 +216,51 @@ div.jGraduate_stopPicker {
 	position: absolute;
 	display: none;
 	background: #E8E8E8;
+}
+
+
+.jGraduate_rgPick {
+	width: 530px;
+}
+
+.jGraduate_rgPick div.jGraduate_Form {
+	width: 270px;
+	position: absolute;
+	left: 284px;
+	width: 266px;
+	top: 130px;
+	margin: -3px 3px 0px 4px;
+}
+
+.jGraduate_Colorblocks {
+	display: table;
+	border-spacing: 0 5px;
+}
+
+.jGraduate_colorblock {
+	display: table-row;
+}
+
+.jGraduate_Colorblocks .jGraduate_colorblock > * {
+	display: table-cell;
+	vertical-align: middle;
+	margin: 0;
+	float: none;
+}
+
+.jGraduate_rgPick div.jGraduate_StopSection {
+	float: left;
+	width: 133px;
+	margin: 0;
+}
+
+.jGraduate_rgPick .jGraduate_OkCancel {
+	position: absolute;
+	right: 0;
+}
+
+.rg_jGraduate_OpacityField {
+	position: absolute;
+	left: 288px;
+	bottom: 24px;
 }

public/svg-edit/editor/svg-editor.html

@@ -6,7 +6,7 @@
 <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
 <link rel="icon" type="image/png" href="images/logo.png"/>
 <link rel="stylesheet" href="jgraduate/css/jPicker-1.0.12.css" type="text/css"/>
-<link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css" type="text/css"/>
+<link rel="stylesheet" href="jgraduate/css/jgraduate.css" type="text/css"/>
 <link rel="stylesheet" href="svg-editor.css" type="text/css"/>
 <link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
 <!-- Development version of script tags: -->

public/svg-edit/editor/svg-editor.js

@@ -644,10 +644,9 @@ function svg_edit_setup() {
 		// update the editor's fill paint
 		var opts = null;
 		if (color.substr(0,5) == "url(#") {
-			opts = {
-				alpha: opac,
-				linearGradient: document.getElementById(color.substr(5,color.length-6))
-			};
+			var grad = document.getElementById(color.substr(5,color.length-6));
+			opts = { alpha: opac };
+			opts[grad.tagName] = grad;
 		} 
 		else if (color.substr(0,1) == "#") {
 			opts = {
@@ -1985,7 +1984,7 @@ function svg_edit_setup() {
 		var was_none = false;
 		var pos = elem.position();
 		$("#color_picker")
-			.draggable({cancel:'.jPicker_table,.jGraduate_lgPick'})
+			.draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'})
 			.css({'left': pos.left, 'bottom': 50 - pos.top})
 			.jGraduate(
 			{ 
@@ -1999,11 +1998,10 @@ function svg_edit_setup() {
 				var oldgrad = document.getElementById("gradbox_"+picker);
 				var svgbox = oldgrad.parentNode;
 				var rectbox = svgbox.firstChild;
-				
-				if (paint.type == "linearGradient") {
+				if (paint.type == "linearGradient" || paint.type == "radialGradient") {
 					svgbox.removeChild(oldgrad);
-					var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient, true));
-					svgCanvas.fixOperaXML(newgrad, paint.linearGradient)
+					var newgrad = svgbox.appendChild(document.importNode(paint[paint.type], true));
+					svgCanvas.fixOperaXML(newgrad, paint[paint.type])
 					newgrad.id = "gradbox_"+picker;
 					rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
 				}
@@ -2815,7 +2813,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1449 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1452 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;

public/svg-edit/editor/svgcanvas.js

@@ -943,6 +943,14 @@ function BatchCommand(text) {
 		
 		$(svgroot).appendTo(container);
 
+		var opac_ani = document.createElementNS(svgns, 'animate');
+ 		$(opac_ani).attr({
+ 			attributeName: 'opacity',
+ 			begin: 'indefinite',
+ 			dur: 1,
+ 			fill: 'freeze'
+ 		}).appendTo(svgroot);
+	
     //nonce to uniquify id's
     var nonce = Math.floor(Math.random()*100001);
     var randomize_ids = false;
@@ -1501,11 +1509,11 @@ function BatchCommand(text) {
 			}
 		});
 		
-		var lgrads = svgcontent.getElementsByTagNameNS(svgns, "linearGradient"),
+		var grads = $(svgcontent).find("linearGradient, radialGradient");
 			grad_ids = [],
-			i = lgrads.length;
+			i = grads.length;
 		while (i--) {
-			var grad = lgrads[i];
+			var grad = grads[i];
 			var id = grad.id;
 			if($.inArray(id, grad_uses) == -1) {
 				// Not found, so remove
@@ -1600,7 +1608,7 @@ function BatchCommand(text) {
 						
 						// map various namespaces to our fixed namespace prefixes
                         // (the default xmlns attribute itself does not get a prefix)
-                        if(!attr.namespaceURI || nsMap[attr.namespaceURI]) {
+						if(!attr.namespaceURI || attr.namespaceURI == svgns || nsMap[attr.namespaceURI]) {
                             out.push(attr.nodeName); out.push("=\""); 
 				            out.push(attrVal); out.push("\"");
 				        }
@@ -3677,6 +3685,21 @@ function BatchCommand(text) {
 				
 			} else if (element != null) {
 				canvas.addedNew = true;
+				var ani_dur = .2, c_ani;
+				if(opac_ani.beginElement && element.getAttribute('opacity') != cur_shape.opacity) {
+					c_ani = $(opac_ani).clone().attr({
+						to: cur_shape.opacity,
+						dur: ani_dur
+					}).appendTo(element);
+					c_ani[0].beginElement();
+				} else {
+					ani_dur = 0;
+				}
+				
+				// Ideally this would be done on the endEvent of the animation,
+				// but that doesn't seem to be supported in Webkit
+				setTimeout(function() {
+					if(c_ani) c_ani.remove();
 				element.setAttribute("opacity", cur_shape.opacity);
 				element.setAttribute("style", "pointer-events:inherit");
 				cleanupElement(element);
@@ -3690,6 +3713,7 @@ function BatchCommand(text) {
 				// undo means to call cmd.unapply(), redo means to call cmd.apply()
 				addCommandToHistory(new InsertElementCommand(element));
 				call("changed",[element]);
+				}, ani_dur * 1000);
 			}
 			
 			start_transform = null;
@@ -6627,10 +6651,12 @@ function BatchCommand(text) {
 
 	var findDuplicateGradient = function(grad) {
 		var defs = findDefs();
-		var existing_grads = defs.getElementsByTagNameNS(svgns, "linearGradient");
+		var existing_grads = $(defs).find("linearGradient, radialGradient");
 		var i = existing_grads.length;
+		var rad_attrs = ['r','cx','cy','fx','fy'];
 		while (i--) {
-			var og = existing_grads.item(i);
+			var og = existing_grads[i];
+			if(grad.tagName == "linearGradient") {
 			if (grad.getAttribute('x1') != og.getAttribute('x1') ||
 				grad.getAttribute('y1') != og.getAttribute('y1') ||
 				grad.getAttribute('x2') != og.getAttribute('x2') ||
@@ -6638,6 +6664,17 @@ function BatchCommand(text) {
 			{
 				continue;
 			}
+			} else {
+				var grad_attrs = $(grad).attr(rad_attrs);
+				var og_attrs = $(og).attr(rad_attrs);
+				
+				var diff = false;
+				$.each(rad_attrs, function(i, attr) {
+					if(grad_attrs[attr] != og_attrs[attr]) diff = true;
+				});
+				
+				if(diff) continue;
+			}
 
 			// else could be a duplicate, iterate through stops
 			var stops = grad.getElementsByTagNameNS(svgns, "stop");
@@ -6649,8 +6686,8 @@ function BatchCommand(text) {
 
 			var j = stops.length;
 			while(j--) {
-				var stop = stops.item(j);
-				var ostop = ostops.item(j);
+				var stop = stops[j];
+				var ostop = ostops[j];
 
 				if (stop.getAttribute('offset') != ostop.getAttribute('offset') ||
 					stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') ||
@@ -6684,6 +6721,10 @@ function BatchCommand(text) {
 			canvas.strokeGrad = p.linearGradient;
 			if(addGrad) addGradient(); 
 		}
+		else if(p.type == "radialGradient") {
+			canvas.strokeGrad = p.radialGradient;
+			if(addGrad) addGradient(); 
+		}
 		else {
 //			console.log("none!");
 		}
@@ -6703,6 +6744,10 @@ function BatchCommand(text) {
 			canvas.fillGrad = p.linearGradient;
 			if(addGrad) addGradient(); 
 		}
+		else if(p.type == "radialGradient") {
+			canvas.fillGrad = p.radialGradient;
+			if(addGrad) addGradient(); 
+		}
 		else {
 //			console.log("none!");
 		}
@@ -7990,7 +8035,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1450 $)";
+		return "svgcanvas.js ($Rev: 1454 $)";
 	};
 	
 	this.setUiStrings = function(strs) {