mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 13:16:10 +03:00
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:
parent
0a8d11875e
commit
4239bb7adc
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user