zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
master
Jeff Schiller 2009-06-28 05:48:11 +00:00
parent 9293eb66e6
commit d7a2c3e71c
3 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
editor/svg-editor.css
View File

@ -240,7 +240,7 @@ div.color_block {
background: 2px 2px url('images/freehand-circle.png') no-repeat; 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; float: left;
background-color: #E8E8E8; background-color: #E8E8E8;
border-left: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;
@ -251,6 +251,14 @@ div.color_block {
width: 28px; 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 { #svg_editor #footer {
position: absolute; position: absolute;
left: 75px; left: 75px;

12
editor/svg-editor.html
View File

@ -231,15 +231,15 @@
<div id="color_picker"></div> <div id="color_picker"></div>
<div id="tools_rect" class="tools_flyout"> <div id="tools_rect" class="tools_flyout">
<div id="tool_square" title="Square"></div> <div id="tool_square" class="tool_flyout_button" title="Square"></div>
<div id="tool_rect" title="Rectangle"></div> <div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div>
<div id="tool_fhrect" title="Free-Hand Rectangle"></div> <div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div>
</div> </div>
<div id="tools_ellipse" class="tools_flyout"> <div id="tools_ellipse" class="tools_flyout">
<div id="tool_circle" title="Circle"></div> <div id="tool_circle" class="tool_flyout_button" title="Circle"></div>
<div id="tool_ellipse" title="Ellipse"></div> <div id="tool_ellipse" class="tool_flyout_button" title="Ellipse"></div>
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div> <div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
</div> </div>
</div> <!-- tools_container --> </div> <!-- tools_container -->

36
editor/svg-editor.js
View File

@ -228,10 +228,11 @@ function svg_edit_setup() {
// This is a common function used when a tool has been clicked (chosen) // This is a common function used when a tool has been clicked (chosen)
// It does several common things: // It does several common things:
// - removes the tool_button_current class from whatever tool currently has it // - 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 // - adds the tool_button_current class to the button passed in
var toolButtonClick = function(button) { var toolButtonClick = function(button) {
if ($(button).hasClass('tool_button_disabled')) return false; if ($(button).hasClass('tool_button_disabled')) return false;
$('.tools_flyout').hide();
$('#styleoverrides').text(''); $('#styleoverrides').text('');
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$(button).addClass('tool_button_current'); $(button).addClass('tool_button_current');
@ -355,12 +356,12 @@ function svg_edit_setup() {
$('#tool_select').click(clickSelect); $('#tool_select').click(clickSelect);
$('#tool_path').click(clickPath); $('#tool_path').click(clickPath);
$('#tool_line').click(clickLine); $('#tool_line').click(clickLine);
$('#tool_square').click(clickSquare); $('#tool_square').mouseup(clickSquare);
$('#tool_rect').click(clickRect); $('#tool_rect').mouseup(clickRect);
$('#tool_fhrect').click(clickFHRect); $('#tool_fhrect').mouseup(clickFHRect);
$('#tool_circle').click(clickCircle); $('#tool_circle').mouseup(clickCircle);
$('#tool_ellipse').click(clickEllipse); $('#tool_ellipse').mouseup(clickEllipse);
$('#tool_fhellipse').click(clickFHEllipse); $('#tool_fhellipse').mouseup(clickFHEllipse);
$('#tool_text').click(clickText); $('#tool_text').click(clickText);
$('#tool_clear').click(clickClear); $('#tool_clear').click(clickClear);
$('#tool_save').click(clickSave); $('#tool_save').click(clickSave);
@ -369,6 +370,9 @@ function svg_edit_setup() {
$('#tool_move_bottom').click(moveToBottomSelected); $('#tool_move_bottom').click(moveToBottomSelected);
$('#tool_undo').click(clickUndo); $('#tool_undo').click(clickUndo);
$('#tool_redo').click(clickRedo); $('#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 // added these event handlers for all the push buttons so they
// behave more like buttons being pressed-in and not images // behave more like buttons being pressed-in and not images
@ -509,22 +513,30 @@ function svg_edit_setup() {
updateToolButtonState(); updateToolButtonState();
}); });
$('#tools_rect_show').mouseenter(function(){ $('#tools_rect_show').mousedown(function(evt){
$('#tools_rect').show(); $('#tools_rect').show();
// this prevents the 'image drag' behavior in Firefox
evt.preventDefault();
}); });
$('#tools_rect').mouseleave(function() { $('#tools_rect').mouseleave(function() {
$('#tools_rect').hide(); $('#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').mouseleave(function() {
$('#tools_ellipse').hide(); $('#tools_ellipse').hide();
}); });
$('#tools_ellipse_show').mouseenter(function(){ $('.tool_flyout_button').mouseover(function() {
$('#tools_ellipse').show(); $(this).addClass('tool_flyout_button_current');
}).mouseout(function() {
$(this).removeClass('tool_flyout_button_current');
}); });
function changeResolution(x,y) { function changeResolution(x,y) {
$('#resolution').val(x+'x'+y); $('#resolution').val(x+'x'+y);
$('#svgroot').css( { 'width': x, 'height': y } ); $('#svgroot').css( { 'width': x, 'height': y } );