fixed scaleing in different modes (hopefully)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-05-01 06:13:50 +03:00
parent e6c437f0ea
commit 746139a49a
4 changed files with 74 additions and 23 deletions

View File

@ -72,10 +72,8 @@ module.GLOBAL_KEYBOARD = {
], ],
'#1': 'fitScreen', '#1': 'fitScreen',
// XXX use a means to scale that does not get affected by image '#2': 'fitNormal',
// proportions... '#3': 'fitSmall',
//'#2': 'fitNormal',
//'#3': 'fitSmall',
Esc: 'toggleSingleImage: "off" -- Exit single image view', Esc: 'toggleSingleImage: "off" -- Exit single image view',

View File

@ -22,6 +22,7 @@ var browse = require('lib/widget/browse')
/*********************************************************************/ /*********************************************************************/
// XXX add sorting on load....
var SortActions = var SortActions =
module.SortActions = actions.Actions({ module.SortActions = actions.Actions({
config: { config: {
@ -392,6 +393,9 @@ module.Sort = core.ImageGridFeatures.Feature({
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// XXX add ability to partition ribbons in different modes...
// - by hour/day/month/year in date modes...
// - ???
var SortUIActions = actions.Actions({ var SortUIActions = actions.Actions({
// XXX should we be able to edit modes??? // XXX should we be able to edit modes???
sortDialog: ['Edit|Sort/Sort images...', sortDialog: ['Edit|Sort/Sort images...',

View File

@ -95,7 +95,8 @@ function updateImageProportions(){
// outer diameter -- (m)ax // outer diameter -- (m)ax
var dm = Math.max(h, w) var dm = Math.max(h, w)
var c = Math.min(this.screenwidth, this.screenheight) //var c = Math.min(this.screenwidth, this.screenheight)
var c = this.screenfit
// change proportions... // change proportions...
if(c < threshold){ if(c < threshold){
@ -196,10 +197,25 @@ function updateImageProportions(){
var SingleImageActions = actions.Actions({ var SingleImageActions = actions.Actions({
config: { config: {
// View scale...
//
// NOTE: these will get overwritten if/when the user changes the scale... // NOTE: these will get overwritten if/when the user changes the scale...
'single-image-scale': null, 'single-image-scale': null,
'ribbon-scale': null, 'ribbon-scale': null,
// Set scale 'units' for different viewes...
//
// NOTE: the units are actually properties used to get/set the values.
'single-image-scale-unit': 'screenwidth',
'ribbon-scale-unit': 'screenfit',
// The threshold from which the image block starts to tend to
// screen proportions...
// - Above this the block is square.
// - At 1 the block is the same proportions as the screen.
// - between this and 1 the block is proportionally between a
// square and screen proportions.
//
// NOTE: setting this to null or to -1 will disable the feature... // NOTE: setting this to null or to -1 will disable the feature...
'single-image-proportions-threshold': 2, 'single-image-proportions-threshold': 2,
@ -271,10 +287,12 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
if(this.toggleSingleImage('?') == 'on'){ if(this.toggleSingleImage('?') == 'on'){
updateImageProportions.call(this) updateImageProportions.call(this)
this.config['single-image-scale'] = this.scale this.config['single-image-scale'] =
this[this.config['single-image-scale-unit']]
} else { } else {
this.config['ribbon-scale'] = this.scale this.config['ribbon-scale'] =
this[this.config['ribbon-scale-unit']]
} }
}], }],
// update new images... // update new images...
@ -298,15 +316,17 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
// singe image mode -- set image proportions... // singe image mode -- set image proportions...
if(state == 'on'){ if(state == 'on'){
updateImageProportions.call(this)
// update scale... // update scale...
if(state != pre_state){ if(state != pre_state){
var s = this.scale this.config['ribbon-scale'] =
this.config['ribbon-scale'] = s this[this.config['ribbon-scale-unit']]
this.scale = this.config['single-image-scale'] || s this[this.config['single-image-scale-unit']] =
this.config['single-image-scale']
|| this[this.config['single-image-scale-unit']]
} }
updateImageProportions.call(this)
// ribbon mode -- restore original image size... // ribbon mode -- restore original image size...
} else { } else {
// reset image container size... // reset image container size...
@ -323,9 +343,11 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
// update scale... // update scale...
if(state != pre_state){ if(state != pre_state){
var s = this.scale this.config['single-image-scale'] =
this.config['single-image-scale'] = s this[this.config['single-image-scale-unit']]
this.scale = this.config['ribbon-scale'] || s this[this.config['ribbon-scale-unit']] =
this.config['ribbon-scale']
|| this[this.config['ribbon-scale-unit']]
} }
} }
} }
@ -353,8 +375,10 @@ module.SingleImageViewLocalStorage = core.ImageGridFeatures.Feature({
// we need to save these for when it is, thus avoiding // we need to save these for when it is, thus avoiding
// stray actions overwriting the config with defaults // stray actions overwriting the config with defaults
// when not finding a value in the viewer... // when not finding a value in the viewer...
var rscale = this.config['ribbon-scale'] || this.scale var rscale = this.config['ribbon-scale']
var iscale = this.config['single-image-scale'] || this.scale || this[this.config['ribbon-scale-unit']]
var iscale = this.config['single-image-scale']
|| this[this.config['single-image-scale-unit']]
return function(){ return function(){
// prevent this from doing anything while no viewer... // prevent this from doing anything while no viewer...

View File

@ -206,9 +206,34 @@ module.ViewerActions = actions.Actions({
return this.ribbons != null ? this.ribbons.getScreenHeightRibbons() : null return this.ribbons != null ? this.ribbons.getScreenHeightRibbons() : null
}, },
set screenheight(n){ set screenheight(n){
this.fitRibbon(n) this.fitRibbon(n, false)
}, },
// this is the size in image radii on the narrow side of the screen...
get screenfit(){
if(!this.ribbons || !this.ribbons.viewer){
return null
}
var viewer = this.ribbons.viewer
var W = viewer.width()
var H = viewer.height()
return W < H ?
this.screenwidth
: this.screenheight
},
set screenfit(n){
var viewer = this.ribbons.viewer
var W = viewer.width()
var H = viewer.height()
if(W < H){
this.screenwidth = n
} else {
this.screenheight = n
}
},
load: [ load: [
function(data){ function(data){
@ -614,17 +639,17 @@ module.ViewerActions = actions.Actions({
// XXX make this viewer/image proportion independent.... // XXX make this viewer/image proportion independent....
fitSmall: ['Zoom/Show small image', fitSmall: ['Zoom/Show small image',
function(){ this.fitImage(5, 0) }], function(){ this.screenfit = 4 }],
// XXX make this viewer/image proportion independent.... // XXX make this viewer/image proportion independent....
fitNormal: ['Zoom/Show normal image', fitNormal: ['Zoom/Show normal image',
function(){ this.fitImage(1.5, 0) }], function(){ this.screenfit = 1.2 }],
fitScreen: ['Zoom/Fit image to screen', fitScreen: ['Zoom/Fit image to screen',
function(){ this.fitImage(1, 0) }], function(){ this.screenfit = 1 }],
fitRibbon: ['Zoom/Fit ribbon vertically', fitRibbon: ['Zoom/Fit ribbon vertically',
function(count){ function(count, whole){
this.ribbons.fitRibbon(count) this.ribbons.fitRibbon(count, whole)
this.refresh() this.refresh()
}], }],