Add a multiselect tool panel. Can now delete multiply-selected elements

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

editor/svg-editor.css

@@ -110,6 +110,10 @@ div.color_block {
 	display: none;
 }
 
+#svg_editor #multiselected_panel {
+	display: none;
+}
+
 #svg_editor #rect_panel {
 	display: none;
 }

editor/svg-editor.html

@@ -33,7 +33,7 @@
 		<img class="tool_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Shift+Z/Y]" alt="Redo"/>
 	</div>
 
-	<!-- Buttons when something is selected -->
+	<!-- Buttons when something a single element 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 [Delete/Backspace]" alt="Delete"/>
@@ -41,6 +41,12 @@
 		<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
 	</div>
 
+	<!-- Buttons when something a single element is selected -->
+	<div id="multiselected_panel">
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
+		<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
+	</div>
+
 	<div id="rect_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="rect_tool">x:</label>

editor/svg-editor.js

@@ -18,11 +18,13 @@ function svg_edit_setup() {
 
 	var textBeingEntered = false;
 	var selectedElement = null;
+	var multiselected = false;
 
 	// called when we've selected a different element
 	var selectedChanged = function(window,elems) {
 		// if elems[1] is present, then we have more than one element
 		selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null);
+		multiselected = (elems.length >= 2 && elems[1] != null);
 		if (selectedElement != null) {
 			// unless we're already in always set the mode of the editor to select because
 			// upon creation of a text element the editor is switched into
@@ -91,6 +93,7 @@ function svg_edit_setup() {
 	function updateContextPanel(shouldHighlightText) {
 		var elem = selectedElement;
 		$('#selected_panel').hide();
+		$('#multiselected_panel').hide();
 		$('#rect_panel').hide();
 		$('#circle_panel').hide();
 		$('#ellipse_panel').hide();
@@ -139,7 +142,10 @@ function svg_edit_setup() {
 						$('#text').select();
 					}
 					break;
-			}
+			} // switch
+		} // if (elem != null)
+		else if (multiselected) {
+			$('#multiselected_panel').show();
 		}
 
 		// update history buttons
@@ -310,8 +316,8 @@ function svg_edit_setup() {
 	// Delete is a contextual tool that only appears in the ribbon if
 	// an element has been selected
 	var deleteSelected = function() {
-		if (selectedElement != null) {
+		if (selectedElement != null || multiselected) {
-			svgCanvas.deleteSelectedElement();
+			svgCanvas.deleteSelectedElements();
 		}
 	}
 
@@ -371,6 +377,7 @@ function svg_edit_setup() {
 	$('#tool_clear').click(clickClear);
 	$('#tool_save').click(clickSave);
 	$('#tool_delete').click(deleteSelected);
+	$('#tool_delete_multi').click(deleteSelected);
 	$('#tool_move_top').click(moveToTopSelected);
 	$('#tool_move_bottom').click(moveToBottomSelected);
 	$('#tool_undo').click(clickUndo);
@@ -390,6 +397,9 @@ 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_delete_multi').mousedown(function(){$('#tool_delete_multi').addClass('tool_button_current');});
+	$('#tool_delete_multi').mouseup(function(){$('#tool_delete_multi').removeClass('tool_button_current');});
+	$('#tool_delete_multi').mouseout(function(){$('#tool_delete_multi').removeClass('tool_button_current');});
 	$('#tool_undo').mousedown(function(){ if (!$('#tool_undo').hasClass('tool_button_disabled')) $('#tool_undo').addClass('tool_button_current');});
 	$('#tool_undo').mouseup(function(){$('#tool_undo').removeClass('tool_button_current');});
 	$('#tool_undo').mouseout(function(){$('#tool_undo').removeClass('tool_button_current');});

editor/svgcanvas.js

@@ -1351,16 +1351,22 @@ function SvgCanvas(c)
 		window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
 	};
 
-	this.deleteSelectedElement = function() {
+	this.deleteSelectedElements = function() {
-		var selected = selectedElements[0];
+		for (var i = 0; i < selectedElements.length; ++i) {
-		if (selected != null) {
+			var selected = selectedElements[i];
+			if (selected == null) break;
+
 			var parent = selected.parentNode;
 			var t = selected;
-			// this will unselect the element (and remove the selectedOutline)
+			// this will unselect the element and remove the selectedOutline
-			this.removeFromSelection([t]);
+			selectorManager.releaseSelector(t);
 			var elem = parent.removeChild(t);
+			selectedElements[i] = null;
+			// TODO: batch all element deletions up into a batch command
 			addCommandToHistory(new RemoveElementCommand(elem, parent));
 		}
+		// TODO: add batch command to history
+		call("selected", selectedElements);
 	};
 
 	this.moveToTopSelectedElement = function() {