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

Fixed legacy mouse and touch event handling

Browse Source
This commit is contained in:
Mark Salsbery 2021-05-03 11:38:20 -07:00
parent dba9bcd76c
commit 00187cb5a1
7 changed files with 96 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/button.js
View File

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

2
src/drawer.js
View File

@ -128,7 +128,7 @@ $.Drawer = function( options ) {
$.setElementOpacity( this.canvas, this.opacity, true ); $.setElementOpacity( this.canvas, this.opacity, true );
// Allow pointer events to pass through the canvas element so implicit // Allow pointer events to pass through the canvas element so implicit
// pointer capture works on touch devices // pointer capture works on touch devices
$.setElementPointerEventsNone( this.canvas ); $.setElementPointerEvents( this.canvas, 'none' );
$.setElementTouchActionNone( this.canvas ); $.setElementTouchActionNone( this.canvas );
// explicit left-align // explicit left-align

129
src/mousetracker.js
View File

@ -281,6 +281,10 @@
this.pinchHandler ); this.pinchHandler );
this.hasScrollHandler = !!this.scrollHandler; this.hasScrollHandler = !!this.scrollHandler;
if ( $.MouseTracker.havePointerEvents ) {
$.setElementPointerEvents( this.element, 'auto' );
}
if (this.exitHandler) { if (this.exitHandler) {
$.console.error("MouseTracker.exitHandler is deprecated. Use MouseTracker.leaveHandler instead."); $.console.error("MouseTracker.exitHandler is deprecated. Use MouseTracker.leaveHandler instead.");
} }
@ -1539,13 +1543,14 @@
if ( $.MouseTracker.havePointerCapture ) { if ( $.MouseTracker.havePointerCapture ) {
if ( $.MouseTracker.havePointerEvents ) { if ( $.MouseTracker.havePointerEvents ) {
// Can throw InvalidPointerId // Can throw NotFoundError (InvalidPointerId Firefox < 82)
// (should never happen so we'll log a warning) // (should never happen so we'll log a warning)
try { try {
tracker.element.setPointerCapture( gPoint.id ); tracker.element.setPointerCapture( gPoint.id );
//$.console.log('element.setPointerCapture() called'); //$.console.log('element.setPointerCapture() called');
} catch ( e ) { } catch ( e ) {
$.console.warn('setPointerCapture() called on invalid pointer ID'); $.console.warn('setPointerCapture() called on invalid pointer ID');
return;
} }
} else { } else {
tracker.element.setCapture( true ); tracker.element.setCapture( true );
@ -1601,7 +1606,7 @@
if ( !cachedGPoint || !cachedGPoint.captured ) { if ( !cachedGPoint || !cachedGPoint.captured ) {
return; return;
} }
// Can throw InvalidPointerId // Can throw NotFoundError (InvalidPointerId Firefox < 82)
// (should never happen, but it does on Firefox 79 touch so we won't log a warning) // (should never happen, but it does on Firefox 79 touch so we won't log a warning)
try { try {
tracker.element.releasePointerCapture( gPoint.id ); tracker.element.releasePointerCapture( gPoint.id );
@ -1731,7 +1736,7 @@
* @inner * @inner
*/ */
function onClick( tracker, event ) { function onClick( tracker, event ) {
//$.console.log('onClick ' + (tracker.userData ? tracker.userData.toString() : '')); //$.console.log('click ' + (tracker.userData ? tracker.userData.toString() : ''));
var eventInfo = { var eventInfo = {
originalEvent: event, originalEvent: event,
@ -1755,7 +1760,7 @@
* @inner * @inner
*/ */
function onDblClick( tracker, event ) { function onDblClick( tracker, event ) {
//$.console.log('onDblClick ' + (tracker.userData ? tracker.userData.toString() : '')); //$.console.log('dblclick ' + (tracker.userData ? tracker.userData.toString() : ''));
var eventInfo = { var eventInfo = {
originalEvent: event, originalEvent: event,
@ -1904,7 +1909,7 @@
* @inner * @inner
*/ */
function onFocus( tracker, event ) { function onFocus( tracker, event ) {
//console.log( "focus %s", event ); //$.console.log('focus ' + (tracker.userData ? tracker.userData.toString() : ''));
// focus doesn't bubble and is not cancelable, but we call // focus doesn't bubble and is not cancelable, but we call
// preProcessEvent() so it's dispatched to preProcessEventHandler // preProcessEvent() so it's dispatched to preProcessEventHandler
@ -1934,7 +1939,7 @@
* @inner * @inner
*/ */
function onBlur( tracker, event ) { function onBlur( tracker, event ) {
//console.log( "blur %s", event ); //$.console.log('blur ' + (tracker.userData ? tracker.userData.toString() : ''));
// blur doesn't bubble and is not cancelable, but we call // blur doesn't bubble and is not cancelable, but we call
// preProcessEvent() so it's dispatched to preProcessEventHandler // preProcessEvent() so it's dispatched to preProcessEventHandler
@ -2116,7 +2121,9 @@
}; };
preProcessEvent( tracker, eventInfo ); preProcessEvent( tracker, eventInfo );
updatePointerCaptured( tracker, gPoint, false ); if ( event.target === tracker.element ) {
updatePointerCaptured( tracker, gPoint, false );
}
if ( eventInfo.stopPropagation ) { if ( eventInfo.stopPropagation ) {
$.stopEvent( event ); $.stopEvent( event );
@ -2137,7 +2144,7 @@
time = $.now(); time = $.now();
//$.console.log('touchstart ' + (tracker.userData ? tracker.userData.toString() : '')); $.console.log('touchstart ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
if ( pointsList.getLength() > event.touches.length - touchCount ) { if ( pointsList.getLength() > event.touches.length - touchCount ) {
$.console.warn('Tracked touch contact count doesn\'t match event.touches.length'); $.console.warn('Tracked touch contact count doesn\'t match event.touches.length');
@ -2164,9 +2171,9 @@
// simulate touchenter on our tracked element // simulate touchenter on our tracked element
updatePointerEnter( tracker, eventInfo, gPoint ); updatePointerEnter( tracker, eventInfo, gPoint );
updatePointerCaptured( tracker, gPoint, true );
updatePointerDown( tracker, eventInfo, gPoint, 0 ); updatePointerDown( tracker, eventInfo, gPoint, 0 );
updatePointerCaptured( tracker, gPoint, true );
} }
if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) { if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
@ -2190,7 +2197,7 @@
time = $.now(); time = $.now();
//$.console.log('touchend ' + (tracker.userData ? tracker.userData.toString() : '')); $.console.log('touchend ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
var eventInfo = { var eventInfo = {
originalEvent: event, originalEvent: event,
@ -2329,7 +2336,7 @@
* @inner * @inner
*/ */
function onGotPointerCapture( tracker, event ) { function onGotPointerCapture( tracker, event ) {
//$.console.log('gotpointercapture ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : '')); $.console.log('gotpointercapture ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
var eventInfo = { var eventInfo = {
originalEvent: event, originalEvent: event,
@ -2358,7 +2365,7 @@
* @inner * @inner
*/ */
function onLostPointerCapture( tracker, event ) { function onLostPointerCapture( tracker, event ) {
//$.console.log('lostpointercapture ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : '')); $.console.log('lostpointercapture ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
var eventInfo = { var eventInfo = {
originalEvent: event, originalEvent: event,
@ -2530,22 +2537,6 @@
* @inner * @inner
*/ */
function onPointerDown( tracker, event ) { function onPointerDown( tracker, event ) {
//$.console.log('onPointerDown ' + (tracker.userData ? tracker.userData.toString() : ''));
// $.console.log('onPointerDown ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + event.target.tagName);
// Most browsers implicitly capture touch pointer events
// Note no IE versions have element.hasPointerCapture() so no implicit
// pointer capture possible
var implicitlyCaptured = ($.MouseTracker.havePointerEvents &&
tracker.element.hasPointerCapture &&
$.Browser.vendor !== $.BROWSERS.IE) ?
tracker.element.hasPointerCapture(event.pointerId) : false;
// if (implicitlyCaptured) {
// $.console.log('pointerdown implicitlyCaptured ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
// } else {
// $.console.log('pointerdown not implicitlyCaptured ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
// }
var gPoint = { var gPoint = {
id: getPointerId( event ), id: getPointerId( event ),
type: getPointerType( event ), type: getPointerType( event ),
@ -2554,6 +2545,31 @@
currentTime: $.now() currentTime: $.now()
}; };
var ourElement = event.target === tracker.element;
// Most browsers implicitly capture touch pointer events
// Note no IE versions have element.hasPointerCapture() so no implicit
// pointer capture possible
// var implicitlyCaptured = ($.MouseTracker.havePointerEvents &&
// event.target.hasPointerCapture &&
// $.Browser.vendor !== $.BROWSERS.IE) ?
// event.target.hasPointerCapture(event.pointerId) : false;
var implicitlyCaptured = $.MouseTracker.havePointerEvents &&
gPoint.type === 'touch' &&
$.Browser.vendor !== $.BROWSERS.IE;
//$.console.log('pointerdown ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (ourElement ? 'tracker.element' : ''));
if (implicitlyCaptured) {
$.console.log('pointerdown implicitlyCaptured ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (ourElement ? 'tracker.element' : ''));
} else {
$.console.log('pointerdown not implicitlyCaptured ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (ourElement ? 'tracker.element' : ''));
}
// if ( implicitlyCaptured && ourElement ) {
// updatePointerCaptured( tracker, gPoint, true );
// }
var eventInfo = { var eventInfo = {
originalEvent: event, originalEvent: event,
eventType: 'pointerdown', eventType: 'pointerdown',
@ -2570,13 +2586,20 @@
if ( eventInfo.stopPropagation ) { if ( eventInfo.stopPropagation ) {
$.stopEvent( event ); $.stopEvent( event );
} }
if ( eventInfo.shouldCapture && !implicitlyCaptured ) { if ( eventInfo.shouldCapture ) {
//$.console.log('pointerdown calling capturePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : '')); if ( implicitlyCaptured ) {
capturePointer( tracker, gPoint ); $.console.log('pointerdown calling updatePointerCaptured() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
} else if ( !eventInfo.shouldCapture && implicitlyCaptured ) { updatePointerCaptured( tracker, gPoint, true );
//$.console.log('pointerdown calling releasePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : '')); } else {
releasePointer( tracker, gPoint ); //TODO should we do this? Investigate when implementing bubble handling $.console.log('pointerdown calling capturePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
} capturePointer( tracker, gPoint );
}
}// else if ( implicitlyCaptured && ourElement ) {
// //$.console.log('pointerdown calling releasePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
// //releasePointer( tracker, gPoint ); //TODO should we do this? Investigate when implementing bubble handling
// $.console.log('pointerdown calling updatePointerCaptured(false) ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
// updatePointerCaptured( tracker, gPoint, false );
// }
} }
@ -2622,6 +2645,7 @@
var gPoint; var gPoint;
//$.console.log('onPointerUp ' + (tracker.userData ? tracker.userData.toString() : '')); //$.console.log('onPointerUp ' + (tracker.userData ? tracker.userData.toString() : ''));
$.console.log('pointerup ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
gPoint = { gPoint = {
id: getPointerId( event ), id: getPointerId( event ),
@ -2651,9 +2675,14 @@
// Per spec, pointerup events are supposed to release capture. Not all browser // Per spec, pointerup events are supposed to release capture. Not all browser
// versions have adhered to the spec, and there's no harm in releasing // versions have adhered to the spec, and there's no harm in releasing
// explicitly // explicitly
if ( eventInfo.shouldReleaseCapture && event.target === tracker.element ) { if ( eventInfo.shouldReleaseCapture ) {
//$.stopEvent( event ); if ( event.target === tracker.element ) {
releasePointer( tracker, gPoint ); $.console.log('pointerup calling releasePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
releasePointer( tracker, gPoint );
} else {
$.console.log('pointerup calling updatePointerCaptured() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
updatePointerCaptured( tracker, gPoint, false );
}
} }
} }
@ -2732,6 +2761,7 @@
*/ */
function onPointerCancel( tracker, event ) { function onPointerCancel( tracker, event ) {
//$.console.log('pointercancel ' + (tracker.userData ? tracker.userData.toString() : '')); //$.console.log('pointercancel ' + (tracker.userData ? tracker.userData.toString() : ''));
$.console.log('pointercancel ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
var gPoint = { var gPoint = {
id: event.pointerId, id: event.pointerId,
@ -2770,6 +2800,7 @@
* @returns {Number} Number of gesture points in pointsList. * @returns {Number} Number of gesture points in pointsList.
*/ */
function startTrackingPointer( pointsList, gPoint ) { function startTrackingPointer( pointsList, gPoint ) {
//$.console.log('startTrackingPointer *** ' + pointsList.type + ' ' + gPoint.id.toString());
gPoint.speed = 0; gPoint.speed = 0;
gPoint.direction = 0; gPoint.direction = 0;
gPoint.contactPos = gPoint.currentPos; gPoint.contactPos = gPoint.currentPos;
@ -2794,6 +2825,7 @@
* @returns {Number} Number of gesture points in pointsList. * @returns {Number} Number of gesture points in pointsList.
*/ */
function stopTrackingPointer( tracker, pointsList, gPoint ) { function stopTrackingPointer( tracker, pointsList, gPoint ) {
//$.console.log('stopTrackingPointer *** ' + pointsList.type + ' ' + gPoint.id.toString());
var listLength; var listLength;
var trackedGPoint = pointsList.getById( gPoint.id ); var trackedGPoint = pointsList.getById( gPoint.id );
@ -3271,14 +3303,14 @@
startTrackingPointer( pointsList, gPoint ); startTrackingPointer( pointsList, gPoint );
} }
pointsList.addContact();
//$.console.log('contacts++ ', pointsList.contacts);
if ( !eventInfo.preventGesture && !eventInfo.defaultPrevented ) { if ( !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
eventInfo.shouldCapture = true; eventInfo.shouldCapture = true;
eventInfo.shouldReleaseCapture = false; eventInfo.shouldReleaseCapture = false;
eventInfo.preventDefault = true; eventInfo.preventDefault = true;
pointsList.addContact();
//$.console.log('contacts++ ', pointsList.contacts);
if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) { if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) {
$.MouseTracker.gesturePointVelocityTracker.addPoint( tracker, gPoint ); $.MouseTracker.gesturePointVelocityTracker.addPoint( tracker, gPoint );
} }
@ -3419,6 +3451,9 @@
updateGPoint = gPoint; updateGPoint = gPoint;
} }
pointsList.removeContact();
//$.console.log('contacts-- ', pointsList.contacts);
if ( !eventInfo.preventGesture && !eventInfo.defaultPrevented ) { if ( !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
if ( wasCaptured ) { if ( wasCaptured ) {
// Pointer was activated in our element but could have been removed in any element since events are captured to our element // Pointer was activated in our element but could have been removed in any element since events are captured to our element
@ -3426,9 +3461,6 @@
eventInfo.shouldReleaseCapture = true; eventInfo.shouldReleaseCapture = true;
eventInfo.preventDefault = true; eventInfo.preventDefault = true;
pointsList.removeContact();
//$.console.log('contacts-- ', pointsList.contacts);
if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) { if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) {
$.MouseTracker.gesturePointVelocityTracker.removePoint( tracker, updateGPoint ); $.MouseTracker.gesturePointVelocityTracker.removePoint( tracker, updateGPoint );
} }
@ -3588,11 +3620,8 @@
updateGPoint.currentPos = gPoint.currentPos; updateGPoint.currentPos = gPoint.currentPos;
updateGPoint.currentTime = gPoint.currentTime; updateGPoint.currentTime = gPoint.currentTime;
} else { } else {
// Initialize for tracking and add to the tracking list (no pointerover or pointerdown event occurred before this) // Should never get here, but due to user agent bugs (e.g. legacy touch) it sometimes happens
gPoint.captured = false; // Handled by updatePointerCaptured() return;
gPoint.insideElementPressed = false;
gPoint.insideElement = true;
startTrackingPointer( pointsList, gPoint );
} }
eventInfo.shouldCapture = false; eventInfo.shouldCapture = false;

8
src/navigator.js
View File

@ -167,7 +167,7 @@ $.Navigator = function( options ){
style.zIndex = 999999999; style.zIndex = 999999999;
style.cursor = 'default'; style.cursor = 'default';
}( this.displayRegion.style, this.borderWidth )); }( this.displayRegion.style, this.borderWidth ));
$.setElementPointerEventsNone( this.displayRegion ); $.setElementPointerEvents( this.displayRegion, 'none' );
$.setElementTouchActionNone( this.displayRegion ); $.setElementTouchActionNone( this.displayRegion );
this.displayRegionContainer = $.makeNeutralElement("div"); this.displayRegionContainer = $.makeNeutralElement("div");
@ -175,7 +175,7 @@ $.Navigator = function( options ){
this.displayRegionContainer.className = "displayregioncontainer"; this.displayRegionContainer.className = "displayregioncontainer";
this.displayRegionContainer.style.width = "100%"; this.displayRegionContainer.style.width = "100%";
this.displayRegionContainer.style.height = "100%"; this.displayRegionContainer.style.height = "100%";
$.setElementPointerEventsNone( this.displayRegionContainer ); $.setElementPointerEvents( this.displayRegionContainer, 'none' );
$.setElementTouchActionNone( this.displayRegionContainer ); $.setElementTouchActionNone( this.displayRegionContainer );
viewer.addControl( viewer.addControl(
@ -246,8 +246,8 @@ $.Navigator = function( options ){
// pointer capture works on touch devices // pointer capture works on touch devices
//TODO an alternative is to attach the new MouseTracker to this.canvas...not //TODO an alternative is to attach the new MouseTracker to this.canvas...not
// sure why it isn't already (see MouseTracker constructor call above) // sure why it isn't already (see MouseTracker constructor call above)
$.setElementPointerEventsNone( this.canvas ); $.setElementPointerEvents( this.canvas, 'none' );
$.setElementPointerEventsNone( this.container ); $.setElementPointerEvents( this.container, 'none' );
this.addHandler("reset-size", function() { this.addHandler("reset-size", function() {
if (_this.viewport) { if (_this.viewport) {

7
src/openseadragon.js
View File

@ -1911,14 +1911,15 @@ function OpenSeadragon( options ){
/** /**
* Sets the specified element's pointer-events style attribute to 'none'. * Sets the specified element's pointer-events style attribute to the passed value.
* @function * @function
* @param {Element|String} element * @param {Element|String} element
* @param {String} value
*/ */
setElementPointerEventsNone: function( element ) { setElementPointerEvents: function( element, value ) {
element = $.getElement( element ); element = $.getElement( element );
if ( typeof element.style.pointerEvents !== 'undefined' ) { if ( typeof element.style.pointerEvents !== 'undefined' ) {
element.style.pointerEvents = 'none'; element.style.pointerEvents = value;
} }
}, },

6
src/referencestrip.js
View File

@ -196,7 +196,7 @@ $.ReferenceStrip = function ( options ) {
element.style.styleFloat = 'left'; //IE element.style.styleFloat = 'left'; //IE
element.style.padding = '2px'; element.style.padding = '2px';
$.setElementTouchActionNone( element ); $.setElementTouchActionNone( element );
$.setElementPointerEventsNone( element ); $.setElementPointerEvents( element, 'none' );
this.element.appendChild( element ); this.element.appendChild( element );
@ -458,8 +458,8 @@ function loadPanels( strip, viewerSize, scroll ) {
} ); } );
// 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
$.setElementPointerEventsNone( miniViewer.canvas ); $.setElementPointerEvents( miniViewer.canvas, 'none' );
$.setElementPointerEventsNone( miniViewer.container ); $.setElementPointerEvents( miniViewer.container, 'none' );
// We'll use event delegation from the reference strip element instead of // We'll use event delegation from the reference strip element instead of
// handling events on every miniViewer // handling events on every miniViewer
miniViewer.innerTracker.setTracking( false ); miniViewer.innerTracker.setTracking( false );

2
src/viewer.js
View File

@ -408,7 +408,7 @@ $.Viewer = function( options ) {
// Overlay container // Overlay container
this.overlaysContainer = $.makeNeutralElement( "div" ); this.overlaysContainer = $.makeNeutralElement( "div" );
$.setElementPointerEventsNone( this.overlaysContainer ); $.setElementPointerEvents( this.overlaysContainer, 'none' );
$.setElementTouchActionNone( this.overlaysContainer ); $.setElementTouchActionNone( this.overlaysContainer );
this.canvas.appendChild( this.overlaysContainer ); this.canvas.appendChild( this.overlaysContainer );