Search code examples
javascriptcssjsplumb

JsPlumb How to change connection style from default to dashed?

Usually, the default paint style can be initialized in the ready method of jsPlumb. The connector line style is solid, but in some cases, the user hope to change it to dashed style. Firstly, the solid one is created and render on page, and then the style will be changed to dashed style when an event is triggered.

var connectorType = ["Flowchart", { stub: [2, 2], gap: 1, cornerRadius: 5, alwaysRespectStubs: true }]
    ,
    connectorPaintStyle = {
        strokeWidth: 2,
        stroke: "#61B7CF",
        joinstyle: "round",
        outlineStroke: "white",
        outlineWidth: 2,
        //dashstyle: "2 4"
    },
    connectorHoverStyle = {
        strokeWidth: 3,
        stroke: "#216477",
        outlineWidth: 5,
        outlineStroke: "white"
    },
    endpointHoverStyle = {
        fill: "#216477",
        stroke: "#216477"
    },
    sourceEndpoint = {
        endpoint: "Dot",
        paintStyle: {
            stroke: "#7AB02C",
            fill: "transparent",
            radius: 4,
            strokeWidth: 1
        },
        isSource: true,
        connector: connectorType,
        connectorStyle: connectorPaintStyle,
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        maxConnections: 100,                        //the limition of max connections
        dragOptions: {},
        overlays: [
            ["Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel",
                visible: false
               }
            ]
        ]
    },
    targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fill: "#7AB02C", radius: 4 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dragOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        overlays: [["Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible: false }]]
    };

enter image description here

I have tried to use connection setPaintStyle() and endpoint setPaintStyle, but it's not the desired way. After the method is called, the line will be blank, unless it is clicked once time, and then become to dashed style.

    var dashedType = {
        connector: "StateMachine",
        paintStyle: { stroke: "red", strokeWidth: 4 },
        hoverPaintStyle: { stroke: "blue" },
        dashstyle: "2 4"
    };

The connection setPaintStyle method called, and the connector will be blank.

connection.setPaintStyle(dashedType);

enter image description here

When the mouse clicked once, the connector will change to dash.

enter image description here

Solution

  • Have tried two days work, there is a solution. To use endpoint connectorStyle rather than connection style, and it need to call element repaint method after set dashstyle. The complete code is here:

    //the element varibale is gateway node

            instance.selectEndpoints({ source: element }).each(function (endpoint) {
            endpoint.connectorStyle.dashstyle = "2 4";
            instance.repaint(element);
        });