diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 2722efeb..9357d80c 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -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;
}
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 3686bb8d..48b71001 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -56,6 +56,13 @@
+
+
+
+
+
zoom:
+
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index f4bf3541..52ffa176 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -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();