Есть ли способ, которым я могу получить конечные точки, связанные с блоками классов, используя jsplumb? - PullRequest
Новая
       32

Есть ли способ, которым я могу получить конечные точки, связанные с блоками классов, используя jsplumb?

0 голосов
/ 08 ноября 2019

Использование jsplumb. Я могу создать 2 конечные точки между двумя блоками классов и использовать метод jsPlumb.connect, чтобы соединить их линией.

Моя проблема заключается в том, что при удалении одного из блоков классов в графическом интерфейсе линия все еще существуеткак будто конечная точка все еще там (что имеет смысл для меня) ...

Так что я должен удалить конечную точку, потому что это то, к чему фактически привязывается линия? правильно? Поэтому я провел некоторое исследование и обнаружил, что есть функция 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 находятся вне области применения метода. Но даже имея доступ к ним, мне нужно было бы указать, с какими блоками классов они связаны.

...