Fix Issue 13: Disable tool buttons when stroke or stroke+fill are none

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

CHANGES

@@ -11,6 +11,7 @@
 * added Select tool
 * using jQuery hosted by Google instead of local version
 * allow dragging of elements
+* added keystroke shortcuts for all tools
 
 2.0 - June 03, 2009
 ------------------

README

@@ -12,9 +12,8 @@ jQuery JavaScript Library v1.3.2
 http://jquery.com/
 Copyright (c) 2009 John Resig
 
-jQuery Right-Click Plugin
+jQuery js-Hotkeys
-http://abeautifulsite.net/notebook/68
+http://code.google.com/p/js-hotkeys/
-Copyright (c) 2008 Cory S.N. LaViska
 
 jPicker
 http://www.digitalmagicpro.com/jPicker/

editor/svg-editor.css

@@ -110,7 +110,7 @@
 	vertical-align:12px;
 }
 
-#svg_editor .tool_button, #svg_editor .tool_button_current {
+#svg_editor .tool_button, #svg_editor .tool_button_current, #svg_editor .tool_button_disabled {
 	height: 24px;
 	width: 24px;
 	margin: 2px;
@@ -130,6 +130,11 @@
 	background-color: #B0B0B0;
 }
 
+#svg_editor .tool_button_disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
 #svg_editor #color_pick {
 	position: absolute;
 	display: none;

editor/svg-editor.html

@@ -90,8 +90,8 @@
 
 <div id="tools" class="tools_panel">
 
-<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_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_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_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>

editor/svg-editor.js

@@ -23,17 +23,20 @@ function svg_edit_setup() {
 			
 			// update fill color
 			var fillColor = elem.getAttribute("fill");
-			if (fillColor == null || fillColor == "" || fillColor == "none") {
+			svgCanvas.setFillColor(fillColor);			
+			if (fillColor == "none") {
 				fillColor = 'url(\'images/none.png\')';
 			}
 			$('#fill_color').css('background', fillColor);
 
 			// update stroke color
 			var strokeColor = elem.getAttribute("stroke");
+			svgCanvas.setStrokeColor(strokeColor);
 			if (strokeColor == null || strokeColor == "" || strokeColor == "none") {
 				strokeColor = 'url(\'images/none.png\')';
 			}
 			$('#stroke_color').css('background', strokeColor);
+			
 			// update fill opacity
 			var fillOpacity = elem.getAttribute("fill-opacity");
 			if (fillOpacity == null || fillColor == "") {
@@ -71,6 +74,8 @@ function svg_edit_setup() {
 				strokeDashArray = "none";
 			}
 			$('#stroke_style').val(strokeDashArray);
+			
+			updateToolButtonState();
 		} // if (elem != null)
 		
 		updateContextPanel();
@@ -166,6 +171,7 @@ function svg_edit_setup() {
 		}
 		if (evt.shiftKey) svgCanvas.setStrokeColor(color);
 		else svgCanvas.setFillColor(color);
+		updateToolButtonState();		
 	});
 
 	// This is a common function used when a tool has been clicked (chosen)
@@ -173,60 +179,72 @@ function svg_edit_setup() {
 	// - hides any flyout menus
 	// - removes the tool_button_current class from whatever tool currently has it
 	// - adds the tool_button_current class to the button passed in
-	var toolButtonClick = function(button){
+	var toolButtonClick = function(button) {
+		if ($(button).hasClass('tool_button_disabled')) return false;
+		
 		$('#styleoverrides').text('');
 		$('.tools_flyout').hide();
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
 		$(button).addClass('tool_button_current');
 		// when a tool is selected, we should deselect the currently selected element
 		svgCanvas.selectNone();
+		return true;
 	};
 
 	var clickSelect = function() {
-		toolButtonClick('#tool_select');
+		if (toolButtonClick('#tool_select')) {
 			svgCanvas.setMode('select');
 			$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
 		}
+	}
 
 	var clickPath = function() {
-		toolButtonClick('#tool_path');
+		if (toolButtonClick('#tool_path')) {
 			svgCanvas.setMode('path');
 		}
+	}
 
 	var clickLine = function() {
-		toolButtonClick('#tool_line');
+		if (toolButtonClick('#tool_line')) {
 			svgCanvas.setMode('line');
 		}
+	}
 
 	var clickSquare = function(){
-		toolButtonClick('#tools_rect_show');
+		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('square');
 		}
+	}
 
 	var clickRect = function(){
-		toolButtonClick('#tools_rect_show');
+		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('rect');
 		}
+	}
 
 	var clickFHRect = function(){
-		toolButtonClick('#tools_rect_show');
+		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('fhrect');
 		}
+	}
 
 	var clickCircle = function(){
-		toolButtonClick('#tools_ellipse_show');
+		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('circle');
 		}
+	}
 
 	var clickEllipse = function(){
-		toolButtonClick('#tools_ellipse_show');
+		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('ellipse');
 		}
+	}
 
 	var clickFHEllipse = function(){
-		toolButtonClick('#tools_ellipse_show');
+		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('fhellipse');
 		}
+	}
 
 	// Delete is a contextual tool that only appears in the ribbon if 
 	// an element has been selected
@@ -335,12 +353,52 @@ function svg_edit_setup() {
 		});
 	}
 
+	function updateToolButtonState() {
+		var bNoFill = (svgCanvas.getFillColor() == 'none');
+		var bNoStroke = (svgCanvas.getStrokeColor() == 'none');
+		var buttonsNeedingStroke = [ '#tool_path', '#tool_line' ];
+		var buttonsNeedingFillAndStroke = [ '#tools_rect_show', '#tools_ellipse_show', '#tool_text' ];
+		if (bNoStroke) {
+			for (index in buttonsNeedingStroke) {
+				var button = buttonsNeedingStroke[index];
+				if ($(button).hasClass('tool_button_current')) {
+					clickSelect();
+				}
+				$(button).removeClass('tool_button').addClass('tool_button_disabled');
+			}
+		}
+		else {
+			for (index in buttonsNeedingStroke) {
+				var button = buttonsNeedingStroke[index];
+				$(button).removeClass('tool_button_disabled').addClass('tool_button');
+			}
+		}
+		
+		if (bNoStroke && bNoFill) {
+			for (index in buttonsNeedingFillAndStroke) {
+				var button = buttonsNeedingFillAndStroke[index];
+				if ($(button).hasClass('tool_button_current')) {
+					clickSelect();
+				}
+				$(button).removeClass('tool_button').addClass('tool_button_disabled');
+			}
+		}
+		else {
+			for (index in buttonsNeedingFillAndStroke) {
+				var button = buttonsNeedingFillAndStroke[index];
+				$(button).removeClass('tool_button_disabled').addClass('tool_button');
+			}
+		}
+	}
+	
 	$('#fill_color').click(function(){
 		colorPicker($(this));
+		updateToolButtonState();
 	});
 
 	$('#stroke_color').click(function(){
 		colorPicker($(this));
+		updateToolButtonState();
 	});
 
 	// this hides any flyouts and then shows the rect flyout

editor/svgcanvas.js

@@ -283,6 +283,7 @@ function SvgCanvas(c)
 						"stroke-width": current_stroke_width,
 						"stroke-dasharray": current_stroke_style,
 						"stroke-opacity": current_stroke_opacity,
+						"fill": "none",
 						"opacity": current_opacity / 2
 					}
 				});