Jsplumb Скрыть все соединители, кроме 1

Я использую 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;
        }

Я могу связать событие щелчка и получить соединение, но в этот момент я теряюсь.

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

Этот вопрос, возможно, связан с jsPlumb: Как выбрать конкретный соединитель< /а>

Тем не менее, я думаю, что в этом случае я пытаюсь выбрать ситуацию обратного типа...

Любое предложение очень приветствуется...

Спасибо

jquery jsplumb

w2olves 09.06.2014 источник

Ответы (4)

arrow_upward
2
arrow_downward

Я не проверял это, но я думаю, что в имеющемся у вас методе события щелчка вам придется перебирать все элементы окна и вызывать jsPlumb.hide() (см. http://jsplumbtoolkit.com/doc/miscellaneous-examples.html).

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

Затем вы сделаете выбранное соединение видимым:

connection.setVisible(true);

Georgie 10.06.2014

comment

Я всегда нахожу удивительным, когда кто-то может писать код без тестирования, и он сразу же работает. Большое спасибо... Ваше предложение сработало. - w2olves; 10.06.2014

arrow_upward
2
arrow_downward

Вот более общий способ:

$.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

http://jsplumbtoolkit.com/apidocs/classes/Connection.html#method_setVisible

coding_idiot 10.06.2014

comment

@Coding_smart, это тоже работает и дает мне дополнительные крючки. - w2olves; 10.06.2014

arrow_upward
0
arrow_downward

Для тех, кто может оказаться в подобной ситуации, задавая тот же вопрос, это мой окончательный код:

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

Почему-то простое использование переключателя не сработало.

Спасибо

w2olves 10.06.2014

arrow_upward
0
arrow_downward

В текущих версиях есть методы запросов для соединений и конечных точек, поэтому нет необходимости в цикле,

а возвращаемое значение — это объект, который поддерживает большинство операций, которые вы можете выполнять на конечной точке.

См. документацию здесь: http://jsplumb.github.io/jsplumb/querying.html

Пример, скрыть все соединения:

jsPlumb.select().setVisible(false);

gblock 14.05.2019

Jsplumb Скрыть все соединители, кроме 1

Ответы (4)

Похожие вопросы