keyboard handling (work in progress)
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@79 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
parent
69eabb16b9
commit
d843eb92dd
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
@ -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/>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue