align elements (work in progress)
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@397 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Before Width: | Height: | Size: 291 B After Width: | Height: | Size: 291 B |
Before Width: | Height: | Size: 449 B After Width: | Height: | Size: 449 B |
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 305 B |
Before Width: | Height: | Size: 459 B After Width: | Height: | Size: 459 B |
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 339 B |
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 287 B |
After Width: | Height: | Size: 715 B |
|
@ -53,13 +53,15 @@
|
|||
<img class="tool_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Y]" alt="Redo"/>
|
||||
</div>
|
||||
|
||||
<!-- Buttons when something a single element is selected -->
|
||||
<!-- Buttons when a single element is selected -->
|
||||
<div id="selected_panel">
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_clone" src="images/copy.png" title="Clone Element [C]" alt="Copy"/>
|
||||
<img class="tool_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
|
||||
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
|
||||
<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<select id="group_opacity" class="selected_tool" title="Change selected item opacity">
|
||||
<option selected="selected" value="1">100 %</option>
|
||||
<option value="0.9">90 %</option>
|
||||
|
@ -76,11 +78,19 @@
|
|||
<input id="angle" class="selected_tool" title="Change rotation angle" alt="Rotation Angle" size="2" value="0" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- Buttons when something a single element is selected -->
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
<div id="multiselected_panel">
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="tool_button" id="tool_clone_multi" src="images/copy.png" title="Clone Elements [C]" alt="Clone"/>
|
||||
<img class="tool_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
|
||||
<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<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"/>
|
||||
</div>
|
||||
|
||||
<div id="rect_panel">
|
||||
|
|
|
@ -475,6 +475,25 @@ function svg_edit_setup() {
|
|||
svgCanvas.cloneSelectedElements();
|
||||
};
|
||||
|
||||
var clickAlignLeft = function(){
|
||||
svgCanvas.alignSelectedElements('l');
|
||||
};
|
||||
var clickAlignCenter = function(){
|
||||
svgCanvas.alignSelectedElements('c');
|
||||
};
|
||||
var clickAlignRight = function(){
|
||||
svgCanvas.alignSelectedElements('r');
|
||||
};
|
||||
var clickAlignTop = function(){
|
||||
svgCanvas.alignSelectedElements('t');
|
||||
};
|
||||
var clickAlignMiddle = function(){
|
||||
svgCanvas.alignSelectedElements('m');
|
||||
};
|
||||
var clickAlignBottom = function(){
|
||||
svgCanvas.alignSelectedElements('b');
|
||||
};
|
||||
|
||||
var showSourceEditor = function(){
|
||||
if (editingsource) return;
|
||||
editingsource = true;
|
||||
|
@ -533,6 +552,12 @@ function svg_edit_setup() {
|
|||
$('#tool_redo').click(clickRedo);
|
||||
$('#tool_clone').click(clickClone);
|
||||
$('#tool_clone_multi').click(clickClone);
|
||||
$('#tool_alignleft').click(clickAlignLeft);
|
||||
$('#tool_aligncenter').click(clickAlignCenter);
|
||||
$('#tool_alignright').click(clickAlignRight);
|
||||
$('#tool_aligntop').click(clickAlignTop);
|
||||
$('#tool_alignmiddle').click(clickAlignMiddle);
|
||||
$('#tool_alignbottom').click(clickAlignBottom);
|
||||
// these two lines are required to make Opera work properly with the flyout mechanism
|
||||
$('#tools_rect_show').click(clickSquare);
|
||||
$('#tools_ellipse_show').click(clickCircle);
|
||||
|
@ -565,12 +590,12 @@ function svg_edit_setup() {
|
|||
$('#tool_paste').mousedown(function(){$('#tool_paste').addClass('tool_button_current');});
|
||||
$('#tool_paste').mouseup(function(){$('#tool_paste').removeClass('tool_button_current');});
|
||||
$('#tool_paste').mouseout(function(){$('#tool_paste').removeClass('tool_button_current');});
|
||||
$('#tool_copy').mousedown(function(){$('#tool_copy').addClass('tool_button_current');});
|
||||
$('#tool_copy').mouseup(function(){$('#tool_copy').removeClass('tool_button_current');});
|
||||
$('#tool_copy').mouseout(function(){$('#tool_copy').removeClass('tool_button_current');});
|
||||
$('#tool_copy_multi').mousedown(function(){$('#tool_copy').addClass('tool_button_current');});
|
||||
$('#tool_copy_multi').mouseup(function(){$('#tool_copy').removeClass('tool_button_current');});
|
||||
$('#tool_copy_multi').mouseout(function(){$('#tool_copy').removeClass('tool_button_current');});
|
||||
$('#tool_clone').mousedown(function(){$('#tool_clone').addClass('tool_button_current');});
|
||||
$('#tool_clone').mouseup(function(){$('#tool_clone').removeClass('tool_button_current');});
|
||||
$('#tool_clone').mouseout(function(){$('#tool_clone').removeClass('tool_button_current');});
|
||||
$('#tool_clone_multi').mousedown(function(){$('#tool_clone').addClass('tool_button_current');});
|
||||
$('#tool_clone_multi').mouseup(function(){$('#tool_clone').removeClass('tool_button_current');});
|
||||
$('#tool_clone_multi').mouseout(function(){$('#tool_clone').removeClass('tool_button_current');});
|
||||
$('#tool_move_top').mousedown(function(){$('#tool_move_top').addClass('tool_button_current');});
|
||||
$('#tool_move_top').mouseup(function(){$('#tool_move_top').removeClass('tool_button_current');});
|
||||
$('#tool_move_top').mouseout(function(){$('#tool_move_top').removeClass('tool_button_current');});
|
||||
|
|