Mercurial > hg > digilib-old

changeset 950:164d69e2c481

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
much nicer implementation of preview for scrolling and zooming.
author robcast
date Tue, 03 Jan 2012 21:30:27 +0100
parents 9aacae8ae45e
children 9c699b6cfcca
files webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js
diffstat 2 files changed, 56 insertions(+), 106 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Tue Jan 03 16:29:46 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Tue Jan 03 21:30:27 2012 +0100
@@ -332,8 +332,7 @@
             var delta = geom.position(deltaX, deltaY);
             za.addPosition(delta);
             za = FULL_AREA.fit(za);
-            $(data).trigger('changeZoomArea', za);
-            data.zoomArea = za;
+            setZoomArea(data, za);
             redisplay(data);
         },
 
@@ -777,9 +776,11 @@
                 			loadImageInfo(data);
                 		}
                 	}
+                	// update if we have a preview
+                	if (data.hasPreviewBg) {
+                	    $(data).trigger('update');
+                	}
                 	//FIXME: highlightButtons(data);
-                	// invalidate background(?)
-                	data.hasPreviewBg = false;
                 	// send event
                 	$(data).trigger('redisplay');
                 } catch (e) {
@@ -808,8 +809,6 @@
         		}
         	}
             //FIXME: highlightButtons(data);
-        	// invalidate background(?)
-        	data.hasPreviewBg = false;
             // send event
             $(data).trigger('redisplay');
         }
@@ -1131,7 +1130,7 @@
         var imgLoaded = $.browser.msie
             ? $img.prop('width') > 0
             : $img.prop('complete');
-		        if (imgLoaded) {
+        if (imgLoaded || data.hasPreviewBg) {
 			// create Transform from current zoomArea and image size
 			data.imgTrafo = getImgTrafo($img, data.zoomArea, data.settings.rot,
 					data.scalerFlags.hmir, data.scalerFlags.vmir,
@@ -1158,6 +1157,7 @@
             // show image in case it was hidden (for example in zoomDrag)
             $img.css('visibility', 'visible');
             $scaler.css({'opacity' : '1', 'background-image' : 'none'});
+            data.hasPreviewBg = false;
             // update display (render marks, etc.)
             updateDisplay(data);
         };
@@ -1178,29 +1178,8 @@
     var handleChangeZoomArea = function (evt, newZa) {
     	console.debug("handleChangeZoomArea:", newZa);
     	var data = this;
-    	var delta = data.zoomArea.delta(newZa);
-    	if (Math.abs(delta.width) > EPSILON || Math.abs(delta.height) > EPSILON) {
-    		// zoom changed -- set new background
-    		console.debug("zoom level changed!");
-    		var dw = data.zoomArea.width / newZa.width;
-    		var dh = data.zoomArea.height / newZa.height;
-    		var deltapix = geom.size(dw, dh);
-            data.$elem.find(".overlay").hide(); // hide all overlays (marks/regions)
-    		setZoomBg(data, deltapix);
-    	} else if (Math.abs(delta.x) > EPSILON || Math.abs(delta.y) > EPSILON) {
-    		// move background
-    		console.debug("zoom area moved:", delta);
-    		var opx = data.imgTrafo.transform(data.zoomArea.getPosition());
-    		var npx = data.imgTrafo.transform(newZa.getPosition());
-    		var deltapix = npx.delta(opx);
-    		if (data.hasPreviewBg) {
-    			moveZoomBg(data, deltapix);    		
-    		} else {
-    			// no background yet
-                data.$elem.find(".overlay").hide(); // hide all overlays (marks/regions)
-    			setZoomBg(data, deltapix);
-    		}
-    	}
+        data.$elem.find(".overlay").hide(); // hide all overlays (marks/regions)
+    	setPreviewBg(data, newZa);
     };
     
     
@@ -1242,8 +1221,7 @@
         newarea.x -= 0.5 * (newarea.width - area.width);
         newarea.y -= 0.5 * (newarea.height - area.height);
         newarea = FULL_AREA.fit(newarea);
-        $(data).trigger('changeZoomArea', newarea);
-        data.zoomArea = newarea;
+        setZoomArea(data, newarea);
         redisplay(data);
     };
 
@@ -1335,84 +1313,57 @@
         $scaler.one('mousedown.dlZoomArea', zoomStart);
     };
 
-    /** set zoom background (returns rectangle with fullsize background coordinates)
-     * 
+    /** set preview background.
+     * optional newZoomArea scales and moves background to preview.
      */
-    var setZoomBg = function(data, delta) {
+    var setPreviewBg = function(data, newZoomArea) {
         var $scaler = data.$scaler;
         var $img = data.$img;
-        var fullRect = null;
+        var imgTrafo = data.imgTrafo;
+        var scalerPos = geom.position($scaler);
+        var bgRect = null;
         // hide the scaler img, show background of div instead
         $img.css('visibility', 'hidden');
         // use current image as first background
         var scalerCss = {
-            'background-image' : 'url(' + $img.attr('src') + ')',
-            'background-repeat' : 'no-repeat',
-            'background-position' : 'left top',
-            'opacity' : '0.7',
-            'cursor' : 'move'
-            };
+        		'background-image' : 'url(' + $img.attr('src') + ')',
+                'background-repeat' : 'no-repeat',
+                'background-position' : '0px 0px',
+                'opacity' : '0.7',
+                'cursor' : 'move'
+        };
+        if (newZoomArea != null) {
+        	imgTrafo = getImgTrafo($img, newZoomArea, data.settings.rot,
+					data.scalerFlags.hmir, data.scalerFlags.vmir,
+					data.scaleMode, data);
+        	// for new background coordinates transform old zoomArea with new Transform
+        	bgRect = imgTrafo.transform(data.zoomArea);
+        	// correct offset because background is relative
+        	bgRect.addPosition(scalerPos.neg());
+        	// position background
+        	scalerCss['background-position'] = Math.round(bgRect.x) + 'px '+ Math.round(bgRect.y) + 'px';
+        }
         if (data.hasBgSize) {
-        	if (delta != null && delta.width != null) {
-        		// scale background by delta
-        		var nw = Math.round(data.imgRect.width * delta.width);
-        		var nh = Math.round(data.imgRect.height * delta.height);
-        		scalerCss[data.bgSizeName] = nw + 'px ' +  nh + 'px';
-        		// correct offset
-        		scalerCss['background-position'] = Math.round((data.imgRect.width - nw) / 2) + 'px ' 
-        				+ Math.round((data.imgRect.height - nh) / 2) + 'px';
+        	// scale background using CSS3-background-size
+        	if (bgRect != null && (bgRect.height < data.settings.maxBgSize && bgRect.width < data.settings.maxBgSize)) {
+        		scalerCss[data.bgSizeName] = Math.round(bgRect.width) + 'px ' + Math.round(bgRect.height) + 'px';
         	} else {
         		scalerCss[data.bgSizeName] = 'auto';
         	}
-            // additional full-size background using CSS3-background-size
-            fullRect = data.imgTrafo.transform(FULL_AREA);
+            // additional full-size background using CSS3
+            fullRect = imgTrafo.transform(FULL_AREA);
             if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) {
                 // correct offset because background is relative
-                var scalerPos = geom.position($scaler);
                 fullRect.addPosition(scalerPos.neg());
                 var url = getBgImgUrl(data);
-                // add second background url, size and position (CSS3)
+                // add second background url, size and position
                 scalerCss['background-image'] += ', url(' + url + ')';
-            	if (delta != null && delta.width != null) {
-            		// scale second background by delta
-            		var nw = Math.round(fullRect.width * delta.width);
-            		var nh = Math.round(fullRect.height * delta.height);
-                    scalerCss[data.bgSizeName] += ', ' + nw + 'px ' + nh + 'px';
-                    // and correct position
-                    var nx = Math.round(fullRect.x + (fullRect.width - nw) / 2);
-                    var ny = Math.round(fullRect.y + (fullRect.height - nh) / 2);
-                    scalerCss['background-position'] += ', ' + nx + 'px '+ ny + 'px';
-            	} else {
-                    scalerCss[data.bgSizeName] += ', ' + fullRect.width + 'px ' + fullRect.height + 'px';
-                    scalerCss['background-position'] += ', ' + fullRect.x + 'px '+ fullRect.y + 'px';
-            	}
-            } else {
-                // scaled full-size background image too big
-                fullRect = null;
+                scalerCss[data.bgSizeName] += ', ' + Math.round(fullRect.width) + 'px ' + Math.round(fullRect.height) + 'px';
+                scalerCss['background-position'] += ', ' + Math.round(fullRect.x) + 'px '+ Math.round(fullRect.y) + 'px';
             }
         }
         $scaler.css(scalerCss);
         data.hasPreviewBg = true;
-        data.fullBgRect = fullRect;
-        if (delta != null && delta.x != null) {
-        	moveZoomBg(data, delta);
-        }
-        return fullRect;
-    };
-    
-    /** move zoom background.
-     * 
-     */
-    var moveZoomBg = function(data, delta) {
-        // background position
-        var bgPos = delta.x + "px " + delta.y + "px";
-        if (data.fullBgRect != null) {
-        	// add full-size background position
-            var bp = data.fullBgRect.getPosition().add(delta);
-            bgPos += ', ' + bp.x + "px " + bp.y + "px";
-        }
-        // move the background image to the new position
-        data.$scaler.css('background-position', bgPos);
     };
     
     /** setup handlers for dragging the zoomed image.
@@ -1437,7 +1388,7 @@
             startPos = geom.position(evt);
             delta = null;
             // set low res background immediately on mousedown
-            setZoomBg(data);
+            setPreviewBg(data);
             $document.on("mousemove.dlZoomDrag", dragMove);
             $document.on("mouseup.dlZoomDrag", dragEnd);
             return false;
@@ -1447,15 +1398,12 @@
         var dragMove = function (evt) {
             var pos = geom.position(evt);
             delta = startPos.delta(pos);
-            // position background
-            //moveZoomBg(data, delta);
             // send message event with current zoom position
             var za = geom.rectangle($img);
             za.addPosition(delta.neg());
             // transform back
             var newArea = data.imgTrafo.invtransform(za);
             $data.trigger('changeZoomArea', newArea);
-            //$data.trigger('dragZoom', [za]);
             return false;
             };
 
@@ -1494,6 +1442,15 @@
         }
     };
 
+    /** set the zoom area.
+     * also triggers "changeZoomArea" event.
+     */
+    var setZoomArea = function(data, za) {
+        $(data).trigger('changeZoomArea', za);
+        data.oldZoomArea = data.zoomArea;
+        data.zoomArea = za;
+    };
+    
     /** get image quality as a number (0..2).
      * 
      */
@@ -1644,7 +1601,7 @@
             redisplay : redisplay,
             updateDisplay : updateDisplay,
             showDiv : showDiv,
-            setZoomBg : setZoomBg,
+            setPreviewBg : setPreviewBg,
             getImgTrafo : getImgTrafo,
             getQuality : getQuality,
             setQuality : setQuality,
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Tue Jan 03 16:29:46 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Tue Jan 03 21:30:27 2012 +0100
@@ -333,18 +333,19 @@
         if (!data.imgTrafo) return;
         var $elem = data.$elem;
         var regions = data.regions;
+        var zoomArea = data.zoomArea;
         if (index > regions.length) return;
         var region = regions[index];
         var $regionDiv = region.$div;
         if (!$regionDiv) {
-            console.debug("renderRegion: region has no $div", region);
+            console.error("renderRegion: region has no $div", region);
             // alert("renderRegion: region has no $div to show");
             return;
         }
         var regionRect = region.copy();
         var show = data.settings.isRegionVisible;
-        if (show && data.zoomArea.overlapsRect(regionRect)) {
-            regionRect.clipTo(data.zoomArea);
+        if (show && zoomArea.overlapsRect(regionRect)) {
+            regionRect.clipTo(zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
             console.debug("renderRegion: pos=",geom.position(screenRect));
             if (anim) {
@@ -456,13 +457,6 @@
         renderRegions(data);
     };
 
-    // event handler, redisplays regions (e.g. in a new position)
-    var handleRedisplay = function (evt) {
-        var data = this;
-        console.debug("regions: handleRedisplay");
-        //renderRegions(data);
-    };
-
     // plugin installation called by digilib on plugin object.
     var install = function(plugin) {
         digilib = plugin;
@@ -491,7 +485,6 @@
         var $data = $(data);
         $data.on('setup', handleSetup);
         $data.on('update', handleUpdate);
-        $data.on('redisplay', handleRedisplay);
         var settings = data.settings;
         var selector = settings.regionContentSelector;
         settings.hasRegionContent = $elem.has(selector).length > 0;