create 4 modes for align: selected, largest, smallest, page

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@462 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Pavol Rusnak 2009-08-25 07:04:19 +00:00
parent 1366396082
commit 9f704dee5c
4 changed files with 62 additions and 18 deletions

View File

@ -141,6 +141,10 @@ div.color_block {
vertical-align: 12px;
}
#svg_editor #multiselected_panel .selected_tool {
vertical-align: 12px;
}
#svg_editor #text_panel .text_tool {
vertical-align: 12px;
}

View File

@ -88,10 +88,16 @@
<img class="tool_button" id="tool_alignleft" src="images/align-left.png" title="Align Left" alt="Left"/>
<img class="tool_button" id="tool_aligncenter" src="images/align-center.png" title="Align Center" alt="Center"/>
<img class="tool_button" id="tool_alignright" src="images/align-right.png" title="Align Right" alt="Right"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="tool_button" id="tool_aligntop" src="images/align-top.png" title="Align Top" alt="Top"/>
<img class="tool_button" id="tool_alignmiddle" src="images/align-middle.png" title="Align Middle" alt="Middle"/>
<img class="tool_button" id="tool_alignbottom" src="images/align-bottom.png" title="Align Bottom" alt="Bottom"/>
<span class="selected_tool">relative to:</span>
<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
<option value="selected">selected objects</option>
<option value="largest">largest object</option>
<option value="smallest">smallest object</option>
<option value="page">page</option>
</select>
</div>
<div id="rect_panel">

View File

@ -543,26 +543,26 @@ function svg_edit_setup() {
var clickClone = function(){
svgCanvas.cloneSelectedElements();
};
var clickAlignLeft = function(){
svgCanvas.alignSelectedElements('l');
svgCanvas.alignSelectedElements('l', $('#align_relative_to option:selected').val() );
};
var clickAlignCenter = function(){
svgCanvas.alignSelectedElements('c');
svgCanvas.alignSelectedElements('c', $('#align_relative_to option:selected').val() );
};
var clickAlignRight = function(){
svgCanvas.alignSelectedElements('r');
svgCanvas.alignSelectedElements('r', $('#align_relative_to option:selected').val() );
};
var clickAlignTop = function(){
svgCanvas.alignSelectedElements('t');
svgCanvas.alignSelectedElements('t', $('#align_relative_to option:selected').val() );
};
var clickAlignMiddle = function(){
svgCanvas.alignSelectedElements('m');
svgCanvas.alignSelectedElements('m', $('#align_relative_to option:selected').val() );
};
var clickAlignBottom = function(){
svgCanvas.alignSelectedElements('b');
svgCanvas.alignSelectedElements('b', $('#align_relative_to option:selected').val() );
};
var showSourceEditor = function(){
if (editingsource) return;
editingsource = true;

View File

@ -2681,16 +2681,17 @@ function SvgCanvas(c)
};
// aligns selected elements (type is a char - see switch below for explanation)
this.alignSelectedElements = function(type) {
// relative_to can be "selected", "largest", "smallest", "page"
this.alignSelectedElements = function(type, relative_to) {
var bboxes = [], angles = [];
var minx = Number.MAX_VALUE, maxx = Number.MIN_VALUE, miny = Number.MAX_VALUE, maxy = Number.MIN_VALUE;
var curwidth = Number.MIN_VALUE, curheight = Number.MIN_VALUE;
var len = selectedElements.length;
if (!len) return;
for (var i = 0; i < len; ++i) {
if (selectedElements[i] == null) break;
var elem = selectedElements[i];
bboxes[i] = this.getBBox(elem);
// TODO: could make the following code block as part of getBBox() and add a parameter
// to that function
// if element is rotated, get angle and rotate the 4 corners of the bbox and get
@ -2703,11 +2704,11 @@ function SvgCanvas(c)
cy = bboxes[i].y + bboxes[i].height/2;
var pts = [ [bboxes[i].x - cx, bboxes[i].y - cy],
[bboxes[i].x + bboxes[i].width - cx, bboxes[i].y - cy],
[bboxes[i].x + bboxes[i].width - cx, bboxes[i].y + bboxes[i].height - cy],
[bboxes[i].x + bboxes[i].width - cx, bboxes[i].y + bboxes[i].height - cy],
[bboxes[i].x - cx, bboxes[i].y + bboxes[i].height - cy] ];
var j = 4;
while (j--) {
var x = pts[j][0],
var x = pts[j][0],
y = pts[j][1],
r = Math.sqrt( x*x + y*y );
var theta = Math.atan2(y,x) + angles[i];
@ -2728,12 +2729,45 @@ function SvgCanvas(c)
}
// now bbox is axis-aligned and handles rotation
if (bboxes[i].x < minx) minx = bboxes[i].x;
if (bboxes[i].y < miny) miny = bboxes[i].y;
if (bboxes[i].x+bboxes[i].width > maxx) maxx = bboxes[i].x+bboxes[i].width;
if (bboxes[i].y+bboxes[i].height > maxy) maxy = bboxes[i].y+bboxes[i].height;
switch (relative_to) {
case 'smallest':
if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth > bboxes[i].width) ||
(type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight > bboxes[i].height) ) {
minx = bboxes[i].x;
miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width;
curheight = bboxes[i].height;
}
break;
case 'largest':
if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth < bboxes[i].width) ||
(type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight < bboxes[i].height) ) {
minx = bboxes[i].x;
miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width;
curheight = bboxes[i].height;
}
break;
default: // 'selected'
if (bboxes[i].x < minx) minx = bboxes[i].x;
if (bboxes[i].y < miny) miny = bboxes[i].y;
if (bboxes[i].x + bboxes[i].width > maxx) maxx = bboxes[i].x + bboxes[i].width;
if (bboxes[i].y + bboxes[i].height > maxy) maxy = bboxes[i].y + bboxes[i].height;
break;
}
} // loop for each element to find the bbox and adjust min/max
if (relative_to == 'page') {
minx = 0;
miny = 0;
maxx = svgroot.getAttribute('width');
maxy = svgroot.getAttribute('height');
}
var dx = new Array(len);
var dy = new Array(len);
for (var i = 0; i < len; ++i) {