zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Issue 17: Add a contextual tool panel and changed the way the Delete tool works 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@87 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-06-10 04:44:59 +00:00
parent 4e27f43026
commit 540115ed3b
4 changed files with 128 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
editor/svg-editor.css
View File

@ -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;

76
editor/svg-editor.html
View File

@ -13,6 +13,7 @@
<body>
<p>SVG-edit @ <a href="http://svg-edit.googlecode.com/">http://svg-edit.googlecode.com/</a></p>
<div id="svg_editor">
<div id="color_picker" class="tools_flyout"></div>
@ -29,21 +30,53 @@
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
</div>
<div id="context_tools" class="tools_panel">
<!-- File-like buttons: New, Save -->
<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"/>
<!-- FIXME: need a separator image -->
<!-- Edit-like buttons: Delete -->
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [X]" alt="Delete"/>
<!-- FIXME: need a separator image -->
<div id="text_panel">
<select id="font_family" class="text_tool" title="Change Font Family">
<option selected="selected" value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<select id="font_size" class="text_tool" title="Change Font Size">
<option value="6pt">6pt</option>
<option value="8pt">8pt</option>
<option value="10pt">10pt</option>
<option selected="selected" value="12pt">12pt</option>
<option value="14pt">14pt</option>
<option value="16pt">16pt</option>
<option value="20pt">20pt</option>
<option value="24pt">24pt</option>
<option value="32pt">32pt</option>
<option value="48pt">48pt</option>
<option value="64pt">64pt</option>
<option value="80pt">80pt</option>
<option value="100pt">100pt</option>
</select>
<input id="text" class="text_tool" type="text" title="Change text contents" size="40"/>
</div>
</div>
<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/>
<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_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="Square/Rect Tool [4/Shift+4]" alt="Square"/><br/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Circle/Ellipse Tool [5/Shift+5]" alt="Circle"/><br/>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/><br/>
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [X]" alt="Delete"/><hr/>
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" /><br/>
<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/><br/>
</div>
<hr/>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/><hr/>
<div>fill
<div id="fill_color" title="Change fill color"></div>
@ -126,33 +159,6 @@
</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>

47
editor/svg-editor.js
View File

@ -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; }

31
editor/svgcanvas.js
View File

@ -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