Overlays ids ( Am I missing something )

[Riy]

Hi,

I am new to this awesome library. I am creating my first flowchart diagram with some overlay labels on it. Now I want to animate properties of the labels but, it seams that, the Ids I gave to labels just get removed and replaced as jsPlumb_1_1..2..3... so on. Below is my code and the generated HTML code. I am using Google chrome's developer tool to view the HTML.

================== JS Code =================

jsPlumb.connect({

source:"StartCircle",

endpoints: [ [ "Dot", {radius:20,stroke:"black"} ]],

connector:"Straight", 

target:"NextNode", 

endpoint:"Blank",

anchor:["TopCenter"],

paintStyle:{ 

lineWidth:2,

strokeStyle:"black",

},

overlays:[

                [ "Label", 

{ 

label:"Next Node", 

cssClass:"arrowTitle", 

id:"NextNodeLabel"

}

]

]

});

============= HTML Generated Code =============

<div id="StartCircle" style="position: absolute; left: 315px; top: 27px; width: 200px;"></div>

<div id=" NextNode "  class="nodeTitle" style="position: absolute; left: 315px; top: 123px; width: 186px">

NOT STARTED</div>

<div style="position: absolute; left: 364.5px; top: 60.999999999999986px; " class="_jsPlumb_overlay arrowTitle" id="jsPlumb_1_1">Order Received</div>

============================================

If you see closely, you can see that the class I am specifying into the label is there but not an id. Can anybody suggest me what am I doing wrong ? or is it like this way. 

Another interesting thing is when I add event to the overlay and try to display the id then it shows correct id but there's nothing in HTML. I am stuck please help. 

thanks.

[Simon Porritt]

This is because the 'id' of a label is internal to jsPlumb, and does not get written as the label's id in the DOM. You can use the 'getElement' function on a label to get the DOM element:

someConnection.getLabel("NextNodeLabel").getElement();

[Wojciech Makowiecki]

For me it works only when I replaced getLabel by getOverlay in your answer.

-- 

Wojciech

Many thanks for this great library!

[Wojciech Makowiecki]

Is it possible to get the DOM id without specifing internal jsPlumb's label id if the connection has only a single label ?

Right now, first I need to get the jsPlumb's internal ID: someConnection.overlays[1].id (BTW, overlays[0] is the Arrow)

and then use it in someConnection.getOverlay   like this: 

someConnection.getOverlay(someConnection.overlays[1].id).getElement().id;

Many thanks,

Wojciech

[Simon Porritt]

oh yes that's a typo - it should have said getOverlay("whatever").getElement()

if you already have this:

someConnection.overlays[1].id

you can just do this:

someConnection.overlays[1].getElement()

[Wojciech Makowiecki]

Thanks a lot for the answer,

I was thinking more of a way of avoiding using [1] at all, 

as this could(?) change to e.g. [2] when I add other overlays later (like arrows)

so they become [1] instead, and it may be easy to forget updating [1] to [2]

as I may use this construction in many places in the code.

Is there a way to reference label id without using .overlays[1] ?

[Simon Porritt]

yes it's true that it's hacky to reference by index, and in fact that array is not exposed as part of the API and could (should) be hidden in a later release.

so did you use "label" on a connection, like:

jsPlumb.connect({source:"foo", target:"bar", label:"hello"})

or something like that, rather than

jsPlumb.connect({source:"foo", target:"bar", overlays:["Label", {label:"hello"}]})

?

[Wojciech Makowiecki]

I'm using the later syntax you mentioned:

jsPlumb.connect({source:"foo", target:"bar", overlays:["Label", {label:"hello"}]})

[Wojciech Makowiecki]

Actually I'd ALSO like to use the following syntax: 

myconnection.addOverlay(["Label",{cssClass:"label", location:0.4, id: "ilabelid" + counter}]);
(when adding Label after the connection has been made)

and in this case the way with [1] or [0] doesn't seem to work at all

even though it seems that the Label is added in the same spot as with this syntax:

jsPlumb.connect({source:"foo", target:"bar", overlays:["Label", {label:"hello"}]}) 

[Wojciech Makowiecki]

Correction, I had a bug, addOverlay works as expected.