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

Added zoom spinner to interface 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@648 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2009-09-15 14:38:26 +00:00
parent c10373a5ae
commit 606e474efb
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
editor/svg-editor.css
View File

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

7
editor/svg-editor.html
View File

@ -56,6 +56,13 @@
<div class="tool_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</div>
<!-- Zoom buttons -->
<div>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<span class="zoom_tool">zoom:</span>
<input id="zoom" class="zoom_tool" title="Change zoom level" alt="Zoom %" size="3" value="100" type="text"/>
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel">

19
editor/svg-editor.js
View File

@ -286,6 +286,12 @@ function svg_edit_setup() {
var changeRotationAngle = function(ctl) {
svgCanvas.setRotationAngle(ctl.value);
}
var changeZoom = function(ctl) {
var zoomlevel = ctl.value / 100;
var res = svgCanvas.getResolution();
setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
svgCanvas.setZoom(zoomlevel);
}
$('#stroke_style').change(function(){
svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
@ -596,10 +602,11 @@ function svg_edit_setup() {
svgCanvas.alignSelectedElements('b', $('#align_relative_to option:selected').val() );
};
var clickZoom = function(zoomIn) {
var zoomImage = function(zoomIn) {
var res = svgCanvas.getResolution();
var multiplier = zoomIn? res.zoom * 2 : res.zoom * 0.5;
setResolution(res.w * multiplier, res.h * multiplier, true);
$('#zoom').val(multiplier * 100);
svgCanvas.setZoom(multiplier);
};
@ -797,8 +804,8 @@ function svg_edit_setup() {
['shift+right', function(){rotateSelected(1)}],
['shift+O', selectPrev],
['shift+P', selectNext],
['ctrl+up', function(evt){clickZoom(true);evt.preventDefault();}],
['ctrl+down', function(evt){clickZoom();evt.preventDefault();}],
['ctrl+up', function(evt){zoomImage(true);evt.preventDefault();}],
['ctrl+down', function(evt){zoomImage();evt.preventDefault();}],
['up', function(evt){moveSelected(0,-1);evt.preventDefault();}],
['down', function(evt){moveSelected(0,1);evt.preventDefault();}],
['left', function(evt){moveSelected(-1,0);evt.preventDefault();}],
@ -1013,10 +1020,14 @@ function svg_edit_setup() {
}
});
//Prevent browser from erroneously repopulating fields
$('input,select').attr("autocomplete","off");
$('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius });
$('#stroke_width').SpinButton({ min: 0, max: 99, step: 1, callback: changeStrokeWidth });
$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
$('#zoom').SpinButton({ min: 10, max: 10000, step: 50, callback: changeZoom });
svgCanvas.setCustomHandlers = function(opts) {
if(opts.open) {
$('#tool_open').show();