diff --git a/src/navigator.js b/src/navigator.js index 2cadc03f..5f1767cc 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -191,7 +191,10 @@ $.Navigator = function( options ){ options.controlOptions ); - if ( options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE && options.controlOptions.anchor != $.ControlAnchor.NONE ) { + this._resizeWithViewer = options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE && + options.controlOptions.anchor != $.ControlAnchor.NONE; + + if ( this._resizeWithViewer ) { if ( options.width && options.height ) { this.element.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height; this.element.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width; @@ -307,18 +310,24 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* bottomright; viewerSize = $.getElementSize( this.viewer.element ); - if ( !viewerSize.equals( this.oldViewerSize ) ) { + if ( this._resizeWithViewer && !viewerSize.equals( this.oldViewerSize ) ) { this.oldViewerSize = viewerSize; - if ( this.maintainSizeRatio ) { + + if ( this.maintainSizeRatio || !this.elementArea) { newWidth = viewerSize.x * this.sizeRatio; newHeight = viewerSize.y * this.sizeRatio; - } - else { + } else { newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y)); newHeight = this.elementArea / newWidth; } + this.element.style.width = Math.round( newWidth ) + 'px'; this.element.style.height = Math.round( newHeight ) + 'px'; + + if (!this.elementArea) { + this.elementArea = newWidth * newHeight; + } + this.updateSize(); } diff --git a/test/demo/collections/index.html b/test/demo/collections/index.html index b6aca4a1..c9fd0b3c 100644 --- a/test/demo/collections/index.html +++ b/test/demo/collections/index.html @@ -19,6 +19,10 @@ 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 e9cde3d3..927b777f 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -40,20 +40,30 @@ } if (testOverlays) { - config.overlays = [ { - px: 13, - py: 120, - width: 124, - height: 132, - id: "overlay" - }, { - px: 400, - py: 500, - width: 400, - height: 400, - id: "fixed-overlay", - placement: "TOP_LEFT" - } ]; + config.overlays = [ + { + id: "overlay1", + x: 0, + y: 0, + width: 0.25, + height: 0.25 + }, + { + px: 13, + py: 120, + width: 124, + height: 132, + id: "overlay" + }, + { + px: 400, + py: 500, + width: 400, + height: 400, + id: "fixed-overlay", + placement: "TOP_LEFT" + } + ]; } if (testMargins) { @@ -86,7 +96,7 @@ } // this.crossTest3(); - this.gridTest(); + this.basicTest(); }, // ----------