jsPlumb connecting raphael element's

[ksentini habib]

I used raphael.js  to draw some element's, and now I want to connect them, 

how to connect raphael elements with jsplumb ? 

For example, in the JSFiddle below :  http://jsfiddle.net/9byGp/160/habib,  I'm trying to create connections between 2 circles, but I can't, because the circles have no id,

 i can't use this : 

    jsPlumb.connect({source:"id1", target:"id2"})

[Simon Porritt]

you don't need ids to join elements. you can pass the elements to the connect call.

[ksentini habib]

[Simon Porritt]

it depends what raphael is returning for that 'circle' call. is it an element? it doesn't look like it is.

[ksentini habib]

Le jeudi 27 février 2014 22:53:46 UTC+1, simon....@gmail.com a écrit :

it depends what raphael is returning for that 'circle' call. is it an element? it doesn't look like it is.

yes raphael return an element, i try also circle.node ,  " Gives you a reference to the DOM object, so you can assign event handlers or just mess around "

[Simon Porritt]

if you update the fiddle i can take a look.  but if circle.node is really a DOM element then it should work.

[ksentini habib]

Le jeudi 27 février 2014 23:08:33 UTC+1, simon....@gmail.com a écrit :

if you update the fiddle i can take a look.  but if circle.node is really a DOM element then it should work.

it' work , but it does not give the expected results : 

[Simon Porritt]

without the code i am unable to help you too much.

have you set a container?

[ksentini habib]

Le jeudi 27 février 2014 23:17:11 UTC+1, simon....@gmail.com a écrit :

without the code i am unable to help you too much.

have you set a container?

this is my code : 

jsPlumb.ready(function() {

jsPlumb.Defaults.Container = "main";

var paper = Raphael('main');

    var circle1 = paper.circle(140, 110, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });

var circle2 = paper.circle(400, 180, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });

jsPlumb.connect({

    source:circle1.node,

    target:circle2.node,

    paintStyle:{ lineWidth:10, strokeStyle:'rgba(0, 0, 200, 0.5)' },

    anchors:["Right", "Left"],

});

}); 

[Simon Porritt]

i mean the code running somewhere. can you not put this in a fiddle?

[ksentini habib]

Le jeudi 27 février 2014 23:37:59 UTC+1, simon....@gmail.com a écrit :

i mean the code running somewhere. can you not put this in a fiddle?

sorry ,but i have some prbl with fiddle , this is my test project :  

[Simon Porritt]

i havent the time to unzip and deploy rars from people.  sorry.  you probably just need to include jsplumb as an external dependency in jsfiddle, is that the issue?

[Simon Porritt]

nevermind, i put it in:

http://jsfiddle.net/9byGp/165/

yes, so it's not really looking awesome. i don't know why off the top of my head; i know jsPlumb can connect svg elements without a problem, though, so something odd is happening. i will try to look at this later.

[Simon Porritt]

...i see now.  i should have noticed this before. you can't connect the individual svg elements, as jquery doesn't know their offset, and jsplumb uses jquery's offset function to find out where things are.

here's a fiddle in which i created the svg nodes using jsplumb (not documented, but jsplumb can do this for you easily; you don't need raphael):

http://jsfiddle.net/9byGp/172/

you'll see the same problem with the jsplumb version.  but...wait 5 minutes.

[Simon Porritt]

in this fiddle i've done a jsplumb version:

http://jsfiddle.net/9byGp/183/

in which what is connected are the svg elements.  you'll see there's a few hoops to jump through but you could move that into a helper method. one thing you might notice is that i had to account for the stroke width in the size of the svg element, and in the location of the center of each circle.

[ksentini habib]

thank you very much for your help and attention, but the problem that already i prepared a loy of  components with raphael, but apparently I made a bad technical choice. 

[Simon Porritt]

well i don't think Raphael is a bad technical choice for drawing svg, it's just a bummer that jQuery cannot get the offset of the circle elements (same goes for other svg elements, like rect, path etc). From memory, the problem is that the offsetLeft and offsetTop properties are set to 0, and this is what jQuery stumbles over.

what other sorts of elements are you connecting? rects? anything else?

[ksentini habib]

Le vendredi 28 février 2014 09:00:59 UTC+1, simon....@gmail.com a écrit :

well i don't think Raphael is a bad technical choice for drawing svg, it's just a bummer that jQuery cannot get the offset of the circle elements (same goes for other svg elements, like rect, path etc). From memory, the problem is that the offsetLeft and offsetTop properties are set to 0, and this is what jQuery stumbles over.

what other sorts of elements are you connecting? rects? anything else?

basically I tried to connected  rects and ellipses : 

for exemple i use this to draw a clock: 

_drawClock: function(cx, cy, width, height){

var circle = this.g.ellipse(cx, cy, 1, 1).attr({stroke:"none", fill: Color.get(232, 239, 241)});

//var c = this.g.ellipse(cx, cy, width, height).attr({stroke:"none", fill: Color.red});

//x = cx - width/2;

//y = cy - height/2;

var clock = this.g.path(

/* outer circle */ "M15.5,2.374 C8.251,2.375,2.376,8.251,2.374,15.5 C2.376,22.748,8.251,28.623,15.5,28.627c7.249-0.004,13.124-5.879,13.125-13.127C28.624,8.251,22.749,2.375,15.5,2.374z" +

/* inner circle */ "M15.5,26.623 C8.909,26.615,4.385,22.09,4.375,15.5 C4.385,8.909,8.909,4.384,15.5,4.374c4.59,0.01,11.115,3.535,11.124,11.125C26.615,22.09,22.091,26.615,15.5,26.623z" +

/*  9 */ "M8.625,15.5c-0.001-0.552-0.448-0.999-1.001-1c-0.553,0-1,0.448-1,1c0,0.553,0.449,1,1,1C8.176,16.5,8.624,16.053,8.625,15.5z" +

/*  8 */ "M8.179,18.572c-0.478,0.277-0.642,0.889-0.365,1.367c0.275,0.479,0.889,0.641,1.365,0.365c0.479-0.275,0.643-0.887,0.367-1.367C9.27,18.461,8.658,18.297,8.179,18.572z" +

/* 10 */ "M9.18,10.696c-0.479-0.276-1.09-0.112-1.366,0.366s-0.111,1.09,0.365,1.366c0.479,0.276,1.09,0.113,1.367-0.366C9.821,11.584,9.657,10.973,9.18,10.696z" +

/*  2 */ "M22.822,12.428c0.478-0.275,0.643-0.888,0.366-1.366c-0.275-0.478-0.89-0.642-1.366-0.366c-0.479,0.278-0.642,0.89-0.366,1.367C21.732,12.54,22.344,12.705,22.822,12.428z" +

/*  7 */ "M12.062,21.455c-0.478-0.275-1.089-0.111-1.366,0.367c-0.275,0.479-0.111,1.09,0.366,1.365c0.478,0.277,1.091,0.111,1.365-0.365C12.704,22.344,12.54,21.732,12.062,21.455z" +

/* 11 */ "M12.062,9.545c0.479-0.276,0.642-0.888,0.366-1.366c-0.276-0.478-0.888-0.642-1.366-0.366s-0.642,0.888-0.366,1.366C10.973,9.658,11.584,9.822,12.062,9.545z" +

/*  4 */ "M22.823,18.572c-0.48-0.275-1.092-0.111-1.367,0.365c-0.275,0.479-0.112,1.092,0.367,1.367c0.477,0.275,1.089,0.113,1.365-0.365C23.464,19.461,23.3,18.848,22.823,18.572z" +

/*  2 */ "M19.938,7.813c-0.477-0.276-1.091-0.111-1.365,0.366c-0.275,0.48-0.111,1.091,0.366,1.367s1.089,0.112,1.366-0.366C20.581,8.702,20.418,8.089,19.938,7.813z" +

/*  3 */ "M23.378,14.5c-0.554,0.002-1.001,0.45-1.001,1c0.001,0.552,0.448,1,1.001,1c0.551,0,1-0.447,1-1C24.378,14.949,23.929,14.5,23.378,14.5z" +

/* arrows */ "M15.501,6.624c-0.552,0-1,0.448-1,1l-0.466,7.343l-3.004,1.96c-0.478,0.277-0.642,0.889-0.365,1.365c0.275,0.479,0.889,0.643,1.365,0.367l3.305-1.676C15.39,16.99,15.444,17,15.501,17c0.828,0,1.5-0.671,1.5-1.5l-0.5-7.876C16.501,7.072,16.053,6.624,15.501,6.624z" +

/*  9 */ "M15.501,22.377c-0.552,0-1,0.447-1,1s0.448,1,1,1s1-0.447,1-1S16.053,22.377,15.501,22.377z" +

/*  8 */ "M18.939,21.455c-0.479,0.277-0.643,0.889-0.366,1.367c0.275,0.477,0.888,0.643,1.366,0.365c0.478-0.275,0.642-0.889,0.366-1.365C20.028,21.344,19.417,21.18,18.939,21.455z" +

"");

clock.attr({fill: Color.black, stroke: "none"});

//clock.transform("t " + (cx-29.75/2) + " " + (cy-29.75/2));

//clock.transform("...s 0.85");

//clock.transform("...s " + .85 + " " + .85);

clock.transform("t " + (-2.374) + " " + (-2.374) );

clock.transform("...t -" + (15.5-2.374) + " -" + (15.5-2.374) );

clock.transform("...s " + 1*(width/35) + " " + 1*(height/35));

clock.transform("...T " + cx + " " + cy);

//clock.transform("t " + (cx-width/2) + " " + (cy-height/2));

circle.attr("rx", clock.getBBox().width/2);

circle.attr("ry", clock.getBBox().height/2);

//return circle

}

[Simon Porritt]

all is not lost..you could still make this work.  it's not massively pretty but it can be done. you need to override the getOffset and getSize functions, and figure the maths out for yourself.  

http://jsfiddle.net/RpCv4/11/

in this example i've tested for a 'circle' element and then figured out where its top/left would be relative to its parent svg, then added those values to the svg's offset. for a 'rect' element you could use "x" and "y"; for an 'ellipse' you use cx/cy and (i think) rx/ry.

anyway. like i said - not pretty. but it's an option if you need it.  

note also in that fiddle i had to set a container. this is recommended in jsplumb; i used your drawing div.

[Simon Porritt]

here's a more robust version.

http://jsfiddle.net/RpCv4/24/

i might even put this into jsplumb 1.6.0 in fact. or an optional plugin to it or something.

[ksentini habib]

[ksentini habib]

very nice :D , but the drag dosen't work correctly 

 

[Simon Porritt]

i've left that as an exercise.

[Simon Porritt]

...it will be painful.  you will have to do the whole thing manually.

[ksentini habib]

Le vendredi 28 février 2014 09:48:04 UTC+1, simon....@gmail.com a écrit :

...it will be painful.  you will have to do the whole thing manually.

ok, thank you very much, Mr :)  

[Simon Porritt]

 can raphael make its shapes draggable for you?

[ksentini habib]

Le vendredi 28 février 2014 09:51:53 UTC+1, simon....@gmail.com a écrit :

 can raphael make its shapes draggable for you?

no  the drag  fonctionality dosent work .

[Simon Porritt]

you mean you are using jsPlumb.draggable?  or $(element).draggable() ?  or some raphael draggable function?

[ksentini habib]

Le vendredi 28 février 2014 09:59:32 UTC+1, simon....@gmail.com a écrit :

you mean you are using jsPlumb.draggable?  or $(element).draggable() ?  or some raphael draggable function?

no i use the jsPlumb one :  $(element).draggable() .

[Simon Porritt]

thats not the jsPlumb one. that's jquery.  jsPlumb.draggable is the jsPlumb one.

neither of them will work, though, as what they do is they update the left/top properties of the element that is being dragged.  svg elements are positioned using different attributes; the ones i read in the example i sent you, like cx/cy, x, y.

raphael does support dragging...i found this demo:

http://raphaeljs.com/touches.html

so you can use it with jsplumb like this:

http://jsfiddle.net/RpCv4/31/

i have only done circles. you will have to do the other element types.

--
You received this message because you are subscribed to the Google Groups "jsPlumb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Simon Porritt

tel             +61 (0) 459 762 779

skype        simon.porritt

[ksentini habib]

thank you Simon :D 

[Simon Porritt]

pas de problème.  bonne chance!

[si...@jsplumbtoolkit.com]

UPDATE:

in case anyone stumbles across this, a few things have changed in 1.6.x. Here's an updated fiddle, showing connections and circle dragging: 

http://jsfiddle.net/RpCv4/37/