"pointerout" not fired while "pointerdown"

[Numa]

Hi there, 

it looks like the "pointerout" event is not fired while the mouse is clicked, is that expected?

How would I go about detecting when the mouse is dragged (and released) outside the canvas?

My canvas is in an iframe which is in an outside domain, so I can't send messages back and forth.

 

Any ideas?

[yuccai]

Maybe if the position your pointer is beyond your canvas dimension.

If your canvas is WxH, your callback associated to your onpointerup is :

function(evt) {
    if(evt.clientX > W || evt.clientY > H) {
        //you're out your canvas
    }
}

You may be sure that you click origin was on the canvas.

 

Here are some informations related to pointers event.

 

 

[Wingnut]

Cool, @yuccai!  Yeah, you don't need to look for pointerUp event on things off-iframe or off-iframeCanvas... if you monitor the client X/Y.  But, you won't be "dragging" any information gotten from pointDown evt over iframeCanvas.  In other words, you might know you are off-canvas, but you won't know what mesh (token) was dragged off canvas.  Information (What Numa calls messages) won't cross that border.  hmm.  I think Numa wants to get data across the border... but with iframe... that border is a STRONG one.

I started quite a test scene.

http://www.babylonjs-playground.com/#16MOW9#15

I forced an iframe (red background doc) into the canvasZone element of the playground (same container that holds renderCanvas).  The upper green document... is the local scene.

Lots of mess, lots of listeners.  Sorry for mess.  Tests:

1.  Click and hold-down top button, drag it onto white editor area, and drop (pointerUp).  Button reports "Editor Up"... because mainline code added pointerup event to jsEditor on lines 105-107.

2.  Do the same thing with lower button.  There is no JsEditor eventListener added by the iFramed doc.  It doesn't know jsEditor exists, nor does it know that mainline doc added a pointerUp listener to jsEditor element.  Again, the iFramed doc can't find jsEditor.  It can't ref things that are outside its tight scope.  So, no "editor up" seen anywhere... when pointerUp over editor.

So, yeah, all I have done... is POSSIBLY verify Numa's findings, and give us a playground to play-in.  A JsFiddle might be a better way to play with this.  If someone would like to convert it to a jsFiddle, that would be alright with me. 

Sorry that I wasn't able to find a miracle.  I'll keep thinking, and maybe do further tests... but... iframe is a tight box.  Be well, guys.

PS:  If anyone sees a wide-stretched top (green) document upon LOAD, that fixes itself after clicking RUN... that is caused by... um... canvasZone forced wide by over-wide iframe, and then... um...  hehe.  I have no idea WHAT causes all that. 

[Wingnut]

http://www.babylonjs-playground.com/#16MOW9#16

Oops, I forgot to re-activate pointerUP on editor area.    Now top button... etc etc.   Sorry.

[Numa]

Thanks everyone, it's fixed now   clientX/clientY did the trick. All I needed to detect was that the mouse was out so I could fire a mouse up event, no need for any babylon/mesh info.

@Wingnut Interesting test scene

here's the working code:

var OnPointerMove = function (e) {

    if (!pointerIsDown)
        return;

    if (e.clientX > engine.getRenderWidth() || e.clientY > engine.getRenderHeight() ||
        e.clientX < 0 || e.clientY < 0) {

        // Create pointerUp event
        var pointerUpEvent = document.createEvent("MouseEvents");
        pointerUpEvent.initMouseEvent("pointerup");
        
        canvas.dispatchEvent(pointerUpEvent);
    }
}

Also when I said "messages" I meant actual messages, that you can use to communicate between an iframe and its parent (but as I said I couldn't use that, as my iframes might end up on random domains and I can't authorize them manually one by one^^). Here's how they work: 

document.getElementById('myIframe').contentWindow.postMessage('myMessage', '*'); 

you then authorize on your iframe's page by checking the origin:

window.addEventListener('message', function(event) {
        // Check origin of the data
	if (~event.origin.indexOf('https://www.myFriendlyDomain.com'){
			
		// The data sent with postMessage is stored in event.data
		if (event.data === 'myMessage'){
			doSomething()
		}
	} else {
		// The data hasn't been sent from a trusted source, don't use it.
		return;
	}
});