From d60fb28557913afd91e26d1e5a34ceeebaa60f4f Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 26 Jan 2010 21:28:52 +0000
Subject: [PATCH] Made improvements to extension support as well as connector
 extension

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1279 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/ext-connector.js | 174 +++++++++++++++++++++++++++++++++-------
 editor/locale/locale.js |   4 +
 editor/svg-editor.css   |   2 +-
 editor/svg-editor.html  | 167 ++++++++++++++++++++++----------------
 editor/svg-editor.js    |  15 ++--
 editor/svgcanvas.js     |  23 +++++-
 6 files changed, 276 insertions(+), 109 deletions(-)

diff --git a/editor/ext-connector.js b/editor/ext-connector.js
index dff8f08e..2c95ea74 100644
--- a/editor/ext-connector.js
+++ b/editor/ext-connector.js
@@ -1,11 +1,13 @@
 $(function() {
 	svgCanvas.addExtension("Connector", function(vars) {
 		
-		var svgcontent = vars.content;
-		var getNextId = vars.getNextId;
-		var addElem = vars.addSvgElementFromJson;
-		var selManager = vars.selectorManager;
-		var started = false,
+		var svgcontent = vars.content,
+			svgroot = vars.root,
+			getNextId = vars.getNextId,
+			getElem = vars.getElem,
+			addElem = vars.addSvgElementFromJson,
+			selManager = vars.selectorManager,
+			started = false,
 			start_x,
 			start_y,
 			cur_line,
@@ -15,13 +17,124 @@ $(function() {
 			conn_class = "se_connect",
 			connect_str = "-SE_CONNECT-",
 			selElems;
+			
+		var lang_list = {
+			"en":[
+				{"id": "mode_connect", "title": "Connect two objects" },
+				{"id": "conn_arrow_none", "textContent": "No arrow" },
+				{"id": "conn_arrow_arrow", "textContent": "Arrow" }
+			],
+			"fr":[
+				{"id": "mode_connect", "title": "Connecter deux objets"},
+				{"id": "conn_arrow_none", "textContent": "Sans flèche" },
+				{"id": "conn_arrow_arrow", "textContent": "Flèche" }
+			]
+		};
+		
+		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);
+			
+			if(on) {
+				var has_arrow = selElems[0].getAttribute("marker-mid");
+				$("#connector_arrow").val(has_arrow?"arrow":"none");
+			}
+		}
+		
+		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);
+			}
+		}
+		
+		function addArrow() {
+			var defs = vars.findDefs();
+			var m_id = "se_connector_arrow";
+			var marker = getElem(m_id);
+			
+			if(!marker) {
+				marker = addElem({
+					"element": "marker",
+					"attr": {
+						"viewBox": "0 0 10 10",
+						"id": m_id,
+						"refX": 5,
+						"refY": 5,
+						"markerUnits": "strokeWidth",
+						"markerWidth": 16,
+						"markerHeight": 14,
+						"orient": "auto"
+					}
+				});
+				var arrow = addElem({
+					"element": "path",
+					"attr": {
+						"d": "M0,0 L10,5 L0,10 z",
+						"fill": "#000"
+					}
+				});
+				
+				marker.appendChild(arrow);
+				defs.appendChild(marker);
+			}
+			
+			selElems[0].setAttribute("marker-mid", "url(#" + m_id + ")");
+		}
+
+		function remArrow() {
+			selElems[0].removeAttribute("marker-mid");
+		}
 		
 		// Init code
-// 		(function() {
-// 
-// 
-// 		}());
-		
+		(function() {
+			var conn_tools = $('<div id="connector_panel">\
+			<label><select id="connector_arrow">\
+			<option id="conn_arrow_none" value="none">No arrow</option>\
+			<option id="conn_arrow_arrow" value="arrow">Arrow</option>\
+			</select></label></div>"').hide().appendTo("#tools_top");
+			
+			$('#connector_arrow').change(function() {
+				switch ( this.value ) {
+					case "arrow":
+						addArrow();
+						break;
+					case "none":
+						remArrow();
+						break;
+				}
+			});
+
+			vars.extendWhitelist({
+				"marker": ["viewBox", "id", "refX", "refY", "markerUnits", "markerWidth", "markerHeight", "orient"],
+				"polyline": ["class", "marker-mid"]
+			});
+		}());
 		
 		return {
 			name: "Connector",
@@ -30,12 +143,18 @@ $(function() {
 				id: "mode_connect",
 				type: "mode",
 				icon: "images/cut.png",
+				title: "Connect two objects",
 				events: {
 					'click': function() {
 						svgCanvas.setMode("connector");
 					}
 				}
 			}],
+			addLangData: function(lang) {
+				return {
+					data: lang_list[lang]
+				};
+			},
 			mouseDown: function(opts) {
 				var e = opts.event;
 				
@@ -58,13 +177,9 @@ $(function() {
 						
 						started = true;
 						cur_line = addElem({
-							"element": "line",
+							"element": "polyline",
 							"attr": {
-								"x1": x,
-								"y1": y,
-								"x2": start_x,
-								"y2": start_y,
-								"id": getNextId(),
+								"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
 								"stroke": '#000',
 								"stroke-width": 1,
 								"fill": "none",
@@ -103,7 +218,6 @@ $(function() {
 								var bb = svgCanvas.getStrokedBBox([elem]);
 								var x = bb.x + bb.width/2;
 								var y = bb.y + bb.height/2;
-								
 								connections.push({
 									elem: elem,
 									connector: this,
@@ -128,8 +242,8 @@ $(function() {
 				var mode = svgCanvas.getMode();
 				
 				if(mode == "connector" && started) {
-					cur_line.setAttributeNS(null, "x2", x);
-					cur_line.setAttributeNS(null, "y2", y);
+					// Set middle point for marker
+					setPoint(cur_line, 'end', x, y, true);
 				} else if(mode == "select") {
 					var slen = selElems.length;
 					
@@ -141,18 +255,16 @@ $(function() {
 							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 n = conn.is_start ? 1 : 2;
-							line.setAttributeNS(null, "x"+n, conn.start_x + diff_x);
-							line.setAttributeNS(null, "y"+n, conn.start_y + diff_y);
+							var pt_x = conn.start_x + diff_x;
+							var pt_y = conn.start_y + diff_y;
+							setPoint(line, conn.is_start?0:'end', pt_x, pt_y, true);
 						}
 					}
 				} 
@@ -200,10 +312,8 @@ $(function() {
 						var bb = svgCanvas.getStrokedBBox([end_elem]);
 						var x = bb.x + bb.width/2;
 						var y = bb.y + bb.height/2;
-						cur_line.setAttributeNS(null, "x2", x);
-						cur_line.setAttributeNS(null, "y2", y);
+						setPoint(cur_line, 'end', x, y, true);
 						cur_line.id = line_id;
-						console.log('cur_line',cur_line.id);
 						cur_line.setAttribute("class", conn_class);
 						svgCanvas.addToSelection([cur_line]);
 						svgCanvas.moveToBottomSelectedElement();
@@ -224,8 +334,6 @@ $(function() {
 				
 				var i = selElems.length;
 				
-// 				var to_hide = $('#tool_clone, #tool_topath, div.toolset:has(#angle), #line_panel');
-				
 				while(i--) {
 					var elem = selElems[i];
 					if(elem && elem.getAttribute('class') == conn_class) {
@@ -233,9 +341,13 @@ $(function() {
 						
 						if(opts.selectedElement && !opts.multiselected) {
 							// TODO: Set up context tools and hide most regular line tools
-
+							showPanel(true);
+						} else {
+							showPanel(false);
 						}
-					} 
+					} else {
+						showPanel(false);
+					}
 				}
 			}
 		};
diff --git a/editor/locale/locale.js b/editor/locale/locale.js
index 042a04b7..be0a3533 100644
--- a/editor/locale/locale.js
+++ b/editor/locale/locale.js
@@ -37,6 +37,10 @@ var put_locale = function(svgCanvas, given_param){
 	
 	var processFile = function(data){
 		var LangData = eval(data), js_strings;
+		var more = svgCanvas.runExtensions("addLangData", lang_param);
+		if(more) {
+			LangData = $.merge(LangData, more.data);
+		}
 		$.each(LangData, function(i, data) {
 			if(data.id) {
 				var elem = $('#'+data.id)[0];
diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index ad7ea81e..f3b5f357 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -422,7 +422,7 @@
 }
 
 #tools_top label {
-	margin-top: 3px;
+	margin-top: 0;
 	margin-left: 5px;
 }
 
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 0898b4d2..1e3c82f9 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -147,9 +147,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<div class="push_button" id="tool_reorient" title="Reorient path"></div>
 			<div class="tool_sep"></div>
 		</div>
-		<div class="toolset">
-			<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
-			<input id="group_opacity" class="selected_tool" title="Change selected item opacity" size="3" value="100" type="text"/>
+		<div class="toolset" id="tool_opacity">
+			<label>
+				<span id="group_opacityLabel">opac:</span>
+				<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
+			</label>
 			<div id="opacity_dropdown" class="dropdown">
 				<button></button>
 				<ul>
@@ -163,15 +165,19 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				</ul>
 			</div>
 		</div>
-		<div class="toolset">
-			<label id="angleLabel" class="selected_tool">angle:</label>
-			<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
-		</div>
+
+		<label id="tool_angle">
+			<span id="angleLabel">angle:</span>
+			<input id="angle" title="Change rotation angle" size="2" value="0" type="text"/>
+		</label>
+		
 		<div id="xy_panel" class="toolset">
-			<label class="selected_tool">x:</label>
-			<input id="selected_x" class="selected_tool attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
-			<label class="selected_tool">y:</label>
-			<input id="selected_y" class="selected_tool attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
+			<label>
+				x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
+			</label>
+			<label>
+				y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
+			</label>
 		</div>
 	</div>
 
@@ -188,13 +194,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<div class="push_button" id="tool_aligntop" title="Align Top"></div>
 		<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
 		<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
-		<span id="relativeToLabel" class="selected_tool">relative to:</span>
-		<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
-		<option id="selected_objects" value="selected">selected objects</option>
-		<option id="largest_object" value="largest">largest object</option>
-		<option id="smallest_object" value="smallest">smallest object</option>
-		<option id="page" value="page">page</option>
-		</select>
+		<label id="tool_align_relative"> 
+			<span id="relativeToLabel">relative to:</span>
+			<select id="align_relative_to" title="Align relative to ...">
+			<option id="selected_objects" value="selected">selected objects</option>
+			<option id="largest_object" value="largest">largest object</option>
+			<option id="smallest_object" value="smallest">smallest object</option>
+			<option id="page" value="page">page</option>
+			</select>
+		</label>
 		<div class="tool_sep"></div>
 
 	</div>
@@ -206,72 +214,89 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 
 	<div id="rect_panel">
 		<div class="toolset">
-			<label id="rwidthLabel" class="rect_tool">width:</label>
-			<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
-			<label id="rheightLabel" class="rect_tool">height:</label>
-			<input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
+			<label>
+				<span id="rwidthLabel">width:</span>
+				<input id="rect_width" class="attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
+			</label>
+			<label>
+				<span id="rheightLabel">height:</span>
+				<input id="rect_height" class="attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
+			</label>
 		</div>
-		<div class="toolset">
-			<label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label>
-			<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
-		</div>	
+		<label id="cornerRadiusLabel">Corner Radius:
+			<input id="rect_rx" size="3" value="0" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
+		</label>
 	</div>
 
 	<div id="image_panel">
 	<div class="toolset">
-		<label id="iwidthLabel" class="image_tool">width:</label>
-		<input id="image_width" class="image_tool attr_changer" title="Change image width" size="3" data-attr="width"/>
-		<label id="iheightLabel" class="image_tool">height:</label>
-		<input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
+		<label id="iwidthLabel"><span id="iwidthLabel">width:</span>
+		<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
+		</label>
+		<label><span id="iheightLabel">height:</span>
+		<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
+		</label>
 	</div>
 	<div class="toolset">
-		<label class="image_tool">url:</label>
-		<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
-		<button id="change_image_url" style="display:none;">Change Image</button>
-		<div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></div>
+		<label id="tool_image_url">url:
+			<input id="image_url" type="text" title="Change URL" size="35"/>
+			<button id="change_image_url" style="display:none;">Change Image</button>
+			<div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></div>
+		</label>
 	</div>
   </div>
 
 	<div id="circle_panel">
 		<div class="toolset">
-			<label class="circle_tool">cx:</label>
-			<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
-			<label class="circle_tool">cy:</label>
-			<input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
+			<label id="tool_ellipse_cx">cx:
+			<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
+			</label>
+			<label id="tool_ellipse_cy">cy:
+			<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
+			</label>
 		</div>
 		<div class="toolset">
-			<label class="circle_tool">r:</label>
-			<input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
+			<label id="tool_ellipse_r">r:
+			<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
+			</label>
 		</div>
 	</div>
 
 	<div id="ellipse_panel">
 		<div class="toolset">
-			<label class="ellipse_tool">cx:</label>
-			<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
-			<label class="ellipse_tool">cy:</label>
-			<input id="ellipse_cy" class="ellipse_tool attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
-			</div>
+			<label id="tool_ellipse_cx">cx:
+			<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
+			</label>
+			<label id="tool_ellipse_cy">cy:
+			<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
+			</label>
+		</div>
 		<div class="toolset">
-			<label class="ellipse_tool">rx:</label>
-			<input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
-			<label class="ellipse_tool">ry:</label>
-			<input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
+			<label id="tool_ellipse_rx">rx:
+			<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
+			</label>
+			<label id="tool_ellipse_ry">ry:
+			<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
+			</label>
 		</div>
 	</div>
 
 	<div id="line_panel">
 		<div class="toolset">
-			<label class="line_tool">x1:</label>
-			<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
-			<label class="line_tool">y1:</label>
-			<input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
+			<label id="tool_line_x1">x1:
+			<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
+			</label>
+			<label id="tool_line_y1">y1:
+			<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
+			</label>
 		</div>
 		<div class="toolset">
-			<label class="line_tool">x2:</label>
-			<input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
-			<label class="line_tool">y2:</label>
-			<input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
+			<label id="tool_line_x2">x2:
+			<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
+			</label>
+			<label id="tool_line_y2">y2:
+			<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
+			</label>
 		</div>
 	</div>
 
@@ -281,8 +306,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
 		</div>
 		
-		<div class="toolset">
-			<input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/>
+		<div class="toolset" id="tool_font_family">
+			<input id="font_family" type="text" title="Change Font Family" size="12"/>
 			<div id="font_family_dropdown" class="dropdown">
 				<button></button>
 				<ul>
@@ -295,22 +320,24 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			</div>
 		</div>
 
-		<div class="toolset">
-			<label id="font_sizeLabel" class="text_tool" for="font_size">size:</label>
-			<input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
-		</div>
-		<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
+		<label id="tool_font_size">
+			<span id="font_sizeLabel">size:</span>
+			<input id="font_size" title="Change Font Size" size="3" value="0" type="text"/>
+		</label>
+		<input id="text" type="text" title="Change text contents" size="35"/>
 	</div>
 	
 	<div id="path_node_panel">
 		<div class="tool_sep"></div>
 		<div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
 		<div class="tool_sep"></div>
-		<label class="path_node_tool">x:</label>
-		<input id="path_node_x" class="path_node_tool attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
-		<label class="path_node_tool">y:</label>
-		<input id="path_node_y" class="path_node_tool attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
-		<select id="seg_type" class="path_node_tool" title="Change Segment type">
+		<label id="tool_node_x">x:
+			<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
+		</label>
+		<label id="tool_node_y">y:</label>
+			<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
+		</label>
+		<select id="seg_type" title="Change Segment type">
 			<option id="straight_segments" selected="selected" value="4">Straight</option>
 			<option id="curve_segments" value="6">Curve</option>
 		</select>
@@ -339,7 +366,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
     <!-- Zoom buttons -->
 	<div id="zoom_panel" class="magic_field">
 		<span id="zoomLabel" class="zoom_tool label">zoom:</span>
-		<input id="zoom" class="zoom_tool" title="Change zoom level" size="3" value="100" type="text" />
+		<input id="zoom" title="Change zoom level" size="3" value="100" type="text" />
 		<div id="zoom_dropdown" class="dropdown">
 			<button></button>
 			<ul>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index bb5e74d9..10fb7d66 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -298,6 +298,7 @@ function svg_edit_setup() {
 				
 				var button = $('<div/>')
 					.attr("id", id)
+					.attr("title", btn.title)
 					.addClass(cls)
 					.appendTo(parent);
 				if(!svgicons) {
@@ -1443,17 +1444,18 @@ function svg_edit_setup() {
 			"#tools_top > div, #tools_top": {
 				'line-height': {s: '17px', l: '34px', xl: '50px'}
 			}, 
-			"div.toolset": {
-				'height': {s: '25px', l: '43px', xl: '64px'}
-			}, 
+// 			"div.toolset, #tools_top label": {
+// 				'height': {s: '25px', l: '43px', xl: '64px'}
+// 			}, 
 			".dropdown button": {
 				'height': {s: '18px', l: '34px', xl: '40px'},
 				'line-height': {s: '18px', l: '34px', xl: '40px'},
 				'margin-top': {s: '3px'}
 			},
-			"#tools_top label, #tools_bottom label": {
+			"div.toolset, #tools_top label, #tools_bottom label": {
 				'font-size': {s: '1em', l: '1.5em', xl: '2em'},
-				'margin-top': {s: '1px', l: '3px', xl: '5px'}
+				'margin-top': {s: '1px', l: '3px', xl: '5px'},
+				'height': {s: '25px', l: '43px', xl: '64px'}
 			}, 
 			"#tool_bold, #tool_italic": {
 				'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
@@ -2322,7 +2324,8 @@ function svg_edit_setup() {
 				svgCanvas.renameCurrentLayer(uiStrings.layer + ' 1');
 				populateLayers();				
 			}
-
+			
+			svgCanvas.runExtensions("langChanged", lang);
 		}
 	};
 	
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index f7526d53..4110e4b8 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -977,9 +977,30 @@ function BatchCommand(text) {
 			// Provide constants here (or should these be accessed through getSomething()?
 			var ext = ext_func({
 				content: svgcontent,
+				root: svgroot,
 				getNextId: getNextId,
+				getElem: getElem,
 				addSvgElementFromJson: addSvgElementFromJson,
-				selectorManager: selectorManager
+				selectorManager: selectorManager,
+				findDefs: findDefs,
+				// Probably only needed for extensions, so no need to make public?
+				// Also, should we prevent extensions from allowing <script> elements to be added?
+				extendWhitelist: function(new_data) {
+					$.each(new_data, function(elname, attrs) {
+						// add element
+						if(!(elname in svgWhiteList)) {
+							svgWhiteList[elname] = attrs;
+						} else {
+							$.each(attrs, function(i, attr) {
+								// add attributes
+								if($.inArray(attr, svgWhiteList[elname]) == -1) {
+									svgWhiteList[elname].push(attr);
+								}
+							});
+						}
+					});
+				}
+
 			});
 			extensions[name] = ext;
 			call("extension_added", ext);