mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

New preProcessEvent event

Browse Source
This commit is contained in:
Mark Salsbery 2020-08-12 21:22:48 -07:00
parent e7a62c2717
commit e74d83f104
7 changed files with 1241 additions and 864 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/button.js
View File

@ -138,6 +138,13 @@ $.Button = function( options ) {
this.imgDown.alt =
this.tooltip;
// Allow pointer events to pass through the img elements so implicit
// pointer capture works on touch devices
$.setElementPointerEventsNone( this.imgRest );
$.setElementPointerEventsNone( this.imgGroup );
$.setElementPointerEventsNone( this.imgHover );
$.setElementPointerEventsNone( this.imgDown );
this.element.style.position = "relative";
$.setElementTouchActionNone( this.element );

4
src/drawer.js
View File

@ -126,6 +126,10 @@ $.Drawer = function( options ) {
this.canvas.style.height = "100%";
this.canvas.style.position = "absolute";
$.setElementOpacity( this.canvas, this.opacity, true );
// Allow pointer events to pass through the canvas element so implicit
// pointer capture works on touch devices
$.setElementPointerEventsNone( this.canvas );
$.setElementTouchActionNone( this.canvas );
// explicit left-align
this.container.style.textAlign = "left";

1944
src/mousetracker.js
View File

File diff suppressed because it is too large Load Diff

15
src/navigator.js
View File

@ -167,12 +167,16 @@ $.Navigator = function( options ){
style.zIndex = 999999999;
style.cursor = 'default';
}( this.displayRegion.style, this.borderWidth ));
$.setElementPointerEventsNone( this.displayRegion );
$.setElementTouchActionNone( this.displayRegion );
this.displayRegionContainer = $.makeNeutralElement("div");
this.displayRegionContainer.id = this.element.id + '-displayregioncontainer';
this.displayRegionContainer.className = "displayregioncontainer";
this.displayRegionContainer.style.width = "100%";
this.displayRegionContainer.style.height = "100%";
$.setElementPointerEventsNone( this.displayRegionContainer );
$.setElementTouchActionNone( this.displayRegionContainer );
viewer.addControl(
this.element,
@ -222,12 +226,21 @@ $.Navigator = function( options ){
this.innerTracker.destroy();
this.innerTracker = new $.MouseTracker({
userData: 'Navigator.innerTracker',
element: this.element,
element: this.element, //this.canvas,
dragHandler: $.delegate( this, onCanvasDrag ),
clickHandler: $.delegate( this, onCanvasClick ),
releaseHandler: $.delegate( this, onCanvasRelease ),
scrollHandler: $.delegate( this, onCanvasScroll )
});
this.outerTracker.userData = 'Navigator.outerTracker';
// this.innerTracker is attached to this.element...we need to allow pointer
// events to pass through this Viewer's canvas/container elements so implicit
// pointer capture works on touch devices
//TODO an alternative is to attach the new MouseTracker to this.canvas...not
// sure why it isn't already (see MouseTracker constructor call above)
$.setElementPointerEventsNone( this.canvas );
$.setElementPointerEventsNone( this.container );
this.addHandler("reset-size", function() {
if (_this.viewport) {

13
src/openseadragon.js
View File

@ -1949,6 +1949,19 @@ function OpenSeadragon( options ){
},
/**
* Sets the specified element's pointer-events style attribute to 'none'.
* @function
* @param {Element|String} element
*/
setElementPointerEventsNone: function( element ) {
element = $.getElement( element );
if ( typeof element.style.pointerEvents !== 'undefined' ) {
element.style.pointerEvents = 'none';
}
},
/**
* Add the specified CSS class to the element if not present.
* @function

119
src/referencestrip.js
View File

@ -85,14 +85,7 @@ $.ReferenceStrip = function ( options ) {
scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold
}, options, {
//required overrides
element: this.element,
//These need to be overridden to prevent recursion since
//the navigator is a viewer and a viewer has a navigator
showNavigator: false,
mouseNavEnabled: false,
showNavigationControl: false,
showSequenceControl: false
element: this.element
} );
$.extend( this, options );
@ -119,9 +112,10 @@ $.ReferenceStrip = function ( options ) {
$.setElementOpacity( this.element, 0.8 );
this.viewer = viewer;
this.innerTracker = new $.MouseTracker( {
userData: 'ReferenceStrip.innerTracker',
this.tracker = new $.MouseTracker( {
userData: 'ReferenceStrip.tracker',
element: this.element,
clickHandler: $.delegate( this, onStripClick ),
dragHandler: $.delegate( this, onStripDrag ),
scrollHandler: $.delegate( this, onStripScroll ),
enterHandler: $.delegate( this, onStripEnter ),
@ -190,35 +184,12 @@ $.ReferenceStrip = function ( options ) {
element.style.width = _this.panelWidth + 'px';
element.style.height = _this.panelHeight + 'px';
element.style.display = 'inline';
element.style.float = 'left'; //Webkit
element.style['float'] = 'left'; //Webkit
element.style.cssFloat = 'left'; //Firefox
element.style.styleFloat = 'left'; //IE
element.style.padding = '2px';
$.setElementTouchActionNone( element );
element.innerTracker = new $.MouseTracker( {
userData: 'ReferenceStrip.TileSource.innerTracker',
element: element,
clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold,
pressHandler: function ( event ) {
event.eventSource.dragging = $.now();
},
releaseHandler: function ( event ) {
var tracker = event.eventSource,
id = tracker.element.id,
page = Number( id.split( '-' )[2] ),
now = $.now();
if ( event.insideElementPressed &&
event.insideElementReleased &&
tracker.dragging &&
( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
tracker.dragging = null;
viewer.goToPage( page );
}
}
} );
$.setElementPointerEventsNone( element );
this.element.appendChild( element );
@ -232,7 +203,8 @@ $.ReferenceStrip = function ( options ) {
};
$.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.ReferenceStrip.prototype */{
/** @lends OpenSeadragon.ReferenceStrip.prototype */
$.ReferenceStrip.prototype = {
/**
* @function
@ -279,7 +251,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
}
this.currentPage = page;
onStripEnter.call( this, { eventSource: this.innerTracker } );
onStripEnter.call( this, { eventSource: this.tracker } );
}
},
@ -294,7 +266,6 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
return false;
},
// Overrides Viewer.destroy
destroy: function() {
if (this.miniViewers) {
for (var key in this.miniViewers) {
@ -302,14 +273,34 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
}
}
this.tracker.destroy();
if (this.element) {
this.element.parentNode.removeChild(this.element);
}
}
} );
};
/**
* @private
* @inner
* @function
*/
function onStripClick( event ) {
if ( event.quick ) {
var page;
if ( 'horizontal' === this.scroll ) {
page = Math.floor(event.position.x / this.panelWidth);
} else {
page = Math.floor(event.position.y / this.panelHeight);
}
this.viewer.goToPage( page );
}
}
/**
@ -319,13 +310,14 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
*/
function onStripDrag( event ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
this.dragging = true;
if ( this.element ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas );
this.dragging = true;
if ( this.element ) {
if ( 'horizontal' === this.scroll ) {
if ( -event.delta.x > 0 ) {
//forward
@ -368,12 +360,13 @@ function onStripDrag( event ) {
* @function
*/
function onStripScroll( event ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
if ( this.element ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas );
if ( this.element ) {
if ( 'horizontal' === this.scroll ) {
if ( event.scroll > 0 ) {
//forward
@ -414,7 +407,6 @@ function loadPanels( strip, viewerSize, scroll ) {
activePanelsStart,
activePanelsEnd,
miniViewer,
style,
i,
element;
if ( 'horizontal' === strip.scroll ) {
@ -456,35 +448,14 @@ function loadPanels( strip, viewerSize, scroll ) {
ajaxHeaders: strip.viewer.ajaxHeaders,
useCanvas: strip.useCanvas
} );
miniViewer.displayRegion = $.makeNeutralElement( "div" );
miniViewer.displayRegion.id = element.id + '-displayregion';
miniViewer.displayRegion.className = 'displayregion';
style = miniViewer.displayRegion.style;
style.position = 'relative';
style.top = '0px';
style.left = '0px';
style.fontSize = '0px';
style.overflow = 'hidden';
style.float = 'left'; //Webkit
style.cssFloat = 'left'; //Firefox
style.styleFloat = 'left'; //IE
style.zIndex = 999999999;
style.cursor = 'default';
style.width = ( strip.panelWidth - 4 ) + 'px';
style.height = ( strip.panelHeight - 4 ) + 'px';
// TODO: What is this for? Future keyboard navigation support?
miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
userData: 'ReferenceStrip.miniViewer.innerTracker',
element: miniViewer.displayRegion,
startDisabled: true
} );
element.getElementsByTagName( 'div' )[0].appendChild(
miniViewer.displayRegion
);
// Allow pointer events to pass through miniViewer's canvas/container
// elements so implicit pointer capture works on touch devices
$.setElementPointerEventsNone( miniViewer.canvas );
$.setElementPointerEventsNone( miniViewer.container );
// We'll use event delegation from the reference strip element instead of
// handling events on every miniViewer
miniViewer.innerTracker.setTracking( false );
miniViewer.outerTracker.setTracking( false );
strip.miniViewers[element.id] = miniViewer;

3
src/viewer.js
View File

@ -267,6 +267,7 @@ $.Viewer = function( options ) {
style.top = "0px";
style.textAlign = "left"; // needed to protect against
}( this.container.style ));
$.setElementTouchActionNone( this.container );
this.container.insertBefore( this.canvas, this.container.firstChild );
this.element.appendChild( this.container );
@ -405,6 +406,8 @@ $.Viewer = function( options ) {
// Overlay container
this.overlaysContainer = $.makeNeutralElement( "div" );
$.setElementPointerEventsNone( this.overlaysContainer );
$.setElementTouchActionNone( this.overlaysContainer );
this.canvas.appendChild( this.overlaysContainer );
// Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons