changeset 1137:3b5968aeefac

new region icons; autozoom on click
author hertzhaft
date Fri, 16 Nov 2012 18:26:55 +0100
parents 95ca45086d00
children 8acf60afb8ee
files webapp/src/main/webapp/jquery/img/fullscreen/32/addregion.png webapp/src/main/webapp/jquery/img/fullscreen/32/delregion.png webapp/src/main/webapp/jquery/img/fullscreen/32/delregions.png webapp/src/main/webapp/jquery/img/fullscreen/32/findcoords.png webapp/src/main/webapp/jquery/img/fullscreen/32/findregion.png webapp/src/main/webapp/jquery/img/fullscreen/32/showregions.png webapp/src/main/webapp/jquery/img/fullscreen3.svg webapp/src/main/webapp/jquery/img/gen_fullscreen_icons.cmd webapp/src/main/webapp/jquery/jquery.digilib.geometry.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js webapp/src/main/webapp/jquery/test-findregions.html
diffstat 11 files changed, 249 insertions(+), 125 deletions(-) [+]
line wrap: on
line diff
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/addregion.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/delregion.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/delregions.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/findcoords.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/findregion.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/showregions.png has changed
--- a/webapp/src/main/webapp/jquery/img/fullscreen3.svg	Fri Nov 16 16:27:23 2012 +0100
+++ b/webapp/src/main/webapp/jquery/img/fullscreen3.svg	Fri Nov 16 18:26:55 2012 +0100
@@ -14,7 +14,7 @@
    height="32"
    id="svg2388"
    sodipodi:version="0.32"
-   inkscape:version="0.48.2 r9819"
+   inkscape:version="0.48.0 r9654"
    sodipodi:docname="fullscreen3.svg"
    inkscape:export-filename="/Users/casties/Library/Eclipse/digilib/webapp/src/main/webapp/jquery/img/annotationmark-bg-16.png"
    inkscape:export-xdpi="44.971478"
@@ -119,29 +119,30 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="14.74"
-     inkscape:cx="-7.5948188"
-     inkscape:cy="15.995577"
-     inkscape:current-layer="g3411"
+     inkscape:zoom="16"
+     inkscape:cx="9.150834"
+     inkscape:cy="12.945999"
+     inkscape:current-layer="g3379"
      showgrid="true"
      inkscape:grid-bbox="true"
      inkscape:document-units="px"
-     inkscape:window-width="1842"
-     inkscape:window-height="1156"
-     inkscape:window-x="1920"
-     inkscape:window-y="22"
+     inkscape:window-width="1315"
+     inkscape:window-height="837"
+     inkscape:window-x="1436"
+     inkscape:window-y="-4"
      inkscape:window-maximized="1"
      showguides="true"
      inkscape:guide-bbox="true"
      inkscape:snap-object-midpoints="true"
      inkscape:snap-bbox="false"
      inkscape:snap-grids="false"
-     inkscape:snap-global="false"
+     inkscape:snap-global="true"
      inkscape:snap-nodes="true"
      fit-margin-top="0"
      fit-margin-left="0"
      fit-margin-right="0"
-     fit-margin-bottom="0">
+     fit-margin-bottom="0"
+     gridtolerance="20">
     <sodipodi:guide
        orientation="1,0"
        position="16.010855,33.58209"
@@ -685,6 +686,173 @@
   <g
      transform="translate(-7.8129058,-7.9934033)"
      style="display:none"
+     inkscape:label="addregion"
+     id="g3379"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <path
+       inkscape:connector-curvature="0"
+       id="path3381"
+       d="M 12.915288,12.614163 C 9.9553318,15.224054 8.0396378,22.651647 8.0396378,22.651647 l 14.4127362,-0.1326 0.0088,-14.1838871 c 0,0 -6.585901,1.6691121 -9.545857,4.2790031 z"
+       style="opacity:0.5;fill:#ff0000;fill-opacity:0.50196078;stroke:none"
+       sodipodi:nodetypes="zcccz" />
+    <g
+       id="g4161"
+       transform="matrix(0.88047082,0,0,0.88047082,43.111551,8.4688286)">
+      <path
+         sodipodi:nodetypes="cccccccc"
+         inkscape:connector-curvature="0"
+         id="path4157"
+         d="m -24.060724,15.48514 16.4634304,6.098262 -4.6191624,1.83225 7.0538924,7.098116 -3.8922573,3.880236 -7.0695311,-7.0585 -1.91344,4.670384 z"
+         style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+      <path
+         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+         d="m -21.906223,17.63962 11.306776,4.103633 -3.379194,1.410923 7.411577,7.345093 -2.431021,2.361109 -7.452469,-7.508167 -1.460981,3.098274 z"
+         id="path4159"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccccccc" />
+    </g>
+    <path
+       style="color:#000000;fill:none;stroke:#ff0000;stroke-width:1.39999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:0.50196078;stroke-dasharray:4.19999993, 4.19999993;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       d="m 23.198761,8.7499996 c -0.0625,14.4999994 -0.0625,14.4999994 -0.0625,14.4999994 l -14.5625,0"
+       id="path4034"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     transform="translate(-7.8129058,-7.9934033)"
+     style="display:none"
+     inkscape:label="findregion"
+     id="g4224"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <path
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline"
+       d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z"
+       id="path4195-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <g
+       style="display:inline"
+       id="g7334-3"
+       transform="matrix(0.82051283,0,0,0.82051283,8.888901,-1.5837498)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3290-4"
+         d="m 7.0446086,42.697351 c -5.781968,5.436776 -5.781968,5.436776 -5.781968,5.436776"
+         style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
+      <path
+         transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)"
+         d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z"
+         sodipodi:ry="5.5714288"
+         sodipodi:rx="6"
+         sodipodi:cy="16.857143"
+         sodipodi:cx="18.857143"
+         id="path3286-5"
+         style="fill:none;stroke:#000000;stroke-opacity:1;display:inline"
+         sodipodi:type="arc" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g4193"
+     inkscape:label="showregions"
+     style="display:none"
+     transform="translate(-7.8129058,-7.9934033)"
+     sodipodi:insensitive="true">
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path4026"
+       d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z"
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" />
+  </g>
+  <g
+     transform="translate(-7.8129058,-7.9934033)"
+     style="display:none"
+     inkscape:label="delregion"
+     id="g4203"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path4023"
+       d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z"
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4207"
+       d="M 12.9086,35.04952 C 34.738922,12.950479 34.738922,12.950479 34.738922,12.950479"
+       style="fill:none;stroke:#000000;stroke-width:3.28205132;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g4165"
+     inkscape:label="delregions"
+     style="display:none"
+     transform="translate(-7.8129058,-7.9934033)"
+     sodipodi:insensitive="true">
+    <path
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline"
+       d="m 34.599176,15.650015 -6.51e-4,6.974984 4.574821,-0.0701 c 0,0 0.16775,-3.502856 -2.749349,-6.959775 -2.917099,-3.456919 -1.824821,0.05489 -1.824821,0.05489 z"
+       id="path4018"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccczc" />
+    <path
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline"
+       d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z"
+       id="path4029"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       sodipodi:nodetypes="ccczc"
+       inkscape:connector-curvature="0"
+       id="path4032"
+       d="m 12.973066,32.412483 0.06315,-6.412484 -4.512321,-0.0549 c 0,0 -0.29275,3.065356 2.624349,6.522275 2.917099,3.456919 1.824821,-0.05489 1.824821,-0.05489 z"
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.28205132;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
+       d="M 12.9086,35.04952 C 34.738922,12.950479 34.738922,12.950479 34.738922,12.950479"
+       id="path7472-9"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g4312"
+     inkscape:label="findcoords"
+     style="display:none"
+     transform="translate(-7.8129058,-7.9934033)"
+     sodipodi:insensitive="true">
+    <path
+       style="fill:none;stroke:#ff0000;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.50196078;stroke-dasharray:2.8, 2.8;stroke-dashoffset:0;display:inline"
+       d="m 15.286675,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z"
+       id="path4195-3-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <g
+       transform="matrix(0.82051283,0,0,0.82051283,8.888901,-1.5837498)"
+       id="g4316"
+       style="display:inline">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
+         d="m 7.0446086,42.697351 c -5.781968,5.436776 -5.781968,5.436776 -5.781968,5.436776"
+         id="path4318"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:type="arc"
+         style="fill:none;stroke:#000000;stroke-opacity:1;display:inline"
+         id="path4320"
+         sodipodi:cx="18.857143"
+         sodipodi:cy="16.857143"
+         sodipodi:rx="6"
+         sodipodi:ry="5.5714288"
+         d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z"
+         transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)" />
+    </g>
+  </g>
+  <g
+     transform="translate(-7.8129058,-7.9934033)"
+     style="display:none"
      inkscape:label="annotations-user"
      id="g4602"
      inkscape:groupmode="layer"
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/img/gen_fullscreen_icons.cmd	Fri Nov 16 18:26:55 2012 +0100
@@ -0,0 +1,26 @@
+@echo off
+setlocal
+set SVGFILE=fullscreen3.svg
+set XSLTFILE=gen_fullscreen_icons.xsl
+set SVGDIR=fullscreen\svg_gen
+rem PNG directory relative to SVGDIR
+set PNGDIR=32
+
+rem run XSLT to create separate SVG files (in fullscreen/svg)
+set SAXON=java -jar U:\Programme\Saxon-9.1\saxon9.jar
+echo Running Saxon to create separate SVGs
+mkdir %SVGDIR%
+%SAXON% %SVGFILE% %XSLTFILE%
+
+rem create PNGs from separate SVGs using inkscape
+set INKSCAPE=U:\programme\inkscape\inkscape.exe
+echo Running Inkscape to create PNGs
+cd %SVGDIR%
+mkdir %PNGDIR%
+for %%f in (*.svg) do (
+    echo %%f
+    %INKSCAPE% --file=%%f --export-height=32 --export-png=%PNGDIR%\%%~nf.png
+    )
+
+echo done.
+endlocal
--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Fri Nov 16 16:27:23 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Fri Nov 16 18:26:55 2012 +0100
@@ -280,6 +280,20 @@
         that.overlapsRect = function(rect) {
             return this.intersect(rect) != null;
         };
+        // returns the ratio of height to width
+        that.getProportion = function() {
+            return this.height/this.width;
+        };
+        // shrink/grow rectangle until it has the given proportion
+        that.setProportion = function(ratio, canGrow) {
+            var prop = this.getProportion();
+            if (ratio < prop == canGrow) {
+                this.width = this.height / ratio;
+            } else {
+                this.height = this.width * ratio;
+            }
+            return this;
+        };
         // changes this rectangle's x/y values so it stays inside of rectangle
         // "rect", keeping the proportions
         that.stayInside = function(rect) {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Fri Nov 16 16:27:23 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Fri Nov 16 18:26:55 2012 +0100
@@ -73,27 +73,22 @@
         removeallregions : {
             onclick : "removeAllUserRegions",
             tooltip : "delete all user defined regions",
-            icon : "delallregions.png"
+            icon : "delregions.png"
             },
         regions : {
             onclick : "toggleRegions",
             tooltip : "show or hide regions",
-            icon : "regions.png"
+            icon : "showregions.png"
             },
         findcoords : {
             onclick : "findCoords",
             tooltip : "find a region by entering its relative coordinates",
-            icon : "regions.png"
+            icon : "findcoords.png"
             },
         finddata : {
             onclick : "findData",
             tooltip : "find a region by entering text",
-            icon : "regions.png"
-            },
-        regioninfo : {
-            onclick : "showRegionInfo",
-            tooltip : "show information about user defined regions",
-            icon : "regioninfo.png"
+            icon : "findregion.png"
             }
         };
 
@@ -104,6 +99,8 @@
         'showRegionNumbers' : true,
         // default width for region when only point is given
         'regionWidth' : 0.005,
+        // zoomfactor for displaying larger area around region (for autoZoomOnClick)
+        'regionAutoZoomFactor' : 3,
         // is there region content in the page?
         'processHtmlRegions' : false,
         // region defined by users and in the URL
@@ -112,16 +109,16 @@
         'onClickRegion' : null,
         // callback when new user region is defined
         'onNewRegion' : null,
-        // turn any region into a clickable link to its detail view (DEPRECATED)
-        'autoZoomOnClick' : false,
+        // turn any region into a clickable link to its detail view
+        'autoZoomOnClick' : true,
         // zoom in when displaying the found region
         'autoZoomOnFind' : false,
         // css selector for area/a elements (must also be marked with class "dl-keep")
         'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
         // general buttonset of this plugin
-        'regionSet' : ['regions', 'findcoords', 'finddata', 'lessoptions'],
+        'regionSet' : ['regions', 'finddata', 'findcoords', 'lessoptions'],
         // buttonset for region editing by user
-        'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions', 'regioninfo'],
+        'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions'],
         // url param for regions
         'rg' : null,
         // array with region data
@@ -187,7 +184,7 @@
             selector = 'div.'+CSS+'regionURL';
             var $region = data.$elem.find(selector).last();
             if ($region.length > 0) {
-                $regionDiv.remove();
+                $region.remove();
                 redisplay(data);
                 return;
             }
@@ -214,53 +211,6 @@
             renderRegions(data, 1);
         },
 
-        // show region info in a window
-        showRegionInfo : function (data) {
-            var $elem = data.$elem;
-            var infoSelector = '#'+CSS+'regionInfo';
-            if (fn.isOnScreen(data, infoSelector)) return; // already onscreen
-            var $regions = getRegions(data, 'regionURL');
-            if ($regions.length == 0) return; // no user regions available
-            var html = '\
-                <div id="'+CSS+'regionInfo" class="'+CSS+'keep '+CSS+'regionInfo">\
-                    <table class="'+CSS+'infoheader">\
-                        <tr>\
-                            <td class="'+CSS+'infobutton html">HTML</td>\
-                            <td class="'+CSS+'infobutton svgattr">SVG</td>\
-                            <td class="'+CSS+'infobutton csv">CSV</td>\
-                            <td class="'+CSS+'infobutton digilib">Digilib</td>\
-                            <td class="'+CSS+'infobutton x">X</td>\
-                        </tr>\
-                    </table>\
-                </div>';
-            $info = $(html);
-            $info.appendTo($elem);
-            $info.append(regionInfoHTML(data, $regions));
-            $info.append(regionInfoSVG(data, $regions));
-            $info.append(regionInfoCSV(data, $regions));
-            $info.append(regionInfoDigilib(data, $regions));
-            var bind = function (name) {
-                $info.find('.'+name).on('click.regioninfo', function () {
-                    $info.find('div.'+CSS+'info').hide();
-                    $info.find('div.'+CSS+name).show();
-                    fn.centerOnScreen(data, $info);
-                    return false;
-                    });
-                };
-            bind('html');
-            bind('svgattr');
-            bind('csv');
-            bind('digilib');
-            $info.on('click.regioninfo', function () {
-                fn.withdraw($info);
-                });
-            $info.find('.x').on('click.regioninfo', function () {
-                fn.withdraw($info);
-                });
-            $info.fadeIn();
-            fn.centerOnScreen(data, $info);
-        },
-
         // display region coordinates in a selected edit line (for copying)
         showRegionCoords : function (data, $regionDiv) {
             var $elem = data.$elem;
@@ -400,7 +350,7 @@
             var filterOptions = function (text) {
                 if (!text) {
                     // not text, display all options, select first (empty)
-                    $options.show();
+                    // $options.show();
                     $select.prop("selectedIndex", 0);
                     return;
                     }
@@ -633,52 +583,6 @@
         return sorted.join('');
     };
 
-    // html for later insertion
-    var regionInfoHTML = function (data, $regions) {
-        var $infoDiv = $('<div class="'+CSS+'info '+CSS+'html"/>');
-        $infoDiv.append($('<div/>').text('<map class="'+CSS+'keep '+CSS+'regioncontent">'));
-        $regions.each(function (index, region) {
-            var rect = $(region).data('rect');
-            var coords = packCoords(rect, ',');
-            $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>'));
-            });
-        $infoDiv.append($('<div/>').text('</map>'));
-        return $infoDiv;
-    };
-
-    // SVG-style
-    var regionInfoSVG = function (data, $regions) {
-        var $infoDiv = $('<div class="'+CSS+'info '+CSS+'svgattr"/>');
-        $regions.each(function (index, region) {
-            var rect = $(region).data('rect');
-            var coords = packCoords(rect, ',');
-            $infoDiv.append($('<div/>').text('"' + coords + '"'));
-            });
-        return $infoDiv;
-    };
-
-    // CSV-style
-    var regionInfoCSV = function (data, $regions) {
-        var $infoDiv = $('<div class="'+CSS+'info '+CSS+'csv"/>');
-        $regions.each(function (index, region) {
-            var rect = $(region).data('rect');
-            var coords = packCoords(rect, ',');
-            $infoDiv.append($('<div/>').text(index+1 + ": " + coords));
-            });
-        return $infoDiv;
-    };
-
-    // digilib-style (h,w@x,y)
-    var regionInfoDigilib = function (data, $regions) {
-        var $infoDiv = $('<div class="'+CSS+'info '+CSS+'digilib"/>');
-        $regions.each(function (index, region) {
-            var rect = $(region).data('rect');
-            var coords = packCoords(rect, ',');
-            $infoDiv.append($('<div/>').text(coords));
-            });
-        return $infoDiv;
-    };
-
     // show a region on top of the scaler image 
     var renderRegion = function (data, $regionDiv, anim) {
         if (!data.imgTrafo) return;
@@ -748,9 +652,19 @@
         console.debug('pack regions:', rg);
     };
 
-    // zoom to the region coordinates
-    var zoomToRegion = function (data, rect) {
-        digilib.actions.zoomArea(data, rect);
+    // zoom in, displaying the region in the middle of the screen
+    var zoomToRegion = function (data, $regionDiv) {
+        var settings = data.settings;
+        var rect = $regionDiv.data('rect');
+        var za = rect.copy();
+        var factor = settings.regionAutoZoomFactor;
+        za.width  *= factor;
+        za.height *= factor;
+        // var screen = fn.getFullscreenRect(data);
+        za.setProportion(1, true); // avoid extreme zoomArea proportions
+        za.setCenter(rect.getCenter()).stayInside(FULL_AREA);
+        fn.setZoomArea(data, za);
+        fn.redisplay(data);
     };
 
     // reload display after a region has been added or removed
@@ -868,7 +782,7 @@
         $data.on('update', handleUpdate);
         $data.on('newRegion', handleNewRegion);
         $data.on('regionClick', handleRegionClick);
-        // default: autoZoom to region, when clicked - DEPRECATED
+        // default: autoZoom to region, when clicked
         if (settings.autoZoomOnClick && settings.onClickRegion == null) {
             settings.onClickRegion = zoomToRegion;
         }
--- a/webapp/src/main/webapp/jquery/test-findregions.html	Fri Nov 16 16:27:23 2012 +0100
+++ b/webapp/src/main/webapp/jquery/test-findregions.html	Fri Nov 16 18:26:55 2012 +0100
@@ -33,13 +33,15 @@
         <script type="text/javascript">
             $(document).ready(function(){
                 var opts = {
-                    digilibBaseUrl : 'http://img.biblhertz.it/digilib',
                     interactionMode : 'fullscreen',
+                    previewImgWidth : 1200,
+                    previewImgHeight : 800,
+                    maxBgSize : 30000,
                     editRegions : true,
                     processHtmlRegions : true,
                     showRegionNumbers : true,
+
                     fn : 'piantediroma/00030-1577_Duperac_Stefano_BL_Map_Room_Maps_23805',
-                    onClickRegion : 'showRegionCoords',
                     onNewRegion : 'showRegionCoords',
                     regionSortString : function(s) {
                         var a = s.match(/[A-Z]\w\w.*$/i);