From 8e8f44861d59c1309eb1c75fac61543e3713b6db Mon Sep 17 00:00:00 2001
From: Jeff Schiller <codedread@gmail.com>
Date: Mon, 13 Jul 2009 00:17:15 +0000
Subject: [PATCH] Start of Edit Source capabilities for SVG-edit

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@312 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 34 +++++++++++++++
 editor/svg-editor.html | 13 +++++-
 editor/svg-editor.js   | 93 ++++++++++++++++++++++++++++++++----------
 editor/svgcanvas.js    | 11 ++---
 4 files changed, 124 insertions(+), 27 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 8dad79ac..45a932a1 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -272,3 +272,37 @@ div.color_block {
 #svg_editor #copyright {
 	text-align: right;
 }
+
+#svg_source_editor {
+	display: none;
+}
+
+#svg_source_overlay {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	left: 0px;
+	bottom: 0px;
+	background-color: black;
+	opacity: 0.6;
+}
+
+#svg_source_container {
+	position: absolute;
+	top: 30px;
+	left: 30px;
+	right: 30px;
+	bottom: 30px;
+	background-color: #B0B0B0;
+	opacity: 1.0;
+	text-align: center;
+}
+
+#svg_source_textarea {
+	position: relative;
+	width: 95%;
+	top: 35px;
+	height: 90%;
+	padding: 5px;
+	font-size: 12px;
+}
\ No newline at end of file
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index e0970c8d..f4094c98 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -28,10 +28,11 @@
 </div>
 
 <div id="tools_top" class="tools_panel">
-	<!-- File-like buttons: New, Save -->
+	<!-- File-like buttons: New, Save, Source -->
 	<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"/>
+		<!--img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/-->
 	</div>
 
     <!-- History buttons -->
@@ -216,6 +217,16 @@
 	<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
 </div>
 
+</div> <!-- svg_editor -->
+
+<div id="svg_source_editor">
+	<div id="svg_source_overlay"></div>
+	<div id="svg_source_container">
+		<div id="tool_source_back" class="toolbar_button"></div>
+		<form>
+			<textarea id="svg_source_textarea"></textarea>
+		</form>
+	</div>
 </div>
 
 <script type="text/javascript">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 834f04c3..78bd6f08 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -16,9 +16,13 @@ function svg_edit_setup() {
 		svgCanvas.setMode('select');
 	}
 
+	// used to make the flyouts stay ont he screen longer the very first time
+	var ellipse_flyout_speed = 'slow';
+	var rect_flyout_speed = 'slow';
 	var textBeingEntered = false;
 	var selectedElement = null;
 	var multiselected = false;
+	var editingsource = false;
 
 	// called when we've selected a different element
 	var selectedChanged = function(window,elems) {
@@ -288,61 +292,61 @@ function svg_edit_setup() {
 			svgCanvas.setMode('select');
 			$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
 		}
-	}
+	};
 
 	var clickPath = function() {
 		if (toolButtonClick('#tool_path')) {
 			svgCanvas.setMode('path');
 		}
-	}
+	};
 
 	var clickLine = function() {
 		if (toolButtonClick('#tool_line')) {
 			svgCanvas.setMode('line');
 		}
-	}
+	};
 
 	var clickSquare = function(){
 		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('square');
 		}
 		$('#tools_rect_show').attr('src', 'images/square.png');
-	}
+	};
 
 	var clickRect = function(){
 		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('rect');
 		}
 		$('#tools_rect_show').attr('src', 'images/rect.png');
-	}
+	};
 
 	var clickFHRect = function(){
 		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('fhrect');
 		}
 		$('#tools_rect_show').attr('src', 'images/freehand-square.png');
-	}
+	};
 
 	var clickCircle = function(){
 		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('circle');
 		}
 		$('#tools_ellipse_show').attr('src', 'images/circle.png');
-	}
+	};
 
 	var clickEllipse = function(){
 		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('ellipse');
 		}
 		$('#tools_ellipse_show').attr('src', 'images/ellipse.png');
-	}
+	};
 
 	var clickFHEllipse = function(){
 		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('fhellipse');
 		}
 		$('#tools_ellipse_show').attr('src', 'images/freehand-circle.png');
-	}
+	};
 
 	// Delete is a contextual tool that only appears in the ribbon if
 	// an element has been selected
@@ -350,37 +354,37 @@ function svg_edit_setup() {
 		if (selectedElement != null || multiselected) {
 			svgCanvas.deleteSelectedElements();
 		}
-	}
+	};
 
 	var moveToTopSelected = function() {
 		if (selectedElement != null) {
 			svgCanvas.moveToTopSelectedElement();
 		}
-	}
+	};
 
 	var moveToBottomSelected = function() {
 		if (selectedElement != null) {
 			svgCanvas.moveToBottomSelectedElement();
 		}
-	}
+	};
 
 	var moveSelected = function(dx,dy) {
 		if (selectedElement != null || multiselected) {
 			svgCanvas.moveSelectedElement(dx,dy);
 		}
-	}
+	};
 
 	var clickText = function(){
 		toolButtonClick('#tool_text');
 		svgCanvas.setMode('text');
-	}
+	};
 
 	var clickClear = function(){
 		if( confirm('Do you want to clear the drawing?\nThis will also erase your undo history!') ) {
 			svgCanvas.clear();
 			updateContextPanel();
 		}
-	}
+	};
 	
 	var clickBold = function(){
 		svgCanvas.setBold( !svgCanvas.getBold() );
@@ -394,17 +398,56 @@ function svg_edit_setup() {
 
 	var clickSave = function(){
 		svgCanvas.save();
-	}
+	};
 
 	var clickUndo = function(){
 		if (svgCanvas.getUndoStackSize() > 0)
 			svgCanvas.undo();
-	}
+	};
 
 	var clickRedo = function(){
 		if (svgCanvas.getRedoStackSize() > 0)
 			svgCanvas.redo();
-	}
+	};
+	
+	// TODO: prevent 'u' from showing up in the textarea
+	// TODO: prevent extra carriage returns
+	// TODO: properly size the text area during resize
+	// TODO: properly handle error conditions (error msg dialog)
+	// TODO: prevent @style showing up on the svg element
+	// TODO: create new button or Source Editor
+	var showSourceEditor = function(){
+		if (editingsource) return;
+		editingsource = true;
+		var str = svgCanvas.getSvgString();
+		console.log(str);
+		$('#svg_source_textarea').val(str);
+		$('#svg_source_editor').fadeIn();
+		properlySourceSizeTextArea();
+	};
+	
+	var properlySourceSizeTextArea = function(){
+		// TODO: remove magic numbers here
+		var height = ($(window).height() - 115)/(12*1.5);
+		$('#svg_source_textarea').attr('rows', height);
+	};
+	
+	var hideSourceEditor = function(){
+		if (!editingsource) return;
+		
+		if (svgCanvas.setSvgString($('#svg_source_textarea').val())) {
+			console.log('yo');
+		}
+		$('#svg_source_editor').hide();
+		editingsource = false;
+	};
+	
+	// TODO: add canvas-centering code in here
+	$(window).resize(function(evt) {
+		if (!editingsource) return;
+		
+		properlySourceSizeTextArea();
+	});
 
 	$('#tool_select').click(clickSelect);
 	$('#tool_path').click(clickPath);
@@ -418,13 +461,14 @@ function svg_edit_setup() {
 	$('#tool_text').click(clickText);
 	$('#tool_clear').click(clickClear);
 	$('#tool_save').click(clickSave);
+	$('#tool_source').click(showSourceEditor);
 	$('#tool_delete').click(deleteSelected);
 	$('#tool_delete_multi').click(deleteSelected);
 	$('#tool_move_top').click(moveToTopSelected);
 	$('#tool_move_bottom').click(moveToBottomSelected);
 	$('#tool_undo').click(clickUndo);
 	$('#tool_redo').click(clickRedo);
-	// these two lines are required to make Opera work properly with the new flyout mechanism
+	// these two lines are required to make Opera work properly with the flyout mechanism
 	$('#tools_rect_show').click(clickSquare);
 	$('#tools_ellipse_show').click(clickCircle);
 	$('#tool_bold').mousedown(clickBold);
@@ -438,6 +482,9 @@ function svg_edit_setup() {
 	$('#tool_save').mousedown(function(){$('#tool_save').addClass('tool_button_current');});
 	$('#tool_save').mouseup(function(){$('#tool_save').removeClass('tool_button_current');});
 	$('#tool_save').mouseout(function(){$('#tool_save').removeClass('tool_button_current');});
+	$('#tool_source').mousedown(function(){$('#tool_source').addClass('tool_button_current');});
+	$('#tool_source').mouseup(function(){$('#tool_source').removeClass('tool_button_current');});
+	$('#tool_source').mouseout(function(){$('#tool_source').removeClass('tool_button_current');});	
 	$('#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');});
@@ -479,6 +526,8 @@ function svg_edit_setup() {
 	$(document).bind('keydown', {combi:'z', disableInInput: true}, clickUndo);
 	$(document).bind('keydown', {combi:'shift+z', disableInInput: true}, clickRedo);
 	$(document).bind('keydown', {combi:'y', disableInInput: true}, clickRedo);
+	$(document).bind('keydown', {combi:'u', disableInInput: true}, showSourceEditor);
+	$(document).bind('keydown', {combi:'esc', disableInInput: false}, hideSourceEditor);
 	// temporary binding to test setSvgString()
 	/* 
 	$(document).bind('keydown', {combi:'t', disableInInput: true}, function() {
@@ -609,7 +658,8 @@ function svg_edit_setup() {
 	});
 
 	$('#tools_rect_show').mousedown(function(evt){
-		$('#tools_rect').show();
+		$('#tools_rect').show(rect_flyout_speed);
+		rect_flyout_speed = '';
 		// this prevents the 'image drag' behavior in Firefox
 		evt.preventDefault();
 	});
@@ -618,7 +668,8 @@ function svg_edit_setup() {
 	});
 
 	$('#tools_ellipse_show').mousedown(function(evt){
-		$('#tools_ellipse').show();
+		$('#tools_ellipse').show(ellipse_flyout_speed);
+		ellipse_flyout_speed = '';
 		// this prevents the 'image drag' behavior in Firefox
 		evt.preventDefault();
 	});
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index a33dcbc6..bd8787d8 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -11,7 +11,7 @@ var svgWhiteList = {
 	"ellipse": ["cx", "cy", "fill", "fill-opacity", "id", "stroke", "rx", "ry", "stroke-opacity", "stroke-width", "stroke-dasharray"],
 	"line": ["fill", "fill-opacity", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "x1", "x2", "y1", "y2"],
 	"path": ["d", "fill", "fill-opacity", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"],
-	"rect": ["fill", "fill-opacity", "height", "id", "rx", "ry", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "width"],
+	"rect": ["fill", "fill-opacity", "height", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "width", "x", "y"],
 	"svg": ["id", "height", "width", "xmlns"],
 	"text": ["font-family", "font-size", "font-style", "font-weight", "id", "x", "y"],
 	};
@@ -501,9 +501,7 @@ function SvgCanvas(c)
 			obj_num++;
 			id = getId();
 		}
-		console.log(id);
-		return id;
-	
+		return id;	
 	};
 
 	var call = function(event, arg) {
@@ -620,7 +618,9 @@ function SvgCanvas(c)
 						out.push(svgToString(childs.item(i), indent));
 					} else if (child.nodeType == 3) { // text node
 						bOneLine = true;
-						out.push(child.nodeValue + "");
+						if (child.nodeValue != "") {
+							out.push(child.nodeValue + "");
+						}
 					}
 				}
 				indent--;
@@ -1338,6 +1338,7 @@ function SvgCanvas(c)
 	// FIXME: after parsing in the new file, how do we synchronize getId()?
 	this.setSvgString = function(xmlString) {
 		try {
+			console.log(xmlString);
 			// convert string into XML document
 			var newDoc = Utils.text2xml(xmlString);