Connections are rendered in the Top left corner

[Tho mas]

Hello,

i hope i can find some help here.

I am fairly new to jsPlumb and i have a Problem.

After i add my connections to my elements, they are all rendered in the top left corner of the dialog: 

 If you watch closely, you can see some black pixels in the top left corner. these are my connections...

AS soon as i start dragging on of my items around, the connected connection is drawn. But only for the element i dragged around. 

Additionally, even IF the connection is displayed, my Continous-Anchor is ignored. Instead, the connections are always attached to the top left of my items:

What am i doing wrong?

Here is the Code i use for connecting the elements:

"jsPlumb.connect({" +
                           "source:\"" + (lastEvent[0] != null ? lastEvent[0] : "START-EVENT") + "\"," +
                           "target:\"" + map.get("eventname") + "\"," +
                           "paintStyle:{ stroke:\"black\", strokeWidth:2,  }," +
                           "overlays:[[\"Label\", { label:\""+ (connections.indexOf(map)+1) + "\", location:0.4}]]" +
                           "});"

Additionally, i have configured:

"<script>" +
"jsPlumb.setContainer(document.getElementById(\"diagramContainer\"));\n" +
"jsPlumb.Defaults.Anchor = \"Continuous\";\n" +
"jsPlumb.Defaults.Connector = \"Bezier\";\n" +
"jsPlumb.Defaults.Endpoint = \"Blank\";\n" +
"jsPlumb.Defaults.Overlays = [ [\"Arrow\" , { width:12, length:12, location:0.67 }] ];" +
"jsPlumb.ready(function() {" +
connectionJavascript[0] +
draggableJavascript[0] +
"});" +
"</script>"

Thanks.

[Simon Porritt]

It’s difficult to diagnose what your issue might be without seeing the app. You might like to put in a jsPlumb.repaintEverything() call after your init. As for the Continuous anchor issue, you haven’t actually set that with this code. You have to use

jsPlumb.importDefaults({
  Anchor:"Continuous"
etc
});

ie. you cannot set properties manually on the Defaults.

[Tho mas]

Even a repaintEverything did not make any difference. It looks like, for some reason, jsPlumb thinks all my elements are located in the top left corner and thats why it draws the connections there. And then, when i start dragging, it gets the correct location of the element. Is it possible that this has something todo with CSS?

[Simon Porritt]

it's difficult to say without seeing the app. why not put a breakpoint in the jsplumb code and see what it returns from its getOffset method.

[Tho mas]

I have another strange behaviour: If i Add all my elements to groups and then try to drag them out of the group they are in, everything suddenly works as expected.

I have made a short video where you can see this: https://drive.google.com/open?id=1xEdY3cGEUBSmil_RQhNYXyNDZTvBJv-m

I will also try to print out getOffset

[Tho mas]

It prints out 0,0 for each of my groups and my elements. But if i wait 5 seconds after the dialog is drawn and then print out the offset again, it will give me the correct value for my groups and elements.

On Tuesday, August 14, 2018 at 4:02:19 PM UTC+2, Tho mas wrote:

[Tho mas]

Well, this lead me to a quite dirty hack: If i wait 5seconds in the jsPlumb.ready-function, everything works as it should.

But what is the problem here? 

On Tuesday, August 14, 2018 at 4:02:19 PM UTC+2, Tho mas wrote:

[Dhatri Suresh]

Hi Thomas,

         I tried delaying it but it didnt work.can you please tell me exactly where should i use it? Please suggest.