setCustomhandlers

Further whittling away at differences between
Instiki's and the main branch of SVG-Edit.
Now, the saveHandler is set from within the calling
page.

If the editor was opened from Instiki, choosing "Save Image"
now closes the editor window. To leave it open was kinda confusing.

Also sync with latest SVG-Edit changes.

public/javascripts/page_helper.js

@@ -85,8 +85,23 @@ function setupSVGedit(path){
       var editor = window.open(path, 'Edit SVG graphic', 'status=1,resizable=1,scrollbars=1');
       if (selected) {
         editor.addEventListener("load", function() {
+          editor.svgCanvas.setCustomHandlers({
+             'save': function(window,svg){
+                  window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
+                  window.close();
+                  }
+          });
           editor.svgCanvas.setSvgString(selected);
         }, true);
+      } else {
+        editor.addEventListener("load", function() {
+          editor.svgCanvas.setCustomHandlers({
+             'save': function(window,svg){
+                  window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
+                  window.close();
+                  }
+          });
+        }, true);      
       }
       SVGeditButton.disabled = true;
       SVGeditButton.value = 'Create SVG graphic';      

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

@@ -1,4 +1,4 @@
-body {
+body {
 	background: #D8D8D8;
 }
 
@@ -734,6 +734,7 @@ span.zoom_tool {
 
 #tool_docprops_back {
 	margin-left: 1em;
+	overflow: auto;
 }
 
 #svg_docprops_container #svg_docprops_docprops, 

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

@@ -312,7 +312,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		</div>
 		
 		<div class="toolset" id="tool_font_family">
-			<input id="font_family" type="text" title="Change Font Family" size="12"/>
+			<label>
+				<!-- Font family -->
+				<input id="font_family" type="text" title="Change Font Family" size="12"/>
+			</label>
 			<div id="font_family_dropdown" class="dropdown">
 				<button></button>
 				<ul>
@@ -329,7 +332,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<span id="font_sizeLabel">size:</span>
 			<input id="font_size" title="Change Font Size" size="3" value="0" type="text"/>
 		</label>
-		<input id="text" type="text" title="Change text contents" size="35"/>
+		<label>
+			<!-- Text content -->
+			<input id="text" type="text" title="Change text contents" size="35"/>
+		</label>
 	</div>
 	
 	<div id="path_node_panel">

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

@@ -171,10 +171,10 @@ function svg_edit_setup() {
 	var strokePaint = new $.jGraduate.Paint({solidColor: "000000"}); // solid black
 
 	var saveHandler = function(window,svg) {
+		// by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs) 
+		// can just provide their own custom save handler and might not want the XML prolog
+		svg = "<?xml version='1.0'?>\n" + svg;
 		
-		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
 		
@@ -1738,7 +1738,7 @@ function svg_edit_setup() {
 				'margin-top': {s: '2px', l: '4px', xl: '5px'},
 				'height': {s: 'auto', l: 'auto', xl: 'auto'},
 				'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
-				'font-size': {s: '.9em', l: '2em', xl: '2.5em'}
+				'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
 			},
 			"#zoom_panel": {
 				'margin-top': {s: '3px', l: '4px', xl: '5px'}
@@ -1758,10 +1758,12 @@ function svg_edit_setup() {
 				'line-height': {s: '18px', l: '34px', xl: '40px'},
 				'margin-top': {s: '3px'}
 			},
-			"div.toolset, #tools_top label, #tools_bottom label": {
+			"#tools_top label, #tools_bottom label": {
 				'font-size': {s: '1em', l: '1.5em', xl: '2em'},
-				'margin-top': {s: '1px', l: '3px', xl: '5px'},
+				'height': {s: '25px', l: '42px', xl: '64px'}
-				'height': {s: '25px', l: '43px', xl: '64px'}
+			},
+			"div.toolset": {
+				'height': {s: '25px', l: '42px', xl: '64px'}
 			}, 
 			"#tool_bold, #tool_italic": {
 				'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
@@ -2761,7 +2763,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1395 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1402 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;

public/svg-edit/editor/svgcanvas.js

@@ -684,7 +684,9 @@ function BatchCommand(text) {
 				'fill': '#FFF',
 				'style': 'pointer-events:none'
 			});
-			if (!window.opera) rect.setAttribute('filter', 'url(#canvashadow)');
+			// Both Firefox and WebKit are too slow with this filter region (especially at higher
+			// zoom levels) and Opera has at least one bug
+//			if (!window.opera) rect.setAttribute('filter', 'url(#canvashadow)');
 			canvasbg.appendChild(rect);
 			svgroot.insertBefore(canvasbg, svgcontent);
 		};
@@ -1343,7 +1345,7 @@ function BatchCommand(text) {
 					if(attrName.indexOf('se:') == 0) {
 						se_attrs.push([attrName, attr.nodeValue]);
 					} 
-					node.removeAttribute(attrName);
+					node.removeAttributeNS(attrNsURI, attrLocalName);
 				}
 				// special handling for path d attribute
 				if (node.nodeName == 'path' && attrName == 'd') {
@@ -1528,7 +1530,7 @@ function BatchCommand(text) {
                 var i = attrs.length;
                 while (i--) {
                     attr = attrs.item(i);
-                    var attrVal = attr.nodeValue;
+                    var attrVal = toXml(attr.nodeValue);
                     // only serialize attributes we don't use internally
                     if (attrVal != "" && 
                         $.inArray(attr.localName, ['width','height','xmlns','x','y','viewBox','id','overflow']) == -1) 
@@ -1542,7 +1544,7 @@ function BatchCommand(text) {
 			} else {
 				for (var i=attrs.length-1; i>=0; i--) {
 					attr = attrs.item(i);
-					var attrVal = attr.nodeValue;
+					var attrVal = toXml(attr.nodeValue);
 					if (attr.localName == '-moz-math-font-style') continue;
 					if (attrVal != "") {
 						if(attrVal.indexOf('pointer-events') == 0) continue;
@@ -7721,7 +7723,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1396 $)";
+		return "svgcanvas.js ($Rev: 1404 $)";
 	};
 	
 	this.setUiStrings = function(strs) {

public/svg-edit/test/test1.html

@@ -1,7 +1,7 @@
 <html>  
 <head>  
   <link rel="stylesheet" href="qunit/qunit.css" type="text/css"/>  
-  <script src="../editor/jquery.js"> </script>  
+  <script src="../editor/jquery.js"></script>  
   <script type="text/javascript" src="../editor/svgicons/jquery.svgicons.js"></script>
   <script type="text/javascript" src="../editor/locale/locale.js"></script>
   <script type="text/javascript" src="../editor/svgcanvas.js"></script>
@@ -172,22 +172,50 @@
 				'</svg>');
 		var attrVal = document.getElementById('se_test_elem').getAttributeNS("http://svg-edit.googlecode.com", "foo");
 		
-		equals(true, attrVal === "bar", "Preserved namespaced attribute on import");
+		equals(attrVal === "bar", true, "Preserved namespaced attribute on import");
 				
 		var output = svgCanvas.getSvgString();
 		var has_xlink = output.indexOf('xmlns:xlink="http://www.w3.org/1999/xlink"') !== -1;
 		var has_se = output.indexOf('xmlns:se=') !== -1;
-		var has_foo = output.indexOf('xmlns:foo=') === -1;
+		var has_foo = output.indexOf('xmlns:foo=') !== -1;
 		var has_attr = output.indexOf('se:foo="bar"') !== -1;
 		
-		equals(true, has_attr, "Preserved namespaced attribute on export");
+		equals(has_attr, true, "Preserved namespaced attribute on export");
-		equals(true, has_xlink, "Included xlink: xmlns");
+		equals(has_xlink, true, "Included xlink: xmlns");
-		equals(true, has_se, "Included se: xmlns");
+		equals(has_se, true, "Included se: xmlns");
-		equals(true, has_foo, "Did not include foo: xmlns");
+		equals(has_foo, false, "Did not include foo: xmlns");
-		
 	});
 	
+	test("Test import math elements inside a foreignObject", function() {
+		expect(4);
+		var set = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">'+
+				'<foreignObject id="fo" width="24" height="26" font-size="24"><math id="m" display="inline" xmlns="http://www.w3.org/1998/Math/MathML">'+
+						'<msub>'+
+							'<mi>A</mi>'+
+							'<mn>0</mn>'+
+						'</msub>'+
+					'</math>'+
+				'</foreignObject>'+
+			'</svg>');
+		var fo = document.getElementById('fo');
+		// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
+		// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
+		var math = fo.firstChild;
+		
+		equals(!!math, true, "Math element exists");
+		equals(math.nodeName, 'math', "Math element has the proper nodeName");
+		equals(math.getAttribute('id'), 'm', "Math element has an id");
+		equals(math.namespaceURI, "http://www.w3.org/1998/Math/MathML", "Preserved MathML namespace");
+	});
 	
+	test("Test XML entities in attribute", function() {
+		expect(3);
+		
+		equals(svgCanvas.getPrivateMethods().toXml("<"), "&lt;", "Escaped < properly");
+		equals(svgCanvas.getPrivateMethods().toXml(">"), "&gt;", "Escaped > properly");
+		equals(svgCanvas.getPrivateMethods().toXml("&"), "&amp;", "Escaped & properly");
+		// TODO: what about &quot; and &apos; ?
+	});	
   }); 
   </script>  
 </head>