Jsplumb Hide all connectors except 1

Question

I am using Jsplumb to Design Workflows. Some of the workflows can be extremely complex and the multiple connectors can make it difficult to figure out which connector is connected to which task. In order to fix this/show a guide, I would like to hide all connectors when a connection is clicked and only show the clicked connection.

My code for adding connectors is like this:

//Add a Task function addTask(id) {

            $('  <div class="window task node Btn Color-Light BR-3 BS-20  Engrave" id="' + id + '"' +
                //Append to Base HTML 
                ' data-nodetype="task" style="left:530px; top:530px; width:230px;">').appendTo('#' + htmlBase).html($(("#WfTask0"))[0].innerHTML);

            var taskSourceConnectorEndpoint = {
                isSource: true,
                isTarget: false,
                maxConnections: 1,
                anchor: [0.5, 1, 0, 1, 20, 0, "task_end endpoint"],

            };
            //Failure Anchor
            var leftDecisionConnectorEndpoint = {
                isSource: true,
                isTarget: false,
                maxConnections: -1,
                anchor: [0, 0.5, 0, 1, 18, 72, "left_dec_start startpoint"],
                paintStyle: { fillStyle: 'transparent', lineWidth: 5, },
                endpoint: ["Dot", { width: 25, height: 25 }],
                endpointStyle: { fillStyle: 'rgb(185,61,255)' },
                connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
                cornerRadius:50,
                connectorStyle: {
                    lineWidth: 3,
                    strokeStyle: "#B93DFF"
                },
                overlays: [
                    [
                        "Arrow", {
                            width: 10,
                            length: 10,
                            foldback: 1,
                            location: 1,
                            id: "arrow"
                        }
                    ]
                ]
            };

            //Success Anchor
            var rightDecisionConnectorEndpoint = {
                isSource: true,
                isTarget: false,
                maxConnections: -1,
                anchor: [1, 0.5, 1, 0, -16, 75, "right_dec_start startpoint"],
                paintStyle: { fillStyle: 'transparent', lineWidth: 5, },
                endpoint: ["Dot", { width: 25, height: 25 }],
                endpointStyle: {},
                connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
                //cssClass: "aRedEndpoint",
                connectorStyle: {
                    lineWidth: 3,
                    strokeStyle: "lightgreen"
                },
                overlays: [
                    [
                        "Arrow", {
                            width: 10,
                            length: 10,
                            foldback: 1,
                            location: 1,

                            id: "arrow"
                        }
                    ]
                ]
            };

            var taskTargetConnectorEndpoint = {
                isSource: false,
                isTarget: true,
                maxConnections: -1,
                anchor: [0.5, 0, 0, -1, 6.5, 11.7, "task_end endpoint "],
                paintStyle: { fillStyle: 'transparent' },
                endpoint: ["Rectangle", { width: 25, height: 25 }]
            };

            //Add Anchors to the Task
            jsPlumb.addEndpoint(
                $('#' + id),
                rightDecisionConnectorEndpoint
            );

            jsPlumb.addEndpoint(
                $('#' + id),
                leftDecisionConnectorEndpoint
            );

            jsPlumb.addEndpoint(
                $('#' + id),
                taskTargetConnectorEndpoint
            );

            jsPlumb.draggable($('#' + id));

            //Reposition Elements
            posY = +posY + +spacer;
            repositionElement(id, posX, posY);
         return id;
        }

I am able to bind the click event and get the connection but I am lost at that point.

  jsPlumb.bind('click', function (connection, e) {
                    //   $('._jsPlumb_connector').addClass('clsActiveConnector');
                });

This question is possibly related to jsPlumb: How do I select a specific connector

However, I think I am trying to do a select inverse type of situation in this case...

Any suggestion is very welcome...

Thanks

Answer 1

I haven't tested this, but I think that within the click event method that you have there, you will have to iterate through all window elements and call jsPlumb.hide() (see http://jsplumbtoolkit.com/doc/miscellaneous-examples.html).

$( ".window" ).each(function( index, item ) {
   jsPlumb.hide(item);
});

Then you would make the connection you selected visible:

connection.setVisible(true);