Question

使用jsplumb。我能够在两个类块之间创建2个端点，并使用jsPlumb.connect方法将它们与一条线连接。

我的问题是，当我在GUI上删除一个类块时，该行仍然存在，好像端点仍在那（对我来说很有意义）...

所以我必须删除端点，这是该行实际锚定的端点吗？对？因此，我进行了一些研究，发现有一个jsplumb.deleteEndpoint函数，该函数将名称作为参数的终点。但是我的端点（ep1和ep2）是在类块之间创建的每个关系的名称。有人会知道让我抓住与该类块关联的特定端点的方法吗？

我尝试了另一种称为jsplumb.deleteEveryEndpoint的方法，该方法会删除所有现有的端点，并且会删除该行！但也会删除所有其他关系线。

//used click event for addChild in GUI, also can be called by backend
function addChild(name : string) {
    let parentDiv = $('[name="' + name + '"]').attr("name");

    //prevents connecting to an undefined/null classblock
    //Connects parents and children
    if (parentDiv != undefined) {
        let childName = prompt("Please enter the name of the new child block");
        let rType = prompt("relationship type");

        if (childName == undefined || childName == null) {
            alert("Please enter a valid child name");
            return;
        } else {
            //create a block with that name and draw a line to it
            addBlock(childName);

            //code to draw line
            let childDiv =$('[name="' + childName + '"]');
            var ep1 = jsPlumb.addEndpoint(name, {
                connectorOverlays:[ 
                      [ "PlainArrow", { width:10, length:30, location:1, id:"arrow" } ],
                      [ "Label", { label:rType, id:"quantifier"} ]
                ],
              });
        var ep2 = jsPlumb.addEndpoint(childName);
            jsPlumb.connect({ source:ep1, target:ep2 });
        //jsplumb code goes here, use childDiv and parentDiv to draw line to each other

        }
    } else {
        alert("Cannot add a child to a class that doesn't exist");
    }
}

//click function for child. uses a prompt in the GUI
$("#child").click(function() {
    let name = prompt("Please enter the name of the class you'd like to add a child to", "Class");
    addChild(name);

});





//deletes class both in the GUI and backend
function deleteClass(name : string){
    let classToDelete = $('[name="' + name + '"]');

    //find div based on name and remove the entire classblock, including all child elements
    if (userClasses.get(name)){
        if(confirm("Are you sure you want to delete this class?") && doCommand("delete " + name)[1]){
            $('[name="' + name + '"]').remove();
            jsPlumb.deleteEndpoint();

        }
    } else {
        alert("Class \"" + name + "\" does not exist, please enter a valid class name");
    }
}

我希望删除2个正确的端点，该行也将被删除。现在，它还说ep1和ep2变量超出了方法的范围。但是，即使可以访问它们，我也需要指定它们所属的类块。

有没有一种方法可以使用jsplumb捕获与类块关联的端点？

0 个答案: