overlapping Paper.JS (HTML5) Canvas and VivaGraphJS(SVG) Graph: Capturing Events

Question

I've gotten myself into a big and weird position. I use VivaGraph JS for drawing Conceptual Graphs in the browser. The specific implementation I am using, relies on SVG, and thus my main graph DOM element is an SVG.

During the creation of Edges between nodes, I wrote a small piece of code using Paper.JS which uses canvas from HTML5. In fact, I hacked into the source code provided by vektor.js and simply changed it to listen to CTRL+MouseDown events.

Those two elements, the svg graph and canvas, overlap and have exactly the same dimensions. The graph has nodes and edges manipulated, which listen to mouse and keyboard events, and sadly so does my canvas.

In fact, the reason for using the canvas, was that I wanted to draw a line (a vector or edge or arc) during the mouse-movement, to show to the user what the edge being created would be, before I actually created that edge in the graph.

I could not do this using SVG (Yes, I know, it should be doable) and Paper.js made it extremely easy for me.

Sadly, depending of the order those DOM elements are displayed, either the canvas captures the events, leaving the graph useless, or the graph captures all events, leaving the canvas useless.

Is there some way to add transparency to both DOM elements?

The event listener for the graph, is built into VivaGraphJS, and the event listener for the Paper Vertex, is built into Paper.JS

Ideally, I would like to have the graph on-top, capture the events, and then propagate them back to the canvas, so that the arrows are drawn. I have the feeling that this should be doable, either via pure JavaScript, or by using jQuery.

So far, the events captured in the graph like this:

var graphics = Viva.Graph.View.svgGraphics();
/// some other stuff
graphics.node( function( node )
{
   var ui = Viva.Graph.svg('g' ).attr('width', nodeSize )
                                .attr('height', nodeSize )
    // Position the node, add its text, etc, etc...

    $( ui ).mousedown( function( event ) 
    {
         event.preventDefault();           
         if ( event.ctrlKey )
         {
             if ( ctrl_mouse )
             {
                 createEdge( ctrl_mouse, node.id );
                 ctrl_mouse = null;
                 // Remove the temporary arrow from canvas - the graph now has a permanent edge
             }
             else if ( !ctrl_mouse )
             {
                 ctrl_mouse = node.id;
                 // Start drawing a temporary arrow on canvas
             }
         }

All this takes place in one file graph.js In another file edge.js, I setup the event listeners and the way the vector is drawn. I've added it into jsfiddle but sadly it won't run there (I am guessing the keyboard events may not be propagated properly?).

The problem is that Paper.Js has its own event listeners:

function onMouseDown( event )
function onKeyUp( event )
function onMouseMove(event) 

Obviously those events have their equivalent in pure JavaScript and jQuery, but the ones I capture in VivaGraphJS or jQuery cannot be propagated to PaperJS, since they are different objects.

So, can I somehow (preferably by using pure JavaScript, but jQuery will also work) emulate or send those events to Paper.JS?

Answer 1

Since nobody answered, and I am guessing this is due to the very specific nature of my question, I stumbled upon the correct answer on another post here in stack overflow. Weirdly enough it was not accepted as the correct answer.

The poster suggested the following:

quickDelegate = function(event, target) {
            var eventCopy = document.createEvent("MouseEvents");
            eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
                event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
                event.shiftKey, event.metaKey, event.button, event.relatedTarget);
            target.dispatchEvent(eventCopy);
            // ... and in webkit I could just dispath the same event without copying it. eh.
        };

This worked for me, and it was the only thing that worked. I tried other libraries I found on github which supposedly forward events, but they didn't work.