added move to top/bottom feature

reworked context panels


git-svn-id: http://svg-edit.googlecode.com/svn/trunk@144 eee81c28-f429-11dd-99c0-75d572ba1ddd

CHANGES

@@ -12,6 +12,7 @@
 * using jQuery hosted by Google instead of local version
 * allow dragging of elements
 * added keystroke shortcuts for all tools
+* move to top/bottom
 
 2.0 - June 03, 2009
 ------------------

editor/svg-editor.css

@@ -84,13 +84,17 @@
 	border-bottom: none;
 }
 
+#svg_editor #context_tools div {
+	float: left;
+}
+
 #svg_editor #tools {
 	border-right: none;
 	height: 504px;
 	width: 64px;
 }
 
-#svg_editor #tool_delete {
+#svg_editor #selected_panel {
 	display: none;
 }
 
@@ -135,6 +139,14 @@
 	cursor: default;
 }
 
+#svg_editor .tool_sep {
+	width: 2px;
+	height: 24px;
+	margin: 2px;
+	margin-right: 0;
+	padding: 2px;
+}
+
 #svg_editor #color_pick {
 	position: absolute;
 	display: none;

editor/svg-editor.html

@@ -30,18 +30,22 @@
 
 <div id="context_tools" class="tools_panel">
 	<!-- File-like buttons: New, Save -->
+	<div>
 	<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
 	<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
-	
-	<!-- FIXME: need a separator image -->
+	</div>
 
-	<!-- Edit-like buttons: Delete -->
+	<!-- Buttons when something is selected -->
+	<div id="selected_panel">
+	<img class="tool_sep" src="images/sep.png" alt="|"/>
 	<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [X]" alt="Delete"/>
-	
-	<!-- FIXME: need a separator image -->
+	<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top" alt="Top"/>
+	<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom" alt="Bottom"/>
+	</div>
 
 	<!-- TODO: also add x, y, width, height -->
 	<div id="rect_panel">
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="rect_tool" >Radius:</label>
 		<!-- TODO: turn this into a spinner control! -->
 		<select id="rect_radius" class="rect_tool" title="Change Rectangle Corner Radius" alt="Corner Radius">
@@ -56,10 +60,11 @@
 			<option value="20">20</option>
 		</select>
 	</div>
-	
+
 	<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
 
 	<div id="text_panel">
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<select id="font_family" class="text_tool" title="Change Font Family">
 			<option selected="selected" value="serif">serif</option>
 			<option value="sans-serif">sans-serif</option>
@@ -93,7 +98,7 @@
 <img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
 <img class="tool_button" 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="Rect/Square Tool [4/Shift+4]" alt="Square"/><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="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
 <img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/>
 

editor/svg-editor.js

@@ -9,21 +9,21 @@ function svg_edit_setup() {
 		$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
 		svgCanvas.setMode('select');
 	}
-	
+
 	var textBeingEntered = false;
 	var selectedElement = null;
 	var selectedChanged = function(window,elem) {
 		selectedElement = elem;
 		if (elem != null) {
-		
+
 			// always set the mode of the editor to select because
 			// upon creation of a text element the editor is switched into
 			// select mode and this event fires - we need our UI to be in sync
 			setSelectMode();
-			
+
 			// update fill color
 			var fillColor = elem.getAttribute("fill");
-			svgCanvas.setFillColor(fillColor);			
+			svgCanvas.setFillColor(fillColor);
 			if (fillColor == "none") {
 				fillColor = 'url(\'images/none.png\')';
 			}
@@ -83,11 +83,11 @@ function svg_edit_setup() {
 
 	function updateContextPanel() {
 		var elem = selectedElement;
-		$('#tool_delete').hide();
+		$('#selected_panel').hide();
 		$('#rect_panel').hide();
 		$('#text_panel').hide();
 		if (elem != null) {
-			$('#tool_delete').show();
+			$('#selected_panel').show();
 			// update contextual tools here
 			switch(elem.tagName) {
 				case "rect":
@@ -246,7 +246,7 @@ function svg_edit_setup() {
 		}
 	}
 
-	// Delete is a contextual tool that only appears in the ribbon if 
+	// Delete is a contextual tool that only appears in the ribbon if
 	// an element has been selected
 	var deleteSelected = function() {
 		if (selectedElement != null) {
@@ -254,6 +254,18 @@ function svg_edit_setup() {
 		}
 	}
 
+	var moveToTopSelected = function() {
+		if (selectedElement != null) {
+			svgCanvas.moveToTopSelectedElement();
+		}
+	}
+
+	var moveToBottomSelected = function() {
+		if (selectedElement != null) {
+			svgCanvas.moveToBottomSelectedElement();
+		}
+	}
+
 	var clickText = function(){
 		toolButtonClick('#tool_text');
 		svgCanvas.setMode('text');
@@ -281,7 +293,9 @@ function svg_edit_setup() {
 	$('#tool_text').click(clickText);
 	$('#tool_clear').click(clickClear);
 	$('#tool_save').click(clickSave);
-	$('#tool_delete').click(deleteSelected);	
+	$('#tool_delete').click(deleteSelected);
+	$('#tool_move_top').click(moveToTopSelected);
+	$('#tool_move_bottom').click(moveToBottomSelected);
 
 	// added these event handlers for all the push buttons so they 
 	// behave more like buttons being pressed-in and not images
@@ -294,6 +308,12 @@ function svg_edit_setup() {
 	$('#tool_delete').mousedown(function(){$('#tool_delete').addClass('tool_button_current');});
 	$('#tool_delete').mouseup(function(){$('#tool_delete').removeClass('tool_button_current');});
 	$('#tool_delete').mouseout(function(){$('#tool_delete').removeClass('tool_button_current');});
+	$('#tool_move_top').mousedown(function(){$('#tool_move_top').addClass('tool_button_current');});
+	$('#tool_move_top').mouseup(function(){$('#tool_move_top').removeClass('tool_button_current');});
+	$('#tool_move_top').mouseout(function(){$('#tool_move_top').removeClass('tool_button_current');});
+	$('#tool_move_bottom').mousedown(function(){$('#tool_move_bottom').addClass('tool_button_current');});
+	$('#tool_move_bottom').mouseup(function(){$('#tool_move_bottom').removeClass('tool_button_current');});
+	$('#tool_move_bottom').mouseout(function(){$('#tool_move_bottom').removeClass('tool_button_current');});
 
 	// do keybindings using jquery-hotkeys plugin
 	$(document).bind('keydown', {combi:'1', disableInInput: true}, clickSelect);

editor/svgcanvas.js

@@ -795,6 +795,26 @@ function SvgCanvas(c)
 		}
 	}
 
+	this.moveToTopSelectedElement = function() {
+		if (selected != null) {
+			var t = selected;
+			t.parentNode.appendChild(t);
+		}
+		else {
+			alert("Error!  Nothing selected!");
+		}
+	}
+
+	this.moveToBottomSelectedElement = function() {
+		if (selected != null) {
+			var t = selected;
+			t.parentNode.insertBefore(t, t.parentNode.firstChild);
+		}
+		else {
+			alert("Error!  Nothing selected!");
+		}
+	}
+
 }
 
 // Static class for various utility functions