Fix Issue 14: manual merge of text-enabled branch into trunk to enable text element creation/editing

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

editor/svg-editor.css

@@ -57,10 +57,6 @@
 	height: 16px;
 }
 
-#svg_editor div#tools {
-	float: left;
-}
-
 #svg_editor div#workarea {
 	float: left;
 }
@@ -71,11 +67,12 @@
 	float: left;
 }
 
-#tools {
+.tools_panel {
 	background: #E8E8E8;
-	height: 580px;
 	border: 1px solid #808080;
 	padding: 4px;
+	float:left;
+	clear:both;
 }
 
 .tool_button, .tool_button_current {

editor/svg-editor.html

@@ -29,7 +29,7 @@
 <div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
 </div>
 
-<div id="tools">
+<div id="tools" class="tools_panel">
 
 <div>
 <img class="tool_button" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
@@ -97,7 +97,7 @@
 </select>
 </div>
 <hr/>
-<div>
+<div>opacity<br/>
 <select id="group_opacity" title="Change group opacity">
 <option selected="selected" value="1">100 %</option>
 <option value="0.9">90 %</option>
@@ -126,6 +126,33 @@
 </div>
 </div>
 
+<div id="text_panel" class="tools_panel">
+<div>text
+<select id="font_family" class="text_tool" title="Change Font Family" disabled>
+<option selected="selected" value="serif">serif</option>
+<option selected="selected" value="sans-serif">sans-serif</option>
+<option selected="selected" value="cursive">cursive</option>
+<option selected="selected" value="fantasy">fantasy</option>
+<option selected="selected" value="monospace">monospace</option>
+</select>
+<select id="font_size" class="text_tool" title="Change Font Size" disabled>
+<option selected="selected" value="6pt">6pt</option>
+<option selected="selected" value="8pt">8pt</option>
+<option selected="selected" value="10pt">10pt</option>
+<option selected="selected" value="12pt">12pt</option>
+<option selected="selected" value="14pt">14pt</option>
+<option selected="selected" value="16pt">16pt</option>
+<option selected="selected" value="24pt">24pt</option>
+<option selected="selected" value="32pt">32pt</option>
+<option selected="selected" value="48pt">48pt</option>
+<option selected="selected" value="64pt">64pt</option>
+<option selected="selected" value="80pt">80pt</option>
+<option selected="selected" value="100pt">100pt</option>
+</select>
+<input id="text" class="text_tool" type="text" title="Change text contents" size="60" disabled/>
+</div>
+</div>
+
 </div>
 
 </div>

editor/svg-editor.js

@@ -3,9 +3,21 @@ var palette = ["#000000","#202020","#404040","#606060","#808080","#a0a0a0","#c0c
 function svg_edit_setup() {
 	var svgCanvas = new SvgCanvas(document.getElementById("svgcanvas"));
 
+	var setSelectMode = function() {
+		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
+		$('#tool_select').addClass('tool_button_current');
+		$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
+		svgCanvas.setMode('select');
+	}
+	
+	var textBeingEntered = false;
+
 	var selectedChanged = function(window,elem) {
 		if (elem != null) {
 		
+			// set the mode of the editor to select
+			setSelectMode();
+
 			// update fill color
 			var fillColor = elem.getAttribute("fill");
 			if (fillColor == null || fillColor == "" || fillColor == "none") {
@@ -56,8 +68,23 @@ function svg_edit_setup() {
 				strokeDashArray = "none";
 			}
 			$('#stroke_style').val(strokeDashArray);
+			
+			if (elem.tagName == "text") {
+				$('.text_tool').removeAttr('disabled');
+				$('#font_family').val(elem.getAttribute("font-family"));
+				$('#font_size').val(elem.getAttribute("font-size"));
+				$('#text').val(elem.textContent);
+				$('#text').focus();
+				$('#text').select();
+			}
+			else {
+				$('.text_tool').attr('disabled', "disabled");
 			}
 		}
+	}
+
+	$('#text').focus( function(){ textBeingEntered = true; } );
+	$('#text').blur( function(){ textBeingEntered = false; } );
 
 	// bind the selected event to our function that handles updates to the UI
 	svgCanvas.bind("selected", selectedChanged);
@@ -93,6 +120,18 @@ function svg_edit_setup() {
 		svgCanvas.setOpacity(this.options[this.selectedIndex].value);
 	});
 	
+	$('#font_size').change(function(){
+		svgCanvas.setFontSize(this.options[this.selectedIndex].value);
+	});
+	
+	$('#font_family').change(function(){
+		svgCanvas.setFontFamily(this.options[this.selectedIndex].value);
+	});
+	
+	$('#text').keyup(function(){
+		svgCanvas.setTextContent(this.value);
+	});
+
 	$('.palette_item').click(function(){
 		color = $(this).css('background-color');
 		if (color == 'transparent') {
@@ -210,6 +249,7 @@ function svg_edit_setup() {
 	$('#tool_save').click(clickSave);
 
 	$('#workarea').keyup(function(event){
+		if( textBeingEntered ) { return; }
 		switch (event.keyCode) {
 			case 37: // left-arrow
 				break;

editor/svgcanvas.js

@@ -29,6 +29,8 @@ function SvgCanvas(c)
 	var current_opacity = 1;
 	var current_stroke_opacity = 1;
 	var current_fill_opacity = 1;
+	var current_font_size = "12pt";
+	var current_font_family = "serif";
 	var freehand_min_x = null;
 	var freehand_max_x = null;
 	var freehand_min_y = null;
@@ -119,17 +121,15 @@ function SvgCanvas(c)
 		
 		// remove selected outline from previously selected element
 		if (selected != null && selectedOutline != null) {
-			svgroot.removeChild(selectedOutline);
+			// remove from DOM and store reference in JS
-			selectedOutline = null;
+			selectedOutline = svgroot.removeChild(selectedOutline);
 		}
 		
 		selected = newSelected;
 		
 		if (selected != null) {
-			var bbox = selected.getBBox();
+			// we create this element for the first time here
-			// ideally we should create this element once during init, then remove from the DOM
+			if (selectedOutline == null) {
-			// and re-append to end of documentElement.  This will also allow us to do some
-			// interesting things like animate the stroke-dashoffset using a SMIL <animate> child
 				selectedOutline = addSvgElementFromJson({
 					"element": "rect",
 					"attr": {
@@ -138,14 +138,17 @@ function SvgCanvas(c)
 						"stroke": "blue",
 						"stroke-width": "1",
 						"stroke-dasharray": "5,5",
-						"x": bbox.x-1,
+						"width": 1,
-						"y": bbox.y-1,
+						"height": 1,
-						"width": bbox.width+2,
-						"height": bbox.height+2,
 						// need to specify this style so that the selectedOutline is not selectable
 						"style": "pointer-events:none",
 					}
 				});
+				// TODO: add SMIL animate child on stroke-dashoffset here
+			}
+			// recalculate size and then re-append to bottom of document
+			recalculateSelectedOutline();
+			svgroot.appendChild(selectedOutline);
 			
 			// set all our current styles to the selected styles
 			current_fill = selected.getAttribute("fill");
@@ -154,11 +157,30 @@ function SvgCanvas(c)
 			current_stroke_opacity = selected.getAttribute("stroke-opacity");
 			current_stroke_width = selected.getAttribute("stroke-width");
 			current_stroke_style = selected.getAttribute("stroke-dasharray");
+			if (selected.tagName == "text") {
+				current_font_size = selected.getAttribute("font-size");
+				current_font_family = selected.getAttribute("font-family");
+			}
 		}
 		
 		call("selected", selected);
 	}
 	
+	var recalculateSelectedOutline = function() {
+		if (selected != null && selectedOutline != null) {
+			var bbox = selected.getBBox();
+			var sw = selected.getAttribute("stroke-width");
+			var offset = 1;
+			if (sw != null && sw != "") {
+				offset += parseInt(sw)/2;
+			}
+			selectedOutline.setAttribute("x", bbox.x-offset);
+			selectedOutline.setAttribute("y", bbox.y-offset);
+			selectedOutline.setAttribute("width", bbox.width+(offset<<1));
+			selectedOutline.setAttribute("height", bbox.height+(offset<<1));
+		}	
+	}
+
 	var mouseDown = function(evt)
 	{
 		var x = evt.pageX - container.offsetLeft;
@@ -278,6 +300,27 @@ function SvgCanvas(c)
 					}
 				});
 				break;
+			case "text":
+				started = true;
+				var newText = addSvgElementFromJson({
+					"element": "text",
+					"attr": {
+						"x": x,
+						"y": y,
+						"id": getId(),
+						"fill": current_fill,
+						"stroke": current_stroke,
+						"stroke-width": current_stroke_width,
+						"stroke-dasharray": current_stroke_style,
+						"stroke-opacity": current_stroke_opacity,
+						"fill-opacity": current_fill_opacity,
+						"opacity": current_opacity / 2,
+						"font-size": current_font_size,
+						"font-family": current_font_family,
+					}
+				});
+				newText.textContent = "text";
+				break;
 			case "delete":
 				var t = evt.target;
 				if (t == svgroot) return;
@@ -293,7 +336,6 @@ function SvgCanvas(c)
 		var x = evt.pageX - container.offsetLeft;
 		var y = evt.pageY - container.offsetTop;
 		var shape = svgdoc.getElementById(getId());
-		if (!shape) return; // Error?
 		switch (current_mode)
 		{
 			case "select":
@@ -307,6 +349,10 @@ function SvgCanvas(c)
 					selectedOutline.setAttributeNS(null, "transform", "translate(" + dx + "," + dy + ")");
 				}
 				break;
+			case "text":
+				shape.setAttribute("x", x);
+				shape.setAttribute("y", y);
+				break;
 			case "line":
 				shape.setAttributeNS(null, "x2", x);
 				shape.setAttributeNS(null, "y2", y);
@@ -477,20 +523,22 @@ function SvgCanvas(c)
 					}));
 				}
 				break;
+			case "text":
+				keep = true;
+				selectElement(element);
+				break;
 		}
 		d_attr = null;
 		obj_num++;
-		if (element != null) {
 		if (!keep) {
 			element.parentNode.removeChild(element);
 			element = null;
-			} else {
+		} else if (element != null) {
 			element.setAttribute("opacity", current_opacity);
 			cleanupElement(element);
 			call("changed",element);
 		}
 	}
-	}
 
 // public functions
 
@@ -557,6 +605,7 @@ function SvgCanvas(c)
 		current_stroke_width = val;
 		if (selected != null) {
 			selected.setAttribute("stroke-width", val);
+			recalculateSelectedOutline();
 			call("changed", selected);
 		}
 	}
@@ -627,6 +676,45 @@ function SvgCanvas(c)
 		events[event] = f;
 	}
 
+	this.getFontFamily = function() {
+		return current_font_family;
+	}
+        
+	this.setFontFamily = function(val) {
+    	current_font_family = val;
+		if (selected != null) {
+			selected.setAttribute("font-family", val);
+			recalculateSelectedOutline();
+			call("changed", selected);
+		}
+	}
+
+	this.getFontSize = function() {
+		return current_font_size;
+	}
+	
+	this.setFontSize = function(val) {
+		current_font_size = val;
+		if (selected != null) {
+			selected.setAttribute("font-size", val);
+			recalculateSelectedOutline();
+			call("changed", selected);
+		}
+	}
+	
+	this.getText = function() {
+		if (selected == null) { return ""; }
+		return selected.textContent;
+	}
+	
+	this.setTextContent = function(val) {
+		if (selected != null) {
+			selected.textContent = val;
+			recalculateSelectedOutline();
+			call("changed", selected);
+		}
+	}
+
 	$(container).mouseup(mouseUp);
 	$(container).mousedown(mouseDown);
 	$(container).mousemove(mouseMove);