JsPlumb动态endpoint作为连接叠加

Question

我试图创建动态endpoint，作为我的连接和运行问题的覆盖。我试图模拟这个人在SO上有什么：

jsPlumb连接自定义覆盖-endpoint未移动

然而，当我达到这一点时，无论我尝试做什么：

var overlay_div = $(connection.overlays[0].canvas);

我无法识别连接。我尝试将此逻辑放入绑定连接中，但在尝试建立连接覆盖时，这也不起作用。在这方面提供任何帮助都会非常有帮助。

Answer 1

http://jsfiddle.net/nitincool4urchat/c3b514wf/14/

首先，创建自定义元素作为覆盖

其次，确保这些元素具有唯一的ID

第三，绑定到连接事件，在这些自定义覆盖上创建endpoint。

jsPlumb.ready(function() {
        // setup some defaults for jsPlumb.
        instance = jsPlumb.getInstance({
            Endpoint : ["Dot", {radius:2}],
            HoverPaintStyle : {strokeStyle:"#1e8151", lineWidth:4 },
            ConnectionOverlays : [
                [ "Arrow", {
                    location:1,
                    id:"arrow",
                    length:14,
                    foldback:0.8
                }]
                ,["Custom", {
                    create: function(component) {
                        return connectionNode();
                    },
                    location:0.5
                }]
                //,[ "Label", { label:"Connect To", id:"label", cssClass:"aLabel" }]
            ],
            Container: "flowchart-demo"
        });


        var relationEndpoint = {
            endpoint: ["Dot", { radius: 2 }],
            isSource: true,
            connector: ["Flowchart", { stub: [40, 60], cornerRadius: 5, alwaysRespectStubs: true }],
            connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 4, outlineColor: "transparent", outlineWidth: 4 },
            maxConnections: 5,
            onMaxConnections: function (info, e) {
                alert("Maximum connections (" + info.maxConnections + ") reached");
            },
            isTarget: true,
            dropOptions: {
                tolerance: "touch",
                hoverClass: "dropHover",
                activeClass: "dragActive"
            },
            beforeDetach: function (conn) {
                return confirm("Detach connection?");
            }
        };

        function connectionNode() {
            //var overlay_div = $(connection.ConnectionOverlays[0].canvas);
            //jsPlumb.addEndpoint({ anchor: ["Perimeter", { shape: "Rectangle" }] }, relationEndpoint);
            return $("<div>Custom</div>",{id:Date.now()}).css({border:'1px solid black',background:'green'});
        }


        var windows = jsPlumb.getSelector(".flowchart-demo .window");

        instance.draggable(windows);

        instance.bind("connection", function(info) {
            console.dir(info.connection);
            console.dir(info.connection.getOverlays());
            console.dir(info.connection.getOverlays()[1].canvas);
            var overlay_div = $(info.connection.getOverlays()[1].canvas);        
            jsPlumb.addEndpoint(overlay_div,{ anchor: ["Perimeter", { shape: "Rectangle" }] }, relationEndpoint);        
        });


        // suspend drawing and initialise.
        instance.doWhileSuspended(function() {
            var isFilterSupported = instance.isDragFilterSupported();
            // make each ".ep" div a source and give it some parameters to work with.  here we tell it
            // to use a Continuous anchor and the StateMachine connectors, and also we give it the
            // connector's paint style.  note that in this demo the strokeStyle is dynamically generated,
            // which prevents us from just setting a jsPlumb.Defaults.PaintStyle.  but that is what i
            // would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb
            // which parts of the element should actually respond to a drag start.
            // here we test the capabilities of the library, to see if we
            // can provide a `filter` (our preference, support by vanilla
            // jsPlumb and the jQuery version), or if that is not supported,
            // a `parent` (YUI and MooTools). I want to make it perfectly
            // clear that `filter` is better. Use filter when you can.
            if (isFilterSupported) {
                instance.makeSource(windows, {
                    filter:".ep",
                    anchor:"Continuous",
                    connector: ["Flowchart", { stub: [40, 60], cornerRadius: 5, alwaysRespectStubs: true }],
                    connectorStyle:{ strokeStyle:"#5c96bc", lineWidth:4, outlineColor:"transparent", outlineWidth:4 },
                    maxConnections:5,
                    onMaxConnections:function(info, e) {
                        alert("Maximum connections (" + info.maxConnections + ") reached");
                    }
                });
            }
            else {
                var eps = jsPlumb.getSelector(".ep");
                for (var i = 0; i < eps.length; i++) {
                    var e = eps[i], p = e.parentNode;
                    instance.makeSource(e, {
                        parent:p,
                        anchor:"Continuous",
                        connector: ["Flowchart", { stub: [40, 60], cornerRadius: 5, alwaysRespectStubs: true }],
                        connectorStyle:{ strokeStyle:"#5c96bc",lineWidth:4, outlineColor:"transparent", outlineWidth:4 },
                        maxConnections:5,
                        onMaxConnections:function(info, e) {
                            alert("Maximum connections (" + info.maxConnections + ") reached");
                        }
                    });
                }
            }
        });

        // initialise all '.w' elements as connection targets.
        instance.makeTarget(windows, {
            dropOptions:{ hoverClass:"dragHover" },
            anchor:"Continuous",
            allowLoopback:true,
            anchor:"Continuous"
        });

        jsPlumb.fire("jsPlumbDemoLoaded", instance);

    });