From 1cc4cafc958476204fb1eef67d1a544283e561a1 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 18 Oct 2014 17:32:41 +0400 Subject: [PATCH] fixed a dependency leak in viewer.Client and did zoom actions... Signed-off-by: Alex A. Naanou --- ui (gen4)/ribbons.js | 19 +++++++++++--- ui (gen4)/ui.js | 14 ++++++++-- ui (gen4)/viewer.js | 62 ++++++++++++++++++++++++++------------------ 3 files changed, 65 insertions(+), 30 deletions(-) diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 79c49b0d..3047c1d7 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -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) diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index 66ca76cc..3bd590c7 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -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() }, + }, } diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index ba3468d9..69cd5d8e 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -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: [