From 39811d9300d9dc91a66d4b2b8645fd1cd315c2e0 Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 4 Feb 2021 12:24:01 +0100 Subject: [PATCH 01/11] fix: draw the level based on pixel density ratio --- src/tiledimage.js | 4 ++-- src/viewer.js | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 74ffacef..ccc51601 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1018,7 +1018,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag ); var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(0), true).x * - this._scaleSpring.current.value; + this._scaleSpring.current.value * $.pixelDensityRatio; var highestLevel = Math.min( Math.abs(this.source.maxLevel), Math.abs(Math.floor( @@ -1082,7 +1082,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag var currentRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), true - ).x * this._scaleSpring.current.value; + ).x * this._scaleSpring.current.value * $.pixelDensityRatio; if (level === lowestLevel || (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio)) { diff --git a/src/viewer.js b/src/viewer.js index b5b24318..ff958e06 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -401,6 +401,13 @@ $.Viewer = function( options ) { debugGridColor: this.debugGridColor }); + function resize() { + console.log("Windows is resized..."); + _this.world.resetItems(); + _this.forceRedraw(); + } + $.addEvent( window, 'resize', resize ); + // Overlay container this.overlaysContainer = $.makeNeutralElement( "div" ); this.canvas.appendChild( this.overlaysContainer ); From c410b82e65ede9a733927b7c387069010182cebe Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 4 Feb 2021 13:39:26 +0100 Subject: [PATCH 02/11] fix: refresh $.pixelDensityRatio --- src/viewer.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/viewer.js b/src/viewer.js index ff958e06..03b018bc 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -403,6 +403,21 @@ $.Viewer = function( options ) { 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(); } From eb113662e86465f08b10bf2dbb37b5cd1cd7ed4f Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 11:48:08 +0100 Subject: [PATCH 03/11] refactor: cleanup code --- src/openseadragon.js | 17 +++++++++++------ src/viewer.js | 40 ++++++++++++++++++---------------------- 2 files changed, 29 insertions(+), 28 deletions(-) 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. From e7497272facc0c37bd3c73a9549399054d55182b Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 12:32:13 +0100 Subject: [PATCH 04/11] fix: comment --- src/openseadragon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 71fca779..1a6eaa7a 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -919,7 +919,7 @@ function OpenSeadragon( options ){ /** * @returns {Number} Return a ratio comparing the device screen's pixel - * densityto the canvas's backing store pixel density, clamped to a + * 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. */ $.getCurrentPixelDensityRatio = function() { From 4a51a4e47cf540a0b8124fcf9e1b73f56042c3bd Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 12:39:10 +0100 Subject: [PATCH 05/11] refactor: removed empty line --- src/viewer.js | 1 - test/demo/iiif-tiled-sf1.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index aba013d5..397b4257 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1601,7 +1601,6 @@ $.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. diff --git a/test/demo/iiif-tiled-sf1.html b/test/demo/iiif-tiled-sf1.html index d1931e44..b73a05cc 100644 --- a/test/demo/iiif-tiled-sf1.html +++ b/test/demo/iiif-tiled-sf1.html @@ -25,7 +25,7 @@ // debugMode: true, id: "contentDiv", prefixUrl: "../../build/openseadragon/images/", - tileSources: "../data/iiif_2_0_tiled_sf1/info.json", + tileSources: "https://www.nb.no/services/image/resolver/URN:NBN:no-nb_digibok_2017060708028_0010/info.json", showNavigator: true }); From 38435faade95fa2301873380f575e11560b4844f Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 12:39:58 +0100 Subject: [PATCH 06/11] revert: url --- test/demo/iiif-tiled-sf1.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/demo/iiif-tiled-sf1.html b/test/demo/iiif-tiled-sf1.html index b73a05cc..d1931e44 100644 --- a/test/demo/iiif-tiled-sf1.html +++ b/test/demo/iiif-tiled-sf1.html @@ -25,7 +25,7 @@ // debugMode: true, id: "contentDiv", prefixUrl: "../../build/openseadragon/images/", - tileSources: "https://www.nb.no/services/image/resolver/URN:NBN:no-nb_digibok_2017060708028_0010/info.json", + tileSources: "../data/iiif_2_0_tiled_sf1/info.json", showNavigator: true }); From 7ab493d18bab0322b2599338af0d83f5043b426e Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 25 Mar 2021 14:41:11 +0100 Subject: [PATCH 07/11] fix: made updatePixelDensityRatio private Prefixed it with a underscore and added @private annotation --- src/viewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index d6bf83f3..1dc39124 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -427,7 +427,7 @@ $.Viewer = function( options ) { } // Add updatePixelDensityRatio to resize event - $.addEvent( window, 'resize', this.updatePixelDensityRatio.bind(this) ); + $.addEvent( window, 'resize', this._updatePixelDensityRatio.bind(this) ); //Instantiate a navigator if configured if ( this.showNavigator){ @@ -1614,8 +1614,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, /** * Update pixel density ration, clears all tiles and triggers updates for * all items. + * @private */ - updatePixelDensityRatio: function() { + _updatePixelDensityRatio: function() { var previusPixelDensityRatio = $.pixelDensityRatio; var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); if (previusPixelDensityRatio !== currentPixelDensityRatio) { From 99f87c0bc78bfbb3e775f5fe5fbdf5c80db7d146 Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 25 Mar 2021 14:54:42 +0100 Subject: [PATCH 08/11] docs: fixed typo and corrected the comment --- src/viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 1dc39124..98f8e484 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1612,8 +1612,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, }, /** - * Update pixel density ration, clears all tiles and triggers updates for - * all items. + * Update pixel density ratio, clears all tiles and triggers updates for + * all items if the ratio has changed. * @private */ _updatePixelDensityRatio: function() { From f0cf90df76693bc6f9ff039d5cfa9068ead60ddb Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 26 Mar 2021 09:43:30 +0100 Subject: [PATCH 09/11] fix: removes resize event on destroy --- src/viewer.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 98f8e484..f17621d6 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -220,6 +220,7 @@ $.Viewer = function( options ) { this._updateRequestId = null; this._loadQueue = []; this.currentOverlays = []; + this._updatePixelDensityRatioBind = null; this._lastScrollTime = $.now(); // variable used to help normalize the scroll event speed of different devices @@ -426,8 +427,7 @@ $.Viewer = function( options ) { } } - // Add updatePixelDensityRatio to resize event - $.addEvent( window, 'resize', this._updatePixelDensityRatio.bind(this) ); + this._addUpdatePixelDensityRatioEvent(); //Instantiate a navigator if configured if ( this.showNavigator){ @@ -751,6 +751,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } + this._removeUpdatePixelDensityRatioEvent(); + this.close(); this.clearOverlays(); @@ -2284,6 +2286,23 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, } else { $.console.warn('Attempting to display a reference strip while "sequenceMode" is off.'); } + }, + + /** + * Adds _updatePixelDensityRatio to the window resize event. + * @private + */ + _addUpdatePixelDensityRatioEvent: function() { + this._updatePixelDensityRatioBind = this._updatePixelDensityRatio.bind(this); + $.addEvent( window, 'resize', this._updatePixelDensityRatioBind ); + }, + + /** + * Removes _updatePixelDensityRatio from the window resize event. + * @private + */ + _removeUpdatePixelDensityRatioEvent: function() { + $.removeEvent( window, 'resize', this._updatePixelDensityRatioBind ); } }); From 47802c0bd75e45493e60d1778060d2607f5f1148 Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 26 Mar 2021 12:08:50 +0100 Subject: [PATCH 10/11] refactor: use pixelDensityRatio in getPixelRatio() --- src/tiledimage.js | 4 ++-- src/tilesource.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index ccc51601..74ffacef 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1018,7 +1018,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag ); var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(0), true).x * - this._scaleSpring.current.value * $.pixelDensityRatio; + this._scaleSpring.current.value; var highestLevel = Math.min( Math.abs(this.source.maxLevel), Math.abs(Math.floor( @@ -1082,7 +1082,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag var currentRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), true - ).x * this._scaleSpring.current.value * $.pixelDensityRatio; + ).x * this._scaleSpring.current.value; if (level === lowestLevel || (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio)) { diff --git a/src/tilesource.js b/src/tilesource.js index fcf2be82..aab7f134 100644 --- a/src/tilesource.js +++ b/src/tilesource.js @@ -313,8 +313,8 @@ $.TileSource.prototype = { */ getPixelRatio: function( level ) { var imageSizeScaled = this.dimensions.times( this.getLevelScale( level ) ), - rx = 1.0 / imageSizeScaled.x, - ry = 1.0 / imageSizeScaled.y; + rx = 1.0 / imageSizeScaled.x * $.pixelDensityRatio, + ry = 1.0 / imageSizeScaled.y * $.pixelDensityRatio; return new $.Point(rx, ry); }, From 3fcd4aeee3da9371e1bc9866ccb2d62db811e29c Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 26 Mar 2021 12:38:58 +0100 Subject: [PATCH 11/11] refactor: moved methods that belongs together closer --- src/viewer.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index f17621d6..612c753a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1613,21 +1613,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return this.world.removeItem(drawer); }, - /** - * Update pixel density ratio, clears all tiles and triggers updates for - * all items if the ratio has changed. - * @private - */ - _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. @@ -2303,6 +2288,21 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, */ _removeUpdatePixelDensityRatioEvent: function() { $.removeEvent( window, 'resize', this._updatePixelDensityRatioBind ); + }, + + /** + * Update pixel density ratio, clears all tiles and triggers updates for + * all items if the ratio has changed. + * @private + */ + _updatePixelDensityRatio: function() { + var previusPixelDensityRatio = $.pixelDensityRatio; + var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); + if (previusPixelDensityRatio !== currentPixelDensityRatio) { + $.pixelDensityRatio = currentPixelDensityRatio; + this.world.resetItems(); + this.forceRedraw(); + } } });