From 2a8cb43d020f0422bc00b294bcff088ee49fb3cd Mon Sep 17 00:00:00 2001 From: Ben Delarre Date: Fri, 12 Sep 2014 16:01:19 -0700 Subject: [PATCH 1/6] Fixes issue #464 by adding mouseout handler to document and calling mouseUp handler --- src/mousetracker.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/mousetracker.js b/src/mousetracker.js index 7a4df604..60500660 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -192,6 +192,8 @@ mouseupcaptured: function ( event ) { onMouseUpCaptured( _this, event ); }, mousemove: function ( event ) { onMouseMove( _this, event ); }, mousemovecaptured: function ( event ) { onMouseMoveCaptured( _this, event ); }, + + mouseoutdocument: function ( event ) { onMouseUp( _this, event ); }, touchenter: function ( event ) { onTouchEnter( _this, event ); }, touchleave: function ( event ) { onTouchLeave( _this, event ); }, @@ -1049,6 +1051,10 @@ false ); } + + // handle mouse out of document area + $.addEvent(document, "mouseout", delegate['mouseoutdocument']); + delegate.tracking = true; } } @@ -1074,6 +1080,9 @@ ); } + // handle mouse out of document area + $.removeEvent(document, "mouseout", delegate['mouseoutdocument']); + delegate.tracking = false; } } From 7278793e5cca32f90472e1fec0a71dbc4b11c848 Mon Sep 17 00:00:00 2001 From: Ben Delarre Date: Fri, 12 Sep 2014 16:22:55 -0700 Subject: [PATCH 2/6] Fixed notation for travis build. --- src/mousetracker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/mousetracker.js b/src/mousetracker.js index 60500660..eb1fb94f 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -192,7 +192,7 @@ mouseupcaptured: function ( event ) { onMouseUpCaptured( _this, event ); }, mousemove: function ( event ) { onMouseMove( _this, event ); }, mousemovecaptured: function ( event ) { onMouseMoveCaptured( _this, event ); }, - + mouseoutdocument: function ( event ) { onMouseUp( _this, event ); }, touchenter: function ( event ) { onTouchEnter( _this, event ); }, @@ -1053,7 +1053,7 @@ } // handle mouse out of document area - $.addEvent(document, "mouseout", delegate['mouseoutdocument']); + $.addEvent(document, "mouseout", delegate.mouseoutdocument); delegate.tracking = true; } @@ -1081,7 +1081,7 @@ } // handle mouse out of document area - $.removeEvent(document, "mouseout", delegate['mouseoutdocument']); + $.removeEvent(document, "mouseout", delegate.mouseoutdocument); delegate.tracking = false; } From f07108ec2d2c0a160a75489dd24cab977a386604 Mon Sep 17 00:00:00 2001 From: Ben Delarre Date: Tue, 23 Sep 2014 11:26:42 -0700 Subject: [PATCH 3/6] Updated implementation to better pass tests, still not 100% though. --- src/mousetracker.js | 17 ++++++++++++++--- test/events.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/src/mousetracker.js b/src/mousetracker.js index eb1fb94f..6f58ffa5 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -193,7 +193,7 @@ mousemove: function ( event ) { onMouseMove( _this, event ); }, mousemovecaptured: function ( event ) { onMouseMoveCaptured( _this, event ); }, - mouseoutdocument: function ( event ) { onMouseUp( _this, event ); }, + mouseoutdocument: function ( event ) { onMouseOutDocument( _this, event ); }, touchenter: function ( event ) { onTouchEnter( _this, event ); }, touchleave: function ( event ) { onTouchLeave( _this, event ); }, @@ -1053,7 +1053,7 @@ } // handle mouse out of document area - $.addEvent(document, "mouseout", delegate.mouseoutdocument); + $.addEvent(document.body, "mouseout", delegate.mouseoutdocument); delegate.tracking = true; } @@ -1081,7 +1081,7 @@ } // handle mouse out of document area - $.removeEvent(document, "mouseout", delegate.mouseoutdocument); + $.removeEvent(document.body, "mouseout", delegate.mouseoutdocument); delegate.tracking = false; } @@ -1537,6 +1537,17 @@ } } + function onMouseOutDocument( tracker, event ) { + event = $.getEvent( event ); + + var html = document.getElementsByTagName("html")[0]; + if ((event.relatedTarget!==html && event.relatedTarget!==null) || event.currentTarget !== document.body) { + return; // not a mouseout of the iframe + } + event.buttons = undefined; + event.button = 0; + handleMouseUp(tracker,event); + } /** * @private diff --git a/test/events.js b/test/events.js index 36a49b17..ac796cd8 100644 --- a/test/events.js +++ b/test/events.js @@ -165,6 +165,13 @@ var simulateLeave = function (x, y) { simEvent.clientX = offset.left + x; simEvent.clientY = offset.top + y; + simEvent.relatedTarget = document.body; + $canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent ); + }; + var simulateLeaveFrame = function (x, y) { + simEvent.clientX = offset.left + x; + simEvent.clientY = offset.top + y; + simEvent.relatedTarget = document.getElementsByTagName("html")[0]; $canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent ); }; @@ -446,6 +453,33 @@ quickClick: false }); + + // enter-press-move-exit-move-release (drag, release outside tracked element) + resetForAssessment(); + simulateEnter(0, 0); + simulateDown(0, 0); + simulateMove(1, 1, 5); + simulateMove(105, 105, 5); + simulateLeaveFrame(105, 105); + simulateMove(105, 105, 5); + // you don't actually receive the mouseup if you mouseup outside of the document + assessGestureExpectations({ + description: 'enter-press-move-exit-move-release-outside (drag, release outside iframe): ', + enterCount: 1, + exitCount: 1, + pressCount: 1, + releaseCount: 1, + moveCount: 15, + clickCount: 0, + dblClickCount: 0, + dragCount: 10, + dragEndCount: 1, + insideElementPressed: true, + insideElementReleased: false, + contacts: 0, + trackedPointers: 0, + quickClick: false + }); unhookViewerHandlers(); viewer.close(); From 23c9155e525178a3e9854ed3cbc9cda587fa637f Mon Sep 17 00:00:00 2001 From: Ben Delarre Date: Tue, 23 Sep 2014 11:30:46 -0700 Subject: [PATCH 4/6] Fixed comment. --- test/events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/events.js b/test/events.js index ac796cd8..f72e02e3 100644 --- a/test/events.js +++ b/test/events.js @@ -454,7 +454,7 @@ }); - // enter-press-move-exit-move-release (drag, release outside tracked element) + // enter-press-move-exit-move-release-outside (drag, release outside iframe) resetForAssessment(); simulateEnter(0, 0); simulateDown(0, 0); From bbcb9c1219c95b0feea446926e10e88ade0c6193 Mon Sep 17 00:00:00 2001 From: Ben Delarre Date: Tue, 23 Sep 2014 11:32:37 -0700 Subject: [PATCH 5/6] Fixed bounds of test. --- test/events.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/events.js b/test/events.js index f72e02e3..9b58b9e2 100644 --- a/test/events.js +++ b/test/events.js @@ -459,9 +459,9 @@ simulateEnter(0, 0); simulateDown(0, 0); simulateMove(1, 1, 5); - simulateMove(105, 105, 5); - simulateLeaveFrame(105, 105); - simulateMove(105, 105, 5); + simulateMove(-1, -1, 5); + simulateLeaveFrame(-1, -1); + simulateMove(-1, -1, 5); // you don't actually receive the mouseup if you mouseup outside of the document assessGestureExpectations({ description: 'enter-press-move-exit-move-release-outside (drag, release outside iframe): ', From 1d1b9bf01af28a84b2af978de199289e9f1e0818 Mon Sep 17 00:00:00 2001 From: Ben Delarre Date: Tue, 23 Sep 2014 14:31:53 -0700 Subject: [PATCH 6/6] Added support for pointer API so this now works in IE11. --- src/mousetracker.js | 93 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 76 insertions(+), 17 deletions(-) diff --git a/src/mousetracker.js b/src/mousetracker.js index 6f58ffa5..0c865c74 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -209,6 +209,10 @@ MSPointerOver: function ( event ) { onPointerOver( _this, event ); }, pointerout: function ( event ) { onPointerOut( _this, event ); }, MSPointerOut: function ( event ) { onPointerOut( _this, event ); }, + + pointeroutdocument: function ( event ) { onPointerOutDocument( _this, event ); }, + MSPointerOutdocument: function ( event ) { onPointerOutDocument( _this, event ); }, + pointerdown: function ( event ) { onPointerDown( _this, event ); }, MSPointerDown: function ( event ) { onPointerDown( _this, event ); }, pointerup: function ( event ) { onPointerUp( _this, event ); }, @@ -1051,9 +1055,15 @@ false ); } - - // handle mouse out of document area - $.addEvent(document.body, "mouseout", delegate.mouseoutdocument); + + // handle pointer/mouse out of document body + if ( window.PointerEvent ) { + $.addEvent(document.body, "pointerout", delegate.pointeroutdocument); + } else if ( window.MSPointerEvent ) { + $.addEvent(document.body, "pointerout", delegate.MSPointerOutdocument); + } else { + $.addEvent(document.body, "mouseout", delegate.mouseoutdocument); + } delegate.tracking = true; } @@ -1080,8 +1090,14 @@ ); } - // handle mouse out of document area - $.removeEvent(document.body, "mouseout", delegate.mouseoutdocument); + // handle pointer/mouse out of document body + if ( window.PointerEvent ) { + $.removeEvent(document.body, "pointerout", delegate.pointeroutdocument); + } else if ( window.MSPointerEvent ) { + $.removeEvent(document.body, "MSPointerOut", delegate.MSPointerOutdocument); + } else { + $.removeEvent(document.body, "mouseout", delegate.mouseoutdocument); + } delegate.tracking = false; } @@ -1465,6 +1481,35 @@ updatePointersExit( tracker, event, [ gPoint ] ); } + /** + * This handler is used to handle the case where the mouse is dragged out of the window, it should cause the drag to be properly released. + * + * @private + * @inner + */ + function onMouseOutDocument( tracker, event ) { + event = $.getEvent( event ); + + var html = document.getElementsByTagName("html")[0]; + var target = event.target || event.srcElement; + if ((event.relatedTarget!==html && event.relatedTarget!==null) || event.currentTarget !== document.body) { + return; // not a mouseout of the iframe + } + + var gPoint = { + id: $.MouseTracker.mousePointerId, + type: 'mouse', + isPrimary: true, + currentPos: getMouseAbsolute( event ), + currentTime: $.now() + }; + + event.buttons = undefined; + + if ( updatePointersUp( tracker, event, [ gPoint ], 0 ) ) { + releasePointer( tracker, true ); + } + } /** * @private @@ -1537,18 +1582,6 @@ } } - function onMouseOutDocument( tracker, event ) { - event = $.getEvent( event ); - - var html = document.getElementsByTagName("html")[0]; - if ((event.relatedTarget!==html && event.relatedTarget!==null) || event.currentTarget !== document.body) { - return; // not a mouseout of the iframe - } - event.buttons = undefined; - event.button = 0; - handleMouseUp(tracker,event); - } - /** * @private * @inner @@ -1820,6 +1853,32 @@ updatePointersExit( tracker, event, [ gPoint ] ); } + /** + * This handler is used to handle the case where the pointer is dragged out of the window, it should cause the drag to be properly released. + * + * @private + * @inner + */ + function onPointerOutDocument( tracker, event ) { + event = $.getEvent( event ); + + var html = document.getElementsByTagName("html")[0]; + if ((event.relatedTarget!==html && event.relatedTarget!==null) || event.currentTarget !== document.body) { + return; // not a mouseout of the iframe + } + + var gPoint = { + id: event.pointerId, + type: getPointerType( event ), + isPrimary: event.isPrimary, + currentPos: getMouseAbsolute( event ), + currentTime: $.now() + }; + + if ( updatePointersUp( tracker, event, [ gPoint ], 0 ) ) { + releasePointer( tracker, false ); + } + } /** * @private