flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 19:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

started working on changing image block proportions when zooming...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-04-24 03:21:41 +03:00
parent b32dc97c6a
commit 47ed9e35d1
2 changed files with 83 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
ui (gen4)/features/ui-single-image.js
View File

@ -85,57 +85,92 @@ var core = require('features/core')
//
//
// XXX should this be an action???
// XXX problems:
// Q: what do we use for scale??
// XXX .ribbons.correctImageProportionsForRotation(..) might be working
// incorrectly...
// ...when scaling a horizontal image, the thing starts jumping around....
function updateImageProportions(){
var that = this
// XXX get this from config...
var threshold = this.config['single-image-proportions-threshold'] || 2
var viewer = this.ribbons.viewer
var image = viewer.find('.image')
// XXX
return
var img = this.ribbons.getImage()
var w = img.outerWidth()
var h = img.outerHeight()
var c = Math.min(this.screenwidth, this.screenheight)
// change proportions...
if(c < threshold){
var W = viewer.width()
var H = viewer.height()
var w = image.width()
var h = image.height()
var R = W/H
var r = w/h
// get dimensional scale....
var s = Math.min(W, H) / Math.min(w, h)
var threshold = 3
var scale = Math.min(this.screenwidth, this.screenheight)
// XXX proportion s between s and 1 depending on c position
// between threshold and 1
// s: const - changes with viewer size
// c: threshold -> 1
//
// factor:
// f: 1/s -> 1
//
//var f =
//s *= f
// XXX the idea is that:
// - up until a specific threshold:
// r is 1
// we do not care about R
// XXX how do we define the threshold???
// - above that threshold:
// r tends to R relative to ???
// - when W == w && H == h
// r == R
// - beyond
// r tends to actual image proportions
// - when (W == w || H == h) && r == actual image proportions
// we change nothing...
// get new dimension in image scale...
var n = Math.max(W, H) / s
// reset image proportions to square...
if(scale > threshold){
image.css({
if(n == Math.max(w, h)){
return
}
getAnimationFrame(function(){
that.ribbons.preventTransitions()
// horizontal viewer...
if(Math.min(W, H) == H){
// XXX
viewer.find('.ribbon .image')
.css({
width: n,
height: '',
})
// vertical viewer...
} else {
// XXX
viewer.find('.ribbon .image')
.css({
width: '',
height: n,
})
}
that.centerImage()
that.ribbons.restoreTransitions(true)
})
// reset proportions to square...
} else if(w != h) {
getAnimationFrame(function(){
that.ribbons.preventTransitions()
viewer.find('.ribbon .image')
.css({
width: '',
height: '',
})
// shift image container proportions between 1 and R, from threshold
// scale to 1...
} else if(scale >= 1){
// XXX
that.centerImage()
// shift image container proportions between R and actual image
// proportions...
} else if(W != w || H != h){
// XXX
// image container proportions are the same as image proportions...
} else {
// XXX
that.ribbons.restoreTransitions(true)
})
}
}

16
ui (gen4)/features/ui.js
View File

@ -538,19 +538,15 @@ module.ViewerActions = actions.Actions({
function(){
this.ribbons.origin()
var s = this.scale * (this.config['zoom-step'] || 1.2)
var W = this.ribbons.viewer.width()
var H = this.ribbons.viewer.height()
var w = this.ribbons.getVisibleImageSize('width', s)
var h = this.ribbons.getVisibleImageSize('height', s)
var d = (this.config['zoom-step'] || 1.2)
// limit scaling to screen dimensions...
if(this.config['max-zoom-to-screen'] && (W < w || H < h)){
this.fitImage(1)
if(this.config['max-zoom-to-screen']
&& (Math.min(this.screenwidth, this.screenheight) / d) < 1){
this.scale /= 1 / Math.min(this.screenwidth, this.screenheight)
} else {
this.scale = s
this.scale *= d
}
}],
zoomOut: ['Zoom/Zoom out',
@ -560,7 +556,7 @@ module.ViewerActions = actions.Actions({
var max = this.config['max-screen-images']
if(max && max < (this.screenwidth * (this.config['zoom-step'] || 1.2))){
this.fitImage(max)
this.scale /= max / Math.min(this.screenwidth, this.screenheight)
} else {
this.scale /= (this.config['zoom-step'] || 1.2)