diff --git a/src/openseadragon.js b/src/openseadragon.js index f035c436..71fca779 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -918,12 +918,11 @@ function OpenSeadragon( options ){ }; /** - * A ratio comparing the device screen's pixel density to the canvas's backing store pixel density, - * clamped to a minimum of 1. Defaults to 1 if canvas isn't supported by the browser. - * @member {Number} pixelDensityRatio - * @memberof OpenSeadragon + * @returns {Number} Return a ratio comparing the device screen's pixel + * densityto the canvas's backing store pixel density, clamped to a + * minimum of 1. Defaults to 1 if canvas isn't supported by the browser. */ - $.pixelDensityRatio = (function () { + $.getCurrentPixelDensityRatio = function() { if ( $.supportsCanvas ) { var context = document.createElement('canvas').getContext('2d'); var devicePixelRatio = window.devicePixelRatio || 1; @@ -936,7 +935,13 @@ function OpenSeadragon( options ){ } else { return 1; } - }()); + }; + + /** + * @member {Number} pixelDensityRatio + * @memberof OpenSeadragon + */ + $.pixelDensityRatio = $.getCurrentPixelDensityRatio(); }( OpenSeadragon )); diff --git a/src/viewer.js b/src/viewer.js index 03b018bc..aba013d5 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -401,28 +401,6 @@ $.Viewer = function( options ) { debugGridColor: this.debugGridColor }); - function resize() { - console.log("Windows is resized..."); - $.pixelDensityRatio = (function () { - if ( $.supportsCanvas ) { - var context = document.createElement('canvas').getContext('2d'); - var devicePixelRatio = window.devicePixelRatio || 1; - var backingStoreRatio = context.webkitBackingStorePixelRatio || - context.mozBackingStorePixelRatio || - context.msBackingStorePixelRatio || - context.oBackingStorePixelRatio || - context.backingStorePixelRatio || 1; - return Math.max(devicePixelRatio, 1) / backingStoreRatio; - } else { - return 1; - } - }()); - console.log("$.pixelDensityRatio", $.pixelDensityRatio); - _this.world.resetItems(); - _this.forceRedraw(); - } - $.addEvent( window, 'resize', resize ); - // Overlay container this.overlaysContainer = $.makeNeutralElement( "div" ); this.canvas.appendChild( this.overlaysContainer ); @@ -442,6 +420,9 @@ $.Viewer = function( options ) { } } + // Add updatePixelDensityRatio to resize event + $.addEvent( window, 'resize', this.updatePixelDensityRatio.bind(this) ); + //Instantiate a navigator if configured if ( this.showNavigator){ this.navigator = new $.Navigator({ @@ -1620,6 +1601,21 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return this.world.removeItem(drawer); }, + + /** + * Update pixel density ration, clears all tiles and triggers updates for + * all items. + */ + updatePixelDensityRatio: function() { + var previusPixelDensityRatio = $.pixelDensityRatio; + var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); + if (previusPixelDensityRatio !== currentPixelDensityRatio) { + $.pixelDensityRatio = currentPixelDensityRatio; + this.world.resetItems(); + this.forceRedraw(); + } + }, + /** * Force the viewer to redraw its contents. * @returns {OpenSeadragon.Viewer} Chainable.