From 9636cab11ec7d93a657eb84c5333e6be15e54eb5 Mon Sep 17 00:00:00 2001
From: Jacques Distler <distler@golem.ph.utexas.edu>
Date: Fri, 12 Mar 2010 03:50:23 -0600
Subject: [PATCH 1/2] Update to latet SVG-Edit API

---
 public/javascripts/page_helper.js             |  32 +-
 .../editor/extensions/ext-connector.js        | 998 +++++++++---------
 .../svg-edit/editor/images/svg_edit_icons.svg |  12 +-
 public/svg-edit/editor/locale/locale.js       |   7 +-
 public/svg-edit/editor/svg-editor.js          | 442 ++++----
 public/svg-edit/editor/svgcanvas.js           |  96 +-
 6 files changed, 866 insertions(+), 721 deletions(-)

diff --git a/public/javascripts/page_helper.js b/public/javascripts/page_helper.js
index 65e8eefb..658194c1 100644
--- a/public/javascripts/page_helper.js
+++ b/public/javascripts/page_helper.js
@@ -83,28 +83,16 @@ function setupSVGedit(path){
     SVGeditButton.disabled = true;
     Event.observe(SVGeditButton, 'click', function(){
       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.randomizeIds();
-          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();
-                  }
-          });
-          editor.svgCanvas.randomizeIds();
-        }, true);      
-      }
+      editor.addEventListener("load", function() {
+        editor.svgEditor.setCustomHandlers({
+            'save': function(window,svg){
+               window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
+               window.close();
+            }
+        });
+        editor.svgEditor.randomizeIds();
+        if (selected) editor.svgEditor.loadFromString(selected);
+      }, true);
       SVGeditButton.disabled = true;
       SVGeditButton.value = 'Create SVG graphic';      
       editor.focus();
diff --git a/public/svg-edit/editor/extensions/ext-connector.js b/public/svg-edit/editor/extensions/ext-connector.js
index 9f9b95cf..3a7c6c0e 100644
--- a/public/svg-edit/editor/extensions/ext-connector.js
+++ b/public/svg-edit/editor/extensions/ext-connector.js
@@ -7,239 +7,238 @@
  *
  */
  
-$(function() {
-	svgCanvas.addExtension("Connector", function(S) {
-		var svgcontent = S.svgcontent,
-			svgroot = S.svgroot,
-			getNextId = S.getNextId,
-			getElem = S.getElem,
-			addElem = S.addSvgElementFromJson,
-			selManager = S.selectorManager,
-			started = false,
-			start_x,
-			start_y,
-			cur_line,
-			start_elem,
-			end_elem,
-			connections = [],
-			conn_sel = ".se_connector",
-			se_ns,
+svgEditor.addExtension("Connector", function(S) {
+	var svgcontent = S.svgcontent,
+		svgroot = S.svgroot,
+		getNextId = S.getNextId,
+		getElem = S.getElem,
+		addElem = S.addSvgElementFromJson,
+		selManager = S.selectorManager,
+		started = false,
+		start_x,
+		start_y,
+		cur_line,
+		start_elem,
+		end_elem,
+		connections = [],
+		conn_sel = ".se_connector",
+		se_ns,
 // 			connect_str = "-SE_CONNECT-",
-			selElems = [];
-			
-		var lang_list = {
-			"en":[
-				{"id": "mode_connect", "title": "Connect two objects" }
-			],
-			"fr":[
-				{"id": "mode_connect", "title": "Connecter deux objets"}
-			]
-		};
+		selElems = [];
 		
-		function showPanel(on) {
-			var conn_rules = $('#connector_rules');
-			if(!conn_rules.length) {
-				conn_rules = $('<style id="connector_rules"><\/style>').appendTo('head');
-			} 
-			conn_rules.text(!on?"":"#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }");
-			$('#connector_panel').toggle(on);
-		}
-		
-		function setPoint(elem, pos, x, y, setMid) {
-			var pts = elem.points;
-			var pt = svgroot.createSVGPoint();
-			pt.x = x;
-			pt.y = y;
-			if(pos === 'end') pos = pts.numberOfItems-1;
-			// TODO: Test for this on init, then use alt only if needed
-			try {
-				pts.replaceItem(pt, pos);
-			} catch(err) {
-				// Should only occur in FF which formats points attr as "n,n n,n", so just split
-				var pt_arr = elem.getAttribute("points").split(" ");
-				for(var i=0; i< pt_arr.length; i++) {
-					if(i == pos) {
-						pt_arr[i] = x + ',' + y;
-					}
+	var lang_list = {
+		"en":[
+			{"id": "mode_connect", "title": "Connect two objects" }
+		],
+		"fr":[
+			{"id": "mode_connect", "title": "Connecter deux objets"}
+		]
+	};
+	
+	function showPanel(on) {
+		var conn_rules = $('#connector_rules');
+		if(!conn_rules.length) {
+			conn_rules = $('<style id="connector_rules"><\/style>').appendTo('head');
+		} 
+		conn_rules.text(!on?"":"#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }");
+		$('#connector_panel').toggle(on);
+	}
+	
+	function setPoint(elem, pos, x, y, setMid) {
+		var pts = elem.points;
+		var pt = svgroot.createSVGPoint();
+		pt.x = x;
+		pt.y = y;
+		if(pos === 'end') pos = pts.numberOfItems-1;
+		// TODO: Test for this on init, then use alt only if needed
+		try {
+			pts.replaceItem(pt, pos);
+		} catch(err) {
+			// Should only occur in FF which formats points attr as "n,n n,n", so just split
+			var pt_arr = elem.getAttribute("points").split(" ");
+			for(var i=0; i< pt_arr.length; i++) {
+				if(i == pos) {
+					pt_arr[i] = x + ',' + y;
 				}
-				elem.setAttribute("points",pt_arr.join(" ")); 
-			}
-			
-			if(setMid) {
-				// Add center point
-				var pt_start = pts.getItem(0);
-				var pt_end = pts.getItem(pts.numberOfItems-1);
-				setPoint(elem, 1, (pt_end.x + pt_start.x)/2, (pt_end.y + pt_start.y)/2);
 			}
+			elem.setAttribute("points",pt_arr.join(" ")); 
 		}
 		
-		function findConnectors() {
-			var elems = selElems;
-			var connectors = $(svgcontent).find(conn_sel);
-			connections = [];
-			
-				// Loop through connectors to see if one is connected to the element
-				connectors.each(function() {
-					var start = $(this).data("c_start");
-					var end = $(this).data("c_end");
-					
-				var parts = [getElem(start), getElem(end)];
-				for(var i=0; i<2; i++) {
-					var c_elem = parts[i];
-					var add_this = false;
-					// The connected element might be part of a selected group
-					$(c_elem).parents().each(function() {
-						if($.inArray(this, elems) !== -1) {
-							// Pretend this element is selected
-							add_this = true;
-						}
-					});
-						
-					if(!c_elem || !c_elem.parentNode) {
-							$(this).remove();
-						continue;
-						}
-					
-					if($.inArray(c_elem, elems) !== -1 || add_this) {
-						var bb = svgCanvas.getStrokedBBox([c_elem]);
-						connections.push({
-							elem: c_elem,
-							connector: this,
-							is_start: (i === 0),
-							start_x: bb.x,
-							start_y: bb.y
-						});	
-					}
-			}
-			});
+		if(setMid) {
+			// Add center point
+			var pt_start = pts.getItem(0);
+			var pt_end = pts.getItem(pts.numberOfItems-1);
+			setPoint(elem, 1, (pt_end.x + pt_start.x)/2, (pt_end.y + pt_start.y)/2);
 		}
+	}
+	
+	function findConnectors() {
+		var elems = selElems;
+		var connectors = $(svgcontent).find(conn_sel);
+		connections = [];
 
-		function updateConnectors() {
-			// Updates connector lines based on selected elements
-			// Is not used on mousemove, as it runs getStrokedBBox every time,
-			// which isn't necessary there.
-			findConnectors();
-			if(connections.length) {
-				// Update line with element
-				var i = connections.length;
-				while(i--) {
-					var conn = connections[i];
-					var line = conn.connector;
-					var elem = conn.elem;
-
-					var sw = line.getAttribute('stroke-width');
-					var pre = conn.is_start?'start':'end';
-					
-					// Update bbox for this element
-					var bb = svgCanvas.getStrokedBBox([elem]);
-					bb.x = conn.start_x;
-					bb.y = conn.start_y;
-					$(line).data(pre+'_bb', bb);
-					var add_offset = $(line).data(pre+'_off');
+		// Loop through connectors to see if one is connected to the element
+		connectors.each(function() {
+			var start = $(this).data("c_start");
+			var end = $(this).data("c_end");
+			
+			var parts = [getElem(start), getElem(end)];
+			for(var i=0; i<2; i++) {
+				var c_elem = parts[i];
+				var add_this = false;
+				// The connected element might be part of a selected group
+				$(c_elem).parents().each(function() {
+					if($.inArray(this, elems) !== -1) {
+						// Pretend this element is selected
+						add_this = true;
+					}
+				});
 				
-					var alt_pre = conn.is_start?'end':'start';
-					
-					// Get center pt of connected element
-					var bb2 = $(line).data(alt_pre+'_bb');
-					var src_x = bb2.x + bb2.width/2;
-					var src_y = bb2.y + bb2.height/2;
-					
-					// Set point of element being moved
-					var pt = getBBintersect(src_x, src_y, bb, add_offset?sw:0);
-					setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
-					
-					// Set point of connected element
-					var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre + '_off')?sw:0);
-					setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
-					
-					// Update points attribute manually for webkit
-					if(navigator.userAgent.indexOf('AppleWebKit') != -1) {
-						var pts = line.points;
-						var len = pts.numberOfItems;
-						var pt_arr = Array(len);
-						for(var j=0; j< len; j++) {
-							var pt = pts.getItem(j);
-							pt_arr[j] = pt.x + ',' + pt.y;
-						}	
-						line.setAttribute("points",pt_arr.join(" ")); 
-					}
+				if(!c_elem || !c_elem.parentNode) {
+					$(this).remove();
+					continue;
+				}
+				
+				if($.inArray(c_elem, elems) !== -1 || add_this) {
+					var bb = svgCanvas.getStrokedBBox([c_elem]);
+					connections.push({
+						elem: c_elem,
+						connector: this,
+						is_start: (i === 0),
+						start_x: bb.x,
+						start_y: bb.y
+					});	
+				}
+			}
+		});
+	}
+	
+	function updateConnectors() {
+		// Updates connector lines based on selected elements
+		// Is not used on mousemove, as it runs getStrokedBBox every time,
+		// which isn't necessary there.
+		findConnectors();
+		if(connections.length) {
+			// Update line with element
+			var i = connections.length;
+			while(i--) {
+				var conn = connections[i];
+				var line = conn.connector;
+				var elem = conn.elem;
 
+				var sw = line.getAttribute('stroke-width');
+				var pre = conn.is_start?'start':'end';
+				
+				// Update bbox for this element
+				var bb = svgCanvas.getStrokedBBox([elem]);
+				bb.x = conn.start_x;
+				bb.y = conn.start_y;
+				$(line).data(pre+'_bb', bb);
+				var add_offset = $(line).data(pre+'_off');
+			
+				var alt_pre = conn.is_start?'end':'start';
+				
+				// Get center pt of connected element
+				var bb2 = $(line).data(alt_pre+'_bb');
+				var src_x = bb2.x + bb2.width/2;
+				var src_y = bb2.y + bb2.height/2;
+				
+				// Set point of element being moved
+				var pt = getBBintersect(src_x, src_y, bb, add_offset?sw:0);
+				setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
+				
+				// Set point of connected element
+				var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre + '_off')?sw:0);
+				setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
+				
+				// Update points attribute manually for webkit
+				if(navigator.userAgent.indexOf('AppleWebKit') != -1) {
+					var pts = line.points;
+					var len = pts.numberOfItems;
+					var pt_arr = Array(len);
+					for(var j=0; j< len; j++) {
+						var pt = pts.getItem(j);
+						pt_arr[j] = pt.x + ',' + pt.y;
+					}	
+					line.setAttribute("points",pt_arr.join(" ")); 
 				}
+
 			}
 		}
+	}
+	
+	function getBBintersect(x, y, bb, offset) {
+		if(offset) {
+			offset -= 0;
+			bb = $.extend({}, bb);
+			bb.width += offset;
+			bb.height += offset;
+			bb.x -= offset/2;
+			bb.y -= offset/2;
+		}
+	
+		var mid_x = bb.x + bb.width/2;
+		var mid_y = bb.y + bb.height/2;
+		var len_x = x - mid_x;
+		var len_y = y - mid_y;
 		
-		function getBBintersect(x, y, bb, offset) {
-			if(offset) {
-				offset -= 0;
-				bb = $.extend({}, bb);
-				bb.width += offset;
-				bb.height += offset;
-				bb.x -= offset/2;
-				bb.y -= offset/2;
-			}
+		var slope = Math.abs(len_y/len_x);
 		
-			var mid_x = bb.x + bb.width/2;
-			var mid_y = bb.y + bb.height/2;
-			var len_x = x - mid_x;
-			var len_y = y - mid_y;
-			
-			var slope = Math.abs(len_y/len_x);
-			
-			var ratio;
-			
-			if(slope < bb.height/bb.width) {
-				ratio = (bb.width/2) / Math.abs(len_x);
-			} else {
-				ratio = (bb.height/2) / Math.abs(len_y);
-			}
-			
-			
-			return {
-				x: mid_x + len_x * ratio,
-				y: mid_y + len_y * ratio
-			}
+		var ratio;
+		
+		if(slope < bb.height/bb.width) {
+			ratio = (bb.width/2) / Math.abs(len_x);
+		} else {
+			ratio = (bb.height/2) / Math.abs(len_y);
 		}
 		
-		// Do once
-		(function() {
-			var gse = svgCanvas.groupSelectedElements;
-			
-			svgCanvas.groupSelectedElements = function() {
-				svgCanvas.removeFromSelection($(conn_sel).toArray());
-				gse();
-			}
-			
-			var mse = svgCanvas.moveSelectedElements;
-			
-			svgCanvas.moveSelectedElements = function() {
-				svgCanvas.removeFromSelection($(conn_sel).toArray());
-				mse.apply(this, arguments);
-				updateConnectors();
-			}
-			
-			se_ns = svgCanvas.getEditorNS();
-		}());
 		
-		// Do on reset
-		function init() {
-			// Make sure all connectors have data set
-			$(svgcontent).find('*').each(function() { 
-				var conn = this.getAttributeNS(se_ns, "connector");
-				if(conn) {
-					this.setAttribute('class', conn_sel.substr(1));
-					var conn_data = conn.split(' ');
-					var sbb = svgCanvas.getStrokedBBox([getElem(conn_data[0])]);
-					var ebb = svgCanvas.getStrokedBBox([getElem(conn_data[1])]);
-					$(this).data('c_start',conn_data[0])
-						.data('c_end',conn_data[1])
-						.data('start_bb', sbb)
-						.data('end_bb', ebb);
-					svgCanvas.getEditorNS(true);
-				}
-			});
+		return {
+			x: mid_x + len_x * ratio,
+			y: mid_y + len_y * ratio
+		}
+	}
+	
+	// Do once
+	(function() {
+		var gse = svgCanvas.groupSelectedElements;
+		
+		svgCanvas.groupSelectedElements = function() {
+			svgCanvas.removeFromSelection($(conn_sel).toArray());
+			gse();
+		}
+		
+		var mse = svgCanvas.moveSelectedElements;
+		
+		svgCanvas.moveSelectedElements = function() {
+			svgCanvas.removeFromSelection($(conn_sel).toArray());
+			mse.apply(this, arguments);
+			updateConnectors();
+		}
+		
+		se_ns = svgCanvas.getEditorNS();
+	}());
+	
+	// Do on reset
+	function init() {
+		// Make sure all connectors have data set
+		$(svgcontent).find('*').each(function() { 
+			var conn = this.getAttributeNS(se_ns, "connector");
+			if(conn) {
+				this.setAttribute('class', conn_sel.substr(1));
+				var conn_data = conn.split(' ');
+				var sbb = svgCanvas.getStrokedBBox([getElem(conn_data[0])]);
+				var ebb = svgCanvas.getStrokedBBox([getElem(conn_data[1])]);
+				$(this).data('c_start',conn_data[0])
+					.data('c_end',conn_data[1])
+					.data('start_bb', sbb)
+					.data('end_bb', ebb);
+				svgCanvas.getEditorNS(true);
+			}
+		});
 // 			updateConnectors();
-		}
-		
+	}
+	
 // 		$(svgroot).parent().mousemove(function(e) {
 // // 			if(started 
 // // 				|| svgCanvas.getMode() != "connector"
@@ -250,307 +249,306 @@ $(function() {
 // // 					
 // // 			}
 // 		});
-		
-		return {
-			name: "Connector",
-			svgicons: "images/conn.svg",
-			buttons: [{
-				id: "mode_connect",
-				type: "mode",
-				icon: "images/cut.png",
-				title: "Connect two objects",
-				key: "Shift+3",
-				includeWith: {
-					button: '#tool_line',
-					isDefault: false,
-					position: 1
-				},
-				events: {
-					'click': function() {
-						svgCanvas.setMode("connector");
-					}
+	
+	return {
+		name: "Connector",
+		svgicons: "images/conn.svg",
+		buttons: [{
+			id: "mode_connect",
+			type: "mode",
+			icon: "images/cut.png",
+			title: "Connect two objects",
+			key: "Shift+3",
+			includeWith: {
+				button: '#tool_line',
+				isDefault: false,
+				position: 1
+			},
+			events: {
+				'click': function() {
+					svgCanvas.setMode("connector");
 				}
-			}],
-			addLangData: function(lang) {
-				return {
-					data: lang_list[lang]
-				};
-			},
-			mouseDown: function(opts) {
-				var e = opts.event;
-				start_x = opts.start_x,
-				start_y = opts.start_y;
-				var mode = svgCanvas.getMode();
+			}
+		}],
+		addLangData: function(lang) {
+			return {
+				data: lang_list[lang]
+			};
+		},
+		mouseDown: function(opts) {
+			var e = opts.event;
+			start_x = opts.start_x,
+			start_y = opts.start_y;
+			var mode = svgCanvas.getMode();
+			
+			if(mode == "connector") {
 				
-				if(mode == "connector") {
-					
-					if(started) return;
-					
-					var mouse_target = e.target;
-					
-					var parents = $(mouse_target).parents();
-					
-					if($.inArray(svgcontent, parents) != -1) {
-						// Connectable element
-
-						// If child of foreignObject, use parent
-						var fo = $(mouse_target).closest("foreignObject");
-						start_elem = fo.length ? fo[0] : mouse_target;
-						
-						// Get center of source element
-						var bb = svgCanvas.getStrokedBBox([start_elem]);
-						var x = bb.x + bb.width/2;
-						var y = bb.y + bb.height/2;
-						
-						started = true;
-						cur_line = addElem({
-							"element": "polyline",
-							"attr": {
-								"id": getNextId(),
-								"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
-								"stroke": '#000',
-								"stroke-width": 2,
-								"fill": "none",
-								"opacity": .5,
-								"style": "pointer-events:none"
-							}
-						});
-						$(cur_line).data('start_bb', bb);
-					}
-					return {
-						started: true
-					};
-				} else if(mode == "select") {
-					findConnectors();
-				}
-			},
-			mouseMove: function(opts) {
-				var zoom = svgCanvas.getZoom();
-				var e = opts.event;
-				var x = opts.mouse_x/zoom;
-				var y = opts.mouse_y/zoom;
+				if(started) return;
 				
-				var	diff_x = x - start_x,
-					diff_y = y - start_y;
-									
-				var mode = svgCanvas.getMode();
+				var mouse_target = e.target;
 				
-				if(mode == "connector" && started) {
-
-					// Set start point (adjusts based on bb)
-					var pt = getBBintersect(x, y, $(cur_line).data('start_bb'));
-					start_x = pt.x;
-					start_y = pt.y;
-					
-					setPoint(cur_line, 0, pt.x, pt.y, true);
-					
-					// Set end point
-					setPoint(cur_line, 'end', x, y, true);
-				} else if(mode == "select") {
-					var slen = selElems.length;
-					
-					while(slen--) {
-						var elem = selElems[slen];
-						// Look for selected connector elements
-						if(elem && $(elem).data('c_start')) {
-							// Remove the "translate" transform given to move
-							svgCanvas.removeFromSelection([elem]);
-							svgCanvas.getTransformList(elem).clear();
-
-						}
-					}
-					if(connections.length) {
-						// Update line with element
-						var i = connections.length;
-						while(i--) {
-							var conn = connections[i];
-							var line = conn.connector;
-							var elem = conn.elem;
-							
-							var pre = conn.is_start?'start':'end';
-							var sw = line.getAttribute('stroke-width');
-							
-							// Update bbox for this element
-							var bb = $(line).data(pre+'_bb');
-							bb.x = conn.start_x + diff_x;
-							bb.y = conn.start_y + diff_y;
-							$(line).data(pre+'_bb', bb);
-							
-							var alt_pre = conn.is_start?'end':'start';
-							
-							// Get center pt of connected element
-							var bb2 = $(line).data(alt_pre+'_bb');
-							var src_x = bb2.x + bb2.width/2;
-							var src_y = bb2.y + bb2.height/2;
-							
-							// Set point of element being moved
-							var pt = getBBintersect(src_x, src_y, bb, $(line).data(pre+'_off')?sw:0);
-							setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
-							
-							// Set point of connected element
-							var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre+'_off')?sw:0);
-							setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
-
-						}
-						
-					}
-				} 
-			},
-			mouseUp: function(opts) {
-				var zoom = svgCanvas.getZoom();
-				var e = opts.event,
-					x = opts.mouse_x/zoom,
-					y = opts.mouse_y/zoom,
-					mouse_target = e.target;
+				var parents = $(mouse_target).parents();
 				
-				if(svgCanvas.getMode() == "connector") {
+				if($.inArray(svgcontent, parents) != -1) {
+					// Connectable element
+					
+					// If child of foreignObject, use parent
 					var fo = $(mouse_target).closest("foreignObject");
-					if(fo.length) mouse_target = fo[0];
-					if(mouse_target.parentNode.parentNode != svgcontent) {
-						// Not a valid target element, so remove line
+					start_elem = fo.length ? fo[0] : mouse_target;
+					
+					// Get center of source element
+					var bb = svgCanvas.getStrokedBBox([start_elem]);
+					var x = bb.x + bb.width/2;
+					var y = bb.y + bb.height/2;
+					
+					started = true;
+					cur_line = addElem({
+						"element": "polyline",
+						"attr": {
+							"id": getNextId(),
+							"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
+							"stroke": '#000',
+							"stroke-width": 3,
+							"fill": "none",
+							"opacity": .5,
+							"style": "pointer-events:none"
+						}
+					});
+					$(cur_line).data('start_bb', bb);
+				}
+				return {
+					started: true
+				};
+			} else if(mode == "select") {
+				findConnectors();
+			}
+		},
+		mouseMove: function(opts) {
+			var zoom = svgCanvas.getZoom();
+			var e = opts.event;
+			var x = opts.mouse_x/zoom;
+			var y = opts.mouse_y/zoom;
+			
+			var	diff_x = x - start_x,
+				diff_y = y - start_y;
+								
+			var mode = svgCanvas.getMode();
+			
+			if(mode == "connector" && started) {
+
+				// Set start point (adjusts based on bb)
+				var pt = getBBintersect(x, y, $(cur_line).data('start_bb'));
+				start_x = pt.x;
+				start_y = pt.y;
+				
+				setPoint(cur_line, 0, pt.x, pt.y, true);
+				
+				// Set end point
+				setPoint(cur_line, 'end', x, y, true);
+			} else if(mode == "select") {
+				var slen = selElems.length;
+				
+				while(slen--) {
+					var elem = selElems[slen];
+					// Look for selected connector elements
+					if(elem && $(elem).data('c_start')) {
+						// Remove the "translate" transform given to move
+						svgCanvas.removeFromSelection([elem]);
+						svgCanvas.getTransformList(elem).clear();
+
+					}
+				}
+				if(connections.length) {
+					// Update line with element
+					var i = connections.length;
+					while(i--) {
+						var conn = connections[i];
+						var line = conn.connector;
+						var elem = conn.elem;
+						
+						var pre = conn.is_start?'start':'end';
+						var sw = line.getAttribute('stroke-width');
+						
+						// Update bbox for this element
+						var bb = $(line).data(pre+'_bb');
+						bb.x = conn.start_x + diff_x;
+						bb.y = conn.start_y + diff_y;
+						$(line).data(pre+'_bb', bb);
+						
+						var alt_pre = conn.is_start?'end':'start';
+						
+						// Get center pt of connected element
+						var bb2 = $(line).data(alt_pre+'_bb');
+						var src_x = bb2.x + bb2.width/2;
+						var src_y = bb2.y + bb2.height/2;
+						
+						// Set point of element being moved
+						var pt = getBBintersect(src_x, src_y, bb, $(line).data(pre+'_off')?sw:0);
+						setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
+						
+						// Set point of connected element
+						var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre+'_off')?sw:0);
+						setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
+
+					}
+					
+				}
+			} 
+		},
+		mouseUp: function(opts) {
+			var zoom = svgCanvas.getZoom();
+			var e = opts.event,
+				x = opts.mouse_x/zoom,
+				y = opts.mouse_y/zoom,
+				mouse_target = e.target;
+			
+			if(svgCanvas.getMode() == "connector") {
+				var fo = $(mouse_target).closest("foreignObject");
+				if(fo.length) mouse_target = fo[0];
+				if(mouse_target.parentNode.parentNode != svgcontent) {
+					// Not a valid target element, so remove line
+					$(cur_line).remove();
+					started = false;
+					return {
+						keep: false,
+						element: null,
+						started: started
+					}
+				} else if(mouse_target == start_elem) {
+					// Start line through click
+					started = true;
+					return {
+						keep: true,
+						element: null,
+						started: started
+					}						
+				} else {
+					// Valid end element
+					end_elem = mouse_target;
+					
+					var start_id = start_elem.id, end_id = end_elem.id;
+					var conn_str = start_id + " " + end_id;
+					var alt_str = end_id + " " + start_id;
+					// Don't create connector if one already exists
+					var dupe = $(svgcontent).find(conn_sel).filter(function() {
+						var conn = this.getAttributeNS(se_ns, "connector");
+						if(conn == conn_str || conn == alt_str) return true;
+					});
+					if(dupe.length) {
 						$(cur_line).remove();
-						started = false;
 						return {
 							keep: false,
 							element: null,
-							started: started
-						}
-					} else if(mouse_target == start_elem) {
-						// Start line through click
-						started = true;
-						return {
-							keep: true,
-							element: null,
-							started: started
-						}						
-					} else {
-						// Valid end element
-						end_elem = mouse_target;
-						
-						var start_id = start_elem.id, end_id = end_elem.id;
-						var conn_str = start_id + " " + end_id;
-						var alt_str = end_id + " " + start_id;
-						// Don't create connector if one already exists
-						var dupe = $(svgcontent).find(conn_sel).filter(function() {
-							var conn = this.getAttributeNS(se_ns, "connector");
-							if(conn == conn_str || conn == alt_str) return true;
-						});
-						if(dupe.length) {
-							$(cur_line).remove();
-							return {
-								keep: false,
-								element: null,
-								started: false
-							}
-						}
-						
-						var bb = svgCanvas.getStrokedBBox([end_elem]);
-						
-						var pt = getBBintersect(start_x, start_y, bb);
-						setPoint(cur_line, 'end', pt.x, pt.y, true);
-						$(cur_line)
-							.data("c_start", start_id)
-							.data("c_end", end_id)
-							.data("end_bb", bb);
-						se_ns = svgCanvas.getEditorNS(true);
-						cur_line.setAttributeNS(se_ns, "se:connector", conn_str);
-						cur_line.setAttribute('class', conn_sel.substr(1));
-						cur_line.setAttribute('opacity', 1);
-						svgCanvas.addToSelection([cur_line]);
-						svgCanvas.moveToBottomSelectedElement();
-						selManager.requestSelector(cur_line).showGrips(false);
-						started = false;
-						return {
-							keep: true,
-							element: cur_line,
-							started: started
+							started: false
 						}
 					}
+					
+					var bb = svgCanvas.getStrokedBBox([end_elem]);
+					
+					var pt = getBBintersect(start_x, start_y, bb);
+					setPoint(cur_line, 'end', pt.x, pt.y, true);
+					$(cur_line)
+						.data("c_start", start_id)
+						.data("c_end", end_id)
+						.data("end_bb", bb);
+					se_ns = svgCanvas.getEditorNS(true);
+					cur_line.setAttributeNS(se_ns, "se:connector", conn_str);
+					cur_line.setAttribute('class', conn_sel.substr(1));
+					cur_line.setAttribute('opacity', 1);
+					svgCanvas.addToSelection([cur_line]);
+					svgCanvas.moveToBottomSelectedElement();
+					selManager.requestSelector(cur_line).showGrips(false);
+					started = false;
+					return {
+						keep: true,
+						element: cur_line,
+						started: started
+					}
 				}
-			},
-			selectedChanged: function(opts) {
-				
-				// Use this to update the current selected elements
-				selElems = opts.elems;
-				
-				var i = selElems.length;
-				
-				while(i--) {
-					var elem = selElems[i];
-					if(elem && $(elem).data('c_start')) {
-						selManager.requestSelector(elem).showGrips(false);
-						if(opts.selectedElement && !opts.multiselected) {
-							// TODO: Set up context tools and hide most regular line tools
-							showPanel(true);
-						} else {
-							showPanel(false);
-						}
+			}
+		},
+		selectedChanged: function(opts) {
+			
+			// Use this to update the current selected elements
+			selElems = opts.elems;
+			
+			var i = selElems.length;
+			
+			while(i--) {
+				var elem = selElems[i];
+				if(elem && $(elem).data('c_start')) {
+					selManager.requestSelector(elem).showGrips(false);
+					if(opts.selectedElement && !opts.multiselected) {
+						// TODO: Set up context tools and hide most regular line tools
+						showPanel(true);
 					} else {
 						showPanel(false);
 					}
+				} else {
+					showPanel(false);
 				}
-			},
-			elementChanged: function(opts) {
-				var elem = opts.elems[0];
-				if (elem && elem.tagName == 'svg' && elem.id == "svgcontent") {
-					// Update svgcontent (can change on import)
-					svgcontent = elem;
-					init();
-				}
-				
-				// Has marker, so change offset
-				if(elem && (
-					elem.getAttribute("marker-start") ||
-					elem.getAttribute("marker-mid") ||
-					elem.getAttribute("marker-end")
-				)) {
-					var start = elem.getAttribute("marker-start");
-					var mid = elem.getAttribute("marker-mid");
-					var end = elem.getAttribute("marker-end");
-					cur_line = elem;
-					$(elem)
-						.data("start_off", !!start)
-						.data("end_off", !!end);
-					
-					if(elem.tagName == "line" && mid) {
-						// Convert to polyline to accept mid-arrow
-						
-						var x1 = elem.getAttribute('x1')-0;
-						var x2 = elem.getAttribute('x2')-0;
-						var y1 = elem.getAttribute('y1')-0;
-						var y2 = elem.getAttribute('y2')-0;
-						var id = elem.id;
-						
-						var mid_pt = (' '+((x1+x2)/2)+','+((y1+y2)/2) + ' ');
-						var pline = addElem({
-							"element": "polyline",
-							"attr": {
-								"points": (x1+','+y1+ mid_pt +x2+','+y2),
-								"stroke": elem.getAttribute('stroke'),
-								"stroke-width": elem.getAttribute('stroke-width'),
-								"marker-mid": mid,
-								"fill": "none",
-								"opacity": elem.getAttribute('opacity') || 1
-							}
-						});
-						$(elem).after(pline).remove();
-						svgCanvas.clearSelection();
-						pline.id = id;
-						svgCanvas.addToSelection([pline]);
-					}
-						
-				}
-				updateConnectors();
-			},
-			toolButtonStateUpdate: function(opts) {
-				if(opts.nostroke) {
-					if ($('#mode_connect').hasClass('tool_button_current')) {
-						clickSelect();
-					}
-				}
-				$('#mode_connect')
-					.toggleClass('disabled',opts.nostroke);
 			}
-		};
-	});
-});
\ No newline at end of file
+		},
+		elementChanged: function(opts) {
+			var elem = opts.elems[0];
+			if (elem && elem.tagName == 'svg' && elem.id == "svgcontent") {
+				// Update svgcontent (can change on import)
+				svgcontent = elem;
+				init();
+			}
+			
+			// Has marker, so change offset
+			if(elem && (
+				elem.getAttribute("marker-start") ||
+				elem.getAttribute("marker-mid") ||
+				elem.getAttribute("marker-end")
+			)) {
+				var start = elem.getAttribute("marker-start");
+				var mid = elem.getAttribute("marker-mid");
+				var end = elem.getAttribute("marker-end");
+				cur_line = elem;
+				$(elem)
+					.data("start_off", !!start)
+					.data("end_off", !!end);
+				
+				if(elem.tagName == "line" && mid) {
+					// Convert to polyline to accept mid-arrow
+					
+					var x1 = elem.getAttribute('x1')-0;
+					var x2 = elem.getAttribute('x2')-0;
+					var y1 = elem.getAttribute('y1')-0;
+					var y2 = elem.getAttribute('y2')-0;
+					var id = elem.id;
+					
+					var mid_pt = (' '+((x1+x2)/2)+','+((y1+y2)/2) + ' ');
+					var pline = addElem({
+						"element": "polyline",
+						"attr": {
+							"points": (x1+','+y1+ mid_pt +x2+','+y2),
+							"stroke": elem.getAttribute('stroke'),
+							"stroke-width": elem.getAttribute('stroke-width'),
+							"marker-mid": mid,
+							"fill": "none",
+							"opacity": elem.getAttribute('opacity') || 1
+						}
+					});
+					$(elem).after(pline).remove();
+					svgCanvas.clearSelection();
+					pline.id = id;
+					svgCanvas.addToSelection([pline]);
+				}
+					
+			}
+			updateConnectors();
+		},
+		toolButtonStateUpdate: function(opts) {
+			if(opts.nostroke) {
+				if ($('#mode_connect').hasClass('tool_button_current')) {
+					clickSelect();
+				}
+			}
+			$('#mode_connect')
+				.toggleClass('disabled',opts.nostroke);
+		}
+	};
+});
diff --git a/public/svg-edit/editor/images/svg_edit_icons.svg b/public/svg-edit/editor/images/svg_edit_icons.svg
index 3653d24a..a81568ac 100644
--- a/public/svg-edit/editor/images/svg_edit_icons.svg
+++ b/public/svg-edit/editor/images/svg_edit_icons.svg
@@ -269,10 +269,16 @@
 
 
 <g id="new_image">
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
-  <circle stroke-width="0" stroke="#a0a0a0" fill="#fff175" id="svg_65" r="3.83333" cy="6.24769" cx="19.16813"/>
- </svg>
+  <circle stroke-width="0" stroke="#a0a0a0" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
+ <defs>
+  <radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
+   <stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
+   <stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
+  </radialGradient>
+ </defs>
+</svg>
 </g>
 
 <g id="save">
diff --git a/public/svg-edit/editor/locale/locale.js b/public/svg-edit/editor/locale/locale.js
index 7d8c1166..46a1d392 100644
--- a/public/svg-edit/editor/locale/locale.js
+++ b/public/svg-edit/editor/locale/locale.js
@@ -6,7 +6,7 @@
  * Copyright(c) 2009 Narendra Sisodya
  *
  */
-var put_locale = function(svgCanvas, given_param, good_langs){
+var put_locale = function(svgEditor, given_param, good_langs){
 	var lang_param;
 
 	if(given_param) {
@@ -21,7 +21,6 @@ var put_locale = function(svgCanvas, given_param, good_langs){
 			if (lang_param == "")
 				return;
 		}
-		lang_param = String(lang_param);
 		
 		// Set to English if language is not in list of good langs
 		if($.inArray(lang_param, good_langs) == -1) {
@@ -36,7 +35,7 @@ var put_locale = function(svgCanvas, given_param, good_langs){
 	
 	var processFile = function(data){
 		var LangData = eval(data), js_strings;
-		var more = svgCanvas.runExtensions("addLangData", lang_param, true);
+		var more = svgEditor.canvas.runExtensions("addLangData", lang_param, true);
 		$.each(more, function(i, m) {
 			if(m.data) {
 				LangData = $.merge(LangData, m.data);
@@ -61,7 +60,7 @@ var put_locale = function(svgCanvas, given_param, good_langs){
 				js_strings = data.js_strings;
 			}
 		});
-		svgCanvas.setLang(lang_param, js_strings);
+		svgEditor.setLang(lang_param, js_strings);
 	}
 	
 	$.ajax({
diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js
index 4f8b5e41..1cec7e5b 100644
--- a/public/svg-edit/editor/svg-editor.js
+++ b/public/svg-edit/editor/svg-editor.js
@@ -10,8 +10,30 @@
  *
  */
 
-function svg_edit_setup() {
-	var uiStrings = {
+(function() { 
+	
+	
+	if(!window.svgEditor) window.svgEditor = function() {
+		var svgCanvas;
+		var Editor = {};
+		var is_ready = false;
+		
+		var defaultPrefs = {
+			lang:'en',
+			iconsize:'m',
+			bkgd_color:'#FFF',
+			bkgd_url:'',
+			img_save:'embed'
+			},
+			curPrefs = {},
+			
+			// Note: Difference between Prefs and Config is that Prefs can be
+			// changed by the user and are stored in the browser, config can not
+			
+			curConfig = {
+				canvas_expansion: 3
+			}
+			uiStrings = {
 		'invalidAttrValGiven':'Invalid value given',
 		'noContentToFitTo':'No content to fit to',
 		'layer':"Layer",
@@ -31,16 +53,9 @@ function svg_edit_setup() {
 		'key_down':'Down',
 		'key_backspace':'Backspace',
 		'key_del':'Del'
-		},
-	
-		palette = ["#000000","#202020","#404040","#606060","#808080","#a0a0a0","#c0c0c0","#e0e0e0","#ffffff","#800000","#ff0000","#808000","#ffff00","#008000","#00ff00","#008080","#00ffff","#000080","#0000ff","#800080","#ff00ff","#2b0000","#550000","#800000","#aa0000","#d40000","#ff0000","#ff2a2a","#ff5555","#ff8080","#ffaaaa","#ffd5d5","#280b0b","#501616","#782121","#a02c2c","#c83737","#d35f5f","#de8787","#e9afaf","#f4d7d7","#241c1c","#483737","#6c5353","#916f6f","#ac9393","#c8b7b7","#e3dbdb","#2b1100","#552200","#803300","#aa4400","#d45500","#ff6600","#ff7f2a","#ff9955","#ffb380","#ffccaa","#ffe6d5","#28170b","#502d16","#784421","#a05a2c","#c87137","#d38d5f","#deaa87","#e9c6af","#f4e3d7","#241f1c","#483e37","#6c5d53","#917c6f","#ac9d93","#c8beb7","#e3dedb","#2b2200","#554400","#806600","#aa8800","#d4aa00","#ffcc00","#ffd42a","#ffdd55","#ffe680","#ffeeaa","#fff6d5","#28220b","#504416","#786721","#a0892c","#c8ab37","#d3bc5f","#decd87","#e9ddaf","#f4eed7","#24221c","#484537","#6c6753","#918a6f","#aca793","#c8c4b7","#e3e2db","#222b00","#445500","#668000","#88aa00","#aad400","#ccff00","#d4ff2a","#ddff55","#e5ff80","#eeffaa","#f6ffd5","#22280b","#445016","#677821","#89a02c","#abc837","#bcd35f","#cdde87","#dde9af","#eef4d7","#22241c","#454837","#676c53","#8a916f","#a7ac93","#c4c8b7","#e2e3db","#112b00","#225500","#338000","#44aa00","#55d400","#66ff00","#7fff2a","#99ff55","#b3ff80","#ccffaa","#e5ffd5","#17280b","#2d5016","#447821","#5aa02c","#71c837","#8dd35f","#aade87","#c6e9af","#e3f4d7","#1f241c","#3e4837","#5d6c53","#7c916f","#9dac93","#bec8b7","#dee3db","#002b00","#005500","#008000","#00aa00","#00d400","#00ff00","#2aff2a","#55ff55","#80ff80","#aaffaa","#d5ffd5","#0b280b","#165016","#217821","#2ca02c","#37c837","#5fd35f","#87de87","#afe9af","#d7f4d7","#1c241c","#374837","#536c53","#6f916f","#93ac93","#b7c8b7","#dbe3db","#002b11","#005522","#008033","#00aa44","#00d455","#00ff66","#2aff80","#55ff99","#80ffb3","#aaffcc","#d5ffe6","#0b2817","#16502d","#217844","#2ca05a","#37c871","#5fd38d","#87deaa","#afe9c6","#d7f4e3","#1c241f","#37483e","#536c5d","#6f917c","#93ac9d","#b7c8be","#dbe3de","#002b22","#005544","#008066","#00aa88","#00d4aa","#00ffcc","#2affd5","#55ffdd","#80ffe6","#aaffee","#d5fff6","#0b2822","#165044","#217867","#2ca089","#37c8ab","#5fd3bc","#87decd","#afe9dd","#d7f4ee","#1c2422","#374845","#536c67","#6f918a","#93aca7","#b7c8c4","#dbe3e2","#00222b","#004455","#006680","#0088aa","#00aad4","#00ccff","#2ad4ff","#55ddff","#80e5ff","#aaeeff","#d5f6ff","#0b2228","#164450","#216778","#2c89a0","#37abc8","#5fbcd3","#87cdde","#afdde9","#d7eef4","#1c2224","#374548","#53676c","#6f8a91","#93a7ac","#b7c4c8","#dbe2e3","#00112b","#002255","#003380","#0044aa","#0055d4","#0066ff","#2a7fff","#5599ff","#80b3ff","#aaccff","#d5e5ff","#0b1728","#162d50","#214478","#2c5aa0","#3771c8","#5f8dd3","#87aade","#afc6e9","#d7e3f4","#1c1f24","#373e48","#535d6c","#6f7c91","#939dac","#b7bec8","#dbdee3","#00002b","#000055","#000080","#0000aa","#0000d4","#0000ff","#2a2aff","#5555ff","#8080ff","#aaaaff","#d5d5ff","#0b0b28","#161650","#212178","#2c2ca0","#3737c8","#5f5fd3","#8787de","#afafe9","#d7d7f4","#1c1c24","#373748","#53536c","#6f6f91","#9393ac","#b7b7c8","#dbdbe3","#11002b","#220055","#330080","#4400aa","#5500d4","#6600ff","#7f2aff","#9955ff","#b380ff","#ccaaff","#e5d5ff","#170b28","#2d1650","#442178","#5a2ca0","#7137c8","#8d5fd3","#aa87de","#c6afe9","#e3d7f4","#1f1c24","#3e3748","#5d536c","#7c6f91","#9d93ac","#beb7c8","#dedbe3","#22002b","#440055","#660080","#8800aa","#aa00d4","#cc00ff","#d42aff","#dd55ff","#e580ff","#eeaaff","#f6d5ff","#220b28","#441650","#672178","#892ca0","#ab37c8","#bc5fd3","#cd87de","#ddafe9","#eed7f4","#221c24","#453748","#67536c","#8a6f91","#a793ac","#c4b7c8","#e2dbe3","#2b0022","#550044","#800066","#aa0088","#d400aa","#ff00cc","#ff2ad4","#ff55dd","#ff80e5","#ffaaee","#ffd5f6","#280b22","#501644","#782167","#a02c89","#c837ab","#d35fbc","#de87cd","#e9afdd","#f4d7ee","#241c22","#483745","#6c5367","#916f8a","#ac93a7","#c8b7c4","#e3dbe2","#2b0011","#550022","#800033","#aa0044","#d40055","#ff0066","#ff2a7f","#ff5599","#ff80b2","#ffaacc","#ffd5e5","#280b17","#50162d","#782144","#a02c5a","#c83771","#d35f8d","#de87aa","#e9afc6","#f4d7e3","#241c1f","#48373e","#6c535d","#916f7c","#ac939d","#c8b7be","#e3dbde"],
+		};
 
-		isMac = false, //(navigator.platform.indexOf("Mac") != -1);
-		modKey = "", //(isMac ? "meta+" : "ctrl+");
-		svgCanvas = new SvgCanvas(document.getElementById("svgcanvas")),
-		path = svgCanvas.pathActions,
-		default_img_url = "images/logo.png",
-		workarea = $("#workarea");
+		var curPrefs = {}; //$.extend({}, defaultPrefs);
 	
 	// Store and retrieve preferences
 	$.pref = function(key, val) {
@@ -64,7 +79,7 @@ function svg_edit_setup() {
 		
 		if(storage) {
 			if(store) storage.setItem(key, val);
-				else return storage.getItem(key);
+					else if (storage.getItem(key)) return storage.getItem(key).value;
 		} else if(window.widget) {
 			if(store) widget.setPreferenceForKey(val, key);
 				else return widget.preferenceForKey(key);
@@ -81,13 +96,50 @@ function svg_edit_setup() {
 		}
 	}
 
-	var curPrefs = {
-		lang:'en',
-		iconsize:'m',
-		bkgd_color:'#FFF',
-		bkgd_url:'',
-		img_save:'embed'
-	};
+		Editor.setConfig = function(opts) {
+			$.each(opts, function(key, val) {
+				// Only allow prefs defined in defaultPrefs or curConfig
+				if(key in defaultPrefs) {
+					$.pref(key, val);
+				} else {
+					curConfig[key] = val;
+				}
+			});
+		}
+		
+		// Extension mechanisms must call setCustomHandlers with two functions: opts.open and opts.save
+		// opts.open's responsibilities are:
+		// 	- invoke a file chooser dialog in 'open' mode
+		//	- let user pick a SVG file
+		//	- calls setCanvas.setSvgString() with the string contents of that file
+		// opts.save's responsibilities are:
+		//	- accept the string contents of the current document 
+		//	- invoke a file chooser dialog in 'save' mode
+		// 	- save the file to location chosen by the user
+		Editor.setCustomHandlers = function(opts) {
+			if(opts.open) {
+				$('#tool_open').show();
+				svgCanvas.open = opts.open;
+			}
+			if(opts.save) {
+				svgCanvas.bind("saved", opts.save);
+			}
+		}
+		
+		Editor.randomizeIds = function() {
+			svgCanvas.randomizeIds(arguments)
+		}
+
+		Editor.init = function() {
+			Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig);
+			
+			var palette = ["#000000","#202020","#404040","#606060","#808080","#a0a0a0","#c0c0c0","#e0e0e0","#ffffff","#800000","#ff0000","#808000","#ffff00","#008000","#00ff00","#008080","#00ffff","#000080","#0000ff","#800080","#ff00ff","#2b0000","#550000","#800000","#aa0000","#d40000","#ff0000","#ff2a2a","#ff5555","#ff8080","#ffaaaa","#ffd5d5","#280b0b","#501616","#782121","#a02c2c","#c83737","#d35f5f","#de8787","#e9afaf","#f4d7d7","#241c1c","#483737","#6c5353","#916f6f","#ac9393","#c8b7b7","#e3dbdb","#2b1100","#552200","#803300","#aa4400","#d45500","#ff6600","#ff7f2a","#ff9955","#ffb380","#ffccaa","#ffe6d5","#28170b","#502d16","#784421","#a05a2c","#c87137","#d38d5f","#deaa87","#e9c6af","#f4e3d7","#241f1c","#483e37","#6c5d53","#917c6f","#ac9d93","#c8beb7","#e3dedb","#2b2200","#554400","#806600","#aa8800","#d4aa00","#ffcc00","#ffd42a","#ffdd55","#ffe680","#ffeeaa","#fff6d5","#28220b","#504416","#786721","#a0892c","#c8ab37","#d3bc5f","#decd87","#e9ddaf","#f4eed7","#24221c","#484537","#6c6753","#918a6f","#aca793","#c8c4b7","#e3e2db","#222b00","#445500","#668000","#88aa00","#aad400","#ccff00","#d4ff2a","#ddff55","#e5ff80","#eeffaa","#f6ffd5","#22280b","#445016","#677821","#89a02c","#abc837","#bcd35f","#cdde87","#dde9af","#eef4d7","#22241c","#454837","#676c53","#8a916f","#a7ac93","#c4c8b7","#e2e3db","#112b00","#225500","#338000","#44aa00","#55d400","#66ff00","#7fff2a","#99ff55","#b3ff80","#ccffaa","#e5ffd5","#17280b","#2d5016","#447821","#5aa02c","#71c837","#8dd35f","#aade87","#c6e9af","#e3f4d7","#1f241c","#3e4837","#5d6c53","#7c916f","#9dac93","#bec8b7","#dee3db","#002b00","#005500","#008000","#00aa00","#00d400","#00ff00","#2aff2a","#55ff55","#80ff80","#aaffaa","#d5ffd5","#0b280b","#165016","#217821","#2ca02c","#37c837","#5fd35f","#87de87","#afe9af","#d7f4d7","#1c241c","#374837","#536c53","#6f916f","#93ac93","#b7c8b7","#dbe3db","#002b11","#005522","#008033","#00aa44","#00d455","#00ff66","#2aff80","#55ff99","#80ffb3","#aaffcc","#d5ffe6","#0b2817","#16502d","#217844","#2ca05a","#37c871","#5fd38d","#87deaa","#afe9c6","#d7f4e3","#1c241f","#37483e","#536c5d","#6f917c","#93ac9d","#b7c8be","#dbe3de","#002b22","#005544","#008066","#00aa88","#00d4aa","#00ffcc","#2affd5","#55ffdd","#80ffe6","#aaffee","#d5fff6","#0b2822","#165044","#217867","#2ca089","#37c8ab","#5fd3bc","#87decd","#afe9dd","#d7f4ee","#1c2422","#374845","#536c67","#6f918a","#93aca7","#b7c8c4","#dbe3e2","#00222b","#004455","#006680","#0088aa","#00aad4","#00ccff","#2ad4ff","#55ddff","#80e5ff","#aaeeff","#d5f6ff","#0b2228","#164450","#216778","#2c89a0","#37abc8","#5fbcd3","#87cdde","#afdde9","#d7eef4","#1c2224","#374548","#53676c","#6f8a91","#93a7ac","#b7c4c8","#dbe2e3","#00112b","#002255","#003380","#0044aa","#0055d4","#0066ff","#2a7fff","#5599ff","#80b3ff","#aaccff","#d5e5ff","#0b1728","#162d50","#214478","#2c5aa0","#3771c8","#5f8dd3","#87aade","#afc6e9","#d7e3f4","#1c1f24","#373e48","#535d6c","#6f7c91","#939dac","#b7bec8","#dbdee3","#00002b","#000055","#000080","#0000aa","#0000d4","#0000ff","#2a2aff","#5555ff","#8080ff","#aaaaff","#d5d5ff","#0b0b28","#161650","#212178","#2c2ca0","#3737c8","#5f5fd3","#8787de","#afafe9","#d7d7f4","#1c1c24","#373748","#53536c","#6f6f91","#9393ac","#b7b7c8","#dbdbe3","#11002b","#220055","#330080","#4400aa","#5500d4","#6600ff","#7f2aff","#9955ff","#b380ff","#ccaaff","#e5d5ff","#170b28","#2d1650","#442178","#5a2ca0","#7137c8","#8d5fd3","#aa87de","#c6afe9","#e3d7f4","#1f1c24","#3e3748","#5d536c","#7c6f91","#9d93ac","#beb7c8","#dedbe3","#22002b","#440055","#660080","#8800aa","#aa00d4","#cc00ff","#d42aff","#dd55ff","#e580ff","#eeaaff","#f6d5ff","#220b28","#441650","#672178","#892ca0","#ab37c8","#bc5fd3","#cd87de","#ddafe9","#eed7f4","#221c24","#453748","#67536c","#8a6f91","#a793ac","#c4b7c8","#e2dbe3","#2b0022","#550044","#800066","#aa0088","#d400aa","#ff00cc","#ff2ad4","#ff55dd","#ff80e5","#ffaaee","#ffd5f6","#280b22","#501644","#782167","#a02c89","#c837ab","#d35fbc","#de87cd","#e9afdd","#f4d7ee","#241c22","#483745","#6c5367","#916f8a","#ac93a7","#c8b7c4","#e3dbe2","#2b0011","#550022","#800033","#aa0044","#d40055","#ff0066","#ff2a7f","#ff5599","#ff80b2","#ffaacc","#ffd5e5","#280b17","#50162d","#782144","#a02c5a","#c83771","#d35f8d","#de87aa","#e9afc6","#f4d7e3","#241c1f","#48373e","#6c535d","#916f7c","#ac939d","#c8b7be","#e3dbde"],
+		
+				isMac = false, //(navigator.platform.indexOf("Mac") != -1);
+				modKey = "", //(isMac ? "meta+" : "ctrl+");
+				path = svgCanvas.pathActions,
+				default_img_url = "images/logo.png",
+				workarea = $("#workarea");
 	
 	// This sets up alternative dialog boxes. They mostly work the same way as
 	// their UI counterparts, expect instead of returning the result, a callback
@@ -181,7 +233,7 @@ function svg_edit_setup() {
 		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
+				var done = $.pref('save_notice_done');
 		if(done !== "all") {
 
 			var note = 'Select "Save As..." in your browser to save this image as an SVG file.';
@@ -1273,14 +1325,14 @@ function svg_edit_setup() {
 	
 	*/
 	
-// 	var setIcon = function(holder_sel, id) {
-// 		var icon = $.getSvgIcon(id).clone();
-// 		var holder = $(holder_sel);
-// 		icon[0].setAttribute('width',holder.width());
-// 		icon[0].setAttribute('height',holder.height());
-// 		holder.empty().append(icon)
-// 			.attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
-// 	}
+		// 	var setIcon = function(holder_sel, id) {
+		// 		var icon = $.getSvgIcon(id).clone();
+		// 		var holder = $(holder_sel);
+		// 		icon[0].setAttribute('width',holder.width());
+		// 		icon[0].setAttribute('height',holder.height());
+		// 		holder.empty().append(icon)
+		// 			.attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
+		// 	}
 	
 	var clickSelect = function() {
 		if (toolButtonClick('#tool_select')) {
@@ -1524,7 +1576,7 @@ function svg_edit_setup() {
 	var zoomImage = function(multiplier) {
 		var res = svgCanvas.getResolution();
 		multiplier = multiplier?res.zoom * multiplier:1;
-// 		setResolution(res.w * multiplier, res.h * multiplier, true);
+		// 		setResolution(res.w * multiplier, res.h * multiplier, true);
 		$('#zoom').val(multiplier * 100);
 		svgCanvas.setZoom(multiplier);
 		zoomDone();
@@ -1532,7 +1584,7 @@ function svg_edit_setup() {
 	};
 	
 	var zoomDone = function() {
-// 		updateBgImage();
+		// 		updateBgImage();
 		updateWireFrame();
 		//updateCanvas(); // necessary?
 	}
@@ -1594,7 +1646,7 @@ function svg_edit_setup() {
 		var cur_bg = 'cur_background';
 		var canvas_bg = $.pref('bkgd_color');
 		var url = $.pref('bkgd_url');
-// 		if(url) url = url[1];
+		// 		if(url) url = url[1];
 		blocks.each(function() {
 			var blk = $(this);
 			var is_bg = blk.css('background-color') == canvas_bg;
@@ -1685,7 +1737,7 @@ function svg_edit_setup() {
 		// set language
 		var lang = $('#lang_select').val();
 		if(lang != curPrefs.lang) {
-			put_locale(svgCanvas, lang);
+					put_locale(Editor, lang);
 		}
 		
 		// set icon size
@@ -1704,7 +1756,7 @@ function svg_edit_setup() {
 		svgCanvas.setBackground(color, url);
 	}
 
-	var setIconSize = function(size) {
+			var setIconSize = Editor.setIconSize = function(size) {
 		if(size == curPrefs.size) return;
 		$.pref('iconsize', size);
 		$('#iconsize').val(size);
@@ -2389,10 +2441,10 @@ function svg_edit_setup() {
 	};
 	populateLayers();
 
-// 	function changeResolution(x,y) {
-// 		var zoom = svgCanvas.getResolution().zoom;
-// 		setResolution(x * zoom, y * zoom);
-// 	}
+		// 	function changeResolution(x,y) {
+		// 		var zoom = svgCanvas.getResolution().zoom;
+		// 		setResolution(x * zoom, y * zoom);
+		// 	}
 	
 	var centerCanvas = function() {
 		// this centers the canvas vertically in the workarea (horizontal handled in CSS)
@@ -2441,21 +2493,21 @@ function svg_edit_setup() {
 		}
 	}
 	
-// 	function setResolution(w, h, center) {
-// 		updateCanvas();
-// // 		w-=0; h-=0;
-// // 		$('#svgcanvas').css( { 'width': w, 'height': h } );
-// // 		$('#canvas_width').val(w);
-// // 		$('#canvas_height').val(h);
-// // 
-// // 		if(center) {
-// // 			var w_area = workarea;
-// // 			var scroll_y = h/2 - w_area.height()/2;
-// // 			var scroll_x = w/2 - w_area.width()/2;
-// // 			w_area[0].scrollTop = scroll_y;
-// // 			w_area[0].scrollLeft = scroll_x;
-// // 		}
-// 	}
+		// 	function setResolution(w, h, center) {
+		// 		updateCanvas();
+		// // 		w-=0; h-=0;
+		// // 		$('#svgcanvas').css( { 'width': w, 'height': h } );
+		// // 		$('#canvas_width').val(w);
+		// // 		$('#canvas_height').val(h);
+		// // 
+		// // 		if(center) {
+		// // 			var w_area = workarea;
+		// // 			var scroll_y = h/2 - w_area.height()/2;
+		// // 			var scroll_x = w/2 - w_area.width()/2;
+		// // 			w_area[0].scrollTop = scroll_y;
+		// // 			w_area[0].scrollLeft = scroll_x;
+		// // 		}
+		// 	}
 
 	$('#resolution').change(function(){
 		var wh = $('#canvas_width,#canvas_height');
@@ -2519,8 +2571,8 @@ function svg_edit_setup() {
 			{sel:'#tool_ungroup', fn: clickGroup, evt: 'click'},
 			{sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'},
 			// these two lines are required to make Opera work properly with the flyout mechanism
-// 			{sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
-// 			{sel:'#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
+		// 			{sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
+		// 			{sel:'#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
 			{sel:'#tool_bold', fn: clickBold, evt: 'mousedown'},
 			{sel:'#tool_italic', fn: clickItalic, evt: 'mousedown'},
 			{sel:'#sidepanel_handle', fn: toggleSidePanel, key: [modKey+'X']},
@@ -2670,52 +2722,6 @@ function svg_edit_setup() {
 	$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
 	$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom });
 	
-	svgCanvas.setIconSize = setIconSize;
-	
-	svgCanvas.setLang = function(lang, strings) {
-		curPrefs.lang = lang;
-		$.pref('lang', lang);
-		$('#lang_select').val(lang);
-		if(strings) {
-			// $.extend will only replace the given strings
-			var oldLayerName = $('#layerlist tr.layersel td.layername').text();
-			var rename_layer = (oldLayerName == uiStrings.layer + ' 1');
-			
-			$.extend(uiStrings,strings);
-			svgCanvas.setUiStrings(strings);
-			Actions.setTitles();
-			
-			if(rename_layer) {
-				svgCanvas.renameCurrentLayer(uiStrings.layer + ' 1');
-				populateLayers();				
-			}
-			
-			svgCanvas.runExtensions("langChanged", lang);
-			
-			// Update flyout tooltips
-			setFlyoutTitles();
-		}
-	};
-	
-	// Extension mechanisms must call setCustomHandlers with two functions: opts.open and opts.save
-	// opts.open's responsibilities are:
-	// 	- invoke a file chooser dialog in 'open' mode
-	//	- let user pick a SVG file
-	//	- calls setCanvas.setSvgString() with the string contents of that file
-	// opts.save's responsibilities are:
-	//	- accept the string contents of the current document 
-	//	- invoke a file chooser dialog in 'save' mode
-	// 	- save the file to location chosen by the user
-	svgCanvas.setCustomHandlers = function(opts) {
-		if(opts.open) {
-			$('#tool_open').show();
-			svgCanvas.open = opts.open;
-		}
-		if(opts.save) {
-			svgCanvas.bind("saved", opts.save);
-		}
-	}
-	
 	// use HTML5 File API: http://www.w3.org/TR/FileAPI/
 	// if browser has HTML5 File API support, then we will show the open menu item
 	// and provide a file input to click.  When that change event fires, it will
@@ -2761,8 +2767,9 @@ function svg_edit_setup() {
 			y: w_area[0].scrollTop + h_orig/2
 		};
 		
-		w = Math.max(w_orig, res.w*3*zoom);
-		h = Math.max(h_orig, res.h*3*zoom);
+				var multi = curConfig.canvas_expansion;
+				w = Math.max(w_orig, res.w * multi * zoom);
+				h = Math.max(h_orig, res.h * multi * zoom);
 		
 		if(w == w_orig && h == h_orig) {
 			workarea.css('overflow','hidden');
@@ -2809,18 +2816,156 @@ function svg_edit_setup() {
 		}
 	}
 
-	$(function() {
+// 			$(function() {
 		updateCanvas(true);
+// 			});
+			
+		//	var revnums = "svg-editor.js ($Rev: 1457 $) ";
+		//	revnums += svgCanvas.getVersion();
+		//	$('#copyright')[0].setAttribute("title", revnums);
+		
+			var good_langs = [];
+
+			$('#lang_select option').each(function() {
+				good_langs.push(this.value);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1452 $) ";
-//	revnums += svgCanvas.getVersion();
-//	$('#copyright')[0].setAttribute("title", revnums);
-	return svgCanvas;
-};
+// 			var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
+			put_locale(Editor, null, good_langs);
 
-// This process starts before document.ready so the icons appear ASAP
-(function() {
+			try{
+				json_encode = function(obj){
+			  //simple partial JSON encoder implementation
+			  if(window.JSON && JSON.stringify) return JSON.stringify(obj);
+			  var enc = arguments.callee; //for purposes of recursion
+			  if(typeof obj == "boolean" || typeof obj == "number"){
+				  return obj+'' //should work...
+			  }else if(typeof obj == "string"){
+				//a large portion of this is stolen from Douglas Crockford's json2.js
+				return '"'+
+					  obj.replace(
+						/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
+					  , function (a) {
+						return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+					  })
+					  +'"'; //note that this isn't quite as purtyful as the usualness
+			  }else if(obj.length){ //simple hackish test for arrayish-ness
+				for(var i = 0; i < obj.length; i++){
+				  obj[i] = enc(obj[i]); //encode every sub-thingy on top
+				}
+				return "["+obj.join(",")+"]";
+			  }else{
+				var pairs = []; //pairs will be stored here
+				for(var k in obj){ //loop through thingys
+				  pairs.push(enc(k)+":"+enc(obj[k])); //key: value
+				}
+				return "{"+pairs.join(",")+"}" //wrap in the braces
+			  }
+			}
+			  window.addEventListener("message", function(e){
+				var cbid = parseInt(e.data.substr(0, e.data.indexOf(";")));
+				try{
+				e.source.postMessage("SVGe"+cbid+";"+json_encode(eval(e.data)), e.origin);
+			  }catch(err){
+				e.source.postMessage("SVGe"+cbid+";error:"+err.message, e.origin);
+			  }
+			}, false)
+			}catch(err){
+			  window.embed_error = err;
+			}
+			
+		
+		
+			// For Compatibility with older extensions
+			$(function() {
+				window.svgCanvas = svgCanvas;
+				svgCanvas.ready = svgEditor.ready;
+			});
+		
+		
+			Editor.setLang = function(lang, strings) {
+				$.pref('lang', lang);
+				$('#lang_select').val(lang);
+				if(strings) {
+					// $.extend will only replace the given strings
+					var oldLayerName = $('#layerlist tr.layersel td.layername').text();
+					var rename_layer = (oldLayerName == uiStrings.layer + ' 1');
+					
+					$.extend(uiStrings,strings);
+					svgCanvas.setUiStrings(strings);
+					Actions.setTitles();
+					
+					if(rename_layer) {
+						svgCanvas.renameCurrentLayer(uiStrings.layer + ' 1');
+						populateLayers();				
+					}
+					
+					svgCanvas.runExtensions("langChanged", lang);
+					
+					// Update flyout tooltips
+					setFlyoutTitles();
+				}
+			};
+		};
+		
+		var callbacks = [];
+		
+		Editor.ready = function(cb) {
+			if(!is_ready) {
+				callbacks.push(cb);
+			} else {
+				cb();
+			}
+		};
+
+		Editor.runCallbacks = function() {
+			$.each(callbacks, function() {
+				this();
+			});
+			is_ready = true;
+		};
+		
+		Editor.loadFromString = function(str) {
+			Editor.ready(function() {
+				svgCanvas.setSvgString(str);
+			});
+		};
+		
+		Editor.loadFromURL = function(url) {
+			Editor.ready(function() {
+				$.ajax({
+					'url': url,
+					'dataType': 'text',
+					success: svgCanvas.setSvgString,
+					error: function(xhr) {
+						if(xhr.responseText) {
+							svgCanvas.setSvgString(xhr.responseText);
+						}
+					}
+				});
+			});
+		};
+		
+		Editor.loadFromDataURI = function(str) {
+			Editor.ready(function() {
+				svgCanvas.setSvgString(str);
+				var pre = 'data:image/svg+xml;base64,';
+				var src = str.substring(pre.length);
+				svgCanvas.setSvgString(Utils.decode64(src));
+			});
+		};
+		
+		Editor.addExtension = function() {
+			var args = arguments;
+			$(function() {
+				svgCanvas.addExtension.apply(this, args);
+			});
+		};
+		
+		return Editor;
+	}();
+	
+	// This process starts before document.ready so the icons appear ASAP
 	$.svgIcons('images/svg_edit_icons.svg', {
 		w:24, h:24,
 		id_match: false,
@@ -2956,10 +3101,10 @@ function svg_edit_setup() {
 			var min_height = tleft.offset().top + tleft.outerHeight();
 			var size = $.pref('iconsize');
 			if(size && size != 'm') {
-				svgCanvas.setIconSize(size);				
+				svgEditor.setIconSize(size);				
 			} else if($(window).height() < min_height) {
 				// Make smaller
-				svgCanvas.setIconSize('s');
+				svgEditor.setIconSize('s');
 			}
 			
 			// Look for any missing flyout icons from plugins
@@ -2974,81 +3119,24 @@ function svg_edit_setup() {
 				}
 			});
 			
+			svgEditor.runCallbacks();
+
 			// Load source if given
 			var loc = document.location.href;
 			if(loc.indexOf('source=data') != -1) {
-				var pre = 'source=data:image/svg+xml;base64,';
+				var pre = 'source=';
 				var src = loc.substring(loc.indexOf(pre) + pre.length);
-				svgCanvas.setSvgString(Utils.decode64(src));
+				svgEditor.loadFromDataURI(src);
 			}
 			else if(loc.indexOf('url=') != -1) {
 				var pre = 'url=';
 				var url = loc.substring(loc.indexOf(pre) + pre.length);
-				$.ajax({
-					'url': url,
-					'dataType': 'text',
-					success: svgCanvas.setSvgString,
-					error: function(xhr) {
-						if(xhr.responseText) {
-							svgCanvas.setSvgString(xhr.responseText);
-						}
+				svgEditor.loadFromURL(url);
 					}
-				});
-			}
-			
-			svgCanvas.runCallback();
 		}
 	});
-}());
 
-// This happens when the page is loaded
-$(function() {
-	svgCanvas = svg_edit_setup();
-	var good_langs = [];
-	$('#lang_select option').each(function() {
-		good_langs.push(this.value);
-	});
-	put_locale(svgCanvas, null, good_langs);
+	// Run init once DOM is loaded
+	$(svgEditor.init);
 	
-	try{
-	    json_encode = function(obj){
-      //simple partial JSON encoder implementation
-      if(window.JSON && JSON.stringify) return JSON.stringify(obj);
-      var enc = arguments.callee; //for purposes of recursion
-      if(typeof obj == "boolean" || typeof obj == "number"){
-          return obj+'' //should work...
-      }else if(typeof obj == "string"){
-        //a large portion of this is stolen from Douglas Crockford's json2.js
-        return '"'+
-              obj.replace(
-                /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
-              , function (a) {
-                return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
-              })
-              +'"'; //note that this isn't quite as purtyful as the usualness
-      }else if(obj.length){ //simple hackish test for arrayish-ness
-        for(var i = 0; i < obj.length; i++){
-          obj[i] = enc(obj[i]); //encode every sub-thingy on top
-        }
-        return "["+obj.join(",")+"]";
-      }else{
-        var pairs = []; //pairs will be stored here
-        for(var k in obj){ //loop through thingys
-          pairs.push(enc(k)+":"+enc(obj[k])); //key: value
-        }
-        return "{"+pairs.join(",")+"}" //wrap in the braces
-      }
-    }
-	  window.addEventListener("message", function(e){
-	    var cbid = parseInt(e.data.substr(0, e.data.indexOf(";")));
-	    try{
-        e.source.postMessage("SVGe"+cbid+";"+json_encode(eval(e.data)), e.origin);
-      }catch(err){
-        e.source.postMessage("SVGe"+cbid+";error:"+err.message, e.origin);
-      }
-    }, false)
-	}catch(err){
-	  window.embed_error = err;
-	}
-	
-});
+})();
diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js
index 9c9e819c..b28d4b67 100644
--- a/public/svg-edit/editor/svgcanvas.js
+++ b/public/svg-edit/editor/svgcanvas.js
@@ -82,7 +82,7 @@ if(window.opera) {
 }());
 
 
-function SvgCanvas(container)
+$.SvgCanvas = function(container, config)
 {
 var isOpera = !!window.opera,
 	isWebkit = navigator.userAgent.indexOf("AppleWebKit") != -1,
@@ -169,6 +169,10 @@ var isOpera = !!window.opera,
 		"pathCtrlPtTooltip":"Drag control point to adjust curve properties"
 	},
 	
+	curConfig = {
+		show_outside_canvas: true
+	},
+	
 	toXml = function(str) {
 		return $('<p/>').text(str).html();
 	},
@@ -177,6 +181,10 @@ var isOpera = !!window.opera,
 		return $('<p/>').html(str).text();
 	};
 
+	if(config) {
+		$.extend(curConfig, config);
+	}
+
 	var unit_types = {'em':0,'ex':0,'px':1,'cm':35.43307,'mm':3.543307,'in':90,'pt':1.25,'pc':15,'%':0};
 	
 // These command objects are used for the Undo/Redo stack
@@ -992,7 +1000,7 @@ function BatchCommand(text) {
 		height: 480,
 		x: 640,
 		y: 480,
-		overflow: 'visible',
+		overflow: curConfig.show_outside_canvas?'visible':'hidden',
 		xmlns: svgns,
 		"xmlns:se": se_ns,
 		"xmlns:xlink": xlinkns
@@ -3899,7 +3907,10 @@ function BatchCommand(text) {
 			
 			if(update) {
 				var prev = seg.prev;
-				if(!prev) return segLine;
+				if(!prev) {
+					segLine.setAttribute("display", "none");
+					return segLine;
+				}
 			
 				var pt = getGripPt(prev);
 				// Set start point
@@ -5096,6 +5107,7 @@ function BatchCommand(text) {
 				}
 				else if (current_mode == "pathedit") {
 					this.clear();
+					this.toSelectMode();
 				}
 			},
 			getNodePoint: function() {
@@ -5143,8 +5155,64 @@ function BatchCommand(text) {
 					path.deleteSeg(pt);
 					}
 			
+				// Cleanup
+				var cleanup = function() {
+					var segList = path.elem.pathSegList;
+					var len = segList.numberOfItems;
+					
+					var remItems = function(pos, count) {
+						while(count--) {
+							segList.removeItem(pos);
+						}
+					}
+
+					if(len <= 1) return true;
+					
+					while(len--) {
+						var item = segList.getItem(len);
+						if(item.pathSegType === 1) {
+							var prev = segList.getItem(len-1);
+							var nprev = segList.getItem(len-2);
+							if(prev.pathSegType === 2) {
+								remItems(len-1, 2);
+								cleanup();
+								break;
+							} else if(nprev.pathSegType === 2) {
+								remItems(len-2, 3);
+								cleanup();
+								break;
+							}
+
+						} else if(item.pathSegType === 2) {
+							if(len > 0) {
+								var prev_type = segList.getItem(len-1).pathSegType;
+								// Path has M M  
+								if(prev_type === 2) {
+									remItems(len-1, 1);
+									cleanup();
+									break;
+								// Entire path ends with Z M 
+								} else if(prev_type === 1 && segList.numberOfItems-1 === len) {
+									remItems(len, 1);
+									cleanup();
+									break;
+								}
+							}
+						}
+					}	
+					return false;
+				}
+				
+				cleanup();
+				
+				// Completely delete a path with 1 or 0 segments
+				if(path.elem.pathSegList.numberOfItems <= 1) {
+					pathActions.toSelectMode(path.elem);
+					canvas.deleteSelectedElements();
+					return;
+				}
+				
 				path.init();
-				var sel_pt = sel_pts[0]-1 > 0 ? sel_pts[0]-1 : 1;
 				
 				path.clearSelection();
 				
@@ -5689,7 +5757,7 @@ function BatchCommand(text) {
         	
 			var attrs = {
 				id: 'svgcontent',
-				overflow: 'visible'
+				overflow: curConfig.show_outside_canvas?'visible':'hidden'
 			};
 			
 			// determine proper size
@@ -6376,6 +6444,10 @@ function BatchCommand(text) {
 		pathActions.linkControlPoints(linkPoints);
 	}
 
+	this.getContentElem = function() { return svgcontent; };
+	this.getRootElem = function() { return svgroot; };
+	this.getSelectedElems = function() { return selectedElements; };
+
 	this.getResolution = function() {
 // 		var vb = svgcontent.getAttribute("viewBox").split(' ');
 // 		return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
@@ -8035,24 +8107,18 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1454 $)";
+		return "svgcanvas.js ($Rev: 1456 $)";
 	};
 	
 	this.setUiStrings = function(strs) {
 		$.extend(uiStrings, strs);
 	}
 	
-	this.clear();
-
-	this.ready = function(cb) {
-		this.callback = cb;
+	this.setConfig = function(opts) {
+		$.extend(curConfig, opts);
 	}
 	
-	this.runCallback = function() {
-		if(this.callback) {
-			this.callback();
-		}
-	}
+	this.clear();
 	
 	function getElem(id) {
 		if(svgroot.querySelector) {

From c946c331e1b9fdc2d6271137c8f699cf4f3a5fd4 Mon Sep 17 00:00:00 2001
From: Jacques Distler <distler@golem.ph.utexas.edu>
Date: Fri, 12 Mar 2010 10:48:27 -0600
Subject: [PATCH 2/2] Update extensions for new SVG-Edit API

---
 public/svg-edit/editor/extensions/ext-arrows.js        | 4 +---
 public/svg-edit/editor/extensions/ext-closepath.js     | 4 +---
 public/svg-edit/editor/extensions/ext-foreignobject.js | 4 +---
 public/svg-edit/editor/extensions/ext-helloworld.js    | 4 +---
 public/svg-edit/editor/extensions/ext-itex.js          | 4 +---
 5 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/public/svg-edit/editor/extensions/ext-arrows.js b/public/svg-edit/editor/extensions/ext-arrows.js
index 445c186c..04eca802 100644
--- a/public/svg-edit/editor/extensions/ext-arrows.js
+++ b/public/svg-edit/editor/extensions/ext-arrows.js
@@ -8,8 +8,7 @@
  */
 
  
-$(function() {
-	svgCanvas.addExtension("Arrows", function(S) {
+svgEditor.addExtension("Arrows", function(S) {
 		var svgcontent = S.svgcontent,
 			addElem = S.addSvgElementFromJson,
 			nonce = S.nonce,
@@ -294,5 +293,4 @@ $(function() {
 				
 			}
 		};
-	});
 });
diff --git a/public/svg-edit/editor/extensions/ext-closepath.js b/public/svg-edit/editor/extensions/ext-closepath.js
index e7fcccbe..bf8e72c9 100644
--- a/public/svg-edit/editor/extensions/ext-closepath.js
+++ b/public/svg-edit/editor/extensions/ext-closepath.js
@@ -9,8 +9,7 @@
 
 // This extension adds a simple button to the contextual panel for paths
 // The button toggles whether the path is open or closed
-$(function() {
-	svgCanvas.addExtension("ClosePath", function(S) {
+svgEditor.addExtension("ClosePath", function(S) {
 		var selElems,
 			updateButton = function(path) {
 				var seglist = path.pathSegList,
@@ -90,5 +89,4 @@ $(function() {
 				}
 			}
 		};
-	});
 });
diff --git a/public/svg-edit/editor/extensions/ext-foreignobject.js b/public/svg-edit/editor/extensions/ext-foreignobject.js
index a4a98502..9d401825 100644
--- a/public/svg-edit/editor/extensions/ext-foreignobject.js
+++ b/public/svg-edit/editor/extensions/ext-foreignobject.js
@@ -8,8 +8,7 @@
  *
  */
 
-$(function() {
-	svgCanvas.addExtension("foreignObject", function(S) {
+svgEditor.addExtension("foreignObject", function(S) {
 		var svgcontent = S.svgcontent,
 			addElem = S.addSvgElementFromJson,
 			selElems,
@@ -275,5 +274,4 @@ $(function() {
 				var elem = opts.elems[0];
 			}
 		};
-	});
 });
diff --git a/public/svg-edit/editor/extensions/ext-helloworld.js b/public/svg-edit/editor/extensions/ext-helloworld.js
index 7daf2a3a..a35c2410 100644
--- a/public/svg-edit/editor/extensions/ext-helloworld.js
+++ b/public/svg-edit/editor/extensions/ext-helloworld.js
@@ -13,8 +13,7 @@
  	user the point on the canvas that was clicked on.
 */
  
-$(function() {
-	svgCanvas.addExtension("Hello World", function() {
+svgEditor.addExtension("Hello World", function() {
 
 		return {
 			name: "Hello World",
@@ -75,6 +74,5 @@ $(function() {
 				}
 			}
 		};
-	});
 });
 
diff --git a/public/svg-edit/editor/extensions/ext-itex.js b/public/svg-edit/editor/extensions/ext-itex.js
index c8d20afc..43b1e1b9 100644
--- a/public/svg-edit/editor/extensions/ext-itex.js
+++ b/public/svg-edit/editor/extensions/ext-itex.js
@@ -8,8 +8,7 @@
  *
  */
 
-$(function() {
-	svgCanvas.addExtension("itex", function(S) {
+svgEditor.addExtension("itex", function(S) {
 		var svgcontent = S.svgcontent,
 			addElem = S.addSvgElementFromJson,
 			selElems,
@@ -302,5 +301,4 @@ $(function() {
 				var elem = opts.elems[0];
 			}
 		};
-	});
 });