Question

我试图找出一种如何动态地将端点锚点添加到jsPlumb容器的方法。

我希望左侧有源端点，右侧只有目标端点。

问题是，我没有找到任何方法这样做，没有像我现在那样诉诸某些黑客。

jsPlumb支持Continuous Anchors，但是将根据连接器之间的方向和连续锚点的数量重新计算单个锚点的位置。这意味着源端点和目标端点可以共享容器的同一侧，这是我想要避免的。

以下是我自己用来破解和重新计算锚位置的代码的一部分（单击“添加”按钮时），带有一些错误的结果：（

   function fixEndpoints(endpoints) {

            //there are 2 types - input and output

            var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                return elementOfArray.isSource; //input
            });

            var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                return elementOfArray.isTarget; //output
            });

            calculateEndpoint(inputAr, true);
            calculateEndpoint(outputAr, false);
        }

        function calculateEndpoint(endpointArray, isInput) {

            //multiplyer
            var mult = 1 / endpointArray.length;

            for (var i = 0; i < endpointArray.length; i++) {

                if (isInput) {
                    endpointArray[i].anchor.x = 1;
                    endpointArray[i].anchor.y = mult * i;//, 1, 0] };
                } 
                else {
                    endpointArray[i].anchor.x = 0;
                    endpointArray[i].anchor.y = mult * i;//, -1, 0] };
                }
            }
        }



        //Add additional anchor
        $(".button_add").live("click", function () {

            var parentnode = $(this)[0].parentNode.parentNode;

            jsPlumb.addEndpoint(
                parentnode,
                anEndpointSource
            );

            jsPlumb.addEndpoint(
                parentnode,
                anEndpointDestination
            );

            //get list of current endpoints
            var endpoints = jsPlumb.getEndpoints(parentnode);

            //fix endpoints
            fixEndpoints(endpoints);

            jsPlumb.recalculateOffsets();
            jsPlumb.repaint(parentnode);
        });

Expected result

正如您在上图所示，左侧只有源端点（Dot）和右侧（Box）只有目标端点，一旦添加新端点，就会根据一侧锚点的数量重新计算锚点。

这样可行，但仍有错误：只有在我移动容器并且容器之间的连接也不正确时才会更新位置。

我想拥有的是一种正确工作和连接项目的方法（最好使用正确的jsPlumb代码，而不是诉诸黑客）

Answer 1

我终于想出了怎么做。这比我想象的容易。

代码与一些更改基本相同，here is updated fiddler sample

<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./include/jquery.jsPlumb-1.3.16-all-min.js"></script>

<style>
    .window { 
        background-color: #EEEEEF;
        border: 1px solid #346789;
        border-radius: 0.5em;
        box-shadow: 2px 2px 5px #AAAAAA;
        color: black;
        height: 5em;
        position: absolute;
        width: 5em;
    }

    .window:hover { 
        box-shadow: 2px 2px 19px #AAAAAA;
        cursor: pointer;
    }


    .button_add, .button_add_window, .button_remove, .button {
        background-color: deepskyblue;
        text-align: center;
        border: 1px solid;
    }

    .button_container {
        margin: 5px;
        background-color: #aaaaaa
    }
</style>

<script>

    jsPlumb.ready(function () {


        //FIX DOM:
        $(("#container1"))[0].innerHTML = $(("#container0"))[0].innerHTML;

        //all windows are draggable
        jsPlumb.draggable($(".window"));


        var anEndpointSource = {
            endpoint: "Rectangle",
            isSource: true,
            isTarget: false,
            maxConnections: 1,

            anchor: [1, 0, 1, 0]
        };

        var anEndpointDestination = {
            endpoint: "Dot",
            isSource: false,
            isTarget: true,
            maxConnections: 1,

            anchor: [0, 1, -1, 0]
        };


        //Fixes endpoints for specified target
        function fixEndpoints(parentnode) {

            //get list of current endpoints
            var endpoints = jsPlumb.getEndpoints(parentnode);

            //there are 2 types - input and output

            var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                return elementOfArray.isSource; //input
            });

            var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                return elementOfArray.isTarget; //output
            });

            calculateEndpoint(inputAr, true);
            calculateEndpoint(outputAr, false);

            jsPlumb.repaintEverything();
        }

        //recalculate endpoint anchor position manually
        function calculateEndpoint(endpointArray, isInput) {

            //multiplyer
            var mult = 1 / (endpointArray.length+1);

            for (var i = 0; i < endpointArray.length; i++) {

                if (isInput) {

                    //position
                    endpointArray[i].anchor.x = 1;
                    endpointArray[i].anchor.y = mult * (i + 1);
                } 
                else {

                    //position
                    endpointArray[i].anchor.x = 0;
                    endpointArray[i].anchor.y = mult * (i + 1);
                }
            }
        }



        //Add additional anchor
        $(".button_add").live("click", function () {

            var parentnode = $(this)[0].parentNode.parentNode;

            jsPlumb.addEndpoint(
                parentnode,
                anEndpointSource
            );

            jsPlumb.addEndpoint(
                parentnode,
                anEndpointDestination
            );

            fixEndpoints(parentnode);
        });

        //Remove anchor 
        $(".button_remove").live("click", function () {

            var parentnode = $(this)[0].parentNode.parentNode;

            //get list of current endpoints
            var endpoints = jsPlumb.getEndpoints(parentnode);

            //remove 2 last one

            if (endpoints.length > 1) {
                jsPlumb.deleteEndpoint(endpoints[endpoints.length - 2]);
            }

            if (endpoints.length > 0) {
                jsPlumb.deleteEndpoint(endpoints[endpoints.length - 1]);
            }

            fixEndpoints(parentnode);
        });


        //adds new window
        $(".button_add_window").click(function () {

            var id = "dynamic_" + $(".window").length;

            //create new window and add it to the body
            $('<div class="window" id="' + id + '" >').appendTo('body').html($(("#container0"))[0].innerHTML);

            //set jsplumb properties
            jsPlumb.draggable($('#' + id));
        });
    });
</script>

</head>
<body >

    <!-- Adds new windows to the page -->
    <div class="window" style="left: 600px" id="details">
        <p style="text-align: center">Window</p>
        <div class="button_container">
            <div class="button_add_window">Add</div>
        </div>
    </div>

    <!-- Primary window - used as html templated for descendants -->
    <div class="window" style="left: 20px" id="container0">
        <div class="button_container">
            <div class="button_add">Add</div>
            <div class="button_remove">Remove</div>
        </div>
    </div>

    <div class="window" style="left: 200px" id="container1">
    </div>


</body>
</html>

我所做的更改：

现在我在添加它时指定端点锚点偏移量，我只计算锚点位置，因此偏移量永远不会改变，从一开始它总是正确的：
```
var anEndpointSource = {
    endpoint: "Rectangle",
    isSource: true,
    isTarget: false,
    maxConnections: 1,

    anchor: [1, 0, 1, 0]
};
```
添加端点后，我重新计算锚位置并调用（这将重新绘制连接）：

jsPlumb.repaintEverything();

以下是最终结果：

endpoints correctly connected

Answer 2

您可以通过添加

双击来删除状态

                     newState.dblclick(function(e) {
                        alert("This will delete the state and its connections");
                        instance.detachAllConnections($(this));
                      $(this).remove();
                      e.stopPropagation();
                    });

函数到你的jsPlumb.ready函数。您可以通过添加

将其添加到您的所有州

var windows = jsPlumb.getSelector(".statemachine-demo .state");
            windows.dblclick(function(e) {
            alert("This will delete the state and its connections");
            instance.detachAllConnections($(this));
          $(this).remove();
          e.stopPropagation();
        });

这里statemachine-demo是你的容器中div的id，而state是状态div的类。

Answer 3

谢谢你的解决方案，它可以在预定义锚点时正常工作，就像这里的源始终位于左侧，目标始终位于右侧。

但如果它们是动态的，我们还需要自己实施侧面选择吗？

作为一种解决方法，我所做的是在默认配置中设置更多可能的锚位置。还有更好的主意吗？

感谢

jsPlumb - 每侧的动态端点锚点

3 个答案: