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

Add circle, ellipse, line context controls 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@187 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-06-24 04:17:35 +00:00
parent 35ad2d7841
commit 96f74b4dae
4 changed files with 128 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
editor/svg-editor.css
View File

@ -102,6 +102,18 @@
display: none;
}
#svg_editor #circle_panel {
display: none;
}
#svg_editor #ellipse_panel {
display: none;
}
#svg_editor #line_panel {
display: none;
}
#svg_editor #text_panel {
display: none;
}
@ -114,6 +126,18 @@
vertical-align:12px;
}
#svg_editor #circle_panel .circle_tool {
vertical-align:12px;
}
#svg_editor #ellipse_panel .ellipse_tool {
vertical-align:12px;
}
#svg_editor #line_panel .line_tool {
vertical-align:12px;
}
#svg_editor .tool_button, #svg_editor .tool_button_current, #svg_editor .tool_button_disabled {
height: 24px;
width: 24px;

47
editor/svg-editor.html
View File

@ -43,7 +43,6 @@
<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
</div>
<!-- TODO: also add x, y, width, height -->
<div id="rect_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="rect_tool">Radius:</label>
@ -59,17 +58,49 @@
<option value="15">15</option>
<option value="20">20</option>
</select>
<label class="rect_tool">X:</label>
<input id="rect_x" class="rect_tool" title="Change rectangle X coordinate" alt="X" size="5" disabled/>
<label class="rect_tool">Y:</label>
<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="Y" size="5" disabled/>
<label class="rect_tool">W:</label>
<label class="rect_tool">x:</label>
<input id="rect_x" class="rect_tool" title="Change rectangle X coordinate" alt="x" size="5" disabled/>
<label class="rect_tool">y:</label>
<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="y" size="5" disabled/>
<label class="rect_tool">width:</label>
<input id="rect_w" class="rect_tool" title="Change rectangle width" alt="width" size="5" disabled/>
<label class="rect_tool">H:</label>
<label class="rect_tool">height:</label>
<input id="rect_h" class="rect_tool" title="Change rectangle height" alt="height" size="5" disabled/>
</div>
<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
<div id="circle_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool" title="Change circle's cx coordinate" alt="cx" size="5" disabled/>
<label class="circle_tool">cy:</label>
<input id="circle_cy" class="circle_tool" title="Change circle's cy coordinate" alt="cy" size="5" disabled/>
<label class="circle_tool">r:</label>
<input id="circle_r" class="circle_tool" title="Change circle's radius" alt="r" size="5" disabled/>
</div>
<div id="ellipse_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool" title="Change ellipse's cx coordinate" alt="cx" size="5" disabled/>
<label class="ellipse_tool">cy:</label>
<input id="ellipse_cy" class="ellipse_tool" title="Change ellipse's cy coordinate" alt="cy" size="5" disabled/>
<label class="ellipse_tool">rx:</label>
<input id="ellipse_rx" class="ellipse_tool" title="Change ellipse's x radius" alt="rx" size="5" disabled/>
<label class="ellipse_tool">ry:</label>
<input id="ellipse_ry" class="ellipse_tool" title="Change ellipse's y radius" alt="ry" size="5" disabled/>
</div>
<div id="line_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool" title="Change line's starting x coordinate" alt="x1" size="5" disabled/>
<label class="line_tool">y1:</label>
<input id="line_y1" class="line_tool" title="Change line's starting y coordinate" alt="y1" size="5" disabled/>
<label class="line_tool">x2:</label>
<input id="line_x2" class="line_tool" title="Change line's ending x coordinate" alt="x2" size="5" disabled/>
<label class="line_tool">y2:</label>
<input id="line_y2" class="line_tool" title="Change line's ending y coordinate" alt="x1" size="5" disabled/>
</div>
<div id="text_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>

25
editor/svg-editor.js
View File

@ -80,19 +80,42 @@ function svg_edit_setup() {
var elem = selectedElement;
$('#selected_panel').hide();
$('#rect_panel').hide();
$('#circle_panel').hide();
$('#ellipse_panel').hide();
$('#line_panel').hide();
$('#text_panel').hide();
if (elem != null) {
$('#selected_panel').show();
// update contextual tools here
switch(elem.tagName) {
case "rect":
$('#rect_panel').show().css("display", "inline");
$('#rect_panel').show();
$('#rect_radius').val(elem.getAttribute("rx")||0);
$('#rect_x').val(elem.getAttribute("x")||0);
$('#rect_y').val(elem.getAttribute("y")||0);
$('#rect_w').val(elem.getAttribute("width")||0);
$('#rect_h').val(elem.getAttribute("height")||0);
break;
case "circle":
$('#circle_panel').show();
$('#circle_cx').val(elem.getAttribute("cx")||0);
$('#circle_cy').val(elem.getAttribute("cy")||0);
$('#circle_r').val(elem.getAttribute("r")||0);
break;
case "ellipse":
$('#ellipse_panel').show();
$('#ellipse_cx').val(elem.getAttribute("cx")||0);
$('#ellipse_cy').val(elem.getAttribute("cy")||0);
$('#ellipse_rx').val(elem.getAttribute("rx")||0);
$('#ellipse_ry').val(elem.getAttribute("ry")||0);
break;
case "line":
$('#line_panel').show();
$('#line_x1').val(elem.getAttribute("x1")||0);
$('#line_y1').val(elem.getAttribute("y1")||0);
$('#line_x2').val(elem.getAttribute("x2")||0);
$('#line_y2').val(elem.getAttribute("y2")||0);
break;
case "text":
// jquery's show() always sets display to block
$('#text_panel').show().css("display", "inline");

43
wave/svg-edit.xml
View File

@ -47,7 +47,6 @@
<img class="tool_button" id="tool_move_bottom" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/move_bottom.png" title="Move to Bottom" alt="Bottom"/>
</div>
<!-- TODO: also add x, y, width, height -->
<div id="rect_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="rect_tool" >Radius:</label>
@ -63,9 +62,49 @@
<option value="15">15</option>
<option value="20">20</option>
</select>
<label class="rect_tool">x:</label>
<input id="rect_x" class="rect_tool" title="Change rectangle X coordinate" alt="x" size="5" disabled/>
<label class="rect_tool">y:</label>
<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="y" size="5" disabled/>
<label class="rect_tool">width:</label>
<input id="rect_w" class="rect_tool" title="Change rectangle width" alt="width" size="5" disabled/>
<label class="rect_tool">height:</label>
<input id="rect_h" class="rect_tool" title="Change rectangle height" alt="height" size="5" disabled/>
</div>
<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
<div id="circle_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool" title="Change circle's cx coordinate" alt="cx" size="5" disabled/>
<label class="circle_tool">cy:</label>
<input id="circle_cy" class="circle_tool" title="Change circle's cy coordinate" alt="cy" size="5" disabled/>
<label class="circle_tool">r:</label>
<input id="circle_r" class="circle_tool" title="Change circle's radius" alt="r" size="5" disabled/>
</div>
<div id="ellipse_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool" title="Change ellipse's cx coordinate" alt="cx" size="5" disabled/>
<label class="ellipse_tool">cy:</label>
<input id="ellipse_cy" class="ellipse_tool" title="Change ellipse's cy coordinate" alt="cy" size="5" disabled/>
<label class="ellipse_tool">rx:</label>
<input id="ellipse_rx" class="ellipse_tool" title="Change ellipse's x radius" alt="rx" size="5" disabled/>
<label class="ellipse_tool">ry:</label>
<input id="ellipse_ry" class="ellipse_tool" title="Change ellipse's y radius" alt="ry" size="5" disabled/>
</div>
<div id="line_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool" title="Change line's starting x coordinate" alt="x1" size="5" disabled/>
<label class="line_tool">y1:</label>
<input id="line_y1" class="line_tool" title="Change line's starting y coordinate" alt="y1" size="5" disabled/>
<label class="line_tool">x2:</label>
<input id="line_x2" class="line_tool" title="Change line's ending x coordinate" alt="x2" size="5" disabled/>
<label class="line_tool">y2:</label>
<input id="line_y2" class="line_tool" title="Change line's ending y coordinate" alt="x1" size="5" disabled/>
</div>
<div id="text_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>