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

Fixed issue 287 by adding x,y fields for freehand lines, paths and groups

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@961 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Alexis Deveria
2009-11-20 17:17:55 +00:00
parent 2441b75477
commit 6d2729cf6b
3 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
editor/svg-editor.html
View File

@@ -125,6 +125,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<label id="angleLabel" class="selected_tool">angle:</label>
<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
<div id="xy_panel">
<label class="selected_tool">x:</label>
<input id="selected_x" class="selected_tool attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
<label class="selected_tool">y:</label>
<input id="selected_y" class="selected_tool attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
@@ -157,11 +164,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="rect_panel">
<div class="tool_sep"></div>
<label class="rect_tool">x:</label>
<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" size="3" data-attr="x"/>
<label class="rect_tool">y:</label>
<input id="rect_y" class="rect_tool attr_changer" title="Change rectangle Y coordinate" size="3" data-attr="y"/>
<label id="rwidthLabel" class="rect_tool">width:</label>
<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
<label id="rheightLabel" class="rect_tool">height:</label>
@@ -171,11 +173,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="image_panel">
<div class="tool_sep"></div>
<label class="image_tool">x:</label>
<input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" size="3" data-attr="x"/>
<label class="image_tool">y:</label>
<input id="image_y" class="image_tool attr_changer" title="Change image Y coordinate" size="3" data-attr="y"/>
<label id="iwidthLabel" class="image_tool">width:</label>
<input id="image_width" class="image_tool attr_changer" title="Change image width" size="3" data-attr="width"/>
<label id="iheightLabel" class="image_tool">height:</label>
@@ -187,7 +184,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="circle_panel">
<div class="tool_sep"></div>
<label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
<label class="circle_tool">cy:</label>
@@ -197,7 +193,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="ellipse_panel">
<div class="tool_sep"></div>
<label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
<label class="ellipse_tool">cy:</label>
@@ -209,7 +204,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="line_panel">
<div class="tool_sep"></div>
<label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
<label class="line_tool">y1:</label>
@@ -221,11 +215,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="text_panel">
<div class="tool_sep"></div>
<label class="text_tool">x:</label>
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" size="3" data-attr="x"/>
<label class="text_tool">y:</label>
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" size="3" data-attr="y"/>
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<select id="font_family" class="text_tool" title="Change Font Family">
@@ -241,7 +230,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="path_node_panel">
<div class="tool_sep"></div>
<label class="path_node_tool">x:</label>
<input id="path_node_x" class="path_node_tool attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
<label class="path_node_tool">y:</label>

29
editor/svg-editor.js
View File

@@ -103,6 +103,7 @@ function svg_edit_setup() {
if(type == 'prompt') {
var input = $('<input type="text">').prependTo(btn_holder);
input.val(defText || '');
input.bind('keydown', {combi:'return'}, function() {ok.click();});
}
box.show();
@@ -324,7 +325,7 @@ function svg_edit_setup() {
$('#group_opacity').val(opac_perc);
$('#opac_slider').slider('option', 'value', opac_perc);
}
updateToolButtonState();
};
@@ -345,9 +346,27 @@ function svg_edit_setup() {
#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
if (elem != null) {
$('#angle').val(svgCanvas.getRotationAngle(elem));
if(!is_node) {
$('#selected_panel').show();
// Elements in this array already have coord fields
if($.inArray(elem.nodeName, ['line', 'circle', 'ellipse']) != -1) {
$('#xy_panel').hide();
} else {
var x,y;
// Get BBox vals for g, polyline and path
if($.inArray(elem.nodeName, ['g', 'polyline', 'path']) != -1) {
var bb = svgCanvas.getStrokedBBox([elem]);
x = bb.x;
y = bb.y;
} else {
x = elem.getAttribute('x');
y = elem.getAttribute('y');
}
$('#selected_x').val(x || 0);
$('#selected_y').val(y || 0);
$('#xy_panel').show();
}
} else {
var point = svgCanvas.getNodePoint();
if(point) {
@@ -366,12 +385,12 @@ function svg_edit_setup() {
// update contextual tools here
var panels = {
g: [],
rect: ['rx','x','y','width','height'],
image: ['x','y','width','height'],
rect: ['rx','width','height'],
image: ['width','height'],
circle: ['cx','cy','r'],
ellipse: ['cx','cy','rx','ry'],
line: ['x1','y1','x2','y2'],
text: ['x','y']
text: []
};
var el_name = elem.tagName;

9
editor/svgcanvas.js
View File

@@ -5256,6 +5256,15 @@ function BatchCommand(text) {
while (i--) {
var elem = elems[i];
if (elem == null) continue;
// Set x,y vals on elements that don't have them
if((attr == 'x' || attr == 'y') && $.inArray(elem.tagName, ['g', 'polyline', 'path']) != -1) {
var bbox = canvas.getStrokedBBox([elem]);
var diff_x = attr == 'x' ? newValue - bbox.x : 0;
var diff_y = attr == 'y' ? newValue - bbox.y : 0;
canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true);
continue;
}
// only allow the transform/opacity attribute to change on <g> elements, slightly hacky
if (elem.tagName == "g" && (attr != "transform" && attr != "opacity")) continue;
var oldval = attr == "#text" ? elem.textContent : elem.getAttribute(attr);