Question

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

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

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

我能够绑定click事件并获得连接，但此时我迷失了。

  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);
 });

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

4 个答案: