Fixed: overlays were appearing under the canvas

This commit is contained in:
Ian Gilman 2014-11-20 14:50:07 -08:00
parent 632f09caa2
commit 78f65152bc
3 changed files with 16 additions and 10 deletions

View File

@ -229,7 +229,6 @@ $.Viewer = function( options ) {
this.element = this.element || document.getElementById( this.id );
this.canvas = $.makeNeutralElement( "div" );
this.keyboardCommandArea = $.makeNeutralElement( "textarea" );
this.overlaysContainer = $.makeNeutralElement( "div" );
this.canvas.className = "openseadragon-canvas";
(function( style ){
@ -268,7 +267,6 @@ $.Viewer = function( options ) {
this.container.insertBefore( this.canvas, this.container.firstChild );
this.container.insertBefore( this.keyboardCommandArea, this.container.firstChild );
this.element.appendChild( this.container );
this.canvas.appendChild( this.overlaysContainer );
//Used for toggling between fullscreen and default container size
//TODO: these can be closure private and shared across Viewer
@ -454,6 +452,10 @@ $.Viewer = function( options ) {
debugGridColor: this.debugGridColor
});
// Overlay container
this.overlaysContainer = $.makeNeutralElement( "div" );
this.canvas.appendChild( this.overlaysContainer );
// Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons
if (!this.drawer.canRotate()) {
// Disable/remove the rotate left/right buttons since they aren't supported
@ -689,7 +691,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
_this.addTiledImage(options);
// For backwards compatibility. TODO: deprecate.
// TODO: now that options has other things besides tileSource, the overlays
// should probably be at the options level, not the tileSource level.
if (options.tileSource.overlays) {
for (var i = 0; i < options.tileSource.overlays.length; i++) {
_this.addOverlay(options.tileSource.overlays[i]);

View File

@ -19,10 +19,6 @@
background-color: rgba(255, 0, 0, 0.3);
}
#overlay1 {
z-index: 10;
}
</style>
</head>
<body>

View File

@ -7,7 +7,7 @@
var self = this;
var testInitialOpen = true;
var testOverlays = false;
var testOverlays = true;
var testMargins = false;
var testNavigator = false;
var margins;
@ -54,7 +54,7 @@
config.overlays = [
{
id: "overlay1",
x: 0,
x: 2,
y: 0,
width: 0.25,
height: 0.25
@ -92,7 +92,14 @@
if (testInitialOpen) {
this.viewer.addHandler( "open", function() {
// console.log(self.viewer.viewport.contentSize);
// setTimeout(function() {
// // console.log(self.viewer.viewport.contentSize);
// var $el = $('#overlay1').click(function() {
// console.log('foo');
// });
// console.log($el.length, $el.css('background'));
// }, 1000);
});
}