fixed loading of images, now happens only when needed and not on every focus...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/data.js

@@ -1350,9 +1350,30 @@ function getGIDsAfter(count, gid, ribbon, inclusive, data){
 // If gid does not exist in the requested ribbon then getGIDBefore() is
 // used to get an appropriate alternative gid.
 //
+// If gid is less than count/2 to ribbon head/tail, then less than count
+// gids will be returned
+//
+//	   count
+//  |<------>|
+// 	   oXoooooooooooooooo	->	___oXoooo
+// 		^
+// 	   gid
+//
+//
+// Setting force_count will make this always return count images, even 
+// at the start and end of the ribbon.
+//
+//		  count
+//	   |<------>|
+// 	   oXoooooooooooooooo	->	oXooooooo
+// 		^
+// 	   gid
+//
+// Otherwise this will return less.
+//
 // NOTE: skipping gid and ribbon while passing data may not work correctly...
 // NOTE: count represents section diameter...
-function getGIDsAround(count, gid, ribbon, data){
+function getGIDsAround(count, gid, ribbon, data, force_count){
 	if(count == 0){
 		return []
 	}
@@ -1360,6 +1381,7 @@ function getGIDsAround(count, gid, ribbon, data){
 	data = data == null ? DATA : data
 	gid = gid == null ? getImageGID() : gid
 	ribbon = ribbon == null ? getRibbonIndex() : ribbon
+	// XXX is this out of context here???
 	count = count == null ? Math.round(LOAD_SCREENS * getScreenWidthInImages()) : count
 
 	var ribbon_data = data.ribbons[ribbon]
@@ -1375,6 +1397,17 @@ function getGIDsAround(count, gid, ribbon, data){
 	var end = i + Math.ceil(count/2)
 	end = end > ribbon_data.length ? ribbon_data.length : end
 
+	// force count by extending the ribbon at the opposite end...
+	if(force_count && ribbon_data.length > count){
+		var d = count - (end - start)
+
+		start = end >= ribbon_data.length ? start - d  : start
+		start = start < 0 ? 0 : start
+
+		end = start <= 0 ? end + d : end
+		end = end > ribbon_data.length ? ribbon_data.length : end
+	}
+
 	// get the actual data...
 	return ribbon_data.slice(start, end)
 }
@@ -1436,7 +1469,7 @@ function getCommonSubArray(L1, L2){
 
 // Load count images around a given image/gid into the given ribbon.
 //
-function loadImagesAround(count, gid, ribbon, data){
+function loadImagesAround(count, gid, ribbon, data, force_count){
 	// default values...
 	data = data == null ? DATA : data
 	ribbon = ribbon == null ? getRibbonIndex() : ribbon
@@ -1451,7 +1484,7 @@ function loadImagesAround(count, gid, ribbon, data){
 		.find('.image')
 		.map(function(_, e){ return getImageGID(e) })
 		.toArray()
-	var new_ribbon = getGIDsAround(count, gid, ribbon, data)
+	var new_ribbon = getGIDsAround(count, gid, ribbon, data, force_count)
 
 	// get the common sub-ribbon...
 	// NOTE: we are only interested in continuous sub-ribbons...
@@ -1622,10 +1655,15 @@ function loadSettings(){
 // NOTE: it appears that sorting images by priority before loading them
 // 		to cache has little or no effect on the order they are 
 // 		loaded/rendered...
+// NOTE: this is not meant to be a real cache, rather a que for the OS and
+// 		backend/webkit on what's next...
 function preCacheRibbonImages(ribbon){
+	var deferred = $.Deferred()
+	setTimeout(function(){
 		var i = getRibbonIndex(ribbon)
 		var size = getVisibleImageSize('max')
 		var screen_size = getScreenWidthInImages(getVisibleImageSize())
+		// XXX
 		var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
 		var images = ribbon.find('.image')
 		var first = getImageGID(images.first())
@@ -1642,7 +1680,9 @@ function preCacheRibbonImages(ribbon){
 			cache.push(img)
 		})
 
-	return cache
+		deferred.resolve(cache)
+	}, 0)
+	return deferred
 }
 
 

ui/index.html

@@ -221,13 +221,17 @@ Populated
 		<div class="ribbon">
 			<div class="image"></div>
 			<div class="image"></div>
+			...
 		</div>
 		<div class="ribbon">
 			<div class="image"></div>
 			<div class="current image"></div>
 			<div class="image"></div>
+			<div class="mark selected"></div>
 			<div class="image"></div>
+			...
 		</div>
+		...
 	</div>
 </div>
 -->

ui/setup.js

@@ -85,9 +85,6 @@ function setupDataBindings(viewer){
 
 		// NOTE: we do not need to worry about explicit centering the ribbon 
 		//		here, just ball-park-load the correct batch...
-		// XXX need to maintain the correct number of images per ribbon
-		// 		per zoom setting -- things get really odd when a ribbon 
-		// 		is smaller than it should be...
 		// XXX this does not get called on marking...
 		.on('preCenteringRibbon', function(evt, ribbon, image){
 			var r = getRibbonIndex(ribbon)
@@ -97,14 +94,6 @@ function setupDataBindings(viewer){
 				return 
 			}
 
-			var gid = getImageGID(image)
-			var gr = DATA.ribbons[r]
-			var img_before = getImageBefore(image, ribbon)
-			var gid_before = getGIDBefore(gid, r)
-			var screen_size = getScreenWidthInImages()
-			screen_size = screen_size < 1 ? 1 : screen_size
-			var l = ribbon.find('.image').length
-
 			// skip the whole thing if the ribbon is not visible -- outside
 			// of viewer are...
 			var viewer = $('.viewer')
@@ -116,38 +105,45 @@ function setupDataBindings(viewer){
 				return
 			}
 
-			// load images if we do a long jump -- start, end or some mark 
+			// prepare for loading...
-			// outside of currently loaded section...
+			var gid = getImageGID(image)
-			if(gid_before == null 
+			var gr = DATA.ribbons[r]
-					|| gid_before != getImageGID(img_before) 
+			var img_before = getImageBefore(image, ribbon)
-					// also load if we run out of images in the current ribbon,
+			var gid_before = getGIDBefore(gid, r)
-					// likely due to shifting...
+			var screen_size = getScreenWidthInImages()
-					|| ( gr.length > l 
+			screen_size = screen_size < 1 ? 1 : screen_size
-						&& l < Math.round(screen_size * LOAD_SCREENS))){
+			var load_frame_size = Math.round(screen_size * LOAD_SCREENS)
-				loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, ribbon)
+			var roll_frame_size = Math.ceil(load_frame_size / 3)
-
+			var threshold = Math.floor(load_frame_size / 4) 
-			// roll the ribbon while we are advancing...
-			} else { 
-				var head = img_before.prevAll('.image')
-				var tail = img_before.nextAll('.image')
-
-				// NOTE: if this is greater than the number of images currently 
-				//		loaded, it might lead to odd effects...
-				var frame_size = Math.ceil((screen_size * LOAD_SCREENS) / 2)
-				var threshold = Math.floor(frame_size / 2) 
 			threshold = threshold < 1 ? 1 : threshold
+			var index = gr.indexOf(gid)
+			var at_start = index < threshold
+			var at_end = (gr.length-1 - index) < threshold
 
-				// do the loading...
+			// current image is loaded...
-				// XXX need to expand/contract the ribbon depending on speed...
+			if(gid_before == getImageGID(img_before)){
-				// 		...might also be a good idea to load smaller images 
+				var head = img_before.prevAll('.image').length
-				// 		while scrolling really fast...
+				var tail = img_before.nextAll('.image').length
-				// XXX use extendRibbon, to both roll and expand/contract...
+				var l = ribbon.find('.image').length
-				if(tail.length < threshold){
+
-					var rolled = rollImages(frame_size, ribbon)
+				// less images than expected - extend ribbon...
-				}
+				if(l < load_frame_size){
-				if(head.length < threshold){
+					// NOTE: we are forcing the count of images...
-					var rolled = rollImages(-frame_size, ribbon)
+					loadImagesAround(load_frame_size, gid, ribbon, null, true)
+
+				// tail at threshold - roll ->
+				} else if(!at_end && tail < threshold){
+					var rolled = rollImages(roll_frame_size, ribbon)
+
+				// head at threshold - roll <-
+				} else if(!at_start && head < threshold){
+					var rolled = rollImages(-roll_frame_size, ribbon)
 				}
+
+			// we jumped, load new set...
+			} else {
+				// NOTE: we are forcing the count of images...
+				loadImagesAround(load_frame_size, gid, ribbon, null, true)
 			}
 		})
 
@@ -194,6 +190,7 @@ function setupDataBindings(viewer){
 		})
 
 		.on('fittingImages', function(evt, n){
+			console.log('!!!! fittingImages')
 			// load correct amount of images in each ribbon!!!
 			var screen_size = getScreenWidthInImages()
 			var gid = getImageGID()
@@ -217,7 +214,7 @@ function setupDataBindings(viewer){
 					return
 				}
 				*/
-				loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r)
+				loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r, null, true)
 			})
 
 			centerView(null, 'css')