JsPlumb, созданный программным путем, скрывает конечную точку

Я пытаюсь сделать следующее, используя jsPlumb 1.3.16. 1. Добавьте конечные точки к двум div 2. Программно создайте соединение (см. ниже).

Проблема, с которой я сталкиваюсь, заключается в том, что соединение, похоже, создает свои собственные конечные точки, которые теперь скрывают исходные конечные точки. В результате я больше не могу создавать соединения с этих конечных точек. Похоже на проблему с z-индексом.

var connectorOptions = {    
    uniqueEndpoint:false,       
    maxConnections:-1,
    newConnection:true,     
    endpoint: ["Rectangle", {
        width: 15,
        height: 15
    }],
    endpointStyle: {
        fillStyle: "rgba(255,255,255,50)", 
        outlineColor: "#ccc", 
        outlineWidth: 1
    },
    setDragAllowedWhenFull: true,
    connector: ["Straight"],
    paintStyle: {
        strokeStyle: "#ec51bb", 
        lineWidth: 4
    },
    connectorStyle: {
        lineWidth: 4,
        fillStyle: "#ec51bb"
    },
    overlays: [
        ["Arrow", {
            width: 14,
            length: 14,
            foldback: 1,
            location: 1,
            id: "arrow"
        }]
    ]
};


var endpointOptions = {
    maxConnections:-1, 
    uniqueEndpoint:false,
    isSource:true, 
    isTarget:true, 
    endpoint:["Rectangle", {
        width:15,
        height:15,
        cssClass: "endPointStyle",
        hoverClass: "endPointHoverStyle"
    }], 
    setDragAllowedWhenFull:true,
    paintStyle:{
        strokeStyle: "#9f9f9f"
    },
    connectorStyle : {
        lineWidth: 4, 
        strokeStyle:"#ec51bb"
    },
    connector:[ "Straight"],
    connectorOverlays:[ 
        [ "Arrow", {
            width:14, 
            length:10, 
            foldback: 1,  
            location:1, 
            id:"arrow"
        } ], 
        [ "Label", {
            label:"", 
            id:"label"
        } ]
    ]
};


jsPlumb.addEndpoint(itemId1,{  anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions);
jsPlumb.addEndpoint(itemId2,{  anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions);

var anchors= [[ 0.5, -0.05, 0, 1, 0, -4 ], [ 0.5, -0.05, 0, 1, 0, -4 ]];

var newConnection = jsPlumb.connect({
    source: itemId1,
    target: itemId2,
    anchor: anchors
    },
    connectorOptions
);

javascript jsplumb
person checkmate711    schedule 11.01.2014    source источник
comment
Каково ваше заявление о создании связи между элементами? Вы можете попробовать параметр привязка при создании конечной точки и сделать ее непрерывной, чтобы конечные точки не перекрывались. anchor:"Continuous"   -  person MrNobody007    schedule 15.01.2014

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это. Теперь у каждого элемента есть 2 конечные точки, и вы можете использовать их для подключения к другим элементам без создания новых конечных точек. Вам нужно только добавить свойство maxConections в объявление конечной точки.

var windows = jsPlumb.getSelector(".chart-demo .window");
            for (var i = 0; i < windows.length; i++) {
                instance.addEndpoint(windows[i], {
                    uuid:windows[i].getAttribute("id") + "-bottom",
                    anchor:"Bottom",
                    maxConnections:-1
                });
                instance.addEndpoint(windows[i], {
                    uuid:windows[i].getAttribute("id") + "-top",
                    anchor:"Top",
                    maxConnections:-1
                });
            }

            instance.connect({uuids:["chartWindow3-bottom", "chartWindow6-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow1-bottom", "chartWindow2-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow1-bottom", "chartWindow3-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow2-bottom", "chartWindow4-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow2-bottom", "chartWindow5-top" ], overlays:overlays});
person MaxD    schedule 14.01.2014

arrow_upward
-2
arrow_downward

div ids ==> открыт, у каждого phone1 есть флип ep

<div class="w" id="opened">BEGIN<div class="ep"></div></div>
<div class="w" id="phone1">PHONE INTERVIEW 1<div class="ep"></div></div>

например: http://jsplumbtoolkit.com/demo/dynamicAnchors/jquery.html как заставить instance.connect({ source:tmp_source, target:tmp_target }); работать в блоке for.

eg:

for(){
 var tmp_source="opened";
 var tmp_target="phone1";
 instance.connect({ source:tmp_source, target:tmp_target });// this line not run

}
person zhen    schedule 18.02.2014