fixed a dependency leak in viewer.Client and did zoom actions...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-10-18 17:32:41 +04:00
parent d1db72b938
commit 1cc4cafc95
3 changed files with 65 additions and 30 deletions

View File

@ -211,10 +211,10 @@ module.RibbonsPrototype = {
// gets the visible size of the image tile in pixels.
//
// XXX try and make image size the product of vmin and scale...
getVisibleImageSize: function(dim){
getVisibleImageSize: function(dim, scale){
scale = scale || this.getScale()
dim = dim == null ? 'width' : dim
var img = this.viewer.find('.image')
var scale = this.getScale()
if(dim == 'height'){
return img.outerHeight(true) * scale
} else if(dim == 'width'){
@ -230,7 +230,7 @@ module.RibbonsPrototype = {
var scale = scale == null ? 1 : scale/this.getScale()
var W = this.viewer.width()
var w = this.getVisibleImageSize('width')*scale
var w = this.getVisibleImageSize('width') * scale
return W/w
},
@ -1408,12 +1408,25 @@ module.RibbonsPrototype = {
//
// If n is given this will fit n images (default: 1)
//
// NOTE: this will never scale the view in a wat that an image
// overflows either in height nor width.
//
// XXX might be usefull to set origin before scaling...
fitImage: function(n){
n = n == null ? 1 : n
// NOTE: this is width oriented...
var scale = this.getScreenWidthImages(1) / n
// check bounds...
var H = this.viewer.height()
var h = this.getVisibleImageSize('height', 1)
// n images will be higher than the viewer, adjust for height...
if(h*scale >= H){
scale = H/h
}
this
.setScale(scale)
//.centerRibbon(null, null, scale)

View File

@ -138,8 +138,14 @@ module.GLOBAL_KEYBOARD = {
shift: function(){ a.shiftImageDown() },
'ctrl+shift': function(){ a.shiftImageDownNewRibbon() },
},
'#0': function(){ a.fitImage(20) },
'#1': function(){ a.fitOrig() },
'#0': function(){ a.fitMax() },
'#1': {
default: function(){ a.fitImage() },
ctrl: function(){
event.preventDefault()
a.fitOrig()
},
},
'#2': function(){ a.fitTwo() },
'#3': function(){ a.fitThree() },
'#4': function(){ a.fitFour() },
@ -149,6 +155,10 @@ module.GLOBAL_KEYBOARD = {
'#8': function(){ a.fitEight() },
'#9': function(){ a.fitNine() },
'+': function(){ a.zoomIn() },
'=': '+',
'-': function(){ a.zoomOut() },
},
}

View File

@ -32,6 +32,8 @@ actions.Actions({
// XXX should this be here???
config: {
'steps-to-change-direction': 3,
'max-screen-images': 30,
'zoom-step': 1.2,
},
@ -190,14 +192,12 @@ actions.Actions({
// NOTE: for all of these, current/ribbon image is a default...
//
// XXX move this out to a mixin...
shiftImageUp: ['Shift image up',
'If implicitly shifting current image (i.e. no arguments), focus '
+'will shift to the next or previous image in the current '
+'ribbon depending on current direction.',
function(target){
// stop transitions...
this.ribbons.preventTransitions()
// by default we need to update the current position...
if(target == null){
var direction = this.direction == 'right' ? 'next' : 'prev'
@ -215,20 +215,12 @@ actions.Actions({
} else {
this.data.shiftImageUp(target)
}
// restore transitions...
return function(){
this.ribbons.restoreTransitions()
}
}],
shiftImageDown: ['Shift image down',
'If implicitly shifting current image (i.e. no arguments), focus '
+'will shift to the next or previous image in the current '
+'ribbon depending on current direction.',
function(target){
// stop transitions...
this.ribbons.preventTransitions()
// by default we need to update the current position...
if(target == null){
var direction = this.direction == 'right' ? 'next' : 'prev'
@ -246,11 +238,6 @@ actions.Actions({
} else {
this.data.shiftImageDown(target)
}
// restore transitions...
return function(){
this.ribbons.restoreTransitions()
}
}],
shiftImageUpNewRibbon: ['Shift image up to a new empty ribbon',
function(target){
@ -442,11 +429,32 @@ actions.Actions(Client, {
}],
// zooming...
// XXX
//
// Zooming is done by multiplying the current scale by config['zoom-step']
// and rounding to nearest discrete number of images to fit on screen.
zoomIn: ['Zoom in',
function(){ }],
function(){
this.ribbons.setOrigin()
//var n = Math.round(this.ribbons.getScreenWidthImages())-1
var d = this.config['zoom-step']
var s = a.ribbons.getScale() * d
var n = Math.floor(this.ribbons.getScreenWidthImages(s))
this.fitImage(n <= 0 ? 1 : n)
}],
zoomOut: ['Zoom out',
function(){ }],
function(){
this.ribbons.setOrigin()
//var n = Math.round(this.ribbons.getScreenWidthImages())+1
var d = this.config['zoom-step']
var s = a.ribbons.getScale() / d
var n = Math.ceil(this.ribbons.getScreenWidthImages(s))
var max = this.config['max-screen-images']
this.fitImage(n > max ? max : n)
}],
fitOrig: ['Fit to original scale',
function(){
@ -461,7 +469,6 @@ actions.Actions(Client, {
// NOTE: if this gets a count argument it will fit count images,
// default is one.
// XXX animation broken for this...
fitImage: ['Fit image',
function(count){
//this.ribbons.preventTransitions()
@ -473,7 +480,6 @@ actions.Actions(Client, {
//this.ribbons.restoreTransitions()
}],
// XXX should these be relative to screen rather than actual image counts?
fitTwo: ['Fit two images', function(){ this.fitImage(2) }],
fitThree: ['Fit three images', function(){ this.fitImage(3) }],
fitFour: ['Fit four images', function(){ this.fitImage(4) }],
@ -486,9 +492,8 @@ actions.Actions(Client, {
fitEleven: ['Fit eleven images', function(){ this.fitImage(11) }],
fitTwelve: ['Fit twelve images', function(){ this.fitImage(12) }],
// XXX
fitMax: ['Fit the maximum number of images',
function(){ }],
function(){ this.fitImage(this.config['max-screen-images']) }],
// XXX
fitSmall: ['Show small image',
@ -504,15 +509,19 @@ actions.Actions(Client, {
// XXX these are cheating...
shiftImageUp: [
function(target){
this.ribbons.preventTransitions()
return function(){
// XXX this is cheating...
this.ribbons.restoreTransitions()
this.reload()
}
}],
shiftImageDown: [
function(target){
this.ribbons.preventTransitions()
return function(){
// XXX this is cheating...
this.ribbons.restoreTransitions()
this.reload()
}
}],
@ -566,6 +575,9 @@ actions.Actions(Client, {
// basic image editing...
//
// XXX should these call .images.* or should it be done by data...
// ...I think that data is a better candidate as it should be
// standalone...
rotateCW: [
function(target){ this.ribbons.rotateCW(target) }],
rotateCCW: [