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.element = this.element || document.getElementById( this.id );
this.canvas = $.makeNeutralElement( "div" ); this.canvas = $.makeNeutralElement( "div" );
this.keyboardCommandArea = $.makeNeutralElement( "textarea" ); this.keyboardCommandArea = $.makeNeutralElement( "textarea" );
this.overlaysContainer = $.makeNeutralElement( "div" );
this.canvas.className = "openseadragon-canvas"; this.canvas.className = "openseadragon-canvas";
(function( style ){ (function( style ){
@ -268,7 +267,6 @@ $.Viewer = function( options ) {
this.container.insertBefore( this.canvas, this.container.firstChild ); this.container.insertBefore( this.canvas, this.container.firstChild );
this.container.insertBefore( this.keyboardCommandArea, this.container.firstChild ); this.container.insertBefore( this.keyboardCommandArea, this.container.firstChild );
this.element.appendChild( this.container ); this.element.appendChild( this.container );
this.canvas.appendChild( this.overlaysContainer );
//Used for toggling between fullscreen and default container size //Used for toggling between fullscreen and default container size
//TODO: these can be closure private and shared across Viewer //TODO: these can be closure private and shared across Viewer
@ -454,6 +452,10 @@ $.Viewer = function( options ) {
debugGridColor: this.debugGridColor 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 // Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons
if (!this.drawer.canRotate()) { if (!this.drawer.canRotate()) {
// Disable/remove the rotate left/right buttons since they aren't supported // 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); _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) { if (options.tileSource.overlays) {
for (var i = 0; i < options.tileSource.overlays.length; i++) { for (var i = 0; i < options.tileSource.overlays.length; i++) {
_this.addOverlay(options.tileSource.overlays[i]); _this.addOverlay(options.tileSource.overlays[i]);

View File

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

View File

@ -7,7 +7,7 @@
var self = this; var self = this;
var testInitialOpen = true; var testInitialOpen = true;
var testOverlays = false; var testOverlays = true;
var testMargins = false; var testMargins = false;
var testNavigator = false; var testNavigator = false;
var margins; var margins;
@ -54,7 +54,7 @@
config.overlays = [ config.overlays = [
{ {
id: "overlay1", id: "overlay1",
x: 0, x: 2,
y: 0, y: 0,
width: 0.25, width: 0.25,
height: 0.25 height: 0.25
@ -92,7 +92,14 @@
if (testInitialOpen) { if (testInitialOpen) {
this.viewer.addHandler( "open", function() { 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);
}); });
} }