diff --git a/changelog.txt b/changelog.txt index 980d78a1..9b8ac00b 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,7 +1,18 @@ OPENSEADRAGON CHANGELOG ======================= -2.3.1: (In Progress) +2.4.0: (In Progress) + +* BREAKING CHANGE: Viewer's canvas-double-click event is now fired before it initiates the zoom (#1288) +* You can now prevent canvas-double-click events from zooming on a per-event basis (#1288) + +2.3.1: + +* Debug mode now uses different colors for different tiled images (customizable via debugGridColor) (#1271) +* Fixed a problem with preventDefaultAction for the canvas-drag event (#1278) +* Fixed an issue causing double images with certain aspect ratios (#1280) +* Fixed: placeholderFillStyle had no effect (#1286) +* Fixed seams that appear in wrap mode on Safari and Firefox (#1305) 2.3.0: diff --git a/package.json b/package.json index 231c5158..457edf01 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openseadragon", - "version": "2.3.0", + "version": "2.3.1", "description": "Provides a smooth, zoomable user interface for HTML/Javascript.", "keywords": ["image", "zoom", "pan", "openseadragon", "seadragon", "deepzoom", "dzi", "iiif", "osm", "tms"], "homepage": "http://openseadragon.github.io/", diff --git a/src/tile.js b/src/tile.js index 61ba2e64..a0b29f4f 100644 --- a/src/tile.js +++ b/src/tile.js @@ -199,12 +199,27 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja * @memberof OpenSeadragon.Tile# */ this.beingDrawn = false; + /** * Timestamp the tile was last touched. * @member {Number} lastTouchTime * @memberof OpenSeadragon.Tile# */ this.lastTouchTime = 0; + + /** + * Whether this tile is in the right-most column for its level. + * @member {Boolean} isRightMost + * @memberof OpenSeadragon.Tile# + */ + this.isRightMost = false; + + /** + * Whether this tile is in the bottom-most row for its level. + * @member {Boolean} isBottomMost + * @memberof OpenSeadragon.Tile# + */ + this.isBottomMost = false; }; /** @lends OpenSeadragon.Tile.prototype */ diff --git a/src/tiledimage.js b/src/tiledimage.js index 8851a933..a289026a 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1405,7 +1405,7 @@ function getTile( bounds.x += ( x - xMod ) / numTiles.x; bounds.y += (worldHeight / worldWidth) * (( y - yMod ) / numTiles.y); - tilesMatrix[ level ][ x ][ y ] = new $.Tile( + tile = new $.Tile( level, x, y, @@ -1416,6 +1416,16 @@ function getTile( tiledImage.loadTilesWithAjax, ajaxHeaders ); + + if (xMod === numTiles.x - 1) { + tile.isRightMost = true; + } + + if (yMod === numTiles.y - 1) { + tile.isBottomMost = true; + } + + tilesMatrix[ level ][ x ][ y ] = tile; } tile = tilesMatrix[ level ][ x ][ y ]; @@ -1602,6 +1612,14 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, sizeC = sizeC.plus( new $.Point( 1, 1 ) ); } + if (tile.isRightMost && tiledImage.wrapHorizontal) { + sizeC.x += 0.75; // Otherwise Firefox and Safari show seams + } + + if (tile.isBottomMost && tiledImage.wrapVertical) { + sizeC.y += 0.75; // Otherwise Firefox and Safari show seams + } + tile.position = positionC; tile.size = sizeC; tile.squaredDistance = tileSquaredDistance; @@ -1805,15 +1823,19 @@ function compareTiles( previousBest, tile ) { * @param {OpenSeadragon.Tile[]} lastDrawn - An unordered list of Tiles drawn last frame. */ function drawTiles( tiledImage, lastDrawn ) { - if (tiledImage.opacity === 0 || lastDrawn.length === 0) { + if (tiledImage.opacity === 0 || (lastDrawn.length === 0 && !tiledImage.placeholderFillStyle)) { return; } - var tile = lastDrawn[0]; - var useSketch = tiledImage.opacity < 1 || - (tiledImage.compositeOperation && - tiledImage.compositeOperation !== 'source-over') || - (!tiledImage._isBottomItem() && tile._hasTransparencyChannel()); + var tile = lastDrawn[0]; + var useSketch; + + if (tile) { + useSketch = tiledImage.opacity < 1 || + (tiledImage.compositeOperation && + tiledImage.compositeOperation !== 'source-over') || + (!tiledImage._isBottomItem() && tile._hasTransparencyChannel()); + } var sketchScale; var sketchTranslate; diff --git a/src/tilesource.js b/src/tilesource.js index b40598ae..84aa5a82 100644 --- a/src/tilesource.js +++ b/src/tilesource.js @@ -360,7 +360,8 @@ $.TileSource.prototype = { if (point.x >= 1) { x = this.getNumTiles(level).x - 1; } - if (point.y >= 1 / this.aspectRatio) { + var EPSILON = 1e-16; + if (point.y >= 1 / this.aspectRatio - EPSILON) { y = this.getNumTiles(level).y - 1; } diff --git a/src/viewer.js b/src/viewer.js index 649456de..dc1d7438 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2611,16 +2611,14 @@ function onCanvasClick( event ) { function onCanvasDblClick( event ) { var gestureSettings; - if ( !event.preventDefaultAction && this.viewport ) { - gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); - if ( gestureSettings.dblClickToZoom ) { - this.viewport.zoomBy( - event.shift ? 1.0 / this.zoomPerClick : this.zoomPerClick, - this.viewport.pointFromPixel( event.position, true ) - ); - this.viewport.applyConstraints(); - } - } + var canvasDblClickEventArgs = { + tracker: event.eventSource, + position: event.position, + shift: event.shift, + originalEvent: event.originalEvent, + preventDefaultAction: event.preventDefaultAction + }; + /** * Raised when a double mouse press/release or touch/remove occurs on the {@link OpenSeadragon.Viewer#canvas} element. * @@ -2632,14 +2630,21 @@ function onCanvasDblClick( event ) { * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element. * @property {Boolean} shift - True if the shift key was pressed during this event. * @property {Object} originalEvent - The original DOM event. + * @property {Boolean} preventDefaultAction - Set to true to prevent default double tap to zoom behaviour. Default: false. * @property {?Object} userData - Arbitrary subscriber-defined object. */ - this.raiseEvent( 'canvas-double-click', { - tracker: event.eventSource, - position: event.position, - shift: event.shift, - originalEvent: event.originalEvent - }); + this.raiseEvent( 'canvas-double-click', canvasDblClickEventArgs); + + if ( !canvasDblClickEventArgs.preventDefaultAction && this.viewport ) { + gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); + if ( gestureSettings.dblClickToZoom ) { + this.viewport.zoomBy( + event.shift ? 1.0 / this.zoomPerClick : this.zoomPerClick, + this.viewport.pointFromPixel( event.position, true ) + ); + this.viewport.applyConstraints(); + } + } } function onCanvasDrag( event ) { @@ -2655,6 +2660,7 @@ function onCanvasDrag( event ) { originalEvent: event.originalEvent, preventDefaultAction: event.preventDefaultAction }; + /** * Raised when a mouse or touch drag operation occurs on the {@link OpenSeadragon.Viewer#canvas} element. * @@ -2674,7 +2680,7 @@ function onCanvasDrag( event ) { */ this.raiseEvent( 'canvas-drag', canvasDragEventArgs); - if ( !event.preventDefaultAction && this.viewport ) { + if ( !canvasDragEventArgs.preventDefaultAction && this.viewport ) { gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); if( !this.panHorizontal ){ event.delta.x = 0; diff --git a/test/modules/events.js b/test/modules/events.js index 7e681d05..af226a44 100644 --- a/test/modules/events.js +++ b/test/modules/events.js @@ -833,6 +833,79 @@ viewer.open('/test/data/testpattern.dzi'); }); + // ---------- + asyncTest('Viewer: preventDefaultAction in dblClickHandler', function() { + var tracker = viewer.innerTracker; + var epsilon = 0.0000001; + + function simulateDblTap() { + var touches = []; + TouchUtil.reset(); + + touches.push(TouchUtil.start([0,0])); + TouchUtil.end( touches[0] ); + touches.push(TouchUtil.start([0,0])); + TouchUtil.end( touches[1] ); + } + + var onOpen = function() { + viewer.removeHandler('open', onOpen); + + var originalZoom = viewer.viewport.getZoom(); + + var origDblClickHandler = tracker.dblClickHandler; + tracker.dblClickHandler = function(event) { + event.preventDefaultAction = true; + return origDblClickHandler(event); + }; + + TouchUtil.initTracker(tracker); + simulateDblTap(); + + var zoom = viewer.viewport.getZoom(); + Util.assessNumericValue(originalZoom, zoom, epsilon, + "Zoom on double tap should be prevented"); + + // Reset event handler to original + tracker.dblClickHandler = origDblClickHandler; + + simulateDblTap(); + originalZoom = originalZoom * viewer.zoomPerClick; + + var zoom = viewer.viewport.getZoom(); + Util.assessNumericValue(originalZoom, zoom, epsilon, + "Zoom on double tap should not be prevented"); + + + var dblClickHandler = function(event) { + event.preventDefaultAction = true; + } + + viewer.addHandler('canvas-double-click', dblClickHandler); + + var zoom = viewer.viewport.getZoom(); + Util.assessNumericValue(originalZoom, zoom, epsilon, + "Zoom on double tap should be prevented"); + + // Remove custom event handler + viewer.removeHandler('canvas-double-click', dblClickHandler); + + simulateDblTap(); + originalZoom = originalZoom * viewer.zoomPerClick; + + var zoom = viewer.viewport.getZoom(); + Util.assessNumericValue(originalZoom, zoom, epsilon, + "Zoom on double tap should not be prevented"); + + TouchUtil.resetTracker(tracker); + viewer.close(); + start(); + }; + + 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 () { var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' ), diff --git a/test/modules/tilesource.js b/test/modules/tilesource.js index 21a9f30c..bac637c8 100644 --- a/test/modules/tilesource.js +++ b/test/modules/tilesource.js @@ -96,6 +96,17 @@ maxLevel: 0, }); assertTileAtPoint(0, new OpenSeadragon.Point(1, 1009 / 1006), new OpenSeadragon.Point(0, 0)); + + // Test for issue #1276 + tileSource = new OpenSeadragon.TileSource({ + width: 4036, + height: 1239, + tileWidth: 4036, + tileHeight: 1239, + tileOverlap: 0, + maxLevel: 0, + }); + assertTileAtPoint(0, new OpenSeadragon.Point(1, 1239 / 4036), new OpenSeadragon.Point(0, 0)); }); }());