From 28af49697d1fdba053dab2eaef6326aa17096df6 Mon Sep 17 00:00:00 2001
From: Pavol Rusnak <stick@gk2.sk>
Date: Wed, 17 Jun 2009 20:08:53 +0000
Subject: [PATCH] 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                       |   1 +
 editor/images/move_bottom.png | Bin 0 -> 737 bytes
 editor/images/move_top.png    | Bin 0 -> 663 bytes
 editor/images/sep.png         | Bin 0 -> 93 bytes
 editor/svg-editor.css         |  14 ++++++++++++-
 editor/svg-editor.html        |  19 +++++++++++-------
 editor/svg-editor.js          |  36 ++++++++++++++++++++++++++--------
 editor/svgcanvas.js           |  20 +++++++++++++++++++
 8 files changed, 74 insertions(+), 16 deletions(-)
 create mode 100644 editor/images/move_bottom.png
 create mode 100644 editor/images/move_top.png
 create mode 100644 editor/images/sep.png

diff --git a/CHANGES b/CHANGES
index 78e87c97..e80132cf 100644
--- a/CHANGES
+++ b/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
 ------------------
diff --git a/editor/images/move_bottom.png b/editor/images/move_bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b13250756d49eaf6709e938d05773f9fcfed78c
GIT binary patch
literal 737
zcmV<70v`Q|P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px%n@L1LR7l6Qls#xvK@i7(v+pCp5JE6uFhbD6RAS>tAu1vWLegntX9}^f5w*0k
z5*yQ5SSm!ckf5c7m6jT?5Ro9t84@itn73c=jm5n?VsdxN5&tmk?(Ey0o%#Rg30v_R
z7zL*2g6Zk$tIoNb&bd)*E!J9`b8MU!MX~0+zhXL^-%(pHoU0$9UG^0i22Q8+0b|Ss
z;0dq`sJ7g$ngXv>^+u=ji@;~L34LWSGc&W#Id|V$yT2%k(tD4!mZB)|-cuBXan3DU
zYtQx-KvnMmr&Lt|>B7Mt5qWI-%=`s_h)9=x0e%AW{gQkScnTyvKJ%)&+HZ->21)ml
zD*Xny4BY)o28hVDemOV;Bu$Qc;zTQhaUcWM>M^OCC<jWQv5A9=z#|bEZ#CMcU<vR>
zRj;=k%XQ5<nct2^I|@t!FE{rT@UBCn9kABkcg{^%YpcyaJ8P}6)~-0`PPPJk0vzxa
z*a?_g#~*;D4kXV3M|zM8Fd-rjH<G*z>;}F7zv@8myWFt=gdQpbSOFe%lIgKJgRU4G
z8=Gr18uKEOcIpFZ!m8?bnVp@TjIkVvF=_~b7$g5ShMxOnS&FKDOhx3a!bmp>scLOd
zwdbvM%alrK`YPQh+2?8DlaX8J7j<-4L?s84p$ve@Q5gcsP^s7CwLgd2)C@Go_Btoe
zhd6lr5{>0=hf+cLv7U<>MKM4^B?2fF6-Y@X5k#6VmkOmsC882g94Z+~j*_A#BhL!T
zs%-YbU|ufWUYOb&LLm4+h=CA1F+@UGCxp<hxo`VDF$8>z3-9aNd$jsPT+dQf4i9GK
zU@8@<RAh+~48#ONBE-}XQbUXhd72V42tkQa2tkO^5OPxoNQg0Oku9pa%Kyf1YE;rE
TpR@rD00000NkvXXu0mjf5KBRj

literal 0
HcmV?d00001

diff --git a/editor/images/move_top.png b/editor/images/move_top.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d54b6a488e99343a62592aa8d77fbf083bd5c10
GIT binary patch
literal 663
zcmV;I0%-k-P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00004b3#c}2nYxW
zd<bNS00009a7bBm000!V000!V0kLj<?f?J)8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10u)I^K~zYIwUt3@Q$Y~Ne-j@X4?@+8C&6g(=m%)AY7C{2+`Ne1
zBnAaNdB~xMo+^6x8wiTvDNsbJwq685MSG~1-ld3!ia0OX-SLq3+89k<nwo)OW@qO8
z|GV>cSgF-&%dJ+c=$xb7Zj;(>e^}ca%jNbxjlB28!pTXFpD5s*$9cbPeV5;{0p}dv
z2io4_(_EVGTEBm@!p8dAYy?m^HOcwX96lH>1iUwVFnr>>5R$dweMstdd>=xxPQD4o
zR<p^*`WjNLR%7Sf{{PvU)FSdVGP7CW9Al8+{WCGMabRzYl*{ECs=BDE6LB1)s;DZd
zpV*Ia9G^9_t$|=7^T52B<<nRWxD8BXY~&0umjPa<)9M2vQWufwl;A$l1mZrbz;obb
z#wP9p#V-FM0A{u)1@0u9upV`QO1WG<s;bvi^+=z8V5<5_RUh?f%}iJOrhzHoUYd`9
zC%}b_<0B%QX7-{tZf2{%YErWROqp3d&F6rS1)j*yA?yB-2)F`V1`hVAG2oS%y&Z|5
z(P(UzN~H%0**^(XH68^VAXlkWZUWzcUwu^b`TS=QIXn^pa0@t;QFj_BjY_Zxd}r{W
zEdhVsprK^1gVr;23mwRvSX8N0j;ZSPj6r*+st-pwKm<GnX0i%J<cpat@0K7(=cWuJ
xKXwZaofBLIE-`q}UYps6A@Eju17m;Degn#MOg)1+C%gav002ovPDHLkV1hh&CmjF)

literal 0
HcmV?d00001

diff --git a/editor/images/sep.png b/editor/images/sep.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b90277793f503a982ce709f2cae91c095c91afa
GIT binary patch
literal 93
zcmeAS@N?(olHy`uVBq!ia0vp^Oh7Eb!3HER{MNY%q!^2X+?^QKos)S9<cNE^IEHXs
qPp<p^?ry!K<3TnxHVp|m9)=5-S=L=Fdi@Zngu&C*&t;ucLK6V+WEvF!

literal 0
HcmV?d00001

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 802cee8f..4eab70f6 100644
--- a/editor/svg-editor.css
+++ b/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;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 358fa481..077c4ad3 100644
--- a/editor/svg-editor.html
+++ b/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"/>
 
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 7b4b5bc3..ea5c538f 100644
--- a/editor/svg-editor.js
+++ b/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);
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index e3f055f7..362edcf3 100644
--- a/editor/svgcanvas.js
+++ b/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