Fixed issue 713: Fill tool breaks after using gradient and then new image

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

editor/svg-editor.js

@@ -479,7 +479,8 @@
 				tool_scale = 1,
 				zoomInIcon = 'crosshair',
 				zoomOutIcon = 'crosshair',
-				ui_context = 'toolbars';
+				ui_context = 'toolbars',
+				orig_source = '';
 
 			// This sets up alternative dialog boxes. They mostly work the same way as
 			// their UI counterparts, expect instead of returning the result, a callback
@@ -589,7 +590,6 @@
 					showSourceEditor(0,true);
 					return;	
 				}
-				
 				var win = window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
 				
 				// Alert will only appear the first time saved OR the first time the bug is encountered
@@ -688,7 +688,7 @@
 					var elem = elems[i];
 					
 					// if the element changed was the svg, then it could be a resolution change
-					if (elem && elem.tagName == "svg") {
+					if (elem && elem.tagName === "svg") {
 						populateLayers();
 						updateCanvas();
 					} 
@@ -787,6 +787,22 @@
 				updateTitle();
 			}
 			
+			// Makes sure the current selected paint is available to work with
+			var prepPaints = function() {
+				for(var i = 0; i < 2; i++) {
+					var type = i === 0 ? 'fill': 'stroke';
+					var cur = $('#' + type + '_color rect').attr('fill');
+					if(cur.indexOf('url(') === 0) {
+						var grad = $('#' + type + '_color defs *')[0];
+						var obj = {};
+						obj.type = grad.tagName;
+						obj[grad.tagName] = grad;
+						var paint = new $.jGraduate.Paint(obj);
+						svgCanvas.setPaint(type, paint);
+					}
+				}
+			}
+			
 			var flyout_funcs = {};
 			
 			var setupFlyouts = function(holders) {
@@ -1271,15 +1287,21 @@
 				runCallback();
 			};
 			
-			var getPaint = function(color, opac) {
+			var getPaint = function(color, opac, type) {
 				// update the editor's fill paint
 				var opts = null;
-				if (color.substr(0,5) == "url(#") {
+				if (color.indexOf("url(#") === 0) {
-					var grad = document.getElementById(color.substr(5,color.length-6));
+					var refElem = svgCanvas.getRefElem(color);
+					if(refElem) {
+						refElem = refElem.cloneNode(true);
+					} else {
+						refElem =  $("#" + type + "_color defs *")[0];
+					}
+					
 					opts = { alpha: opac };
-					opts[grad.tagName] = grad;
+					opts[refElem.tagName] = refElem;
 				} 
-				else if (color.substr(0,1) == "#") {
+				else if (color.indexOf("#") === 0) {
 					opts = {
 						alpha: opac,
 						solidColor: color.substr(1)
@@ -1299,57 +1321,42 @@
 			var updateToolbar = function() {
 				if (selectedElement != null && ['use', 'image', 'foreignObject', 'g', 'a'].indexOf(selectedElement.tagName) === -1) {
 				
-					// get opacity values
+					// For fill and stroke
-					var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
+					for(var i = 0; i < 2; i++) {
-					if (isNaN(fillOpacity)) {
+						var isFill = i === 0;
-						fillOpacity = 1.0;
+						var type = isFill ? 'fill': 'stroke';
-					}
+						
-					
+						var paintOpacity = parseFloat(selectedElement.getAttribute(type + "-opacity"));
-					var strokeOpacity = parseFloat(selectedElement.getAttribute("stroke-opacity"));
+						if (isNaN(paintOpacity)) {
-					if (isNaN(strokeOpacity)) {
+							paintOpacity = 1.0;
-						strokeOpacity = 1.0;
+						}
-					}
+						
-		
+						var defColor = isFill ? "black" : "none";
-					// update fill color and opacity
+						var paintColor = selectedElement.getAttribute(type) || defColor;
-					var fillColor = selectedElement.getAttribute("fill")||"black";
+						// prevent undo on these canvas changes
-					// prevent undo on these canvas changes
+						svgCanvas.setColor(type, paintColor, true);
-					svgCanvas.setColor('fill', fillColor, true);
+						svgCanvas.setPaintOpacity(type, paintOpacity, true);
-					svgCanvas.setPaintOpacity('fill', fillOpacity, true);
+	
-		
+						// update the rect inside #fill_color/#stroke_color
-					// update stroke color and opacity
+						var paint_rect = $("#" + type + "_color rect");
-					var strokeColor = selectedElement.getAttribute("stroke")||"none";
+						paint_rect.attr('opacity', paintOpacity);
-					// prevent undo on these canvas changes
+						
-					svgCanvas.setColor('stroke', strokeColor, true);
+						paintOpacity *= 100;
-					svgCanvas.setPaintOpacity('stroke', strokeOpacity, true);
+						
-					
+						if(isFill) {
-					// update the rect inside #fill_color
+							var paint = fillPaint = getPaint(paintColor, paintOpacity, type);
-					$("#stroke_color rect").attr({
+						} else {
-						fill: strokeColor,
+							var paint = strokePaint = getPaint(paintColor, paintOpacity, type);
-						opacity: strokeOpacity
+						}
-					});
+						
-
+						if(paint.type.indexOf('Gradient') >= 0) {
-					// update the rect inside #fill_color
+							var elem = paint[paint.type];
-					$("#fill_color rect").attr({
+							if(elem) {
-						fill: fillColor,
+								elem.id = 'gradbox_' + type;
-						opacity: fillOpacity
+								$("#" + type + "_color defs").empty().append(elem);
-					});
+								paint_rect.attr('fill', 'url(#gradbox_' + type + ')');
-		
+							}
-					fillOpacity *= 100;
+						}
-					strokeOpacity *= 100;
-					
-					fillPaint = getPaint(fillColor, fillOpacity);
-					strokePaint = getPaint(strokeColor, strokeOpacity);
-					
-					fillOpacity = fillOpacity + " %";
-					strokeOpacity = strokeOpacity + " %";
-		
-					// update fill color
-					if (fillColor == "none") {
-						fillOpacity = "N/A";
-					}
-					if (strokeColor == null || strokeColor == "" || strokeColor == "none") {
-						strokeColor = "none";
-						strokeOpacity = "N/A";
 					}
 					
 					$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1).change();
@@ -2450,6 +2457,7 @@
 					zoomImage();
 					populateLayers();
 					updateContextPanel();
+					prepPaints();
 				});
 			};
 			
@@ -2585,7 +2593,7 @@
 				$('#save_output_btns').toggle(!!forSaving);
 				$('#tool_source_back').toggle(!forSaving);
 				
-				var str = svgCanvas.getSvgString();
+				var str = orig_source = svgCanvas.getSvgString();
 				$('#svg_source_textarea').val(str);
 				$('#svg_source_editor').fadeIn();
 				properlySourceSizeTextArea();
@@ -2657,6 +2665,7 @@
 					zoomImage();
 					populateLayers();
 					updateTitle();
+					prepPaints();
 				}
 		
 				if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
@@ -3046,8 +3055,7 @@
 				};
 		
 				if (editingsource) {
-					var oldString = svgCanvas.getSvgString();
+					if (orig_source !== $('#svg_source_textarea').val()) {
-					if (oldString != $('#svg_source_textarea').val()) {
 						$.confirm(uiStrings.QignoreSourceChanges, function(ok) {
 							if(ok) hideSourceEditor();
 						});
@@ -3180,11 +3188,12 @@
 						paint = new $.jGraduate.Paint(p);
 						
 						var oldgrad = document.getElementById("gradbox_"+picker);
-						var svgbox = oldgrad.parentNode;
+						var svgbox = oldgrad.ownerSVGElement;
-						var rectbox = svgbox.firstChild;
+						var rectbox = svgbox.getElementsByTagName('rect')[0];
-						if (paint.type == "linearGradient" || paint.type == "radialGradient") {
+						var defs = svgbox.getElementsByTagName('defs')[0];
-							svgbox.removeChild(oldgrad);
+						if (paint.type === "linearGradient" || paint.type === "radialGradient") {
-							var newgrad = svgbox.appendChild(document.importNode(paint[paint.type], true));
+							oldgrad.parentNode.removeChild(oldgrad);
+							var newgrad = defs.appendChild(document.importNode(paint[paint.type], true));
 							newgrad.id = "gradbox_"+picker;
 							rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
 							rectbox.setAttribute("opacity", paint.alpha/100);
@@ -3271,10 +3280,10 @@
 			var svgdocbox = new DOMParser().parseFromString(
 				'<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%"\
 				fill="#' + curConfig.initFill.color + '" opacity="' + curConfig.initFill.opacity + '"/>\
-				<linearGradient id="gradbox_">\
+				<defs><linearGradient id="gradbox_">\
 						<stop stop-color="#000" offset="0.0"/>\
 						<stop stop-color="#FF0000" offset="1.0"/>\
-				</linearGradient></svg>', 'text/xml');
+				</linearGradient></defs></svg>', 'text/xml');
 			var docElem = svgdocbox.documentElement;
 
 
@@ -4114,6 +4123,7 @@
 			}
 			
 			var updateCanvas = Editor.updateCanvas = function(center, new_ctr) {
+		
 				var w = workarea.width(), h = workarea.height();
 				var w_orig = w, h_orig = h;
 				var zoom = svgCanvas.getZoom();

editor/svgcanvas.js

@@ -2634,7 +2634,7 @@ var sanitizeSvg = this.sanitizeSvg = function(node) {
 			if (val) {
 				val = getUrlFromAttr(val);
 				// simply check for first character being a '#'
-				if (val && val[0] != "#") {
+				if (val && val[0] !== "#") {
 					node.setAttribute(attr, "");
 					node.removeAttribute(attr);
 				}
@@ -2679,20 +2679,29 @@ var sanitizeSvg = this.sanitizeSvg = function(node) {
 var getUrlFromAttr = this.getUrlFromAttr = function(attrVal) {
 	if (attrVal) {		
 		// url("#somegrad")
-		if (attrVal.indexOf('url("') == 0) {
+		if (attrVal.indexOf('url("') === 0) {
 			return attrVal.substring(5,attrVal.indexOf('"',6));
 		}
 		// url('#somegrad')
-		else if (attrVal.indexOf("url('") == 0) {
+		else if (attrVal.indexOf("url('") === 0) {
 			return attrVal.substring(5,attrVal.indexOf("'",6));
 		}
-		else if (attrVal.indexOf("url(") == 0) {
+		else if (attrVal.indexOf("url(") === 0) {
 			return attrVal.substring(4,attrVal.indexOf(')'));
 		}
 	}
 	return null;
 };
 
+// Function getRefElem
+// Get the reference element associated with the given attribute value
+//
+// Parameters:
+// attrVal - The attribute value as a string
+var getRefElem = this.getRefElem = function(attrVal) {
+	return getElem(getUrlFromAttr(attrVal).substr(1));
+}
+
 // Function: getBBox
 // Get the given/selected element's bounding box object, convert it to be more
 // usable when necessary
@@ -3239,8 +3248,7 @@ var remapElement = this.remapElement = function(selected,changes,m) {
 // tx - The translation's x value
 // ty - The translation's y value
 var updateClipPath = function(attr, tx, ty) {
-	var id = getUrlFromAttr(attr).substr(1);
+	var path = getRefElem(attr).firstChild;
-	var path = getElem(id).firstChild;
 	
 	var cp_xform = getTransformList(path);
 	
@@ -3812,7 +3820,7 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
 		if(!isWebkit) {
 			var fill = selected.getAttribute('fill');
 			if(fill && fill.indexOf('url(') === 0) {
-				var grad = getElem(getUrlFromAttr(fill).substr(1));
+				var grad = getRefElem(fill);
 				if(grad.getAttribute('gradientUnits') === 'userSpaceOnUse') {
 				
 					//Update the userSpaceOnUse element
@@ -7793,7 +7801,7 @@ var removeUnusedDefElems = this.removeUnusedDefElems = function() {
 		
 		// gradients can refer to other gradients
 		var href = getHref(el);
-		if (href && href.indexOf('#') == 0) {
+		if (href && href.indexOf('#') === 0) {
 			defelem_uses.push(href.substr(1));
 		}
 	};
@@ -10788,14 +10796,14 @@ this.ungroupSelectedElement = function() {
 				if(!orig_cblur) {
 					// Set group's filter to use first child's ID
 					if(!gfilter) {
-						gfilter = getElem(getUrlFromAttr(gattrs.filter).substr(1));
+						gfilter = getRefElem(gattrs.filter);
 					} else {
 						// Clone the group's filter
 						gfilter = copyElem(gfilter);
 						findDefs().appendChild(gfilter);
 					}
 				} else {
-					gfilter = getElem(getUrlFromAttr(elem.getAttribute('filter')).substr(1));
+					gfilter = getRefElem(elem.getAttribute('filter'));
 				}
 
 				// Change this in future for different filters