Added support for flyouts in plugins, made improvements to flyouts

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1304 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/ext-connector.js

@@ -144,6 +144,11 @@ $(function() {
 				icon: "images/cut.png",
 				title: "Connect two objects",
 				key: "L",
+				includeWith: {
+					button: '#tool_line',
+					'default': true,
+					position: 1
+				},
 				events: {
 					'click': function() {
 						svgCanvas.setMode("connector");

editor/svg-editor.css

@@ -282,7 +282,7 @@
 }
 
 #svg_editor #main_menu {
-	z-index: 1;
+	z-index: 12;
 	background: #E8E8E8;
 	position: relative;
 	width: 200px;
@@ -360,9 +360,12 @@
 #svg_editor #tools_left {
 	position: absolute;
 	border-right: none;
-	width: 36px;
+	width: 32px;
 	top: 75px;
-	left: 2px;
+	left: 0;
+	padding-left: 2px;
+	background: #E8E8E8;
+	z-index: 5;
 }
 
 #workarea.wireframe #svgcontent * {
@@ -431,15 +434,19 @@
 	height: 15px;
 }
 
-#svg_editor .flyout_arrow_horiz {
+#svg_editor #tools_left .tool_button {
-	float: right;
 	position: relative;
-	top: -13px;
+	z-index: 11;
-	left: -5px;
-	margin-top: -3px;
-	margin-bottom: -13px;
 }
 
+#svg_editor .flyout_arrow_horiz {
+	position: absolute;
+	bottom: 3%;
+	right: 5%;
+	z-index: 10;
+}
+
+
 .magic_field > * {
 	float: left;
 }
@@ -539,6 +546,7 @@ span.zoom_tool {
 	border-top: 1px solid #FFFFFF;
 	border-right: 1px solid #808080;
 	border-bottom: 1px solid #808080;
+	background-color: #E8E8E8;
 	cursor: pointer;
 }
 
@@ -619,6 +627,7 @@ span.zoom_tool {
 	position: absolute;
 	display: none;
 	cursor: pointer;
+	width: 400px;
 }
 
 #svg_editor .tools_flyout_v {
@@ -628,9 +637,7 @@ span.zoom_tool {
 	width: 30px;
 }
 
-/* TODO: figure out what more-specific selector causes me to write this atrocity and not
+#svg_editor .tools_flyout .tool_button {
-         simply .tool_flyout_button */
-#svg_editor #tools_rect .tool_flyout_button, #svg_editor #tools_ellipse .tool_flyout_button {
 	float: left;
 	background-color: #E8E8E8;
 	border-left: 1px solid #FFFFFF;
@@ -646,14 +653,6 @@ span.zoom_tool {
 	background-color: #FFF;
 }
 
-#svg_editor #tools_rect .tool_flyout_button_current, #svg_editor #tools_ellipse .tool_flyout_button_current {
-	border-left: 1px solid #808080;
-	border-top: 1px solid #808080;
-	border-right: 1px solid #FFFFFF;
-	border-bottom: 1px solid #FFFFFF;
-	background-color: #B0B0B0;
-}
-
 #svg_editor #tools_bottom {
 	position: absolute;
 	left: 40px;
@@ -951,9 +950,18 @@ button#tool_docprops_cancel {
 }
 
 /* Possibly not necessary */
-#svg_editor #tools_rect .tool_flyout_button,
+#svg_editor .tools_flyout .tool_button,
-#svg_editor #tools_ellipse .tool_flyout_button {
+#svg_editor .tools_flyout .tool_flyout {
 	padding: 2px;
 	width: 24px;
 	height: 24px;
+	margin: 0;
 }
+
+#svg_editor .tools_flyout .tool_button:hover {
+	border-left: 1px solid #808080;
+	border-top: 1px solid #808080;
+	border-right: 1px solid #FFFFFF;
+	border-bottom: 1px solid #FFFFFF;
+	background-color: #B0B0B0;
+}

editor/svg-editor.html

@@ -351,14 +351,26 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div class="tool_button_current" id="tool_select" title="Select Tool [1]"></div>
 	<div class="tool_button" id="tool_fhpath" title="Pencil Tool [2]"></div>
 	<div class="tool_button" id="tool_line" title="Line Tool [3]"></div>
-	<div class="tool_button" id="tools_rect_show" title="Square/Rect Tool [4/Shift+4]"></div>
+	<div class="tool_button flyout_current" id="tools_rect_show" title="Square/Rect Tool [4/Shift+4]">
-	<div class="flyout_arrow_horiz"></div>
+		<div class="flyout_arrow_horiz"></div>
-	<div class="tool_button" id="tools_ellipse_show" title="Ellipse/Circle Tool [5/Shift+5]"></div>
+	</div>
-	<div class="flyout_arrow_horiz"></div>
+	<div class="tool_button flyout_current" id="tools_ellipse_show" title="Ellipse/Circle Tool [5/Shift+5]">
+		<div class="flyout_arrow_horiz"></div>
+	</div>
 	<div class="tool_button" id="tool_path" title="Path Tool [7]"></div>
 	<div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
 	<div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
 	<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
+	
+	<div style="display: none">
+		<div id="tool_rect" title="Rectangle"></div>
+		<div id="tool_square" title="Square"></div>
+		<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
+	
+		<div id="tool_ellipse" title="Ellipse"></div>
+		<div id="tool_circle" title="Circle"></div>
+		<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
+	</div>
 </div> <!-- tools_left -->
 
 <div id="tools_bottom" class="tools_panel">
@@ -421,6 +433,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 <!-- hidden divs -->
 <div id="color_picker"></div>
 
+<!-- 
 <div id="tools_rect" class="tools_flyout">
 	<div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div>
 	<div id="tool_square" class="tool_flyout_button" title="Square"></div>
@@ -432,6 +445,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="tool_circle" class="tool_flyout_button" title="Circle"></div>
 	<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
 </div>
+ -->
 
 </div> <!-- svg_editor -->
 

editor/svg-editor.js

@@ -1,4 +1,4 @@
-/*
+/*
  * svg-editor.js
  *
  * Licensed under the Apache License, Version 2
@@ -266,12 +266,108 @@ function svg_edit_setup() {
 		zoomDone();
 	}
 	
+	var flyout_funcs = {};
+	
+	var setupFlyouts = function(holders) {
+		$.each(holders, function(hold_sel, btn_opts) {
+			var buttons = $(hold_sel).children();
+			var show_sel = hold_sel + '_show';
+			var def = false;
+			
+			buttons.addClass('tool_button')
+				.unbind('click mousedown mouseup') // may not be necessary
+				.each(function(i) {
+					// Get this buttons options
+					var opts = btn_opts[i];
+					// Remember the function that goes with this ID
+					flyout_funcs[opts.sel] = opts.fn;
+
+					if(opts.isDefault) def = i;
+					
+					// Clicking the icon in flyout should set this set's icon
+					$(this).mouseup(function() {
+						if (toolButtonClick(show_sel)) {
+							opts.fn();
+						}
+						if(opts.icon) {
+							var icon = $.getSvgIcon(opts.icon).clone();
+						} else {
+							// 
+							var icon = $(opts.sel).children().eq(0).clone();
+						}
+						
+						var shower = $(show_sel);
+						icon[0].setAttribute('width',shower.width());
+						icon[0].setAttribute('height',shower.height());
+						shower.children(':not(.flyout_arrow_horiz)').remove();
+						shower.append(icon).attr('data-curopt', opts.sel); // This sets the current mode
+					});
+				});
+			
+			
+			if(def) {
+				$(show_sel).attr('data-curopt', btn_opts[def].sel);
+			} else if(!$(show_sel).attr('data-curopt')) {
+				// Set first as default
+				$(show_sel).attr('data-curopt', btn_opts[0].sel);
+			}
+			
+			var timer;
+			
+			// Clicking the "show" icon should set the current mode
+			$(show_sel).mousedown(function(evt) {
+				var holder = $(show_sel.replace('_show',''));
+				var l = holder.css('left');
+				var w = holder.width()*-1;
+				timer = setTimeout(function() {
+					// Show corresponding menu
+					holder.css('left', w).show().animate({
+						left: l
+					},150);
+				},200);
+				evt.preventDefault();
+			}).mouseup(function() {
+				clearTimeout(timer);
+				var opt = $(this).attr('data-curopt');
+				if (toolButtonClick(show_sel)) {
+					flyout_funcs[opt]();
+				}
+			});
+			
+			// 	$('#tools_rect').mouseleave(function(){$('#tools_rect').fadeOut();});
+			
+			var pos = $(show_sel).position();
+			$(hold_sel).css({'left': pos.left+34, 'top': pos.top+77});
+		});
+		
+	}
+	
+	var makeFlyoutHolder = function(id, child) {
+		var div = $('<div>',{
+			'class': 'tools_flyout',
+			id: id
+		}).appendTo('#svg_editor').append(child);
+		
+		return div;
+	}
+	
+	var setFlyoutPositions = function() {
+		$('.tools_flyout').each(function() {
+			var shower = $('#' + this.id + '_show');
+			var pos = shower.offset();
+			var w = shower.outerWidth();
+			$(this).css({left: pos.left + w, top: pos.top});
+		});
+	}
+	
 	var extAdded = function(window, ext) {
 		if("buttons" in ext) {
 			var fallback_obj = {},
 				placement_obj = {},
 				svgicons = ext.svgicons;
 		
+			var holders = {};
+		
 			// Add buttons given by extension
 			$.each(ext.buttons, function(i, btn) {
 				var icon;
@@ -286,7 +382,7 @@ function svg_edit_setup() {
 				if(!svgicons) {
 					icon = $('<img src="' + btn.icon + '">');
 				} else {
-					fallback_obj[id] = btn.iocn;
+					fallback_obj[id] = btn.icon;
 					placement_obj['#' + id] = btn.id;
 				}
 				
@@ -303,8 +399,62 @@ function svg_edit_setup() {
 				var button = $('<div/>')
 					.attr("id", id)
 					.attr("title", btn.title)
-					.addClass(cls)
+					.addClass(cls);
-					.appendTo(parent);
+				
+				if(!btn.includeWith) {
+					button.appendTo(parent);
+				} else {
+					// Add to flyout menu / make flyout menu
+					var opts = btn.includeWith;
+					// opts.button, default, position
+					var ref_btn = $(opts.button);
+					
+					var flyout_holder = ref_btn.parent();
+					// Create a flyout menu if there isn't one already
+					if(!ref_btn.parent().hasClass('tools_flyout')) {
+						// Create flyout placeholder
+						var arr_div = $('<div>',{id:'flyout_arrow_horiz'})
+						
+						var tls_id = ref_btn[0].id.replace('tool_','tools_')
+						var show_btn = ref_btn.clone()
+							.attr('id',tls_id + '_show')
+							.append($('<div>',{'class':'flyout_arrow_horiz'}));
+							
+						ref_btn.before(show_btn);
+					
+						// Create a flyout div
+						flyout_holder = makeFlyoutHolder(tls_id, ref_btn);
+					} 
+					
+					var ref_data = Actions.getButtonData(opts.button);
+					
+					if(opts.default) {
+						placement_obj['#' + tls_id + '_show'] = btn.id;
+					} 
+					// TODO: Find way to set the current icon using the iconloader if this is not default
+					
+					// Include data for extension button as well as ref button
+					var cur_h = holders['#'+flyout_holder[0].id] = [{
+						sel: '#'+id,
+						fn: btn.events.click,
+						icon: btn.id,
+						isDefault: btn.includeWith?btn.includeWith.default:0
+					}, ref_data];
+					
+					// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
+						
+					var pos  = ("position" in opts)?opts.position:'last';
+					var len = flyout_holder.children().length;
+					
+					// Add at given position or end
+					if(!isNaN(pos) && pos >= 0 && pos < len) {
+						flyout_holder.children().eq(pos).before(button);
+					} else {
+						flyout_holder.append(button);
+						cur_h.reverse();
+					}
+				}
+				
 				if(!svgicons) {
 					button.append(icon);
 				}
@@ -313,33 +463,18 @@ function svg_edit_setup() {
 				$.each(btn.events, function(name, func) {
 					if(name == "click") {
 						if(btn.type == 'mode') {
-							var new_func = function() {
+							button.bind(name, func);
-								if (toolButtonClick('#' + id)) {
-									func();
-								}
-							}
-							
-							button.bind(name, new_func);
 							if(btn.key) {
-								$(document).bind('keydown', {combi: btn.key}, new_func);
+								$(document).bind('keydown', {combi: btn.key}, func);
 								if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']');
 							}
 						}
 					} else {
 						button.bind(name, func);
 					}
-				
-					button.bind(name, function() {
-						if(name == "click" && btn.type == 'mode') {
-							if (toolButtonClick('#' + id)) {
-								func();
-							}
-						} else {
-							func();
-						}
 					});
-				});
+				
-					
+				setupFlyouts(holders);
 			});
 			
 			$.svgIcons(svgicons, {
@@ -348,7 +483,8 @@ function svg_edit_setup() {
 				no_img: true,
 				fallback: fallback_obj,
 				placement: placement_obj,
-				callback: function() {
+				callback: function(icons) {
+			
 					// Bad hack to make the icon match the current size
 					// TODO: Write better hack!
 					var old = curPrefs.iconsize;
@@ -651,11 +787,6 @@ function svg_edit_setup() {
 		$('#image_save_opts input').val([curPrefs.img_save]);
 	}
 
-	var pos = $('#tools_rect_show').position();
-	$('#tools_rect').css({'left': pos.left+4, 'top': pos.top+77});
-	pos = $('#tools_ellipse_show').position();
-	$('#tools_ellipse').css({'left': pos.left+4, 'top': pos.top+77});
-
 	var changeRectRadius = function(ctl) {
 		svgCanvas.setRectRadius(ctl.value);
 	}
@@ -831,6 +962,7 @@ function svg_edit_setup() {
 	// - adds the tool_button_current class to the button passed in
 	var toolButtonClick = function(button, fadeFlyouts) {
 		if ($(button).hasClass('tool_button_disabled')) return false;
+		if($(button).parent().hasClass('tools_flyout')) return true;
 		var fadeFlyouts = fadeFlyouts || 'normal';
 		$('.tools_flyout').fadeOut(fadeFlyouts);
 		$('#styleoverrides').text('');
@@ -982,13 +1114,30 @@ function svg_edit_setup() {
 		}
 	}, true);
 	
-	var setIcon = function(holder_sel, id) {
+	/*
-		var icon = $.getSvgIcon(id).clone();
+	
-		var holder = $(holder_sel);
+	When a flyout icon is selected
-		icon[0].setAttribute('width',holder.width());
+		(if flyout) {
-		icon[0].setAttribute('height',holder.height());
+		- Change the icon
-		holder.empty().append(icon);
+		- Make pressing the button run its stuff
-	}
+		}
+		- Run its stuff
+	
+	When its shortcut key is pressed
+		- If not current in list, do as above
+		, else:
+		- Just run its stuff
+	
+	*/
+	
+// 	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')) {
@@ -1010,47 +1159,27 @@ function svg_edit_setup() {
 	};
 
 	var clickSquare = function(){
-		if (toolButtonClick('#tools_rect_show', flyoutspeed)) {
+		svgCanvas.setMode('square');
-			flyoutspeed = 'normal';
-			svgCanvas.setMode('square');
-		}
-		setIcon('#tools_rect_show','square');
 	};
 	
 	var clickRect = function(){
-		if (toolButtonClick('#tools_rect_show')) {
+		svgCanvas.setMode('rect');
-			svgCanvas.setMode('rect');
-		}
-		setIcon('#tools_rect_show','rect');
 	};
 	
 	var clickFHRect = function(){
-		if (toolButtonClick('#tools_rect_show')) {
+		svgCanvas.setMode('fhrect');
-			svgCanvas.setMode('fhrect');
-		}
-		setIcon('#tools_rect_show','fh_rect');
 	};
 	
 	var clickCircle = function(){
-		if (toolButtonClick('#tools_ellipse_show', flyoutspeed)) {
+		svgCanvas.setMode('circle');
-			flyoutspeed = 'normal';
-			svgCanvas.setMode('circle');
-		}
-		setIcon('#tools_ellipse_show','circle');
 	};
 
 	var clickEllipse = function(){
-		if (toolButtonClick('#tools_ellipse_show')) {
+		svgCanvas.setMode('ellipse');
-			svgCanvas.setMode('ellipse');
-		}
-		setIcon('#tools_ellipse_show','ellipse');
 	};
 
 	var clickFHEllipse = function(){
-		if (toolButtonClick('#tools_ellipse_show')) {
+		svgCanvas.setMode('fhellipse');
-			svgCanvas.setMode('fhellipse');
-		}
-		setIcon('#tools_ellipse_show','fh_ellipse');
 	};
 	
 	var clickImage = function(){
@@ -1403,7 +1532,7 @@ function svg_edit_setup() {
 		var size_num = icon_sizes[size];
 		
 		// Change icon size
-		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button, #url_notice, #tool_open')
+		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, #url_notice, #tool_open')
 		.find('> svg, > img').each(function() {
 			this.setAttribute('width',size_num);
 			this.setAttribute('height',size_num);
@@ -1423,8 +1552,7 @@ function svg_edit_setup() {
 			.push_button,\
 			.tool_button_current,\
 			.tool_button_disabled,\
-			#tools_rect .tool_flyout_button,\
+			.tools_flyout .tool_button": {
-			#tools_ellipse .tool_flyout_button": {
 				'width': {s: '16px', l: '32px', xl: '48px'},
 				'height': {s: '16px', l: '32px', xl: '48px'},
 				'padding': {s: '1px', l: '2px', xl: '3px'}
@@ -1442,7 +1570,7 @@ function svg_edit_setup() {
 				'height': {s: '50px', l: '88px', xl: '125px'}
 			},
 			"#tools_left": {
-				'width': {s: '26px', l: '34px', xl: '42px'},
+				'width': {s: '22px', l: '30px', xl: '38px'},
 				'top': {s: '50px', l: '87px', xl: '125px'}
 			},
 			"div#workarea": {
@@ -1473,9 +1601,6 @@ function svg_edit_setup() {
 			"#tools_top > div, #tools_top": {
 				'line-height': {s: '17px', l: '34px', xl: '50px'}
 			}, 
-// 			"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'},
@@ -1504,10 +1629,6 @@ function svg_edit_setup() {
 				'width': {l: '19px', xl: '28px'},
 				'height': {l: '19px', xl: '28px'}
 			},
-			".flyout_arrow_horiz": {
-				'left': {s: '-5px', l: '5px', xl: '14px'},
-				'top': {s: '-13px', l: '-13px', xl: '-20px'}
-			},
 			"input.spin-button": {
 				'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
 				'background-position': {l: '100% -5px', xl: '100% -2px'},
@@ -1543,10 +1664,7 @@ function svg_edit_setup() {
 			rule_elem.text(style_str);
 		}
 		
-		var pos = $('#tools_rect_show').offset();
+		setFlyoutPositions();
-		$('#tools_rect').css({'left': pos.left, 'top': pos.top});
-		pos = $('#tools_ellipse_show').offset();
-		$('#tools_ellipse').css({'left': pos.left, 'top': pos.top});
 	}
 
 	var cancelOverlays = function() {
@@ -1805,30 +1923,42 @@ function svg_edit_setup() {
 		updateToolButtonState();
 	});
 
-	$('#tools_rect_show').mousedown(function(evt){
+// 	(function() {
-		$('#tools_rect').show();
+// 		var timer, menuShown;
-		// this prevents the 'image drag' behavior in Firefox
+// 		$('#tools_rect_show').mousedown(function(evt){
-		evt.preventDefault();
+// 			timer = setTimeout(function() {
-	});
+// // 				menuShown = true;
-	$('#tools_rect').mouseleave(function(){$('#tools_rect').fadeOut();});
+// 				$('#tools_rect').show();
+// 			},200);
+// 			// this prevents the 'image drag' behavior in Firefox
+// 			evt.preventDefault();
+// 		}).mouseup(function() {
+// 			clearTimeout(timer);
+// // 			var opt = $(this).attr('data-curopt',);
+// 		});
+// 		
+// 		
+// 	// 	$('#tools_rect').mouseleave(function(){$('#tools_rect').fadeOut();});
+// 	
+// 	}());
 
 	$('#tool_move_top').mousedown(function(evt){
 		$('#tools_stacking').show();
 		evt.preventDefault();
 	});
 
-	$('#tools_ellipse_show').mousedown(function(evt){
+// 	$('#tools_ellipse_show').mousedown(function(evt){
-		$('#tools_ellipse').show();
+// 		$('#tools_ellipse').show();
-		// this prevents the 'image drag' behavior in Firefox
+// 		// this prevents the 'image drag' behavior in Firefox
-		evt.preventDefault();
+// 		evt.preventDefault();
-	});
+// 	});
-	$('#tools_ellipse').mouseleave(function() {$('#tools_ellipse').fadeOut();});
+// 	$('#tools_ellipse').mouseleave(function() {$('#tools_ellipse').fadeOut();});
 
-	$('.tool_flyout_button').mouseover(function() {
+// 	$('.tool_flyout_button').mouseover(function() {
-		$(this).addClass('tool_flyout_button_current');
+// 		$(this).addClass('tool_flyout_button_current');
-	}).mouseout(function() {
+// 	}).mouseout(function() {
-		$(this).removeClass('tool_flyout_button_current');
+// 		$(this).removeClass('tool_flyout_button_current');
-	});
+// 	});
 	
 	$('.layer_button').mousedown(function() { 
 		$(this).addClass('layer_buttonpressed');
@@ -2177,12 +2307,12 @@ function svg_edit_setup() {
 			{sel:'#tool_select', fn: clickSelect, evt: 'click', key: 1},
 			{sel:'#tool_fhpath', fn: clickFHPath, evt: 'click', key: 2},
 			{sel:'#tool_line', fn: clickLine, evt: 'click', key: 3},
-			{sel:'#tool_square', fn: clickSquare, evt: 'mouseup', key: 'Shift+4'},
+			{sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'},
-			{sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4},
+			{sel:'#tool_square', fn: clickSquare, evt: 'mouseup', key: 'Shift+4', parent: '#tools_rect', icon: 'square'},
-			{sel:'#tool_fhrect', fn: clickFHRect, evt: 'mouseup'},
+			{sel:'#tool_fhrect', fn: clickFHRect, evt: 'mouseup', parent: '#tools_rect', icon: 'fh_rect'},
-			{sel:'#tool_circle', fn: clickCircle, evt: 'mouseup', key: 'Shift+5'},
+			{sel:'#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: 5, parent: '#tools_ellipse', icon: 'ellipse'},
-			{sel:'#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: 5},
+			{sel:'#tool_circle', fn: clickCircle, evt: 'mouseup', key: 'Shift+5', parent: '#tools_ellipse', icon: 'circle'},
-			{sel:'#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup'},
+			{sel:'#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup', parent: '#tools_ellipse', icon: 'fh_ellipse'},
 			{sel:'#tool_path', fn: clickPath, evt: 'click', key: 6},
 			{sel:'#tool_text', fn: clickText, evt: 'click', key: 7},
 			{sel:'#tool_image', fn: clickImage, evt: 'mouseup', key: 8},
@@ -2211,8 +2341,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']},
@@ -2238,6 +2368,8 @@ function svg_edit_setup() {
 	
 		return {
 			setAll: function() {
+				var flyouts = {};
+				
 				$.each(tool_buttons, function(i, opts)  {
 					// Bind function to button
 					if(opts.sel) {
@@ -2245,7 +2377,24 @@ function svg_edit_setup() {
 						if(opts.evt) {
 							btn[opts.evt](opts.fn);
 						}
+
+						// Add to parent flyout menu
+						if(opts.parent) {
+							var f_h = $(opts.parent);
+							if(!f_h.length) {
+								f_h = makeFlyoutHolder(opts.parent.substr(1));
+							}
+							
+							f_h.append(btn);
+							
+							if(!$.isArray(flyouts[opts.parent])) {
+								flyouts[opts.parent] = [];
+							}
+							flyouts[opts.parent].push(opts);
+						}
 					}
+					
+					
 					// Bind function to shortcut key
 					if(opts.key) {
 						// Set shortcut based on options
@@ -2281,7 +2430,11 @@ function svg_edit_setup() {
 						}
 					}
 				});
-			
+				
+				// Setup flyouts
+				setupFlyouts(flyouts);
+				
+				
 				// Misc additional actions
 				
 				// Make "return" keypress trigger the change event
@@ -2318,6 +2471,13 @@ function svg_edit_setup() {
 						}
 					});
 				});
+			},
+			getButtonData: function(sel) {
+				var b;
+				$.each(tool_buttons, function(i, btn) {
+					if(btn.sel === sel) b = btn;
+				});
+				return b;
 			}
 		};
 	}();