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

This commit is contained in:
Luke Murray 2013-07-31 17:01:48 +10:00
parent 0a8d11875e
commit 4239bb7adc
2 changed files with 34 additions and 38 deletions

View File

@ -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
* the element which will overlayed.
* @param {Element|String|Object} element - A reference to an element or an id for
* 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
* needs to be drawn. It is passed position, size and element.
* @param {boolean} useTransform - Overlay will be scaled and moved using
* the SVG transform argument. Overlay should be a SVG g element.
* @param {function} onDraw - If supplied the callback is called when the overlay
* needs to be drawn. It it the responsibility of the callback to do any drawing/positioning.
* It is passed position, size and element.
*/
addOverlay: function( element, location, placement, onDraw, useTransform ) {
element = $.getElement( element );
addOverlay: function( element, location, placement, onDraw ) {
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,
placement: placement,
onDraw: onDraw,
useTransform: useTransform,
imageFullSize: this.source.dimensions
location: options.location,
placement: options.placement,
onDraw: onDraw
}) );
this.updateAgain = true;
if( this.viewer ){
this.viewer.raiseEvent( 'add-overlay', {
viewer: this.viewer,
element: element,
location: location,
placement: placement
location: options.location,
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,
useTransform: overlay.useTransform,
imageFullSize: dimensions
onDraw: overlay.onDraw
});
}else{
return new $.Overlay({
element: element,
location: rect,
onDraw: overlay.onDraw,
useTransform: overlay.useTransform,
imageFullSize: dimensions
onDraw: overlay.onDraw
});
}

View File

@ -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){
var scale = Math.min(this.size.x / this.imageFullSize.x, this.size.y / this.imageFullSize.y);
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 );
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);
}
},
/**