keyboard handling (work in progress)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@79 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Pavol Rusnak 2009-06-09 13:28:37 +00:00
parent 69eabb16b9
commit d843eb92dd
4 changed files with 110 additions and 42 deletions

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -32,14 +32,15 @@
<div id="tools">
<div>
<img class="tool_button" id="tool_select" src="images/select.png" title="Select Tool" alt="Select"/><br/>
<img class="tool_button_current" id="tool_path" src="images/path.png" title="Pencil Tool" alt="Pencil"/><br/>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool" alt="Line"/><br/>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool" alt="Square"/><br/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Circle/Ellipse Tool" alt="Circle"/><br/>
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element" alt="Delete"/><hr/>
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image" alt="Clear" /><br/>
<img class="tool_button" id="tool_submit" src="images/submit.png" title="Save Image" alt="Source"/><br/>
<img class="tool_button" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
<img class="tool_button_current" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/><br/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Circle/Ellipse Tool [5/Shift+5]" alt="Circle"/><br/>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/><br/>
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [X]" alt="Delete"/><hr/>
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" /><br/>
<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/><br/>
</div>
<hr/>

View File

@ -129,65 +129,130 @@ function svg_edit_setup() {
svgCanvas.selectNone();
};
$('#tool_select').click(function(){
toolButtonClick(this);
var clickSelect = function() {
toolButtonClick('#tool_select');
svgCanvas.setMode('select');
$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
});
}
$('#tool_path').click(function(){
toolButtonClick(this);
var clickPath = function() {
toolButtonClick('#tool_path');
svgCanvas.setMode('path');
});
}
$('#tool_line').click(function(){
toolButtonClick(this);
var clickLine = function() {
toolButtonClick('#tool_line');
svgCanvas.setMode('line');
});
}
$('#tool_square').click(function(){
var clickSquare = function(){
toolButtonClick('#tools_rect_show');
svgCanvas.setMode('square');
});
}
$('#tool_rect').click(function(){
var clickRect = function(){
toolButtonClick('#tools_rect_show');
svgCanvas.setMode('rect');
});
}
$('#tool_fhrect').click(function(){
var clickFHRect = function(){
toolButtonClick('#tools_rect_show');
svgCanvas.setMode('fhrect');
});
}
$('#tool_circle').click(function(){
var clickCircle = function(){
toolButtonClick('#tools_ellipse_show');
svgCanvas.setMode('circle');
});
}
$('#tool_ellipse').click(function(){
var clickEllipse = function(){
toolButtonClick('#tools_ellipse_show');
svgCanvas.setMode('ellipse');
});
}
$('#tool_fhellipse').click(function(){
var clickFHEllipse = function(){
toolButtonClick('#tools_ellipse_show');
svgCanvas.setMode('fhellipse');
});
}
$('#tool_delete').click(function(){
toolButtonClick(this);
var clickDelete = function(){
toolButtonClick('#tool_delete');
svgCanvas.setMode('delete');
});
}
$('#tool_clear').click(function(){
var clickText = function(){
toolButtonClick('#tool_text');
svgCanvas.setMode('text');
}
var clickClear = function(){
if( confirm('Do you want to clear the drawing?') ) {
svgCanvas.clear();
}
});
}
$('#tool_submit').click(function(){
var clickSave = function(){
svgCanvas.save();
}
$('#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_text').click(clickText);
$('#tool_delete').click(clickDelete);
$('#tool_clear').click(clickClear);
$('#tool_save').click(clickSave);
$('#workarea').keyup(function(event){
switch (event.keyCode) {
case 37: // left-arrow
break;
case 38: // up-arrow
break;
case 39: // right-arrow
break;
case 40: // down-arrow
break;
case 49: // 1
clickSelect();
break;
case 50: // 2
clickPath();
break;
case 51: // 3
clickLine();
break;
case 52: // 4
if (event.shiftKey)
clickSquare();
else
clickRect();
break;
case 53: // 5
if (event.shiftKey)
clickCircle();
else
clickEllipse();
break;
case 54: // 6
clickText();
break;
case 78: // N
clickClear();
break;
case 83: // S
clickSave();
break;
case 88: // X
clickDelete();
break;
}
});
var colorPicker = function(elem) {

View File

@ -482,13 +482,15 @@ function SvgCanvas(c)
}
d_attr = null;
obj_num++;
if (!keep) {
element.parentNode.removeChild(element);
element = null;
} else if (element != null) {
element.setAttribute("opacity", current_opacity);
cleanupElement(element);
call("changed",element);
if (element != null) {
if (!keep) {
element.parentNode.removeChild(element);
element = null;
} else {
element.setAttribute("opacity", current_opacity);
cleanupElement(element);
call("changed",element);
}
}
}