mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
fixed a bug with recycling images still having the old proportions + tweaked loading threshold calculation a bit + some minor refactoring and tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
84ecf80197
commit
da688e2579
@ -1,5 +1,7 @@
|
||||
[_] 24% Gen 3 current todo
|
||||
[_] 48% High priority
|
||||
[_] BUG: aligning still sometimes gets off...
|
||||
| ...after rotating a number of images
|
||||
[_] ASAP: support relative paths in cache...
|
||||
[_] ASAP: load/view un-cached directories...
|
||||
[_] import fav dirs (wo. index)...
|
||||
|
||||
30
ui/base.js
30
ui/base.js
@ -806,27 +806,39 @@ var ccw = {
|
||||
270: 180,
|
||||
}
|
||||
|
||||
// XXX need to make this statically stable...
|
||||
function correctImageProportionsForRotation(image, direction){
|
||||
direction = direction == null ? 'static' : direction
|
||||
function correctImageProportionsForRotation(images){
|
||||
var viewer = $('.viewer')
|
||||
var W = viewer.innerWidth()
|
||||
var H = viewer.innerHeight()
|
||||
// NOTE: this is here because we are comparing proportions of two
|
||||
// very differently sized elements, and though the proportions
|
||||
// may be the same, the actual result may be vastly different
|
||||
// due of pixel rounding...
|
||||
// Real example:
|
||||
// Viewer: 826x601
|
||||
// Image: 413x300
|
||||
// ratio 1: W/H - w/h = -0.002290626733222556
|
||||
// ratio 2: W/w - H/h = -0.0033333333333334103
|
||||
// NOTE: this might get out of hand for close to square viewer...
|
||||
// ...one way to cheat out of this is to round any ratio
|
||||
// close to 1 to 1.
|
||||
// XXX find a better way out of this, avoiding floats...
|
||||
var rounding_error = 0.007
|
||||
|
||||
$(image).each(function(i, e){
|
||||
$(images).each(function(i, e){
|
||||
var image = $(this)
|
||||
// orientation...
|
||||
var o = image.attr('orientation')
|
||||
o = o == null ? 0 : o
|
||||
// XXX account for proportions...
|
||||
//var w = image.css('width')
|
||||
//var h = image.css('height')
|
||||
var w = image.outerWidth()
|
||||
var h = image.outerHeight()
|
||||
|
||||
if(w != h){
|
||||
var proportions = W/H - w/h
|
||||
|
||||
// when the image is turned 90deg/270deg and its
|
||||
// proportions are the same as the screen...
|
||||
if((o == 90 || o == 270) && Math.abs(W/H - w/h) < 0.005 ){
|
||||
if((o == 90 || o == 270) && Math.abs(proportions) < rounding_error ){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
@ -837,7 +849,7 @@ function correctImageProportionsForRotation(image, direction){
|
||||
'margin-left': (w - h)/2,
|
||||
'margin-right': (w - h)/2,
|
||||
})
|
||||
} else if((o == 0 || o == 180) && Math.abs(W/H - w/h) > 0.005 ){
|
||||
} else if((o == 0 || o == 180) && Math.abs(proportions) > rounding_error ){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
|
||||
48
ui/data.js
48
ui/data.js
@ -12,6 +12,10 @@ var LOAD_THRESHOLD = 2
|
||||
var DEFAULT_SCREEN_IMAGES = 4
|
||||
var MAX_SCREEN_IMAGES = 12
|
||||
|
||||
// if set to true each image will have basic info written to its html
|
||||
// title attr.
|
||||
var IMAGE_TITLE_DATA = true
|
||||
|
||||
// A stub image, also here for documentation...
|
||||
var STUB_IMAGE_DATA = {
|
||||
id: 'SIZE',
|
||||
@ -313,7 +317,7 @@ function getBestPreview(gid, size){
|
||||
|
||||
function updateImage(image, gid, size){
|
||||
image = $(image)
|
||||
var html = ''
|
||||
var title = ''
|
||||
if(gid == null){
|
||||
gid = getImageGID(image)
|
||||
} else {
|
||||
@ -321,22 +325,11 @@ function updateImage(image, gid, size){
|
||||
}
|
||||
size = size == null ? getVisibleImageSize('max') : size
|
||||
|
||||
// update image order...
|
||||
image.attr({
|
||||
order: DATA.order.indexOf(gid),
|
||||
})
|
||||
|
||||
// setup marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
image.addClass('marked')
|
||||
} else {
|
||||
image.removeClass('marked')
|
||||
}
|
||||
|
||||
var img_data = IMAGES[gid]
|
||||
if(img_data == null){
|
||||
img_data = STUB_IMAGE_DATA
|
||||
}
|
||||
var name = img_data.path.split('/').pop()
|
||||
|
||||
// get the url...
|
||||
var preview = getBestPreview(gid, size)
|
||||
@ -345,13 +338,22 @@ function updateImage(image, gid, size){
|
||||
'background-image': 'url('+ preview.url +')',
|
||||
})
|
||||
.attr({
|
||||
order: DATA.order.indexOf(gid),
|
||||
orientation: img_data.orientation == null ? 0 : img_data.orientation,
|
||||
title: IMAGE_TITLE_DATA ?
|
||||
'Image: ' + name +'\n'+
|
||||
'Order: ' + DATA.order.indexOf(gid) +'\n'+
|
||||
'GID: '+ gid +'\n'+
|
||||
'Preview size:'+ preview.size : '',
|
||||
})
|
||||
|
||||
html = window.DEBUG ?
|
||||
DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview.size
|
||||
: html
|
||||
image.html(html)
|
||||
// setup marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
image.addClass('marked')
|
||||
} else {
|
||||
image.removeClass('marked')
|
||||
}
|
||||
|
||||
|
||||
return image
|
||||
}
|
||||
@ -426,14 +428,12 @@ function loadImages(ref_gid, count, ribbon){
|
||||
updateImage(e, gids[i], size)
|
||||
})
|
||||
$('.viewer').trigger('reloadedRibbon', [ribbon])
|
||||
return images
|
||||
|
||||
|
||||
// do nothing...
|
||||
// ...the requested section is the same as the one already loaded...
|
||||
} else {
|
||||
window.DEBUG && console.log('>>> (ribbon:', ribbon_i, ') NOTHING TO DO.')
|
||||
return images
|
||||
}
|
||||
|
||||
// do a partial reload...
|
||||
@ -453,8 +453,12 @@ function loadImages(ref_gid, count, ribbon){
|
||||
updateImage(e, gids[i + gids.length - tail], size)
|
||||
})
|
||||
$('.viewer').trigger('updatedRibbon', [ribbon])
|
||||
return ribbon.find('.image')
|
||||
images = ribbon.find('.image')
|
||||
}
|
||||
|
||||
// XXX is this the right place for this?
|
||||
correctImageProportionsForRotation(images)
|
||||
return images
|
||||
}
|
||||
|
||||
|
||||
@ -502,6 +506,8 @@ function rollImages(n, ribbon, extend, no_compensate_shift){
|
||||
|
||||
$('.viewer').trigger('updatedRibbon', [ribbon])
|
||||
|
||||
// XXX is this the right place for this?
|
||||
correctImageProportionsForRotation(images)
|
||||
return images
|
||||
}
|
||||
|
||||
@ -884,7 +890,7 @@ function setupDataBindings(viewer){
|
||||
// NOTE: if this is greater than the number of images currently
|
||||
// loaded, it might lead to odd effects...
|
||||
var frame_size = (screen_size * LOAD_SCREENS) / 2
|
||||
var threshold = screen_size * LOAD_THRESHOLD
|
||||
var threshold = Math.ceil(screen_size * LOAD_THRESHOLD)
|
||||
|
||||
// do the loading...
|
||||
// XXX need to expand/contract the ribbon depending on zoom and speed...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user