mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-26 03:33:13 +03:00
Code Issues Projects Releases Wiki Activity

Merge bc1ca64fbb24a71b845cd68fe9594011e16b0310 into 89ae9c1376ebb86142283472bd4be8bcc102fd11

Browse Source
This commit is contained in:
Mark Salsbery 2023-11-06 11:48:25 -07:00 committed by GitHub
commit 636f8b3df2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 406 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/openseadragon.js
View File

@ -645,17 +645,66 @@
* If sequenceMode is true, then display a scrolling strip of image thumbnails for * If sequenceMode is true, then display a scrolling strip of image thumbnails for
* navigating through the images. * navigating through the images.
* *
* @property {String} [referenceStripScroll='horizontal']
*
* @property {Element} [referenceStripElement=null] * @property {Element} [referenceStripElement=null]
* The element to hold the reference strip.
* If an element is specified, the Id option (see referenceStripId) is ignored.
* If no element nor ID is specified, a div element will be generated accordingly.
* *
* @property {Number} [referenceStripHeight=null] * @property {Element} [referenceStripId=null]
* The ID of a div to hold the reference strip.
* If an ID is specified, the referenceStripPosition, referenceStripSizeRatio, referenceStripMaintainSizeRatio, referenceStrip[Top|Left|Height|Width], referenceStripAutoHide and referenceStripAutoFade 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 {Number} [referenceStripWidth=null] * @property {String} [referenceStripScroll='horizontal']
* The orientation of the reference strip. Valid values are 'horizontal' and 'vertical'
* *
* @property {String} [referenceStripPosition='BOTTOM_LEFT'] * @property {String} [referenceStripPosition='BOTTOM_LEFT']
* Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.<br>
* If 'ABSOLUTE' is specified, then referenceStrip[Top|Left|Height|Width] determines the size and position of the reference strip in the viewer, and referenceStripSizeRatio and referenceStripMaintainSizeRatio are ignored.<br>
* For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the referenceStripSizeRatio or referenceStrip[Height|Width] values determine the size of the reference strip.
* *
* @property {Number} [referenceStripSizeRatio=0.2] * @property {Number} [referenceStripSizeRatio=0.2]
* Ratio of reference strip size to viewer size. Ignored if referenceStrip[Height|Width] are specified.
*
* @property {Boolean} [referenceStripMaintainSizeRatio=false]
* If true, the reference strip is resized (using referenceStripSizeRatio) when the viewer size changes.
*
* @property {Number|String} [referenceStripTop=null]
* Specifies the location of the reference strip (see referenceStripPosition).
*
* @property {Number|String} [referenceStripLeft=null]
* Specifies the location of the reference strip (see referenceStripPosition).
*
* @property {Number|String} [referenceStripHeight=null]
* Specifies the size of the reference strip (see referenceStripPosition).
* If specified, referenceStripSizeRatio is ignored.
*
* @property {Number|String} [referenceStripWidth=null]
* Specifies the size of the reference strip (see referenceStripPosition).
* If specified, referenceStripSizeRatio is ignored.
*
* @property {Boolean} [referenceStripAutoResize=true]
* When true and reference strip is embedded in its Viewer,the reference strip will automatically resize when its Viewer size changes.
*
* @property {Boolean} [referenceStripAutoHide=true]
* If the user stops interacting with the reference strip, hide the reference strip.
*
* @property {Number} [referenceStripAutoHideFactor=0.5]
* Amount of the reference strip to auto hide when referenceStripAutoHide is true.
* Valid values are 0.0 to 1.0, where 1.0 hides the entire strip, 0.5 hides half the strip, etc.
*
* @property {Boolean} [referenceStripAutoFade=true]
* If the user stops interacting with the viewport, fade the reference strip.
* Setting to false will make the reference strip always visible.
*
* @property {String} [referenceStripBackground='#000']
* Specifies the background color of the reference strip
*
* @property {Number} [referenceStripOpacity=0.8]
* Specifies the opacity of the reference strip.
*
* @property {String} [referenceStripBorderColor='#555']
* Specifies the border color of the reference strip
* *
* @property {Boolean} [collectionMode=false] * @property {Boolean} [collectionMode=false]
* Set to true to have the viewer arrange your TiledImages in a grid or line. * Set to true to have the viewer arrange your TiledImages in a grid or line.
@ -1347,13 +1396,24 @@ function OpenSeadragon( options ){
subPixelRoundingForTransparency: null, subPixelRoundingForTransparency: null,
//REFERENCE STRIP SETTINGS //REFERENCE STRIP SETTINGS
showReferenceStrip: false, showReferenceStrip: false,
referenceStripScroll: 'horizontal', referenceStripElement: null,
referenceStripElement: null, referenceStripId: null,
referenceStripHeight: null, referenceStripScroll: 'horizontal',
referenceStripWidth: null, referenceStripPosition: 'BOTTOM_LEFT',
referenceStripPosition: 'BOTTOM_LEFT', referenceStripSizeRatio: 0.2,
referenceStripSizeRatio: 0.2, referenceStripMaintainSizeRatio: false,
referenceStripTop: null,
referenceStripLeft: null,
referenceStripHeight: null,
referenceStripWidth: null,
referenceStripAutoResize: true,
referenceStripAutoHide: true,
referenceStripAutoHideFactor: 0.5,
referenceStripAutoFade: true,
referenceStripBackground: '#000',
referenceStripOpacity: 0.8,
referenceStripBorderColor: '#555',
//COLLECTION VISUALIZATION SETTINGS //COLLECTION VISUALIZATION SETTINGS
collectionRows: 3, //or columns depending on layout collectionRows: 3, //or columns depending on layout

457
src/referencestrip.js
View File

@ -35,7 +35,7 @@
(function ( $ ) { (function ( $ ) {
// dictionary from id to private properties // dictionary from id to private properties
var THIS = {}; const THIS = {};
/** /**
* The CollectionDrawer is a reimplementation if the Drawer API that * The CollectionDrawer is a reimplementation if the Drawer API that
@ -62,43 +62,107 @@ var THIS = {};
* @param {Object} options * @param {Object} options
*/ */
$.ReferenceStrip = function ( options ) { $.ReferenceStrip = function ( options ) {
// //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS)
// showReferenceStrip: false,
// referenceStripElement: null,
// referenceStripId: null,
// referenceStripScroll: 'horizontal',
// referenceStripPosition: 'BOTTOM_LEFT',
// referenceStripSizeRatio: 0.2,
// referenceStripMaintainSizeRatio: false,
// referenceStripTop: null,
// referenceStripLeft: null,
// referenceStripHeight: null,
// referenceStripWidth: null,
// referenceStripAutoResize: true,
// referenceStripAutoHide: true,
// referenceStripAutoHideFactor: 0.5,
// referenceStripAutoFade: true,
// referenceStripBackground: '#000',
// referenceStripOpacity: 0.8,
// referenceStripBorderColor: '#555',
var _this = this, // this.referenceStrip = new $.ReferenceStrip({
viewer = options.viewer, // viewer: this,
viewerSize = $.getElementSize( viewer.element ), // element: this.referenceStripElement,
element, // id: this.referenceStripId,
style, // scroll: this.referenceStripScroll,
i; // position: this.referenceStripPosition,
// sizeRatio: this.referenceStripSizeRatio,
// maintainSizeRatio: this.referenceStripMaintainSizeRatio,
// top: this.referenceStripTop,
// left: this.referenceStripLeft,
// width: this.referenceStripWidth,
// height: this.referenceStripHeight,
// autoResize: this.referenceStripAutoResize,
// autoHide: this.referenceStripAutoHide,
// autoHideFactor: this.referenceStripAutoHideFactor,
// autoFade: this.referenceStripAutoFade,
// background: this.referenceStripBackground,
// opacity: this.referenceStripOpacity,
// borderColor: this.referenceStripBorderColor,
// //TODO
// //crossOriginPolicy: this.crossOriginPolicy,
// viewer: this,
// id: this.referenceStripId,
// scroll: this.referenceStripScroll,
// position: this.referenceStripPosition,
// sizeRatio: this.referenceStripSizeRatio,
// height: this.referenceStripHeight,
// width: this.referenceStripWidth
// });
const viewer = options.viewer,
viewerSize = $.getElementSize( viewer.element );
//We may need to create a new element and id if they did not //We may need to create a new element and id if they did not
//provide the id for the existing element //provide the id for the existing element
if ( !options.id ) { if ( !options.id ) {
options.id = 'referencestrip-' + $.now(); options.id = 'referencestrip-' + $.now();
this.element = $.makeNeutralElement( "div" ); this.stripElement = $.makeNeutralElement( "div" );
this.element.id = options.id; this.stripElement.id = options.id;
this.element.className = 'referencestrip'; this.stripElement.className = 'referencestrip';
} }
options = $.extend( true, { options = $.extend(
sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio, true,
position: $.DEFAULT_SETTINGS.referenceStripPosition, {
scroll: $.DEFAULT_SETTINGS.referenceStripScroll, // // Viewer passes these commented options always...
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold // // We only need these if ReferenceStrip constructor is made usable outside of Viewer
}, options, { // element: $.DEFAULT_SETTINGS.referenceStripElement,
element: this.element // id: $.DEFAULT_SETTINGS.referenceStripId,
} ); // scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
// position: $.DEFAULT_SETTINGS.referenceStripPosition,
// sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
// maintainSizeRatio: $.DEFAULT_SETTINGS.referenceStripMaintainSizeRatio,
// top: $.DEFAULT_SETTINGS.referenceStripTop,
// left: $.DEFAULT_SETTINGS.referenceStripLeft,
// width: $.DEFAULT_SETTINGS.referenceStripWidth,
// height: $.DEFAULT_SETTINGS.referenceStripHeight,
// autoResize: $.DEFAULT_SETTINGS.referenceStripAutoResize,
// autoHide: $.DEFAULT_SETTINGS.referenceStripAutoHide,
// autoHideFactor: $.DEFAULT_SETTINGS.referenceStripAutoHideFactor,
// autoFade: $.DEFAULT_SETTINGS.referenceStripAutoFade,
// background: $.DEFAULT_SETTINGS.referenceStripBackground,
// opacity: $.DEFAULT_SETTINGS.referenceStripOpacity,
// borderColor: $.DEFAULT_SETTINGS.referenceStripBorderColor,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold,
clickDistThreshold: $.DEFAULT_SETTINGS.clickDistThreshold,
},
options
);
$.extend( this, options ); $.extend( this, options );
//Private state properties //Private state properties
THIS[this.id] = { THIS[this.id] = {
animating: false animating: false
}; };
this.minPixelRatio = this.viewer.minPixelRatio; this.stripElement.tabIndex = 0;
this.element.tabIndex = 0; const style = this.stripElement.style;
style = this.element.style;
style.marginTop = '0px'; style.marginTop = '0px';
style.marginRight = '0px'; style.marginRight = '0px';
style.marginBottom = '0px'; style.marginBottom = '0px';
@ -109,21 +173,22 @@ $.ReferenceStrip = function ( options ) {
style.background = '#000'; style.background = '#000';
style.position = 'relative'; style.position = 'relative';
$.setElementTouchActionNone( this.element ); $.setElementTouchActionNone( this.stripElement );
$.setElementOpacity( this.element, 0.8 ); $.setElementOpacity( this.stripElement, 0.8 );
this.viewer = viewer; this.stripTracker = new $.MouseTracker( {
this.tracker = new $.MouseTracker( { userData: 'ReferenceStrip.stripTracker',
userData: 'ReferenceStrip.tracker', element: this.stripElement,
element: this.element, clickTimeThreshold: this.clickTimeThreshold,
clickHandler: $.delegate( this, onStripClick ), clickDistThreshold: this.clickDistThreshold,
dragHandler: $.delegate( this, onStripDrag ), clickHandler: $.delegate( this, onStripClick ),
scrollHandler: $.delegate( this, onStripScroll ), dragHandler: $.delegate( this, onStripDrag ),
enterHandler: $.delegate( this, onStripEnter ), scrollHandler: $.delegate( this, onStripScroll ),
leaveHandler: $.delegate( this, onStripLeave ), enterHandler: $.delegate( this, onStripEnter ),
keyDownHandler: $.delegate( this, onKeyDown ), leaveHandler: $.delegate( this, onStripLeave ),
keyHandler: $.delegate( this, onKeyPress ), keyDownHandler: $.delegate( this, onStripKeyDown ),
keyHandler: $.delegate( this, onStripKeyPress ),
preProcessEventHandler: function (eventInfo) { preProcessEventHandler: function (eventInfo) {
if (eventInfo.eventType === 'wheel') { if (eventInfo.eventType === 'wheel') {
eventInfo.preventDefault = true; eventInfo.preventDefault = true;
@ -134,75 +199,76 @@ $.ReferenceStrip = function ( options ) {
//Controls the position and orientation of the reference strip and sets the //Controls the position and orientation of the reference strip and sets the
//appropriate width and height //appropriate width and height
if ( options.width && options.height ) { if ( options.width && options.height ) {
this.element.style.width = options.width + 'px'; //TODO fix this - isn't correct
this.element.style.height = options.height + 'px'; this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12;
this.panelHeight = ( viewerSize.y * this.sizeRatio );
this.stripElement.style.width = options.width + 'px';
this.stripElement.style.height = options.height + 'px';
viewer.addControl( viewer.addControl(
this.element, this.stripElement,
{ anchor: $.ControlAnchor.BOTTOM_LEFT } { anchor: $.ControlAnchor.BOTTOM_LEFT }
); );
} else { } else {
if ( "horizontal" === options.scroll ) { if ( "horizontal" === options.scroll ) {
this.element.style.width = ( this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12;
viewerSize.x * this.panelHeight = ( viewerSize.y * this.sizeRatio );
options.sizeRatio *
viewer.tileSources.length
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.height = ( this.stripElement.style.width = (
viewerSize.y * this.panelWidth *
options.sizeRatio viewer.tileSources.length
) + 'px'; ) + 'px';
this.stripElement.style.height = this.panelHeight + 'px';
viewer.addControl( viewer.addControl(
this.element, this.stripElement,
{ anchor: $.ControlAnchor.BOTTOM_LEFT } { anchor: $.ControlAnchor.BOTTOM_LEFT }
); );
} else { } else {
this.element.style.height = ( this.panelWidth = ( viewerSize.x * this.sizeRatio );
viewerSize.y * this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12;
options.sizeRatio *
viewer.tileSources.length
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.width = ( this.stripElement.style.height = (
viewerSize.x * this.panelHeight *
options.sizeRatio viewer.tileSources.length
) + 'px'; ) + 'px';
this.stripElement.style.width = this.panelWidth + 'px';
viewer.addControl( viewer.addControl(
this.element, this.stripElement,
{ anchor: $.ControlAnchor.TOP_LEFT } { anchor: $.ControlAnchor.TOP_LEFT }
); );
} }
} }
this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 8;
this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 8;
this.panels = []; this.panels = [];
this.miniViewers = {}; this.miniViewers = {};
/*jshint loopfunc:true*/ /*jshint loopfunc:true*/
for ( i = 0; i < viewer.tileSources.length; i++ ) { for ( let i = 0; i < viewer.tileSources.length; i++ ) {
element = $.makeNeutralElement( 'div' ); const panelElement = $.makeNeutralElement( 'div' );
element.id = this.element.id + "-" + i;
element.style.width = _this.panelWidth + 'px'; panelElement.id = this.stripElement.id + "-" + i;
element.style.height = _this.panelHeight + 'px';
element.style.display = 'inline';
element.style['float'] = 'left'; //Webkit
element.style.cssFloat = 'left'; //Firefox
element.style.styleFloat = 'left'; //IE
element.style.padding = '2px';
$.setElementTouchActionNone( element );
$.setElementPointerEventsNone( element );
this.element.appendChild( element ); panelElement.style.width = this.panelWidth + 'px';
panelElement.style.height = this.panelHeight + 'px';
panelElement.style.display = 'inline';
panelElement.style['float'] = 'left'; //Webkit
panelElement.style.cssFloat = 'left'; //Firefox
panelElement.style.styleFloat = 'left'; //IE
panelElement.style.padding = '2px';
$.setElementTouchActionNone( panelElement );
$.setElementPointerEventsNone( panelElement );
element.activePanel = false; this.stripElement.appendChild( panelElement );
this.panels.push( element ); panelElement.activePanel = false;
this.panels.push( panelElement );
} }
loadPanels( this, this.scroll === 'vertical' ? viewerSize.y : viewerSize.x, 0 ); loadPanels( this, this.scroll === 'vertical' ? viewerSize.y : viewerSize.x, 0 );
@ -213,52 +279,97 @@ $.ReferenceStrip = function ( options ) {
/** @lends OpenSeadragon.ReferenceStrip.prototype */ /** @lends OpenSeadragon.ReferenceStrip.prototype */
$.ReferenceStrip.prototype = { $.ReferenceStrip.prototype = {
//TODO reference strip auto resize
// /**
// * Used to notify the reference strip when its size has changed.
// * Especially useful when {@link OpenSeadragon.Options}.referenceStripAutoResize is set to false and the reference strip is resizable.
// * @function
// */
// updateSize: function () {
// if ( this.viewport ) {
// var containerSize = new $.Point(
// (this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
// (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
// );
// if ( !containerSize.equals( this.oldContainerSize ) ) {
// this.viewport.resize( containerSize, true );
// this.viewport.goHome(true);
// this.oldContainerSize = containerSize;
// this.drawer.clear();
// this.world.draw();
// }
// }
// },
// /**
// * Explicitly sets the width of the reference strip, in web coordinates. Disables automatic resizing.
// * @param {Number|String} width - the new width, either a number of pixels or a CSS string, such as "100%"
// */
// setWidth: function(width) {
// this.width = width;
// this.element.style.width = typeof (width) === "number" ? (width + 'px') : width;
// this._resizeWithViewer = false;
// this.updateSize();
// },
// /**
// * Explicitly sets the height of the reference strip, in web coordinates. Disables automatic resizing.
// * @param {Number|String} height - the new height, either a number of pixels or a CSS string, such as "100%"
// */
// setHeight: function(height) {
// this.height = height;
// this.element.style.height = typeof (height) === "number" ? (height + 'px') : height;
// this._resizeWithViewer = false;
// this.updateSize();
// },
/** /**
* @function * @function
*/ */
setFocus: function ( page ) { setFocus: function ( page ) {
var element = this.element.querySelector('#' + this.element.id + '-' + page ), const panelElement = this.stripElement.querySelector('#' + this.stripElement.id + '-' + page ),
viewerSize = $.getElementSize( this.viewer.canvas ), viewerSize = $.getElementSize( this.viewer.canvas ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
offsetLeft = -Number( this.element.style.marginLeft.replace( 'px', '' ) ), offsetLeft = -Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
offsetTop = -Number( this.element.style.marginTop.replace( 'px', '' ) ), offsetTop = -Number( this.stripElement.style.marginTop.replace( 'px', '' ) );
offset;
if ( this.currentSelected !== element ) { if ( this.currentSelected !== panelElement ) {
if ( this.currentSelected ) { if ( this.currentSelected ) {
this.currentSelected.style.background = '#000'; this.currentSelected.style.background = '#000';
} }
this.currentSelected = element; this.currentSelected = panelElement;
this.currentSelected.style.background = '#999'; this.currentSelected.style.background = '#999';
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
//right left //right left
offset = ( Number( page ) ) * ( this.panelWidth + 3 ); let offset = ( Number( page ) ) * ( this.panelWidth + 3 );
if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) { if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) {
offset = Math.min( offset, ( scrollWidth - viewerSize.x ) ); offset = Math.min( offset, ( scrollWidth - viewerSize.x ) );
this.element.style.marginLeft = -offset + 'px'; this.stripElement.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset ); loadPanels( this, viewerSize.x, -offset );
} else if ( offset < offsetLeft ) { } else if ( offset < offsetLeft ) {
offset = Math.max( 0, offset - viewerSize.x / 2 ); offset = Math.max( 0, offset - viewerSize.x / 2 );
this.element.style.marginLeft = -offset + 'px'; this.stripElement.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset ); loadPanels( this, viewerSize.x, -offset );
} }
} else { } else {
offset = ( Number( page ) ) * ( this.panelHeight + 3 ); let offset = ( Number( page ) ) * ( this.panelHeight + 3 );
if ( offset > offsetTop + viewerSize.y - this.panelHeight ) { if ( offset > offsetTop + viewerSize.y - this.panelHeight ) {
offset = Math.min( offset, ( scrollHeight - viewerSize.y ) ); offset = Math.min( offset, ( scrollHeight - viewerSize.y ) );
this.element.style.marginTop = -offset + 'px'; this.stripElement.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset ); loadPanels( this, viewerSize.y, -offset );
} else if ( offset < offsetTop ) { } else if ( offset < offsetTop ) {
offset = Math.max( 0, offset - viewerSize.y / 2 ); offset = Math.max( 0, offset - viewerSize.y / 2 );
this.element.style.marginTop = -offset + 'px'; this.stripElement.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset ); loadPanels( this, viewerSize.y, -offset );
} }
} }
this.currentPage = page; this.currentPage = page;
onStripEnter.call( this, { eventSource: this.tracker } ); onStripEnter.call( this, { eventSource: this.stripTracker } );
} }
}, },
@ -270,20 +381,49 @@ $.ReferenceStrip.prototype = {
// $.console.log( 'image reference strip update' ); // $.console.log( 'image reference strip update' );
return true; return true;
} }
//TODO reference strip auto resize
// var viewerSize,
// newWidth,
// newHeight;
// viewerSize = $.getElementSize( this.viewer.element );
// if ( this._resizeWithViewer && viewerSize.x && viewerSize.y && !viewerSize.equals( this.oldViewerSize ) ) {
// this.oldViewerSize = viewerSize;
// if ( this.maintainSizeRatio || !this.elementArea) {
// newWidth = viewerSize.x * this.sizeRatio;
// newHeight = viewerSize.y * this.sizeRatio;
// } else {
// newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y));
// newHeight = this.elementArea / newWidth;
// }
// this.element.style.width = Math.round( newWidth ) + 'px';
// this.element.style.height = Math.round( newHeight ) + 'px';
// if (!this.elementArea) {
// this.elementArea = newWidth * newHeight;
// }
// this.updateSize();
// }
return false; return false;
}, },
destroy: function() { destroy: function() {
if (this.miniViewers) { if (this.miniViewers) {
for (var key in this.miniViewers) { for (const key in this.miniViewers) {
this.miniViewers[key].destroy(); this.miniViewers[key].destroy();
} }
} }
this.tracker.destroy(); this.stripTracker.destroy();
if (this.element) { if (this.stripElement) {
this.viewer.removeControl( this.element ); this.viewer.removeControl( this.stripElement );
} }
} }
@ -297,11 +437,14 @@ $.ReferenceStrip.prototype = {
*/ */
function onStripClick( event ) { function onStripClick( event ) {
if ( event.quick ) { if ( event.quick ) {
var page; let page;
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
// +4px fix to solve problem with precision on thumbnail selection if there is a lot of them // // +4px fix to solve problem with precision on thumbnail selection if there is a lot of them
page = Math.floor(event.position.x / (this.panelWidth + 4)); // page = Math.floor(event.position.x / (this.panelWidth + 4));
// Note: This reverts PR #2280 (fix for issue #1992) as the issue was
// fixed in ms-reference-strip commit 7d19edff34f7491248064bef1efa69af588c40a0
page = Math.floor(event.position.x / this.panelWidth);
} else { } else {
page = Math.floor(event.position.y / this.panelHeight); page = Math.floor(event.position.y / this.panelHeight);
} }
@ -309,7 +452,7 @@ function onStripClick( event ) {
this.viewer.goToPage( page ); this.viewer.goToPage( page );
} }
this.element.focus(); this.stripElement.focus();
} }
@ -320,25 +463,24 @@ function onStripClick( event ) {
*/ */
function onStripDrag( event ) { function onStripDrag( event ) {
this.dragging = true; if ( this.stripElement ) {
if ( this.element ) { const offsetLeft = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), offsetTop = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), viewerSize = $.getElementSize( this.viewer.canvas );
viewerSize = $.getElementSize( this.viewer.canvas );
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
if ( -event.delta.x > 0 ) { if ( -event.delta.x > 0 ) {
//forward //forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
this.element.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px'; this.stripElement.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) ); loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) );
} }
} else if ( -event.delta.x < 0 ) { } else if ( -event.delta.x < 0 ) {
//reverse //reverse
if ( offsetLeft < 0 ) { if ( offsetLeft < 0 ) {
this.element.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px'; this.stripElement.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) ); loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) );
} }
} }
@ -346,13 +488,13 @@ function onStripDrag( event ) {
if ( -event.delta.y > 0 ) { if ( -event.delta.y > 0 ) {
//forward //forward
if ( offsetTop > -( scrollHeight - viewerSize.y ) ) { if ( offsetTop > -( scrollHeight - viewerSize.y ) ) {
this.element.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px'; this.stripElement.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) );
} }
} else if ( -event.delta.y < 0 ) { } else if ( -event.delta.y < 0 ) {
//reverse //reverse
if ( offsetTop < 0 ) { if ( offsetTop < 0 ) {
this.element.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px'; this.stripElement.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) );
} }
} }
@ -369,39 +511,39 @@ function onStripDrag( event ) {
* @function * @function
*/ */
function onStripScroll( event ) { function onStripScroll( event ) {
if ( this.element ) { if ( this.stripElement ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), const offsetLeft = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), offsetTop = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas ); viewerSize = $.getElementSize( this.viewer.canvas );
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
if ( event.scroll > 0 ) { if ( event.scroll > 0 ) {
//forward //forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 50 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) ); loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 50 ) );
} }
} else if ( event.scroll < 0 ) { } else if ( event.scroll < 0 ) {
//reverse //reverse
if ( offsetLeft < 0 ) { if ( offsetLeft < 0 ) {
this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 50 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) ); loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 50 ) );
} }
} }
} else { } else {
if ( event.scroll < 0 ) { if ( event.scroll < 0 ) {
//scroll up //scroll up
if ( offsetTop > viewerSize.y - scrollHeight ) { if ( offsetTop > viewerSize.y - scrollHeight ) {
this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 50 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 50 ) );
} }
} else if ( event.scroll > 0 ) { } else if ( event.scroll > 0 ) {
//scroll dowm //scroll dowm
if ( offsetTop < 0 ) { if ( offsetTop < 0 ) {
this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 50 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 50 ) );
} }
} }
} }
@ -412,27 +554,22 @@ function onStripScroll( event ) {
function loadPanels( strip, viewerSize, scroll ) { function loadPanels( strip, viewerSize, scroll ) {
var panelSize, let panelSize;
activePanelsStart,
activePanelsEnd,
miniViewer,
i,
element;
if ( 'horizontal' === strip.scroll ) { if ( 'horizontal' === strip.scroll ) {
panelSize = strip.panelWidth; panelSize = strip.panelWidth;
} else { } else {
panelSize = strip.panelHeight; panelSize = strip.panelHeight;
} }
activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5; const activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1; let activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
activePanelsStart = activePanelsEnd - activePanelsStart; activePanelsStart = activePanelsEnd - activePanelsStart;
activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart; activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
for ( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) { for ( let i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
element = strip.panels[i]; const panelElement = strip.panels[i];
if ( !element.activePanel ) { if ( !panelElement.activePanel ) {
var miniTileSource; const originalTileSource = strip.viewer.tileSources[i];
var originalTileSource = strip.viewer.tileSources[i]; let miniTileSource;
if (originalTileSource.referenceStripThumbnailUrl) { if (originalTileSource.referenceStripThumbnailUrl) {
miniTileSource = { miniTileSource = {
type: 'image', type: 'image',
@ -441,21 +578,17 @@ function loadPanels( strip, viewerSize, scroll ) {
} else { } else {
miniTileSource = originalTileSource; miniTileSource = originalTileSource;
} }
miniViewer = new $.Viewer( { const miniViewer = new $.Viewer( {
id: element.id, id: panelElement.id,
tileSources: [miniTileSource], tileSources: [miniTileSource],
element: element, element: panelElement,
navigatorSizeRatio: strip.sizeRatio,
showNavigator: false,
mouseNavEnabled: false, mouseNavEnabled: false,
showNavigationControl: false, showNavigationControl: false,
showSequenceControl: false,
immediateRender: true, immediateRender: true,
blendTime: 0, blendTime: 0,
animationTime: 0, animationTime: 0,
loadTilesWithAjax: strip.viewer.loadTilesWithAjax, loadTilesWithAjax: strip.viewer.loadTilesWithAjax,
ajaxHeaders: strip.viewer.ajaxHeaders, ajaxHeaders: strip.viewer.ajaxHeaders,
useCanvas: strip.useCanvas
} ); } );
// Allow pointer events to pass through miniViewer's canvas/container // Allow pointer events to pass through miniViewer's canvas/container
// elements so implicit pointer capture works on touch devices // elements so implicit pointer capture works on touch devices
@ -466,9 +599,9 @@ function loadPanels( strip, viewerSize, scroll ) {
miniViewer.innerTracker.setTracking( false ); miniViewer.innerTracker.setTracking( false );
miniViewer.outerTracker.setTracking( false ); miniViewer.outerTracker.setTracking( false );
strip.miniViewers[element.id] = miniViewer; strip.miniViewers[panelElement.id] = miniViewer;
element.activePanel = true; panelElement.activePanel = true;
} }
} }
} }
@ -480,7 +613,7 @@ function loadPanels( strip, viewerSize, scroll ) {
* @function * @function
*/ */
function onStripEnter( event ) { function onStripEnter( event ) {
var element = event.eventSource.element; const element = event.eventSource.element;
//$.setElementOpacity(element, 0.8); //$.setElementOpacity(element, 0.8);
@ -507,7 +640,7 @@ function onStripEnter( event ) {
* @function * @function
*/ */
function onStripLeave( event ) { function onStripLeave( event ) {
var element = event.eventSource.element; const element = event.eventSource.element;
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
@ -528,29 +661,29 @@ function onStripLeave( event ) {
* @inner * @inner
* @function * @function
*/ */
function onKeyDown( event ) { function onStripKeyDown( event ) {
//console.log( event.keyCode ); //console.log( event.keyCode );
if ( !event.ctrl && !event.alt && !event.meta ) { if ( !event.ctrl && !event.alt && !event.meta ) {
switch ( event.keyCode ) { switch ( event.keyCode ) {
case 38: //up arrow case 38: //up arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 40: //down arrow case 40: //down arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 37: //left arrow case 37: //left arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 39: //right arrow case 39: //right arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
default: default:
//console.log( 'navigator keycode %s', event.keyCode ); //console.log( 'reference strip keycode %s', event.keyCode );
event.preventDefault = false; event.preventDefault = false;
break; break;
} }
@ -565,40 +698,40 @@ function onKeyDown( event ) {
* @inner * @inner
* @function * @function
*/ */
function onKeyPress( event ) { function onStripKeyPress( event ) {
//console.log( event.keyCode ); //console.log( event.keyCode );
if ( !event.ctrl && !event.alt && !event.meta ) { if ( !event.ctrl && !event.alt && !event.meta ) {
switch ( event.keyCode ) { switch ( event.keyCode ) {
case 61: //=|+ case 61: //=|+
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 45: //-|_ case 45: //-|_
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 48: //0|) case 48: //0|)
case 119: //w case 119: //w
case 87: //W case 87: //W
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 115: //s case 115: //s
case 83: //S case 83: //S
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 97: //a case 97: //a
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
case 100: //d case 100: //d
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
event.preventDefault = true; event.preventDefault = true;
break; break;
default: default:
//console.log( 'navigator keycode %s', event.keyCode ); //console.log( 'reference strip keycode %s', event.keyCode );
event.preventDefault = false; event.preventDefault = false;
break; break;
} }

52
src/viewer.js
View File

@ -1244,6 +1244,11 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
this.navigator.update( this.viewport ); this.navigator.update( this.viewport );
} }
//TODO reference strip auto resize
// if ( this.referenceStrip ) {
// this.referenceStrip.update();
// }
/** /**
* Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}). * Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}).
* *
@ -1334,6 +1339,18 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
_this.navigator.update( _this.viewport ); _this.navigator.update( _this.viewport );
}); });
} }
//TODO reference strip auto resize
// if ( (_this.navigator && _this.viewport) || _this.referenceStrip ) {
// //09/08/2018 - Fabroh : Fix issue #1504 : Ensure to get the navigator updated on fullscreen out with custom location with a timeout
// setTimeout(function(){
// if ( _this.navigator && _this.viewport ) {
// _this.navigator.update( _this.viewport );
// }
// if ( _this.referenceStrip ) {
// _this.referenceStrip.update();
// }
// });
// }
/** /**
* Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}). * Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
* *
@ -2395,16 +2412,26 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
if (this.tileSources.length && this.tileSources.length > 1) { if (this.tileSources.length && this.tileSources.length > 1) {
this.referenceStrip = new $.ReferenceStrip({ this.referenceStrip = new $.ReferenceStrip({
id: this.referenceStripElement, viewer: this,
position: this.referenceStripPosition, element: this.referenceStripElement,
sizeRatio: this.referenceStripSizeRatio, id: this.referenceStripId,
scroll: this.referenceStripScroll, scroll: this.referenceStripScroll,
height: this.referenceStripHeight, position: this.referenceStripPosition,
width: this.referenceStripWidth, sizeRatio: this.referenceStripSizeRatio,
tileSources: this.tileSources, maintainSizeRatio: this.referenceStripMaintainSizeRatio,
prefixUrl: this.prefixUrl, top: this.referenceStripTop,
useCanvas: this.useCanvas, left: this.referenceStripLeft,
viewer: this width: this.referenceStripWidth,
height: this.referenceStripHeight,
autoResize: this.referenceStripAutoResize,
autoHide: this.referenceStripAutoHide,
autoHideFactor: this.referenceStripAutoHideFactor,
autoFade: this.referenceStripAutoFade,
background: this.referenceStripBackground,
opacity: this.referenceStripOpacity,
borderColor: this.referenceStripBorderColor,
//TODO
//crossOriginPolicy: this.crossOriginPolicy,
}); });
this.referenceStrip.setFocus( this._sequenceIndex ); this.referenceStrip.setFocus( this._sequenceIndex );
@ -3721,8 +3748,9 @@ function updateOnce( viewer ) {
viewer.raiseEvent('viewport-change'); viewer.raiseEvent('viewport-change');
} }
if( viewer.referenceStrip ){ //TODO reference strip auto resize
animated = viewer.referenceStrip.update( viewer.viewport ) || animated; if ( viewer.referenceStrip ) {
animated = viewer.referenceStrip.update() || animated;
} }
var currentAnimating = THIS[ viewer.hash ].animating; var currentAnimating = THIS[ viewer.hash ].animating;