隐藏除1以外的所有连接器

Question

我正在使用。有些工作流可能非常复杂，而多个连接器可能会使您很难确定哪个连接器连接到哪个任务。为了修复这个/显示一个指南，我希望在单击连接时隐藏所有连接器，并且只显示单击的连接。

我添加连接器的代码如下所示：

//添加任务函数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;
        }

我能够绑定单击事件并获得连接，但我在这一点上迷路了。

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

这个问题可能与jsPlumb: How do I select a specific connector有关。

但是，我想在这种情况下我想做的是一种选择相反的情况.

任何建议都非常欢迎..。

谢谢

Answer 1

我还没有对此进行测试，但我认为在这里的click事件方法中，您必须遍历所有的窗口元素并调用jsPlumb.hide() (参见http://jsplumbtoolkit.com/doc/miscellaneous-examples.html)。

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

然后，将选择的连接变为可见的：

connection.setVisible(true);

Answer 2

下面是一种更通用的方法：

$.each(jsPlumb.getAllConnections(), function(idx, connection) {
    connnection.setVisible(false);
});

上面的片段将隐藏所有连接。下面是它如何适合您的代码。

 jsPlumb.bind('click', function (conn, e) {
    $.each(jsPlumb.getAllConnections(), function(idx, connection) {
        connnection.setVisible(false);
    });
   conn.setVisible(true);
 });

相关博士

http://jsplumbtoolkit.com/doc/miscellaneous-examples.html

setVisible

Answer 3

对于那些可能遇到类似问题的人来说，这是我的最后一条代码：

 jsPlumb.bind('click', function (conn, e) {
                    $.each(jsPlumb.getAllConnections(), function (idx, connection) {
                        if (connection.isVisible()) {//hide
                            connection.setVisible(false);
                        } else {//show
                            connection.setVisible(true);
                        }
                    });
                    conn.setVisible(true);
                });

不知怎么的，简单地使用按钮就不管用了。

谢谢