Fix Issue 401: shift-click a spinner for a small step

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1199 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2010-01-12 16:20:09 +00:00
parent f51f2ea13f
commit a2557bbc98
3 changed files with 13 additions and 5 deletions

View File

@ -39,6 +39,8 @@
* v1.6 13 Oct 2009 - Alexis Deveria - Added stepfunc function * v1.6 13 Oct 2009 - Alexis Deveria - Added stepfunc function
* v1.7 21 Oct 2009 - Alexis Deveria - Minor fixes * v1.7 21 Oct 2009 - Alexis Deveria - Minor fixes
* Fast-repeat for keys and live updating as you type. * Fast-repeat for keys and live updating as you type.
* v1.8 12 Jan 2010 - Benjamin Thomas - Fixes for mouseout behavior.
* Added smallStep
Sample usage: Sample usage:
@ -47,6 +49,7 @@
min: 0, // Set lower limit. min: 0, // Set lower limit.
max: 100, // Set upper limit. max: 100, // Set upper limit.
step: 1, // Set increment size. step: 1, // Set increment size.
smallStep: 0.5, // Set shift-click increment size.
spinClass: mySpinBtnClass, // CSS class to style the spinbutton. (Class also specifies url of the up/down button image.) spinClass: mySpinBtnClass, // CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
upClass: mySpinUpClass, // CSS class for style when mouse over up button. upClass: mySpinUpClass, // CSS class for style when mouse over up button.
downClass: mySpinDnClass // CSS class for style when mouse over down button. downClass: mySpinDnClass // CSS class for style when mouse over down button.
@ -86,7 +89,9 @@ $.fn.SpinButton = function(cfg){
_repeat: null, _repeat: null,
callback: cfg && cfg.callback ? cfg.callback : null callback: cfg && cfg.callback ? cfg.callback : null
}; };
// if a smallStep isn't supplied, use half the regular step
this.spinCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.spinCfg.step/2;
this.adjustValue = function(i){ this.adjustValue = function(i){
var v; var v;
@ -95,7 +100,8 @@ $.fn.SpinButton = function(cfg){
} else if($.isFunction(this.spinCfg.stepfunc)) { } else if($.isFunction(this.spinCfg.stepfunc)) {
v = this.spinCfg.stepfunc(this, i); v = this.spinCfg.stepfunc(this, i);
} else { } else {
v = Number(this.value) + Number(i); // weirdest javascript bug ever: 5.1 + 0.1 = 5.199999999
v = Number((Number(this.value) + Number(i)).toFixed(5));
} }
if (this.spinCfg.min !== null) v = Math.max(v, this.spinCfg.min); if (this.spinCfg.min !== null) v = Math.max(v, this.spinCfg.min);
if (this.spinCfg.max !== null) v = Math.min(v, this.spinCfg.max); if (this.spinCfg.max !== null) v = Math.min(v, this.spinCfg.max);
@ -146,8 +152,10 @@ $.fn.SpinButton = function(cfg){
if ( e.button === 0 && this.spinCfg._direction != 0) { if ( e.button === 0 && this.spinCfg._direction != 0) {
// Respond to click on one of the buttons: // Respond to click on one of the buttons:
var self = this; var self = this;
var stepSize = e.shiftKey ? self.spinCfg.smallStep : self.spinCfg.step
var adjust = function() { var adjust = function() {
self.adjustValue(self.spinCfg._direction * self.spinCfg.step); self.adjustValue(self.spinCfg._direction * stepSize);
}; };
adjust(); adjust();

View File

@ -338,7 +338,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td> <td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td><div id="stroke_opacity" class="label">100 %</div></td> <td><div id="stroke_opacity" class="label">100 %</div></td>
<td> <td>
<input id="stroke_width" title="Change stroke width" size="2" value="5" type="text" data-attr="Stroke Width"/> <input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
</td> </td>
<td> <td>
<select id="stroke_style" title="Change stroke dash style"> <select id="stroke_style" title="Change stroke dash style">

View File

@ -2172,7 +2172,7 @@ function svg_edit_setup() {
Actions.setAll(); Actions.setAll();
$('#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, smallStep: 0.1, callback: changeStrokeWidth });
$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle }); $('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
$('#font_size').SpinButton({ step: 1, min: 0.001, stepfunc: stepFontSize, callback: changeFontSize }); $('#font_size').SpinButton({ step: 1, min: 0.001, stepfunc: stepFontSize, callback: changeFontSize });
$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity }); $('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });