From d843eb92ddf9408863fd4a6cf8b397832dee3df2 Mon Sep 17 00:00:00 2001
From: Pavol Rusnak <stick@gk2.sk>
Date: Tue, 9 Jun 2009 13:28:37 +0000
Subject: [PATCH] keyboard handling (work in progress)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@79 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/images/{submit.png => save.png} | Bin
 editor/svg-editor.html                 |  17 ++--
 editor/svg-editor.js                   | 119 +++++++++++++++++++------
 editor/svgcanvas.js                    |  16 ++--
 4 files changed, 110 insertions(+), 42 deletions(-)
 rename editor/images/{submit.png => save.png} (100%)

diff --git a/editor/images/submit.png b/editor/images/save.png
similarity index 100%
rename from editor/images/submit.png
rename to editor/images/save.png
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 566db734..da25622c 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -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/>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 3ea44900..443790be 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -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) {
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 6c39aec4..5e45c68b 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -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);
+			}
 		}
 	}