From d7a2c3e71cfdee89355cf552727f97d2020baa48 Mon Sep 17 00:00:00 2001
From: Jeff Schiller <codedread@gmail.com>
Date: Sun, 28 Jun 2009 05:48:11 +0000
Subject: [PATCH] Mousedown to open flyouts, mouse up on the tool the user
 wants

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@217 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 10 +++++++++-
 editor/svg-editor.html | 12 ++++++------
 editor/svg-editor.js   | 36 ++++++++++++++++++++++++------------
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 09132c2b..1bd97cae 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -240,7 +240,7 @@ div.color_block {
 	background: 2px 2px url('images/freehand-circle.png') no-repeat;
 }
 
-#svg_editor #tools_rect div, #svg_editor #tools_ellipse div {
+#svg_editor #tools_rect .tool_flyout_button, #svg_editor #tools_ellipse .tool_flyout_button {
 	float: left;
 	background-color: #E8E8E8;
 	border-left: 1px solid #FFFFFF;
@@ -251,6 +251,14 @@ div.color_block {
 	width: 28px;
 }
 
+#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 #footer {
 	position: absolute;
 	left: 75px;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index d06f4e89..89c0eb9b 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -231,15 +231,15 @@
 	<div id="color_picker"></div>
 
 	<div id="tools_rect" class="tools_flyout">
-		<div id="tool_square" title="Square"></div>
-		<div id="tool_rect" title="Rectangle"></div>
-		<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
+		<div id="tool_square" class="tool_flyout_button" title="Square"></div>
+		<div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div>
+		<div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div>
 	</div>
 
 	<div id="tools_ellipse" class="tools_flyout">
-		<div id="tool_circle" title="Circle"></div>
-		<div id="tool_ellipse" title="Ellipse"></div>
-		<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
+		<div id="tool_circle" class="tool_flyout_button" title="Circle"></div>
+		<div id="tool_ellipse" class="tool_flyout_button" title="Ellipse"></div>
+		<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
 	</div>
 
 </div> <!-- tools_container -->
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 663c5869..c190dbe9 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -228,10 +228,11 @@ function svg_edit_setup() {
 	// This is a common function used when a tool has been clicked (chosen)
 	// It does several common things:
 	// - removes the tool_button_current class from whatever tool currently has it
+	// - hides any flyouts
 	// - adds the tool_button_current class to the button passed in
 	var toolButtonClick = function(button) {
 		if ($(button).hasClass('tool_button_disabled')) return false;
-
+		$('.tools_flyout').hide();
 		$('#styleoverrides').text('');
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
 		$(button).addClass('tool_button_current');
@@ -355,12 +356,12 @@ function svg_edit_setup() {
 	$('#tool_select').click(clickSelect);
 	$('#tool_path').click(clickPath);
 	$('#tool_line').click(clickLine);
-	$('#tool_square').click(clickSquare);
-	$('#tool_rect').click(clickRect);
-	$('#tool_fhrect').click(clickFHRect);
-	$('#tool_circle').click(clickCircle);
-	$('#tool_ellipse').click(clickEllipse);
-	$('#tool_fhellipse').click(clickFHEllipse);
+	$('#tool_square').mouseup(clickSquare);
+	$('#tool_rect').mouseup(clickRect);
+	$('#tool_fhrect').mouseup(clickFHRect);
+	$('#tool_circle').mouseup(clickCircle);
+	$('#tool_ellipse').mouseup(clickEllipse);
+	$('#tool_fhellipse').mouseup(clickFHEllipse);
 	$('#tool_text').click(clickText);
 	$('#tool_clear').click(clickClear);
 	$('#tool_save').click(clickSave);
@@ -369,6 +370,9 @@ function svg_edit_setup() {
 	$('#tool_move_bottom').click(moveToBottomSelected);
 	$('#tool_undo').click(clickUndo);
 	$('#tool_redo').click(clickRedo);
+	// these two lines are required to make Opera work properly with the new flyout mechanism
+	$('#tools_rect_show').click(clickSquare);
+	$('#tools_ellipse_show').click(clickCircle);
 
 	// added these event handlers for all the push buttons so they
 	// behave more like buttons being pressed-in and not images
@@ -509,22 +513,30 @@ function svg_edit_setup() {
 		updateToolButtonState();
 	});
 
-	$('#tools_rect_show').mouseenter(function(){
+	$('#tools_rect_show').mousedown(function(evt){
 		$('#tools_rect').show();
+		// this prevents the 'image drag' behavior in Firefox
+		evt.preventDefault();
 	});
-
 	$('#tools_rect').mouseleave(function() {
 		$('#tools_rect').hide();
 	});
 	
+	$('#tools_ellipse_show').mousedown(function(evt){
+		$('#tools_ellipse').show();
+		// this prevents the 'image drag' behavior in Firefox
+		evt.preventDefault();
+	});
 	$('#tools_ellipse').mouseleave(function() {
 		$('#tools_ellipse').hide();
 	});
 	
-	$('#tools_ellipse_show').mouseenter(function(){
-		$('#tools_ellipse').show();
+	$('.tool_flyout_button').mouseover(function() {
+		$(this).addClass('tool_flyout_button_current');
+	}).mouseout(function() {
+		$(this).removeClass('tool_flyout_button_current');
 	});
-
+	
 	function changeResolution(x,y) {
 		$('#resolution').val(x+'x'+y);
 		$('#svgroot').css( { 'width': x, 'height': y } );