openseadragon/src/mousetracker.js

1004 lines
32 KiB
JavaScript

(function( $ ){
// is any button currently being pressed while mouse events occur
var IS_BUTTON_DOWN = false,
// is any tracker currently capturing?
IS_CAPTURING = false,
// dictionary from hash to MouseTracker
ACTIVE = {},
// list of trackers interested in capture
CAPTURING = [],
// dictionary from hash to private properties
THIS = {};
/**
* The MouseTracker allows other classes to set handlers for common mouse
* events on a specific element like, 'enter', 'exit', 'press', 'release',
* 'scroll', 'click', and 'drag'.
* @class
* @param {Object} options
* Allows configurable properties to be entirely specified by passing
* an options object to the constructor. The constructor also supports
* the original positional arguments 'elements', 'clickTimeThreshold',
* and 'clickDistThreshold' in that order.
* @param {Element|String} options.element
* A reference to an element or an element id for which the mouse
* events will be monitored.
* @param {Number} options.clickTimeThreshold
* The number of milliseconds within which mutliple mouse clicks
* will be treated as a single event.
* @param {Number} options.clickDistThreshold
* The distance between mouse click within multiple mouse clicks
* will be treated as a single event.
* @param {Function} options.enterHandler
* An optional handler for mouse enter.
* @param {Function} options.exitHandler
* An optional handler for mouse exit.
* @param {Function} options.pressHandler
* An optional handler for mouse press.
* @param {Function} options.releaseHandler
* An optional handler for mouse release.
* @param {Function} options.scrollHandler
* An optional handler for mouse scroll.
* @param {Function} options.clickHandler
* An optional handler for mouse click.
* @param {Function} options.dragHandler
* An optional handler for mouse drag.
* @property {Number} hash
* An unique hash for this tracker.
* @property {Element} element
* The element for which mouse event are being monitored.
* @property {Number} clickTimeThreshold
* The number of milliseconds within which mutliple mouse clicks
* will be treated as a single event.
* @property {Number} clickDistThreshold
* The distance between mouse click within multiple mouse clicks
* will be treated as a single event.
*/
$.MouseTracker = function ( options ) {
var args = arguments;
if( !$.isPlainObject( options ) ){
options = {
element: args[ 0 ],
clickTimeThreshold: args[ 1 ],
clickDistThreshold: args[ 2 ]
};
}
this.hash = Math.random();
this.element = $.getElement( options.element );
this.clickTimeThreshold = options.clickTimeThreshold;
this.clickDistThreshold = options.clickDistThreshold;
this.enterHandler = options.enterHandler || null;
this.exitHandler = options.exitHandler || null;
this.pressHandler = options.pressHandler || null;
this.releaseHandler = options.releaseHandler || null;
this.scrollHandler = options.scrollHandler || null;
this.clickHandler = options.clickHandler || null;
this.dragHandler = options.dragHandler || null;
//Store private properties in a scope sealed hash map
var _this = this;
/**
* @private
* @property {Boolean} tracking
* Are we currently tracking mouse events.
* @property {Boolean} capturing
* Are we curruently capturing mouse events.
* @property {Boolean} buttonDown
* True if the left mouse button is currently being pressed and was
* initiated inside the tracked element, otherwise false.
* @property {Boolean} insideElement
* Are we currently inside the screen area of the tracked element.
* @property {OpenSeadragon.Point} lastPoint
* Position of last mouse down/move
* @property {Number} lastMouseDownTime
* Time of last mouse down.
* @property {OpenSeadragon.Point} lastMouseDownPoint
* Position of last mouse down
*/
THIS[ this.hash ] = {
"mouseover": function( event ){ onMouseOver( _this, event ); },
"mouseout": function( event ){ onMouseOut( _this, event ); },
"mousedown": function( event ){ onMouseDown( _this, event ); },
"mouseup": function( event ){ onMouseUp( _this, event ); },
"click": function( event ){ onMouseClick( _this, event ); },
"DOMMouseScroll": function( event ){ onMouseWheelSpin( _this, event ); },
"mousewheel": function( event ){ onMouseWheelSpin( _this, event ); },
"mouseupie": function( event ){ onMouseUpIE( _this, event ); },
"mousemoveie": function( event ){ onMouseMoveIE( _this, event ); },
"mouseupwindow": function( event ){ onMouseUpWindow( _this, event ); },
"mousemove": function( event ){ onMouseMove( _this, event ); },
"touchstart": function( event ){ onTouchStart( _this, event ); },
"touchmove": function( event ){ onTouchMove( _this, event ); },
"touchend": function( event ){ onTouchEnd( _this, event ); },
tracking: false,
capturing: false,
buttonDown: false,
insideElement: false,
lastPoint: null,
lastMouseDownTime: null,
lastMouseDownPoint: null,
lastPinchDelta: 0
};
};
$.MouseTracker.prototype = {
/**
* Are we currently tracking events on this element.
* @deprecated Just use this.tracking
* @function
* @returns {Boolean} Are we currently tracking events on this element.
*/
isTracking: function () {
return THIS[ this.hash ].tracking;
},
/**
* Enable or disable whether or not we are tracking events on this element.
* @function
* @param {Boolean} track True to start tracking, false to stop tracking.
* @returns {OpenSeadragon.MouseTracker} Chainable.
*/
setTracking: function ( track ) {
if ( track ) {
startTracking( this );
} else {
stopTracking( this );
}
//chain
return this;
},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
* @param {Boolean} buttonDown
* True if the left mouse button is currently being pressed and was
* initiated inside the tracked element, otherwise false.
* @param {Boolean} buttonDownAny
* Was the button down anywhere in the screen during the event.
*/
enterHandler: function(){},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
* @param {Boolean} buttonDown
* True if the left mouse button is currently being pressed and was
* initiated inside the tracked element, otherwise false.
* @param {Boolean} buttonDownAny
* Was the button down anywhere in the screen during the event.
*/
exitHandler: function(){},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
*/
pressHandler: function(){},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
* @param {Boolean} buttonDown
* True if the left mouse button is currently being pressed and was
* initiated inside the tracked element, otherwise false.
* @param {Boolean} insideElementRelease
* Was the mouse still inside the tracked element when the button
* was released.
*/
releaseHandler: function(){},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
* @param {Number} scroll
* The scroll delta for the event.
* @param {Boolean} shift
* Was the shift key being pressed during this event?
*/
scrollHandler: function(){},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
* @param {Boolean} quick
* True only if the clickDistThreshold and clickDeltaThreshold are
* both pased. Useful for ignoring events.
* @param {Boolean} shift
* Was the shift key being pressed during this event?
*/
clickHandler: function(){},
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} position
* The poistion of the event on the screen.
* @param {OpenSeadragon.Point} delta
* The x,y components of the difference between start drag and
* end drag. Usefule for ignoring or weighting the events.
* @param {Boolean} shift
* Was the shift key being pressed during this event?
*/
dragHandler: function(){}
};
/**
* Starts tracking mouse events on this element.
* @private
* @inner
*/
function startTracking( tracker ) {
var events = [
"mouseover", "mouseout", "mousedown", "mouseup",
"click",
"DOMMouseScroll", "mousewheel",
"touchstart", "touchmove", "touchend"
],
delegate = THIS[ tracker.hash ],
event,
i;
if ( !delegate.tracking ) {
for( i = 0; i < events.length; i++ ){
event = events[ i ];
$.addEvent(
tracker.element,
event,
delegate[ event ],
false
);
}
delegate.tracking = true;
ACTIVE[ tracker.hash ] = tracker;
}
};
/**
* Stops tracking mouse events on this element.
* @private
* @inner
*/
function stopTracking( tracker ) {
var events = [
"mouseover", "mouseout", "mousedown", "mouseup",
"click",
"DOMMouseScroll", "mousewheel",
"touchstart", "touchmove", "touchend"
],
delegate = THIS[ tracker.hash ],
event,
i;
if ( delegate.tracking ) {
for( i = 0; i < events.length; i++ ){
event = events[ i ];
$.removeEvent(
tracker.element,
event,
delegate[ event ],
false
);
}
releaseMouse( tracker );
delegate.tracking = false;
delete ACTIVE[ tracker.hash ];
}
};
/**
* @private
* @inner
*/
function hasMouse( tracker ) {
return THIS[ tracker.hash ].insideElement;
};
/**
* Begin capturing mouse events on this element.
* @private
* @inner
*/
function captureMouse( tracker ) {
var delegate = THIS[ tracker.hash ];
if ( !delegate.capturing ) {
if ( $.Browser.vendor == $.BROWSERS.IE ) {
$.removeEvent(
tracker.element,
"mouseup",
delegate[ "mouseup" ],
false
);
$.addEvent(
tracker.element,
"mouseup",
delegate[ "mouseupie" ],
true
);
$.addEvent(
tracker.element,
"mousemove",
delegate[ "mousemoveie" ],
true
);
} else {
$.addEvent(
window,
"mouseup",
delegate[ "mouseupwindow" ],
true
);
$.addEvent(
window,
"mousemove",
delegate[ "mousemove" ],
true
);
}
delegate.capturing = true;
}
};
/**
* Stop capturing mouse events on this element.
* @private
* @inner
*/
function releaseMouse( tracker ) {
var delegate = THIS[ tracker.hash ];
if ( delegate.capturing ) {
if ( $.Browser.vendor == $.BROWSERS.IE ) {
$.removeEvent(
tracker.element,
"mousemove",
delegate[ "mousemoveie" ],
true
);
$.removeEvent(
tracker.element,
"mouseup",
delegate[ "mouseupie" ],
true
);
$.addEvent(
tracker.element,
"mouseup",
delegate[ "mouseup" ],
false
);
} else {
$.removeEvent(
window,
"mousemove",
delegate[ "mousemove" ],
true
);
$.removeEvent(
window,
"mouseup",
delegate[ "mouseupwindow" ],
true
);
}
delegate.capturing = false;
}
};
/**
* @private
* @inner
*/
function triggerOthers( tracker, handler, event ) {
var otherHash;
for ( otherHash in ACTIVE ) {
if ( trackers.hasOwnProperty( otherHash ) && tracker.hash != otherHash ) {
handler( ACTIVE[ otherHash ], event );
}
}
};
/**
* @private
* @inner
*/
function onMouseOver( tracker, event ) {
var event = $.getEvent( event ),
delegate = THIS[ tracker.hash ];
if ( $.Browser.vendor == $.BROWSERS.IE &&
delegate.capturing &&
!isChild( event.srcElement, tracker.element ) ) {
triggerOthers( tracker, onMouseOver, event );
}
var to = event.target ?
event.target :
event.srcElement,
from = event.relatedTarget ?
event.relatedTarget :
event.fromElement;
if ( !isChild( tracker.element, to ) ||
isChild( tracker.element, from ) ) {
return;
}
delegate.insideElement = true;
if ( tracker.enterHandler ) {
try {
tracker.enterHandler(
tracker,
getMouseRelative( event, tracker.element ),
delegate.buttonDown,
IS_BUTTON_DOWN
);
} catch ( e ) {
$.console.error(
"%s while executing enter handler: %s",
e.name,
e.message,
e
);
}
}
};
/**
* @private
* @inner
*/
function onMouseOut( tracker, event ) {
var event = $.getEvent( event ),
delegate = THIS[ tracker.hash ];
if ( $.Browser.vendor == $.BROWSERS.IE &&
delegate.capturing &&
!isChild( event.srcElement, tracker.element ) ) {
triggerOthers( tracker, onMouseOut, event );
}
var from = event.target ?
event.target :
event.srcElement,
to = event.relatedTarget ?
event.relatedTarget :
event.toElement;
if ( !isChild( tracker.element, from ) ||
isChild( tracker.element, to ) ) {
return;
}
delegate.insideElement = false;
if ( tracker.exitHandler ) {
try {
tracker.exitHandler(
tracker,
getMouseRelative( event, tracker.element ),
delegate.buttonDown,
IS_BUTTON_DOWN
);
} catch ( e ) {
$.console.error(
"%s while executing exit handler: %s",
e.name,
e.message,
e
);
}
}
};
/**
* @private
* @inner
*/
function onMouseDown( tracker, event ) {
var event = $.getEvent( event ),
delegate = THIS[ tracker.hash ];
if ( event.button == 2 ) {
return;
}
delegate.buttonDown = true;
delegate.lastPoint = getMouseAbsolute( event );
delegate.lastMouseDownPoint = delegate.lastPoint;
delegate.lastMouseDownTime = +new Date();
if ( tracker.pressHandler ) {
try {
tracker.pressHandler(
tracker,
getMouseRelative( event, tracker.element )
);
} catch (e) {
$.console.error(
"%s while executing press handler: %s",
e.name,
e.message,
e
);
}
}
if ( tracker.pressHandler || tracker.dragHandler ) {
$.cancelEvent( event );
}
if ( !( $.Browser.vendor == $.BROWSERS.IE ) || !IS_CAPTURING ) {
captureMouse( tracker );
IS_CAPTURING = true;
// reset to empty & add us
CAPTURING = [ tracker ];
} else if ( $.Browser.vendor == $.BROWSERS.IE ) {
// add us to the list
CAPTURING.push( tracker );
}
};
/**
* @private
* @inner
*/
function onTouchStart( tracker, event ) {
var touchA,
touchB;
window.location.hash = event.touches[ 0 ].target.tagName;
if( event.touches.length == 1 &&
event.targetTouches.length == 1 &&
event.changedTouches.length == 1 ){
THIS[ tracker.hash ].lastTouch = event.touches[ 0 ];
onMouseOver( tracker, event.changedTouches[ 0 ] );
onMouseDown( tracker, event.touches[ 0 ] );
}
if( event.touches.length == 2 ){
touchA = getMouseAbsolute( event.touches[ 0 ] );
touchB = getMouseAbsolute( event.touches[ 1 ] );
THIS[ tracker.hash ].lastPinchDelta =
Math.abs( touchA.x - touchB.x ) +
Math.abs( touchA.y - touchB.y );
//$.console.debug("pinch start : "+THIS[ tracker.hash ].lastPinchDelta);
}
event.preventDefault();
};
/**
* @private
* @inner
*/
function onMouseUp( tracker, event ) {
var event = $.getEvent( event ),
delegate = THIS[ tracker.hash ],
//were we inside the tracked element when we were pressed
insideElementPress = delegate.buttonDown,
//are we still inside the tracked element when we released
insideElementRelease = delegate.insideElement;
if ( event.button == 2 ) {
return;
}
delegate.buttonDown = false;
if ( tracker.releaseHandler ) {
try {
tracker.releaseHandler(
tracker,
getMouseRelative( event, tracker.element ),
insideElementPress,
insideElementRelease
);
} catch (e) {
$.console.error(
"%s while executing release handler: %s",
e.name,
e.message,
e
);
}
}
if ( insideElementPress && insideElementRelease ) {
handleMouseClick( tracker, event );
}
};
/**
* @private
* @inner
*/
function onTouchEnd( tracker, event ) {
if( event.touches.length == 0 &&
event.targetTouches.length == 0 &&
event.changedTouches.length == 1 ){
THIS[ tracker.hash ].lastTouch = null;
onMouseUp( tracker, event.changedTouches[ 0 ] );
onMouseOut( tracker, event.changedTouches[ 0 ] );
}
if( event.touches.length + event.changedTouches.length == 2 ){
THIS[ tracker.hash ].lastPinchDelta = null;
//$.console.debug("pinch end");
}
event.preventDefault();
};
/**
* Only triggered once by the deepest element that initially received
* the mouse down event. We want to make sure THIS event doesn't bubble.
* Instead, we want to trigger the elements that initially received the
* mouse down event (including this one) only if the mouse is no longer
* inside them. Then, we want to release capture, and emulate a regular
* mouseup on the event that this event was meant for.
* @private
* @inner
*/
function onMouseUpIE( tracker, event ) {
var event = $.getEvent( event ),
othertracker,
i;
if ( event.button == 2 ) {
return;
}
for ( i = 0; i < CAPTURING.length; i++ ) {
othertracker = CAPTURING[ i ];
if ( !hasMouse( othertracker ) ) {
onMouseUp( othertracker, event );
}
}
releaseMouse( tracker );
IS_CAPTURING = false;
event.srcElement.fireEvent(
"on" + event.type,
document.createEventObject( event )
);
$.stopEvent( event );
};
/**
* Only triggered in W3C browsers by elements within which the mouse was
* initially pressed, since they are now listening to the window for
* mouseup during the capture phase. We shouldn't handle the mouseup
* here if the mouse is still inside this element, since the regular
* mouseup handler will still fire.
* @private
* @inner
*/
function onMouseUpWindow( tracker, event ) {
if ( ! THIS[ tracker.hash ].insideElement ) {
onMouseUp( tracker, event );
}
releaseMouse( tracker );
};
/**
* @private
* @inner
*/
function onMouseClick( tracker, event ) {
if ( tracker.clickHandler ) {
$.cancelEvent( event );
}
};
/**
* @private
* @inner
*/
function onMouseWheelSpin( tracker, event ) {
var nDelta = 0;
if ( !event ) { // For IE, access the global (window) event object
event = window.event;
}
if ( event.wheelDelta ) { // IE and Opera
nDelta = event.wheelDelta;
if ( window.opera ) { // Opera has the values reversed
nDelta = -nDelta;
}
} else if (event.detail) { // Mozilla FireFox
nDelta = -event.detail;
}
//The nDelta variable is gated to provide smooth z-index scrolling
//since the mouse wheel allows for substantial deltas meant for rapid
//y-index scrolling.
nDelta = nDelta > 0 ? 1 : -1;
if ( tracker.scrollHandler ) {
try {
tracker.scrollHandler(
tracker,
getMouseRelative( event, tracker.element ),
nDelta,
event.shiftKey
);
} catch (e) {
$.console.error(
"%s while executing scroll handler: %s",
e.name,
e.message,
e
);
}
$.cancelEvent( event );
}
};
/**
* @private
* @inner
*/
function handleMouseClick( tracker, event ) {
var event = $.getEvent( event ),
delegate = THIS[ tracker.hash ];
if ( event.button == 2 ) {
return;
}
var time = +new Date() - delegate.lastMouseDownTime,
point = getMouseAbsolute( event ),
distance = delegate.lastMouseDownPoint.distanceTo( point ),
quick = time <= tracker.clickTimeThreshold &&
distance <= tracker.clickDistThreshold;
if ( tracker.clickHandler ) {
try {
tracker.clickHandler(
tracker,
getMouseRelative( event, tracker.element ),
quick,
event.shiftKey
);
} catch ( e ) {
$.console.error(
"%s while executing click handler: %s",
e.name,
e.message,
e
);
}
}
};
/**
* @private
* @inner
*/
function onMouseMove( tracker, event ) {
var event = $.getEvent( event ),
delegate = THIS[ tracker.hash ],
point = getMouseAbsolute( event ),
delta = point.minus( delegate.lastPoint );
delegate.lastPoint = point;
if ( tracker.dragHandler ) {
try {
tracker.dragHandler(
tracker,
getMouseRelative( event, tracker.element ),
delta,
event.shiftKey
);
} catch (e) {
$.console.error(
"%s while executing drag handler: %s",
e.name,
e.message,
e
);
}
$.cancelEvent( event );
}
};
/**
* @private
* @inner
*/
function onTouchMove( tracker, event ) {
var touchA,
touchB,
pinchDelta;
if( event.touches.length === 1 &&
event.targetTouches.length === 1 &&
event.changedTouches.length === 1 &&
THIS[ tracker.hash ].lastTouch === event.touches[ 0 ]){
onMouseMove( tracker, event.touches[ 0 ] );
} else if ( event.touches.length === 2 ){
touchA = getMouseAbsolute( event.touches[ 0 ] );
touchB = getMouseAbsolute( event.touches[ 1 ] );
pinchDelta =
Math.abs( touchA.x - touchB.x ) +
Math.abs( touchA.y - touchB.y );
//TODO: make the 75px pinch threshold configurable
if( Math.abs( THIS[ tracker.hash ].lastPinchDelta - pinchDelta ) > 75 ){
//$.console.debug( "pinch delta : " + pinchDelta + " | previous : " + THIS[ tracker.hash ].lastPinchDelta);
onMouseWheelSpin( tracker, {
shift: false,
pageX: ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2,
pageY: ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2,
detail:(
THIS[ tracker.hash ].lastPinchDelta > pinchDelta
) ? 1 : -1
});
THIS[ tracker.hash ].lastPinchDelta = pinchDelta;
}
}
event.preventDefault();
};
/**
* Only triggered once by the deepest element that initially received
* the mouse down event. Since no other element has captured the mouse,
* we want to trigger the elements that initially received the mouse
* down event (including this one). The the param tracker isn't used
* but for consistency with the other event handlers we include it.
* @private
* @inner
*/
function onMouseMoveIE( tracker, event ) {
var i;
for ( i = 0; i < CAPTURING.length; i++ ) {
onMouseMove( CAPTURING[ i ], event );
}
$.stopEvent( event );
};
/**
* @private
* @inner
*/
function getMouseAbsolute( event ) {
return $.getMousePosition( event );
};
/**
* @private
* @inner
*/
function getMouseRelative( event, element ) {
var mouse = $.getMousePosition( event ),
offset = $.getElementPosition( element );
return mouse.minus( offset );
};
/**
* @private
* @inner
* Returns true if elementB is a child node of elementA, or if they're equal.
*/
function isChild( elementA, elementB ) {
var body = document.body;
while ( elementB && elementA != elementB && body != elementB ) {
try {
elementB = elementB.parentNode;
} catch (e) {
return false;
}
}
return elementA == elementB;
};
/**
* @private
* @inner
*/
function onGlobalMouseDown() {
IS_BUTTON_DOWN = true;
};
/**
* @private
* @inner
*/
function onGlobalMouseUp() {
IS_BUTTON_DOWN = false;
};
(function () {
if ( $.Browser.vendor == $.BROWSERS.IE ) {
$.addEvent( document, "mousedown", onGlobalMouseDown, false );
$.addEvent( document, "mouseup", onGlobalMouseUp, false );
} else {
$.addEvent( window, "mousedown", onGlobalMouseDown, true );
$.addEvent( window, "mouseup", onGlobalMouseUp, true );
}
})();
}( OpenSeadragon ));