tweaking image rotation...

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

ui/Gen3-TODO.otl

@@ -1,11 +1,11 @@
-[_] 20% Gen 3 current todo
+[_] 21% Gen 3 current todo
-	[_] 40% High priority
+	[_] 43% High priority
+		[_] ASAP: account for image rotation with screen proportions while positioning
+		| getRelativeVisualPosition(...) gives an odd position when:
+		| 	- image is rotated
+		| 	- image is screen-proportioned
 		[_] ASAP: support relative paths in cache...
 		[_] ASAP: load/view un-cached directories...
-		[_] ASAP: rotate images in the viewer...
-		| This is a tad complicated by:
-		| 	- marks
-		| 	- image elem proportions that can change
 		[_] ASAP: import fav dirs...
 		[_] BUG: sometimes duplicate images get loaded...
 		| this happens when jumping back and forth on the mid ribbon until
@@ -61,6 +61,10 @@
 			[_] thresholds and frame size
 			[_] remove extra and repetitive actions
 			[_] caching config
+		[X] ASAP: rotate images in the viewer...
+		| This is a tad complicated by:
+		| 	- marks
+		| 	- image elem proportions that can change
 		[X] 100% themes
 			[X] light
 			[X] gray

ui/base.js

@@ -164,6 +164,7 @@ function getImageGID(image){
 // NOTE: if used during an animation/transition this will give the 
 // 		position at the exact frame of the animation, this might not be
 // 		the desired "final" data...
+// XXX account for rotated images...
 function getRelativeVisualPosition(outer, inner){
 	outer = $(outer).offset()
 	inner = $(inner).offset()
@@ -800,29 +801,68 @@ var ccw = {
 	270: 180,
 }
 
-// XXX need to account for proportions...
+// XXX need to make this statically stable...
-function rotateImage(direction, image){
+function correctImageProportionsForRotation(image, direction){
-	var r_table = direction == 'Left' ? cw : ccw
+	direction = direction == null ? 'static' : direction
-	image = image == null ? $('.current.image') : $(image)
+	var viewer = $('.viewer')
-	image.each(function(i, e){
+	var W = viewer.innerWidth()
-		var img = $(this)
+	var H = viewer.innerHeight()
-		var o = img.attr('orientation')
-		img.attr('orientation', r_table[o])
 
+	$(image).each(function(i, e){
+		var image = $(this)
+		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){
+
+			console.log('>>>', 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 ){
+				image.css({
+					width: h,
+					height: w,
+				})
+				image.css({
+					'margin-top': -((w - h)/2),
+					'margin-bottom': -((w - h)/2),
+					'margin-left': (w - h)/2,
+					'margin-right': (w - h)/2,
+				})
+			} else if((o == 0 || o == 180) && Math.abs(W/H - w/h) > 0.005 ){
+				image.css({
+					width: h,
+					height: w,
+				})
+				image.css({
+					'margin': '',
+				})
+			}
+
+		} else {
 			image.css({
-				width: h,
+				'margin': '',
-				height: w,
 			})
 		}
-		*/
+	})
+}
+
+function rotateImage(direction, image){
+	var r_table = direction == 'left' ? cw : ccw
+	image = image == null ? $('.current.image') : $(image)
+	image.each(function(i, e){
+		var img = $(this)
+		var o = r_table[img.attr('orientation')]
+		img.attr('orientation', o)
+
+		// account for proportions...
+		correctImageProportionsForRotation(img, direction)
 	})
 
 	$('.viewer').trigger('rotating' + direction.capitalize(), [image])

ui/lib/keyboard.js

@@ -132,7 +132,7 @@ function doc(text, func){
  * XXX need an explicit way to prioritize modes...
  * XXX check do we need did_handling here...
  *
- * XXX BUG explicitly given modes do ton yield results if the pattern 
+ * XXX BUG explicitly given modes do not yield results if the pattern 
  * 		does not match...
  */
 function getKeyHandlers(key, modifiers, keybindings, modes){
@@ -499,7 +499,6 @@ function buildKeybindingsHelpHTML(keybindings){
 	var doc = buildKeybindingsHelp(keybindings)
 
 	var res = '<table class="keyboard-help">'
-	
 	for(var mode in doc){
 		if(mode == 'doc'){
 			continue

ui/modes.js

@@ -38,6 +38,7 @@ var toggleTheme = createCSSClassToggler('.viewer',
 // XXX should we use the createCSSClassToggler for this?
 // XXX revise: does extra stuff...
 function toggleImageProportions(mode){
+	// normal images...
 	var image = $('.image')
 	var h = image.outerHeight(true)
 	var w = image.outerWidth(true)
@@ -52,6 +53,10 @@ function toggleImageProportions(mode){
 			width: size,
 			height: size
 		})
+
+		// account for rotation...
+		correctImageProportionsForRotation(image)
+
 		centerView(null, 'css')
 		return 'square'
 
@@ -66,9 +71,14 @@ function toggleImageProportions(mode){
 		} else {
 			image.css('height', H * w/W)
 		}
+
+		// account for rotation...
+		correctImageProportionsForRotation(image)
+
 		centerView(null, 'css')
 		return 'viewer'
 	}
+
 }