i've gotten myself big , weird position. use vivagraph js drawing conceptual graphs in browser. specific implementation using, relies on svg, , main graph dom element svg.
during creation of edges between nodes, wrote small piece of code using paper.js uses canvas html5. in fact, hacked source code provided vektor.js , changed listen ctrl+mousedown events.
those 2 elements, svg graph , canvas, overlap , have same dimensions. graph has nodes , edges manipulated, listen mouse , keyboard events, , sadly canvas.
in fact, reason using canvas, wanted draw line (a vector or edge or arc) during mouse-movement, show user edge being created be, before created edge in graph.
i not using svg (yes, know, should doable) , paper.js made extremely easy me.
sadly, depending of order dom elements displayed, either canvas captures events, leaving graph useless, or graph captures events, leaving canvas useless.
is there way add transparency both dom elements?
the event listener graph, built vivagraphjs, , event listener paper vertex, built paper.js
ideally, have graph on-top, capture events, , propagate them canvas, arrows drawn. have feeling should doable, either via pure javascript, or using jquery.
so far, events captured in graph this:
var graphics = viva.graph.view.svggraphics(); /// other stuff graphics.node( function( node ) { var ui = viva.graph.svg('g' ).attr('width', nodesize ) .attr('height', nodesize ) // position node, add text, etc, etc... $( ui ).mousedown( function( event ) { event.preventdefault(); if ( event.ctrlkey ) { if ( ctrl_mouse ) { createedge( ctrl_mouse, node.id ); ctrl_mouse = null; // remove temporary arrow canvas - graph has permanent edge } else if ( !ctrl_mouse ) { ctrl_mouse = node.id; // start drawing temporary arrow on canvas } } all takes place in 1 file graph.js in file edge.js, setup event listeners , way vector drawn. i've added jsfiddle sadly won't run there (i guessing keyboard events may not propagated properly?).
the problem paper.js has own event listeners:
function onmousedown( event ) function onkeyup( event ) function onmousemove(event) obviously events have equivalent in pure javascript , jquery, ones capture in vivagraphjs or jquery cannot propagated paperjs, since different objects.
so, can somehow (preferably using pure javascript, jquery work) emulate or send events paper.js?
since nobody answered, , guessing due specific nature of question, stumbled upon correct answer on post here in stack overflow. weirdly enough not accepted correct answer.
the poster suggested 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); // ... , in webkit dispath same event without copying it. eh. }; this worked me, , thing worked. tried other libraries found on github supposedly forward events, didn't work.
