CreateJS Events to Javascript events

Question

I got two canvas elements layered ontop of each other. The top canvas is for UI and uses the createjs framework to do it's magic.

The other canvas element is based on the babylon js framework, to drawup some 3D magic.

My trouble is the communication between the layers. I have created a invisible rectangle on the UI layer that captures the mouse events, but they come in as CreateJS MouseEvents, and I need to convert them over to a HTML version to dispatch onto the 3D layer.

Anyone know what is the code I need to convert the createJS mouse event to an HTML mouse event? (no jquery please)

here is the idea in haxe code (at least the section that really matters):

private function initialize()
{
    _blocker = new Shape();
    _blocker.graphics.beginFill("#000000");
    _blocker.graphics.drawRect(0, 0, Container3D.WIDTH, Container3D.HEIGHT);
    _blocker.graphics.endFill();
    _blocker.alpha = 0.01;

    _blocker.addDblclickEventListener(onEvent);
    _blocker.addClickEventListener(onEvent);
    _blocker.addMousedownEventListener(onEvent);
    _blocker.addMouseoutEventListener(onEvent);
    _blocker.addMouseoverEventListener(onEvent);
    _blocker.addPressmoveEventListener(onEvent);
    _blocker.addPressupEventListener(onEvent);
    _blocker.addRolloutEventListener(onEvent);
    _blocker.addRolloverEventListener(onEvent);
}

private function onEvent(e:MouseEvent):Void
{
    /* need to convert the createjs mousevent to an html mouseevent here */
//var htmlMouseEvent:js.html.MouseEvent = convertToHtmlEvent(e);
        // and dispatch it on the other canvas
        my3DCanvas.dispatchEvent(htmlMouseEvent);
}

private function converToHtmlEvent(evToConvert):js.html.MouseEvent
{
   // do magic here
}

Thanks.

Answer 1

CreateJS events contain a reference to the native events that triggered them.

private function onEvent(e:MouseEvent):Void
{
    /* need to convert the createjs mousevent to an html mouseevent here */
//var htmlMouseEvent:js.html.MouseEvent = convertToHtmlEvent(e);
        // and dispatch it on the other canvas
        var htmlMouseEvent = e.nativeEvent;
        my3DCanvas.dispatchEvent(htmlMouseEvent);
}

Here is the documentation: http://createjs.com/docs/easeljs/classes/MouseEvent.html#property_nativeEvent

Hope that helps!