From b17b9c6f034166fd02d9472ceaf97edc0905d519 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 23 Feb 2016 13:49:11 -0500
Subject: [PATCH 01/78] Fix edge smoothing with png tiles. Fix #854
---
src/tile.js | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/src/tile.js b/src/tile.js
index 9abb14b6..94f58cc2 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -280,6 +280,17 @@ $.Tile.prototype = {
context.globalAlpha = this.opacity;
+ if (typeof scale === 'number' && scale !== 1) {
+ // draw tile at a different scale
+ position = position.times(scale);
+ size = size.times(scale);
+ }
+
+ if (translate instanceof $.Point) {
+ // shift tile position slightly
+ position = position.plus(translate);
+ }
+
//if we are supposed to be rendering fully opaque rectangle,
//ie its done fading or fading is turned off, and if we are drawing
//an image with an alpha channel, then the only way
@@ -301,17 +312,6 @@ $.Tile.prototype = {
// changes as we are rendering the image
drawingHandler({context: context, tile: this, rendered: rendered});
- if (typeof scale === 'number' && scale !== 1) {
- // draw tile at a different scale
- position = position.times(scale);
- size = size.times(scale);
- }
-
- if (translate instanceof $.Point) {
- // shift tile position slightly
- position = position.plus(translate);
- }
-
context.drawImage(
rendered.canvas,
0,
From 7e3320c167d2b3436b5094c485d86640fcb43161 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 23 Feb 2016 19:37:41 -0500
Subject: [PATCH 02/78] Fix transparent images clearing the images in
backgroumd. Fix #849
---
src/tile.js | 9 ++++---
src/tiledimage.js | 9 ++++++-
test/modules/multi-image.js | 47 ++++++++++++++++++++++++++++++++++---
3 files changed, 58 insertions(+), 7 deletions(-)
diff --git a/src/tile.js b/src/tile.js
index 9abb14b6..1144d797 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -193,6 +193,11 @@ $.Tile.prototype = {
return this.level + "/" + this.x + "_" + this.y;
},
+ // private
+ _hasTransparencyChannel: function() {
+ return this.context2D || this.url.match('.png');
+ },
+
/**
* Renders the tile in an html container.
* @function
@@ -284,8 +289,7 @@ $.Tile.prototype = {
//ie its done fading or fading is turned off, and if we are drawing
//an image with an alpha channel, then the only way
//to avoid seeing the tile underneath is to clear the rectangle
- if (context.globalAlpha === 1 &&
- (this.context2D || this.url.match('.png'))) {
+ if (context.globalAlpha === 1 && this._hasTransparencyChannel()) {
//clearing only the inside of the rectangle occupied
//by the png prevents edge flikering
context.clearRect(
@@ -294,7 +298,6 @@ $.Tile.prototype = {
size.x - 2,
size.y - 2
);
-
}
// This gives the application a chance to make image manipulation
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 7ad9d7f2..562f1f92 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -650,6 +650,11 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('bounds-change');
+ },
+
+ // private
+ _isBottomItem: function() {
+ return this.viewer.world.getItemAt(0) === this;
}
});
@@ -1332,7 +1337,9 @@ function drawTiles( tiledImage, lastDrawn ) {
return;
}
var useSketch = tiledImage.opacity < 1 ||
- (tiledImage.compositeOperation && tiledImage.compositeOperation !== 'source-over');
+ (tiledImage.compositeOperation &&
+ tiledImage.compositeOperation !== 'source-over') ||
+ (!tiledImage._isBottomItem() && tile._hasTransparencyChannel);
var sketchScale;
var sketchTranslate;
diff --git a/test/modules/multi-image.js b/test/modules/multi-image.js
index f3710429..cee7867f 100644
--- a/test/modules/multi-image.js
+++ b/test/modules/multi-image.js
@@ -5,12 +5,12 @@
module( 'Multi-Image', {
setup: function() {
- $( '<div id="itemsexample"></div>' ).appendTo( "#qunit-fixture" );
+ $( '<div id="example"></div>' ).appendTo( "#qunit-fixture" );
testLog.reset();
viewer = OpenSeadragon( {
- id: 'itemsexample',
+ id: 'example',
prefixUrl: '/build/openseadragon/images/',
springStiffness: 100 // Faster animation = faster tests
});
@@ -21,7 +21,7 @@
}
viewer = null;
- $( "#itemsexample" ).remove();
+ $("#example").remove();
}
} );
@@ -208,4 +208,45 @@
viewer.open('/test/data/testpattern.dzi');
});
+ asyncTest('Transparent image on top of others', function() {
+ viewer.open('/test/data/testpattern.dzi');
+
+ // TODO: replace with fully-loaded event listener when available.
+ setTimeout(function() {
+ var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500);
+ var expectedVal = getPixelValue(imageData, 333, 250);
+
+ viewer.addSimpleImage({
+ url: '/test/data/A.png'
+ });
+
+ // TODO: replace with fully-loaded event listener when available.
+ setTimeout(function() {
+ var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500);
+ var actualVal = getPixelValue(imageData, 333, 250);
+
+ equal(actualVal.r, expectedVal.r,
+ 'Red channel should not change when stacking a transparent image');
+ equal(actualVal.g, expectedVal.g,
+ 'Green channel should not change when stacking a transparent image');
+ equal(actualVal.b, expectedVal.b,
+ 'Blue channel should not change when stacking a transparent image');
+ equal(actualVal.a, expectedVal.a,
+ 'Alpha channel should not change when stacking a transparent image');
+
+ start();
+ }, 1000);
+ }, 1000);
+
+ function getPixelValue(imageData, x, y) {
+ var offset = x * imageData.width + y;
+ return {
+ r: imageData.data[offset],
+ g: imageData.data[offset + 1],
+ b: imageData.data[offset + 2],
+ a: imageData.data[offset + 3]
+ };
+ }
+ });
+
})();
From 510c8c2b97af4dd1edf459a6a5d47b26a8548603 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Wed, 24 Feb 2016 09:27:19 -0800
Subject: [PATCH 03/78] Changelog for #860
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index b9da351a..115db877 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -25,6 +25,7 @@ Viewport.contentAspectY have been removed.
* Fixed: with scrollToZoom disabled, the viewer caused page scrolling to slow down (#858)
* Added Viewer.getOverlayById and Overlay.getBounds functions (#853)
* Tiled images with 0 opacity no longer load their tiles or do drawing calculations (#859)
+* Fixed issue with edge smoothing with PNG tiles at high zoom (#860)
2.1.0:
From d18485844dc5d23aaa45127fcacadd5102165f97 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 24 Feb 2016 19:48:11 -0500
Subject: [PATCH 04/78] Fix crash and improve tests..
---
src/tiledimage.js | 12 +++++-------
test/modules/multi-image.js | 30 +++++++++++++++++++++---------
2 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 562f1f92..53c640c4 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1329,13 +1329,11 @@ function compareTiles( previousBest, tile ) {
}
function drawTiles( tiledImage, lastDrawn ) {
- var i,
- tile = lastDrawn[0];
-
- if ( tiledImage.opacity <= 0 ) {
- drawDebugInfo( tiledImage, lastDrawn );
+ if (lastDrawn.length === 0) {
return;
}
+ var tile = lastDrawn[0];
+
var useSketch = tiledImage.opacity < 1 ||
(tiledImage.compositeOperation &&
tiledImage.compositeOperation !== 'source-over') ||
@@ -1346,7 +1344,7 @@ function drawTiles( tiledImage, lastDrawn ) {
var zoom = tiledImage.viewport.getZoom(true);
var imageZoom = tiledImage.viewportToImageZoom(zoom);
- if (imageZoom > tiledImage.smoothTileEdgesMinZoom && tile) {
+ if (imageZoom > tiledImage.smoothTileEdgesMinZoom) {
// When zoomed in a lot (>100%) the tile edges are visible.
// So we have to composite them at ~100% and scale them up together.
useSketch = true;
@@ -1403,7 +1401,7 @@ function drawTiles( tiledImage, lastDrawn ) {
tiledImage._drawer.drawRectangle(placeholderRect, fillStyle, useSketch);
}
- for ( i = lastDrawn.length - 1; i >= 0; i-- ) {
+ for (var i = lastDrawn.length - 1; i >= 0; i--) {
tile = lastDrawn[ i ];
tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate );
tile.beingDrawn = true;
diff --git a/test/modules/multi-image.js b/test/modules/multi-image.js
index cee7867f..1cfd0515 100644
--- a/test/modules/multi-image.js
+++ b/test/modules/multi-image.js
@@ -214,7 +214,13 @@
// TODO: replace with fully-loaded event listener when available.
setTimeout(function() {
var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500);
- var expectedVal = getPixelValue(imageData, 333, 250);
+ // Pixel 250,250 will be in the hole of the A
+ var expectedVal = getPixelValue(imageData, 250, 250);
+
+ notEqual(expectedVal.r, 0, 'Red channel should not be 0');
+ notEqual(expectedVal.g, 0, 'Green channel should not be 0');
+ notEqual(expectedVal.b, 0, 'Blue channel should not be 0');
+ notEqual(expectedVal.a, 0, 'Alpha channel should not be 0');
viewer.addSimpleImage({
url: '/test/data/A.png'
@@ -223,23 +229,29 @@
// TODO: replace with fully-loaded event listener when available.
setTimeout(function() {
var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500);
- var actualVal = getPixelValue(imageData, 333, 250);
+ var actualVal = getPixelValue(imageData, 250, 250);
equal(actualVal.r, expectedVal.r,
- 'Red channel should not change when stacking a transparent image');
+ 'Red channel should not change in transparent part of the A');
equal(actualVal.g, expectedVal.g,
- 'Green channel should not change when stacking a transparent image');
+ 'Green channel should not change in transparent part of the A');
equal(actualVal.b, expectedVal.b,
- 'Blue channel should not change when stacking a transparent image');
+ 'Blue channel should not change in transparent part of the A');
equal(actualVal.a, expectedVal.a,
- 'Alpha channel should not change when stacking a transparent image');
+ 'Alpha channel should not change in transparent part of the A');
+
+ var onAVal = getPixelValue(imageData, 333, 250);
+ equal(onAVal.r, 0, 'Red channel should be null on the A');
+ equal(onAVal.g, 0, 'Green channel should be null on the A');
+ equal(onAVal.b, 0, 'Blue channel should be null on the A');
+ equal(onAVal.a, 255, 'Alpha channel should be 255 on the A');
start();
- }, 1000);
- }, 1000);
+ }, 500);
+ }, 500);
function getPixelValue(imageData, x, y) {
- var offset = x * imageData.width + y;
+ var offset = 4 * (y * imageData.width + x);
return {
r: imageData.data[offset],
g: imageData.data[offset + 1],
From 963986d1874bd1a5089a1cb7e94e3a189e3fa7c9 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 24 Feb 2016 19:53:35 -0500
Subject: [PATCH 05/78] Add missing parenthesis.
---
src/tiledimage.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 53c640c4..9f3acf46 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1337,7 +1337,7 @@ function drawTiles( tiledImage, lastDrawn ) {
var useSketch = tiledImage.opacity < 1 ||
(tiledImage.compositeOperation &&
tiledImage.compositeOperation !== 'source-over') ||
- (!tiledImage._isBottomItem() && tile._hasTransparencyChannel);
+ (!tiledImage._isBottomItem() && tile._hasTransparencyChannel());
var sketchScale;
var sketchTranslate;
From 0fdebe052c0e9552cd669fb05dec0f6ab31f36a1 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Thu, 25 Feb 2016 09:43:14 -0800
Subject: [PATCH 06/78] Changelog for #861
---
changelog.txt | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index 115db877..db6c8fc9 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,12 +1,12 @@
OPENSEADRAGON CHANGELOG
=======================
-2.1.1: (in progress)
+2.2.0: (in progress)
* BREAKING CHANGE: Viewport.homeBounds, Viewport.contentSize, Viewport.contentAspectX and
-Viewport.contentAspectY have been removed.
-* DEPRECATION: Viewport.setHomeBounds has been deprecated
-* DEPRECATION: the Viewport constructor is now ignoring the contentSize option
+ Viewport.contentAspectY have been removed. (#846)
+* DEPRECATION: Viewport.setHomeBounds has been deprecated (#846)
+* DEPRECATION: the Viewport constructor is now ignoring the contentSize option (#846)
* Tile edge smoothing at high zoom (#764)
* Fixed issue with reference strip popping up virtual keyboard on mobile devices (#779)
* Now supporting rotation in the Rect class (#782)
@@ -26,6 +26,7 @@ Viewport.contentAspectY have been removed.
* Added Viewer.getOverlayById and Overlay.getBounds functions (#853)
* Tiled images with 0 opacity no longer load their tiles or do drawing calculations (#859)
* Fixed issue with edge smoothing with PNG tiles at high zoom (#860)
+* Fixed: Images with transparency were clearing images layered below them (#861)
2.1.0:
From a54d896a45dac120c44a2192bcfb3a0f73337fa7 Mon Sep 17 00:00:00 2001
From: Grant Echols <gechols@ldschurch.org>
Date: Fri, 4 Mar 2016 11:26:53 -0700
Subject: [PATCH 07/78] Added note about locations being viewport relative for
overlays.
---
src/viewer.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/viewer.js b/src/viewer.js
index d96f81c0..8711bd01 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1782,7 +1782,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @param {Element|String|Object} element - A reference to an element or an id for
* the element which will be overlayed. Or an Object specifying the configuration for the overlay
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
- * rectangle which will be overlayed.
+ * rectangle which will be overlayed. This is a viewport relative location.
* @param {OpenSeadragon.OverlayPlacement} placement - The position of the
* viewport which the location coordinates will be treated as relative
* to.
@@ -1843,7 +1843,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @param {Element|String} element - A reference to an element or an id for
* the element which is overlayed.
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
- * rectangle which will be overlayed.
+ * rectangle which will be overlayed. This is a viewport relative location.
* @param {OpenSeadragon.OverlayPlacement} placement - The position of the
* viewport which the location coordinates will be treated as relative
* to.
From ef1e5c7d06262b68eb1de9ffaed8e392bda1dbe6 Mon Sep 17 00:00:00 2001
From: rvdb <ron.vandenbranden@kantl.be>
Date: Fri, 4 Mar 2016 22:43:20 +0100
Subject: [PATCH 08/78] removed automatic focus from reference strip, which
caused HTML pages to jump unwantedly to the reference strip upon loading
---
src/referencestrip.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/referencestrip.js b/src/referencestrip.js
index 0743d365..9d88a6a3 100644
--- a/src/referencestrip.js
+++ b/src/referencestrip.js
@@ -276,7 +276,6 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
}
this.currentPage = page;
- $.getElement( element.id + '-displayregion' ).focus();
onStripEnter.call( this, { eventSource: this.innerTracker } );
}
},
From 5ca04c56f70e8d958730b5eca4a6e4a9180bfa53 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Mon, 7 Mar 2016 09:46:20 -0800
Subject: [PATCH 09/78] Changelog for #872
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index db6c8fc9..66572c81 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -27,6 +27,7 @@ OPENSEADRAGON CHANGELOG
* Tiled images with 0 opacity no longer load their tiles or do drawing calculations (#859)
* Fixed issue with edge smoothing with PNG tiles at high zoom (#860)
* Fixed: Images with transparency were clearing images layered below them (#861)
+* Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
2.1.0:
From 66f99a1d39ea8b7ccf44c246b39547658ce80607 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Tue, 8 Mar 2016 09:58:50 -0800
Subject: [PATCH 10/78] Really no tabIndex if you pass "".
---
src/viewer.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/viewer.js b/src/viewer.js
index 8711bd01..ab782484 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -234,7 +234,9 @@ $.Viewer = function( options ) {
style.left = "0px";
}(this.canvas.style));
$.setElementTouchActionNone( this.canvas );
- this.canvas.tabIndex = (options.tabIndex === undefined ? 0 : options.tabIndex);
+ if (options.tabIndex !== "") {
+ this.canvas.tabIndex = (options.tabIndex === undefined ? 0 : options.tabIndex);
+ }
//the container is created through applying the ControlDock constructor above
this.container.className = "openseadragon-container";
From 2740792df3144e205dc84f71dd0db1b04479ead3 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sun, 20 Mar 2016 10:04:23 -0400
Subject: [PATCH 11/78] Fix flick gesture with rotation. Fix #869
---
src/viewer.js | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)
diff --git a/src/viewer.js b/src/viewer.js
index d96f81c0..2154a094 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2546,11 +2546,16 @@ function onCanvasDragEnd( event ) {
if ( !event.preventDefaultAction && this.viewport ) {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
- if ( gestureSettings.flickEnabled && event.speed >= gestureSettings.flickMinSpeed ) {
- var amplitudeX = gestureSettings.flickMomentum * ( event.speed * Math.cos( event.direction - (Math.PI / 180 * this.viewport.degrees) ) ),
- amplitudeY = gestureSettings.flickMomentum * ( event.speed * Math.sin( event.direction - (Math.PI / 180 * this.viewport.degrees) ) ),
- center = this.viewport.pixelFromPoint( this.viewport.getCenter( true ) ),
- target = this.viewport.pointFromPixel( new $.Point( center.x - amplitudeX, center.y - amplitudeY ) );
+ if (gestureSettings.flickEnabled &&
+ event.speed >= gestureSettings.flickMinSpeed) {
+ var amplitudeX = gestureSettings.flickMomentum * event.speed *
+ Math.cos(event.direction);
+ var amplitudeY = gestureSettings.flickMomentum * event.speed *
+ Math.sin(event.direction);
+ var center = this.viewport.pixelFromPoint(
+ this.viewport.getCenter(true));
+ var target = this.viewport.pointFromPixel(
+ new $.Point(center.x - amplitudeX, center.y - amplitudeY));
if( !this.panHorizontal ) {
target.x = center.x;
}
From 2386900e29d315ef7ee7b350d1b69a23ecf2a8f3 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sun, 20 Mar 2016 11:01:26 -0400
Subject: [PATCH 12/78] Fix drag with panHorizontal/panVertical set to false.
---
src/viewer.js | 30 ++++++++++++++----------------
1 file changed, 14 insertions(+), 16 deletions(-)
diff --git a/src/viewer.js b/src/viewer.js
index 2154a094..a74292c0 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2542,27 +2542,25 @@ function onCanvasDrag( event ) {
}
function onCanvasDragEnd( event ) {
- var gestureSettings;
-
- if ( !event.preventDefaultAction && this.viewport ) {
- gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
+ if (!event.preventDefaultAction && this.viewport) {
+ var gestureSettings = this.gestureSettingsByDeviceType(event.pointerType);
if (gestureSettings.flickEnabled &&
event.speed >= gestureSettings.flickMinSpeed) {
- var amplitudeX = gestureSettings.flickMomentum * event.speed *
- Math.cos(event.direction);
- var amplitudeY = gestureSettings.flickMomentum * event.speed *
- Math.sin(event.direction);
+ var amplitudeX = 0;
+ if (this.panHorizontal) {
+ amplitudeX = gestureSettings.flickMomentum * event.speed *
+ Math.cos(event.direction);
+ }
+ var amplitudeY = 0;
+ if (this.panVertical) {
+ amplitudeY = gestureSettings.flickMomentum * event.speed *
+ Math.sin(event.direction);
+ }
var center = this.viewport.pixelFromPoint(
this.viewport.getCenter(true));
var target = this.viewport.pointFromPixel(
new $.Point(center.x - amplitudeX, center.y - amplitudeY));
- if( !this.panHorizontal ) {
- target.x = center.x;
- }
- if( !this.panVertical ) {
- target.y = center.y;
- }
- this.viewport.panTo( target, false );
+ this.viewport.panTo(target, false);
}
this.viewport.applyConstraints();
}
@@ -2581,7 +2579,7 @@ function onCanvasDragEnd( event ) {
* @property {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
- this.raiseEvent( 'canvas-drag-end', {
+ this.raiseEvent('canvas-drag-end', {
tracker: event.eventSource,
position: event.position,
speed: event.speed,
From d3b027bade8497a68eb6202d899d3a2d73b5669c Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Mon, 21 Mar 2016 11:27:43 -0400
Subject: [PATCH 13/78] Add addOnceHandler method to EventSource.
---
src/eventsource.js | 17 ++++++++++++++++-
test/modules/events.js | 25 +++++++++++++++++++++++++
2 files changed, 41 insertions(+), 1 deletion(-)
diff --git a/src/eventsource.js b/src/eventsource.js
index e305da25..fc2a28aa 100644
--- a/src/eventsource.js
+++ b/src/eventsource.js
@@ -56,7 +56,22 @@ $.EventSource = function() {
/** @lends OpenSeadragon.EventSource.prototype */
$.EventSource.prototype = {
- // TODO: Add a method 'one' which automatically unbinds a listener after the first triggered event that matches.
+ /**
+ * Add an event handler to be triggered only once for a given event.
+ * @function
+ * @param {String} eventName - Name of event to register.
+ * @param {OpenSeadragon.EventHandler} handler - Function to call when event
+ * is triggered.
+ * @param {Object} [userData=null] - Arbitrary object to be passed unchanged
+ * to the handler.
+ */
+ addOnceHandler: function(eventName, handler, userData) {
+ var self = this;
+ this.addHandler(eventName, function onceHandler(event) {
+ self.removeHandler(eventName, onceHandler);
+ handler(event);
+ }, userData);
+ },
/**
* Add an event handler for a given event.
diff --git a/test/modules/events.js b/test/modules/events.js
index 62caa072..f6cfeb8b 100644
--- a/test/modules/events.js
+++ b/test/modules/events.js
@@ -949,6 +949,31 @@
viewer.open( '/test/data/testpattern.dzi' );
} );
+ // ----------
+ test('EventSource: addOnceHandler', function() {
+ var eventSource = new OpenSeadragon.EventSource();
+ var userData = 'data';
+ var eventData = {
+ foo: 1
+ };
+ var handlerCalledCount = 0;
+ eventSource.addOnceHandler('test-event', function(event) {
+ handlerCalledCount++;
+ strictEqual(event.foo, eventData.foo,
+ 'Event data should be transmitted to the event.');
+ strictEqual(event.userData, userData,
+ 'User data should be transmitted to the event.');
+ }, userData);
+ strictEqual(0, handlerCalledCount,
+ 'Handler should not have been called yet.');
+ eventSource.raiseEvent('test-event', eventData);
+ strictEqual(1, handlerCalledCount,
+ 'Handler should have been called once.');
+ eventSource.raiseEvent('test-event', eventData);
+ strictEqual(1, handlerCalledCount,
+ 'Handler should still have been called once.');
+ });
+
// ----------
asyncTest( 'Viewer: tile-drawing event', function () {
var tileDrawing = function ( event ) {
From e4fca14c33331b8dcde54501f4d253345aa3a18e Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Mon, 21 Mar 2016 16:11:50 -0400
Subject: [PATCH 14/78] Add TiledImage.fitInBounds method.
---
Gruntfile.js | 1 +
src/placement.js | 125 +++++++++++++++++++++++++++++++++++++
src/tiledimage.js | 42 +++++++++++++
test/coverage.html | 1 +
test/modules/tiledimage.js | 56 +++++++++++++++--
5 files changed, 220 insertions(+), 5 deletions(-)
create mode 100644 src/placement.js
diff --git a/Gruntfile.js b/Gruntfile.js
index d5891153..9871806b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -28,6 +28,7 @@ module.exports = function(grunt) {
"src/mousetracker.js",
"src/control.js",
"src/controldock.js",
+ "src/placement.js",
"src/viewer.js",
"src/navigator.js",
"src/strings.js",
diff --git a/src/placement.js b/src/placement.js
new file mode 100644
index 00000000..479c1d0c
--- /dev/null
+++ b/src/placement.js
@@ -0,0 +1,125 @@
+/*
+ * OpenSeadragon - Placement
+ *
+ * Copyright (C) 2010-2016 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function($) {
+
+ /**
+ * An enumeration of positions to anchor an element.
+ * @memberOf OpenSeadragon
+ * @static
+ * @property {OpenSeadragon.Placement} CENTER
+ * @property {OpenSeadragon.Placement} TOP_LEFT
+ * @property {OpenSeadragon.Placement} TOP
+ * @property {OpenSeadragon.Placement} TOP_RIGHT
+ * @property {OpenSeadragon.Placement} RIGHT
+ * @property {OpenSeadragon.Placement} BOTTOM_RIGHT
+ * @property {OpenSeadragon.Placement} BOTTOM
+ * @property {OpenSeadragon.Placement} BOTTOM_LEFT
+ * @property {OpenSeadragon.Placement} LEFT
+ */
+ $.Placement = {
+ CENTER: {
+ isLeft: false,
+ isHorizontallyCentered: true,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: true,
+ isBottom: false
+ },
+ TOP_LEFT: {
+ isLeft: true,
+ isHorizontallyCentered: false,
+ isRight: false,
+ isTop: true,
+ isVerticallyCentered: false,
+ isBottom: false
+ },
+ TOP: {
+ isLeft: false,
+ isHorizontallyCentered: true,
+ isRight: false,
+ isTop: true,
+ isVerticallyCentered: false,
+ isBottom: false
+ },
+ TOP_RIGHT: {
+ isLeft: false,
+ isHorizontallyCentered: false,
+ isRight: true,
+ isTop: true,
+ isVerticallyCentered: false,
+ isBottom: false
+ },
+ RIGHT: {
+ isLeft: false,
+ isHorizontallyCentered: false,
+ isRight: true,
+ isTop: false,
+ isVerticallyCentered: true,
+ isBottom: false
+ },
+ BOTTOM_RIGHT: {
+ isLeft: false,
+ isHorizontallyCentered: false,
+ isRight: true,
+ isTop: false,
+ isVerticallyCentered: false,
+ isBottom: true
+ },
+ BOTTOM: {
+ isLeft: false,
+ isHorizontallyCentered: true,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: false,
+ isBottom: true
+ },
+ BOTTOM_LEFT: {
+ isLeft: true,
+ isHorizontallyCentered: false,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: false,
+ isBottom: true
+ },
+ LEFT: {
+ isLeft: true,
+ isHorizontallyCentered: false,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: true,
+ isBottom: false
+ }
+ };
+
+}(OpenSeadragon));
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 9f3acf46..dbd0af43 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -543,6 +543,48 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
this._setScale(height / this.normHeight, immediately);
},
+ /**
+ * Positions and scales the TiledImage to fit in the specified bounds.
+ * Note: this method fires OpenSeadragon.TiledImage.event:bounds-change
+ * twice
+ * @param {OpenSeadragon.Rect} bounds The bounds to fit the image into.
+ * @param {OpenSeadragon.Placement} [anchor=OpenSeadragon.Placement.CENTER]
+ * How to anchor the image in the bounds.
+ * @param {Boolean} [immediately=false] Whether to animate to the new size
+ * or snap immediately.
+ * @fires OpenSeadragon.TiledImage.event:bounds-change
+ */
+ fitInBounds: function(bounds, anchor, immediately) {
+ anchor = anchor || $.Placement.CENTER;
+ if (bounds.getAspectRatio() > this.contentAspectX) {
+ // We will have margins on the X axis
+ var targetWidth = bounds.height * this.contentAspectX;
+ var marginLeft = 0;
+ if (anchor.isHorizontallyCentered) {
+ marginLeft = (bounds.width - targetWidth) / 2;
+ } else if (anchor.isRight) {
+ marginLeft = bounds.width - targetWidth;
+ }
+ this.setPosition(
+ new $.Point(bounds.x + marginLeft, bounds.y),
+ immediately);
+ this.setHeight(bounds.height, immediately);
+ } else {
+ // We will have margins on the Y axis
+ var targetHeight = bounds.width / this.contentAspectX;
+ var marginTop = 0;
+ if (anchor.isVerticallyCentered) {
+ marginTop = (bounds.height - targetHeight) / 2;
+ } else if (anchor.isBottom) {
+ marginTop = bounds.height - targetHeight;
+ }
+ this.setPosition(
+ new $.Point(bounds.x, bounds.y + marginTop),
+ immediately);
+ this.setWidth(bounds.width, immediately);
+ }
+ },
+
/**
* @returns {OpenSeadragon.Rect|null} The TiledImage's current clip rectangle,
* in image pixels, or null if none.
diff --git a/test/coverage.html b/test/coverage.html
index bcf893ee..81ffe579 100644
--- a/test/coverage.html
+++ b/test/coverage.html
@@ -22,6 +22,7 @@
<script src="/src/mousetracker.js"></script>
<script src="/src/control.js"></script>
<script src="/src/controldock.js"></script>
+ <script src="/src/placement.js"></script>
<script src="/src/viewer.js"></script>
<script src="/src/navigator.js"></script>
<script src="/src/strings.js"></script>
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index 07f23f55..d43ec41b 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -4,18 +4,18 @@
var viewer;
module('TiledImage', {
- setup: function () {
+ setup: function() {
var example = $('<div id="example"></div>').appendTo("#qunit-fixture");
testLog.reset();
viewer = OpenSeadragon({
- id: 'example',
- prefixUrl: '/build/openseadragon/images/',
+ id: 'example',
+ prefixUrl: '/build/openseadragon/images/',
springStiffness: 100 // Faster animation = faster tests
});
},
- teardown: function () {
+ teardown: function() {
if (viewer && viewer.close) {
viewer.close();
}
@@ -87,7 +87,7 @@
// ----------
asyncTest('animation', function() {
- viewer.addHandler("open", function () {
+ viewer.addHandler("open", function() {
var image = viewer.world.getItemAt(0);
propEqual(image.getBounds(), new OpenSeadragon.Rect(0, 0, 1, 1), 'target bounds on open');
propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds on open');
@@ -257,4 +257,50 @@
});
});
+ asyncTest('fitInBounds', function() {
+
+ function assertRectEquals(actual, expected, message) {
+ ok(actual.equals(expected), message + ' should be ' +
+ expected.toString() + ', found ' + actual.toString());
+ }
+
+ viewer.addHandler('open', function openHandler() {
+ viewer.removeHandler('open', openHandler);
+
+ var squareImage = viewer.world.getItemAt(0);
+ squareImage.fitInBounds(
+ new OpenSeadragon.Rect(0, 0, 1, 2),
+ OpenSeadragon.Placement.CENTER,
+ true);
+ var actualBounds = squareImage.getBounds(true);
+ var expectedBounds = new OpenSeadragon.Rect(0, 0.5, 1, 1);
+ assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
+
+ var tallImage = viewer.world.getItemAt(1);
+ tallImage.fitInBounds(
+ new OpenSeadragon.Rect(0, 0, 1, 2),
+ OpenSeadragon.Placement.TOP_LEFT,
+ true);
+ actualBounds = tallImage.getBounds(true);
+ expectedBounds = new OpenSeadragon.Rect(0, 0, 0.5, 2);
+ assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
+
+ var wideImage = viewer.world.getItemAt(2);
+ wideImage.fitInBounds(
+ new OpenSeadragon.Rect(0, 0, 1, 2),
+ OpenSeadragon.Placement.BOTTOM_RIGHT,
+ true);
+ actualBounds = wideImage.getBounds(true);
+ expectedBounds = new OpenSeadragon.Rect(0, 1.75, 1, 0.25);
+ assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
+ start();
+ });
+
+ viewer.open([
+ '/test/data/testpattern.dzi',
+ '/test/data/tall.dzi',
+ '/test/data/wide.dzi'
+ ]);
+ });
+
})();
From fddf0fb938a0371dc09fe27e8211fc5a469025bb Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 22 Mar 2016 10:03:52 -0400
Subject: [PATCH 15/78] Use variable instead of function name.
---
src/eventsource.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/eventsource.js b/src/eventsource.js
index fc2a28aa..6d0d0870 100644
--- a/src/eventsource.js
+++ b/src/eventsource.js
@@ -67,10 +67,11 @@ $.EventSource.prototype = {
*/
addOnceHandler: function(eventName, handler, userData) {
var self = this;
- this.addHandler(eventName, function onceHandler(event) {
+ var onceHandler = function(event) {
self.removeHandler(eventName, onceHandler);
handler(event);
- }, userData);
+ };
+ this.addHandler(eventName, onceHandler, userData);
},
/**
From 0f82eed0dbdd85124e23272c732a9c11302e81ed Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 22 Mar 2016 13:54:35 -0400
Subject: [PATCH 16/78] Add times parameter to addOnceHandler.
---
src/eventsource.js | 14 +++++++++++---
test/modules/events.js | 28 ++++++++++++++++++++++++++++
2 files changed, 39 insertions(+), 3 deletions(-)
diff --git a/src/eventsource.js b/src/eventsource.js
index 6d0d0870..e3957d7f 100644
--- a/src/eventsource.js
+++ b/src/eventsource.js
@@ -57,18 +57,26 @@ $.EventSource = function() {
$.EventSource.prototype = {
/**
- * Add an event handler to be triggered only once for a given event.
+ * Add an event handler to be triggered only once (or a given number of times)
+ * for a given event.
* @function
* @param {String} eventName - Name of event to register.
* @param {OpenSeadragon.EventHandler} handler - Function to call when event
* is triggered.
* @param {Object} [userData=null] - Arbitrary object to be passed unchanged
* to the handler.
+ * @param {Number} [times=1] - The number of times to handle the event
+ * before removing it.
*/
- addOnceHandler: function(eventName, handler, userData) {
+ addOnceHandler: function(eventName, handler, userData, times) {
var self = this;
+ times = times || 1;
+ var count = 0;
var onceHandler = function(event) {
- self.removeHandler(eventName, onceHandler);
+ count++;
+ if (count === times) {
+ self.removeHandler(eventName, onceHandler);
+ }
handler(event);
};
this.addHandler(eventName, onceHandler, userData);
diff --git a/test/modules/events.js b/test/modules/events.js
index f6cfeb8b..18f50c37 100644
--- a/test/modules/events.js
+++ b/test/modules/events.js
@@ -974,6 +974,34 @@
'Handler should still have been called once.');
});
+ // ----------
+ test('EventSource: addOnceHandler 2 times', function() {
+ var eventSource = new OpenSeadragon.EventSource();
+ var userData = 'data';
+ var eventData = {
+ foo: 1
+ };
+ var handlerCalledCount = 0;
+ eventSource.addOnceHandler('test-event', function(event) {
+ handlerCalledCount++;
+ strictEqual(event.foo, eventData.foo,
+ 'Event data should be transmitted to the event.');
+ strictEqual(event.userData, userData,
+ 'User data should be transmitted to the event.');
+ }, userData, 2);
+ strictEqual(0, handlerCalledCount,
+ 'Handler should not have been called yet.');
+ eventSource.raiseEvent('test-event', eventData);
+ strictEqual(1, handlerCalledCount,
+ 'Handler should have been called once.');
+ eventSource.raiseEvent('test-event', eventData);
+ strictEqual(2, handlerCalledCount,
+ 'Handler should have been called twice.');
+ eventSource.raiseEvent('test-event', eventData);
+ strictEqual(2, handlerCalledCount,
+ 'Handler should still have been called twice.');
+ });
+
// ----------
asyncTest( 'Viewer: tile-drawing event', function () {
var tileDrawing = function ( event ) {
From 9c461824b3b038e855efd4567fa3e6a7d1f29498 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 22 Mar 2016 15:50:48 -0400
Subject: [PATCH 17/78] Update OpenSeadragon.Placement to be serializable.
---
src/openseadragon.js | 17 ++++-
src/overlay.js | 73 ++++++------------
src/placement.js | 157 +++++++++++++++++++++------------------
src/tiledimage.js | 9 ++-
src/viewer.js | 12 +--
test/modules/overlays.js | 6 +-
6 files changed, 137 insertions(+), 137 deletions(-)
diff --git a/src/openseadragon.js b/src/openseadragon.js
index a129f083..07523516 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -154,7 +154,7 @@
* created.
* * placement a string to define the relative position to the viewport.
* Only used if no width and height are specified. Default: 'TOP_LEFT'.
- * See {@link OpenSeadragon.OverlayPlacement} for possible values.
+ * See {@link OpenSeadragon.Placement} for possible values.
*
* @property {String} [xmlPath=null]
* <strong>DEPRECATED</strong>. A relative path to load a DZI file from the server.
@@ -842,6 +842,21 @@ if (typeof define === 'function' && define.amd) {
return true;
};
+ /**
+ * Shim around Object.freeze. Does nothing if Object.freeze is not supported.
+ * @param {Object} obj The object to freeze.
+ * @return {Object} obj The frozen object.
+ */
+ $.freezeObject = function(obj) {
+ if (Object.freeze) {
+ $.freezeObject = Object.freeze;
+ } else {
+ $.freezeObject = function(obj) {
+ return obj;
+ };
+ }
+ return $.freezeObject(obj);
+ };
/**
* True if the browser supports the HTML5 canvas element
diff --git a/src/overlay.js b/src/overlay.js
index ffdd21bd..7e121950 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -37,6 +37,8 @@
/**
* An enumeration of positions that an overlay may be assigned relative to
* the viewport.
+ * It is identical to OpenSeadragon.Placement but is kept for backward
+ * compatibility.
* @member OverlayPlacement
* @memberof OpenSeadragon
* @static
@@ -51,17 +53,7 @@
* @property {Number} BOTTOM_LEFT
* @property {Number} LEFT
*/
- $.OverlayPlacement = {
- CENTER: 0,
- TOP_LEFT: 1,
- TOP: 2,
- TOP_RIGHT: 3,
- RIGHT: 4,
- BOTTOM_RIGHT: 5,
- BOTTOM: 6,
- BOTTOM_LEFT: 7,
- LEFT: 8
- };
+ $.OverlayPlacement = $.Placement;
/**
* @class Overlay
@@ -75,7 +67,7 @@
* is specified, the overlay will keep a constant size independently of the
* zoom. If a {@link OpenSeadragon.Rect} is specified, the overlay size will
* be adjusted when the zoom changes.
- * @param {OpenSeadragon.OverlayPlacement} [options.placement=OpenSeadragon.OverlayPlacement.TOP_LEFT]
+ * @param {OpenSeadragon.Placement} [options.placement=OpenSeadragon.Placement.TOP_LEFT]
* Relative position to the viewport.
* Only used if location is a {@link OpenSeadragon.Point}.
* @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
@@ -126,8 +118,7 @@
this.style = options.element.style;
// rects are always top-left
this.placement = options.location instanceof $.Point ?
- options.placement :
- $.OverlayPlacement.TOP_LEFT;
+ options.placement : $.Placement.TOP_LEFT;
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
@@ -138,42 +129,23 @@
/**
* @function
- * @param {OpenSeadragon.OverlayPlacement} position
+ * @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size
*/
- adjust: function( position, size ) {
- switch ( this.placement ) {
- case $.OverlayPlacement.TOP_LEFT:
- break;
- case $.OverlayPlacement.TOP:
- position.x -= size.x / 2;
- break;
- case $.OverlayPlacement.TOP_RIGHT:
- position.x -= size.x;
- break;
- case $.OverlayPlacement.RIGHT:
- position.x -= size.x;
- position.y -= size.y / 2;
- break;
- case $.OverlayPlacement.BOTTOM_RIGHT:
- position.x -= size.x;
- position.y -= size.y;
- break;
- case $.OverlayPlacement.BOTTOM:
- position.x -= size.x / 2;
- position.y -= size.y;
- break;
- case $.OverlayPlacement.BOTTOM_LEFT:
- position.y -= size.y;
- break;
- case $.OverlayPlacement.LEFT:
- position.y -= size.y / 2;
- break;
- default:
- case $.OverlayPlacement.CENTER:
- position.x -= size.x / 2;
- position.y -= size.y / 2;
- break;
+ adjust: function(position, size) {
+ var properties = $.Placement.properties[this.placement];
+ if (!properties) {
+ return;
+ }
+ if (properties.isHorizontallyCentered) {
+ position.x -= size.x / 2;
+ } else if (properties.isRight) {
+ position.x -= size.x;
+ }
+ if (properties.isVerticallyCentered) {
+ position.y -= size.y / 2;
+ } else if (properties.isBottom) {
+ position.y -= size.y;
}
},
@@ -298,7 +270,7 @@
/**
* @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
- * @param {OpenSeadragon.OverlayPlacement} position
+ * @param {OpenSeadragon.Placement} position
*/
update: function( location, placement ) {
this.scales = location instanceof $.Rect;
@@ -310,8 +282,7 @@
);
// rects are always top-left
this.placement = location instanceof $.Point ?
- placement :
- $.OverlayPlacement.TOP_LEFT;
+ placement : $.Placement.TOP_LEFT;
},
/**
diff --git a/src/placement.js b/src/placement.js
index 479c1d0c..a90bf5da 100644
--- a/src/placement.js
+++ b/src/placement.js
@@ -47,79 +47,90 @@
* @property {OpenSeadragon.Placement} BOTTOM_LEFT
* @property {OpenSeadragon.Placement} LEFT
*/
- $.Placement = {
- CENTER: {
- isLeft: false,
- isHorizontallyCentered: true,
- isRight: false,
- isTop: false,
- isVerticallyCentered: true,
- isBottom: false
- },
- TOP_LEFT: {
- isLeft: true,
- isHorizontallyCentered: false,
- isRight: false,
- isTop: true,
- isVerticallyCentered: false,
- isBottom: false
- },
- TOP: {
- isLeft: false,
- isHorizontallyCentered: true,
- isRight: false,
- isTop: true,
- isVerticallyCentered: false,
- isBottom: false
- },
- TOP_RIGHT: {
- isLeft: false,
- isHorizontallyCentered: false,
- isRight: true,
- isTop: true,
- isVerticallyCentered: false,
- isBottom: false
- },
- RIGHT: {
- isLeft: false,
- isHorizontallyCentered: false,
- isRight: true,
- isTop: false,
- isVerticallyCentered: true,
- isBottom: false
- },
- BOTTOM_RIGHT: {
- isLeft: false,
- isHorizontallyCentered: false,
- isRight: true,
- isTop: false,
- isVerticallyCentered: false,
- isBottom: true
- },
- BOTTOM: {
- isLeft: false,
- isHorizontallyCentered: true,
- isRight: false,
- isTop: false,
- isVerticallyCentered: false,
- isBottom: true
- },
- BOTTOM_LEFT: {
- isLeft: true,
- isHorizontallyCentered: false,
- isRight: false,
- isTop: false,
- isVerticallyCentered: false,
- isBottom: true
- },
- LEFT: {
- isLeft: true,
- isHorizontallyCentered: false,
- isRight: false,
- isTop: false,
- isVerticallyCentered: true,
- isBottom: false
+ $.Placement = $.freezeObject({
+ CENTER: 0,
+ TOP_LEFT: 1,
+ TOP: 2,
+ TOP_RIGHT: 3,
+ RIGHT: 4,
+ BOTTOM_RIGHT: 5,
+ BOTTOM: 6,
+ BOTTOM_LEFT: 7,
+ LEFT: 8,
+ properties: {
+ 0: {
+ isLeft: false,
+ isHorizontallyCentered: true,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: true,
+ isBottom: false
+ },
+ 1: {
+ isLeft: true,
+ isHorizontallyCentered: false,
+ isRight: false,
+ isTop: true,
+ isVerticallyCentered: false,
+ isBottom: false
+ },
+ 2: {
+ isLeft: false,
+ isHorizontallyCentered: true,
+ isRight: false,
+ isTop: true,
+ isVerticallyCentered: false,
+ isBottom: false
+ },
+ 3: {
+ isLeft: false,
+ isHorizontallyCentered: false,
+ isRight: true,
+ isTop: true,
+ isVerticallyCentered: false,
+ isBottom: false
+ },
+ 4: {
+ isLeft: false,
+ isHorizontallyCentered: false,
+ isRight: true,
+ isTop: false,
+ isVerticallyCentered: true,
+ isBottom: false
+ },
+ 5: {
+ isLeft: false,
+ isHorizontallyCentered: false,
+ isRight: true,
+ isTop: false,
+ isVerticallyCentered: false,
+ isBottom: true
+ },
+ 6: {
+ isLeft: false,
+ isHorizontallyCentered: true,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: false,
+ isBottom: true
+ },
+ 7: {
+ isLeft: true,
+ isHorizontallyCentered: false,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: false,
+ isBottom: true
+ },
+ 8: {
+ isLeft: true,
+ isHorizontallyCentered: false,
+ isRight: false,
+ isTop: false,
+ isVerticallyCentered: true,
+ isBottom: false
+ }
}
- };
+ });
}(OpenSeadragon));
diff --git a/src/tiledimage.js b/src/tiledimage.js
index dbd0af43..bec4a6ef 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -556,13 +556,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
*/
fitInBounds: function(bounds, anchor, immediately) {
anchor = anchor || $.Placement.CENTER;
+ var anchorProperties = $.Placement.properties[anchor];
if (bounds.getAspectRatio() > this.contentAspectX) {
// We will have margins on the X axis
var targetWidth = bounds.height * this.contentAspectX;
var marginLeft = 0;
- if (anchor.isHorizontallyCentered) {
+ if (anchorProperties.isHorizontallyCentered) {
marginLeft = (bounds.width - targetWidth) / 2;
- } else if (anchor.isRight) {
+ } else if (anchorProperties.isRight) {
marginLeft = bounds.width - targetWidth;
}
this.setPosition(
@@ -573,9 +574,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
// We will have margins on the Y axis
var targetHeight = bounds.width / this.contentAspectX;
var marginTop = 0;
- if (anchor.isVerticallyCentered) {
+ if (anchorProperties.isVerticallyCentered) {
marginTop = (bounds.height - targetHeight) / 2;
- } else if (anchor.isBottom) {
+ } else if (anchorProperties.isBottom) {
marginTop = bounds.height - targetHeight;
}
this.setPosition(
diff --git a/src/viewer.js b/src/viewer.js
index ab782484..3e5e4b04 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1785,7 +1785,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* the element which will be overlayed. Or an Object specifying the configuration for the overlay
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location.
- * @param {OpenSeadragon.OverlayPlacement} placement - The position of the
+ * @param {OpenSeadragon.Placement} placement - The position of the
* viewport which the location coordinates will be treated as relative
* to.
* @param {function} onDraw - If supplied the callback is called when the overlay
@@ -1827,7 +1827,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {Element} element - The overlay element.
* @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
- * @property {OpenSeadragon.OverlayPlacement} placement
+ * @property {OpenSeadragon.Placement} placement
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'add-overlay', {
@@ -1846,7 +1846,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* the element which is overlayed.
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location.
- * @param {OpenSeadragon.OverlayPlacement} placement - The position of the
+ * @param {OpenSeadragon.Placement} placement - The position of the
* viewport which the location coordinates will be treated as relative
* to.
* @return {OpenSeadragon.Viewer} Chainable.
@@ -1872,7 +1872,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* Viewer which raised the event.
* @property {Element} element
* @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
- * @property {OpenSeadragon.OverlayPlacement} placement
+ * @property {OpenSeadragon.Placement} placement
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'update-overlay', {
@@ -2222,8 +2222,8 @@ function getOverlayObject( viewer, overlay ) {
}
var placement = overlay.placement;
- if ( placement && ( $.type( placement ) === "string" ) ) {
- placement = $.OverlayPlacement[ overlay.placement.toUpperCase() ];
+ if (placement && $.type(placement) === "string") {
+ placement = $.Placement[overlay.placement.toUpperCase()];
}
return new $.Overlay({
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 3e26b4c4..bb317050 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -397,6 +397,7 @@
checkFixedOverlayPosition( new OpenSeadragon.Point( 0, 0 ),
"with TOP_LEFT placement." );
+ // Check that legacy OpenSeadragon.OverlayPlacement is still working
viewer.updateOverlay( "overlay", scalableOverlayLocation,
OpenSeadragon.OverlayPlacement.CENTER );
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
@@ -407,10 +408,11 @@
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
"with CENTER placement." );
+ // Check that new OpenSeadragon.Placement is working
viewer.updateOverlay( "overlay", scalableOverlayLocation,
- OpenSeadragon.OverlayPlacement.BOTTOM_RIGHT );
+ OpenSeadragon.Placement.BOTTOM_RIGHT );
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
- OpenSeadragon.OverlayPlacement.BOTTOM_RIGHT );
+ OpenSeadragon.Placement.BOTTOM_RIGHT );
setTimeout( function() {
checkScalableOverlayPosition( "with BOTTOM_RIGHT placement." );
checkFixedOverlayPosition( new OpenSeadragon.Point( -70, -60 ),
From 3cacc8edcf96d318e85b88cde91b9dadaf8936b1 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 22 Mar 2016 16:41:28 -0400
Subject: [PATCH 18/78] Add fitBounds option to TiledImage constructor.
---
src/tiledimage.js | 15 ++++++++++-
src/viewer.js | 6 +++++
test/modules/tiledimage.js | 52 +++++++++++++++++++++++++++++++++++---
3 files changed, 68 insertions(+), 5 deletions(-)
diff --git a/src/tiledimage.js b/src/tiledimage.js
index bec4a6ef..a925104c 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -52,6 +52,10 @@
* @param {Number} [options.y=0] - Top position, in viewport coordinates.
* @param {Number} [options.width=1] - Width, in viewport coordinates.
* @param {Number} [options.height] - Height, in viewport coordinates.
+ * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates
+ * to fit the image into. If specified, x, y, width and height get ignored.
+ * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER]
+ * How to anchor the image in the bounds if options.fitBounds is set.
* @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to
* (portions of the image outside of this area will not be visible). Only works on
* browsers that support the HTML5 canvas.
@@ -122,6 +126,11 @@ $.TiledImage = function( options ) {
delete options.height;
}
+ var fitBounds = options.fitBounds;
+ delete options.fitBounds;
+ var fitBoundsPlacement = options.fitBoundsPlacement || OpenSeadragon.Placement.CENTER;
+ delete options.fitBoundsPlacement;
+
$.extend( true, this, {
//internal state properties
@@ -172,6 +181,10 @@ $.TiledImage = function( options ) {
this._updateForScale();
+ if (fitBounds) {
+ this.fitBounds(fitBounds, fitBoundsPlacement, true);
+ }
+
// We need a callback to give image manipulation a chance to happen
this._drawingHandler = function(args) {
/**
@@ -554,7 +567,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* or snap immediately.
* @fires OpenSeadragon.TiledImage.event:bounds-change
*/
- fitInBounds: function(bounds, anchor, immediately) {
+ fitBounds: function(bounds, anchor, immediately) {
anchor = anchor || $.Placement.CENTER;
var anchorProperties = $.Placement.properties[anchor];
if (bounds.getAspectRatio() > this.contentAspectX) {
diff --git a/src/viewer.js b/src/viewer.js
index 3e5e4b04..f0434037 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1206,6 +1206,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @param {Number} [options.y=0] The Y position for the image in viewport coordinates.
* @param {Number} [options.width=1] The width for the image in viewport coordinates.
* @param {Number} [options.height] The height for the image in viewport coordinates.
+ * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates
+ * to fit the image into. If specified, x, y, width and height get ignored.
+ * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER]
+ * How to anchor the image in the bounds if options.fitBounds is set.
* @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to
* (portions of the image outside of this area will not be visible). Only works on
* browsers that support the HTML5 canvas.
@@ -1341,6 +1345,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
y: queueItem.options.y,
width: queueItem.options.width,
height: queueItem.options.height,
+ fitBounds: queueItem.options.fitBounds,
+ fitBoundsPlacement: queueItem.options.fitBoundsPlacement,
clip: queueItem.options.clip,
placeholderFillStyle: queueItem.options.placeholderFillStyle,
opacity: queueItem.options.opacity,
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index d43ec41b..76b55541 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -257,7 +257,7 @@
});
});
- asyncTest('fitInBounds', function() {
+ asyncTest('fitBounds', function() {
function assertRectEquals(actual, expected, message) {
ok(actual.equals(expected), message + ' should be ' +
@@ -268,7 +268,7 @@
viewer.removeHandler('open', openHandler);
var squareImage = viewer.world.getItemAt(0);
- squareImage.fitInBounds(
+ squareImage.fitBounds(
new OpenSeadragon.Rect(0, 0, 1, 2),
OpenSeadragon.Placement.CENTER,
true);
@@ -277,7 +277,7 @@
assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
var tallImage = viewer.world.getItemAt(1);
- tallImage.fitInBounds(
+ tallImage.fitBounds(
new OpenSeadragon.Rect(0, 0, 1, 2),
OpenSeadragon.Placement.TOP_LEFT,
true);
@@ -286,7 +286,7 @@
assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
var wideImage = viewer.world.getItemAt(2);
- wideImage.fitInBounds(
+ wideImage.fitBounds(
new OpenSeadragon.Rect(0, 0, 1, 2),
OpenSeadragon.Placement.BOTTOM_RIGHT,
true);
@@ -303,4 +303,48 @@
]);
});
+ asyncTest('fitBounds in constructor', function() {
+
+ function assertRectEquals(actual, expected, message) {
+ ok(actual.equals(expected), message + ' should be ' +
+ expected.toString() + ', found ' + actual.toString());
+ }
+
+ viewer.addHandler('open', function openHandler() {
+ viewer.removeHandler('open', openHandler);
+
+ var squareImage = viewer.world.getItemAt(0);
+ var actualBounds = squareImage.getBounds(true);
+ var expectedBounds = new OpenSeadragon.Rect(0, 0.5, 1, 1);
+ assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
+
+ var tallImage = viewer.world.getItemAt(1);
+ actualBounds = tallImage.getBounds(true);
+ expectedBounds = new OpenSeadragon.Rect(0, 0, 0.5, 2);
+ assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
+
+ var wideImage = viewer.world.getItemAt(2);
+ actualBounds = wideImage.getBounds(true);
+ expectedBounds = new OpenSeadragon.Rect(0, 1.75, 1, 0.25);
+ assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
+ start();
+ });
+
+ viewer.open([{
+ tileSource: '/test/data/testpattern.dzi',
+ x: 1, // should be ignored
+ y: 1, // should be ignored
+ width: 2, // should be ignored
+ fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2)
+ // No placement specified, should default to CENTER
+ }, {
+ tileSource: '/test/data/tall.dzi',
+ fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2),
+ fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT
+ }, {
+ tileSource: '/test/data/wide.dzi',
+ fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2),
+ fitBoundsPlacement: OpenSeadragon.Placement.BOTTOM_RIGHT
+ }]);
+ });
})();
From a52f4cadc5b41443b2588f3a1207b0310ba4e860 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 24 Mar 2016 11:48:29 -0400
Subject: [PATCH 19/78] Fix TiledImage.fitBounds with clipping.
---
src/tiledimage.js | 40 ++++++++++++++++++++++++----------
test/modules/tiledimage.js | 44 ++++++++++++++++++++++++++++++++++++++
2 files changed, 73 insertions(+), 11 deletions(-)
diff --git a/src/tiledimage.js b/src/tiledimage.js
index a925104c..248f0ece 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -570,32 +570,50 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
fitBounds: function(bounds, anchor, immediately) {
anchor = anchor || $.Placement.CENTER;
var anchorProperties = $.Placement.properties[anchor];
- if (bounds.getAspectRatio() > this.contentAspectX) {
+ var aspectRatio = this.contentAspectX;
+ var xOffset = 0;
+ var yOffset = 0;
+ var displayedWidthRatio = 1;
+ var displayedHeightRatio = 1;
+ if (this._clip) {
+ aspectRatio = this._clip.getAspectRatio();
+ displayedWidthRatio = this._clip.width / this.source.dimensions.x;
+ displayedHeightRatio = this._clip.height / this.source.dimensions.y;
+ if (bounds.getAspectRatio() > aspectRatio) {
+ xOffset = this._clip.x / this._clip.height * bounds.height;
+ yOffset = this._clip.y / this._clip.height * bounds.height;
+ } else {
+ xOffset = this._clip.x / this._clip.width * bounds.width;
+ yOffset = this._clip.y / this._clip.width * bounds.width;
+ }
+ }
+
+ if (bounds.getAspectRatio() > aspectRatio) {
// We will have margins on the X axis
- var targetWidth = bounds.height * this.contentAspectX;
+ var height = bounds.height / displayedHeightRatio;
var marginLeft = 0;
if (anchorProperties.isHorizontallyCentered) {
- marginLeft = (bounds.width - targetWidth) / 2;
+ marginLeft = (bounds.width - bounds.height * aspectRatio) / 2;
} else if (anchorProperties.isRight) {
- marginLeft = bounds.width - targetWidth;
+ marginLeft = bounds.width - bounds.height * aspectRatio;
}
this.setPosition(
- new $.Point(bounds.x + marginLeft, bounds.y),
+ new $.Point(bounds.x - xOffset + marginLeft, bounds.y - yOffset),
immediately);
- this.setHeight(bounds.height, immediately);
+ this.setHeight(height, immediately);
} else {
// We will have margins on the Y axis
- var targetHeight = bounds.width / this.contentAspectX;
+ var width = bounds.width / displayedWidthRatio;
var marginTop = 0;
if (anchorProperties.isVerticallyCentered) {
- marginTop = (bounds.height - targetHeight) / 2;
+ marginTop = (bounds.height - bounds.width / aspectRatio) / 2;
} else if (anchorProperties.isBottom) {
- marginTop = bounds.height - targetHeight;
+ marginTop = bounds.height - bounds.width / aspectRatio;
}
this.setPosition(
- new $.Point(bounds.x, bounds.y + marginTop),
+ new $.Point(bounds.x - xOffset, bounds.y - yOffset + marginTop),
immediately);
- this.setWidth(bounds.width, immediately);
+ this.setWidth(width, immediately);
}
},
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index 76b55541..f281d076 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -347,4 +347,48 @@
fitBoundsPlacement: OpenSeadragon.Placement.BOTTOM_RIGHT
}]);
});
+
+ asyncTest('fitBounds with clipping', function() {
+
+ function assertRectEquals(actual, expected, message) {
+ ok(actual.equals(expected), message + ' should be ' +
+ expected.toString() + ', found ' + actual.toString());
+ }
+
+ viewer.addHandler('open', function openHandler() {
+ viewer.removeHandler('open', openHandler);
+
+ var squareImage = viewer.world.getItemAt(0);
+ var actualBounds = squareImage.getBounds(true);
+ var expectedBounds = new OpenSeadragon.Rect(-1, -1, 2, 2);
+ assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
+
+ var tallImage = viewer.world.getItemAt(1);
+ actualBounds = tallImage.getBounds(true);
+ expectedBounds = new OpenSeadragon.Rect(1, 1, 2, 8);
+ assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
+
+ var wideImage = viewer.world.getItemAt(2);
+ actualBounds = wideImage.getBounds(true);
+ expectedBounds = new OpenSeadragon.Rect(1, 1, 16, 4);
+ assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
+ start();
+ });
+
+ viewer.open([{
+ tileSource: '/test/data/testpattern.dzi',
+ clip: new OpenSeadragon.Rect(500, 500, 500, 500),
+ fitBounds: new OpenSeadragon.Rect(0, 0, 1, 1)
+ }, {
+ tileSource: '/test/data/tall.dzi',
+ clip: new OpenSeadragon.Rect(0, 0, 250, 100),
+ fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2),
+ fitBoundsPlacement: OpenSeadragon.Placement.TOP
+ }, {
+ tileSource: '/test/data/wide.dzi',
+ clip: new OpenSeadragon.Rect(0, 0, 100, 250),
+ fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2),
+ fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT
+ }]);
+ });
})();
From d631d975459c9a2ab2d00879e6779e5471a44172 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Thu, 24 Mar 2016 09:50:17 -0700
Subject: [PATCH 20/78] Changelog for #887 and #888
---
changelog.txt | 2 ++
1 file changed, 2 insertions(+)
diff --git a/changelog.txt b/changelog.txt
index 66572c81..abf513ec 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -28,6 +28,8 @@ OPENSEADRAGON CHANGELOG
* Fixed issue with edge smoothing with PNG tiles at high zoom (#860)
* Fixed: Images with transparency were clearing images layered below them (#861)
* Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
+* Added addOnceHandler method to EventSource (#887)
+* Added TiledImage.fitBounds method (#888)
2.1.0:
From 3e3ce188b1b032d11162a1d08cab160e888faddd Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 25 Mar 2016 16:49:58 -0400
Subject: [PATCH 21/78] Add scaleWidth and scaleHeight options to overlays.
---
changelog.txt | 1 +
src/overlay.js | 197 +++++++++++++++++++++--------------------
src/viewer.js | 8 +-
test/demo/overlay.html | 56 ++++++++++--
4 files changed, 156 insertions(+), 106 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index abf513ec..744d09b2 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -30,6 +30,7 @@ OPENSEADRAGON CHANGELOG
* Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
* Added addOnceHandler method to EventSource (#887)
* Added TiledImage.fitBounds method (#888)
+* Added scaledWidth and scaleHeight options to Rect overlays to allow to scale in only one dimension.
2.1.0:
diff --git a/src/overlay.js b/src/overlay.js
index 7e121950..2166eb2a 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -32,7 +32,7 @@
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-(function( $ ){
+(function($) {
/**
* An enumeration of positions that an overlay may be assigned relative to
@@ -75,8 +75,14 @@
* check the size of the overlay everytime it is drawn when using a
* {@link OpenSeadragon.Point} as options.location. It will improve
* performances but will cause a misalignment if the overlay size changes.
+ * @param {Boolean} [options.scaleWidth=true] Whether the width of the
+ * overlay should be adjusted when the zoom changes when using a
+ * {@link OpenSeadragon.Rect} as options.location
+ * @param {Boolean} [options.scaleHeight=true] Whether the height of the
+ * overlay should be adjusted when the zoom changes when using a
+ * {@link OpenSeadragon.Rect} as options.location
*/
- $.Overlay = function( element, location, placement ) {
+ $.Overlay = function(element, location, placement) {
/**
* onDraw callback signature used by {@link OpenSeadragon.Overlay}.
@@ -89,7 +95,7 @@
*/
var options;
- if ( $.isPlainObject( element ) ) {
+ if ($.isPlainObject(element)) {
options = element;
} else {
options = {
@@ -105,29 +111,35 @@
options.location.x,
options.location.y,
options.location.width,
- options.location.height
- );
- this.position = new $.Point(
- options.location.x,
- options.location.y
- );
- this.size = new $.Point(
- options.location.width,
- options.location.height
- );
- this.style = options.element.style;
- // rects are always top-left
- this.placement = options.location instanceof $.Point ?
+ options.location.height);
+
+ // this.position is never read by this class but is kept for backward
+ // compatibility
+ this.position = this.bounds.getTopLeft();
+
+ // this.size is only used by PointOverlay with options.checkResize === false
+ this.size = this.bounds.getSize();
+
+ this.style = options.element.style;
+
+ // rects are always top-left (RectOverlays don't use placement)
+ this.placement = options.location instanceof $.Point ?
options.placement : $.Placement.TOP_LEFT;
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
+ this.scaleWidth = options.scaleWidth === undefined ?
+ true : options.scaleWidth;
+ this.scaleHeight = options.scaleHeight === undefined ?
+ true : options.scaleHeight;
};
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
/**
+ * Internal function to adjust the position of a PointOverlay
+ * depending on it size and anchor.
* @function
* @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size
@@ -153,20 +165,20 @@
* @function
*/
destroy: function() {
- var element = this.element,
- style = this.style;
+ var element = this.element;
+ var style = this.style;
- if ( element.parentNode ) {
- element.parentNode.removeChild( element );
+ if (element.parentNode) {
+ element.parentNode.removeChild(element);
//this should allow us to preserve overlays when required between
//pages
- if ( element.prevElementParent ) {
+ if (element.prevElementParent) {
style.display = 'none';
//element.prevElementParent.insertBefore(
// element,
// element.prevNextSibling
//);
- document.body.appendChild( element );
+ document.body.appendChild(element);
}
}
@@ -177,9 +189,13 @@
style.left = "";
style.position = "";
- if ( this.scales ) {
- style.width = "";
- style.height = "";
+ if (this.scales) {
+ if (this.scaleWidth) {
+ style.width = "";
+ }
+ if (this.scaleHeight) {
+ style.height = "";
+ }
}
},
@@ -187,101 +203,88 @@
* @function
* @param {Element} container
*/
- drawHTML: function( container, viewport ) {
- var element = this.element,
- style = this.style,
- scales = this.scales,
- degrees = viewport.degrees,
- position = viewport.pixelFromPoint(
- this.bounds.getTopLeft(),
- true
- ),
- size,
- overlayCenter;
-
- if ( element.parentNode != container ) {
+ drawHTML: function(container, viewport) {
+ var element = this.element;
+ if (element.parentNode !== container) {
//save the source parent for later if we need it
- element.prevElementParent = element.parentNode;
- element.prevNextSibling = element.nextSibling;
- container.appendChild( element );
- this.size = $.getElementSize( element );
+ element.prevElementParent = element.parentNode;
+ element.prevNextSibling = element.nextSibling;
+ container.appendChild(element);
+ this.size = $.getElementSize(element);
}
- if ( scales ) {
- size = viewport.deltaPixelsFromPoints(
- this.bounds.getSize(),
- true
- );
- } else if ( this.checkResize ) {
- size = $.getElementSize( element );
- } else {
- size = this.size;
- }
+ var positionAndSize = this.scales ?
+ this._getRectOverlayPositionAndSize(viewport) :
+ this._getPointOverlayPositionAndSize(viewport);
- this.position = position;
- this.size = size;
+ var position = this.position = positionAndSize.position;
+ var size = this.size = positionAndSize.size;
- this.adjust( position, size );
-
- position = position.apply( Math.round );
- size = size.apply( Math.round );
-
- // rotate the position of the overlay
- // TODO only rotate overlays if in canvas mode
- // TODO replace the size rotation with CSS3 transforms
- // TODO add an option to overlays to not rotate with the image
- // Currently only rotates position and size
- if( degrees !== 0 && this.scales ) {
- overlayCenter = new $.Point( size.x / 2, size.y / 2 );
-
- var drawerCenter = new $.Point(
- viewport.viewer.drawer.canvas.width / 2,
- viewport.viewer.drawer.canvas.height / 2
- );
- position = position.plus( overlayCenter ).rotate(
- degrees,
- drawerCenter
- ).minus( overlayCenter );
-
- size = size.rotate( degrees, new $.Point( 0, 0 ) );
- size = new $.Point( Math.abs( size.x ), Math.abs( size.y ) );
- }
+ position = position.apply(Math.round);
+ size = size.apply(Math.round);
// call the onDraw callback if it exists to allow one to overwrite
// the drawing/positioning/sizing of the overlay
- if ( this.onDraw ) {
- this.onDraw( position, size, element );
+ if (this.onDraw) {
+ this.onDraw(position, size, this.element);
} else {
- style.left = position.x + "px";
- style.top = position.y + "px";
+ var style = this.style;
+ style.left = position.x + "px";
+ style.top = position.y + "px";
+ if (this.scales) {
+ if (this.scaleWidth) {
+ style.width = size.x + "px";
+ }
+ if (this.scaleHeight) {
+ style.height = size.y + "px";
+ }
+ }
style.position = "absolute";
- if (style.display != 'none') {
- style.display = 'block';
- }
-
- if ( scales ) {
- style.width = size.x + "px";
- style.height = size.y + "px";
+ if (style.display !== 'none') {
+ style.display = 'block';
}
}
},
+ // private
+ _getRectOverlayPositionAndSize: function(viewport) {
+ return {
+ position: viewport.pixelFromPoint(
+ this.bounds.getTopLeft(), true),
+ size: viewport.deltaPixelsFromPoints(
+ this.bounds.getSize(), true)
+ };
+ },
+
+ // private
+ _getPointOverlayPositionAndSize: function(viewport) {
+ var element = this.element;
+ var position = viewport.pixelFromPoint(
+ this.bounds.getTopLeft(), true);
+ var size = this.checkResize ? $.getElementSize(element) : this.size;
+ this.adjust(position, size);
+ return {
+ position: position,
+ size: size
+ };
+ },
+
/**
+ * Changes the location and placement of the overlay.
* @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @param {OpenSeadragon.Placement} position
*/
- update: function( location, placement ) {
- this.scales = location instanceof $.Rect;
- this.bounds = new $.Rect(
+ update: function(location, placement) {
+ this.scales = location instanceof $.Rect;
+ this.bounds = new $.Rect(
location.x,
location.y,
location.width,
- location.height
- );
+ location.height);
// rects are always top-left
- this.placement = location instanceof $.Point ?
+ this.placement = location instanceof $.Point ?
placement : $.Placement.TOP_LEFT;
},
@@ -294,4 +297,4 @@
}
};
-}( OpenSeadragon ));
+}(OpenSeadragon));
diff --git a/src/viewer.js b/src/viewer.js
index d3cce4b8..c3054768 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1788,7 +1788,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* is closed which include when changing page.
* @method
* @param {Element|String|Object} element - A reference to an element or an id for
- * the element which will be overlayed. Or an Object specifying the configuration for the overlay
+ * the element which will be overlayed. Or an Object specifying the configuration for the overlay.
+ * If using an object, see {@link OpenSeadragon.Overlay} for a list of
+ * all available options.
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location.
* @param {OpenSeadragon.Placement} placement - The position of the
@@ -2237,7 +2239,9 @@ function getOverlayObject( viewer, overlay ) {
location: location,
placement: placement,
onDraw: overlay.onDraw,
- checkResize: overlay.checkResize
+ checkResize: overlay.checkResize,
+ scaleWidth: overlay.scaleWidth,
+ scaleHeight: overlay.scaleHeight
});
}
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index a3be7724..d2dde513 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -14,7 +14,7 @@
<body>
<div id="contentDiv" class="openseadragon1"></div>
<div id="annotation-div">
- <input type="button" value="Hide Overlay" id="hideOverlay">
+ <input type="button" value="Hide Overlays" id="hideOverlays">
</div>
<script type="text/javascript">
@@ -22,19 +22,61 @@
var viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
- tileSources: "../data/testpattern.dzi"
+ tileSources: "../data/testpattern.dzi",
+ minZoomImageRatio: 0,
+ maxZoomPixelRatio: 10
});
viewer.addHandler("open", function(event) {
var elt = document.createElement("div");
+ elt.className = "runtime-overlay";
elt.style.background = "green";
- elt.id = "runtime-overlay";
elt.style.border = "1px solid red";
- viewer.addOverlay( elt, new OpenSeadragon.Rect(0.2, 0.2, 0.75, 0.75) );
- });
+ elt.textContent = "Scaled overlay";
+ viewer.addOverlay(elt, new OpenSeadragon.Rect(0.2, 0.2, 0.1, 0.1));
- $("#hideOverlay").click(function(){
- $("#runtime-overlay").toggle();
+ elt = document.createElement("div");
+ elt.className = "runtime-overlay";
+ elt.style.background = "white";
+ elt.style.border = "3px solid red";
+ elt.style.width = "100px";
+ elt.textContent = "Scaled vertically";
+ viewer.addOverlay({
+ element: elt,
+ location: new OpenSeadragon.Rect(0.6, 0.6, 0.1, 0.1),
+ scaleWidth: false
+ });
+
+ elt = document.createElement("div");
+ elt.className = "runtime-overlay";
+ elt.style.background = "white";
+ elt.style.opacity = "0.5";
+ elt.style.border = "1px solid blue";
+ elt.style.height = "100px";
+ elt.textContent = "Scaled horizontally";
+ viewer.addOverlay({
+ element: elt,
+ location: new OpenSeadragon.Rect(0.1, 0.5, 0.1, 0.1),
+ scaleHeight: false
+ });
+
+ elt = document.createElement("div");
+ elt.className = "runtime-overlay";
+ elt.style.background = "white";
+ elt.style.opacity = "0.5";
+ elt.style.border = "1px solid pink";
+ elt.style.width = "100px";
+ elt.style.height = "100px";
+ elt.textContent = "Not scaled, centered in the middle";
+ viewer.addOverlay({
+ element: elt,
+ location: new OpenSeadragon.Point(0.5, 0.5),
+ placement: OpenSeadragon.Placement.CENTER
+ });
+
+ });
+ $("#hideOverlays").click(function(){
+ $(".runtime-overlay").toggle();
});
</script>
From cac5f6dec3d86fa6972434e75b113f4d65262a12 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Mon, 28 Mar 2016 17:06:59 -0400
Subject: [PATCH 22/78] Add overlays rotation support.
---
src/overlay.js | 88 +++++++++++++++++++++++++++++++++++++++++++++-----
src/viewer.js | 3 +-
2 files changed, 82 insertions(+), 9 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index 2166eb2a..7ee7941a 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -55,6 +55,23 @@
*/
$.OverlayPlacement = $.Placement;
+ /**
+ * An enumeration of possible ways to handle overlays rotation
+ * @memberOf OpenSeadragon
+ * @static
+ * @property {Number} NO_ROTATION The overlay ignore the viewport rotation.
+ * @property {Number} EXACT The overlay use CSS 3 transforms to rotate with
+ * the viewport. If the overlay contains text, it will get rotated as well.
+ * @property {Number} BOUNDING_BOX The overlay adjusts for rotation by
+ * taking the size of the bounding box of the rotated bounds.
+ * Only valid for overlays with Rect location and scalable in both directions.
+ */
+ $.OverlayRotationMode = {
+ NO_ROTATION: 1,
+ EXACT: 2,
+ BOUNDING_BOX: 3
+ };
+
/**
* @class Overlay
* @classdesc Provides a way to float an HTML element on top of the viewer element.
@@ -81,6 +98,8 @@
* @param {Boolean} [options.scaleHeight=true] Whether the height of the
* overlay should be adjusted when the zoom changes when using a
* {@link OpenSeadragon.Rect} as options.location
+ * @param {Boolean} [options.rotationMode=OpenSeadragon.OverlayRotationMode.EXACT]
+ * How to handle the rotation of the viewport.
*/
$.Overlay = function(element, location, placement) {
@@ -132,13 +151,14 @@
true : options.scaleWidth;
this.scaleHeight = options.scaleHeight === undefined ?
true : options.scaleHeight;
+ this.rotationMode = options.rotationMode || $.OverlayRotationMode.EXACT;
};
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
/**
- * Internal function to adjust the position of a PointOverlay
+ * Internal function to adjust the position of a point-based overlay
* depending on it size and anchor.
* @function
* @param {OpenSeadragon.Point} position
@@ -219,6 +239,7 @@
var position = this.position = positionAndSize.position;
var size = this.size = positionAndSize.size;
+ var rotate = positionAndSize.rotate;
position = position.apply(Math.round);
size = size.apply(Math.round);
@@ -239,6 +260,13 @@
style.height = size.y + "px";
}
}
+ if (rotate) {
+ style.transformOrigin = this._getTransformOrigin();
+ style.transform = "rotate(" + rotate + "deg)";
+ } else {
+ style.transformOrigin = "";
+ style.transform = "";
+ }
style.position = "absolute";
if (style.display !== 'none') {
@@ -249,27 +277,71 @@
// private
_getRectOverlayPositionAndSize: function(viewport) {
+ var position = viewport.pixelFromPoint(
+ this.bounds.getTopLeft(), true);
+ var size = viewport.deltaPixelsFromPointsNoRotate(
+ this.bounds.getSize(), true);
+ var rotate = 0;
+ // BOUNDING_BOX is only valid if both directions get scaled.
+ // Get replaced by exact otherwise.
+ if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
+ this.scaleWidth && this.scaleHeight) {
+ var boundingBox = new $.Rect(
+ position.x, position.y, size.x, size.y, viewport.degrees)
+ .getBoundingBox();
+ position = boundingBox.getTopLeft();
+ size = boundingBox.getSize();
+ } else if (this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
+ rotate = viewport.degrees;
+ }
return {
- position: viewport.pixelFromPoint(
- this.bounds.getTopLeft(), true),
- size: viewport.deltaPixelsFromPoints(
- this.bounds.getSize(), true)
+ position: position,
+ size: size,
+ rotate: rotate
};
},
// private
_getPointOverlayPositionAndSize: function(viewport) {
- var element = this.element;
var position = viewport.pixelFromPoint(
this.bounds.getTopLeft(), true);
- var size = this.checkResize ? $.getElementSize(element) : this.size;
+ var size = this.checkResize ?
+ $.getElementSize(this.element) : this.size;
this.adjust(position, size);
+ // For point overlays, BOUNDING_BOX is invalid and get replaced by EXACT.
+ var rotate = this.rotationMode === $.OverlayRotationMode.NO_ROTATION ?
+ 0 : viewport.degrees;
return {
position: position,
- size: size
+ size: size,
+ rotate: rotate
};
},
+ // private
+ _getTransformOrigin: function() {
+ if (this.scales) {
+ return "top left";
+ }
+
+ var result = "";
+ var properties = $.Placement.properties[this.placement];
+ if (!properties) {
+ return result;
+ }
+ if (properties.isLeft) {
+ result = "left";
+ } else if (properties.isRight) {
+ result = "right";
+ }
+ if (properties.isTop) {
+ result += " top";
+ } else if (properties.isBottom) {
+ result += " bottom";
+ }
+ return result;
+ },
+
/**
* Changes the location and placement of the overlay.
* @function
diff --git a/src/viewer.js b/src/viewer.js
index c3054768..49c36e31 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2241,7 +2241,8 @@ function getOverlayObject( viewer, overlay ) {
onDraw: overlay.onDraw,
checkResize: overlay.checkResize,
scaleWidth: overlay.scaleWidth,
- scaleHeight: overlay.scaleHeight
+ scaleHeight: overlay.scaleHeight,
+ rotationMode: overlay.rotationMode
});
}
From f6c09ca7165d289317305461e131072db829b4f0 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Mon, 28 Mar 2016 17:07:47 -0400
Subject: [PATCH 23/78] Add viewport.viewportToViewerElementRectangle
---
src/rectangle.js | 29 ++++++++++++++++++++++++++++-
src/viewport.js | 14 ++++++++++++++
2 files changed, 42 insertions(+), 1 deletion(-)
diff --git a/src/rectangle.js b/src/rectangle.js
index cae13e88..afe5da18 100644
--- a/src/rectangle.js
+++ b/src/rectangle.js
@@ -110,6 +110,33 @@ $.Rect = function(x, y, width, height, degrees) {
}
};
+/**
+ * Builds a rectangle having the 3 specified points as summits.
+ * @static
+ * @memberof OpenSeadragon.Rect
+ * @param {OpenSeadragon.Point} topLeft
+ * @param {OpenSeadragon.Point} topRight
+ * @param {OpenSeadragon.Point} bottomLeft
+ * @returns {OpenSeadragon.Rect}
+ */
+$.Rect.fromSummits = function(topLeft, topRight, bottomLeft) {
+ var width = topLeft.distanceTo(topRight);
+ var height = topLeft.distanceTo(bottomLeft);
+ var diff = topRight.minus(topLeft);
+ var radians = Math.atan(diff.y / diff.x);
+ if (diff.x < 0) {
+ radians += Math.PI;
+ } else if (diff.y < 0) {
+ radians += 2 * Math.PI;
+ }
+ return new $.Rect(
+ topLeft.x,
+ topLeft.y,
+ width,
+ height,
+ radians / Math.PI * 180);
+};
+
/** @lends OpenSeadragon.Rect.prototype */
$.Rect.prototype = {
/**
@@ -284,7 +311,7 @@ $.Rect.prototype = {
* Rotates a rectangle around a point.
* @function
* @param {Number} degrees The angle in degrees to rotate.
- * @param {OpenSeadragon.Point} pivot The point about which to rotate.
+ * @param {OpenSeadragon.Point} [pivot] The point about which to rotate.
* Defaults to the center of the rectangle.
* @return {OpenSeadragon.Rect}
*/
diff --git a/src/viewport.js b/src/viewport.js
index 63b4dcaf..821d8075 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1262,6 +1262,20 @@ $.Viewport.prototype = {
return this.pixelFromPoint( point, true );
},
+ /**
+ * Convert a rectangle in viewport coordinates to pixel coordinates relative
+ * to the viewer element.
+ * @param {OpenSeadragon.Rect} rectangle the rectangle to convert
+ * @returns {OpenSeadragon.Rect} the converted rectangle
+ */
+ viewportToViewerElementRectangle: function(rectangle) {
+ return $.Rect.fromSummits(
+ this.pixelFromPoint(rectangle.getTopLeft(), true),
+ this.pixelFromPoint(rectangle.getTopRight(), true),
+ this.pixelFromPoint(rectangle.getBottomLeft(), true)
+ );
+ },
+
/**
* Convert pixel coordinates relative to the window to viewport coordinates.
* @param {OpenSeadragon.Point} pixel
From 33bd943b7a5bad0f34edcee0982349dff8515e5e Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 29 Mar 2016 15:29:36 -0400
Subject: [PATCH 24/78] Set overlays position and size with floating point
values.
---
src/overlay.js | 3 -
test/modules/overlays.js | 121 +++++++++++++++++++++++----------------
2 files changed, 72 insertions(+), 52 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index 7ee7941a..4e7552c6 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -241,9 +241,6 @@
var size = this.size = positionAndSize.size;
var rotate = positionAndSize.rotate;
- position = position.apply(Math.round);
- size = size.apply(Math.round);
-
// call the onDraw callback if it exists to allow one to overwrite
// the drawing/positioning/sizing of the overlay
if (this.onDraw) {
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index bb317050..077908cb 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -2,6 +2,8 @@
( function() {
var viewer;
+ // jQuery.position can give results quite different than what set in style.left
+ var epsilon = 1;
module( "Overlays", {
setup: function() {
@@ -237,30 +239,38 @@
} ]
} );
- function checkOverlayPosition( contextMessage ) {
+ function checkOverlayPosition(contextMessage) {
var viewport = viewer.viewport;
var expPosition = viewport.imageToViewerElementCoordinates(
- new OpenSeadragon.Point( 13, 120 ) ).apply( Math.round );
- var actPosition = $( "#overlay" ).position();
- equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage );
+ new OpenSeadragon.Point(13, 120));
+ var actPosition = $("#overlay").position();
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Y position mismatch " + contextMessage);
- var zoom = viewport.viewportToImageZoom( viewport.getZoom( true ) );
- var expectedWidth = Math.round( 124 * zoom );
- var expectedHeight = Math.round( 132 * zoom );
- equal( $( "#overlay" ).width(), expectedWidth, "Width mismatch " + contextMessage );
- equal( $( "#overlay" ).height( ), expectedHeight, "Height mismatch " + contextMessage );
+ var zoom = viewport.viewportToImageZoom(viewport.getZoom(true));
+ var expectedWidth = 124 * zoom;
+ var expectedHeight = 132 * zoom;
+ Util.assessNumericValue($("#overlay").width(), expectedWidth, epsilon,
+ "Width mismatch " + contextMessage);
+ Util.assessNumericValue($("#overlay").height(), expectedHeight, epsilon,
+ "Height mismatch " + contextMessage);
expPosition = viewport.imageToViewerElementCoordinates(
- new OpenSeadragon.Point( 400, 500 ) ).apply( Math.round );
- actPosition = $( "#fixed-overlay" ).position();
- equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+ new OpenSeadragon.Point(400, 500));
+ actPosition = $("#fixed-overlay").position();
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "Fixed overlay X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Fixed overlay Y position mismatch " + contextMessage);
- equal( $( "#fixed-overlay" ).width(), 70, "Fixed overlay width mismatch " + contextMessage );
- equal( $( "#fixed-overlay" ).height( ), 60, "Fixed overlay height mismatch " + contextMessage );
+ Util.assessNumericValue($("#fixed-overlay").width(), 70, epsilon,
+ "Fixed overlay width mismatch " + contextMessage);
+ Util.assessNumericValue($("#fixed-overlay").height(), 60, epsilon,
+ "Fixed overlay height mismatch " + contextMessage);
}
waitForViewer( function() {
@@ -305,25 +315,33 @@
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
- new OpenSeadragon.Point( 0.2, 0.1 ) ).apply( Math.round );
+ new OpenSeadragon.Point(0.2, 0.1));
var actPosition = $( "#overlay" ).position();
- equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage );
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Y position mismatch " + contextMessage);
var expectedSize = viewport.deltaPixelsFromPoints(
- new OpenSeadragon.Point( 0.5, 0.1 ) );
- equal( $( "#overlay" ).width(), expectedSize.x, "Width mismatch " + contextMessage );
- equal( $( "#overlay" ).height(), expectedSize.y, "Height mismatch " + contextMessage );
+ new OpenSeadragon.Point(0.5, 0.1));
+ Util.assessNumericValue($("#overlay").width(), expectedSize.x, epsilon,
+ "Width mismatch " + contextMessage);
+ Util.assessNumericValue($("#overlay").height(), expectedSize.y, epsilon,
+ "Height mismatch " + contextMessage);
expPosition = viewport.viewportToViewerElementCoordinates(
- new OpenSeadragon.Point( 0.5, 0.6 ) ).apply( Math.round );
- actPosition = $( "#fixed-overlay" ).position();
- equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+ new OpenSeadragon.Point(0.5, 0.6));
+ actPosition = $("#fixed-overlay").position();
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "Fixed overlay X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Fixed overlay Y position mismatch " + contextMessage);
- equal( $( "#fixed-overlay" ).width(), 70, "Fixed overlay width mismatch " + contextMessage );
- equal( $( "#fixed-overlay" ).height( ), 60, "Fixed overlay height mismatch " + contextMessage );
+ Util.assessNumericValue($("#fixed-overlay").width(), 70, epsilon,
+ "Fixed overlay width mismatch " + contextMessage);
+ Util.assessNumericValue($("#fixed-overlay").height(), 60, epsilon,
+ "Fixed overlay height mismatch " + contextMessage);
}
waitForViewer( function() {
@@ -373,22 +391,25 @@
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
- new OpenSeadragon.Point( 0.2, 0.1 ) ).apply( Math.round );
- var actPosition = $( "#overlay" ).position();
- equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage );
+ new OpenSeadragon.Point(0.2, 0.1));
+ var actPosition = $("#overlay").position();
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Y position mismatch " + contextMessage);
}
function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
- new OpenSeadragon.Point( 0.5, 0.6 ) )
- .apply( Math.round )
- .plus( expectedOffset );
- var actPosition = $( "#fixed-overlay" ).position();
- equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+ new OpenSeadragon.Point(0.5, 0.6))
+ .plus(expectedOffset);
+ var actPosition = $("#fixed-overlay").position();
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "Fixed overlay X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Fixed overlay Y position mismatch " + contextMessage);
}
waitForViewer( function() {
@@ -448,12 +469,13 @@
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
- new OpenSeadragon.Point( 0.5, 0.6 ) )
- .apply( Math.round )
- .plus( expectedOffset );
- var actPosition = $( "#fixed-overlay" ).position();
- equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+ new OpenSeadragon.Point(0.5, 0.6))
+ .plus(expectedOffset);
+ var actPosition = $("#fixed-overlay").position();
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "Fixed overlay X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Fixed overlay Y position mismatch " + contextMessage);
}
waitForViewer( function() {
@@ -502,12 +524,13 @@
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
- new OpenSeadragon.Point( 0.5, 0.6 ) )
- .apply( Math.round )
- .plus( expectedOffset );
+ new OpenSeadragon.Point(0.5, 0.6))
+ .plus(expectedOffset);
var actPosition = $( "#fixed-overlay" ).position();
- equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
- equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+ Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
+ "Fixed overlay X position mismatch " + contextMessage);
+ Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
+ "Fixed overlay Y position mismatch " + contextMessage);
}
waitForViewer( function() {
From ffbb8b2cfe6444f7c4427a4c8b5c4a77fd278837 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 30 Mar 2016 11:16:29 -0400
Subject: [PATCH 25/78] Add support of overlays rotation on IE9.
---
src/openseadragon.js | 43 +++++++++++++++++++++++++++++++++++++++++++
src/overlay.js | 18 ++++++++++++------
2 files changed, 55 insertions(+), 6 deletions(-)
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 07523516..94c7de6a 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -1337,6 +1337,49 @@ if (typeof define === 'function' && define.amd) {
return window.getComputedStyle( element, "" );
},
+ /**
+ * Returns the property with the correct vendor prefix appended.
+ * @param {String} property the property name
+ * @returns {String} the property with the correct prefix or null if not
+ * supported.
+ */
+ getCssPropertyWithVendorPrefix: function(property) {
+ var memo = {};
+
+ $.getCssPropertyWithVendorPrefix = function(property) {
+ if (memo[property] !== undefined) {
+ return memo[property];
+ }
+ var style = document.createElement('div').style;
+ var result = null;
+ if (style[property] !== undefined) {
+ result = property;
+ } else {
+ var prefixes = ['Webkit', 'Moz', 'MS', 'O',
+ 'webkit', 'moz', 'ms', 'o'];
+ var suffix = $.capitalizeFirstLetter(property);
+ for (var i = 0; i < prefixes.length; i++) {
+ var prop = prefixes[i] + suffix;
+ if (style[prop] !== undefined) {
+ result = prop;
+ break;
+ }
+ }
+ }
+ memo[property] = result;
+ return result;
+ };
+ return $.getCssPropertyWithVendorPrefix(property);
+ },
+
+ /**
+ * Capitalizes the first letter of a string
+ * @param {String} string
+ * @returns {String} The string with the first letter capitalized
+ */
+ capitalizeFirstLetter: function(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+ },
/**
* Determines if a point is within the bounding rectangle of the given element (hit-test).
diff --git a/src/overlay.js b/src/overlay.js
index 4e7552c6..c8a5ed22 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -257,12 +257,18 @@
style.height = size.y + "px";
}
}
- if (rotate) {
- style.transformOrigin = this._getTransformOrigin();
- style.transform = "rotate(" + rotate + "deg)";
- } else {
- style.transformOrigin = "";
- style.transform = "";
+ var transformOriginProp = $.getCssPropertyWithVendorPrefix(
+ 'transformOrigin');
+ var transformProp = $.getCssPropertyWithVendorPrefix(
+ 'transform');
+ if (transformOriginProp && transformProp) {
+ if (rotate) {
+ style[transformOriginProp] = this._getTransformOrigin();
+ style[transformProp] = "rotate(" + rotate + "deg)";
+ } else {
+ style[transformOriginProp] = "";
+ style[transformProp] = "";
+ }
}
style.position = "absolute";
From 577327a6291e762dafc615cceb7bb9364d86a91a Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 30 Mar 2016 15:12:50 -0400
Subject: [PATCH 26/78] Change overlays to now always having Point location.
---
src/overlay.js | 220 +++++++++++++++++++++++------------------
src/viewer.js | 4 +-
test/demo/overlay.html | 30 ++++--
3 files changed, 147 insertions(+), 107 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index c8a5ed22..e9d2d299 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -81,23 +81,23 @@
* @param {Element} options.element
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} options.location - The
* location of the overlay on the image. If a {@link OpenSeadragon.Point}
- * is specified, the overlay will keep a constant size independently of the
- * zoom. If a {@link OpenSeadragon.Rect} is specified, the overlay size will
- * be adjusted when the zoom changes.
+ * is specified, the overlay will be located at this location with respect
+ * to the placement option. If a {@link OpenSeadragon.Rect} is specified,
+ * the overlay will be placed at this location with the corresponding width
+ * and height and placement TOP_LEFT.
* @param {OpenSeadragon.Placement} [options.placement=OpenSeadragon.Placement.TOP_LEFT]
- * Relative position to the viewport.
- * Only used if location is a {@link OpenSeadragon.Point}.
+ * Defines what part of the overlay should be at the specified options.location
* @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
* @param {Boolean} [options.checkResize=true] Set to false to avoid to
- * check the size of the overlay everytime it is drawn when using a
- * {@link OpenSeadragon.Point} as options.location. It will improve
- * performances but will cause a misalignment if the overlay size changes.
- * @param {Boolean} [options.scaleWidth=true] Whether the width of the
- * overlay should be adjusted when the zoom changes when using a
- * {@link OpenSeadragon.Rect} as options.location
- * @param {Boolean} [options.scaleHeight=true] Whether the height of the
- * overlay should be adjusted when the zoom changes when using a
- * {@link OpenSeadragon.Rect} as options.location
+ * check the size of the overlay everytime it is drawn in the directions
+ * which are not scaled. It will improve performances but will cause a
+ * misalignment if the overlay size changes.
+ * @param {Number} [options.width] The width of the overlay in viewport
+ * coordinates. If specified, the width of the overlay will be adjusted when
+ * the zoom changes.
+ * @param {Number} [options.height] The height of the overlay in viewport
+ * coordinates. If specified, the height of the overlay will be adjusted when
+ * the zoom changes.
* @param {Boolean} [options.rotationMode=OpenSeadragon.OverlayRotationMode.EXACT]
* How to handle the rotation of the viewport.
*/
@@ -124,42 +124,37 @@
};
}
- this.element = options.element;
- this.scales = options.location instanceof $.Rect;
- this.bounds = new $.Rect(
- options.location.x,
- options.location.y,
- options.location.width,
- options.location.height);
-
- // this.position is never read by this class but is kept for backward
- // compatibility
- this.position = this.bounds.getTopLeft();
-
- // this.size is only used by PointOverlay with options.checkResize === false
- this.size = this.bounds.getSize();
-
+ this.element = options.element;
this.style = options.element.style;
-
- // rects are always top-left (RectOverlays don't use placement)
- this.placement = options.location instanceof $.Point ?
- options.placement : $.Placement.TOP_LEFT;
- this.onDraw = options.onDraw;
- this.checkResize = options.checkResize === undefined ?
- true : options.checkResize;
- this.scaleWidth = options.scaleWidth === undefined ?
- true : options.scaleWidth;
- this.scaleHeight = options.scaleHeight === undefined ?
- true : options.scaleHeight;
- this.rotationMode = options.rotationMode || $.OverlayRotationMode.EXACT;
+ this._init(options);
};
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
+ // private
+ _init: function(options) {
+ this.location = options.location;
+ this.placement = options.placement === undefined ?
+ $.Placement.TOP_LEFT : options.placement;
+ this.onDraw = options.onDraw;
+ this.checkResize = options.checkResize === undefined ?
+ true : options.checkResize;
+ this.width = options.width === undefined ? null : options.width;
+ this.height = options.height === undefined ? null : options.height;
+ this.rotationMode = options.rotationMode || $.OverlayRotationMode.EXACT;
+
+ if (this.location instanceof $.Rect) {
+ this.width = this.location.width;
+ this.height = this.location.height;
+ this.location = this.location.getTopLeft();
+ this.placement = $.Placement.TOP_LEFT;
+ }
+ },
+
/**
- * Internal function to adjust the position of a point-based overlay
- * depending on it size and anchor.
+ * Internal function to adjust the position of an overlay
+ * depending on it size and placement.
* @function
* @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size
@@ -209,13 +204,19 @@
style.left = "";
style.position = "";
- if (this.scales) {
- if (this.scaleWidth) {
- style.width = "";
- }
- if (this.scaleHeight) {
- style.height = "";
- }
+ if (this.width !== null) {
+ style.width = "";
+ }
+ if (this.height !== null) {
+ style.height = "";
+ }
+ var transformOriginProp = $.getCssPropertyWithVendorPrefix(
+ 'transformOrigin');
+ var transformProp = $.getCssPropertyWithVendorPrefix(
+ 'transform');
+ if (transformOriginProp && transformProp) {
+ style[transformOriginProp] = "";
+ style[transformProp] = "";
}
},
@@ -233,11 +234,9 @@
this.size = $.getElementSize(element);
}
- var positionAndSize = this.scales ?
- this._getRectOverlayPositionAndSize(viewport) :
- this._getPointOverlayPositionAndSize(viewport);
+ var positionAndSize = this._getOverlayPositionAndSize(viewport);
- var position = this.position = positionAndSize.position;
+ var position = positionAndSize.position;
var size = this.size = positionAndSize.size;
var rotate = positionAndSize.rotate;
@@ -249,13 +248,11 @@
var style = this.style;
style.left = position.x + "px";
style.top = position.y + "px";
- if (this.scales) {
- if (this.scaleWidth) {
- style.width = size.x + "px";
- }
- if (this.scaleHeight) {
- style.height = size.y + "px";
- }
+ if (this.width !== null) {
+ style.width = size.x + "px";
+ }
+ if (this.height !== null) {
+ style.height = size.y + "px";
}
var transformOriginProp = $.getCssPropertyWithVendorPrefix(
'transformOrigin');
@@ -279,16 +276,38 @@
},
// private
- _getRectOverlayPositionAndSize: function(viewport) {
- var position = viewport.pixelFromPoint(
- this.bounds.getTopLeft(), true);
- var size = viewport.deltaPixelsFromPointsNoRotate(
- this.bounds.getSize(), true);
+ _getOverlayPositionAndSize: function(viewport) {
+ var position = viewport.pixelFromPoint(this.location, true);
+ var width = this.size.x;
+ var height = this.size.y;
+ if (this.width !== null || this.height !== null) {
+ var scaledSize = viewport.deltaPixelsFromPointsNoRotate(
+ new $.Point(this.width || 0, this.height || 0), true);
+ if (this.width !== null) {
+ width = scaledSize.x;
+ }
+ if (this.height !== null) {
+ height = scaledSize.y;
+ }
+ }
+ if (this.checkResize &&
+ (this.width === null || this.height === null)) {
+ var eltSize = this.size = $.getElementSize(this.element);
+ if (this.width === null) {
+ width = eltSize.x;
+ }
+ if (this.height === null) {
+ height = eltSize.y;
+ }
+ }
+ var size = new $.Point(width, height);
+ this.adjust(position, size);
+
var rotate = 0;
// BOUNDING_BOX is only valid if both directions get scaled.
- // Get replaced by exact otherwise.
+ // Get replaced by EXACT otherwise.
if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
- this.scaleWidth && this.scaleHeight) {
+ this.width !== null && this.height !== null) {
var boundingBox = new $.Rect(
position.x, position.y, size.x, size.y, viewport.degrees)
.getBoundingBox();
@@ -297,23 +316,7 @@
} else if (this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
rotate = viewport.degrees;
}
- return {
- position: position,
- size: size,
- rotate: rotate
- };
- },
- // private
- _getPointOverlayPositionAndSize: function(viewport) {
- var position = viewport.pixelFromPoint(
- this.bounds.getTopLeft(), true);
- var size = this.checkResize ?
- $.getElementSize(this.element) : this.size;
- this.adjust(position, size);
- // For point overlays, BOUNDING_BOX is invalid and get replaced by EXACT.
- var rotate = this.rotationMode === $.OverlayRotationMode.NO_ROTATION ?
- 0 : viewport.degrees;
return {
position: position,
size: size,
@@ -346,29 +349,52 @@
},
/**
- * Changes the location and placement of the overlay.
+ * Changes the overlay settings.
* @function
- * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
+ * @param {OpenSeadragon.Point|OpenSeadragon.Rect|Object} location
+ * If an object is specified, the options are the same than the constructor
+ * except for the element which can not be changed.
* @param {OpenSeadragon.Placement} position
*/
update: function(location, placement) {
- this.scales = location instanceof $.Rect;
- this.bounds = new $.Rect(
- location.x,
- location.y,
- location.width,
- location.height);
- // rects are always top-left
- this.placement = location instanceof $.Point ?
- placement : $.Placement.TOP_LEFT;
+ var options = $.isPlainObject(location) ? location : {
+ location: location,
+ placement: placement
+ };
+ this._init({
+ location: options.location || this.location,
+ placement: options.placement !== undefined ?
+ options.placement : this.placement,
+ onDraw: options.onDraw || this.onDraw,
+ checkResize: options.checkResize || this.checkResize,
+ width: options.width !== undefined ? options.width : this.width,
+ height: options.height !== undefined ? options.height : this.height,
+ rotationMode: options.rotationMode || this.rotationMode
+ });
},
/**
+ * Returns the current bounds of the overlay in viewport coordinates
* @function
+ * @param {OpenSeadragon.Viewport} [viewport] the viewport
* @returns {OpenSeadragon.Rect} overlay bounds
*/
- getBounds: function() {
- return this.bounds.clone();
+ getBounds: function(viewport) {
+ var width = this.width;
+ var height = this.height;
+ if (width === null || height === null) {
+ $.console.assert(viewport, 'The viewport must be specified to' +
+ ' get the bounds of a not entirely scaling overlay');
+ var size = viewport.deltaPointsFromPixels(this.size, true);
+ if (width === null) {
+ width = size.x;
+ }
+ if (height === null) {
+ height = size.y;
+ }
+ }
+ return new $.Rect(
+ this.location.x, this.location.y, width, height);
}
};
diff --git a/src/viewer.js b/src/viewer.js
index 49c36e31..c1e34119 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2240,8 +2240,8 @@ function getOverlayObject( viewer, overlay ) {
placement: placement,
onDraw: overlay.onDraw,
checkResize: overlay.checkResize,
- scaleWidth: overlay.scaleWidth,
- scaleHeight: overlay.scaleHeight,
+ width: overlay.width,
+ height: overlay.height,
rotationMode: overlay.rotationMode
});
}
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index d2dde513..57435014 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -15,6 +15,8 @@
<div id="contentDiv" class="openseadragon1"></div>
<div id="annotation-div">
<input type="button" value="Hide Overlays" id="hideOverlays">
+ <input type="button" value="Rotate" id="rotate">
+ <span id="degrees">0deg</span>
</div>
<script type="text/javascript">
@@ -31,9 +33,14 @@
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "green";
- elt.style.border = "1px solid red";
+ elt.style.outline = "3px solid red";
+ elt.style.opacity = "0.7";
elt.textContent = "Scaled overlay";
- viewer.addOverlay(elt, new OpenSeadragon.Rect(0.2, 0.2, 0.1, 0.1));
+ viewer.addOverlay({
+ element: elt,
+ location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),
+ rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
+ });
elt = document.createElement("div");
elt.className = "runtime-overlay";
@@ -43,8 +50,9 @@
elt.textContent = "Scaled vertically";
viewer.addOverlay({
element: elt,
- location: new OpenSeadragon.Rect(0.6, 0.6, 0.1, 0.1),
- scaleWidth: false
+ location: new OpenSeadragon.Point(0.6, 0.6),
+ height: 0.1,
+ placement: OpenSeadragon.Placement.TOP_LEFT
});
elt = document.createElement("div");
@@ -56,28 +64,34 @@
elt.textContent = "Scaled horizontally";
viewer.addOverlay({
element: elt,
- location: new OpenSeadragon.Rect(0.1, 0.5, 0.1, 0.1),
- scaleHeight: false
+ location: new OpenSeadragon.Point(0.1, 0.5),
+ width: 0.1,
+ rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
});
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.opacity = "0.5";
- elt.style.border = "1px solid pink";
+ elt.style.border = "5px solid pink";
elt.style.width = "100px";
elt.style.height = "100px";
elt.textContent = "Not scaled, centered in the middle";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Point(0.5, 0.5),
- placement: OpenSeadragon.Placement.CENTER
+ placement: OpenSeadragon.Placement.CENTER,
+ checkResize: false
});
});
$("#hideOverlays").click(function(){
$(".runtime-overlay").toggle();
});
+ $("#rotate").click(function() {
+ viewer.viewport.setRotation(viewer.viewport.getRotation() + 22.5);
+ $("#degrees").text(viewer.viewport.getRotation() + "deg");
+ });
</script>
</body>
From 70b39d681b5a73be170a79c9720a1113f2988159 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 31 Mar 2016 13:25:59 -0400
Subject: [PATCH 27/78] Fix viewer.addOverlay and Overlay.getBounds
---
src/overlay.js | 9 +-
src/viewer.js | 45 ++--
test/modules/overlays.js | 561 +++++++++++++++++++++++++--------------
3 files changed, 382 insertions(+), 233 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index e9d2d299..c59219f4 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -383,9 +383,9 @@
var width = this.width;
var height = this.height;
if (width === null || height === null) {
- $.console.assert(viewport, 'The viewport must be specified to' +
+ $.console.assert(!viewport, 'The viewport must be specified to' +
' get the bounds of a not entirely scaling overlay');
- var size = viewport.deltaPointsFromPixels(this.size, true);
+ var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
if (width === null) {
width = size.x;
}
@@ -393,8 +393,9 @@
height = size.y;
}
}
- return new $.Rect(
- this.location.x, this.location.y, width, height);
+ var location = this.location.clone();
+ this.adjust(location, new $.Point(width, height));
+ return new $.Rect(location.x, location.y, width, height);
}
};
diff --git a/src/viewer.js b/src/viewer.js
index c1e34119..b2d6e5f2 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2201,32 +2201,23 @@ function getOverlayObject( viewer, overlay ) {
}
var location = overlay.location;
- if ( !location ) {
- if ( overlay.width && overlay.height ) {
- location = overlay.px !== undefined ?
- viewer.viewport.imageToViewportRectangle( new $.Rect(
- overlay.px,
- overlay.py,
- overlay.width,
- overlay.height
- ) ) :
- new $.Rect(
- overlay.x,
- overlay.y,
- overlay.width,
- overlay.height
- );
- } else {
- location = overlay.px !== undefined ?
- viewer.viewport.imageToViewportCoordinates( new $.Point(
- overlay.px,
- overlay.py
- ) ) :
- new $.Point(
- overlay.x,
- overlay.y
- );
+ var width = overlay.width;
+ var height = overlay.height;
+ if (!location) {
+ var x = overlay.x;
+ var y = overlay.y;
+ if (overlay.px !== undefined) {
+ var rect = viewer.viewport.imageToViewportRectangle(new $.Rect(
+ overlay.px,
+ overlay.py,
+ width || 0,
+ height || 0));
+ x = rect.x;
+ y = rect.y;
+ width = width !== undefined ? rect.width : undefined;
+ height = height !== undefined ? rect.height : undefined;
}
+ location = new $.Point(x, y);
}
var placement = overlay.placement;
@@ -2240,8 +2231,8 @@ function getOverlayObject( viewer, overlay ) {
placement: placement,
onDraw: overlay.onDraw,
checkResize: overlay.checkResize,
- width: overlay.width,
- height: overlay.height,
+ width: width,
+ height: height,
rotationMode: overlay.rotationMode
});
}
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 077908cb..496c4f89 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -1,111 +1,111 @@
/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal, testLog */
-( function() {
+(function() {
var viewer;
// jQuery.position can give results quite different than what set in style.left
var epsilon = 1;
- module( "Overlays", {
+ module("Overlays", {
setup: function() {
- var example = $( '<div id="example-overlays"></div>' ).appendTo( "#qunit-fixture" );
- var fixedOverlay = $( '<div id="fixed-overlay"></div>' ).appendTo( example );
- fixedOverlay.width( 70 );
- fixedOverlay.height( 60 );
+ var example = $('<div id="example-overlays"></div>').appendTo("#qunit-fixture");
+ var fixedOverlay = $('<div id="fixed-overlay"></div>').appendTo(example);
+ fixedOverlay.width(70);
+ fixedOverlay.height(60);
testLog.reset();
},
teardown: function() {
resetTestVariables();
}
- } );
+ });
var resetTestVariables = function() {
- if ( viewer ) {
+ if (viewer) {
viewer.close();
}
};
- function waitForViewer( handler, count ) {
- if ( typeof count !== "number" ) {
+ function waitForViewer(handler, count) {
+ if (typeof count !== "number") {
count = 0;
}
var ready = viewer.isOpen() &&
viewer.drawer !== null &&
!viewer.world.needsDraw() &&
- Util.equalsWithVariance( viewer.viewport.getBounds( true ).x,
- viewer.viewport.getBounds().x, 0.000 ) &&
- Util.equalsWithVariance( viewer.viewport.getBounds( true ).y,
- viewer.viewport.getBounds().y, 0.000 ) &&
- Util.equalsWithVariance( viewer.viewport.getBounds( true ).width,
- viewer.viewport.getBounds().width, 0.000 );
+ Util.equalsWithVariance(viewer.viewport.getBounds(true).x,
+ viewer.viewport.getBounds().x, 0.000) &&
+ Util.equalsWithVariance(viewer.viewport.getBounds(true).y,
+ viewer.viewport.getBounds().y, 0.000) &&
+ Util.equalsWithVariance(viewer.viewport.getBounds(true).width,
+ viewer.viewport.getBounds().width, 0.000);
- if ( ready ) {
+ if (ready) {
handler();
- } else if ( count < 50 ) {
+ } else if (count < 50) {
count++;
- setTimeout( function() {
- waitForViewer( handler, count );
- }, 100 );
+ setTimeout(function() {
+ waitForViewer(handler, count);
+ }, 100);
} else {
- console.log( "waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
- ":" + viewer.world.needsDraw() );
+ console.log("waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
+ ":" + viewer.world.needsDraw());
handler();
}
}
- asyncTest( 'Overlays via viewer options', function() {
+ asyncTest('Overlays via viewer options', function() {
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
- tileSources: [ '/test/data/testpattern.dzi', '/test/data/testpattern.dzi' ],
+ tileSources: ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
x: 0.1,
y: 0.4,
width: 0.09,
height: 0.09,
id: "overlay"
- } ]
- } );
- viewer.addHandler( 'open', openHandler );
+ }]
+ });
+ viewer.addHandler('open', openHandler);
function openHandler() {
- viewer.removeHandler( 'open', openHandler );
+ viewer.removeHandler('open', openHandler);
- equal( viewer.overlays.length, 1, "Global overlay should be added." );
- equal( viewer.currentOverlays.length, 1, "Global overlay should be open." );
+ equal(viewer.overlays.length, 1, "Global overlay should be added.");
+ equal(viewer.currentOverlays.length, 1, "Global overlay should be open.");
- viewer.addHandler( 'open', openPageHandler );
- viewer.goToPage( 1 );
+ viewer.addHandler('open', openPageHandler);
+ viewer.goToPage(1);
}
function openPageHandler() {
- viewer.removeHandler( 'open', openPageHandler );
+ viewer.removeHandler('open', openPageHandler);
- equal( viewer.overlays.length, 1, "Global overlay should stay after page switch." );
- equal( viewer.currentOverlays.length, 1, "Global overlay should re-open after page switch." );
+ equal(viewer.overlays.length, 1, "Global overlay should stay after page switch.");
+ equal(viewer.currentOverlays.length, 1, "Global overlay should re-open after page switch.");
- viewer.addHandler( 'close', closeHandler );
+ viewer.addHandler('close', closeHandler);
viewer.close();
}
function closeHandler() {
- viewer.removeHandler( 'close', closeHandler );
+ viewer.removeHandler('close', closeHandler);
- equal( viewer.overlays.length, 1, "Global overlay should not be removed on close." );
- equal( viewer.currentOverlays.length, 0, "Global overlay should be closed on close." );
+ equal(viewer.overlays.length, 1, "Global overlay should not be removed on close.");
+ equal(viewer.currentOverlays.length, 0, "Global overlay should be closed on close.");
start();
}
- } );
+ });
- asyncTest( 'Page Overlays via viewer options', function() {
+ asyncTest('Page Overlays via viewer options', function() {
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
- tileSources: [ {
+ tileSources: [{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "/test/data/testpattern_files/",
@@ -117,13 +117,13 @@
Height: 1000
}
},
- overlays: [ {
+ overlays: [{
x: 0.1,
y: 0.4,
width: 0.09,
height: 0.09,
id: "overlay"
- } ]
+ }]
}, {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
@@ -136,96 +136,96 @@
Height: 1000
}
}
- } ],
+ }],
springStiffness: 100 // Faster animation = faster tests
- } );
- viewer.addHandler( 'open', openHandler );
+ });
+ viewer.addHandler('open', openHandler);
function openHandler() {
- viewer.removeHandler( 'open', openHandler );
+ viewer.removeHandler('open', openHandler);
- equal( viewer.overlays.length, 0, "No global overlay should be added." );
- equal( viewer.currentOverlays.length, 1, "Page overlay should be open." );
+ equal(viewer.overlays.length, 0, "No global overlay should be added.");
+ equal(viewer.currentOverlays.length, 1, "Page overlay should be open.");
- viewer.addHandler( 'open', openPageHandler );
- viewer.goToPage( 1 );
+ viewer.addHandler('open', openPageHandler);
+ viewer.goToPage(1);
}
function openPageHandler() {
- viewer.removeHandler( 'open', openPageHandler );
+ viewer.removeHandler('open', openPageHandler);
- equal( viewer.overlays.length, 0, "No global overlay should be added after page switch." );
- equal( viewer.currentOverlays.length, 0, "No page overlay should be opened after page switch." );
+ equal(viewer.overlays.length, 0, "No global overlay should be added after page switch.");
+ equal(viewer.currentOverlays.length, 0, "No page overlay should be opened after page switch.");
- viewer.addHandler( 'close', closeHandler );
+ viewer.addHandler('close', closeHandler);
viewer.close();
}
function closeHandler() {
- viewer.removeHandler( 'close', closeHandler );
+ viewer.removeHandler('close', closeHandler);
- equal( viewer.overlays.length, 0, "No global overlay should be added on close." );
- equal( viewer.currentOverlays.length, 0, "Page overlay should be closed on close." );
+ equal(viewer.overlays.length, 0, "No global overlay should be added on close.");
+ equal(viewer.currentOverlays.length, 0, "Page overlay should be closed on close.");
start();
}
- } );
+ });
- asyncTest( 'Overlays via addOverlay method', function() {
+ asyncTest('Overlays via addOverlay method', function() {
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
- tileSources: [ '/test/data/testpattern.dzi', '/test/data/testpattern.dzi' ],
+ tileSources: ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
springStiffness: 100 // Faster animation = faster tests
- } );
- viewer.addHandler( 'open', openHandler );
+ });
+ viewer.addHandler('open', openHandler);
function openHandler() {
- viewer.removeHandler( 'open', openHandler );
+ viewer.removeHandler('open', openHandler);
- equal( viewer.overlays.length, 0, "No global overlay should be added." );
- equal( viewer.currentOverlays.length, 0, "No overlay should be open." );
+ equal(viewer.overlays.length, 0, "No global overlay should be added.");
+ equal(viewer.currentOverlays.length, 0, "No overlay should be open.");
- var rect = new OpenSeadragon.Rect( 0.1, 0.1, 0.1, 0.1 );
- var overlay = $( "<div/>" ).prop( "id", "overlay" ).get( 0 );
- viewer.addOverlay( overlay, rect );
- equal( viewer.overlays.length, 0, "No manual overlay should be added as global overlay." );
- equal( viewer.currentOverlays.length, 1, "A manual overlay should be open." );
+ var rect = new OpenSeadragon.Rect(0.1, 0.1, 0.1, 0.1);
+ var overlay = $("<div/>").prop("id", "overlay").get(0);
+ viewer.addOverlay(overlay, rect);
+ equal(viewer.overlays.length, 0, "No manual overlay should be added as global overlay.");
+ equal(viewer.currentOverlays.length, 1, "A manual overlay should be open.");
- viewer.addHandler( 'open', openPageHandler );
- viewer.goToPage( 1 );
+ viewer.addHandler('open', openPageHandler);
+ viewer.goToPage(1);
}
function openPageHandler() {
- viewer.removeHandler( 'open', openPageHandler );
+ viewer.removeHandler('open', openPageHandler);
- equal( viewer.overlays.length, 0, "No global overlay should be added after page switch." );
- equal( viewer.currentOverlays.length, 0, "Manual overlay should be removed after page switch." );
+ equal(viewer.overlays.length, 0, "No global overlay should be added after page switch.");
+ equal(viewer.currentOverlays.length, 0, "Manual overlay should be removed after page switch.");
- viewer.addHandler( 'close', closeHandler );
+ viewer.addHandler('close', closeHandler);
viewer.close();
}
function closeHandler() {
- viewer.removeHandler( 'close', closeHandler );
+ viewer.removeHandler('close', closeHandler);
- equal( viewer.overlays.length, 0, "No global overlay should be added on close." );
- equal( viewer.currentOverlays.length, 0, "Manual overlay should be removed on close." );
+ equal(viewer.overlays.length, 0, "No global overlay should be added on close.");
+ equal(viewer.currentOverlays.length, 0, "Manual overlay should be removed on close.");
start();
}
- } );
+ });
- asyncTest( 'Overlays size in pixels', function() {
+ asyncTest('Overlays size in pixels', function() {
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
px: 13,
py: 120,
width: 124,
@@ -236,8 +236,8 @@
py: 500,
id: "fixed-overlay",
placement: "TOP_LEFT"
- } ]
- } );
+ }]
+ });
function checkOverlayPosition(contextMessage) {
var viewport = viewer.viewport;
@@ -273,31 +273,31 @@
"Fixed overlay height mismatch " + contextMessage);
}
- waitForViewer( function() {
- checkOverlayPosition( "after opening using image coordinates" );
+ waitForViewer(function() {
+ checkOverlayPosition("after opening using image coordinates");
- viewer.viewport.zoomBy( 1.1 ).panBy( new OpenSeadragon.Point( 0.1, 0.2 ) );
- waitForViewer( function() {
- checkOverlayPosition( "after zoom and pan using image coordinates" );
+ viewer.viewport.zoomBy(1.1).panBy(new OpenSeadragon.Point(0.1, 0.2));
+ waitForViewer(function() {
+ checkOverlayPosition("after zoom and pan using image coordinates");
viewer.viewport.goHome();
- waitForViewer( function() {
- checkOverlayPosition( "after goHome using image coordinates" );
+ waitForViewer(function() {
+ checkOverlayPosition("after goHome using image coordinates");
start();
- } );
- } );
+ });
+ });
- } );
- } );
+ });
+ });
- asyncTest( 'Overlays size in points', function() {
+ asyncTest('Overlays size in points', function() {
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
x: 0.2,
y: 0.1,
width: 0.5,
@@ -308,15 +308,15 @@
y: 0.6,
id: "fixed-overlay",
placement: "TOP_LEFT"
- } ]
- } );
+ }]
+ });
- function checkOverlayPosition( contextMessage ) {
+ function checkOverlayPosition(contextMessage) {
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.2, 0.1));
- var actPosition = $( "#overlay" ).position();
+ var actPosition = $("#overlay").position();
Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
"X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
@@ -344,34 +344,34 @@
"Fixed overlay height mismatch " + contextMessage);
}
- waitForViewer( function() {
- checkOverlayPosition( "after opening using viewport coordinates" );
+ waitForViewer(function() {
+ checkOverlayPosition("after opening using viewport coordinates");
- viewer.viewport.zoomBy( 1.1 ).panBy( new OpenSeadragon.Point( 0.1, 0.2 ) );
- waitForViewer( function() {
- checkOverlayPosition( "after zoom and pan using viewport coordinates" );
+ viewer.viewport.zoomBy(1.1).panBy(new OpenSeadragon.Point(0.1, 0.2));
+ waitForViewer(function() {
+ checkOverlayPosition("after zoom and pan using viewport coordinates");
viewer.viewport.goHome();
- waitForViewer( function() {
- checkOverlayPosition( "after goHome using viewport coordinates" );
+ waitForViewer(function() {
+ checkOverlayPosition("after goHome using viewport coordinates");
start();
- } );
- } );
+ });
+ });
- } );
- } );
+ });
+ });
- asyncTest( 'Overlays placement', function() {
+ asyncTest('Overlays placement', function() {
- var scalableOverlayLocation = new OpenSeadragon.Rect( 0.2, 0.1, 0.5, 0.1 );
- var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 );
+ var scalableOverlayLocation = new OpenSeadragon.Rect(0.2, 0.1, 0.5, 0.1);
+ var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
x: scalableOverlayLocation.x,
y: scalableOverlayLocation.y,
width: scalableOverlayLocation.width,
@@ -383,11 +383,11 @@
y: fixedOverlayLocation.y,
id: "fixed-overlay",
placement: "TOP_LEFT"
- } ]
- } );
+ }]
+ });
// Scalable overlays are always TOP_LEFT
- function checkScalableOverlayPosition( contextMessage ) {
+ function checkScalableOverlayPosition(contextMessage) {
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
@@ -399,7 +399,7 @@
"Y position mismatch " + contextMessage);
}
- function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
+ function checkFixedOverlayPosition(expectedOffset, contextMessage) {
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
@@ -412,60 +412,60 @@
"Fixed overlay Y position mismatch " + contextMessage);
}
- waitForViewer( function() {
+ waitForViewer(function() {
- checkScalableOverlayPosition( "with TOP_LEFT placement." );
- checkFixedOverlayPosition( new OpenSeadragon.Point( 0, 0 ),
- "with TOP_LEFT placement." );
+ checkScalableOverlayPosition("with TOP_LEFT placement.");
+ checkFixedOverlayPosition(new OpenSeadragon.Point(0, 0),
+ "with TOP_LEFT placement.");
// Check that legacy OpenSeadragon.OverlayPlacement is still working
- viewer.updateOverlay( "overlay", scalableOverlayLocation,
- OpenSeadragon.OverlayPlacement.CENTER );
- viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
- OpenSeadragon.OverlayPlacement.CENTER );
+ viewer.updateOverlay("overlay", scalableOverlayLocation,
+ OpenSeadragon.OverlayPlacement.CENTER);
+ viewer.updateOverlay("fixed-overlay", fixedOverlayLocation,
+ OpenSeadragon.OverlayPlacement.CENTER);
- setTimeout( function() {
- checkScalableOverlayPosition( "with CENTER placement." );
- checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
- "with CENTER placement." );
+ setTimeout(function() {
+ checkScalableOverlayPosition("with CENTER placement.");
+ checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
+ "with CENTER placement.");
// Check that new OpenSeadragon.Placement is working
- viewer.updateOverlay( "overlay", scalableOverlayLocation,
- OpenSeadragon.Placement.BOTTOM_RIGHT );
- viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
- OpenSeadragon.Placement.BOTTOM_RIGHT );
- setTimeout( function() {
- checkScalableOverlayPosition( "with BOTTOM_RIGHT placement." );
- checkFixedOverlayPosition( new OpenSeadragon.Point( -70, -60 ),
- "with BOTTOM_RIGHT placement." );
+ viewer.updateOverlay("overlay", scalableOverlayLocation,
+ OpenSeadragon.Placement.BOTTOM_RIGHT);
+ viewer.updateOverlay("fixed-overlay", fixedOverlayLocation,
+ OpenSeadragon.Placement.BOTTOM_RIGHT);
+ setTimeout(function() {
+ checkScalableOverlayPosition("with BOTTOM_RIGHT placement.");
+ checkFixedOverlayPosition(new OpenSeadragon.Point(-70, -60),
+ "with BOTTOM_RIGHT placement.");
start();
- }, 100 );
+ }, 100);
- }, 100 );
+ }, 100);
- } );
- } );
+ });
+ });
- asyncTest( 'Overlays placement and resizing check', function() {
+ asyncTest('Overlays placement and resizing check', function() {
- var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 );
+ var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
x: fixedOverlayLocation.x,
y: fixedOverlayLocation.y,
id: "fixed-overlay",
placement: "CENTER",
checkResize: true
- } ]
- } );
+ }]
+ });
- function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
+ function checkFixedOverlayPosition(expectedOffset, contextMessage) {
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
@@ -478,114 +478,271 @@
"Fixed overlay Y position mismatch " + contextMessage);
}
- waitForViewer( function() {
- checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
- "with overlay of size 70,60." );
+ waitForViewer(function() {
+ checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
+ "with overlay of size 70,60.");
- $( "#fixed-overlay" ).width( 50 );
- $( "#fixed-overlay" ).height( 40 );
+ $("#fixed-overlay").width(50);
+ $("#fixed-overlay").height(40);
// The resizing of the overlays is not detected by the viewer's loop.
viewer.forceRedraw();
- setTimeout( function() {
- checkFixedOverlayPosition( new OpenSeadragon.Point( -25, -20 ),
- "with overlay of size 50,40." );
+ setTimeout(function() {
+ checkFixedOverlayPosition(new OpenSeadragon.Point(-25, -20),
+ "with overlay of size 50,40.");
// Restore original size
- $( "#fixed-overlay" ).width( 70 );
- $( "#fixed-overlay" ).height( 60 );
+ $("#fixed-overlay").width(70);
+ $("#fixed-overlay").height(60);
start();
- }, 100 );
- } );
+ }, 100);
+ });
- } );
+ });
- asyncTest( 'Overlays placement and no resizing check', function() {
+ asyncTest('Overlays placement and no resizing check', function() {
- var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 );
+ var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
x: fixedOverlayLocation.x,
y: fixedOverlayLocation.y,
id: "fixed-overlay",
placement: "CENTER",
checkResize: false
- } ]
- } );
+ }]
+ });
- function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
+ function checkFixedOverlayPosition(expectedOffset, contextMessage) {
var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.5, 0.6))
.plus(expectedOffset);
- var actPosition = $( "#fixed-overlay" ).position();
+ var actPosition = $("#fixed-overlay").position();
Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage);
}
- waitForViewer( function() {
- checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
- "with overlay of size 70,60." );
+ waitForViewer(function() {
+ checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
+ "with overlay of size 70,60.");
- $( "#fixed-overlay" ).width( 50 );
- $( "#fixed-overlay" ).height( 40 );
+ $("#fixed-overlay").width(50);
+ $("#fixed-overlay").height(40);
// The resizing of the overlays is not detected by the viewer's loop.
viewer.forceRedraw();
- setTimeout( function() {
- checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
- "with overlay of size 50,40." );
+ setTimeout(function() {
+ checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
+ "with overlay of size 50,40.");
// Restore original size
- $( "#fixed-overlay" ).width( 70 );
- $( "#fixed-overlay" ).height( 60 );
+ $("#fixed-overlay").width(70);
+ $("#fixed-overlay").height(60);
start();
- }, 100 );
- } );
+ }, 100);
+ });
- } );
+ });
// ----------
asyncTest('overlays appear immediately', function() {
equal($('#immediate-overlay0').length, 0, 'overlay 0 does not exist');
equal($('#immediate-overlay1').length, 0, 'overlay 1 does not exist');
- viewer = OpenSeadragon( {
+ viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests
- overlays: [ {
+ overlays: [{
x: 0,
y: 0,
id: "immediate-overlay0"
- } ]
- } );
+ }]
+ });
viewer.addHandler('open', function() {
equal($('#immediate-overlay0').length, 1, 'overlay 0 exists');
- viewer.addOverlay( {
+ viewer.addOverlay({
x: 0,
y: 0,
id: "immediate-overlay1"
- } );
+ });
equal($('#immediate-overlay1').length, 1, 'overlay 1 exists');
start();
});
});
-} )( );
+ // ----------
+ asyncTest('Overlay scaled horizontally only', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100 // Faster animation = faster tests
+ });
+
+ viewer.addHandler('open', function() {
+ viewer.addOverlay({
+ id: "horizontally-scaled-overlay",
+ x: 0,
+ y: 0,
+ width: 1
+ });
+
+ var width = $("#horizontally-scaled-overlay").width();
+ var height = 100;
+ var zoom = 1.1;
+ $("#horizontally-scaled-overlay").get(0).style.height = height + "px";
+
+ viewer.viewport.zoomBy(zoom);
+
+ waitForViewer(function() {
+ var newWidth = $("#horizontally-scaled-overlay").width();
+ var newHeight = $("#horizontally-scaled-overlay").height();
+ equal(newWidth, width * zoom, "Width should be scaled.");
+ equal(newHeight, height, "Height should not be scaled.");
+
+ start();
+ });
+ });
+ });
+
+ // ----------
+ asyncTest('Overlay scaled vertically only', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100 // Faster animation = faster tests
+ });
+
+ viewer.addHandler('open', function() {
+ viewer.addOverlay({
+ id: "vertically-scaled-overlay",
+ x: 0,
+ y: 0,
+ height: 1
+ });
+
+ var width = 100;
+ var height = $("#vertically-scaled-overlay").height();
+ var zoom = 1.1;
+ $("#vertically-scaled-overlay").get(0).style.width = width + "px";
+
+ viewer.viewport.zoomBy(zoom);
+
+ waitForViewer(function() {
+ var newWidth = $("#vertically-scaled-overlay").width();
+ var newHeight = $("#vertically-scaled-overlay").height();
+ equal(newWidth, width, "Width should not be scaled.");
+ equal(newHeight, height * zoom, "Height should be scaled.");
+
+ start();
+ });
+ });
+ });
+
+ asyncTest('Overlay.getBounds', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100 // Faster animation = faster tests
+ });
+
+ viewer.addHandler('open', function() {
+ viewer.addOverlay({
+ id: "fully-scaled-overlay",
+ x: 1,
+ y: 1,
+ width: 1,
+ height: 1,
+ placement: OpenSeadragon.Placement.BOTTOM_RIGHT
+ });
+ viewer.addOverlay({
+ id: "horizontally-scaled-overlay",
+ x: 0.5,
+ y: 0.5,
+ width: 1,
+ placement: OpenSeadragon.Placement.CENTER
+ });
+ viewer.addOverlay({
+ id: "vertically-scaled-overlay",
+ x: 0,
+ y: 0.5,
+ height: 1,
+ placement: OpenSeadragon.Placement.LEFT
+ });
+ viewer.addOverlay({
+ id: "not-scaled-overlay",
+ x: 1,
+ y: 0,
+ placement: OpenSeadragon.Placement.TOP_RIGHT
+ });
+
+ var notScaledWidth = 100;
+ var notScaledHeight = 100;
+ $("#horizontally-scaled-overlay").get(0).style.height = notScaledHeight + "px";
+ $("#vertically-scaled-overlay").get(0).style.width = notScaledWidth + "px";
+ $("#not-scaled-overlay").get(0).style.width = notScaledWidth + "px";
+ $("#not-scaled-overlay").get(0).style.height = notScaledHeight + "px";
+
+ var notScaledSize = viewer.viewport.deltaPointsFromPixelsNoRotate(
+ new OpenSeadragon.Point(notScaledWidth, notScaledHeight));
+
+ // Force refresh to takes new dimensions into account.
+ viewer._drawOverlays();
+
+ var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
+ .getBounds();
+ var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1);
+ ok(expectedBounds.equals(actualBounds),
+ "The fully scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+
+ actualBounds = viewer.getOverlayById("horizontally-scaled-overlay")
+ .getBounds(viewer.viewport);
+ expectedBounds = new OpenSeadragon.Rect(
+ 0, 0.5 - notScaledSize.y / 2, 1, notScaledSize.y);
+ ok(expectedBounds.equals(actualBounds),
+ "The horizontally scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ actualBounds = viewer.getOverlayById("vertically-scaled-overlay")
+ .getBounds(viewer.viewport);
+ expectedBounds = new OpenSeadragon.Rect(
+ 0, 0, notScaledSize.x, 1);
+ ok(expectedBounds.equals(actualBounds),
+ "The vertically scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ actualBounds = viewer.getOverlayById("not-scaled-overlay")
+ .getBounds(viewer.viewport);
+ expectedBounds = new OpenSeadragon.Rect(
+ 1 - notScaledSize.x, 0, notScaledSize.x, notScaledSize.y);
+ ok(expectedBounds.equals(actualBounds),
+ "The not scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ start();
+ });
+ });
+
+})();
From 15a0db045e0b6a991c49c20cf87a467424e17b17 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 31 Mar 2016 15:45:44 -0400
Subject: [PATCH 28/78] Fix changelog and add comments.
---
changelog.txt | 4 +++-
src/overlay.js | 9 +++++++++
2 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/changelog.txt b/changelog.txt
index 744d09b2..962118f8 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -5,6 +5,7 @@ OPENSEADRAGON CHANGELOG
* BREAKING CHANGE: Viewport.homeBounds, Viewport.contentSize, Viewport.contentAspectX and
Viewport.contentAspectY have been removed. (#846)
+* BREAKING CHANGE: Overlay.scales, Overlay.bounds and Overlay.position have been removed. (#896)
* DEPRECATION: Viewport.setHomeBounds has been deprecated (#846)
* DEPRECATION: the Viewport constructor is now ignoring the contentSize option (#846)
* Tile edge smoothing at high zoom (#764)
@@ -30,7 +31,8 @@ OPENSEADRAGON CHANGELOG
* Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
* Added addOnceHandler method to EventSource (#887)
* Added TiledImage.fitBounds method (#888)
-* Added scaledWidth and scaleHeight options to Rect overlays to allow to scale in only one dimension.
+* Overlays can now be scaled in only one dimension by providing a point location and either width or height (#896)
+* Added full rotation support to overlays (#729, #193)
2.1.0:
diff --git a/src/overlay.js b/src/overlay.js
index c59219f4..0f276dd5 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -140,10 +140,16 @@
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
+
+ // When this.width is not null, the overlay get scaled horizontally
this.width = options.width === undefined ? null : options.width;
+
+ // When this.height is not null, the overlay get scaled vertically
this.height = options.height === undefined ? null : options.height;
+
this.rotationMode = options.rotationMode || $.OverlayRotationMode.EXACT;
+ // Having a rect as location is a syntactic sugar
if (this.location instanceof $.Rect) {
this.width = this.location.width;
this.height = this.location.height;
@@ -231,6 +237,9 @@
element.prevElementParent = element.parentNode;
element.prevNextSibling = element.nextSibling;
container.appendChild(element);
+
+ // this.size is used by overlays which don't get scaled in at
+ // least one direction when this.checkResize is set to false.
this.size = $.getElementSize(element);
}
From 05a7e5e46708df75c99cb6a49518dbbc38183685 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 31 Mar 2016 16:53:19 -0400
Subject: [PATCH 29/78] Fix bounding box rotation mode with placement other
than top left.
---
src/overlay.js | 70 +++++++++++++++++++++++++++++++++-----------------
1 file changed, 46 insertions(+), 24 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index 0f276dd5..5be33b8f 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -287,6 +287,34 @@
// private
_getOverlayPositionAndSize: function(viewport) {
var position = viewport.pixelFromPoint(this.location, true);
+ var size = this._getSizeinPixels(viewport);
+ this.adjust(position, size);
+
+ var rotate = 0;
+ if (viewport.degrees &&
+ this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
+ // BOUNDING_BOX is only valid if both directions get scaled.
+ // Get replaced by EXACT otherwise.
+ if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
+ this.width !== null && this.height !== null) {
+ var rect = new $.Rect(position.x, position.y, size.x, size.y);
+ var boundingBox = this._getBoundingBox(rect, viewport.degrees);
+ position = boundingBox.getTopLeft();
+ size = boundingBox.getSize();
+ } else {
+ rotate = viewport.degrees;
+ }
+ }
+
+ return {
+ position: position,
+ size: size,
+ rotate: rotate
+ };
+ },
+
+ // private
+ _getSizeinPixels: function(viewport) {
var width = this.size.x;
var height = this.size.y;
if (this.width !== null || this.height !== null) {
@@ -309,36 +337,30 @@
height = eltSize.y;
}
}
- var size = new $.Point(width, height);
- this.adjust(position, size);
+ return new $.Point(width, height);
+ },
- var rotate = 0;
- // BOUNDING_BOX is only valid if both directions get scaled.
- // Get replaced by EXACT otherwise.
- if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
- this.width !== null && this.height !== null) {
- var boundingBox = new $.Rect(
- position.x, position.y, size.x, size.y, viewport.degrees)
- .getBoundingBox();
- position = boundingBox.getTopLeft();
- size = boundingBox.getSize();
- } else if (this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
- rotate = viewport.degrees;
+ // private
+ _getBoundingBox: function(rect, degrees) {
+ var refPoint = new $.Point(rect.x, rect.y);
+ var properties = $.Placement.properties[this.placement];
+ if (properties) {
+ if (properties.isHorizontallyCentered) {
+ refPoint.x += rect.width / 2;
+ } else if (properties.isRight) {
+ refPoint.x += rect.width;
+ }
+ if (properties.isVerticallyCentered) {
+ refPoint.y += rect.height / 2;
+ } else if (properties.isBottom) {
+ refPoint.y += rect.height;
+ }
}
-
- return {
- position: position,
- size: size,
- rotate: rotate
- };
+ return rect.rotate(degrees, refPoint).getBoundingBox();
},
// private
_getTransformOrigin: function() {
- if (this.scales) {
- return "top left";
- }
-
var result = "";
var properties = $.Placement.properties[this.placement];
if (!properties) {
From c8ed3893ad854d35c01beb8d384612d06fc2204c Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 31 Mar 2016 16:59:26 -0400
Subject: [PATCH 30/78] Fix method name.
---
src/overlay.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index 5be33b8f..fa5ddefa 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -287,7 +287,7 @@
// private
_getOverlayPositionAndSize: function(viewport) {
var position = viewport.pixelFromPoint(this.location, true);
- var size = this._getSizeinPixels(viewport);
+ var size = this._getSizeInPixels(viewport);
this.adjust(position, size);
var rotate = 0;
@@ -314,7 +314,7 @@
},
// private
- _getSizeinPixels: function(viewport) {
+ _getSizeInPixels: function(viewport) {
var width = this.size.x;
var height = this.size.y;
if (this.width !== null || this.height !== null) {
From 0685d8a3a4a4ef1b4e4756c13bb527a227c9cba4 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 1 Apr 2016 09:19:40 -0400
Subject: [PATCH 31/78] Use outline instead of border in overlay demo.
---
test/demo/overlay.html | 59 +++++++++++++++++++++---------------------
1 file changed, 30 insertions(+), 29 deletions(-)
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index 57435014..527ebef3 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -39,41 +39,41 @@
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),
- rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
- });
-
- elt = document.createElement("div");
- elt.className = "runtime-overlay";
- elt.style.background = "white";
- elt.style.border = "3px solid red";
- elt.style.width = "100px";
- elt.textContent = "Scaled vertically";
- viewer.addOverlay({
- element: elt,
- location: new OpenSeadragon.Point(0.6, 0.6),
- height: 0.1,
- placement: OpenSeadragon.Placement.TOP_LEFT
- });
-
- elt = document.createElement("div");
- elt.className = "runtime-overlay";
- elt.style.background = "white";
- elt.style.opacity = "0.5";
- elt.style.border = "1px solid blue";
- elt.style.height = "100px";
- elt.textContent = "Scaled horizontally";
- viewer.addOverlay({
- element: elt,
- location: new OpenSeadragon.Point(0.1, 0.5),
- width: 0.1,
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
});
+ elt = document.createElement("div");
+ elt.className = "runtime-overlay";
+ elt.style.background = "white";
+ elt.style.outline = "3px solid red";
+ elt.style.width = "100px";
+ elt.textContent = "Scaled vertically";
+ viewer.addOverlay({
+ element: elt,
+ location: new OpenSeadragon.Point(0.6, 0.6),
+ height: 0.1,
+ placement: OpenSeadragon.Placement.TOP_LEFT,
+ rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
+ });
+
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.opacity = "0.5";
- elt.style.border = "5px solid pink";
+ elt.style.outline = "1px solid blue";
+ elt.style.height = "100px";
+ elt.textContent = "Scaled horizontally";
+ viewer.addOverlay({
+ element: elt,
+ location: new OpenSeadragon.Point(0.1, 0.5),
+ width: 0.1
+ });
+
+ elt = document.createElement("div");
+ elt.className = "runtime-overlay";
+ elt.style.background = "white";
+ elt.style.opacity = "0.5";
+ elt.style.outline = "5px solid pink";
elt.style.width = "100px";
elt.style.height = "100px";
elt.textContent = "Not scaled, centered in the middle";
@@ -81,7 +81,8 @@
element: elt,
location: new OpenSeadragon.Point(0.5, 0.5),
placement: OpenSeadragon.Placement.CENTER,
- checkResize: false
+ checkResize: false,
+ rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
});
});
From bd62d56a37c4d9f73e4266af6b2e59a20329a27d Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 1 Apr 2016 13:29:09 -0400
Subject: [PATCH 32/78] Fix Overlays.getBounds with rotation.
---
src/overlay.js | 49 ++++----
test/modules/overlays.js | 239 ++++++++++++++++++++++++++++++++++++++-
2 files changed, 268 insertions(+), 20 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index fa5ddefa..97b5b80a 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -131,7 +131,6 @@
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
-
// private
_init: function(options) {
this.location = options.location;
@@ -157,7 +156,6 @@
this.placement = $.Placement.TOP_LEFT;
}
},
-
/**
* Internal function to adjust the position of an overlay
* depending on it size and placement.
@@ -181,7 +179,6 @@
position.y -= size.y;
}
},
-
/**
* @function
*/
@@ -225,7 +222,6 @@
style[transformProp] = "";
}
},
-
/**
* @function
* @param {Element} container
@@ -283,7 +279,6 @@
}
}
},
-
// private
_getOverlayPositionAndSize: function(viewport) {
var position = viewport.pixelFromPoint(this.location, true);
@@ -312,7 +307,6 @@
rotate: rotate
};
},
-
// private
_getSizeInPixels: function(viewport) {
var width = this.size.x;
@@ -339,26 +333,29 @@
}
return new $.Point(width, height);
},
-
// private
_getBoundingBox: function(rect, degrees) {
- var refPoint = new $.Point(rect.x, rect.y);
+ var refPoint = this._getPlacementPoint(rect);
+ return rect.rotate(degrees, refPoint).getBoundingBox();
+ },
+ // private
+ _getPlacementPoint: function(rect) {
+ var result = new $.Point(rect.x, rect.y);
var properties = $.Placement.properties[this.placement];
if (properties) {
if (properties.isHorizontallyCentered) {
- refPoint.x += rect.width / 2;
+ result.x += rect.width / 2;
} else if (properties.isRight) {
- refPoint.x += rect.width;
+ result.x += rect.width;
}
if (properties.isVerticallyCentered) {
- refPoint.y += rect.height / 2;
+ result.y += rect.height / 2;
} else if (properties.isBottom) {
- refPoint.y += rect.height;
+ result.y += rect.height;
}
}
- return rect.rotate(degrees, refPoint).getBoundingBox();
+ return result;
},
-
// private
_getTransformOrigin: function() {
var result = "";
@@ -378,7 +375,6 @@
}
return result;
},
-
/**
* Changes the overlay settings.
* @function
@@ -403,7 +399,6 @@
rotationMode: options.rotationMode || this.rotationMode
});
},
-
/**
* Returns the current bounds of the overlay in viewport coordinates
* @function
@@ -411,11 +406,11 @@
* @returns {OpenSeadragon.Rect} overlay bounds
*/
getBounds: function(viewport) {
+ $.console.assert(!viewport, 'Calling Overlay.getBounds withouth ' +
+ 'specifying a viewport is deprecated.');
var width = this.width;
var height = this.height;
if (width === null || height === null) {
- $.console.assert(!viewport, 'The viewport must be specified to' +
- ' get the bounds of a not entirely scaling overlay');
var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
if (width === null) {
width = size.x;
@@ -426,7 +421,23 @@
}
var location = this.location.clone();
this.adjust(location, new $.Point(width, height));
- return new $.Rect(location.x, location.y, width, height);
+ return this._adjustBoundsForRotation(
+ viewport, new $.Rect(location.x, location.y, width, height));
+ },
+
+ _adjustBoundsForRotation: function(viewport, bounds) {
+ if (!viewport ||
+ viewport.degrees === 0 ||
+ this.rotationMode === $.OverlayRotationMode.EXACT) {
+ return bounds;
+ }
+ // If overlay not fully scalable, BOUNDING_BOX falls back to EXACT
+ if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
+ (this.width === null || this.height === null)) {
+ return bounds;
+ }
+ return bounds.rotate(-viewport.degrees,
+ this._getPlacementPoint(bounds));
}
};
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 496c4f89..0183d61f 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -658,6 +658,7 @@
});
});
+ // ----------
asyncTest('Overlay.getBounds', function() {
viewer = OpenSeadragon({
id: 'example-overlays',
@@ -710,7 +711,7 @@
viewer._drawOverlays();
var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
- .getBounds();
+ .getBounds(viewer.viewport);
var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1);
ok(expectedBounds.equals(actualBounds),
"The fully scaled overlay should have bounds " +
@@ -745,4 +746,240 @@
});
});
+ // ----------
+ asyncTest('Fully scaled overlay rotation mode NO_ROTATION', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100, // Faster animation = faster tests
+ degrees: 45,
+ overlays: [{
+ id: "fully-scaled-overlay",
+ x: 1,
+ y: 1,
+ width: 1,
+ height: 1,
+ placement: OpenSeadragon.Placement.BOTTOM_RIGHT,
+ rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
+ }]
+ });
+
+ viewer.addOnceHandler('open', function() {
+ var viewport = viewer.viewport;
+
+ var $overlay = $("#fully-scaled-overlay");
+ var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
+ new OpenSeadragon.Point(1, 1));
+ var expectedPosition = viewport.viewportToViewerElementCoordinates(
+ new OpenSeadragon.Point(1, 1))
+ .minus(expectedSize);
+ var actualPosition = $overlay.position();
+ Util.assessNumericValue(actualPosition.left, expectedPosition.x, epsilon,
+ "Scaled overlay position.x should adjust to rotation.");
+ Util.assessNumericValue(actualPosition.top, expectedPosition.y, epsilon,
+ "Scaled overlay position.y should adjust to rotation.");
+
+ var actualWidth = $overlay.width();
+ var actualHeight = $overlay.height();
+ Util.assessNumericValue(actualWidth, expectedSize.x, epsilon,
+ "Scaled overlay width should not adjust to rotation.");
+ Util.assessNumericValue(actualHeight, expectedSize.y, epsilon,
+ "Scaled overlay height should not adjust to rotation.");
+
+ var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
+ .getBounds(viewport);
+ var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1)
+ .rotate(-45, new OpenSeadragon.Point(1, 1));
+ ok(expectedBounds.equals(actualBounds),
+ "The fully scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ start();
+ });
+ });
+
+ // ----------
+ asyncTest('Horizontally scaled overlay rotation mode NO_ROTATION', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100, // Faster animation = faster tests
+ degrees: 45,
+ overlays: [{
+ id: "horizontally-scaled-overlay",
+ x: 0.5,
+ y: 0.5,
+ width: 1,
+ placement: OpenSeadragon.Placement.CENTER,
+ rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
+ }]
+ });
+
+ viewer.addOnceHandler('open', function() {
+ var $overlay = $("#horizontally-scaled-overlay");
+ var notScaledWidth = 100;
+ var notScaledHeight = 100;
+ $overlay.get(0).style.height = notScaledHeight + "px";
+
+ var viewport = viewer.viewport;
+ var notScaledSize = viewport.deltaPointsFromPixelsNoRotate(
+ new OpenSeadragon.Point(notScaledWidth, notScaledHeight));
+
+ // Force refresh to takes new dimensions into account.
+ viewer._drawOverlays();
+
+ var expectedWidth = viewport.deltaPixelsFromPointsNoRotate(
+ new OpenSeadragon.Point(1, 1)).x;
+ var expectedPosition = viewport.viewportToViewerElementCoordinates(
+ new OpenSeadragon.Point(0.5, 0.5))
+ .minus(new OpenSeadragon.Point(expectedWidth / 2, notScaledHeight / 2));
+ var actualPosition = $overlay.position();
+ Util.assessNumericValue(actualPosition.left, expectedPosition.x, epsilon,
+ "Horizontally scaled overlay position.x should adjust to rotation.");
+ Util.assessNumericValue(actualPosition.top, expectedPosition.y, epsilon,
+ "Horizontally scaled overlay position.y should adjust to rotation.");
+
+ var actualWidth = $overlay.width();
+ var actualHeight = $overlay.height();
+ Util.assessNumericValue(actualWidth, expectedWidth, epsilon,
+ "Horizontally scaled overlay width should not adjust to rotation.");
+ Util.assessNumericValue(actualHeight, notScaledHeight, epsilon,
+ "Horizontally scaled overlay height should not adjust to rotation.");
+
+ var actualBounds = viewer.getOverlayById("horizontally-scaled-overlay")
+ .getBounds(viewport);
+ var expectedBounds = new OpenSeadragon.Rect(
+ 0, 0.5 - notScaledSize.y / 2, 1, notScaledSize.y)
+ .rotate(-45, new OpenSeadragon.Point(0.5, 0.5));
+ ok(expectedBounds.equals(actualBounds),
+ "The horizontally scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ start();
+ });
+ });
+
+ // ----------
+ asyncTest('Vertically scaled overlay rotation mode NO_ROTATION', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100, // Faster animation = faster tests
+ degrees: 45,
+ overlays: [{
+ id: "vertically-scaled-overlay",
+ x: 0,
+ y: 0.5,
+ height: 1,
+ placement: OpenSeadragon.Placement.LEFT,
+ rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
+ }]
+ });
+
+ viewer.addOnceHandler('open', function() {
+ var $overlay = $("#vertically-scaled-overlay");
+ var notScaledWidth = 100;
+ var notScaledHeight = 100;
+ $overlay.get(0).style.width = notScaledWidth + "px";
+
+ var viewport = viewer.viewport;
+ var notScaledSize = viewport.deltaPointsFromPixelsNoRotate(
+ new OpenSeadragon.Point(notScaledWidth, notScaledHeight));
+
+ // Force refresh to takes new dimensions into account.
+ viewer._drawOverlays();
+
+ var expectedHeight = viewport.deltaPixelsFromPointsNoRotate(
+ new OpenSeadragon.Point(1, 1)).y;
+ var expectedPosition = viewport.viewportToViewerElementCoordinates(
+ new OpenSeadragon.Point(0, 0.5))
+ .minus(new OpenSeadragon.Point(0, expectedHeight / 2));
+ var actualPosition = $overlay.position();
+ Util.assessNumericValue(actualPosition.left, expectedPosition.x, epsilon,
+ "Vertically scaled overlay position.x should adjust to rotation.");
+ Util.assessNumericValue(actualPosition.top, expectedPosition.y, epsilon,
+ "Vertically scaled overlay position.y should adjust to rotation.");
+
+ var actualWidth = $overlay.width();
+ var actualHeight = $overlay.height();
+ Util.assessNumericValue(actualWidth, notScaledWidth, epsilon,
+ "Vertically scaled overlay width should not adjust to rotation.");
+ Util.assessNumericValue(actualHeight, expectedHeight, epsilon,
+ "Vertically scaled overlay height should not adjust to rotation.");
+
+ var actualBounds = viewer.getOverlayById("vertically-scaled-overlay")
+ .getBounds(viewport);
+ var expectedBounds = new OpenSeadragon.Rect(
+ 0, 0, notScaledSize.x, 1)
+ .rotate(-45, new OpenSeadragon.Point(0, 0.5));
+ ok(expectedBounds.equals(actualBounds),
+ "The vertically scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ start();
+ });
+ });
+
+ // ----------
+ asyncTest('Not scaled overlay rotation mode NO_ROTATION', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100, // Faster animation = faster tests
+ degrees: 45,
+ overlays: [{
+ id: "not-scaled-overlay",
+ x: 1,
+ y: 0,
+ placement: OpenSeadragon.Placement.TOP_RIGHT,
+ rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
+ }]
+ });
+
+ viewer.addOnceHandler('open', function() {
+ var $overlay = $("#not-scaled-overlay");
+ var notScaledWidth = 100;
+ var notScaledHeight = 100;
+ $overlay.get(0).style.width = notScaledWidth + "px";
+ $overlay.get(0).style.height = notScaledHeight + "px";
+
+ var viewport = viewer.viewport;
+ var notScaledSize = viewport.deltaPointsFromPixelsNoRotate(
+ new OpenSeadragon.Point(notScaledWidth, notScaledHeight));
+
+ // Force refresh to takes new dimensions into account.
+ viewer._drawOverlays();
+
+ var expectedPosition = viewport.viewportToViewerElementCoordinates(
+ new OpenSeadragon.Point(1, 0))
+ .minus(new OpenSeadragon.Point(notScaledWidth, 0));
+ var actualPosition = $overlay.position();
+ Util.assessNumericValue(actualPosition.left, expectedPosition.x, epsilon,
+ "Not scaled overlay position.x should adjust to rotation.");
+ Util.assessNumericValue(actualPosition.top, expectedPosition.y, epsilon,
+ "Not scaled overlay position.y should adjust to rotation.");
+
+ var actualWidth = $overlay.width();
+ var actualHeight = $overlay.height();
+ Util.assessNumericValue(actualWidth, notScaledWidth, epsilon,
+ "Not scaled overlay width should not adjust to rotation.");
+ Util.assessNumericValue(actualHeight, notScaledHeight, epsilon,
+ "Not scaled overlay height should not adjust to rotation.");
+
+ var actualBounds = viewer.getOverlayById("not-scaled-overlay")
+ .getBounds(viewport);
+ var expectedBounds = new OpenSeadragon.Rect(
+ 1 - notScaledSize.x, 0, notScaledSize.x, notScaledSize.y)
+ .rotate(-45, new OpenSeadragon.Point(1, 0));
+ ok(expectedBounds.equals(actualBounds),
+ "Not scaled overlay should have bounds " +
+ expectedBounds.toString() + " but found " + actualBounds);
+
+ start();
+ });
+ });
})();
From fafb7f8db649369340db6a18c266905ae22ddb02 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 1 Apr 2016 13:31:36 -0400
Subject: [PATCH 33/78] Readd blank lines.
---
src/overlay.js | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/src/overlay.js b/src/overlay.js
index 97b5b80a..d104e8cd 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -131,6 +131,7 @@
/** @lends OpenSeadragon.Overlay.prototype */
$.Overlay.prototype = {
+
// private
_init: function(options) {
this.location = options.location;
@@ -156,6 +157,7 @@
this.placement = $.Placement.TOP_LEFT;
}
},
+
/**
* Internal function to adjust the position of an overlay
* depending on it size and placement.
@@ -179,6 +181,7 @@
position.y -= size.y;
}
},
+
/**
* @function
*/
@@ -222,6 +225,7 @@
style[transformProp] = "";
}
},
+
/**
* @function
* @param {Element} container
@@ -279,6 +283,7 @@
}
}
},
+
// private
_getOverlayPositionAndSize: function(viewport) {
var position = viewport.pixelFromPoint(this.location, true);
@@ -307,6 +312,7 @@
rotate: rotate
};
},
+
// private
_getSizeInPixels: function(viewport) {
var width = this.size.x;
@@ -333,11 +339,13 @@
}
return new $.Point(width, height);
},
+
// private
_getBoundingBox: function(rect, degrees) {
var refPoint = this._getPlacementPoint(rect);
return rect.rotate(degrees, refPoint).getBoundingBox();
},
+
// private
_getPlacementPoint: function(rect) {
var result = new $.Point(rect.x, rect.y);
@@ -356,6 +364,7 @@
}
return result;
},
+
// private
_getTransformOrigin: function() {
var result = "";
@@ -375,6 +384,7 @@
}
return result;
},
+
/**
* Changes the overlay settings.
* @function
@@ -399,6 +409,7 @@
rotationMode: options.rotationMode || this.rotationMode
});
},
+
/**
* Returns the current bounds of the overlay in viewport coordinates
* @function
From 5f9053fb6eecf35025b395fd45146f8b618e447b Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 1 Apr 2016 15:46:43 -0400
Subject: [PATCH 34/78] Fix Overlay.getBounds with BOUNDING_BOX rotation mode.
---
src/overlay.js | 21 ++++++++++----
src/viewport.js | 14 ++++++++++
test/modules/overlays.js | 59 ++++++++++++++++++++++++++++++++++++++++
3 files changed, 89 insertions(+), 5 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index d104e8cd..7465d573 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -417,7 +417,7 @@
* @returns {OpenSeadragon.Rect} overlay bounds
*/
getBounds: function(viewport) {
- $.console.assert(!viewport, 'Calling Overlay.getBounds withouth ' +
+ $.console.assert(viewport, 'Calling Overlay.getBounds withouth ' +
'specifying a viewport is deprecated.');
var width = this.width;
var height = this.height;
@@ -442,11 +442,22 @@
this.rotationMode === $.OverlayRotationMode.EXACT) {
return bounds;
}
- // If overlay not fully scalable, BOUNDING_BOX falls back to EXACT
- if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
- (this.width === null || this.height === null)) {
- return bounds;
+ if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX) {
+ // If overlay not fully scalable, BOUNDING_BOX falls back to EXACT
+ if (this.width === null || this.height === null) {
+ return bounds;
+ }
+ // It is easier to just compute the position and size and
+ // convert to viewport coordinates.
+ var positionAndSize = this._getOverlayPositionAndSize(viewport);
+ return viewport.viewerElementToViewportRectangle(new $.Rect(
+ positionAndSize.position.x,
+ positionAndSize.position.y,
+ positionAndSize.size.x,
+ positionAndSize.size.y));
}
+
+ // NO_ROTATION case
return bounds.rotate(-viewport.degrees,
this._getPlacementPoint(bounds));
}
diff --git a/src/viewport.js b/src/viewport.js
index 821d8075..13841da7 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1262,6 +1262,20 @@ $.Viewport.prototype = {
return this.pixelFromPoint( point, true );
},
+ /**
+ * Convert a rectangle in pixel coordinates relative to the viewer element
+ * to viewport coordinates.
+ * @param {OpenSeadragon.Rect} rectangle the rectangle to convert
+ * @returns {OpenSeadragon.Rect} the converted rectangle
+ */
+ viewerElementToViewportRectangle: function(rectangle) {
+ return $.Rect.fromSummits(
+ this.pointFromPixel(rectangle.getTopLeft(), true),
+ this.pointFromPixel(rectangle.getTopRight(), true),
+ this.pointFromPixel(rectangle.getBottomLeft(), true)
+ );
+ },
+
/**
* Convert a rectangle in viewport coordinates to pixel coordinates relative
* to the viewer element.
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 0183d61f..49eb0c4f 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -982,4 +982,63 @@
start();
});
});
+
+ // ----------
+ asyncTest('Fully scaled overlay rotation mode BOUNDING_BOX', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100, // Faster animation = faster tests
+ degrees: 45,
+ overlays: [{
+ id: "fully-scaled-overlay",
+ x: 1,
+ y: 1,
+ width: 1,
+ height: 1,
+ placement: OpenSeadragon.Placement.BOTTOM_RIGHT,
+ rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
+ }]
+ });
+
+ viewer.addOnceHandler('open', function() {
+ var viewport = viewer.viewport;
+
+ var $overlay = $("#fully-scaled-overlay");
+ var expectedRect = viewport.viewportToViewerElementRectangle(
+ new OpenSeadragon.Rect(0, 0, 1, 1)).getBoundingBox();
+ var actualPosition = $overlay.position();
+ Util.assessNumericValue(actualPosition.left, expectedRect.x, epsilon,
+ "Scaled overlay position.x should adjust to rotation.");
+ Util.assessNumericValue(actualPosition.top, expectedRect.y, epsilon,
+ "Scaled overlay position.y should adjust to rotation.");
+
+ var actualWidth = $overlay.width();
+ var actualHeight = $overlay.height();
+ Util.assessNumericValue(actualWidth, expectedRect.width, epsilon,
+ "Scaled overlay width should not adjust to rotation.");
+ Util.assessNumericValue(actualHeight, expectedRect.height, epsilon,
+ "Scaled overlay height should not adjust to rotation.");
+
+ var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
+ .getBounds(viewport);
+ var expectedBounds = new OpenSeadragon.Rect(
+ 0.5, -0.5, Math.sqrt(2), Math.sqrt(2), 45);
+ var boundsEpsilon = 0.000001;
+ Util.assessNumericValue(actualBounds.x, expectedBounds.x, boundsEpsilon,
+ "The fully scaled overlay should have adjusted bounds.x");
+ Util.assessNumericValue(actualBounds.y, expectedBounds.y, boundsEpsilon,
+ "The fully scaled overlay should have adjusted bounds.y");
+ Util.assessNumericValue(actualBounds.width, expectedBounds.width, boundsEpsilon,
+ "The fully scaled overlay should have adjusted bounds.width");
+ Util.assessNumericValue(actualBounds.height, expectedBounds.height, boundsEpsilon,
+ "The fully scaled overlay should have adjusted bounds.height");
+ Util.assessNumericValue(actualBounds.degrees, expectedBounds.degrees, boundsEpsilon,
+ "The fully scaled overlay should have adjusted bounds.degrees");
+
+ start();
+ });
+ });
+
})();
From 824dc192bcb92edf15eb381e2586a8eee8fe63d0 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 1 Apr 2016 16:54:29 -0400
Subject: [PATCH 35/78] Add unit tests for overlays with rotation mode EXACT
---
test/modules/overlays.js | 81 ++++++++++++++++++++++++++++++++++++----
1 file changed, 73 insertions(+), 8 deletions(-)
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 49eb0c4f..76e91272 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -715,7 +715,7 @@
var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1);
ok(expectedBounds.equals(actualBounds),
"The fully scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
actualBounds = viewer.getOverlayById("horizontally-scaled-overlay")
@@ -724,7 +724,7 @@
0, 0.5 - notScaledSize.y / 2, 1, notScaledSize.y);
ok(expectedBounds.equals(actualBounds),
"The horizontally scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
actualBounds = viewer.getOverlayById("vertically-scaled-overlay")
.getBounds(viewer.viewport);
@@ -732,7 +732,7 @@
0, 0, notScaledSize.x, 1);
ok(expectedBounds.equals(actualBounds),
"The vertically scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
actualBounds = viewer.getOverlayById("not-scaled-overlay")
.getBounds(viewer.viewport);
@@ -740,7 +740,7 @@
1 - notScaledSize.x, 0, notScaledSize.x, notScaledSize.y);
ok(expectedBounds.equals(actualBounds),
"The not scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
start();
});
@@ -793,7 +793,7 @@
.rotate(-45, new OpenSeadragon.Point(1, 1));
ok(expectedBounds.equals(actualBounds),
"The fully scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
start();
});
@@ -855,7 +855,7 @@
.rotate(-45, new OpenSeadragon.Point(0.5, 0.5));
ok(expectedBounds.equals(actualBounds),
"The horizontally scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
start();
});
@@ -917,7 +917,7 @@
.rotate(-45, new OpenSeadragon.Point(0, 0.5));
ok(expectedBounds.equals(actualBounds),
"The vertically scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
start();
});
@@ -977,7 +977,7 @@
.rotate(-45, new OpenSeadragon.Point(1, 0));
ok(expectedBounds.equals(actualBounds),
"Not scaled overlay should have bounds " +
- expectedBounds.toString() + " but found " + actualBounds);
+ expectedBounds + " but found " + actualBounds);
start();
});
@@ -1041,4 +1041,69 @@
});
});
+ // ----------
+ asyncTest('Fully scaled overlay rotation mode EXACT', function() {
+ viewer = OpenSeadragon({
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: '/test/data/testpattern.dzi',
+ springStiffness: 100, // Faster animation = faster tests
+ degrees: 45,
+ overlays: [{
+ id: "fully-scaled-overlay",
+ x: 1,
+ y: 1,
+ width: 1,
+ height: 1,
+ placement: OpenSeadragon.Placement.BOTTOM_RIGHT,
+ rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
+ }]
+ });
+
+ viewer.addOnceHandler('open', function() {
+ var viewport = viewer.viewport;
+
+ var $overlay = $("#fully-scaled-overlay");
+ var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
+ new OpenSeadragon.Point(1, 1));
+ var expectedPosition = viewport.pixelFromPoint(
+ new OpenSeadragon.Point(1, 1))
+ .minus(expectedSize);
+ // We can't rely on jQuery.position with transforms.
+ var actualStyle = $overlay.get(0).style;
+ var left = Number(actualStyle.left.replace("px", ""));
+ var top = Number(actualStyle.top.replace("px", ""));
+ Util.assessNumericValue(left, expectedPosition.x, epsilon,
+ "Scaled overlay position.x should adjust to rotation.");
+ Util.assessNumericValue(top, expectedPosition.y, epsilon,
+ "Scaled overlay position.y should adjust to rotation.");
+
+ var actualWidth = $overlay.width();
+ var actualHeight = $overlay.height();
+ Util.assessNumericValue(actualWidth, expectedSize.x, epsilon,
+ "Scaled overlay width should not adjust to rotation.");
+ Util.assessNumericValue(actualHeight, expectedSize.y, epsilon,
+ "Scaled overlay height should not adjust to rotation.");
+
+ var transformOriginProp = OpenSeadragon.getCssPropertyWithVendorPrefix(
+ 'transformOrigin');
+ var transformProp = OpenSeadragon.getCssPropertyWithVendorPrefix(
+ 'transform');
+ var transformOrigin = actualStyle[transformOriginProp];
+ // Some browsers replace "right bottom" by "100% 100%"
+ ok(transformOrigin.match(/(100% 100%)|(right bottom)/),
+ "Transform origin should be right bottom. Got: " + transformOrigin);
+ equal(actualStyle[transformProp], "rotate(45deg)",
+ "Transform should be rotate(45deg).");
+
+ var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
+ .getBounds(viewport);
+ var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1);
+ ok(expectedBounds.equals(actualBounds),
+ "The fully scaled overlay should have bounds " +
+ expectedBounds + " but found " + actualBounds);
+
+ start();
+ });
+ });
})();
From 55dfc146c9c9d2c33d213c333cd417b0a28d3555 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sun, 3 Apr 2016 07:59:10 -0400
Subject: [PATCH 36/78] Remove dead code.
---
src/dzitilesource.js | 4 +-
src/openseadragon.js | 183 +------------------------------------------
2 files changed, 4 insertions(+), 183 deletions(-)
diff --git a/src/dzitilesource.js b/src/dzitilesource.js
index 5d00980f..817f438e 100644
--- a/src/dzitilesource.js
+++ b/src/dzitilesource.js
@@ -301,7 +301,9 @@ function configureFromXML( tileSource, xmlDoc ){
} else if ( rootName == "Collection" ) {
throw new Error( $.getString( "Errors.Dzc" ) );
} else if ( rootName == "Error" ) {
- return $._processDZIError( root );
+ var messageNode = root.getElementsByTagName("Message")[0];
+ var message = messageNode.firstChild.nodeValue;
+ throw new Error(message);
}
throw new Error( $.getString( "Errors.Dzi" ) );
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 07523516..38c24252 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -2548,185 +2548,4 @@ if (typeof define === 'function' && define.amd) {
}
}
- /**
- * @private
- * @inner
- * @function
- * @param {XMLHttpRequest} xhr
- * @param {String} tilesUrl
- * @deprecated
- */
- function processDZIResponse( xhr, tilesUrl ) {
- var status,
- statusText,
- doc = null;
-
- if ( !xhr ) {
- throw new Error( $.getString( "Errors.Security" ) );
- } else if ( xhr.status !== 200 && xhr.status !== 0 ) {
- status = xhr.status;
- statusText = ( status == 404 ) ?
- "Not Found" :
- xhr.statusText;
- throw new Error( $.getString( "Errors.Status", status, statusText ) );
- }
-
- if ( xhr.responseXML && xhr.responseXML.documentElement ) {
- doc = xhr.responseXML;
- } else if ( xhr.responseText ) {
- doc = $.parseXml( xhr.responseText );
- }
-
- return processDZIXml( doc, tilesUrl );
- }
-
- /**
- * @private
- * @inner
- * @function
- * @param {Document} xmlDoc
- * @param {String} tilesUrl
- * @deprecated
- */
- function processDZIXml( xmlDoc, tilesUrl ) {
-
- if ( !xmlDoc || !xmlDoc.documentElement ) {
- throw new Error( $.getString( "Errors.Xml" ) );
- }
-
- var root = xmlDoc.documentElement,
- rootName = root.tagName;
-
- if ( rootName == "Image" ) {
- try {
- return processDZI( root, tilesUrl );
- } catch ( e ) {
- throw (e instanceof Error) ?
- e :
- new Error( $.getString("Errors.Dzi") );
- }
- } else if ( rootName == "Collection" ) {
- throw new Error( $.getString( "Errors.Dzc" ) );
- } else if ( rootName == "Error" ) {
- return $._processDZIError( root );
- }
-
- throw new Error( $.getString( "Errors.Dzi" ) );
- }
-
- /**
- * @private
- * @inner
- * @function
- * @param {Element} imageNode
- * @param {String} tilesUrl
- * @deprecated
- */
- function processDZI( imageNode, tilesUrl ) {
- var fileFormat = imageNode.getAttribute( "Format" ),
- sizeNode = imageNode.getElementsByTagName( "Size" )[ 0 ],
- dispRectNodes = imageNode.getElementsByTagName( "DisplayRect" ),
- width = parseInt( sizeNode.getAttribute( "Width" ), 10 ),
- height = parseInt( sizeNode.getAttribute( "Height" ), 10 ),
- tileSize = parseInt( imageNode.getAttribute( "TileSize" ), 10 ),
- tileOverlap = parseInt( imageNode.getAttribute( "Overlap" ), 10 ),
- dispRects = [],
- dispRectNode,
- rectNode,
- i;
-
- if ( !$.imageFormatSupported( fileFormat ) ) {
- throw new Error(
- $.getString( "Errors.ImageFormat", fileFormat.toUpperCase() )
- );
- }
-
- for ( i = 0; i < dispRectNodes.length; i++ ) {
- dispRectNode = dispRectNodes[ i ];
- rectNode = dispRectNode.getElementsByTagName( "Rect" )[ 0 ];
-
- dispRects.push( new $.DisplayRect(
- parseInt( rectNode.getAttribute( "X" ), 10 ),
- parseInt( rectNode.getAttribute( "Y" ), 10 ),
- parseInt( rectNode.getAttribute( "Width" ), 10 ),
- parseInt( rectNode.getAttribute( "Height" ), 10 ),
- 0, // ignore MinLevel attribute, bug in Deep Zoom Composer
- parseInt( dispRectNode.getAttribute( "MaxLevel" ), 10 )
- ));
- }
- return new $.DziTileSource(
- width,
- height,
- tileSize,
- tileOverlap,
- tilesUrl,
- fileFormat,
- dispRects
- );
- }
-
- /**
- * @private
- * @inner
- * @function
- * @param {Element} imageNode
- * @param {String} tilesUrl
- * @deprecated
- */
- function processDZIJSON( imageData, tilesUrl ) {
- var fileFormat = imageData.Format,
- sizeData = imageData.Size,
- dispRectData = imageData.DisplayRect || [],
- width = parseInt( sizeData.Width, 10 ),
- height = parseInt( sizeData.Height, 10 ),
- tileSize = parseInt( imageData.TileSize, 10 ),
- tileOverlap = parseInt( imageData.Overlap, 10 ),
- dispRects = [],
- rectData,
- i;
-
- if ( !$.imageFormatSupported( fileFormat ) ) {
- throw new Error(
- $.getString( "Errors.ImageFormat", fileFormat.toUpperCase() )
- );
- }
-
- for ( i = 0; i < dispRectData.length; i++ ) {
- rectData = dispRectData[ i ].Rect;
-
- dispRects.push( new $.DisplayRect(
- parseInt( rectData.X, 10 ),
- parseInt( rectData.Y, 10 ),
- parseInt( rectData.Width, 10 ),
- parseInt( rectData.Height, 10 ),
- 0, // ignore MinLevel attribute, bug in Deep Zoom Composer
- parseInt( rectData.MaxLevel, 10 )
- ));
- }
- return new $.DziTileSource(
- width,
- height,
- tileSize,
- tileOverlap,
- tilesUrl,
- fileFormat,
- dispRects
- );
- }
-
- /**
- * @private
- * @inner
- * @function
- * @param {Document} errorNode
- * @throws {Error}
- * @deprecated
- */
- $._processDZIError = function ( errorNode ) {
- var messageNode = errorNode.getElementsByTagName( "Message" )[ 0 ],
- message = messageNode.firstChild.nodeValue;
-
- throw new Error(message);
- };
-
-}( OpenSeadragon ));
+}(OpenSeadragon));
From 96a032164f285f110cdd480dabf6269633378fd7 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Mon, 4 Apr 2016 13:59:51 -0400
Subject: [PATCH 37/78] Update changelog
---
changelog.txt | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/changelog.txt b/changelog.txt
index 962118f8..8fe8397d 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -6,6 +6,9 @@ OPENSEADRAGON CHANGELOG
* BREAKING CHANGE: Viewport.homeBounds, Viewport.contentSize, Viewport.contentAspectX and
Viewport.contentAspectY have been removed. (#846)
* BREAKING CHANGE: Overlay.scales, Overlay.bounds and Overlay.position have been removed. (#896)
+ * Overlay.scales can be replaced by Overlay.width !== null && Overlay.height !== null
+ * The Overlay.getBounds method can be used to get the bounds of the overlay in viewport coordinates
+ * Overlay.location replaces Overlay.position
* DEPRECATION: Viewport.setHomeBounds has been deprecated (#846)
* DEPRECATION: the Viewport constructor is now ignoring the contentSize option (#846)
* Tile edge smoothing at high zoom (#764)
@@ -31,7 +34,7 @@ OPENSEADRAGON CHANGELOG
* Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
* Added addOnceHandler method to EventSource (#887)
* Added TiledImage.fitBounds method (#888)
-* Overlays can now be scaled in only one dimension by providing a point location and either width or height (#896)
+* Overlays can now be scaled in a single dimension by providing a point location and either width or height (#896)
* Added full rotation support to overlays (#729, #193)
2.1.0:
From 53d1534cc220a39f046c746c96fd6f38fd71c73f Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 5 Apr 2016 13:05:32 -0400
Subject: [PATCH 38/78] Add old properties for backward compatibility.
---
changelog.txt | 8 +++++---
src/overlay.js | 6 ++++++
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index 8fe8397d..8829d474 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -5,9 +5,11 @@ OPENSEADRAGON CHANGELOG
* BREAKING CHANGE: Viewport.homeBounds, Viewport.contentSize, Viewport.contentAspectX and
Viewport.contentAspectY have been removed. (#846)
-* BREAKING CHANGE: Overlay.scales, Overlay.bounds and Overlay.position have been removed. (#896)
- * Overlay.scales can be replaced by Overlay.width !== null && Overlay.height !== null
- * The Overlay.getBounds method can be used to get the bounds of the overlay in viewport coordinates
+* BREAKING CHANGE: The Overlay.getBounds method now takes the viewport as parameter. (#896)
+* DEPRECATION: Overlay.scales, Overlay.bounds and Overlay.position have been deprecated. (#896)
+ * Overlay.width !== null should be used to test whether the overlay scales horizontally
+ * Overlay.height !== null should be used to test whether the overlay scales vertically
+ * The Overlay.getBounds method should be used to get the bounds of the overlay in viewport coordinates
* Overlay.location replaces Overlay.position
* DEPRECATION: Viewport.setHomeBounds has been deprecated (#846)
* DEPRECATION: the Viewport constructor is now ignoring the contentSize option (#846)
diff --git a/src/overlay.js b/src/overlay.js
index 7465d573..9c7b4d93 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -156,6 +156,12 @@
this.location = this.location.getTopLeft();
this.placement = $.Placement.TOP_LEFT;
}
+
+ // Deprecated properties kept for backward compatibility.
+ this.scales = this.width !== null && this.height !== null;
+ this.bounds = new $.Rect(
+ this.location.x, this.location.y, this.width, this.height);
+ this.position = this.location;
},
/**
From 9e68f6c27b72d611fb8991bc568a9a6223f05612 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 5 Apr 2016 17:50:18 -0400
Subject: [PATCH 39/78] Fix home bounds with clipping. Fix #891
---
src/tiledimage.js | 20 +++++++++
src/viewport.js | 90 +++++++++++++++++++++++++++++++++-----
src/world.js | 44 +++++++++++--------
test/modules/tiledimage.js | 5 +--
4 files changed, 127 insertions(+), 32 deletions(-)
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 248f0ece..9d4db782 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -287,6 +287,26 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return this.getBounds();
},
+ /**
+ * Get the bounds of the displayed part of the tiled image.
+ * @param {Boolean} [current=false] Pass true for the current location,
+ * false for the target location.
+ * @returns {$.Rect} The clipped bounds in viewport coordinates.
+ */
+ getClippedBounds: function(current) {
+ var bounds = this.getBounds(current);
+ if (this._clip) {
+ var ratio = this._worldWidthCurrent / this.source.dimensions.x;
+ var clip = this._clip.times(ratio);
+ bounds = new $.Rect(
+ bounds.x + clip.x,
+ bounds.y + clip.y,
+ clip.width,
+ clip.height);
+ }
+ return bounds;
+ },
+
/**
* @returns {OpenSeadragon.Point} This TiledImage's content size, in original pixels.
*/
diff --git a/src/viewport.js b/src/viewport.js
index 63b4dcaf..6f418f13 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1085,8 +1085,18 @@ $.Viewport.prototype = {
return this.viewportToImageCoordinates(viewerX.x, viewerX.y);
}
- if (this.viewer && this.viewer.world.getItemCount() > 1) {
- $.console.error('[Viewport.viewportToImageCoordinates] is not accurate with multi-image; use TiledImage.viewportToImageCoordinates instead.');
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ $.console.error('[Viewport.viewportToImageCoordinates] is not accurate ' +
+ 'with multi-image; use TiledImage.viewportToImageCoordinates instead.');
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageCoordinates
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.viewportToImageCoordinates(viewerX, viewerY, true);
+ }
}
return this._viewportToImageDelta(
@@ -1119,8 +1129,18 @@ $.Viewport.prototype = {
return this.imageToViewportCoordinates(imageX.x, imageX.y);
}
- if (this.viewer && this.viewer.world.getItemCount() > 1) {
- $.console.error('[Viewport.imageToViewportCoordinates] is not accurate with multi-image; use TiledImage.imageToViewportCoordinates instead.');
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ $.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' +
+ 'with multi-image; use TiledImage.imageToViewportCoordinates instead.');
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageCoordinates
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.imageToViewportCoordinates(imageX, imageY, true);
+ }
}
var point = this._imageToViewportDelta(imageX, imageY);
@@ -1150,6 +1170,21 @@ $.Viewport.prototype = {
rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
}
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ $.console.error('[Viewport.imageToViewportRectangle] is not accurate ' +
+ 'with multi-image; use TiledImage.imageToViewportRectangle instead.');
+ } else if (count === 1) {
+ // It is better to use TiledImage.imageToViewportRectangle
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.imageToViewportRectangle(
+ imageX, imageY, pixelWidth, pixelHeight, true);
+ }
+ }
+
var coordA = this.imageToViewportCoordinates(rect.x, rect.y);
var coordB = this._imageToViewportDelta(rect.width, rect.height);
return new $.Rect(
@@ -1183,6 +1218,21 @@ $.Viewport.prototype = {
rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
}
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ $.console.error('[Viewport.viewportToImageRectangle] is not accurate ' +
+ 'with multi-image; use TiledImage.viewportToImageRectangle instead.');
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageCoordinates
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.viewportToImageRectangle(
+ viewerX, viewerY, pointWidth, pointHeight, true);
+ }
+ }
+
var coordA = this.viewportToImageCoordinates(rect.x, rect.y);
var coordB = this._viewportToImageDelta(rect.width, rect.height);
return new $.Rect(
@@ -1296,9 +1346,19 @@ $.Viewport.prototype = {
* target zoom.
* @returns {Number} imageZoom The image zoom
*/
- viewportToImageZoom: function( viewportZoom ) {
- if (this.viewer && this.viewer.world.getItemCount() > 1) {
- $.console.error('[Viewport.viewportToImageZoom] is not accurate with multi-image.');
+ viewportToImageZoom: function(viewportZoom) {
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ $.console.error('[Viewport.viewportToImageZoom] is not ' +
+ 'accurate with multi-image.');
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageZoom
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.viewportToImageZoom(viewportZoom);
+ }
}
var imageWidth = this._contentSizeNoRotate.x;
@@ -1320,9 +1380,19 @@ $.Viewport.prototype = {
* target zoom.
* @returns {Number} viewportZoom The viewport zoom
*/
- imageToViewportZoom: function( imageZoom ) {
- if (this.viewer && this.viewer.world.getItemCount() > 1) {
- $.console.error('[Viewport.imageToViewportZoom] is not accurate with multi-image.');
+ imageToViewportZoom: function(imageZoom) {
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ $.console.error('[Viewport.imageToViewportZoom] is not accurate ' +
+ 'with multi-image.');
+ } else if (count === 1) {
+ // It is better to use TiledImage.imageToViewportZoom
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.imageToViewportZoom(imageZoom);
+ }
}
var imageWidth = this._contentSizeNoRotate.x;
diff --git a/src/world.js b/src/world.js
index 5597f0f8..07e99b81 100644
--- a/src/world.js
+++ b/src/world.js
@@ -375,34 +375,40 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
var oldContentSize = this._contentSize ? this._contentSize.clone() : null;
var oldContentFactor = this._contentFactor || 0;
- if ( !this._items.length ) {
+ if (!this._items.length) {
this._homeBounds = new $.Rect(0, 0, 1, 1);
this._contentSize = new $.Point(1, 1);
this._contentFactor = 1;
} else {
- var bounds = this._items[0].getBounds();
- this._contentFactor = this._items[0].getContentSize().x / bounds.width;
- var left = bounds.x;
- var top = bounds.y;
- var right = bounds.x + bounds.width;
- var bottom = bounds.y + bounds.height;
- var box;
- for ( var i = 1; i < this._items.length; i++ ) {
- box = this._items[i].getBounds();
- this._contentFactor = Math.max(this._contentFactor, this._items[i].getContentSize().x / box.width);
- left = Math.min( left, box.x );
- top = Math.min( top, box.y );
- right = Math.max( right, box.x + box.width );
- bottom = Math.max( bottom, box.y + box.height );
+ var item = this._items[0];
+ var bounds = item.getBounds();
+ this._contentFactor = item.getContentSize().x / bounds.width;
+ var clippedBounds = item.getClippedBounds();
+ var left = clippedBounds.x;
+ var top = clippedBounds.y;
+ var right = clippedBounds.x + clippedBounds.width;
+ var bottom = clippedBounds.y + clippedBounds.height;
+ for (var i = 1; i < this._items.length; i++) {
+ item = this._items[i];
+ bounds = item.getBounds();
+ this._contentFactor = Math.max(this._contentFactor,
+ item.getContentSize().x / bounds.width);
+ clippedBounds = item.getClippedBounds();
+ left = Math.min(left, clippedBounds.x);
+ top = Math.min(top, clippedBounds.y);
+ right = Math.max(right, clippedBounds.x + clippedBounds.width);
+ bottom = Math.max(bottom, clippedBounds.y + clippedBounds.height);
}
- this._homeBounds = new $.Rect( left, top, right - left, bottom - top );
- this._contentSize = new $.Point(this._homeBounds.width * this._contentFactor,
+ this._homeBounds = new $.Rect(left, top, right - left, bottom - top);
+ this._contentSize = new $.Point(
+ this._homeBounds.width * this._contentFactor,
this._homeBounds.height * this._contentFactor);
}
- if (this._contentFactor !== oldContentFactor || !this._homeBounds.equals(oldHomeBounds) ||
- !this._contentSize.equals(oldContentSize)) {
+ if (this._contentFactor !== oldContentFactor ||
+ !this._homeBounds.equals(oldHomeBounds) ||
+ !this._contentSize.equals(oldContentSize)) {
/**
* Raised when the home bounds or content factor change.
* @event metrics-change
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index f281d076..405f0dfc 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -206,9 +206,8 @@
propEqual(image.getClip(), clip, 'clip is set correctly');
Util.spyOnce(viewer.drawer, 'setClip', function(rect) {
- ok(true, 'drawer.setClip is called');
- var pixelRatio = viewer.viewport.getContainerSize().x / image.getContentSize().x;
- var canvasClip = clip.times(pixelRatio * OpenSeadragon.pixelDensityRatio);
+ var homeBounds = viewer.viewport.getHomeBounds();
+ var canvasClip = viewer.viewport.viewportToViewerElementRectangle(homeBounds);
propEqual(rect, canvasClip, 'clipping to correct rect');
start();
});
From bd4cabaec2f0e965e6601b44af1ebf14aa6394bf Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 5 Apr 2016 20:00:35 -0400
Subject: [PATCH 40/78] Fix JSDoc.
---
src/openseadragon.js | 8 +-------
src/viewport.js | 4 ++--
2 files changed, 3 insertions(+), 9 deletions(-)
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 07523516..7b51ee7f 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -96,11 +96,6 @@
*
*/
-/**
- * @module OpenSeadragon
- *
- */
-
/**
* @namespace OpenSeadragon
*
@@ -691,8 +686,7 @@
* This function serves as a single point of instantiation for an {@link OpenSeadragon.Viewer}, including all
* combinations of out-of-the-box configurable features.
*
- * @function OpenSeadragon
- * @memberof module:OpenSeadragon
+ * @function
* @param {OpenSeadragon.Options} options - Viewer options.
* @returns {OpenSeadragon.Viewer}
*/
diff --git a/src/viewport.js b/src/viewport.js
index 63b4dcaf..12dd958d 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -317,8 +317,8 @@ $.Viewport.prototype = {
},
/**
- * @function
* The margins push the "home" region in from the sides by the specified amounts.
+ * @function
* @returns {Object} Properties (Numbers, in screen coordinates): left, top, right, bottom.
*/
getMargins: function() {
@@ -326,8 +326,8 @@ $.Viewport.prototype = {
},
/**
- * @function
* The margins push the "home" region in from the sides by the specified amounts.
+ * @function
* @param {Object} margins - Properties (Numbers, in screen coordinates): left, top, right, bottom.
*/
setMargins: function(margins) {
From 81f439d43070fba72010b0ce2e20595aa8fde5c2 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 6 Apr 2016 09:10:51 -0400
Subject: [PATCH 41/78] Document the viewport parameter as mandatory in
Overlay.getBounds.
---
src/overlay.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/overlay.js b/src/overlay.js
index 9c7b4d93..000b395a 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -419,7 +419,7 @@
/**
* Returns the current bounds of the overlay in viewport coordinates
* @function
- * @param {OpenSeadragon.Viewport} [viewport] the viewport
+ * @param {OpenSeadragon.Viewport} viewport the viewport
* @returns {OpenSeadragon.Rect} overlay bounds
*/
getBounds: function(viewport) {
From cd7bb8a8c4a5e4c52327e6b977aba5d514623933 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 6 Apr 2016 12:55:50 -0400
Subject: [PATCH 42/78] Fix doc and debug message.
---
src/overlay.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index 000b395a..76eb347c 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -423,8 +423,8 @@
* @returns {OpenSeadragon.Rect} overlay bounds
*/
getBounds: function(viewport) {
- $.console.assert(viewport, 'Calling Overlay.getBounds withouth ' +
- 'specifying a viewport is deprecated.');
+ $.console.assert(viewport,
+ 'A viewport must now be passed to Overlay.getBounds.');
var width = this.width;
var height = this.height;
if (width === null || height === null) {
@@ -442,6 +442,7 @@
viewport, new $.Rect(location.x, location.y, width, height));
},
+ // private
_adjustBoundsForRotation: function(viewport, bounds) {
if (!viewport ||
viewport.degrees === 0 ||
From 5ebf84a580c4af1b6e84ecf523911e481818c8ac Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 9 Apr 2016 10:14:09 -0400
Subject: [PATCH 43/78] Fix typo in doc.
---
src/tilesource.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/tilesource.js b/src/tilesource.js
index 290a5758..03854bbc 100644
--- a/src/tilesource.js
+++ b/src/tilesource.js
@@ -544,7 +544,7 @@ $.TileSource.prototype = {
/**
* Responsible for retriving the url which will return an image for the
- * region speified by the given x, y, and level components.
+ * region specified by the given x, y, and level components.
* This method is not implemented by this class other than to throw an Error
* announcing you have to implement it. Because of the variety of tile
* server technologies, and various specifications for building image
From 4fa7ed159000db58d9e9cf15b177bbd1c3ce1353 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 9 Apr 2016 10:15:02 -0400
Subject: [PATCH 44/78] Adapt doc to new version of JSDoc.
---
src/openseadragon.js | 17 +----------------
src/viewer.js | 17 +++++++++++------
2 files changed, 12 insertions(+), 22 deletions(-)
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 7b51ee7f..cee2d9e3 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -82,23 +82,9 @@
*/
-/**
- * @version <%= pkg.name %> <%= pkg.version %>
- *
- * @file
- * <h2><strong>OpenSeadragon - Javascript Deep Zooming</strong></h2>
- * <p>
- * OpenSeadragon provides an html interface for creating
- * deep zoom user interfaces. The simplest examples include deep
- * zoom for large resolution images, and complex examples include
- * zoomable map interfaces driven by SVG files.
- * </p>
- *
- */
-
/**
* @namespace OpenSeadragon
- *
+ * @version <%= pkg.name %> <%= pkg.version %>
* @classdesc The root namespace for OpenSeadragon. All utility methods
* and classes are defined on or below this namespace.
*
@@ -686,7 +672,6 @@
* This function serves as a single point of instantiation for an {@link OpenSeadragon.Viewer}, including all
* combinations of out-of-the-box configurable features.
*
- * @function
* @param {OpenSeadragon.Options} options - Viewer options.
* @returns {OpenSeadragon.Viewer}
*/
diff --git a/src/viewer.js b/src/viewer.js
index d3cce4b8..b647ee41 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -40,14 +40,19 @@ var nextHash = 1;
/**
*
- * The main point of entry into creating a zoomable image on the page.
- *
+ * The main point of entry into creating a zoomable image on the page.<br>
+ * <br>
* We have provided an idiomatic javascript constructor which takes
- * a single object, but still support the legacy positional arguments.
- *
+ * a single object, but still support the legacy positional arguments.<br>
+ * <br>
* The options below are given in order that they appeared in the constructor
- * as arguments and we translate a positional call into an idiomatic call.
- *
+ * as arguments and we translate a positional call into an idiomatic call.<br>
+ * <br>
+ * To create a viewer, you can use either of this methods:<br>
+ * <ul>
+ * <li><code>var viewer = new OpenSeadragon.Viewer(options);</code></li>
+ * <li><code>var viewer = OpenSeadragon(options);</code></li>
+ * </ul>
* @class Viewer
* @classdesc The main OpenSeadragon viewer class.
*
From e436fc93fd2e66c1fe2687d4c41faf7a2b4fee66 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 9 Apr 2016 11:23:59 -0400
Subject: [PATCH 45/78] Fix test.
---
test/modules/tiledimage.js | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index 405f0dfc..49cd71d8 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -207,8 +207,17 @@
Util.spyOnce(viewer.drawer, 'setClip', function(rect) {
var homeBounds = viewer.viewport.getHomeBounds();
- var canvasClip = viewer.viewport.viewportToViewerElementRectangle(homeBounds);
- propEqual(rect, canvasClip, 'clipping to correct rect');
+ var canvasClip = viewer.viewport
+ .viewportToViewerElementRectangle(homeBounds);
+ var precision = 0.00000001;
+ Util.assessNumericValue(rect.x, canvasClip.x, precision,
+ 'clipping x should be ' + canvasClip.x);
+ Util.assessNumericValue(rect.y, canvasClip.y, precision,
+ 'clipping y should be ' + canvasClip.y);
+ Util.assessNumericValue(rect.width, canvasClip.width, precision,
+ 'clipping width should be ' + canvasClip.width);
+ Util.assessNumericValue(rect.height, canvasClip.height, precision,
+ 'clipping height should be ' + canvasClip.height);
start();
});
});
From 686176f82159e44b4496b2d2f48f5d2c4957dab8 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 9 Apr 2016 11:37:05 -0400
Subject: [PATCH 46/78] Add TiledImage.getClippedBounds test.
---
test/modules/tiledimage.js | 33 +++++++++++++++++++++++++++++++++
1 file changed, 33 insertions(+)
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index 49cd71d8..614d28fd 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -228,6 +228,39 @@
});
});
+ asyncTest('getClipBounds', function() {
+ var clip = new OpenSeadragon.Rect(100, 200, 800, 500);
+
+ viewer.addHandler('open', function() {
+ var image = viewer.world.getItemAt(0);
+ var bounds = image.getClippedBounds();
+ var expectedBounds = new OpenSeadragon.Rect(1.2, 1.4, 1.6, 1);
+ propEqual(bounds, expectedBounds,
+ 'getClipBounds should take clipping into account.');
+
+ image = viewer.world.getItemAt(1);
+ bounds = image.getClippedBounds();
+ expectedBounds = new OpenSeadragon.Rect(1, 2, 2, 2);
+ propEqual(bounds, expectedBounds,
+ 'getClipBounds should work when no clipping set.');
+
+ start();
+ });
+
+ viewer.open([{
+ tileSource: '/test/data/testpattern.dzi',
+ clip: clip,
+ x: 1,
+ y: 1,
+ width: 2
+ }, {
+ tileSource: '/test/data/testpattern.dzi',
+ x: 1,
+ y: 2,
+ width: 2
+ }]);
+ });
+
// ----------
asyncTest('opacity', function() {
From b8c87ddb61ea0943bc9a54c8019bc53cbcaa2db4 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 9 Apr 2016 11:56:34 -0400
Subject: [PATCH 47/78] Use Util.assertRectangleEquals
---
test/modules/tiledimage.js | 10 ++--------
1 file changed, 2 insertions(+), 8 deletions(-)
diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js
index 614d28fd..d7a46aef 100644
--- a/test/modules/tiledimage.js
+++ b/test/modules/tiledimage.js
@@ -210,14 +210,8 @@
var canvasClip = viewer.viewport
.viewportToViewerElementRectangle(homeBounds);
var precision = 0.00000001;
- Util.assessNumericValue(rect.x, canvasClip.x, precision,
- 'clipping x should be ' + canvasClip.x);
- Util.assessNumericValue(rect.y, canvasClip.y, precision,
- 'clipping y should be ' + canvasClip.y);
- Util.assessNumericValue(rect.width, canvasClip.width, precision,
- 'clipping width should be ' + canvasClip.width);
- Util.assessNumericValue(rect.height, canvasClip.height, precision,
- 'clipping height should be ' + canvasClip.height);
+ Util.assertRectangleEquals(rect, canvasClip, precision,
+ 'clipping should be ' + canvasClip);
start();
});
});
From e0e6ce9b65662528fb743c8edc4adf0ce751599c Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 9 Apr 2016 18:13:37 -0400
Subject: [PATCH 48/78] Add unit tests for home bounds with clip.
---
test/modules/viewport.js | 51 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 51 insertions(+)
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index 70e980ed..0b3ca020 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -238,6 +238,57 @@
viewer.open(DZI_PATH);
});
+ asyncTest('getHomeBoundsWithMultiImages', function() {
+ function openHandler() {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+ Util.assertRectangleEquals(
+ new OpenSeadragon.Rect(0, 0, 4, 4),
+ viewport.getHomeBounds(),
+ 0.00000001,
+ "Test getHomeBoundsWithMultiImages");
+ start();
+ }
+ viewer.addHandler('open', openHandler);
+ viewer.open([{
+ tileSource: DZI_PATH,
+ x: 0,
+ y: 0,
+ width: 2
+ }, {
+ tileSource: DZI_PATH,
+ x: 3,
+ y: 3,
+ width: 1
+ }]);
+ });
+
+ asyncTest('getHomeBoundsWithMultiImagesAndClipping', function() {
+ function openHandler() {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+ Util.assertRectangleEquals(
+ new OpenSeadragon.Rect(1, 1, 4, 4),
+ viewport.getHomeBounds(),
+ 0.00000001,
+ "Test getHomeBoundsWithMultiImagesAndClipping");
+ start();
+ }
+ viewer.addHandler('open', openHandler);
+ viewer.open([{
+ tileSource: DZI_PATH,
+ x: 0,
+ y: 0,
+ width: 2,
+ clip: new OpenSeadragon.Rect(500, 500, 500, 500)
+ }, {
+ tileSource: DZI_PATH,
+ x: 4,
+ y: 4,
+ width: 1
+ }]);
+ });
+
asyncTest('getHomeZoom', function() {
reopenViewerHelper({
property: 'defaultZoomLevel',
From 4bf7b629398b0e79da8efc247396facb87811b61 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sun, 10 Apr 2016 19:01:30 -0400
Subject: [PATCH 49/78] Fix enums doc.
---
src/overlay.js | 7 +++++--
src/placement.js | 2 ++
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index 76eb347c..25cc50d2 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -42,6 +42,7 @@
* @member OverlayPlacement
* @memberof OpenSeadragon
* @static
+ * @readonly
* @type {Object}
* @property {Number} CENTER
* @property {Number} TOP_LEFT
@@ -57,8 +58,10 @@
/**
* An enumeration of possible ways to handle overlays rotation
+ * @member OverlayRotationMode
* @memberOf OpenSeadragon
* @static
+ * @readonly
* @property {Number} NO_ROTATION The overlay ignore the viewport rotation.
* @property {Number} EXACT The overlay use CSS 3 transforms to rotate with
* the viewport. If the overlay contains text, it will get rotated as well.
@@ -66,11 +69,11 @@
* taking the size of the bounding box of the rotated bounds.
* Only valid for overlays with Rect location and scalable in both directions.
*/
- $.OverlayRotationMode = {
+ $.OverlayRotationMode = $.freezeObject({
NO_ROTATION: 1,
EXACT: 2,
BOUNDING_BOX: 3
- };
+ });
/**
* @class Overlay
diff --git a/src/placement.js b/src/placement.js
index a90bf5da..561d5daf 100644
--- a/src/placement.js
+++ b/src/placement.js
@@ -35,8 +35,10 @@
/**
* An enumeration of positions to anchor an element.
+ * @member Placement
* @memberOf OpenSeadragon
* @static
+ * @readonly
* @property {OpenSeadragon.Placement} CENTER
* @property {OpenSeadragon.Placement} TOP_LEFT
* @property {OpenSeadragon.Placement} TOP
From b1a0abd1041682a9d852c48139e63981f3da2aa5 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 19 Apr 2016 18:13:12 -0400
Subject: [PATCH 50/78] Add this.viewer test.
---
src/viewport.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/viewport.js b/src/viewport.js
index a2a9cc26..5095a9d5 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -341,7 +341,9 @@ $.Viewport.prototype = {
}, margins);
this._updateContainerInnerSize();
- this.viewer.forceRedraw();
+ if (this.viewer) {
+ this.viewer.forceRedraw();
+ }
},
/**
From 3775a877e2a3571c6b20f20edf1d5ff930140cdd Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 21 Apr 2016 10:02:02 -0400
Subject: [PATCH 51/78] Remove trailing spaces.
---
src/tilesource.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/tilesource.js b/src/tilesource.js
index 03854bbc..48941848 100644
--- a/src/tilesource.js
+++ b/src/tilesource.js
@@ -190,7 +190,7 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
this.aspectRatio = ( options.width && options.height ) ?
( options.width / options.height ) : 1;
this.dimensions = new $.Point( options.width, options.height );
-
+
if ( this.tileSize ){
this._tileWidth = this._tileHeight = this.tileSize;
delete this.tileSize;
@@ -212,7 +212,7 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
this._tileHeight = 0;
}
}
-
+
this.tileOverlap = options.tileOverlap ? options.tileOverlap : 0;
this.minLevel = options.minLevel ? options.minLevel : 0;
this.maxLevel = ( undefined !== options.maxLevel && null !== options.maxLevel ) ?
@@ -240,7 +240,7 @@ $.TileSource.prototype = {
);
return this._tileWidth;
},
-
+
/**
* Return the tileWidth for a given level.
* Subclasses should override this if tileWidth can be different at different levels
@@ -331,7 +331,7 @@ $.TileSource.prototype = {
Math.floor( rect.x / this.getTileWidth(i) ),
Math.floor( rect.y / this.getTileHeight(i) )
);
-
+
if( tiles.x + 1 >= tilesPerSide.x && tiles.y + 1 >= tilesPerSide.y ){
break;
}
From f8de9b33b023bb0dff51dc69cd37851f76e04108 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 21 Apr 2016 10:31:49 -0400
Subject: [PATCH 52/78] Fix getScaleForEdgeSmoothing with image tile source.
---
src/tile.js | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/src/tile.js b/src/tile.js
index 56fe1824..d9c391ce 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -336,15 +336,18 @@ $.Tile.prototype = {
* @return {Float}
*/
getScaleForEdgeSmoothing: function() {
- if (!this.cacheImageRecord) {
+ var context;
+ if (this.cacheImageRecord) {
+ context = this.cacheImageRecord.getRenderedContext();
+ } else if (this.context2D) {
+ context = this.context2D;
+ } else {
$.console.warn(
'[Tile.drawCanvas] attempting to get tile scale %s when tile\'s not cached',
this.toString());
return 1;
}
-
- var rendered = this.cacheImageRecord.getRenderedContext();
- return rendered.canvas.width / this.size.times($.pixelDensityRatio).x;
+ return context.canvas.width / (this.size.x * $.pixelDensityRatio);
},
/**
From 65a95d4a4988a33f9cb6f27cee5bdabec4cc4afb Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 21 Apr 2016 10:57:39 -0400
Subject: [PATCH 53/78] Add asserts on this.viewer.
---
src/viewport.js | 36 ++++++++++++++++++++++--------------
1 file changed, 22 insertions(+), 14 deletions(-)
diff --git a/src/viewport.js b/src/viewport.js
index 5095a9d5..5a70de16 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1134,7 +1134,7 @@ $.Viewport.prototype = {
if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
- $.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' +
+ $.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' +
'with multi-image; use TiledImage.imageToViewportCoordinates instead.');
} else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates
@@ -1276,10 +1276,12 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
- windowToImageCoordinates: function( pixel ) {
+ windowToImageCoordinates: function(pixel) {
+ $.console.assert(this.viewer,
+ "[Viewport.windowToImageCoordinates] the viewport must have a viewer.");
var viewerCoordinates = pixel.minus(
- OpenSeadragon.getElementPosition( this.viewer.element ));
- return this.viewerElementToImageCoordinates( viewerCoordinates );
+ $.getElementPosition(this.viewer.element));
+ return this.viewerElementToImageCoordinates(viewerCoordinates);
},
/**
@@ -1288,10 +1290,12 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
- imageToWindowCoordinates: function( pixel ) {
- var viewerCoordinates = this.imageToViewerElementCoordinates( pixel );
+ imageToWindowCoordinates: function(pixel) {
+ $.console.assert(this.viewer,
+ "[Viewport.imageToWindowCoordinates] the viewport must have a viewer.");
+ var viewerCoordinates = this.imageToViewerElementCoordinates(pixel);
return viewerCoordinates.plus(
- OpenSeadragon.getElementPosition( this.viewer.element ));
+ $.getElementPosition(this.viewer.element));
},
/**
@@ -1347,10 +1351,12 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
- windowToViewportCoordinates: function( pixel ) {
+ windowToViewportCoordinates: function(pixel) {
+ $.console.assert(this.viewer,
+ "[Viewport.windowToViewportCoordinates] the viewport must have a viewer.");
var viewerCoordinates = pixel.minus(
- OpenSeadragon.getElementPosition( this.viewer.element ));
- return this.viewerElementToViewportCoordinates( viewerCoordinates );
+ $.getElementPosition(this.viewer.element));
+ return this.viewerElementToViewportCoordinates(viewerCoordinates);
},
/**
@@ -1358,10 +1364,12 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} point
* @returns {OpenSeadragon.Point}
*/
- viewportToWindowCoordinates: function( point ) {
- var viewerCoordinates = this.viewportToViewerElementCoordinates( point );
+ viewportToWindowCoordinates: function(point) {
+ $.console.assert(this.viewer,
+ "[Viewport.viewportToWindowCoordinates] the viewport must have a viewer.");
+ var viewerCoordinates = this.viewportToViewerElementCoordinates(point);
return viewerCoordinates.plus(
- OpenSeadragon.getElementPosition( this.viewer.element ));
+ $.getElementPosition(this.viewer.element));
},
/**
@@ -1380,7 +1388,7 @@ $.Viewport.prototype = {
if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
- $.console.error('[Viewport.viewportToImageZoom] is not ' +
+ $.console.error('[Viewport.viewportToImageZoom] is not ' +
'accurate with multi-image.');
} else if (count === 1) {
// It is better to use TiledImage.viewportToImageZoom
From 79977b09a0162896d4a3bdb703fa78ec947dfe21 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 21 Apr 2016 16:06:07 -0400
Subject: [PATCH 54/78] Fix Viewport.update with zoomPoint.
---
src/spring.js | 9 +++++++++
src/viewport.js | 34 +++++++++++++++++-----------------
2 files changed, 26 insertions(+), 17 deletions(-)
diff --git a/src/spring.js b/src/spring.js
index e580b2e6..71c94d06 100644
--- a/src/spring.js
+++ b/src/spring.js
@@ -234,6 +234,15 @@ $.Spring.prototype = {
} else {
this.current.value = currentValue;
}
+ },
+
+ /**
+ * Returns whether the spring is at the target value
+ * @function
+ * @returns {Boolean} True if at target value, false otherwise
+ */
+ isAtTargetValue: function() {
+ return this.current.value === this.target.value;
}
};
diff --git a/src/viewport.js b/src/viewport.js
index 5dc60041..c8dcd31e 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -888,37 +888,37 @@ $.Viewport.prototype = {
},
/**
+ * Update the zoom and center (X and Y) springs.
* @function
+ * @returns {Boolean} True if any change has been made, false otherwise.
*/
update: function() {
- var oldZoomPixel,
- newZoomPixel,
- deltaZoomPixels,
- deltaZoomPoints;
if (this.zoomPoint) {
- oldZoomPixel = this.pixelFromPoint( this.zoomPoint, true );
- }
+ var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true);
+ this.zoomSpring.update();
+ var newZoomPixel = this.pixelFromPoint(this.zoomPoint, true);
- this.zoomSpring.update();
+ var deltaZoomPixels = newZoomPixel.minus(oldZoomPixel);
+ var deltaZoomPoints = this.deltaPointsFromPixels(
+ deltaZoomPixels, true);
- if (this.zoomPoint && this.zoomSpring.current.value != this._oldZoom) {
- newZoomPixel = this.pixelFromPoint( this.zoomPoint, true );
- deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
- deltaZoomPoints = this.deltaPointsFromPixels( deltaZoomPixels, true );
+ this.centerSpringX.shiftBy(deltaZoomPoints.x);
+ this.centerSpringY.shiftBy(deltaZoomPoints.y);
- this.centerSpringX.shiftBy( deltaZoomPoints.x );
- this.centerSpringY.shiftBy( deltaZoomPoints.y );
+ if (this.zoomSpring.isAtTargetValue()) {
+ this.zoomPoint = null;
+ }
} else {
- this.zoomPoint = null;
+ this.zoomSpring.update();
}
this.centerSpringX.update();
this.centerSpringY.update();
- var changed = this.centerSpringX.current.value != this._oldCenterX ||
- this.centerSpringY.current.value != this._oldCenterY ||
- this.zoomSpring.current.value != this._oldZoom;
+ var changed = this.centerSpringX.current.value !== this._oldCenterX ||
+ this.centerSpringY.current.value !== this._oldCenterY ||
+ this.zoomSpring.current.value !== this._oldZoom;
this._oldCenterX = this.centerSpringX.current.value;
this._oldCenterY = this.centerSpringY.current.value;
From b2dbf35dcb9e7888f056924e82fe3c248d1fbb01 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Fri, 22 Apr 2016 11:09:27 -0700
Subject: [PATCH 55/78] Changelog for #910 and #923
---
changelog.txt | 2 ++
1 file changed, 2 insertions(+)
diff --git a/changelog.txt b/changelog.txt
index 8829d474..8f72af41 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -38,6 +38,8 @@ OPENSEADRAGON CHANGELOG
* Added TiledImage.fitBounds method (#888)
* Overlays can now be scaled in a single dimension by providing a point location and either width or height (#896)
* Added full rotation support to overlays (#729, #193)
+* Viewport.goHome() now takes clipping into account (#910)
+* Improved zoom to point (#923)
2.1.0:
From 3106d8f85b49a2e74e00bbe614b0a47428f79fb9 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Sat, 23 Apr 2016 08:29:32 -0400
Subject: [PATCH 56/78] Fix viewport.fitBounds tests.
---
test/modules/viewport.js | 51 +++++++++++++++++++++++-----------------
1 file changed, 30 insertions(+), 21 deletions(-)
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index 0b3ca020..e40f82be 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -405,26 +405,7 @@
viewer.open(DZI_PATH);
});
- asyncTest('fitBounds', function(){
- var openHandler = function(event) {
- viewer.removeHandler('open', openHandler);
- var viewport = viewer.viewport;
-
- for(var i = 0; i < testRects.length; i++){
- var rect = testRects[i].times(viewport.getContainerSize());
- viewport.fitBounds(rect, true);
- propEqual(
- viewport.getBounds(),
- rect,
- "Fit bounds correctly."
- );
- }
- start();
- };
- viewer.addHandler('open', openHandler);
- viewer.open(DZI_PATH);
- });
-
+ // Fit bounds tests
var testRectsFitBounds = [
new OpenSeadragon.Rect(0, -0.75, 0.5, 1),
new OpenSeadragon.Rect(0.5, 0, 0.5, 0.8),
@@ -433,12 +414,39 @@
];
var expectedRectsFitBounds = [
+ new OpenSeadragon.Rect(-0.25, -0.75, 1, 1),
+ new OpenSeadragon.Rect(0.35, 0, 0.8, 0.8),
+ new OpenSeadragon.Rect(0.75, 0.75, 0.5, 0.5),
+ new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5)
+ ];
+
+ var expectedRectsFitBoundsWithConstraints = [
new OpenSeadragon.Rect(-0.25, -0.5, 1, 1),
new OpenSeadragon.Rect(0.35, 0, 0.8, 0.8),
new OpenSeadragon.Rect(0.75, 0.75, 0.5, 0.5),
new OpenSeadragon.Rect(-0.25, -0.25, 0.5, 0.5)
];
+ asyncTest('fitBounds', function(){
+ var openHandler = function(event) {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+
+ for(var i = 0; i < testRectsFitBounds.length; i++){
+ var rect = testRectsFitBounds[i];
+ viewport.fitBounds(rect, true);
+ propEqual(
+ viewport.getBounds(),
+ expectedRectsFitBounds[i],
+ "Fit bounds correctly."
+ );
+ }
+ start();
+ };
+ viewer.addHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
asyncTest('fitBoundsWithConstraints', function(){
var openHandler = function(event) {
viewer.removeHandler('open', openHandler);
@@ -450,7 +458,7 @@
viewport.fitBoundsWithConstraints(rect, true);
propEqual(
viewport.getBounds(),
- expectedRectsFitBounds[i],
+ expectedRectsFitBoundsWithConstraints[i],
"Fit bounds correctly."
);
}
@@ -491,6 +499,7 @@
viewer.addHandler('open', openHandler);
viewer.open(WIDE_PATH);
});
+ // End fitBounds tests.
asyncTest('panBy', function(){
var openHandler = function(event) {
From 684029bc791a8a3bce2bb3e78f7b3f7f093bac1e Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 27 Apr 2016 11:08:44 -0400
Subject: [PATCH 57/78] Optimize sketch canvas clearing and blending.
---
src/drawer.js | 107 +++++++++++++++++++++++++++++++---------------
src/rectangle.js | 14 ++++++
src/tile.js | 2 +-
src/tiledimage.js | 19 ++++++--
4 files changed, 103 insertions(+), 39 deletions(-)
diff --git a/src/drawer.js b/src/drawer.js
index 1677dc59..661663d1 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -259,13 +259,17 @@ $.Drawer.prototype = {
}
},
- _clear: function ( useSketch ) {
- if ( !this.useCanvas ) {
+ _clear: function (useSketch, bounds) {
+ if (!this.useCanvas) {
return;
}
- var context = this._getContext( useSketch );
- var canvas = context.canvas;
- context.clearRect( 0, 0, canvas.width, canvas.height );
+ var context = this._getContext(useSketch);
+ if (bounds) {
+ context.clearRect(bounds.x, bounds.y, bounds.width, bounds.height);
+ } else {
+ var canvas = context.canvas;
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ }
},
/**
@@ -382,47 +386,80 @@ $.Drawer.prototype = {
/**
* Blends the sketch canvas in the main canvas.
- * @param {Float} opacity The opacity of the blending.
- * @param {Float} [scale=1] The scale at which tiles were drawn on the sketch. Default is 1.
- * Use scale to draw at a lower scale and then enlarge onto the main canvas.
- * @param {OpenSeadragon.Point} [translate] A translation vector that was used to draw the tiles
- * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values.
- * @returns {undefined}
+ * @param {Object} options The options
+ * @param {Float} options.opacity The opacity of the blending.
+ * @param {Float} [options.scale=1] The scale at which tiles were drawn on
+ * the sketch. Default is 1.
+ * Use scale to draw at a lower scale and then enlarge onto the main canvas.
+ * @param {OpenSeadragon.Point} [options.translate] A translation vector
+ * that was used to draw the tiles
+ * @param {String} [options.compositeOperation] - How the image is
+ * composited onto other images; see compositeOperation in
+ * {@link OpenSeadragon.Options} for possible values.
+ * @param {OpenSeadragon.Rect} [options.bounds] The part of the sketch
+ * canvas to blend in the main canvas. If specified, options.scale and
+ * options.translate get ignored.
*/
blendSketch: function(opacity, scale, translate, compositeOperation) {
+ var options = opacity;
+ if (!$.isPlainObject(options)) {
+ options = {
+ opacity: opacity,
+ scale: scale,
+ translate: translate,
+ compositeOperation: compositeOperation
+ };
+ }
if (!this.useCanvas || !this.sketchCanvas) {
return;
}
- scale = scale || 1;
- var position = translate instanceof $.Point ?
- translate :
- new $.Point(0, 0);
-
- var widthExt = 0;
- var heightExt = 0;
- if (translate) {
- var widthDiff = this.sketchCanvas.width - this.canvas.width;
- var heightDiff = this.sketchCanvas.height - this.canvas.height;
- widthExt = Math.round(widthDiff / 2);
- heightExt = Math.round(heightDiff / 2);
- }
+ opacity = options.opacity;
+ compositeOperation = options.compositeOperation;
+ var bounds = options.bounds;
this.context.save();
this.context.globalAlpha = opacity;
if (compositeOperation) {
this.context.globalCompositeOperation = compositeOperation;
}
- this.context.drawImage(
- this.sketchCanvas,
- position.x - widthExt * scale,
- position.y - heightExt * scale,
- (this.canvas.width + 2 * widthExt) * scale,
- (this.canvas.height + 2 * heightExt) * scale,
- -widthExt,
- -heightExt,
- this.canvas.width + 2 * widthExt,
- this.canvas.height + 2 * heightExt
- );
+ if (bounds) {
+ this.context.drawImage(
+ this.sketchCanvas,
+ bounds.x,
+ bounds.y,
+ bounds.width,
+ bounds.height,
+ bounds.x,
+ bounds.y,
+ bounds.width,
+ bounds.height
+ );
+ } else {
+ scale = options.scale || 1;
+ translate = options.translate;
+ var position = translate instanceof $.Point ?
+ translate : new $.Point(0, 0);
+
+ var widthExt = 0;
+ var heightExt = 0;
+ if (translate) {
+ var widthDiff = this.sketchCanvas.width - this.canvas.width;
+ var heightDiff = this.sketchCanvas.height - this.canvas.height;
+ widthExt = Math.round(widthDiff / 2);
+ heightExt = Math.round(heightDiff / 2);
+ }
+ this.context.drawImage(
+ this.sketchCanvas,
+ position.x - widthExt * scale,
+ position.y - heightExt * scale,
+ (this.canvas.width + 2 * widthExt) * scale,
+ (this.canvas.height + 2 * heightExt) * scale,
+ -widthExt,
+ -heightExt,
+ this.canvas.width + 2 * widthExt,
+ this.canvas.height + 2 * heightExt
+ );
+ }
this.context.restore();
},
diff --git a/src/rectangle.js b/src/rectangle.js
index afe5da18..6223c12c 100644
--- a/src/rectangle.js
+++ b/src/rectangle.js
@@ -367,6 +367,20 @@ $.Rect.prototype = {
maxY - minY);
},
+ /**
+ * Retrieves the smallest horizontal (degrees=0) rectangle which contains
+ * this rectangle and has integers x, y, width and height
+ * @returns {OpenSeadragon.Rect}
+ */
+ getIntegerBoundingBox: function() {
+ var boundingBox = this.getBoundingBox();
+ var x = Math.floor(boundingBox.x);
+ var y = Math.floor(boundingBox.y);
+ var width = Math.ceil(boundingBox.width + boundingBox.x - x);
+ var height = Math.ceil(boundingBox.height + boundingBox.y - y);
+ return new $.Rect(x, y, width, height);
+ },
+
/**
* Provides a string representation of the rectangle which is useful for
* debugging.
diff --git a/src/tile.js b/src/tile.js
index d9c391ce..04f3c08a 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -195,7 +195,7 @@ $.Tile.prototype = {
// private
_hasTransparencyChannel: function() {
- return this.context2D || this.url.match('.png');
+ return !!this.context2D || this.url.match('.png');
},
/**
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 9d4db782..67c2a7f3 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1448,8 +1448,15 @@ function drawTiles( tiledImage, lastDrawn ) {
tiledImage._drawer.getCanvasSize(true));
}
- if ( useSketch ) {
- tiledImage._drawer._clear( true );
+ var bounds;
+ if (useSketch) {
+ if (!sketchScale) {
+ // Except when edge smoothing, we only clean the part of the
+ // sketch canvas we are going to use for performance reasons.
+ bounds = tiledImage.viewport.viewportToViewerElementRectangle(
+ tiledImage.getClippedBounds(true)).getIntegerBoundingBox();
+ }
+ tiledImage._drawer._clear(true, bounds);
}
// When scaling, we must rotate only when blending the sketch canvas to avoid
@@ -1532,7 +1539,13 @@ function drawTiles( tiledImage, lastDrawn ) {
if (offsetForRotation) {
tiledImage._drawer._offsetForRotation(tiledImage.viewport.degrees, false);
}
- tiledImage._drawer.blendSketch(tiledImage.opacity, sketchScale, sketchTranslate, tiledImage.compositeOperation);
+ tiledImage._drawer.blendSketch({
+ opacity: tiledImage.opacity,
+ scale: sketchScale,
+ translate: sketchTranslate,
+ compositeOperation: tiledImage.compositeOperation,
+ bounds: bounds
+ });
if (offsetForRotation) {
tiledImage._drawer._restoreRotationChanges(false);
}
From cac7052bf850b185bd4e2e49a2c75c6592f228d4 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 28 Apr 2016 11:26:09 -0400
Subject: [PATCH 58/78] Take pixelDensityRatio into account.
---
src/tiledimage.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 67c2a7f3..ed5f9443 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1454,7 +1454,9 @@ function drawTiles( tiledImage, lastDrawn ) {
// Except when edge smoothing, we only clean the part of the
// sketch canvas we are going to use for performance reasons.
bounds = tiledImage.viewport.viewportToViewerElementRectangle(
- tiledImage.getClippedBounds(true)).getIntegerBoundingBox();
+ tiledImage.getClippedBounds(true))
+ .getIntegerBoundingBox()
+ .times($.pixelDensityRatio);
}
tiledImage._drawer._clear(true, bounds);
}
From 1d02ba7853e8f272872d39ea0b6b1365924bf7be Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Fri, 29 Apr 2016 10:11:15 -0700
Subject: [PATCH 59/78] Changelog for #927
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index 8f72af41..07ee8bb2 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -40,6 +40,7 @@ OPENSEADRAGON CHANGELOG
* Added full rotation support to overlays (#729, #193)
* Viewport.goHome() now takes clipping into account (#910)
* Improved zoom to point (#923)
+* Optimized sketch canvas clearing and blending for images with opacity or transfer modes (#927)
2.1.0:
From 521e020b9a1e927ab4e62d9a4fc46bb9f7789df3 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Wed, 4 May 2016 22:26:33 -0400
Subject: [PATCH 60/78] Viewport getBounds and fitBounds methods now take
rotation into account. Fix #924
---
src/navigator.js | 4 +-
src/tiledimage.js | 13 +---
src/viewer.js | 10 +--
src/viewport.js | 131 +++++++++++++++++++++++++--------------
test/modules/viewport.js | 79 +++++++++++++++++++++--
5 files changed, 169 insertions(+), 68 deletions(-)
diff --git a/src/navigator.js b/src/navigator.js
index 4b3a98d2..e4b1a6c0 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -306,8 +306,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
this.updateSize();
}
- if( viewport && this.viewport ) {
- bounds = viewport.getBounds( true );
+ if (viewport && this.viewport) {
+ bounds = viewport.getBoundsNoRotate(true);
topleft = this.viewport.pixelFromPointNoRotate(bounds.getTopLeft(), false);
bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false)
.minus( this.totalBorderWidths );
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 9d4db782..8d4b64b1 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -795,6 +795,7 @@ function updateViewport( tiledImage ) {
levelOpacity,
levelVisibility;
+ viewportBounds = viewportBounds.getBoundingBox();
viewportBounds.x -= tiledImage._xSpring.current.value;
viewportBounds.y -= tiledImage._ySpring.current.value;
@@ -804,18 +805,6 @@ function updateViewport( tiledImage ) {
tile.beingDrawn = false;
}
- //Change bounds for rotation
- if (degrees === 90 || degrees === 270) {
- viewportBounds = viewportBounds.rotate( degrees );
- } else if (degrees !== 0 && degrees !== 180) {
- // This is just an approximation.
- var orthBounds = viewportBounds.rotate(90);
- viewportBounds.x -= orthBounds.width / 2;
- viewportBounds.y -= orthBounds.height / 2;
- viewportBounds.width += orthBounds.width;
- viewportBounds.height += orthBounds.height;
- }
-
var viewportTL = viewportBounds.getTopLeft();
var viewportBR = viewportBounds.getBottomRight();
diff --git a/src/viewer.js b/src/viewer.js
index da4b51ee..c9f6a98b 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2981,11 +2981,13 @@ function updateOnce( viewer ) {
if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
if ( viewer.preserveImageSizeOnResize ) {
var prevContainerSize = THIS[ viewer.hash ].prevContainerSize;
- var bounds = viewer.viewport.getBounds(true);
+ var bounds = viewer.viewport.getBoundsNoRotate(true);
var deltaX = (containerSize.x - prevContainerSize.x);
var deltaY = (containerSize.y - prevContainerSize.y);
- var viewportDiff = viewer.viewport.deltaPointsFromPixels(new OpenSeadragon.Point(deltaX, deltaY), true);
- viewer.viewport.resize(new OpenSeadragon.Point(containerSize.x, containerSize.y), false);
+ var viewportDiff = viewer.viewport.deltaPointsFromPixels(
+ new $.Point(deltaX, deltaY), true);
+ viewer.viewport.resize(
+ new $.Point(containerSize.x, containerSize.y), false);
// Keep the center of the image in the center and just adjust the amount of image shown
bounds.width += viewportDiff.x;
@@ -2996,7 +2998,7 @@ function updateOnce( viewer ) {
}
else {
// maintain image position
- var oldBounds = viewer.viewport.getBounds();
+ var oldBounds = viewer.viewport.getBoundsNoRotate();
var oldCenter = viewer.viewport.getCenter();
resizeViewportAndRecenter(viewer, containerSize, oldBounds, oldCenter);
}
diff --git a/src/viewport.js b/src/viewport.js
index ad65f573..8a2ba22d 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -237,6 +237,17 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Rect} The home bounds in vewport coordinates.
*/
getHomeBounds: function() {
+ return this.getHomeBoundsNoRotate().rotate(-this.getRotation());
+ },
+
+ /**
+ * Returns the home bounds in viewport coordinates.
+ * This method ignores the viewport rotation. Use
+ * {@link OpenSeadragon.Viewport#getHomeBounds} to take it into account.
+ * @function
+ * @returns {OpenSeadragon.Rect} The home bounds in vewport coordinates.
+ */
+ getHomeBoundsNoRotate: function() {
var center = this._contentBounds.getCenter();
var width = 1.0 / this.getHomeZoom();
var height = width / this.getAspectRatio();
@@ -254,8 +265,8 @@ $.Viewport.prototype = {
* @param {Boolean} immediately
* @fires OpenSeadragon.Viewer.event:home
*/
- goHome: function( immediately ) {
- if( this.viewer ){
+ goHome: function(immediately) {
+ if (this.viewer) {
/**
* Raised when the "home" operation occurs (see {@link OpenSeadragon.Viewport#goHome}).
*
@@ -266,11 +277,11 @@ $.Viewport.prototype = {
* @property {Boolean} immediately
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
- this.viewer.raiseEvent( 'home', {
+ this.viewer.raiseEvent('home', {
immediately: immediately
});
}
- return this.fitBounds( this.getHomeBounds(), immediately );
+ return this.fitBounds(this.getHomeBounds(), immediately);
},
/**
@@ -352,14 +363,26 @@ $.Viewport.prototype = {
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
* @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
*/
- getBounds: function( current ) {
- var center = this.getCenter( current ),
- width = 1.0 / this.getZoom( current ),
- height = width / this.getAspectRatio();
+ getBounds: function(current) {
+ return this.getBoundsNoRotate(current).rotate(-this.getRotation());
+ },
+
+ /**
+ * Returns the bounds of the visible area in viewport coordinates.
+ * This method ignores the viewport rotation. Use
+ * {@link OpenSeadragon.Viewport#getBounds} to take it into account.
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
+ */
+ getBoundsNoRotate: function(current) {
+ var center = this.getCenter(current);
+ var width = 1.0 / this.getZoom(current);
+ var height = width / this.getAspectRatio();
return new $.Rect(
- center.x - ( width / 2.0 ),
- center.y - ( height / 2.0 ),
+ center.x - (width / 2.0),
+ center.y - (height / 2.0),
width,
height
);
@@ -371,8 +394,19 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Rect} The location you are zoomed/panned to,
* including the space taken by margins, in viewport coordinates.
*/
- getBoundsWithMargins: function( current ) {
- var bounds = this.getBounds(current);
+ getBoundsWithMargins: function(current) {
+ return this.getBoundsNoRotateWithMargins(current).rotate(
+ -this.getRotation(), this.getCenter(current));
+ },
+
+ /**
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to,
+ * including the space taken by margins, in viewport coordinates.
+ */
+ getBoundsNoRotateWithMargins: function(current) {
+ var bounds = this.getBoundsNoRotate(current);
var factor = this._containerInnerSize.x * this.getZoom(current);
bounds.x -= this._margins.left / factor;
bounds.y -= this._margins.top / factor;
@@ -538,7 +572,7 @@ $.Viewport.prototype = {
this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
}
- bounds = this.getBounds();
+ bounds = this.getBoundsNoRotate();
constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
@@ -564,39 +598,38 @@ $.Viewport.prototype = {
* @param {Object} options (immediately=false, constraints=false)
* @return {OpenSeadragon.Viewport} Chainable.
*/
- _fitBounds: function( bounds, options ) {
+ _fitBounds: function(bounds, options) {
options = options || {};
var immediately = options.immediately || false;
var constraints = options.constraints || false;
var aspect = this.getAspectRatio();
var center = bounds.getCenter();
+
+ // Compute width and height of bounding box.
var newBounds = new $.Rect(
bounds.x,
bounds.y,
bounds.width,
- bounds.height
- );
+ bounds.height,
+ bounds.degrees + this.getRotation())
+ .getBoundingBox();
- if ( newBounds.getAspectRatio() >= aspect ) {
- newBounds.height = bounds.width / aspect;
- newBounds.y = center.y - newBounds.height / 2;
+ if (newBounds.getAspectRatio() >= aspect) {
+ newBounds.height = newBounds.width / aspect;
} else {
- newBounds.width = bounds.height * aspect;
- newBounds.x = center.x - newBounds.width / 2;
+ newBounds.width = newBounds.height * aspect;
}
- this.panTo( this.getCenter( true ), true );
- this.zoomTo( this.getZoom( true ), null, true );
-
- var oldBounds = this.getBounds();
- var oldZoom = this.getZoom();
- var newZoom = 1.0 / newBounds.width;
+ // Compute x and y from width, height and center position
+ newBounds.x = center.x - newBounds.width / 2;
+ newBounds.y = center.y - newBounds.height / 2;
+ var newZoom = 1.0 / newBounds.width;
if (constraints) {
var newBoundsAspectRatio = newBounds.getAspectRatio();
var newConstrainedZoom = Math.max(
- Math.min(newZoom, this.getMaxZoom() ),
+ Math.min(newZoom, this.getMaxZoom()),
this.getMinZoom()
);
@@ -608,32 +641,32 @@ $.Viewport.prototype = {
newBounds.y = center.y - newBounds.height / 2;
}
- newBounds = this._applyBoundaryConstraints( newBounds, immediately );
+ newBounds = this._applyBoundaryConstraints(newBounds, immediately);
center = newBounds.getCenter();
}
if (immediately) {
- this.panTo( center, true );
+ this.panTo(center, true);
return this.zoomTo(newZoom, null, true);
}
+ this.panTo(this.getCenter(true), true);
+ this.zoomTo(this.getZoom(true), null, true);
+
+ var oldBounds = this.getBounds();
+ var oldZoom = this.getZoom();
+
if (Math.abs(newZoom - oldZoom) < 0.00000001 ||
Math.abs(newBounds.width - oldBounds.width) < 0.00000001) {
- return this.panTo( center, immediately );
+ return this.panTo(center, immediately);
}
- var referencePoint = oldBounds.getTopLeft().times(
- this._containerInnerSize.x / oldBounds.width
- ).minus(
- newBounds.getTopLeft().times(
- this._containerInnerSize.x / newBounds.width
- )
- ).divide(
- this._containerInnerSize.x / oldBounds.width -
- this._containerInnerSize.x / newBounds.width
- );
+ newBounds = newBounds.rotate(-this.getRotation());
+ var referencePoint = newBounds.getTopLeft().divide(newBounds.width)
+ .minus(oldBounds.getTopLeft().divide(oldBounds.width))
+ .divide(1 / newBounds.width - 1 / oldBounds.width);
- return this.zoomTo( newZoom, referencePoint, immediately );
+ return this.zoomTo(newZoom, referencePoint, immediately);
},
/**
@@ -754,7 +787,12 @@ $.Viewport.prototype = {
},
/**
+ * Zooms to the specified zoom level
* @function
+ * @param {Number} zoom The zoom level to zoom to.
+ * @param {OpenSeadragon.Point} [refPoint] The point which will stay at
+ * the same screen location. Defaults to the viewport center.
+ * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:zoom
*/
@@ -844,7 +882,7 @@ $.Viewport.prototype = {
* @fires OpenSeadragon.Viewer.event:resize
*/
resize: function( newContainerSize, maintain ) {
- var oldBounds = this.getBounds(),
+ var oldBounds = this.getBoundsNoRotate(),
newBounds = oldBounds,
widthDeltaFactor;
@@ -996,7 +1034,8 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Point}
*/
pixelFromPointNoRotate: function(point, current) {
- return this._pixelFromPointNoRotate(point, this.getBounds(current));
+ return this._pixelFromPointNoRotate(
+ point, this.getBoundsNoRotate(current));
},
/**
@@ -1007,7 +1046,7 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Point}
*/
pixelFromPoint: function(point, current) {
- return this._pixelFromPoint(point, this.getBounds(current));
+ return this._pixelFromPoint(point, this.getBoundsNoRotate(current));
},
// private
@@ -1038,7 +1077,7 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Point}
*/
pointFromPixelNoRotate: function(pixel, current) {
- var bounds = this.getBounds( current );
+ var bounds = this.getBoundsNoRotate(current);
return pixel.minus(
new $.Point(this._margins.left, this._margins.top)
).divide(
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index e40f82be..0b06b93c 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -5,6 +5,7 @@
var VIEWER_ID = "example";
var PREFIX_URL = "/build/openseadragon/images/";
var SPRING_STIFFNESS = 100; // Faster animation = faster tests
+ var EPSILON = 0.0000000001;
module("viewport", {
setup: function () {
@@ -218,7 +219,27 @@
});
});
- asyncTest('getHomeBoundsWithRotation', function() {
+ asyncTest('getHomeBoundsNoRotate with rotation', function() {
+ function openHandler() {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+ viewport.setRotation(-675);
+ Util.assertRectangleEquals(
+ viewport.getHomeBoundsNoRotate(),
+ new OpenSeadragon.Rect(
+ (1 - Math.sqrt(2)) / 2,
+ (1 - Math.sqrt(2)) / 2,
+ Math.sqrt(2),
+ Math.sqrt(2)),
+ 0.00000001,
+ "Test getHomeBoundsNoRotate with degrees = -675");
+ start();
+ }
+ viewer.addHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
+ asyncTest('getHomeBounds with rotation', function() {
function openHandler() {
viewer.removeHandler('open', openHandler);
var viewport = viewer.viewport;
@@ -226,10 +247,11 @@
Util.assertRectangleEquals(
viewport.getHomeBounds(),
new OpenSeadragon.Rect(
- (1 - Math.sqrt(2)) / 2,
- (1 - Math.sqrt(2)) / 2,
+ 0.5,
+ -0.5,
Math.sqrt(2),
- Math.sqrt(2)),
+ Math.sqrt(2),
+ 45),
0.00000001,
"Test getHomeBounds with degrees = -675");
start();
@@ -420,6 +442,33 @@
new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5)
];
+ var expectedRectsFitBoundsWithRotation = [
+ new OpenSeadragon.Rect(
+ 0.25,
+ -1,
+ Math.sqrt(0.125) + Math.sqrt(0.5),
+ Math.sqrt(0.125) + Math.sqrt(0.5),
+ 45),
+ new OpenSeadragon.Rect(
+ 0.75,
+ -0.25,
+ Math.sqrt(0.125) + Math.sqrt(8 / 25),
+ Math.sqrt(0.125) + Math.sqrt(8 / 25),
+ 45),
+ new OpenSeadragon.Rect(
+ 1,
+ 0.5,
+ Math.sqrt(0.125) * 2,
+ Math.sqrt(0.125) * 2,
+ 45),
+ new OpenSeadragon.Rect(
+ -0.05,
+ -0.55,
+ Math.sqrt(0.125) * 2,
+ Math.sqrt(0.125) * 2,
+ 45)
+ ];
+
var expectedRectsFitBoundsWithConstraints = [
new OpenSeadragon.Rect(-0.25, -0.5, 1, 1),
new OpenSeadragon.Rect(0.35, 0, 0.8, 0.8),
@@ -447,6 +496,28 @@
viewer.open(DZI_PATH);
});
+ asyncTest('fitBounds with viewport rotation', function(){
+ var openHandler = function(event) {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+ viewport.setRotation(45);
+
+ for(var i = 0; i < testRectsFitBounds.length; i++){
+ var rect = testRectsFitBounds[i];
+ viewport.fitBounds(rect, true);
+ Util.assertRectangleEquals(
+ viewport.getBounds(),
+ expectedRectsFitBoundsWithRotation[i],
+ EPSILON,
+ "Fit bounds correctly."
+ );
+ }
+ start();
+ };
+ viewer.addHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
asyncTest('fitBoundsWithConstraints', function(){
var openHandler = function(event) {
viewer.removeHandler('open', openHandler);
From 7ea8733e5b83a7120d4b60617c6a2c45a9b147fb Mon Sep 17 00:00:00 2001
From: leesei <leesei@gmail.com>
Date: Fri, 6 May 2016 09:00:01 +0800
Subject: [PATCH 61/78] feat(navigator): add option autoFade
---
src/navigator.js | 2 +-
src/openseadragon.js | 13 +++++++++----
src/viewer.js | 1 +
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/navigator.js b/src/navigator.js
index 4b3a98d2..a8767483 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -62,7 +62,7 @@ $.Navigator = function( options ){
options.controlOptions = {
anchor: $.ControlAnchor.TOP_RIGHT,
attachToViewer: true,
- autoFade: true
+ autoFade: options.autoFade
};
if( options.position ){
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 4acf9130..e2a03b19 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -354,16 +354,16 @@
*
* @property {String} [navigatorId=navigator-GENERATED DATE]
* The ID of a div to hold the navigator minimap.
- * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored.
+ * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, navigator[Top|Left|Height|Width] and navigatorAutoFade options will be ignored.
* If an ID is not specified, a div element will be generated and placed on top of the main image.
*
* @property {String} [navigatorPosition='TOP_RIGHT']
* Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.<br>
- * If 'ABSOLUTE' is specified, then navigatorTop|Left|Height|Width determines the size and position of the navigator minimap in the viewer, and navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.<br>
- * For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the navigatorSizeRatio or navigatorHeight|Width values determine the size of the navigator minimap.
+ * If 'ABSOLUTE' is specified, then navigator[Top|Left|Height|Width] determines the size and position of the navigator minimap in the viewer, and navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.<br>
+ * For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the navigatorSizeRatio or navigator[Height|Width] values determine the size of the navigator minimap.
*
* @property {Number} [navigatorSizeRatio=0.2]
- * Ratio of navigator size to viewer size. Ignored if navigatorHeight|Width are specified.
+ * Ratio of navigator size to viewer size. Ignored if navigator[Height|Width] are specified.
*
* @property {Boolean} [navigatorMaintainSizeRatio=false]
* If true, the navigator minimap is resized (using navigatorSizeRatio) when the viewer size changes.
@@ -386,6 +386,10 @@
* Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior.
* Setting to false can also improve performance when the navigator is configured to a fixed size.
*
+ * @property {Boolean} [navigatorAutoFade=true]
+ * If the user stops interacting with the viewport, fade the navigator minimap.
+ * Setting to false will make the navigator minimap always visible.
+ *
* @property {Boolean} [navigatorRotate=true]
* If true, the navigator will be rotated together with the viewer.
*
@@ -1059,6 +1063,7 @@ if (typeof define === 'function' && define.amd) {
navigatorHeight: null,
navigatorWidth: null,
navigatorAutoResize: true,
+ navigatorAutoFade: true,
navigatorRotate: true,
// INITIAL ROTATION
diff --git a/src/viewer.js b/src/viewer.js
index da4b51ee..8c132570 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -417,6 +417,7 @@ $.Viewer = function( options ) {
width: this.navigatorWidth,
height: this.navigatorHeight,
autoResize: this.navigatorAutoResize,
+ autoFade: this.navigatorAutoFade,
prefixUrl: this.prefixUrl,
viewer: this,
navigatorRotate: this.navigatorRotate,
From e4c29d649b5b1752c9eca86eb2051859a2722a37 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 10 May 2016 18:49:55 -0400
Subject: [PATCH 62/78] Remove code duplication in Viewport.applyConstraints.
---
src/viewport.js | 63 ++++++++++++++--------------
test/modules/events.js | 90 +++++++++++++++++++++++-----------------
test/modules/viewport.js | 41 +++++++++++++++++-
3 files changed, 122 insertions(+), 72 deletions(-)
diff --git a/src/viewport.js b/src/viewport.js
index 8a2ba22d..3c08c594 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -555,40 +555,27 @@ $.Viewport.prototype = {
},
/**
+ * Enforces the minZoom, maxZoom and visibilityRatio constraints by
+ * zooming and panning to the closest acceptable zoom and location.
* @function
+ * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:constrain
*/
- applyConstraints: function( immediately ) {
- var actualZoom = this.getZoom(),
- constrainedZoom = Math.max(
- Math.min( actualZoom, this.getMaxZoom() ),
- this.getMinZoom()
- ),
- bounds,
- constrainedBounds;
-
- if ( actualZoom != constrainedZoom ) {
- this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
- }
-
- bounds = this.getBoundsNoRotate();
-
- constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
-
- if ( bounds.x !== constrainedBounds.x || bounds.y !== constrainedBounds.y || immediately ){
- this.fitBounds( constrainedBounds, immediately );
- }
-
+ applyConstraints: function(immediately) {
+ this.fitBoundsWithConstraints(this.getBounds(), immediately);
return this;
},
/**
+ * Equivalent to {@link OpenSeadragon.Viewport#applyConstraints}
* @function
- * @param {Boolean} immediately
+ * @param {Boolean} [immediately=false]
+ * @return {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:constrain
*/
- ensureVisible: function( immediately ) {
- return this.applyConstraints( immediately );
+ ensureVisible: function(immediately) {
+ return this.applyConstraints(immediately);
},
/**
@@ -670,29 +657,41 @@ $.Viewport.prototype = {
},
/**
+ * Makes the viewport zoom and pan so that the specified bounds take
+ * as much space as possible in the viewport.
+ * Note: this method ignores the constraints (minZoom, maxZoom and
+ * visibilityRatio).
+ * Use {@link OpenSeadragon.Viewport#fitBoundsWithConstraints} to enforce
+ * them.
* @function
* @param {OpenSeadragon.Rect} bounds
- * @param {Boolean} immediately
+ * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable.
*/
- fitBounds: function( bounds, immediately ) {
- return this._fitBounds( bounds, {
+ fitBounds: function(bounds, immediately) {
+ return this._fitBounds(bounds, {
immediately: immediately,
constraints: false
- } );
+ });
},
/**
+ * Makes the viewport zoom and pan so that the specified bounds take
+ * as much space as possible in the viewport while enforcing the constraints
+ * (minZoom, maxZoom and visibilityRatio).
+ * Note: because this method enforces the constraints, part of the
+ * provided bounds may end up outside of the viewport.
+ * Use {@link OpenSeadragon.Viewport#fitBounds} to ignore them.
* @function
* @param {OpenSeadragon.Rect} bounds
- * @param {Boolean} immediately
+ * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable.
*/
- fitBoundsWithConstraints: function( bounds, immediately ) {
- return this._fitBounds( bounds, {
+ fitBoundsWithConstraints: function(bounds, immediately) {
+ return this._fitBounds(bounds, {
immediately: immediately,
constraints: true
- } );
+ });
},
/**
diff --git a/test/modules/events.js b/test/modules/events.js
index 18f50c37..2d435fc0 100644
--- a/test/modules/events.js
+++ b/test/modules/events.js
@@ -678,45 +678,20 @@
} );
// ----------
- asyncTest( 'Viewer: preventDefaultAction', function () {
- var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' ),
- tracker = viewer.innerTracker,
- origClickHandler,
- origDragHandler,
- dragCount = 10,
- originalZoom = 0,
- originalBounds = null;
-
- var onOpen = function ( event ) {
- viewer.removeHandler( 'open', onOpen );
-
- // Hook viewer events to set preventDefaultAction
- origClickHandler = tracker.clickHandler;
- tracker.clickHandler = function ( event ) {
- event.preventDefaultAction = true;
- return origClickHandler( event );
- };
- origDragHandler = tracker.dragHandler;
- tracker.dragHandler = function ( event ) {
- event.preventDefaultAction = true;
- return origDragHandler( event );
- };
-
- originalZoom = viewer.viewport.getZoom();
- originalBounds = viewer.viewport.getBounds();
-
- var event = {
- clientX:1,
- clientY:1
- };
+ asyncTest('Viewer: preventDefaultAction', function() {
+ var $canvas = $(viewer.element).find('.openseadragon-canvas')
+ .not('.navigator .openseadragon-canvas');
+ var tracker = viewer.innerTracker;
+ var epsilon = 0.0000001;
+ function simulateClickAndDrag() {
$canvas.simulate( 'focus', event );
// Drag to pan
Util.simulateViewerClickWithDrag( {
viewer: viewer,
widthFactor: 0.25,
heightFactor: 0.25,
- dragCount: dragCount,
+ dragCount: 10,
dragDx: 1,
dragDy: 1
} );
@@ -730,20 +705,57 @@
dragDy: 0
} );
$canvas.simulate( 'blur', event );
+ }
- var zoom = viewer.viewport.getZoom(),
- bounds = viewer.viewport.getBounds();
+ var onOpen = function() {
+ viewer.removeHandler('open', onOpen);
- equal( zoom, originalZoom, "Zoom prevented" );
- ok( bounds.x == originalBounds.x && bounds.y == originalBounds.y, 'Pan prevented' );
+ // Hook viewer events to set preventDefaultAction
+ var origClickHandler = tracker.clickHandler;
+ tracker.clickHandler = function(event) {
+ event.preventDefaultAction = true;
+ return origClickHandler(event);
+ };
+ var origDragHandler = tracker.dragHandler;
+ tracker.dragHandler = function(event) {
+ event.preventDefaultAction = true;
+ return origDragHandler(event);
+ };
+
+ var originalZoom = viewer.viewport.getZoom();
+ var originalBounds = viewer.viewport.getBounds();
+
+ simulateClickAndDrag();
+
+ var zoom = viewer.viewport.getZoom();
+ var bounds = viewer.viewport.getBounds();
+ Util.assessNumericValue(zoom, originalZoom, epsilon,
+ "Zoom should be prevented");
+ Util.assertRectangleEquals(bounds, originalBounds, epsilon,
+ 'Pan should be prevented');
+
+ tracker.clickHandler = origClickHandler;
+ tracker.dragHandler = origDragHandler;
+
+ simulateClickAndDrag();
+
+ var zoom = viewer.viewport.getZoom();
+ var bounds = viewer.viewport.getBounds();
+ Util.assessNumericValue(zoom, 0.002, epsilon,
+ "Zoom should not be prevented");
+ Util.assertRectangleEquals(
+ bounds,
+ new OpenSeadragon.Rect(-250, -0.25, 500, 0.5),
+ epsilon,
+ 'Pan should not be prevented');
viewer.close();
start();
};
- viewer.addHandler( 'open', onOpen );
- viewer.open( '/test/data/testpattern.dzi' );
- } );
+ viewer.addHandler('open', onOpen);
+ viewer.open('/test/data/testpattern.dzi');
+ });
// ----------
asyncTest( 'EventSource/MouseTracker/Viewer: event.originalEvent event.userData canvas-drag canvas-drag-end canvas-release canvas-click', function () {
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index 0b06b93c..8412a007 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -409,7 +409,7 @@
viewer.open(DZI_PATH);
});
- asyncTest('ensureVisible', function(){
+ asyncTest('ensureVisible', function() {
var openHandler = function(event) {
viewer.removeHandler('open', openHandler);
var viewport = viewer.viewport;
@@ -427,6 +427,45 @@
viewer.open(DZI_PATH);
});
+ asyncTest('applyConstraints', function() {
+ var openHandler = function() {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+
+ viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
+ viewport.visibilityRatio = 0.3;
+ viewport.applyConstraints(true);
+ var bounds = viewport.getBounds();
+ Util.assertRectangleEquals(
+ bounds,
+ new OpenSeadragon.Rect(0.7, 0.7, 1, 1),
+ EPSILON,
+ "Viewport.applyConstraints should move viewport.");
+ start();
+ };
+ viewer.addHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
+ asyncTest('applyConstraints with rotation', function() {
+ var openHandler = function() {
+ viewer.removeHandler('open', openHandler);
+ var viewport = viewer.viewport;
+ viewport.setRotation(45);
+ viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
+ viewport.applyConstraints(true);
+ var bounds = viewport.getBounds();
+ Util.assertRectangleEquals(
+ bounds,
+ new OpenSeadragon.Rect(1, 0, Math.sqrt(2), Math.sqrt(2), 45),
+ EPSILON,
+ "Viewport.applyConstraints with rotation should move viewport.");
+ start();
+ };
+ viewer.addHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
// Fit bounds tests
var testRectsFitBounds = [
new OpenSeadragon.Rect(0, -0.75, 0.5, 1),
From 0c398eacdbb5f95116cdb56d23aae8e9f44d5f32 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 10 May 2016 21:19:33 -0400
Subject: [PATCH 63/78] Add test for fitBounds with a rotated rectangle.
---
test/modules/viewport.js | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index 8412a007..c3618be9 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -471,14 +471,16 @@
new OpenSeadragon.Rect(0, -0.75, 0.5, 1),
new OpenSeadragon.Rect(0.5, 0, 0.5, 0.8),
new OpenSeadragon.Rect(0.75, 0.75, 0.5, 0.5),
- new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5)
+ new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5),
+ new OpenSeadragon.Rect(0.5, 0.25, Math.sqrt(0.125), Math.sqrt(0.125), 45)
];
var expectedRectsFitBounds = [
new OpenSeadragon.Rect(-0.25, -0.75, 1, 1),
new OpenSeadragon.Rect(0.35, 0, 0.8, 0.8),
new OpenSeadragon.Rect(0.75, 0.75, 0.5, 0.5),
- new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5)
+ new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5),
+ new OpenSeadragon.Rect(0.25, 0.25, 0.5, 0.5)
];
var expectedRectsFitBoundsWithRotation = [
@@ -505,6 +507,12 @@
-0.55,
Math.sqrt(0.125) * 2,
Math.sqrt(0.125) * 2,
+ 45),
+ new OpenSeadragon.Rect(
+ 0.5,
+ 0.25,
+ Math.sqrt(0.125),
+ Math.sqrt(0.125),
45)
];
@@ -512,7 +520,8 @@
new OpenSeadragon.Rect(-0.25, -0.5, 1, 1),
new OpenSeadragon.Rect(0.35, 0, 0.8, 0.8),
new OpenSeadragon.Rect(0.75, 0.75, 0.5, 0.5),
- new OpenSeadragon.Rect(-0.25, -0.25, 0.5, 0.5)
+ new OpenSeadragon.Rect(-0.25, -0.25, 0.5, 0.5),
+ new OpenSeadragon.Rect(0.25, 0.25, 0.5, 0.5)
];
asyncTest('fitBounds', function(){
From 07d66ce655a1ac33398d359d928b6c63f86457e5 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 12 May 2016 18:01:18 -0400
Subject: [PATCH 64/78] Restore applyConstraints to avoid panning when clicking
at max zoom.
---
src/viewport.js | 30 +++++++++++++++++++++++++-----
1 file changed, 25 insertions(+), 5 deletions(-)
diff --git a/src/viewport.js b/src/viewport.js
index 3c08c594..ba65048b 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -474,6 +474,13 @@ $.Viewport.prototype = {
}
},
+ // private
+ _applyZoomConstraints: function(zoom) {
+ return Math.max(
+ Math.min(zoom, this.getMaxZoom()),
+ this.getMinZoom());
+ },
+
/**
* @function
* @private
@@ -563,7 +570,23 @@ $.Viewport.prototype = {
* @fires OpenSeadragon.Viewer.event:constrain
*/
applyConstraints: function(immediately) {
- this.fitBoundsWithConstraints(this.getBounds(), immediately);
+ var actualZoom = this.getZoom();
+ var constrainedZoom = this._applyZoomConstraints(actualZoom);
+
+ if (actualZoom !== constrainedZoom) {
+ this.zoomTo(constrainedZoom, this.zoomPoint, immediately);
+ }
+
+ var bounds = this.getBoundsNoRotate();
+ var constrainedBounds = this._applyBoundaryConstraints(
+ bounds, immediately);
+
+ if (bounds.x !== constrainedBounds.x ||
+ bounds.y !== constrainedBounds.y ||
+ immediately) {
+ this.fitBounds(constrainedBounds.rotate(this.getRotation()),
+ immediately);
+ }
return this;
},
@@ -615,10 +638,7 @@ $.Viewport.prototype = {
if (constraints) {
var newBoundsAspectRatio = newBounds.getAspectRatio();
- var newConstrainedZoom = Math.max(
- Math.min(newZoom, this.getMaxZoom()),
- this.getMinZoom()
- );
+ var newConstrainedZoom = this._applyZoomConstraints(newZoom);
if (newZoom !== newConstrainedZoom) {
newZoom = newConstrainedZoom;
From 14069a64e1ab20bc6dcf92bb25a50cb1dbec55fb Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 12 May 2016 18:47:35 -0400
Subject: [PATCH 65/78] Fix applyConstraints with rotation.
---
src/viewport.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/viewport.js b/src/viewport.js
index ba65048b..e5c4f51a 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -584,7 +584,8 @@ $.Viewport.prototype = {
if (bounds.x !== constrainedBounds.x ||
bounds.y !== constrainedBounds.y ||
immediately) {
- this.fitBounds(constrainedBounds.rotate(this.getRotation()),
+ this.fitBounds(
+ constrainedBounds.rotate(-this.getRotation()),
immediately);
}
return this;
From 1014d5767cdc50b080ec4d5c3271874cd9c95ff2 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 12 May 2016 19:23:09 -0400
Subject: [PATCH 66/78] Fix resize handling.
---
src/viewer.js | 66 ++++++++++++++-------------------------------------
1 file changed, 18 insertions(+), 48 deletions(-)
diff --git a/src/viewer.js b/src/viewer.js
index c9f6a98b..5fdb1c58 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2975,35 +2975,26 @@ function updateOnce( viewer ) {
return;
}
- var containerSize;
- if ( viewer.autoResize ) {
- containerSize = _getSafeElemSize( viewer.container );
- if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
- if ( viewer.preserveImageSizeOnResize ) {
- var prevContainerSize = THIS[ viewer.hash ].prevContainerSize;
- var bounds = viewer.viewport.getBoundsNoRotate(true);
- var deltaX = (containerSize.x - prevContainerSize.x);
- var deltaY = (containerSize.y - prevContainerSize.y);
- var viewportDiff = viewer.viewport.deltaPointsFromPixels(
- new $.Point(deltaX, deltaY), true);
- viewer.viewport.resize(
- new $.Point(containerSize.x, containerSize.y), false);
-
- // Keep the center of the image in the center and just adjust the amount of image shown
- bounds.width += viewportDiff.x;
- bounds.height += viewportDiff.y;
- bounds.x -= (viewportDiff.x / 2);
- bounds.y -= (viewportDiff.y / 2);
- viewer.viewport.fitBoundsWithConstraints(bounds, true);
- }
- else {
+ if (viewer.autoResize) {
+ var containerSize = _getSafeElemSize(viewer.container);
+ var prevContainerSize = THIS[viewer.hash].prevContainerSize;
+ if (!containerSize.equals(prevContainerSize)) {
+ var viewport = viewer.viewport;
+ if (viewer.preserveImageSizeOnResize) {
+ var resizeRatio = prevContainerSize.x / containerSize.x;
+ var zoom = viewport.getZoom() * resizeRatio;
+ var center = viewport.getCenter();
+ viewport.resize(containerSize, false);
+ viewport.zoomTo(zoom, null, true);
+ viewport.panTo(center, true);
+ } else {
// maintain image position
- var oldBounds = viewer.viewport.getBoundsNoRotate();
- var oldCenter = viewer.viewport.getCenter();
- resizeViewportAndRecenter(viewer, containerSize, oldBounds, oldCenter);
+ var oldBounds = viewport.getBounds();
+ viewport.resize(containerSize, true);
+ viewport.fitBoundsWithConstraints(oldBounds, true);
}
- THIS[ viewer.hash ].prevContainerSize = containerSize;
- THIS[ viewer.hash ].forceRedraw = true;
+ THIS[viewer.hash].prevContainerSize = containerSize;
+ THIS[viewer.hash].forceRedraw = true;
}
}
@@ -3088,27 +3079,6 @@ function updateOnce( viewer ) {
//viewer.profiler.endUpdate();
}
-// This function resizes the viewport and recenters the image
-// as it was before resizing.
-// TODO: better adjust width and height. The new width and height
-// should depend on the image dimensions and on the dimensions
-// of the viewport before and after switching mode.
-function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter ) {
- var viewport = viewer.viewport;
-
- viewport.resize( containerSize, true );
-
- var newBounds = new $.Rect(
- oldCenter.x - ( oldBounds.width / 2.0 ),
- oldCenter.y - ( oldBounds.height / 2.0 ),
- oldBounds.width,
- oldBounds.height
- );
-
- // let the viewport decide if the bounds are too big or too small
- viewport.fitBoundsWithConstraints( newBounds, true );
-}
-
function drawWorld( viewer ) {
viewer.imageLoader.clear();
viewer.drawer.clear();
From 6099962e408a8e62a068b2c23fd85e69a88e3f40 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Fri, 13 May 2016 11:24:15 -0700
Subject: [PATCH 67/78] Changelog for #934
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index 07ee8bb2..736ed3e4 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -41,6 +41,7 @@ OPENSEADRAGON CHANGELOG
* Viewport.goHome() now takes clipping into account (#910)
* Improved zoom to point (#923)
* Optimized sketch canvas clearing and blending for images with opacity or transfer modes (#927)
+* Now taking rotation into account in viewport getBounds and fitBounds methods (#934)
2.1.0:
From 352bfbc3a513476b4f12696f29c473d754fb4ccb Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 13 May 2016 15:18:37 -0400
Subject: [PATCH 68/78] Avoid loading clipped out tiles. Fix #889.
---
src/rectangle.js | 163 +++++++++++++++++++++++++++++++++++++-
src/tiledimage.js | 19 +++--
test/modules/rectangle.js | 82 +++++++++++++++++++
3 files changed, 255 insertions(+), 9 deletions(-)
diff --git a/src/rectangle.js b/src/rectangle.js
index 6223c12c..3f04afc6 100644
--- a/src/rectangle.js
+++ b/src/rectangle.js
@@ -307,6 +307,132 @@ $.Rect.prototype = {
bottom - top);
},
+ /**
+ * Returns the bounding box of the intersection of this rectangle with the
+ * given rectangle.
+ * @param {OpenSeadragon.Rect} rect
+ * @return {OpenSeadragon.Rect} the bounding box of the intersection
+ * or null if the rectangles don't intersect.
+ */
+ intersection: function(rect) {
+ // Simplified version of Weiler Atherton clipping algorithm
+ // https://en.wikipedia.org/wiki/Weiler%E2%80%93Atherton_clipping_algorithm
+ // Because we just want the bounding box of the intersection,
+ // we can just compute the bounding box of:
+ // 1. all the summits of this which are inside rect
+ // 2. all the summits of rect which are inside this
+ // 3. all the intersections of rect and this
+ var EPSILON = 0.0000000001;
+
+ var intersectionPoints = [];
+
+ var thisTopLeft = this.getTopLeft();
+ if (rect.containsPoint(thisTopLeft, EPSILON)) {
+ intersectionPoints.push(thisTopLeft);
+ }
+ var thisTopRight = this.getTopRight();
+ if (rect.containsPoint(thisTopRight, EPSILON)) {
+ intersectionPoints.push(thisTopRight);
+ }
+ var thisBottomLeft = this.getBottomLeft();
+ if (rect.containsPoint(thisBottomLeft, EPSILON)) {
+ intersectionPoints.push(thisBottomLeft);
+ }
+ var thisBottomRight = this.getBottomRight();
+ if (rect.containsPoint(thisBottomRight, EPSILON)) {
+ intersectionPoints.push(thisBottomRight);
+ }
+
+ var rectTopLeft = rect.getTopLeft();
+ if (this.containsPoint(rectTopLeft, EPSILON)) {
+ intersectionPoints.push(rectTopLeft);
+ }
+ var rectTopRight = rect.getTopRight();
+ if (this.containsPoint(rectTopRight, EPSILON)) {
+ intersectionPoints.push(rectTopRight);
+ }
+ var rectBottomLeft = rect.getBottomLeft();
+ if (this.containsPoint(rectBottomLeft, EPSILON)) {
+ intersectionPoints.push(rectBottomLeft);
+ }
+ var rectBottomRight = rect.getBottomRight();
+ if (this.containsPoint(rectBottomRight, EPSILON)) {
+ intersectionPoints.push(rectBottomRight);
+ }
+
+ var thisSegments = this._getSegments();
+ var rectSegments = rect._getSegments();
+ for (var i = 0; i < thisSegments.length; i++) {
+ var thisSegment = thisSegments[i];
+ for (var j = 0; j < rectSegments.length; j++) {
+ var rectSegment = rectSegments[j];
+ var point = getIntersection(thisSegment[0], thisSegment[1],
+ rectSegment[0], rectSegment[1]);
+ if (point) {
+ intersectionPoints.push(point);
+ }
+ }
+ }
+
+ // Get intersection point of segments [a,b] and [c,d]
+ function getIntersection(a, b, c, d) {
+ // http://stackoverflow.com/a/1968345/1440403
+ var abVector = b.minus(a);
+ var cdVector = d.minus(c);
+
+ var denom = -cdVector.x * abVector.y + abVector.x * cdVector.y;
+ if (denom === 0) {
+ return null;
+ }
+
+ var s = (abVector.x * (a.y - c.y) - abVector.y * (a.x - c.x)) / denom;
+ var t = (cdVector.x * (a.y - c.y) - cdVector.y * (a.x - c.x)) / denom;
+
+ if (-EPSILON <= s && s <= 1 - EPSILON &&
+ -EPSILON <= t && t <= 1 - EPSILON) {
+ return new $.Point(a.x + t * abVector.x, a.y + t * abVector.y);
+ }
+ return null;
+ }
+
+ if (intersectionPoints.length === 0) {
+ return null;
+ }
+
+ var minX = intersectionPoints[0].x;
+ var maxX = intersectionPoints[0].x;
+ var minY = intersectionPoints[0].y;
+ var maxY = intersectionPoints[0].y;
+ for (var i = 1; i < intersectionPoints.length; i++) {
+ var point = intersectionPoints[i];
+ if (point.x < minX) {
+ minX = point.x;
+ }
+ if (point.x > maxX) {
+ maxX = point.x;
+ }
+ if (point.y < minY) {
+ minY = point.y;
+ }
+ if (point.y > maxY) {
+ maxY = point.y;
+ }
+ }
+ return new $.Rect(minX, minY, maxX - minX, maxY - minY);
+ },
+
+ // private
+ _getSegments: function() {
+ var topLeft = this.getTopLeft();
+ var topRight = this.getTopRight();
+ var bottomLeft = this.getBottomLeft();
+ var bottomRight = this.getBottomRight();
+ return [[topLeft, topRight],
+ [topRight, bottomRight],
+ [bottomRight, bottomLeft],
+ [bottomLeft, topLeft]];
+ },
+
/**
* Rotates a rectangle around a point.
* @function
@@ -381,6 +507,37 @@ $.Rect.prototype = {
return new $.Rect(x, y, width, height);
},
+ /**
+ * Determines whether a point is inside this rectangle (edge included).
+ * @function
+ * @param {OpenSeadragon.Point} point
+ * @param {Number} [epsilon=0] the margin of error allowed
+ * @returns {Boolean} true if the point is inside this rectangle, false
+ * otherwise.
+ */
+ containsPoint: function(point, epsilon) {
+ epsilon = epsilon || 0;
+
+ // See http://stackoverflow.com/a/2752754/1440403 for explanation
+ var topLeft = this.getTopLeft();
+ var topRight = this.getTopRight();
+ var bottomLeft = this.getBottomLeft();
+ var topDiff = topRight.minus(topLeft);
+ var leftDiff = bottomLeft.minus(topLeft);
+
+ return ((point.x - topLeft.x) * topDiff.x +
+ (point.y - topLeft.y) * topDiff.y >= -epsilon) &&
+
+ ((point.x - topRight.x) * topDiff.x +
+ (point.y - topRight.y) * topDiff.y <= epsilon) &&
+
+ ((point.x - topLeft.x) * leftDiff.x +
+ (point.y - topLeft.y) * leftDiff.y >= -epsilon) &&
+
+ ((point.x - bottomLeft.x) * leftDiff.x +
+ (point.y - bottomLeft.y) * leftDiff.y <= epsilon);
+ },
+
/**
* Provides a string representation of the rectangle which is useful for
* debugging.
@@ -389,10 +546,10 @@ $.Rect.prototype = {
*/
toString: function() {
return "[" +
- (Math.round(this.x * 100) / 100) + "," +
- (Math.round(this.y * 100) / 100) + "," +
+ (Math.round(this.x * 100) / 100) + ", " +
+ (Math.round(this.y * 100) / 100) + ", " +
(Math.round(this.width * 100) / 100) + "x" +
- (Math.round(this.height * 100) / 100) + "," +
+ (Math.round(this.height * 100) / 100) + ", " +
(Math.round(this.degrees * 100) / 100) + "deg" +
"]";
}
diff --git a/src/tiledimage.js b/src/tiledimage.js
index b2b33efa..91f76c51 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -787,7 +787,6 @@ function updateViewport( tiledImage ) {
Math.log( 2 )
))
),
- degrees = tiledImage.viewport.degrees,
renderPixelRatioC,
renderPixelRatioT,
zeroRatioT,
@@ -795,16 +794,24 @@ function updateViewport( tiledImage ) {
levelOpacity,
levelVisibility;
- viewportBounds = viewportBounds.getBoundingBox();
- viewportBounds.x -= tiledImage._xSpring.current.value;
- viewportBounds.y -= tiledImage._ySpring.current.value;
-
// Reset tile's internal drawn state
- while ( tiledImage.lastDrawn.length > 0 ) {
+ while (tiledImage.lastDrawn.length > 0) {
tile = tiledImage.lastDrawn.pop();
tile.beingDrawn = false;
}
+ if (!tiledImage.wrapHorizontal && !tiledImage.wrapVertical) {
+ var tiledImageBounds = tiledImage.getClippedBounds(true);
+ var intersection = viewportBounds.intersection(tiledImageBounds);
+ if (intersection === null) {
+ return;
+ }
+ viewportBounds = intersection;
+ }
+ viewportBounds = viewportBounds.getBoundingBox();
+ viewportBounds.x -= tiledImage._xSpring.current.value;
+ viewportBounds.y -= tiledImage._ySpring.current.value;
+
var viewportTL = viewportBounds.getTopLeft();
var viewportBR = viewportBounds.getBottomRight();
diff --git a/test/modules/rectangle.js b/test/modules/rectangle.js
index 7e905f58..402e58c4 100644
--- a/test/modules/rectangle.js
+++ b/test/modules/rectangle.js
@@ -161,6 +161,65 @@
"Incorrect union with non horizontal rectangles.");
});
+ test('intersection', function() {
+ var rect1 = new OpenSeadragon.Rect(2, 2, 2, 3);
+ var rect2 = new OpenSeadragon.Rect(0, 1, 1, 1);
+ var expected = null;
+ var actual = rect1.intersection(rect2);
+ equal(expected, actual,
+ "Rectangle " + rect2 + " should not intersect " + rect1);
+ actual = rect2.intersection(rect1);
+ equal(expected, actual,
+ "Rectangle " + rect1 + " should not intersect " + rect2);
+
+ rect1 = new OpenSeadragon.Rect(0, 0, 2, 1);
+ rect2 = new OpenSeadragon.Rect(1, 0, 2, 2);
+ expected = new OpenSeadragon.Rect(1, 0, 1, 1);
+ actual = rect1.intersection(rect2);
+ Util.assertRectangleEquals(expected, actual, precision,
+ "Intersection of " + rect2 + " with " + rect1 + " should be " +
+ expected);
+ actual = rect2.intersection(rect1);
+ Util.assertRectangleEquals(expected, actual, precision,
+ "Intersection of " + rect1 + " with " + rect2 + " should be " +
+ expected);
+
+ rect1 = new OpenSeadragon.Rect(0, 0, 3, 3);
+ rect2 = new OpenSeadragon.Rect(1, 1, 1, 1);
+ expected = new OpenSeadragon.Rect(1, 1, 1, 1);
+ actual = rect1.intersection(rect2);
+ Util.assertRectangleEquals(expected, actual, precision,
+ "Intersection of " + rect2 + " with " + rect1 + " should be " +
+ expected);
+ actual = rect2.intersection(rect1);
+ Util.assertRectangleEquals(expected, actual, precision,
+ "Intersection of " + rect1 + " with " + rect2 + " should be " +
+ expected);
+
+
+ rect1 = new OpenSeadragon.Rect(2, 2, 2, 3, 45);
+ rect2 = new OpenSeadragon.Rect(0, 1, 1, 1);
+ expected = null;
+ actual = rect1.intersection(rect2);
+ equal(expected, actual,
+ "Rectangle " + rect2 + " should not intersect " + rect1);
+ actual = rect2.intersection(rect1);
+ equal(expected, actual,
+ "Rectangle " + rect1 + " should not intersect " + rect2);
+
+ rect1 = new OpenSeadragon.Rect(2, 0, 2, 3, 45);
+ rect2 = new OpenSeadragon.Rect(0, 1, 1, 1);
+ expected = new OpenSeadragon.Rect(0, 1, 1, 1);
+ actual = rect1.intersection(rect2);
+ Util.assertRectangleEquals(expected, actual, precision,
+ "Intersection of " + rect2 + " with " + rect1 + " should be " +
+ expected);
+ actual = rect2.intersection(rect1);
+ Util.assertRectangleEquals(expected, actual, precision,
+ "Intersection of " + rect1 + " with " + rect2 + " should be " +
+ expected);
+ });
+
test('rotate', function() {
var rect = new OpenSeadragon.Rect(0, 0, 2, 1);
@@ -218,4 +277,27 @@
"Bounding box of rect rotated 270deg.");
});
+ test('containsPoint', function() {
+ var rect = new OpenSeadragon.Rect(0, 0, 1, 1, 45);
+
+ ok(rect.containsPoint(new OpenSeadragon.Point(0, 0)),
+ 'Point 0,0 should be inside ' + rect);
+ ok(rect.containsPoint(rect.getTopRight()),
+ 'Top right vertex should be inside ' + rect);
+ ok(rect.containsPoint(rect.getBottomRight()),
+ 'Bottom right vertex should be inside ' + rect);
+ ok(rect.containsPoint(rect.getBottomLeft()),
+ 'Bottom left vertex should be inside ' + rect);
+ ok(rect.containsPoint(rect.getCenter()),
+ 'Center should be inside ' + rect);
+ notOk(rect.containsPoint(new OpenSeadragon.Point(1, 0)),
+ 'Point 1,0 should not be inside ' + rect);
+ ok(rect.containsPoint(new OpenSeadragon.Point(0.5, 0.5)),
+ 'Point 0.5,0.5 should be inside ' + rect);
+ ok(rect.containsPoint(new OpenSeadragon.Point(0.4, 0.5)),
+ 'Point 0.4,0.5 should be inside ' + rect);
+ notOk(rect.containsPoint(new OpenSeadragon.Point(0.6, 0.5)),
+ 'Point 0.6,0.5 should not be inside ' + rect);
+ });
+
})();
From b11edddf68ba999350fdf9a729b457c1fe7b75e3 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 13 May 2016 15:35:33 -0400
Subject: [PATCH 69/78] Fix jshint.
---
src/rectangle.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/rectangle.js b/src/rectangle.js
index 3f04afc6..98c839de 100644
--- a/src/rectangle.js
+++ b/src/rectangle.js
@@ -366,10 +366,10 @@ $.Rect.prototype = {
var thisSegment = thisSegments[i];
for (var j = 0; j < rectSegments.length; j++) {
var rectSegment = rectSegments[j];
- var point = getIntersection(thisSegment[0], thisSegment[1],
+ var intersect = getIntersection(thisSegment[0], thisSegment[1],
rectSegment[0], rectSegment[1]);
- if (point) {
- intersectionPoints.push(point);
+ if (intersect) {
+ intersectionPoints.push(intersect);
}
}
}
@@ -403,8 +403,8 @@ $.Rect.prototype = {
var maxX = intersectionPoints[0].x;
var minY = intersectionPoints[0].y;
var maxY = intersectionPoints[0].y;
- for (var i = 1; i < intersectionPoints.length; i++) {
- var point = intersectionPoints[i];
+ for (var k = 1; k < intersectionPoints.length; k++) {
+ var point = intersectionPoints[k];
if (point.x < minX) {
minX = point.x;
}
From a4dbae07545aecf978b7a4f12b1356abfd1bd4fb Mon Sep 17 00:00:00 2001
From: Daniel Zimmermann <daniel.zimmermann@serraview.com>
Date: Fri, 29 Apr 2016 18:30:30 +1000
Subject: [PATCH 70/78] Handle simultaneous touch events
Found and tested on an iPhone 5s w/ iOS 9.2.
Not sure about other devices.
Fixes #877
---
src/mousetracker.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/mousetracker.js b/src/mousetracker.js
index 4528df03..6b78f4d8 100644
--- a/src/mousetracker.js
+++ b/src/mousetracker.js
@@ -1357,11 +1357,11 @@
* @private
* @inner
*/
- function capturePointer( tracker, pointerType ) {
+ function capturePointer( tracker, pointerType, touchCount ) {
var pointsList = tracker.getActivePointersListByType( pointerType ),
eventParams;
- pointsList.captureCount++;
+ pointsList.captureCount += (pointerType === 'touch' ? touchCount : 1);
if ( pointsList.captureCount === 1 ) {
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 9 ) {
@@ -1400,11 +1400,11 @@
* @private
* @inner
*/
- function releasePointer( tracker, pointerType ) {
+ function releasePointer( tracker, pointerType, touchCount ) {
var pointsList = tracker.getActivePointersListByType( pointerType ),
eventParams;
- pointsList.captureCount--;
+ pointsList.captureCount -= (pointerType === 'touch' ? touchCount : 1);
if ( pointsList.captureCount === 0 ) {
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 9 ) {
@@ -2074,7 +2074,7 @@
if ( updatePointersDown( tracker, event, gPoints, 0 ) ) { // 0 means primary button press/release or touch contact
$.stopEvent( event );
- capturePointer( tracker, 'touch' );
+ capturePointer( tracker, 'touch', touchCount );
}
$.cancelEvent( event );
@@ -2128,7 +2128,7 @@
}
if ( updatePointersUp( tracker, event, gPoints, 0 ) ) {
- releasePointer( tracker, 'touch' );
+ releasePointer( tracker, 'touch', touchCount );
}
// simulate touchleave on our tracked element
From c25bf0a2398abc95fec5fdead07ceac33aa14dfc Mon Sep 17 00:00:00 2001
From: Daniel Zimmermann <daniel.luke.zimmermann@gmail.com>
Date: Sat, 14 May 2016 22:16:36 +1000
Subject: [PATCH 71/78] Correctly handle touch PointerEvents
`onPointerDown/Up` may call `capture/releasePointer`
with `"touch"` as the pointerType, which would result
in a bug as `touchCount` would be `undefined`.
`capture/releasePointer` should just default to a
count of `1` if not specified. This properly retains
the existing behaviour for non-TouchEvent handling.
---
src/mousetracker.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/mousetracker.js b/src/mousetracker.js
index 6b78f4d8..498a72ac 100644
--- a/src/mousetracker.js
+++ b/src/mousetracker.js
@@ -1357,11 +1357,11 @@
* @private
* @inner
*/
- function capturePointer( tracker, pointerType, touchCount ) {
+ function capturePointer( tracker, pointerType, pointerCount ) {
var pointsList = tracker.getActivePointersListByType( pointerType ),
eventParams;
- pointsList.captureCount += (pointerType === 'touch' ? touchCount : 1);
+ pointsList.captureCount += (pointerCount || 1);
if ( pointsList.captureCount === 1 ) {
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 9 ) {
@@ -1400,11 +1400,11 @@
* @private
* @inner
*/
- function releasePointer( tracker, pointerType, touchCount ) {
+ function releasePointer( tracker, pointerType, pointerCount ) {
var pointsList = tracker.getActivePointersListByType( pointerType ),
eventParams;
- pointsList.captureCount -= (pointerType === 'touch' ? touchCount : 1);
+ pointsList.captureCount -= (pointerCount || 1);
if ( pointsList.captureCount === 0 ) {
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 9 ) {
From 6ab3d5b33cb9f1357f6b4ddaa3f0f810ae960b8c Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Mon, 16 May 2016 09:42:06 -0700
Subject: [PATCH 72/78] Changelog for #935
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index 736ed3e4..bbcf71ff 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -42,6 +42,7 @@ OPENSEADRAGON CHANGELOG
* Improved zoom to point (#923)
* Optimized sketch canvas clearing and blending for images with opacity or transfer modes (#927)
* Now taking rotation into account in viewport getBounds and fitBounds methods (#934)
+* Added option to disable navigator auto-fade (#935)
2.1.0:
From 32f993f862bf465fa06999478372cbb1c8d74081 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Fri, 13 May 2016 16:38:56 -0400
Subject: [PATCH 73/78] Enforce html element width and height to 100% when
going full page.
---
src/viewer.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/viewer.js b/src/viewer.js
index 5fdb1c58..f8ad0035 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -918,9 +918,14 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
docStyle.padding = "0";
this.bodyWidth = bodyStyle.width;
- this.bodyHeight = bodyStyle.height;
+ this.docWidth = docStyle.width;
bodyStyle.width = "100%";
+ docStyle.width = "100%";
+
+ this.bodyHeight = bodyStyle.height;
+ this.docHeight = docStyle.height;
bodyStyle.height = "100%";
+ docStyle.height = "100%";
//when entering full screen on the ipad it wasnt sufficient to leave
//the body intact as only only the top half of the screen would
@@ -981,7 +986,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
docStyle.padding = this.docPadding;
bodyStyle.width = this.bodyWidth;
+ docStyle.width = this.docWidth;
+
bodyStyle.height = this.bodyHeight;
+ docStyle.height = this.docHeight;
body.removeChild( this.element );
nodes = this.previousBody.length;
From 7935ab82d4bbd7f26fcfb7acaed8fa85fa90f3d9 Mon Sep 17 00:00:00 2001
From: Daniel Zimmermann <daniel.luke.zimmermann@gmail.com>
Date: Mon, 16 May 2016 06:26:18 +1000
Subject: [PATCH 74/78] Add unit tests for multi-touch
---
test/coverage.html | 1 +
test/helpers/touch.js | 134 +++++++++++++++++++++++++++++++++++++++++
test/modules/events.js | 78 +++++++++++++++++++++++-
test/test.html | 1 +
4 files changed, 213 insertions(+), 1 deletion(-)
create mode 100644 test/helpers/touch.js
diff --git a/test/coverage.html b/test/coverage.html
index 81ffe579..b04d5fda 100644
--- a/test/coverage.html
+++ b/test/coverage.html
@@ -53,6 +53,7 @@
<!-- Helpers -->
<script src="/test/helpers/legacy.mouse.shim.js"></script>
<script src="/test/helpers/test.js"></script>
+ <script src="/test/helpers/touch.js"></script>
<!-- Modules -->
<!-- Polyfill must be inserted first because it is testing functions
diff --git a/test/helpers/touch.js b/test/helpers/touch.js
new file mode 100644
index 00000000..ad86ceaa
--- /dev/null
+++ b/test/helpers/touch.js
@@ -0,0 +1,134 @@
+/* global TouchUtil, $ */
+
+(function () {
+
+ var touches,
+ identifier,
+ target;
+
+ // ----------
+ window.TouchUtil = {
+ reset: function () {
+ touches = [];
+ identifier = 0;
+ },
+
+ initTracker: function ( tracker ) {
+ // for testing in other touch-enabled browsers
+ if ( !('ontouchstart' in window) ) {
+ tracker.setTracking( false );
+ OpenSeadragon.MouseTracker.subscribeEvents.push( 'touchstart', 'touchend' );
+ tracker.setTracking( true );
+ }
+
+ target = tracker.element;
+ },
+
+ resetTracker: function ( tracker ) {
+ // for testing in other touch-enabled browsers
+ if ( !('ontouchstart' in window) ) {
+ tracker.setTracking( false );
+ ['touchstart', 'touchend'].forEach(function ( type ) {
+ var index = OpenSeadragon.MouseTracker.subscribeEvents.indexOf( type );
+ if ( index > -1 ) {
+ OpenSeadragon.MouseTracker.subscribeEvents.splice( index, 1 );
+ }
+ });
+ tracker.setTracking( true );
+ }
+
+ target = null;
+ },
+
+ start: function () {
+ var touch,
+ event,
+ newTouches = [];
+
+ for ( var i = 0; i < arguments.length; i++ ) {
+ touch = createTouch(
+ target.offsetLeft + arguments[ i ][ 0 ],
+ target.offsetTop + arguments[ i ][ 1 ]
+ );
+
+ touches.push( touch );
+ newTouches.push( touch );
+ }
+
+ event = createTouchEvent( 'touchstart', newTouches );
+ target.dispatchEvent( event );
+ return newTouches.length === 1 ? newTouches[ 0 ] : newTouches;
+ },
+
+ end: function ( changedTouches ) {
+ if ( !$.isArray( changedTouches ) ) {
+ changedTouches = [ changedTouches ];
+ }
+
+ var event;
+ touches = touches.filter(function ( touch ) {
+ return changedTouches.indexOf( touch ) === -1;
+ });
+
+ event = createTouchEvent( 'touchend', changedTouches );
+ target.dispatchEvent( event );
+ }
+
+ };
+
+ // ----------
+ function createTouch( x, y ) {
+ try {
+ // new spec
+ return new Touch({
+ identifier: identifier++,
+ target: target,
+ pageX: target.offsetLeft + x,
+ pageY: target.offsetTop + y
+ } );
+ } catch (e) {
+ // legacy
+ return document.createTouch( window, target, identifier++, x, y, x, y );
+ }
+ }
+
+ function createTouchList( touches ) {
+ // legacy
+ return document.createTouchList.apply( document, touches );
+ }
+
+ function createTouchEvent( type, changedTouches ) {
+ try {
+ // new spec
+ return new TouchEvent( type, {
+ view: window,
+ bubbles: true,
+ cancelable: true,
+ touches: touches,
+ targetTouches: touches,
+ changedTouches: changedTouches
+ } );
+ } catch (e) {
+ // legacy
+ var touchEvent = document.createEvent( 'TouchEvent' );
+ var touch1 = changedTouches[ 0 ];
+ touchEvent.initTouchEvent(
+ createTouchList( touches ), // touches
+ createTouchList( touches ), // targetTouches
+ createTouchList( changedTouches ), // changedTouches
+ type, // type
+ window, // view
+ touch1.screenX, // screenX
+ touch1.screenY, // screenY
+ touch1.clientX, // clientX
+ touch1.clientY, // clientY
+ false, // ctrlKey
+ false, // altKey
+ false, // shiftKey
+ false // metaKey
+ );
+ return touchEvent;
+ }
+ }
+
+})();
diff --git a/test/modules/events.js b/test/modules/events.js
index 2d435fc0..30dc28a2 100644
--- a/test/modules/events.js
+++ b/test/modules/events.js
@@ -1,4 +1,4 @@
-/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
+/* global module, asyncTest, $, ok, equal, notEqual, start, test, TouchUtil, Util, testLog */
(function () {
var viewer;
@@ -677,6 +677,82 @@
viewer.open( '/test/data/testpattern.dzi' );
} );
+ // ----------
+ if ('TouchEvent' in window) {
+ asyncTest( 'MouseTracker: touch events', function () {
+ var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' ),
+ tracker = viewer.innerTracker,
+ touches;
+
+ var reset = function () {
+ touches = [];
+ TouchUtil.reset();
+ };
+
+ var assessTouchExpectations = function ( expected ) {
+ var pointersList = tracker.getActivePointersListByType( 'touch' );
+ if ('captureCount' in expected) {
+ equal( pointersList.captureCount, expected.captureCount, expected.description + 'Pointer capture count matches expected (' + expected.captureCount + ')' );
+ }
+ if ('contacts' in expected) {
+ equal( pointersList.contacts, expected.contacts, expected.description + 'Pointer contact count matches expected (' + expected.contacts + ')' );
+ }
+ if ('trackedPointers' in expected) {
+ equal( pointersList.getLength(), expected.trackedPointers, expected.description + 'Tracked pointer count matches expected (' + expected.trackedPointers + ')' );
+ }
+ };
+
+ var onOpen = function ( event ) {
+ viewer.removeHandler( 'open', onOpen );
+
+ TouchUtil.initTracker( tracker );
+
+ // start-end-end (multi-touch start event)
+ reset();
+ touches = TouchUtil.start( [0,0], [20,20] );
+ assessTouchExpectations({
+ description: 'start-end-end (multi-touch start event) [capture]: ',
+ captureCount: 2,
+ contacts: 2,
+ trackedPointers: 2
+ });
+ TouchUtil.end( touches[1] );
+ TouchUtil.end( touches[0] );
+ assessTouchExpectations({
+ description: 'start-end-end (multi-touch start event) [release]: ',
+ captureCount: 0,
+ contacts: 0,
+ trackedPointers: 0
+ });
+
+ // start-start-end (multi-touch end event)
+ reset();
+ touches.push( TouchUtil.start([0, 0]) );
+ touches.push( TouchUtil.start([20, 20]) );
+ assessTouchExpectations({
+ description: 'start-start-end (multi-touch end event) [capture]: ',
+ captureCount: 2,
+ contacts: 2,
+ trackedPointers: 2
+ });
+ TouchUtil.end( touches );
+ assessTouchExpectations({
+ description: 'start-start-end (multi-touch end event) [release]: ',
+ captureCount: 0,
+ contacts: 0,
+ trackedPointers: 0
+ });
+
+ TouchUtil.resetTracker( tracker );
+ viewer.close();
+ start();
+ };
+
+ viewer.addHandler( 'open', onOpen );
+ viewer.open( '/test/data/testpattern.dzi' );
+ } );
+ }
+
// ----------
asyncTest('Viewer: preventDefaultAction', function() {
var $canvas = $(viewer.element).find('.openseadragon-canvas')
diff --git a/test/test.html b/test/test.html
index 6a42284f..74495ff6 100644
--- a/test/test.html
+++ b/test/test.html
@@ -17,6 +17,7 @@
<script src="/build/openseadragon/openseadragon.js"></script>
<script src="/test/helpers/legacy.mouse.shim.js"></script>
<script src="/test/helpers/test.js"></script>
+ <script src="/test/helpers/touch.js"></script>
<!-- Polyfill must be inserted first because it is testing functions
reassignments which could be done by other test. -->
From af21d7b4cd594a185a95c6f17ff770aada144f53 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Tue, 17 May 2016 09:54:03 -0700
Subject: [PATCH 75/78] Changelog for #940
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index bbcf71ff..e4f09cb6 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -43,6 +43,7 @@ OPENSEADRAGON CHANGELOG
* Optimized sketch canvas clearing and blending for images with opacity or transfer modes (#927)
* Now taking rotation into account in viewport getBounds and fitBounds methods (#934)
* Added option to disable navigator auto-fade (#935)
+* Fixed issue with maintaining viewport position with full screen (#940)
2.1.0:
From 12f9aa46b5819652b4423a7dd55a02d6cae54837 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Tue, 17 May 2016 10:46:11 -0700
Subject: [PATCH 76/78] Changelog for #930
---
changelog.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/changelog.txt b/changelog.txt
index e4f09cb6..f256f49d 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -44,6 +44,7 @@ OPENSEADRAGON CHANGELOG
* Now taking rotation into account in viewport getBounds and fitBounds methods (#934)
* Added option to disable navigator auto-fade (#935)
* Fixed issue with maintaining viewport position with full screen (#940)
+* Fixed an issue with simultaneous touch events (#930)
2.1.0:
From 8951ac3f5bfd142d0d3bc0e26a5fdef539aa7362 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Tue, 17 May 2016 14:27:28 -0400
Subject: [PATCH 77/78] Fix fitBounds with extreme zoom values.
---
src/viewport.js | 10 +++++-----
test/modules/viewport.js | 38 ++++++++++++++++++++++++++++++++++++++
2 files changed, 43 insertions(+), 5 deletions(-)
diff --git a/src/viewport.js b/src/viewport.js
index e5c4f51a..da2ce761 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -664,15 +664,15 @@ $.Viewport.prototype = {
var oldBounds = this.getBounds();
var oldZoom = this.getZoom();
- if (Math.abs(newZoom - oldZoom) < 0.00000001 ||
- Math.abs(newBounds.width - oldBounds.width) < 0.00000001) {
+ if (oldZoom === 0 || Math.abs(newZoom / oldZoom - 1) < 0.00000001) {
+ this.zoomTo(newZoom, true);
return this.panTo(center, immediately);
}
newBounds = newBounds.rotate(-this.getRotation());
- var referencePoint = newBounds.getTopLeft().divide(newBounds.width)
- .minus(oldBounds.getTopLeft().divide(oldBounds.width))
- .divide(1 / newBounds.width - 1 / oldBounds.width);
+ var referencePoint = newBounds.getTopLeft().times(newZoom)
+ .minus(oldBounds.getTopLeft().times(oldZoom))
+ .divide(newZoom - oldZoom);
return this.zoomTo(newZoom, referencePoint, immediately);
},
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index c3618be9..f39473cf 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -587,6 +587,44 @@
viewer.open(DZI_PATH);
});
+ asyncTest('fitBounds with almost same zoom', function() {
+ var openHandler = function() {
+ var viewport = viewer.viewport;
+ var rect1 = new OpenSeadragon.Rect(0, 0, 1, 1);
+ viewport.fitBounds(rect1, true);
+ Util.assertRectangleEquals(rect1, viewport.getBounds(), 1e-6,
+ 'Bounds should be ' + rect1);
+
+ // Zoom and pan
+ var rect2 = new OpenSeadragon.Rect(1, 1, 1 + 1e-8, 1 + 1e-8);
+ viewport.fitBounds(rect2);
+ Util.assertRectangleEquals(rect2, viewport.getBounds(), 1e-6,
+ 'Bounds should be ' + rect2);
+ start();
+ };
+ viewer.addOnceHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
+ asyncTest('fitBounds with big rectangle', function() {
+ var openHandler = function() {
+ var viewport = viewer.viewport;
+ var rect1 = new OpenSeadragon.Rect(0, 0, 1e9, 1e9);
+ viewport.fitBounds(rect1, true);
+ Util.assertRectangleEquals(rect1, viewport.getBounds(), 1e-6,
+ 'Bounds should be ' + rect1);
+
+ // Zoom and pan
+ var rect2 = new OpenSeadragon.Rect(1, 1, 2e9, 2e9);
+ viewport.fitBounds(rect2);
+ Util.assertRectangleEquals(rect2, viewport.getBounds(), 1e-6,
+ 'Bounds should be ' + rect2);
+ start();
+ };
+ viewer.addOnceHandler('open', openHandler);
+ viewer.open(DZI_PATH);
+ });
+
asyncTest('fitHorizontally', function(){
var openHandler = function(event) {
viewer.removeHandler('open', openHandler);
From 5071540af42fc8b07f563a3d96ac304092a6595f Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Thu, 19 May 2016 09:50:10 -0700
Subject: [PATCH 78/78] Changelog for #939
---
changelog.txt | 2 ++
1 file changed, 2 insertions(+)
diff --git a/changelog.txt b/changelog.txt
index f256f49d..725bfdc0 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -45,6 +45,8 @@ OPENSEADRAGON CHANGELOG
* Added option to disable navigator auto-fade (#935)
* Fixed issue with maintaining viewport position with full screen (#940)
* Fixed an issue with simultaneous touch events (#930)
+* Avoid loading clipped out tiles (#939)
+* Improved precision for subtle moves with fitBounds (#939)
2.1.0: