From 57125bc237935b5b8cec30d6ad0a438161e138a4 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 16 Feb 2010 21:07:13 +0000
Subject: [PATCH] Made extension improvements to svg-editor.js and added
 foreignObject plugin based on patch by Jaques Distler (disabled by default)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1395 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/extensions/ext-foreignobject.js    | 271 ++++++++++++++++++++++
 editor/extensions/foreignobject-icons.xml |  96 ++++++++
 editor/svg-editor.css                     |  12 +-
 editor/svg-editor.html                    |   1 +
 editor/svg-editor.js                      | 156 +++++++------
 5 files changed, 456 insertions(+), 80 deletions(-)
 create mode 100644 editor/extensions/ext-foreignobject.js
 create mode 100644 editor/extensions/foreignobject-icons.xml

diff --git a/editor/extensions/ext-foreignobject.js b/editor/extensions/ext-foreignobject.js
new file mode 100644
index 00000000..4bb9ba23
--- /dev/null
+++ b/editor/extensions/ext-foreignobject.js
@@ -0,0 +1,271 @@
+/*
+ * ext-foreignobject.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Jacques Distler 
+ * Copyright(c) 2010 Alexis Deveria 
+ *
+ */
+
+$(function() {
+	svgCanvas.addExtension("foreignObject", function(S) {
+		var svgcontent = S.svgcontent,
+			addElem = S.addSvgElementFromJson,
+			selElems,
+			svgns = "http://www.w3.org/2000/svg",
+			xlinkns = "http://www.w3.org/1999/xlink",
+			xmlns = "http://www.w3.org/XML/1998/namespace",
+			xmlnsns = "http://www.w3.org/2000/xmlns/",
+			se_ns = "http://svg-edit.googlecode.com",
+			htmlns = "http://www.w3.org/1999/xhtml",
+			mathns = "http://www.w3.org/1998/Math/MathML",
+			editingforeign = false,
+			svgdoc = S.svgroot.parentNode.ownerDocument;
+			
+			
+		var properlySourceSizeTextArea = function(){
+			// TODO: remove magic numbers here and get values from CSS
+			var height = $('#svg_source_container').height() - 80;
+			$('#svg_source_textarea').css('height', height);
+		};
+
+		function showPanel(on) {
+			var fc_rules = $('#fc_rules');
+			if(!fc_rules.length) {
+				fc_rules = $('<style id="fc_rules"><\/style>').appendTo('head');
+			} 
+			fc_rules.text(!on?"":" #tool_topath { display: none !important; }");
+			$('#foreignObject_panel').toggle(on);
+		}
+
+		function toggleSourceButtons(on) {
+			$('#tool_source_save, #tool_source_cancel').toggle(!on);
+			$('#foreign_save, #foreign_cancel').toggle(on);
+		}
+		
+			
+		// Function: setForeignString(xmlString, elt)
+		// This function sets the content of element elt to the input XML.
+		//
+		// Parameters:
+		// xmlString - The XML text.
+		// elt - the parent element to append to
+		//
+		// Returns:
+		// This function returns false if the set was unsuccessful, true otherwise.
+		function setForeignString(xmlString) {
+			var elt = selElems[0];
+			try {
+				// convert string into XML document
+				var newDoc = Utils.text2xml('<svg xmlns="'+svgns+'" xmlns:xlink="'+xlinkns+'">'+xmlString+'</svg>');
+				// run it through our sanitizer to remove anything we do not support
+				S.sanitizeSvg(newDoc.documentElement);
+				
+				elt.parentNode.replaceChild(svgdoc.importNode(newDoc.documentElement.firstChild, true), elt);
+				S.call("changed", [elt]);
+				svgCanvas.clearSelection();
+			} catch(e) {
+				console.log(e);
+				return false;
+			}
+	
+			return true;
+		};
+
+		function showForeignEditor() {
+			var elt = selElems[0];
+			if (!elt || editingforeign) return;
+			editingforeign = true;
+			toggleSourceButtons(true);
+			elt.removeAttribute('fill');
+
+			var str = S.svgToString(elt, 0);
+			$('#svg_source_textarea').val(str);
+			$('#svg_source_editor').fadeIn();
+			properlySourceSizeTextArea();
+			$('#svg_source_textarea').focus();
+		}
+		
+		function setAttr(attr, val) {
+			svgCanvas.changeSelectedAttribute(attr, val);
+			S.call("changed", selElems);
+		}
+		
+		
+		return {
+			name: "foreignObject",
+			svgicons: "extensions/foreignobject-icons.xml",
+			buttons: [{
+				id: "tool_foreign",
+				type: "mode",
+				title: "Foreign Object Tool",
+				events: {
+					'click': function() {
+						svgCanvas.setMode('foreign')
+					}
+				}
+			},{
+				id: "edit_foreign",
+				type: "context",
+				panel: "foreignObject_panel",
+				title: "Edit ForeignObject Content",
+				events: {
+					'click': function() {
+						showForeignEditor();
+					}
+				}
+			}],
+			
+			context_tools: [{
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's width",
+				id: "foreign_width",
+				label: "w",
+				size: 3,
+				events: {
+					change: function() {
+						setAttr('width', this.value);
+					}
+				}
+			},{
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's height",
+				id: "foreign_height",
+				label: "h",
+				events: {
+					change: function() {
+						setAttr('height', this.value);
+					}
+				}
+			}, {
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's height",
+				id: "foreign_font_size",
+				label: "font-size",
+				size: 2,
+				defval: 16,
+				events: {
+					change: function() {
+						setAttr('font-size', this.value);
+					}
+				}
+			}
+			
+			
+			],
+			callback: function() {
+				$('#foreignObject_panel').hide();
+
+				var endChanges = function() {
+					$('#svg_source_editor').hide();
+					editingforeign = false;
+					$('#svg_source_textarea').blur();
+					toggleSourceButtons(false);
+				}
+
+				// TODO: Needs to be done after orig icon loads
+				setTimeout(function() {				
+					// Create source save/cancel buttons
+					var save = $('#tool_source_save').clone()
+						.hide().attr('id', 'foreign_save').unbind()
+						.appendTo("#tool_source_back").click(function() {
+							
+							if (!editingforeign) return;
+
+							if (!setForeignString($('#svg_source_textarea').val())) {
+								$.confirm("Errors found. Revert to original?", function(ok) {
+									if(!ok) return false;
+									endChanges();
+								});
+							} else {
+								endChanges();
+							}
+							// setSelectMode();	
+						});
+						
+					var cancel = $('#tool_source_cancel').clone()
+						.hide().attr('id', 'foreign_cancel').unbind()
+						.appendTo("#tool_source_back").click(function() {
+							endChanges();
+						});
+					
+				}, 3000);
+			},
+			mouseDown: function(opts) {
+				var e = opts.event;
+				
+				if(svgCanvas.getMode() == "foreign") {
+
+					var newText = S.addSvgElementFromJson({
+						"element": "foreignObject",
+						"attr": {
+							"x": opts.start_x,
+							"y": opts.start_y,
+							"id": S.getNextId(),
+							"font-size": 16, //cur_text.font_size,
+							"width": "24",
+							"height": "24",
+							"style": "pointer-events:inherit"
+						}
+					});
+					var m = svgdoc.createElementNS(mathns, 'math');
+					m.setAttributeNS(xmlnsns, 'xmlns', mathns);
+					m.setAttribute('display', 'inline');
+					var mi = svgdoc.createElementNS(mathns, 'mo');
+					mi.textContent = "\u03A6";
+					m.appendChild(mi);
+					newText.appendChild(m);
+					return {
+						started: true
+					}
+				}
+			},
+			mouseUp: function(opts) {
+				var e = opts.event;
+				
+				if(svgCanvas.getMode() == "foreign") {
+					var attrs = $(e.target).attr(["width", "height"]);
+					keep = (attrs.width != 0 || attrs.height != 0);
+					
+					svgCanvas.addToSelection([e.target], true);
+					return {
+						keep: keep,
+						element: e.target
+					}
+
+				}
+				
+			},
+			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.tagName == "foreignObject") {
+						if(opts.selectedElement && !opts.multiselected) {
+							$('#foreign_font_size').val(elem.getAttribute("font-size"));
+							$('#foreign_width').val(elem.getAttribute("width"));
+							$('#foreign_height').val(elem.getAttribute("height"));
+						
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+			}
+		};
+	});
+});
diff --git a/editor/extensions/foreignobject-icons.xml b/editor/extensions/foreignobject-icons.xml
new file mode 100644
index 00000000..0d34654a
--- /dev/null
+++ b/editor/extensions/foreignobject-icons.xml
@@ -0,0 +1,96 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+	<g id="tool_foreign">
+		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 84 84">
+		  <g fill="#444" opacity="0.2" transform="translate(6,6)">
+		  <path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		  <g fill="#444" opacity="0.3" transform="translate(4,4)">
+		  <path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		  <g fill="#444" opacity="0.5" transform="translate(2,2)">
+		  <path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		  <g fill="#0000CC">
+		  <path id="xyz321" d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		</svg>
+	</g>
+	
+	<g id="edit_foreign">
+		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="34 38 170 170" overflow="hidden">
+		<g fill="#000088">
+			<path d="M30.1,63.9v-4.3l30.2-14.9V50L36.5,61.7l23.8,11.7v5.3L30.1,63.9z"/>
+			<path d="M106.1,79.7v-1.1c4.2-0.5,4.8-1.1,4.8-5.2V58.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
+				c0,4.5,1.1,5.7,5.2,5.8v1.1H86.8v-1.1c4.1-0.3,4.9-1.1,4.9-5.1V57.9c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
+				c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V55.4c0-3.5-0.6-4.6-2.5-4.6
+				c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
+				c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H106.1z"/>
+			<path d="M147.3,80.5c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
+				c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
+				c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
+				c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C151.3,79.6,149.8,80.5,147.3,80.5z M142.6,60.5c-8.7,3.2-11.7,5.8-11.7,10v0.3
+				c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V60.5z"/>
+			<path d="M165.3,80.5c-4.2,0-6.3-3.1-6.3-9.1V49.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
+				c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
+				c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C171.8,78.7,169,80.5,165.3,80.5z"/>
+			<path d="M193.8,79.7v-1.1c4.1-0.4,4.9-1.3,4.9-6.2V58.1c0-5-1.8-7.6-5.4-7.6c-2.8,0-5,1.2-8,4.5v17.4
+				c0,5,0.7,5.8,4.9,6.3v1.1h-15.6v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V38.5c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2l1.9-0.6
+				c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c3.3-4.3,6.3-6,10.6-6c5.9,0,8.9,3.9,8.9,11.5v14.3c0,5,0.4,5.5,4.3,6.3v1.1h-15.2V79.7z"/>
+			<path d="M59.1,116.1v-4.3l30.2-14.9v5.3l-23.8,11.7l23.8,11.7v5.3L59.1,116.1z"/>
+			<path d="M135.1,131.9v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.1c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
+				c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.7c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
+				c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5v-18.2c0-3.5-0.6-4.6-2.5-4.6
+				c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
+				c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H135.1z"/>
+			<path d="M152.1,131.9v-1.1c5-0.3,5.7-1.1,5.7-6.3v-16.6c0-3.2-0.6-4.3-2.4-4.3c-0.6,0-1.6,0.1-2.4,0.2l-0.6,0.1v-1.1
+				l11.2-4L164,99v25.6c0,5.2,0.6,5.9,5.3,6.3v1.1L152.1,131.9L152.1,131.9z M160.8,93.1c-2,0-3.7-1.6-3.7-3.7c0-2,1.7-3.7,3.7-3.7
+				c2.1,0,3.7,1.7,3.7,3.7C164.6,91.6,163,93.1,160.8,93.1z"/>
+			<path d="M175.8,131v-5.3l23.7-11.8l-23.7-11.7v-5.3l30.1,14.9v4.3L175.8,131z"/>
+			<path d="M31.1,169.5v-4.3l30.2-14.9v5.3l-23.8,11.7L61.3,179v5.3L31.1,169.5z"/>
+			<path d="M71.3,186.4h-4.9l16.5-49.7h4.8L71.3,186.4z"/>
+			<path d="M127.1,185.3v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
+				c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.6c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
+				c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V161c0-3.5-0.6-4.6-2.5-4.6
+				c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
+				c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H127.1L127.1,185.3z"/>
+			<path d="M168.3,186.1c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
+				c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
+				c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
+				c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C172.3,185.2,170.8,186.1,168.3,186.1z M163.8,166.1c-8.7,3.2-11.7,5.8-11.7,10
+				v0.3c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V166.1z"/>
+			<path d="M186.3,186.1c-4.2,0-6.3-3.1-6.3-9.1v-21.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
+				c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
+				c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C192.8,184.3,190,186.1,186.3,186.1z"/>
+			<path d="M209.1,185.3h-13.4v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V144c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2
+				l1.9-0.6c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c0.9-1.2,1.9-2.2,2.8-3.1"/>
+			<path d="M209.1,157.9c-0.8,0.7-1.7,1.5-2.7,2.6v17.4c0,4,0.4,5.3,2.7,5.9"/>
+		  </g>
+		  <g>
+			<polyline opacity="0.2" fill="#231F20" points="209.1,76.4 118.7,186.5 139.1,186.4 209.1,121 209.1,76.4 "/>
+			<polyline opacity="0.4" fill="#231F20" points="209.1,76.2 118.5,186.5 129.7,186.4 200.2,120.3 209.1,100.8 209.1,76.4 "/>
+			<path fill="#FFD761" d="M121.6,88.7l0.8,87.5l62.3-56.7c0,0-15.3-25.8-24.8-30C151.1,85.6,121.6,88.7,121.6,88.7z"/>
+			<path fill="#FEA01E" d="M209.1,19.5h-54l-33.5,69.2c0,0,29.7-3.4,38.3,0.8c8.9,4.4,25,30.8,25,30.8l24.2-50V19.5z"/>
+			<path d="M120.4,153.7l-0.6,25l23.8-16.9c0,0-8-7-11.2-8.1C129.4,152.8,120.4,153.7,120.4,153.7z"/>
+			<polyline fill="none" stroke="#231F20" stroke-width="5" points="153.9,19.5 121.6,88.7 120.7,181.2 186.6,120.3 209.1,70.3 "/>
+		  </g>
+		</svg>
+	</g>
+	
+	<g id="svg_eof"/>
+</svg>
\ No newline at end of file
diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 2adcff5f..0d99975e 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -811,11 +811,6 @@ span.zoom_tool {
 	text-align: left;
 }
 
-#svg_source_editor button, #svg_docprops button {
-	padding: 5px 5px 7px 28px;
-	margin: 5px 20px 0 0;	
-}
-
 #svg_docprops button {
 	margin-top: 0;
 	margin-bottom: 5px;
@@ -844,15 +839,14 @@ span.zoom_tool {
 	z-index: 20000;
 }
 
-button#tool_source_save,
-button#tool_source_cancel,
-button#tool_docprops_save,
-button#tool_docprops_cancel {
+.toolbar_button button {
     border:1px solid #dedede;
     line-height:130%;
+    float: left;
 	background: #E8E8E8 none;
     padding:5px 10px 5px 7px; /* Firefox */
     line-height:17px; /* Safari */
+	margin: 5px 20px 0 0;	
 }
 
 .toolbar_button button .svg_icon {
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 891172b9..38c17d43 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -21,6 +21,7 @@
 <script type="text/javascript" src="extensions/ext-closepath.js"></script>
 <script type="text/javascript" src="extensions/ext-arrows.js"></script>
 <script type="text/javascript" src="extensions/ext-connector.js"></script>
+<!-- <script type="text/javascript" src="extensions/ext-foreignobject.js"></script> -->
 
 <!-- Release version of script tags: >
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 5f7c739a..f9261a65 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -412,7 +412,74 @@ function svg_edit_setup() {
 				ext.callback();
 			}
 		}
-	
+
+		if(ext.context_tools) {
+			$.each(ext.context_tools, function(i, tool) {
+				// Add select tool
+				var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):"";
+				
+				var panel = $('#' + tool.panel);
+				
+				if(!panel.length) {
+					panel = $('<div>', {id: tool.panel}).appendTo("#tools_top");
+				}
+				
+				// TODO: Allow support for other types, or adding to existing tool
+				switch (tool.type) {
+				case 'tool_button':
+					var html = '<div class="tool_button">' + tool.id + '</div>';
+					var div = $(html).appendTo(panel);
+					if (tool.events) {
+						$.each(tool.events, function(evt, func) {
+							$(div).bind(evt, func);
+						});
+					}
+					break;
+				case 'select':
+					var html = '<label' + cont_id + '>'
+						+ '<select id="' + tool.id + '">';
+					$.each(tool.options, function(val, text) {
+						var sel = (val == tool.defval) ? " selected":"";
+						html += '<option value="'+val+'"' + sel + '>' + text + '</option>';
+					});
+					html += "</select></label>";
+					// Creates the tool, hides & adds it, returns the select element
+					var sel = $(html).appendTo(panel).find('select');
+					
+					$.each(tool.events, function(evt, func) {
+						$(sel).bind(evt, func);
+					});
+					break;
+				
+				case 'input':
+					var html = '<label' + cont_id + '>'
+						+ '<span id="' + tool.id + '_label">' 
+						+ tool.label + ':</span>'
+						+ '<input id="' + tool.id + '" title="' + tool.title
+						+ '" size="' + (tool.size || "4") + '" value="' + (tool.defval || "") + '" type="text"/></label>'
+						
+					// Creates the tool, hides & adds it, returns the select element
+					
+					// Add to given tool.panel
+					var inp = $(html).appendTo(panel).find('input');
+					
+					if(tool.spindata) {
+						inp.SpinButton(tool.spindata);
+					}
+					
+					if(tool.events) {
+						$.each(tool.events, function(evt, func) {
+							inp.bind(evt, func);
+						});
+					}
+					break;
+					
+				default:
+					break;
+				}
+			});
+		}
+		
 		if(ext.buttons) {
 			var fallback_obj = {},
 				placement_obj = {},
@@ -447,6 +514,10 @@ function svg_edit_setup() {
 					cls = 'tool_button';
 					parent = "#tools_left";
 					break;
+				case 'context':
+					cls = 'tool_button';
+					parent = "#" + btn.panel;
+					break;
 				}
 				
 				var button = $('<div/>')
@@ -512,21 +583,31 @@ function svg_edit_setup() {
 				if(!svgicons) {
 					button.append(icon);
 				}
-				
+
 				// Add given events to button
 				$.each(btn.events, function(name, func) {
 					if(name == "click") {
 						if(btn.type == 'mode') {
-							button.bind(name, func);
+							if(btn.includeWith) {
+								button.bind(name, func);
+							} else {
+								button.bind(name, function() {
+									if(toolButtonClick(button)) {
+										func();
+									}
+								});
+							}
 							if(btn.key) {
 								$(document).bind('keydown', {combi: btn.key, disableInInput: true}, func);
 								if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']');
 							}
+						} else {
+							button.bind(name, func);
 						}
 					} else {
 						button.bind(name, func);
 					}
-					});
+				});
 				
 				setupFlyouts(holders);
 			});
@@ -538,7 +619,6 @@ function svg_edit_setup() {
 				fallback: fallback_obj,
 				placement: placement_obj,
 				callback: function(icons) {
-			
 					// Bad hack to make the icon match the current size
 					// TODO: Write better hack!
 					var old = curPrefs.iconsize;
@@ -551,72 +631,6 @@ function svg_edit_setup() {
 		
 			});
 		}
-		if(ext.context_tools) {
-			$.each(ext.context_tools, function(i, tool) {
-				// Add select tool
-				var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):"";
-				
-				var panel = $('#' + tool.panel);
-				
-				if(!panel.length) {
-					panel = $('<div>', {id: tool.panel}).appendTo("#tools_top");
-				}
-				
-				// TODO: Allow support for other types, or adding to existing tool
-				switch (tool.type) {
-				case 'tool_button':
-					var html = '<div class="tool_button">' + tool.id + '</div>';
-					var div = $(html).appendTo(panel);
-					if (tool.events) {
-						$.each(tool.events, function(evt, func) {
-							$(div).bind(evt, func);
-						});
-					}
-					break;
-				case 'select':
-					var html = '<label' + cont_id + '>'
-						+ '<select id="' + tool.id + '">';
-					$.each(tool.options, function(val, text) {
-						var sel = (val == tool.defval) ? " selected":"";
-						html += '<option value="'+val+'"' + sel + '>' + text + '</option>';
-					});
-					html += "</select></label>";
-					// Creates the tool, hides & adds it, returns the select element
-					var sel = $(html).appendTo(panel).find('select');
-					
-					$.each(tool.events, function(evt, func) {
-						$(sel).bind(evt, func);
-					});
-					break;
-				
-				case 'input':
-					var html = '<label' + cont_id + '">'
-						+ '<span id="' + tool.id + '_label">' 
-						+ tool.label + ':</span>'
-						+ '<input id="' + tool.id + '" title="' + tool.title
-						+ '" size="' + (tool.size || "4") + '" value="' + (tool.defval || "") + '" type="text"/></label>'
-						
-					// Creates the tool, hides & adds it, returns the select element
-					
-					// Add to given tool.panel
-					var inp = $(html).appendTo(panel).find('input');
-					
-					if(tool.spindata) {
-						inp.SpinButton(tool.spindata);
-					}
-					
-					if(tool.events) {
-						$.each(tool.events, function(evt, func) {
-							$(sel).bind(evt, func);
-						});
-					}
-					break;
-					
-				default:
-					break;
-				}
-			});
-		}
 		
 		runCallback();
 	};