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; vertical-align: 12px;
} }
#svg_editor .zoom_tool {
vertical-align: 12px;
}
#svg_editor #text_panel .text_tool { #svg_editor #text_panel .text_tool {
vertical-align: 12px; vertical-align: 12px;
} }

7
editor/svg-editor.html
View File

@ -57,6 +57,13 @@
<div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div> <div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</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 --> <!-- Buttons when a single element is selected -->
<div id="selected_panel"> <div id="selected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <img class="tool_sep" src="images/sep.png" alt="|"/>

17
editor/svg-editor.js
View File

@ -286,6 +286,12 @@ function svg_edit_setup() {
var changeRotationAngle = function(ctl) { var changeRotationAngle = function(ctl) {
svgCanvas.setRotationAngle(ctl.value); 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(){ $('#stroke_style').change(function(){
svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value); svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
@ -596,10 +602,11 @@ function svg_edit_setup() {
svgCanvas.alignSelectedElements('b', $('#align_relative_to option:selected').val() ); svgCanvas.alignSelectedElements('b', $('#align_relative_to option:selected').val() );
}; };
var clickZoom = function(zoomIn) { var zoomImage = function(zoomIn) {
var res = svgCanvas.getResolution(); var res = svgCanvas.getResolution();
var multiplier = zoomIn? res.zoom * 2 : res.zoom * 0.5; var multiplier = zoomIn? res.zoom * 2 : res.zoom * 0.5;
setResolution(res.w * multiplier, res.h * multiplier, true); setResolution(res.w * multiplier, res.h * multiplier, true);
$('#zoom').val(multiplier * 100);
svgCanvas.setZoom(multiplier); svgCanvas.setZoom(multiplier);
}; };
@ -797,8 +804,8 @@ function svg_edit_setup() {
['shift+right', function(){rotateSelected(1)}], ['shift+right', function(){rotateSelected(1)}],
['shift+O', selectPrev], ['shift+O', selectPrev],
['shift+P', selectNext], ['shift+P', selectNext],
['ctrl+up', function(evt){clickZoom(true);evt.preventDefault();}], ['ctrl+up', function(evt){zoomImage(true);evt.preventDefault();}],
['ctrl+down', function(evt){clickZoom();evt.preventDefault();}], ['ctrl+down', function(evt){zoomImage();evt.preventDefault();}],
['up', function(evt){moveSelected(0,-1);evt.preventDefault();}], ['up', function(evt){moveSelected(0,-1);evt.preventDefault();}],
['down', function(evt){moveSelected(0,1);evt.preventDefault();}], ['down', function(evt){moveSelected(0,1);evt.preventDefault();}],
['left', function(evt){moveSelected(-1,0);evt.preventDefault();}], ['left', function(evt){moveSelected(-1,0);evt.preventDefault();}],
@ -1013,9 +1020,13 @@ 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 }); $('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius });
$('#stroke_width').SpinButton({ min: 0, max: 99, step: 1, callback: changeStrokeWidth }); $('#stroke_width').SpinButton({ min: 0, max: 99, step: 1, callback: changeStrokeWidth });
$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle }); $('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
$('#zoom').SpinButton({ min: 10, max: 10000, step: 50, callback: changeZoom });
svgCanvas.setCustomHandlers = function(opts) { svgCanvas.setCustomHandlers = function(opts) {
if(opts.open) { if(opts.open) {