Jsplumb 隐藏除 1 之外的所有连接器

Question

我正在使用 Jsplumb 来设计工作流程。一些工作流程可能非常复杂，并且多个连接器可能会导致难以确定哪个连接器连接到哪个任务。为了解决此问题/显示指南，我想在单击连接时隐藏所有连接器并仅显示单击的连接。

我添加连接器的代码是这样的：

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

sn-p 以上将隐藏所有连接。下面是它如何适合您的代码。

 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

http://jsplumbtoolkit.com/apidocs/classes/Connection.html#method_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);
                });

不知何故，简单地使用切换不起作用。

谢谢

Answer 4

在当前版本中，有连接和端点的查询方法，所以不需要循环，

并且返回值是一个支持您可以在 Endpoint 上执行的大多数操作的对象。

在此处查看文档：http://jsplumb.github.io/jsplumb/querying.html

例如，隐藏所有连接：

jsPlumb.select().setVisible(false);