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

Add rect radius contextual tool. Fix bug where text elements were 50% opacity by default 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@97 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-06-11 15:18:46 +00:00
parent ae3e8650c6
commit f3bce20321
4 changed files with 73 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
editor/svg-editor.css
View File

@ -94,6 +94,10 @@
display: none;
}
#svg_editor #rect_panel {
display: none;
}
#svg_editor #text_panel {
display: none;
}
@ -102,6 +106,10 @@
vertical-align:12px;
}
#svg_editor #rect_panel .rect_tool {
vertical-align:12px;
}
#svg_editor .tool_button, #svg_editor .tool_button_current {
height: 24px;
width: 24px;

19
editor/svg-editor.html
View File

@ -40,6 +40,25 @@
<!-- FIXME: need a separator image -->
<!-- TODO: also add x, y, width, height -->
<div id="rect_panel">
<label class="rect_tool" >Radius:</label>
<!-- TODO: turn this into a spinner control! -->
<select id="rect_radius" class="rect_tool" title="Change Rectangle Corner Radius" alt="Corner Radius">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
<div id="text_panel">
<select id="font_family" class="text_tool" title="Change Font Family">
<option selected="selected" value="serif">serif</option>

62
editor/svg-editor.js
View File

@ -14,7 +14,6 @@ function svg_edit_setup() {
var selectedElement = null;
var selectedChanged = function(window,elem) {
selectedElement = elem;
if (elem != null) {
// always set the mode of the editor to select because
@ -22,16 +21,6 @@ function svg_edit_setup() {
// 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");
if (fillColor == null || fillColor == "" || fillColor == "none") {
@ -81,28 +70,37 @@ function svg_edit_setup() {
if (strokeDashArray == null || strokeDashArray == "") {
strokeDashArray = "none";
}
$('#stroke_style').val(strokeDashArray);
if (elem.tagName == "text") {
$('.text_tool').removeAttr('disabled');
$('#font_family').val(elem.getAttribute("font-family"));
$('#font_size').val(elem.getAttribute("font-size"));
$('#text').val(elem.textContent);
$('#text').focus();
$('#text').select();
}
else {
$('.text_tool').attr('disabled', "disabled");
}
$('#stroke_style').val(strokeDashArray);
} // if (elem != null)
else {
// nothing is now selected
// update contextual tools here
$('#tool_delete').hide();
$('#text_panel').hide();
}
updateContextPanel();
}
function updateContextPanel() {
var elem = selectedElement;
$('#tool_delete').hide();
$('#rect_panel').hide();
$('#text_panel').hide();
if (elem != null) {
$('#tool_delete').show();
// update contextual tools here
switch(elem.tagName) {
case "rect":
$('#rect_panel').show().css("display", "inline");
break;
case "text":
// jquery's show() always sets display to block
$('#text_panel').show().css("display", "inline");
$('#font_family').val(elem.getAttribute("font-family"));
$('#font_size').val(elem.getAttribute("font-size"));
$('#text').val(elem.textContent);
$('#text').focus();
$('#text').select();
break;
}
}
}
$('#text').focus( function(){ textBeingEntered = true; } );
$('#text').blur( function(){ textBeingEntered = false; } );
@ -151,6 +149,10 @@ function svg_edit_setup() {
$('#text').keyup(function(){
svgCanvas.setTextContent(this.value);
});
$('#rect_radius').change(function(){
svgCanvas.setRectRadius(this.options[this.selectedIndex].value);
});
$('.palette_item').click(function(){
color = $(this).css('background-color');

23
editor/svgcanvas.js
View File

@ -71,6 +71,10 @@ function SvgCanvas(c)
element.removeAttribute('stroke-opacity');
if (element.getAttribute('stroke-width') == '1')
element.removeAttribute('stroke-width');
if (element.getAttribute('rx') == '0')
element.removeAttribute('rx')
if (element.getAttribute('ry') == '0')
element.removeAttribute('ry')
}
var addSvgElementFromJson = function(data) {
@ -328,21 +332,14 @@ function SvgCanvas(c)
"stroke-dasharray": current_stroke_style,
"stroke-opacity": current_stroke_opacity,
"fill-opacity": current_fill_opacity,
"opacity": current_opacity / 2,
// fix for bug where text elements were always 50% opacity
"opacity": current_opacity,
"font-size": current_font_size,
"font-family": current_font_family,
}
});
newText.textContent = "text";
break;
/*
case "delete":
var t = evt.target;
if (t == svgroot) return;
t.parentNode.removeChild(t);
call("deleted",t);
break;
*/
}
}
@ -731,6 +728,14 @@ function SvgCanvas(c)
}
}
this.setRectRadius = function(val) {
if (selected != null && selected.tagName == "rect") {
selected.setAttribute("rx", val);
selected.setAttribute("rx", val);
call("changed", selected);
}
}
$(container).mouseup(mouseUp);
$(container).mousedown(mouseDown);
$(container).mousemove(mouseMove);