From 78f65152bcb2f4fe630799d6f650839ac98d64fc Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Thu, 20 Nov 2014 14:50:07 -0800 Subject: [PATCH] Fixed: overlays were appearing under the canvas --- src/viewer.js | 9 ++++++--- test/demo/collections/index.html | 4 ---- test/demo/collections/main.js | 13 ++++++++++--- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index eeee5fbf..b7879013 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -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]); diff --git a/test/demo/collections/index.html b/test/demo/collections/index.html index c9fd0b3c..b6aca4a1 100644 --- a/test/demo/collections/index.html +++ b/test/demo/collections/index.html @@ -19,10 +19,6 @@ background-color: rgba(255, 0, 0, 0.3); } - #overlay1 { - z-index: 10; - } - diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index a9f02b8c..155634e0 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -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); }); }