diff --git a/editor/svg-editor.css b/editor/svg-editor.css index c651edd9..25927e55 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -22,13 +22,11 @@ width: 640px; height: 480px; border: 1px solid #808080; - border-left: none; } #svg_editor div#palette_holder { border: 1px solid #808080; border-top: none; - border-left: none; float: left; width: 640px; overflow-x: scroll; @@ -75,10 +73,25 @@ clear:both; } +#context_tools { + width: 800px; + height: 34px; +} + +#tool_delete { + display: none; +} + +#text_panel { + display: none; +} +#text_panel .text_tool { + vertical-align:12px; +} + .tool_button, .tool_button_current { height: 24px; width: 24px; - border: 1px solid red; margin: 2px; padding: 2px; border-left: 1px solid #FFFFFF; diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 5154b756..06562b4c 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -13,6 +13,7 @@

SVG-edit @ http://svg-edit.googlecode.com/

+
@@ -29,21 +30,53 @@
+
+ + Clear + Save + + + + + Delete + + + +
+ + + +
+
+
-
Select
Pencil
Line
Square
Circle
-Text
-Delete
-Clear
-Save
-
- -
+Text
fill
@@ -126,33 +159,6 @@
-
-
text - - - -
-
- diff --git a/editor/svg-editor.js b/editor/svg-editor.js index f77a19e6..ebbcc474 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -11,12 +11,26 @@ function svg_edit_setup() { } var textBeingEntered = false; - + var selectedElement = null; var selectedChanged = function(window,elem) { + selectedElement = elem; + if (elem != null) { - // set the mode of the editor to select + // 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 contextual tools here + $('#tool_delete').show(); + if (elem.tagName == "text") { + // jquery's show() always sets display to block + $('#text_panel').show().css("display", "inline"); + } + else { + $('#text_panel').hide(); + } // update fill color var fillColor = elem.getAttribute("fill"); @@ -80,6 +94,12 @@ function svg_edit_setup() { else { $('.text_tool').attr('disabled', "disabled"); } + } // if (elem != null) + else { + // nothing is now selected + // update contextual tools here + $('#tool_delete').hide(); + $('#text_panel').hide(); } } @@ -214,9 +234,12 @@ function svg_edit_setup() { svgCanvas.setMode('fhellipse'); } - var clickDelete = function(){ - toolButtonClick('#tool_delete'); - svgCanvas.setMode('delete'); + // Delete is a contextual tool that only appears in the ribbon if + // an element has been selected + var deleteSelected = function() { + if (selectedElement != null) { + svgCanvas.deleteSelectedElement(); + } } var clickText = function(){ @@ -244,9 +267,21 @@ function svg_edit_setup() { $('#tool_ellipse').click(clickEllipse); $('#tool_fhellipse').click(clickFHEllipse); $('#tool_text').click(clickText); - $('#tool_delete').click(clickDelete); $('#tool_clear').click(clickClear); $('#tool_save').click(clickSave); + $('#tool_delete').click(deleteSelected); + + // added these event handlers for all the push buttons so they + // behave more like buttons being pressed-in and not images + $('#tool_clear').mousedown(function(){$('#tool_clear').addClass('tool_button_current');}); + $('#tool_clear').mouseup(function(){$('#tool_clear').removeClass('tool_button_current');}); + $('#tool_clear').mouseout(function(){$('#tool_clear').removeClass('tool_button_current');}); + $('#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_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');}); $('#workarea').keyup(function(event){ if( textBeingEntered ) { return; } diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 429f0a09..31b00c68 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -145,6 +145,20 @@ function SvgCanvas(c) } }); // TODO: add SMIL animate child on stroke-dashoffset here + // This only works in Opera, but it appears to cause some + // problem when more than one selected element is in the canvas? + /* + selectedOutline.appendChild( addSvgElementFromJson({ + "element": "animate", + "attr": { + "attributeName": "stroke-dashoffset", + "repeatCount": "indefinite", + "dur": "500ms", + "from": "0", + "to": "10", + } + }) ); + */ } // recalculate size and then re-append to bottom of document recalculateSelectedOutline(); @@ -321,12 +335,14 @@ function SvgCanvas(c) }); newText.textContent = "text"; break; +/* case "delete": var t = evt.target; if (t == svgroot) return; t.parentNode.removeChild(t); call("deleted",t); break; +*/ } } @@ -714,7 +730,7 @@ function SvgCanvas(c) call("changed", selected); } } - + $(container).mouseup(mouseUp); $(container).mousedown(mouseDown); $(container).mousemove(mouseMove); @@ -728,6 +744,19 @@ function SvgCanvas(c) selectElement(null); } + this.deleteSelectedElement = function() { + if (selected != null) { + var t = selected; + // this will unselect the element (and remove the selectedOutline) + selectElement(null); + t.parentNode.removeChild(t); + call("deleted",t); + } + else { + alert("Error! Nothing selected!"); + } + } + } // Static class for various utility functions