--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Oct 24 08:49:38 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Fri Oct 28 15:54:43 2016 +0200
@@ -1280,7 +1280,9 @@
             imgRect.getSize().adjustDiv($scaler);
             // show image in case it was hidden (for example in zoomDrag)
             $img.css('visibility', 'visible');
-            $scaler.css({'opacity' : '1'});
+            $img.fadeIn();
+            // $scaler.css({'opacity' : '1'});
+            $scaler.fadeTo('slow', 1);
             data.hasPreviewBg = false;
             // update display (render marks, etc.)
             updateDisplay(data);
@@ -1410,18 +1412,14 @@
      */
     var setPreviewBg = function(data, newZoomArea) {
         var $scaler = data.$scaler;
-        var $img = data.$img;
         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-image' : 'url(' + data.$img.attr('src') + ')',
                 'background-repeat' : 'no-repeat',
                 'background-position' : '0px 0px',
-                'opacity' : '0.7',
                 'cursor' : 'move'
         };
         if (newZoomArea != null) {
@@ -1463,6 +1461,7 @@
                 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';
             }
+            // console.debug('setPreviewBg', scalerCss);
         }
         $scaler.css(scalerCss);
         data.hasPreviewBg = true;
@@ -1489,6 +1488,10 @@
             $elem.find('.'+data.settings.cssPrefix+'overlay').hide(); // hide all overlays (marks/regions)
             startPos = geom.position(evt);
             delta = null;
+            // hide the scaler img, show background of div instead
+            $img.css('visibility', 'hidden');
+            $img.hide();
+            $scaler.fadeTo('slow', 0.7);
             // set low res background immediately on mousedown
             setPreviewBg(data);
             $document.on("mousemove.dlZoomDrag", dragMove);
@@ -1518,7 +1521,9 @@
             if (delta == null || delta.distance() < 2) {
                 // no movement
                 $img.css('visibility', 'visible');
-                $scaler.css({'opacity' : '1', 'background-image' : 'none'});
+                $img.fadeIn();
+                $scaler.fadeTo('slow', 1);
+                // $scaler.css({'opacity' : '1', 'background-image' : 'none'});
                 data.hasPreviewBg = false;
                 // unhide marks etc.
                 updateDisplay(data);

--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Mon Oct 24 08:49:38 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Fri Oct 28 15:54:43 2016 +0200
@@ -66,7 +66,9 @@
         // default SVG fill
         'defaultFill' : 'none',
         // grab handle size
-        'editHandleSize' : 10
+        'editHandleSize' : 10,
+        // handle type (square, diamond, circle, cross)
+        'editHandleType' : 'square'
     };
 
     var actions = {
@@ -216,7 +218,8 @@
             svgAttr: svgAttr,
             createScreenCoords: createScreenCoords,
             editShapeBegin: addEditHandles,
-            editShapeEnd: removeEditHandles
+            editShapeEnd: removeEditHandles,
+            redrawShape: redrawShape
             });
     };
 
@@ -556,26 +559,26 @@
     var addEditHandles = function (data, shape, layer) {
         var $svg = $(layer.svgElem);
         var trafo = data.imgTrafo;
-        // type of handle can be stated in layer
-        var type = layer.handleType;
-        var newHandle = data.handleFactory[type] || data.handleFactory['square'];
+        // type of handle can be stated in layer or in settings
+        var type = layer.handleType || data.settings.editHandleType;
         var handles = [];
-        var createHandle = function (i, item) {
+        var createHandle = data.handleFactory[type];
+        var insertHandle = function (i, item) {
             var p = trafo.transform(geom.position(item));
-            var $handle = newHandle();
+            var $handle = createHandle();
+            $handle.attr('vertex', i);
             $handle.moveTo(p);
             handles.push($handle);
             $svg.append($handle);
             return $handle;
             };
-        var coords = shape.geometry.coordinates;
-        $.each(coords, createHandle);
-        // vertexElems must be defined before calling getVertexDragHandler()
+        $.each(shape.geometry.coordinates, insertHandle);
         shape.$vertexElems = handles;
+        // not needed?
         var done = function (data, shape, evt) {
-            unrenderShape(data, shape);
-            renderShape(data, shape, layer);
-            }
+            redrawShape(data, shape, layer);
+            };
+        // vertexElems must be defined before calling getVertexDragHandler()
         var attachEvent = function (i, item) {
             item.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, i, done));
             };
@@ -635,7 +638,7 @@
         }
         return geom.rectangle(xmin, ymin, xmax-xmin, ymax-ymin);
     };
-    
+
     /**
      * render a shape on screen.
      * 
@@ -659,12 +662,15 @@
         }
         // create the SVG
         var $elem = data.shapeFactory[shapeType].svg(shape);
+        // let shape know where it is rendered
         shape.$elem = $elem;
+        shape.layer = layer;
         // place the SVG on screen
         createScreenCoords(data, shape);
         $elem.place();
         // render the SVG
         $(layer.svgElem).append($elem);
+        // add adjustment handles
         if (shape.properties.editable) {
             addEditHandles(data, shape, layer);
         }
@@ -689,6 +695,20 @@
     };
 
     /**
+     * re-render a shape.
+     * 
+     * Removes the SVG element from layer and renders the (updated) shape again.
+     * 
+     * @param data
+     * @param shape
+     * @param layer
+     */
+    var redrawShape = function (data, shape, layer) {
+        unrenderShape(data, shape);
+        renderShape(data, shape, layer || shape.layer);
+    };
+
+    /**
      * return a vertexDragHandler function.
      * 
      * @param data
@@ -859,9 +879,8 @@
                             rerender = true;
 	            		}
 	            		if (rerender) {
-	            		    unrenderShape(data, shape);
 	            		    shape.properties.vtx = vtx;
-	            		    renderShape(data, shape, layer);
+	            		    redrawShape(data, shape, layer);
 	            		}
             		} else {
             			console.error("unknown event type!");