Updated jGraduate and made radialGradients work as expected, fixing issue 298

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

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;
 }

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: -->

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 + ")");
 				}

editor/svgcanvas.js

@@ -1509,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
@@ -6651,16 +6651,29 @@ 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);
-			if (grad.getAttribute('x1') != og.getAttribute('x1') ||
-				grad.getAttribute('y1') != og.getAttribute('y1') ||
-				grad.getAttribute('x2') != og.getAttribute('x2') ||
-				grad.getAttribute('y2') != og.getAttribute('y2')) 
-			{
-				continue;
+			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') ||
+					grad.getAttribute('y2') != og.getAttribute('y2')) 
+				{
+					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
@@ -6673,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') ||
@@ -6708,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!");
 		}
@@ -6727,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!");
 		}