Connector Style not being applied to jsPlumb connector when created dynamically

Question

Update - 1

Here is my JSFiddle.

In this example. I have connected first two div on DOM load.

In this line of code

JSPlumb

jsPlumb.connect
            (
                {
                    source: 'A',
                    target: 'B',
                    anchors: ["RightMiddle", "LeftMiddle"],
                    paintStyle: { strokeStyle: "#ff9696", lineWidth: 8 },
                    connector: ["Flowchart", { curviness: 63}],
                    connectorStyle: [{
                        lineWidth: 3,
                        strokeStyle: "#5b9ada"
                    }],
                    hoverPaintStyle: { strokeStyle: "#2e2aF8", lineWidth: 8 }
                }
            );

I am passing the Connector Style.

Query - I want to show the source and target endpoints as Green and Ping. Right now it is showing blue.

Original

I recently took over a development left incomplete by some other developer. In the project we need to be able to draw connectors between 2 elements. For that the original developer used jsPlumb. The library is working fine and producing results when I manually create a connector. But now what I want to do is create a connector dynamically. Reading jsPlumb's documentation I tried to do it, but it is not producing the results that I want.

This is how it is when I create manually (notice the color and the arrow at the target element)

But if I create it automatically I don't get this color and arrow. This is the fiddle that I created for testing. What I am doing is calling jsPlumb.connect(); and passing the parameters.

jsPlumb.connect({
    source: "page-1",
    target: "page-2",
    anchors: [
        [1.06, 0.5, 0, 1],
        [-0.06, 0.5, 0, 0]
    ],
    endpoint: ["Dot", {
        radius: 4
    }],
    endpointStyle: {
        fillStyle: "#5b9ada"
    },
    setDragAllowedWhenFull: true,
    paintStyle: {
        fillStyle: "#5b9ada",
        lineWidth: 5
    },
    connector: ["Straight"],
    connectorStyle: [{
        lineWidth: 3,
        strokeStyle: "#5b9ada"
    }],
    connectorOverlays: [
        ["Arrow", {
            width: 10,
            length: 10,
            foldback: 1,
            location: 1,
            id: "arrow"
        }]
    ]
});

Can anyone point out where is the mistake?

Regards

Jehanzeb Malik

Solution 1

Since the jsPlumb documentation is imho a mess, I'm kinda surprised that this kind of question doesn't come up more often within stackoverflow. Here is what was amiss:

paintStyle.fillStyle doesn't seem to be around anymore... non of the demos use it, but the documentation still referes to it whenever paintStyle is defined within a connect-call. Strange, but strokeStyle does the job perfectly.

    paintStyle: {
        strokeStyle: "#5b9ada",
        lineWidth: 3
    },

What I would suggest beyond that (even though if you change that line, everything will work) is to call jsPlumb on jsPlumb.ready

    jsPlumb.bind("ready", function() { // your connection code here... });

See the updated fiddle: http://jsfiddle.net/p42Zr/5/

EDIT:

The question was changed between loading the page and my answer, which i didn't notice. The answer up until here deals with the ORIGINAL.

The problem with the other fiddle is a bit different, what happens is that jsPlumb creates new Endpoints on top of the already defined ones. There are two ways of changing that. Retrieve the endpoints from var myendpoint = jsPlumb.addEndpoint( ... ) and use this variable later on to connect them. The easier way in this case though is to add endpoint: ["Blank"] to the options. (EDIT) Setting the endpoint-Style to "Blank" means no endpoints will be drawn, which results in a connection and the two previously defined endpoints as wanted (/EDIT). See the updated fiddle: http://jsfiddle.net/XbcZv/1/

EDIT To answer a question which came up in the comments: How can I show the pointer-cursor on the connections?

Simply add:

._jsPlumb_connector {
    cursor: pointer;
}

/EDIT to your css. For css changes on Endpoints edit the css class _jsPlumb_endpoint.

Solution 2

Set endpoint's style may solve the problem.

Endpoint's connectorStyle is a top priority. So if you have set endpoint's connectorStyle, then your connector's paintstyle will not work.

jsplumb's set paint style source code in connector.js:

        this.setPaintStyle(this.endpoints[0].connectorStyle || 
                       this.endpoints[1].connectorStyle || 
                       params.paintStyle || 
                       _jsPlumb.Defaults.PaintStyle || 
                       jsPlumb.Defaults.PaintStyle, true);

Comments

[Jehanzeb.Malik]

@e2bady That fixes my color issue. Any hint as to why I am not getting an arrow head at the specified location?

[Sebastian van Wickern]

@Jehanzeb.Malik in my updated fiddle I can see an arrowhead... where else do you want one? maybe I can help somemore. jsfiddle.net/p42Zr/5

[Sebastian van Wickern]

@abcdefghi maybe I misunderstood your issue... didn't you just want to get rid of the blue endpoints in that fiddle? (Which is solved in jsfiddle.net/XbcZv/1, where I added endpoint: ["Blank"] to the connection parameters)

[Pankaj]

@e2bady I want to show there pink color for connected A circle And Green for B circle .

[Sebastian van Wickern]

if the further problem is that the connection is above the endpoints you can change that by adding a z-index... on connections you can add ConnectorZIndex : n on endpoints you will have to solve the issue with css.

[Pankaj]

@e2baby - Can you confirm that in JSFiddle in Div A and B there are blue circles ?

[Sebastian van Wickern]

@abcdefghi can't go into chat, I'm behind a firewall which doesn't allow that. In your original fiddle the endpoints (your circles) were blue, in the updated version I posted, they are ping/green, like they are supposed to. Just to be saved I forked the fiddle jsfiddle.net/PmzTW. I get off work in a couple of hours, if the issue still exists then, we can continue in a chat.

[Sebastian van Wickern]

@abcdefghi I have put the meaning of endpoint : ["Blank"] and how to change the cursor on connection-hovers to my answer.

[Jehanzeb.Malik]

@e2bady I totally missed the fiddle. I guess that solved my issue. Thanks alot for your time and effort.

[Pankaj]

I am getting error after adding the code for cursor pointer. My JSFiddle.

[Pankaj]

Is it possible to set the pointer at the pink line only? right now it is doing on outer part as well.

[Sebastian van Wickern]

That's happening because of the set z-indexes (well they aren't set, so it's in the order the elements are inserted) I set the indexes so the behaviour is as desired: jsfiddle.net/XbcZv/9

[Pankaj]

It is still showing the pointer in the area above the pink line in IE9

[Sebastian van Wickern]

Sorry, I can't really test that... microsoft makes that damn thing only for windows (I'm on a mac)... my suggestion is make it work for ie, but don't put to much effort into it, since a lot other stuff is not supported in ie... But I have one last thing you could try: Try setting jsPlumb.setRenderMode(jsPlumb.VML); which will perform better in ie...

[Pankaj]

Thanks for the help. +1 and +50

[Vicky Thakor]

@S.vanWickern Thanks. You made my day

[Yster]

You're a genius! It took me 3 days to find your post!