Question

I have previously worked with Raphael, but I have returned to my project and decided to totally re-write it to improve performance and general code quality. Anyway, the application uses Raphael to create Mind Maps (If you have read my previous questions you will have more of an idea of the overall application).

So I create nodes on the canvas using paper.circle() etc and to avoid the unnecessary work of me using .drag() I decided to use the Raphael ZPD plugin. The plugin is far too complicated for me to fully understand, but I intend to edit it very slightly. I would like to store the active node in a variable _node. To do this I thought it would be as simple as getting the evt.target and assigning it, but apparently it’s not.

Here is part of the plugin (The bit where I think the assignment should go):

/**
 * Handle mouse button release event.
 */
me.handleMouseUp = function(evt) {
    if (evt.preventDefault)
        evt.preventDefault();

    evt.returnValue = false;

    var svgDoc = evt.target.ownerDocument;

    if ((me.state == 'pan' && me.opts.pan) || (me.state == 'move' && me.opts.drag)) {
        // Quit pan mode
        me.state = '';
    }
};

When using alert(evt.target); (when clicking a circle) I am given:

[object SVGCircleElement]

which implies that evt.target is getting the individual element (as it changes for other shapes) but then trying to manipulate _node after assignment fails. I get an error message of:

_node.attr is not a function

(I attempted to change the attr() as this was the simplest function).

I have tried many variations using node, evt.target, evt.currentTarget etc, but I’m sure I am just missing something stupid with evt.target because it produces the correct output on alert.

I understand that me. is defined elsewhere in the code so please view the link above if you need to (seems better than posting the full plugin here).

I’d appreciate any help that you can give.

Thank you.

UPDATE: I’m now 100% certain that it is evt.target that I should be storing in _node but it would seem that there is no direct link between SVG, DOM and Raphael. Any ideas on how I could link the SVG element back to Raphael?

Answer 1

I started using this plugin last week, and have run into the same issue.

I’m able to link the SVG shape back to the raphael handle to the shape.

Basically, you first have to maintain a pointer to the raphael paper object that’s tied to the zpd plugin object. I do this by creating a raphPaper declaration after the var opts = {…} line

var raphPaper = null;

So that raphPaper object will be available like the opts object is.

When raphael creates a shape, it assigns two variables (that I’ve found): .raphael and .raphaelid
.raphael is a boolean telling us whether or not the SVG shape was created by raphael, and .raphaelid gives us the raphael internal id for the SVG shape. So, to get the raphael element, we just use getById on our paper object (raphPaper).

if(evt.target.raphael){
    var raphShp = raphPaper.getById(evt.target.raphaelid);
}

So for your problem, you just have to assign raphShp to _node or whatever variable you want to access.