fix: remove the useTransform/SVG stuff and move back to a simple onDraw callback only so people can handle their own custom drawing and sizing

src/drawer.js

@@ -144,7 +144,7 @@ $.Drawer = function( options ) {
     for( i = 0; i < this.overlays.length; i++ ){
         if( $.isPlainObject( this.overlays[ i ] ) ){
 
-            this.overlays[ i ] = addOverlayFromConfiguration( this, this.overlays[ i ], this.source.dimensions);
+            this.overlays[ i ] = addOverlayFromConfiguration( this, this.overlays[ i ]);
 
         } else if ( $.isFunction( this.overlays[ i ] ) ){
             //TODO
@@ -161,20 +161,31 @@ $.Drawer.prototype = {
      * highlighting words or areas of interest on an image or other zoomable
      * interface.
      * @method
-     * @param {Element|String} element - A reference to an element or an id for
+     * @param {Element|String|Object} element - A reference to an element or an id for
-     *      the element which will overlayed.
+     *      the element which will overlayed. Or an Object specifying the configuration for the overlay
      * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
      *      rectangle which will be overlayed.
      * @param {OpenSeadragon.OverlayPlacement} placement - The position of the
      *      viewport which the location coordinates will be treated as relative
      *      to.
-     * @param {function} onDraw - A callback that is called when the overlay 
+     * @param {function} onDraw - If supplied the callback is called when the overlay 
-     *      needs to be drawn. It is passed position, size and element.
+     *      needs to be drawn. It it the responsibility of the callback to do any drawing/positioning.
-     * @param {boolean} useTransform - Overlay will be scaled and moved using 
+     *      It is passed position, size and element.
-     *      the SVG transform argument. Overlay should be a SVG g element.
      */
-    addOverlay: function( element, location, placement, onDraw, useTransform ) {
+    addOverlay: function( element, location, placement, onDraw ) {
-        element = $.getElement( element );
+        var options;
+        if( $.isPlainObject( element ) ){
+            options = element;
+        } else {
+            options = {
+                element: element,
+                location: location,
+                placement: placement,
+                onDraw: onDraw
+            };
+        }
+
+        element = $.getElement(options.element);
 
         if ( getOverlayIndex( this.overlays, element ) >= 0 ) {
             // they're trying to add a duplicate overlay
@@ -183,19 +194,17 @@ $.Drawer.prototype = {
 
         this.overlays.push( new $.Overlay({
             element: element,
-            location: location,
+            location: options.location,
-            placement: placement,
+            placement: options.placement,
-            onDraw: onDraw,
+            onDraw: onDraw
-            useTransform: useTransform,
-            imageFullSize: this.source.dimensions
         }) );
         this.updateAgain = true;
         if( this.viewer ){
             this.viewer.raiseEvent( 'add-overlay', {
                 viewer: this.viewer,
                 element: element,
-                location: location,
+                location: options.location,
-                placement: placement
+                placement: options.placement
             });
         }
         return this;
@@ -401,7 +410,7 @@ $.Drawer.prototype = {
  * @private
  * @inner
  */
- function addOverlayFromConfiguration( drawer, overlay, dimensions ){
+ function addOverlayFromConfiguration( drawer, overlay ){
 
     var element  = null,
         rect = ( overlay.height && overlay.width ) ? new $.Rect(
@@ -440,17 +449,13 @@ $.Drawer.prototype = {
             element: element,
             location: drawer.viewport.pointFromPixel(rect),
             placement: $.OverlayPlacement[overlay.placement.toUpperCase()],
-            onDraw: overlay.onDraw,
+            onDraw: overlay.onDraw
-            useTransform: overlay.useTransform,
-            imageFullSize: dimensions
         });
     }else{
         return new $.Overlay({
             element: element,
             location: rect,
-            onDraw: overlay.onDraw,
+            onDraw: overlay.onDraw
-            useTransform: overlay.useTransform,
-            imageFullSize: dimensions
         });
     }
 

src/overlay.js

@@ -91,7 +91,6 @@
             options.placement :
             $.OverlayPlacement.TOP_LEFT;
         this.onDraw = options.onDraw;
-        this.useTransform = options.useTransform;
         this.imageFullSize = options.imageFullSize;
     };
 
@@ -196,16 +195,13 @@
 
             this.adjust( position, size );
 
-            if(this.useTransform){
+            position = position.apply( Math.floor );
-                var scale = Math.min(this.size.x / this.imageFullSize.x, this.size.y / this.imageFullSize.y);
+            size     = size.apply( Math.ceil );
-
-                var attrValue = 'translate(' + position.x + ', ' + position.y + ') scale(' + scale + ')';
-                // we expect the first element to be the g element of the SVG element that we can transform
-                element.firstElementChild.setAttribute('transform', attrValue);
-            }else{
-                position = position.apply( Math.floor );
-                size     = size.apply( Math.ceil );
 
+            // call the onDraw callback if there is one to allow them to dping 
+            if (this.onDraw) {
+                this.onDraw(this.position, this.size, element);
+            } else {
                 style.left     = position.x + "px";
                 style.top      = position.y + "px";
                 style.position = "absolute";
@@ -216,11 +212,6 @@
                     style.height = size.y + "px";
                 }
             }
-
-            // call the onDraw callback if there is one to allow them to dping 
-            if (this.onDraw) {
-                this.onDraw(this.position, this.size, element);
-            }
         },
 
         /**