Fixed issue 449: Gradients are not inverted when an element is flipped

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

editor/svg-editor.js

@@ -677,7 +677,8 @@
 		
 			// called when any element has changed
 			var elementChanged = function(window,elems) {
-				if(svgCanvas.getMode() == "select") {
+				var mode = svgCanvas.getMode();
+				if(mode === "select") {
 					setSelectMode();
 				}
 				
@@ -708,6 +709,12 @@
 				// text element was previously in focus
 				updateContextPanel();
 				
+				// In the event a gradient was flipped:
+				if(selectedElement && mode === "select") {
+					paintBox.fill.update();
+					paintBox.stroke.update();
+				}
+				
 				svgCanvas.runExtensions("elementChanged", {
 					elems: elems
 				});
@@ -1308,39 +1315,8 @@
 			var updateToolbar = function() {
 				if (selectedElement != null && ['use', 'image', 'foreignObject', 'g', 'a'].indexOf(selectedElement.tagName) === -1) {
 				
-					// For fill and stroke
+					paintBox.fill.update(true);
-					for(var i = 0; i < 2; i++) {
+					paintBox.stroke.update(true);
-						var isFill = i === 0;
-						var type = isFill ? 'fill': 'stroke';
-						
-						var paintOpacity = parseFloat(selectedElement.getAttribute(type + "-opacity"));
-						if (isNaN(paintOpacity)) {
-							paintOpacity = 1.0;
-						}
-						
-						var defColor = isFill ? "black" : "none";
-						var paintColor = selectedElement.getAttribute(type) || defColor;
-						// prevent undo on these canvas changes
-						svgCanvas.setColor(type, paintColor, true);
-						svgCanvas.setPaintOpacity(type, paintOpacity, true);
-
-						
-						paintOpacity *= 100;
-						
-						var paint = getPaint(paintColor, paintOpacity, type);
-						
-						// update the rect inside #fill_color/#stroke_color
-						paintBox[type].setPaint(paint);
-						
-// 						if(paint.type.indexOf('Gradient') >= 0) {
-// 							var elem = paint[paint.type];
-// 							if(elem) {
-// 								elem.id = 'gradbox_' + type;
-// 								$("#" + type + "_color defs").empty().append(elem);
-// 								paint_rect.attr('fill', 'url(#gradbox_' + type + ')');
-// 							}
-// 						}
-					}
 					
 					$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1).change();
 					$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none").change();
@@ -3282,6 +3258,29 @@
 					}
 				}
 				
+				this.update = function(apply) {
+					if(!selectedElement) return;
+					var type = this.type;
+					var paintOpacity = parseFloat(selectedElement.getAttribute(type + "-opacity"));
+					if (isNaN(paintOpacity)) {
+						paintOpacity = 1.0;
+					}
+					
+					var defColor = type === "fill" ? "black" : "none";
+					var paintColor = selectedElement.getAttribute(type) || defColor;
+					
+					if(apply) {
+						svgCanvas.setColor(type, paintColor, true);
+						svgCanvas.setPaintOpacity(type, paintOpacity, true);
+					}
+					
+					paintOpacity *= 100;
+					
+					var paint = getPaint(paintColor, paintOpacity, type);
+					// update the rect inside #fill_color/#stroke_color
+					this.setPaint(paint);
+				}
+				
 				this.prep = function() {
 					var ptype = this.paint.type;
 				

editor/svgcanvas.js

@@ -3018,6 +3018,38 @@ var remapElement = this.remapElement = function(selected,changes,m) {
 			assignAttributes(selected, changes, 1000, true);
 		}
 		box = getBBox(selected);
+	
+	for(var i = 0; i < 2; i++) {
+		var type = i === 0 ? 'fill' : 'stroke';
+		var attrVal = selected.getAttribute(type);
+		if(attrVal && attrVal.indexOf('url(') === 0) {
+			if(m.a < 0 || m.d < 0) {
+				var grad = getRefElem(attrVal);
+				var newgrad = grad.cloneNode(true);
+	
+				if(m.a < 0) {
+					//flip x
+					var x1 = newgrad.getAttribute('x1');
+					var x2 = newgrad.getAttribute('x2');
+					newgrad.setAttribute('x1', -(x1 - 1));
+					newgrad.setAttribute('x2', -(x2 - 1));
+				} 
+				
+				if(m.d < 0) {
+					//flip y
+					var y1 = newgrad.getAttribute('y1');
+					var y2 = newgrad.getAttribute('y2');
+					newgrad.setAttribute('y1', -(y1 - 1));
+					newgrad.setAttribute('y2', -(y2 - 1));
+				}
+				newgrad.id = getNextId();
+				findDefs().appendChild(newgrad);
+				selected.setAttribute(type, 'url(#' + newgrad.id + ')');
+			}
+		}
+		
+	}
+
 
 	var elName = selected.tagName;
 	if(elName === "g" || elName === "text" || elName === "use") {