Update to latet SVG-Edit API

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.addEventListener("load", function() {
+        editor.svgEditor.setCustomHandlers({
-          editor.svgCanvas.setCustomHandlers({
+            'save': function(window,svg){
-             'save': function(window,svg){
+               window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
-                  window.opener.postMessage(svg, window.location.protocol + '//' + window.location.host);
+               window.close();
-                  window.close();
+            }
-                  }
+        });
-          });
+        editor.svgEditor.randomizeIds();
-          editor.svgCanvas.randomizeIds();
+        if (selected) editor.svgEditor.loadFromString(selected);
-          editor.svgCanvas.setSvgString(selected);
+      }, true);
-        }, 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);      
-      }
       SVGeditButton.disabled = true;
       SVGeditButton.value = 'Create SVG graphic';      
       editor.focus();

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"/>
+  <circle stroke-width="0" stroke="#a0a0a0" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
- </svg>
+ <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">

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({

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

@@ -10,8 +10,30 @@
  *
  */
 
-function svg_edit_setup() {
+(function() { 
-	var uiStrings = {
+	
+	
+	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"],
+		var curPrefs = {}; //$.extend({}, defaultPrefs);
-
-		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");
 	
 	// 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 = {
+		Editor.setConfig = function(opts) {
-		lang:'en',
+			$.each(opts, function(key, val) {
-		iconsize:'m',
+				// Only allow prefs defined in defaultPrefs or curConfig
-		bkgd_color:'#FFF',
+				if(key in defaultPrefs) {
-		bkgd_url:'',
+					$.pref(key, val);
-		img_save:'embed'
+				} 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 setIcon = function(holder_sel, id) {
-// 		var icon = $.getSvgIcon(id).clone();
+		// 		var icon = $.getSvgIcon(id).clone();
-// 		var holder = $(holder_sel);
+		// 		var holder = $(holder_sel);
-// 		icon[0].setAttribute('width',holder.width());
+		// 		icon[0].setAttribute('width',holder.width());
-// 		icon[0].setAttribute('height',holder.height());
+		// 		icon[0].setAttribute('height',holder.height());
-// 		holder.empty().append(icon)
+		// 		holder.empty().append(icon)
-// 			.attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
+		// 			.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) {
+		// 	function changeResolution(x,y) {
-// 		var zoom = svgCanvas.getResolution().zoom;
+		// 		var zoom = svgCanvas.getResolution().zoom;
-// 		setResolution(x * zoom, y * 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) {
+		// 	function setResolution(w, h, center) {
-// 		updateCanvas();
+		// 		updateCanvas();
-// // 		w-=0; h-=0;
+		// // 		w-=0; h-=0;
-// // 		$('#svgcanvas').css( { 'width': w, 'height': h } );
+		// // 		$('#svgcanvas').css( { 'width': w, 'height': h } );
-// // 		$('#canvas_width').val(w);
+		// // 		$('#canvas_width').val(w);
-// // 		$('#canvas_height').val(h);
+		// // 		$('#canvas_height').val(h);
-// // 
+		// // 
-// // 		if(center) {
+		// // 		if(center) {
-// // 			var w_area = workarea;
+		// // 			var w_area = workarea;
-// // 			var scroll_y = h/2 - w_area.height()/2;
+		// // 			var scroll_y = h/2 - w_area.height()/2;
-// // 			var scroll_x = w/2 - w_area.width()/2;
+		// // 			var scroll_x = w/2 - w_area.width()/2;
-// // 			w_area[0].scrollTop = scroll_y;
+		// // 			w_area[0].scrollTop = scroll_y;
-// // 			w_area[0].scrollLeft = scroll_x;
+		// // 			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_rect_show', fn: clickRect, evt: 'click'},
-// 			{sel:'#tools_ellipse_show', fn: clickEllipse, 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);
+				var multi = curConfig.canvas_expansion;
-		h = Math.max(h_orig, res.h*3*zoom);
+				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 $) ";
+// 			var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
-//	revnums += svgCanvas.getVersion();
+			put_locale(Editor, null, good_langs);
-//	$('#copyright')[0].setAttribute("title", revnums);
-	return svgCanvas;
-};
 
-// This process starts before document.ready so the icons appear ASAP
+			try{
-(function() {
+				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({
+				svgEditor.loadFromURL(url);
-					'url': url,
-					'dataType': 'text',
-					success: svgCanvas.setSvgString,
-					error: function(xhr) {
-						if(xhr.responseText) {
-							svgCanvas.setSvgString(xhr.responseText);
-						}
 					}
-				});
-			}
-			
-			svgCanvas.runCallback();
 		}
 	});
-}());
 
-// This happens when the page is loaded
+	// Run init once DOM is loaded
-$(function() {
+	$(svgEditor.init);
-	svgCanvas = svg_edit_setup();
-	var good_langs = [];
-	$('#lang_select option').each(function() {
-		good_langs.push(this.value);
-	});
-	put_locale(svgCanvas, null, good_langs);
 	
-	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;
-	}
-	
-});

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,25 +8107,19 @@ 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.setConfig = function(opts) {
+		$.extend(curConfig, opts);
+	}
+	
 	this.clear();
 	
-	this.ready = function(cb) {
-		this.callback = cb;
-	}
-	
-	this.runCallback = function() {
-		if(this.callback) {
-			this.callback();
-		}
-	}
-	
 	function getElem(id) {
 		if(svgroot.querySelector) {
 			// querySelector lookup