Mostly cosmetic

Sync with latest SVG-Edit.
Tweak an icon.

public/svg-edit/editor/images/svg_edit_icons.svg

@@ -318,7 +318,9 @@
 		<path d="M209.1,157.9c-0.8,0.7-1.7,1.5-2.7,2.6v17.4c0,4,0.4,5.3,2.7,5.9"/>
       </g>
       <g>
-        <path fill="#FFD761" d="M121.6,88.7l0.8,87.5l62.3-56.7c0,0-15.3-25.8-24.8-30C151.1,85.6,121.6,88.7,121.6,88.7z"/>
+	    <polyline opacity="0.2" fill="#231F20" points="209.1,76.4 118.7,186.5 139.1,186.4 209.1,121 209.1,76.4 "/>
+	    <polyline opacity="0.4" fill="#231F20" points="209.1,76.2 118.5,186.5 129.7,186.4 200.2,120.3 209.1,100.8 209.1,76.4 "/>
+	    <path fill="#FFD761" d="M121.6,88.7l0.8,87.5l62.3-56.7c0,0-15.3-25.8-24.8-30C151.1,85.6,121.6,88.7,121.6,88.7z"/>
         <path fill="#FEA01E" d="M209.1,19.5h-54l-33.5,69.2c0,0,29.7-3.4,38.3,0.8c8.9,4.4,25,30.8,25,30.8l24.2-50V19.5z"/>
         <path d="M120.4,153.7l-0.6,25l23.8-16.9c0,0-8-7-11.2-8.1C129.4,152.8,120.4,153.7,120.4,153.7z"/>
         <polyline fill="none" stroke="#231F20" stroke-width="5" points="153.9,19.5 121.6,88.7 120.7,181.2 186.6,120.3 209.1,70.3 "/>

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

@@ -1,5 +1,5 @@
-body {
+body {
-	background: #E8E8E8;
+	background: #D8D8D8;
 }
 
 #svg_editor {
@@ -106,7 +106,6 @@ body {
 
 #svg_editor #layerpanel {
 	display: inline-block;
-	background-color: #E8E8E8;
 	position:absolute;
 	top: 1px;
 	bottom: 0px;
@@ -124,7 +123,8 @@ body {
 #svg_editor #sidepanel_handle {
 	display: inline-block;
 	position: absolute;
-	background-color: #E8E8E8;
+	background-color: #D8D8D8;
+	font-weight: bold;
 	left: 0px;
 	top: 40%;
 	width: 1em;
@@ -247,17 +247,19 @@ body {
 	left: 4px;
 }
 
+
 #svg_editor #main_icon {
+	background: #E8E8E8;
 	position: relative;
 	top: -2px;
 	left: -2px;
 	padding: 1px 0 2px 1px;
 	width: 44px;
 	height: 30px;
-	border-left: 1px solid #EEE;
+	border-left: 1px solid #FFF;
-	border-top: 1px solid #EEE;
+	border-top: 1px solid #FFF;
-	border-right: 1px solid #CCC;
+	border-right: 1px solid #808080;
-	border-bottom: 1px solid #CCC;
+	border-bottom: 1px solid #808080;
 	border-radius: 8px;
 	-moz-border-radius: 8px;
 	-webkit-border-radius: 8px;
@@ -376,7 +378,6 @@ body {
 	top: 75px;
 	left: 0;
 	padding-left: 2px;
-	background: #E8E8E8;
 	z-index: 4;
 }
 
@@ -556,8 +557,8 @@ span.zoom_tool {
 	width: 24px;
 	margin: 2px;
 	padding: 2px;
-	border-left: 1px solid #FFFFFF;
+	border-left: 1px solid #FFF;
-	border-top: 1px solid #FFFFFF;
+	border-top: 1px solid #FFF;
 	border-right: 1px solid #808080;
 	border-bottom: 1px solid #808080;
 	background-color: #E8E8E8;

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

@@ -330,7 +330,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		</label>
 		<input id="text" type="text" title="Change text contents" size="35"/>
 	</div>
-
+	
 	<div id="foreignObject_panel">
 		<div class="toolset">
 			<label id="tool_foreign_width">w:

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

@@ -171,12 +171,39 @@ function svg_edit_setup() {
 	var fillPaint = new $.jGraduate.Paint({solidColor: "FF0000"}); // solid red
 	var strokePaint = new $.jGraduate.Paint({solidColor: "000000"}); // solid black
 
-	// TODO: Unfortunately Mozilla does not handle internal references to gradients
-	// inside a data: URL document.  This means that any elements filled/stroked 
-	// with a gradient will appear black in Firefox, etc.  See bug 308590
-	// https://bugzilla.mozilla.org/show_bug.cgi?id=308590
 	var saveHandler = function(window,svg) {
-	  window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
+		
+		window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
+		return;
+
+		// Creates and opens an HTML page that provides a link to the SVG, a preview, and the markup. 
+		// Also includes warning about Mozilla bug #308590 when applicable
+		
+		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
+		var done = $.pref('save_notice_done') + ""; // TODO: Find out why this returns an object in FF when online
+		if(done !== "all") {
+
+			var note = 'Select "Save As..." in your browser to save this image as an SVG file.';
+			
+			// Check if FF and has <defs/>
+			if(navigator.userAgent.indexOf('Gecko/') !== -1) {
+				if(svg.indexOf('<defs') !== -1) {
+					note += "\n\nNOTE: Due to a bug in your browser, this image may appear wrong (missing gradients or elements). It will however appear correct once actually saved.";
+					$.pref('save_notice_done', 'all');
+					done = "all";
+				} else {
+					$.pref('save_notice_done', 'part');
+				}
+			} else {
+				$.pref('save_notice_done', 'all'); 
+			}
+			
+			if(done !== 'part') {
+				win.alert(note);
+			}
+		}
 	};
 	
 	// called when we've selected a different element
@@ -624,7 +651,7 @@ function svg_edit_setup() {
 
 	// updates the toolbar (colors, opacity, etc) based on the selected element
 	var updateToolbar = function() {
-		if (selectedElement != null &&
+		if (selectedElement != null && 
             selectedElement.tagName != "foreignObject" &&
 			selectedElement.tagName != "image" &&
 			selectedElement.tagName != "g")
@@ -1303,7 +1330,7 @@ function svg_edit_setup() {
 		toolButtonClick('#tool_text');
 		svgCanvas.setMode('text');
 	};
-
+	
 	var clickForeign = function(){
 		toolButtonClick('#tool_foreign');
 		svgCanvas.setMode('foreign');
@@ -1568,7 +1595,7 @@ function svg_edit_setup() {
 		var height = $('#svg_'+str+'_container').height() - 80;
 		$('#svg_'+str+'_textarea').css('height', height);
 	};
-
+	
     var saveForeignEditor = function(elt){
 		if (!editingforeign) return;
 		
@@ -2785,7 +2812,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1377 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1386 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;
@@ -2978,11 +3005,11 @@ function svg_edit_setup() {
 // This happens when the page is loaded
 $(function() {
 	svgCanvas = svg_edit_setup();
-    var good_langs = [];
+	var good_langs = [];
-    $('#lang_select option').each(function() {
+	$('#lang_select option').each(function() {
-        good_langs.push(this.value);
+		good_langs.push(this.value);
-    });
+	});
-    put_locale(svgCanvas, null, good_langs);
+	put_locale(svgCanvas, null, good_langs);
 	
 	try{
 	    json_encode = function(obj){

public/svg-edit/editor/svgcanvas.js

@@ -1,4 +1,4 @@
-/*
+/*
  * svgcanvas.js
  *
  * Licensed under the Apache License, Version 2
@@ -913,7 +913,7 @@ function BatchCommand(text) {
 
 	// TODO: declare the variables and set them as null, then move this setup stuff to
 	// an initialization function - probably just use clear()
-
+	
 	var canvas = this,
 		svgns = "http://www.w3.org/2000/svg",
 		xlinkns = "http://www.w3.org/1999/xlink",
@@ -938,11 +938,11 @@ function BatchCommand(text) {
 					'</svg>').documentElement, true);
 		
 		$(svgroot).appendTo(container);
-	
+		
 	var nsMap = {};
 	nsMap[xlinkns] = 'xlink';
 	nsMap[se_ns] = 'se';
-
+	
 	var svgcontent = svgdoc.createElementNS(svgns, "svg");
 	$(svgcontent).attr({
 		id: 'svgcontent',
@@ -1366,7 +1366,7 @@ function BatchCommand(text) {
 					}
 				}
 			});
-
+			
 			// recurse to children
 			i = node.childNodes.length;
 			while (i--) { sanitizeSvg(node.childNodes.item(i)); }
@@ -1494,21 +1494,21 @@ function BatchCommand(text) {
 			if(elem.id == 'svgcontent') {
 				// Process root element separately
 				var res = canvas.getResolution();
-                out.push(' width="' + res.w + '" height="' + res.h + '" xmlns="'+svgns+'"');
+				out.push(' width="' + res.w + '" height="' + res.h + '" xmlns="'+svgns+'"');
-
+			
-                var nsuris = {};
+				var nsuris = {};
-              
+				
-                // Check elements for namespaces, add if found
+				// Check elements for namespaces, add if found
-                $(elem).find('*').each(function() {
+				$(elem).find('*').each(function() {
-                    var el = this;
+					var el = this;
-                    $.each(this.attributes, function(i, attr) {
+					$.each(this.attributes, function(i, attr) {
-                        var uri = attr.namespaceURI;
+						var uri = attr.namespaceURI;
                         if(uri && !nsuris[uri] && nsMap[uri]) {
-                            nsuris[uri] = true;
+							nsuris[uri] = true;
-                            out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
+							out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
-                        }
+						}
-                    });
+					});
-                });
+				});
 
 			} else {
 				for (var i=attrs.length-1; i>=0; i--) {
@@ -1536,9 +1536,9 @@ function BatchCommand(text) {
 						
 						// map various namespaces to our fixed namespace prefixes
                         if(attr.namespaceURI && nsMap[attr.namespaceURI]) {
-                            out.push(nsMap[attr.namespaceURI]+':');
+							out.push(nsMap[attr.namespaceURI]+':');
 						}
-
+						
 						out.push(attr.localName); out.push("=\""); 
 						out.push(attrVal); out.push("\"");
 					}
@@ -1772,8 +1772,8 @@ function BatchCommand(text) {
 					// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
 					// if relative, we want to scalew, scaleh
 					if (type % 2 == 0) { // absolute
-                        var thisx = (seg.x != undefined) ? seg.x : currentpt.x, // for V commands
+						var thisx = (seg.x != undefined) ? seg.x : currentpt.x, // for V commands
-                            thisy = (seg.y != undefined) ? seg.y : currentpt.y, // for H commands
+							thisy = (seg.y != undefined) ? seg.y : currentpt.y, // for H commands
 							pt = remap(thisx,thisy),
 							pt1 = remap(seg.x1,seg.y1),
 							pt2 = remap(seg.x2,seg.y2);
@@ -2000,12 +2000,12 @@ function BatchCommand(text) {
 			// temporarily strip off the rotate and save the old center
 			var gangle = canvas.getRotationAngle(selected);
 			if (gangle) {
-                var a = gangle * Math.PI / 180;
+				var a = gangle * Math.PI / 180;
 				if ( Math.abs(a) > (1.0e-10) ) {
-				    var s = Math.sin(a)/(1 - Math.cos(a));
+					var s = Math.sin(a)/(1 - Math.cos(a));
 				} else {
-				// FIXME: This blows up if the angle is exactly 0!
+					// FIXME: This blows up if the angle is exactly 0!
-				    var s = 2/a;
+					var s = 2/a;
 				}
 				for (var i = 0; i < tlist.numberOfItems; ++i) {
 					var xform = tlist.getItem(i);
@@ -2018,7 +2018,7 @@ function BatchCommand(text) {
 						break;
 					}
 				}
-			}	
+			}
 			var tx = 0, ty = 0,
 				operation = 0,
 				N = tlist.numberOfItems;
@@ -2234,12 +2234,12 @@ function BatchCommand(text) {
 				// temporarily strip off the rotate and save the old center
 				angle = canvas.getRotationAngle(selected);
 			if (angle) {
-                var a = angle * Math.PI / 180;
+				var a = angle * Math.PI / 180;
 				if ( Math.abs(a) > (1.0e-10) ) {
-				    var s = Math.sin(a)/(1 - Math.cos(a));
+					var s = Math.sin(a)/(1 - Math.cos(a));
 				} else {
-				// FIXME: This blows up if the angle is exactly 0!
+					// FIXME: This blows up if the angle is exactly 0!
-				    var s = 2/a;
+					var s = 2/a;
 				}
 				for (var i = 0; i < tlist.numberOfItems; ++i) {
 					var xform = tlist.getItem(i);
@@ -2744,12 +2744,12 @@ function BatchCommand(text) {
 			if (mouse_target.correspondingUseElement)
 				mouse_target = mouse_target.correspondingUseElement;
 	
-            // for foreign content, go up until we find the foreignObject
+			// for foreign content, go up until we find the foreignObject
-            // WebKit browsers set the mouse target to the svgcanvas div
+			// WebKit browsers set the mouse target to the svgcanvas div 
-            if ($.inArray(mouse_target.namespaceURI, [mathns, htmlns]) != -1 &&
+			if ($.inArray(mouse_target.namespaceURI, [mathns, htmlns]) != -1 && 
-                mouse_target.id != "svgcanvas")
+				mouse_target.id != "svgcanvas") 
-            {
+			{
-                while (mouse_target.nodeName != "foreignObject") {
+				while (mouse_target.nodeName != "foreignObject") {
 					mouse_target = mouse_target.parentNode;
 				}
 			}
@@ -3614,7 +3614,7 @@ function BatchCommand(text) {
 				element = null;
 				
 				var t = evt.target;
-								
+				
 				// if this element is in a group, go up until we reach the top-level group 
 				// just below the layer groups
 				// TODO: once we implement links, we also would have to check for <a> elements
@@ -4720,11 +4720,11 @@ function BatchCommand(text) {
 						}
 						// else, create a new point, append to pts array, update path element
 						else {
-                            // Checks if current target or parents are #svgcontent
+							// Checks if current target or parents are #svgcontent
-                            if(!$.contains(container, evt.target)) {
+							if(!$.contains(container, evt.target)) {
-                                // Clicked outside canvas, so don't make point
+								// Clicked outside canvas, so don't make point
-                                return false;
+								return false;
-                            }
+							}
 
 							var lastx = current_path_pts[len-2], lasty = current_path_pts[len-1];
 							// we store absolute values in our path points array for easy checking above
@@ -5603,20 +5603,20 @@ function BatchCommand(text) {
 				canvas.fixOperaXML(svgcontent, newDoc.documentElement);
 			}
 			
-            // recalculate dimensions on the top-level children so that unnecessary transforms
+			// recalculate dimensions on the top-level children so that unnecessary transforms
-            // are removed
+			// are removed
-            var deepdive = function(node) {
+			var deepdive = function(node) {
-                    if (node.nodeType == 1) {
+				if (node.nodeType == 1) {
-                        var children = node.children;
+					var children = node.children;
-                        var i = children.length;
+					var i = children.length;
-                        while (i--) { deepdive(children.item(i)); }
+					while (i--) { deepdive(children.item(i)); }
-                        try {
+					try {
-                            recalculateDimensions(node);
+						recalculateDimensions(node);
-                        } catch(e) { console.log(e); }
+					} catch(e) { console.log(e); }
-                    }
+				}
-                }
+			}
-            deepdive(svgcontent);
+			deepdive(svgcontent);
-              
+			
 			var content = $(svgcontent);
         	
 			// determine proper size