search

jsplumb / community-edition

The community edition of jsPlumb, versions 1.x - 6.x
https://jsplumbtoolkit.com
Other
225 stars 18 forks source link

Connections not working on changes to load new divs #22

Open nandrew opened 7 years ago

nandrew commented 7 years ago

I am not sure if I am missing something or there is an issue with what I am trying to do.

However when I try to draw dynamic connections, it is working fine on the first load, the second load there are no connections displaying.

The code at the bottom is used to dynamically connect a bunch of divs that look similar to this: 

<div id="projectStep1" class="node">
    <div id="projectStepId">1</div>
    <div id="stepName">Test step 1</div>
</div>
<div id="projectStep2" class="node">
    <div id="projectStepId">2</div>
    <div id="stepName">Test step 2</div>
</div>

This all works fine the first time I load up the divs and apply the code below, however if I go back and reload a different set of divs it looks like the divs all get the correct classes on them, 

<div id="projectStep1" class="node jtk-endpoint-anchor jtk-connected">
                <div id="projectStepId">1</div>
                <div id="stepName">test step 1</div>
</div>

but the connections are not showing up and I am guessing it's because whatever triggers this to draw isn't firing:

/***************************** BEGIN MISSING CODE ******************************************
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 16px; width: 16px; left: 150px; top: 154px;"><svg style="position:absolute;left:0px;top:0px" width="16" height="16" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="8" cy="8" r="8" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="none" style=""></circle></svg></div>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 16px; width: 16px; left: 150px; top: 204px;"><svg style="position:absolute;left:0px;top:0px" width="16" height="16" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="8" cy="8" r="8" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="none" style=""></circle></svg></div>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 10px; width: 10px; left: 153px; top: 157px;"><svg style="position:absolute;left:0px;top:0px" width="10" height="10" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="5" cy="5" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 10px; width: 10px; left: 153px; top: 207px;"><svg style="position:absolute;left:0px;top:0px" width="10" height="10" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="5" cy="5" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div>
<svg style="position:absolute;left:157.5px;top:161px" width="1" height="51.5" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="jtk-connector"><path d="M 0 -0.5 L 0 25.5 M 0 25 L 0 50 " transform="translate(0.5,1)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="#456" style=""></path></svg>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 16px; width: 16px; left: 150px; top: 154px;"><svg style="position:absolute;left:0px;top:0px" width="16" height="16" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="8" cy="8" r="8" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="none" style=""></circle></svg></div>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 16px; width: 16px; left: 150px; top: 204px;"><svg style="position:absolute;left:0px;top:0px" width="16" height="16" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="8" cy="8" r="8" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="none" style=""></circle></svg></div>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 10px; width: 10px; left: 153px; top: 157px;"><svg style="position:absolute;left:0px;top:0px" width="10" height="10" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="5" cy="5" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div>
<div class="jtk-endpoint jtk-endpoint-anchor jtk-draggable jtk-droppable" style="position: absolute; height: 10px; width: 10px; left: 153px; top: 207px;"><svg style="position:absolute;left:0px;top:0px" width="10" height="10" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="5" cy="5" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div>
<svg style="position:absolute;left:157.5px;top:161px" width="1" height="51.5" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="jtk-connector"><path d="M 0 -0.5 L 0 25.5 M 0 25 L 0 50 " transform="translate(0.5,1)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="#456" style=""></path></svg>
/***************************** END MISSING CODE ******************************************

My code that applys the endpoints and connections. 

 var targetOption = {
            anchor: "TopCenter",
            maxConnections: -1,
            isSource: false,
            isTarget: true,
            endpoint: ["Dot", { radius: 8 }],
            paintStyle: { fillStyle: "#66FF00" },
            setDragAllowedWhenFull: true
        }

        var sourceOption = {
            anchor: "BottomCenter",
            maxConnections: -1,
            isSource: true,
            isTarget: false,
            endpoint: ["Dot", { radius: 8 }],
            paintStyle: { fillStyle: "#FFEF00" },
            setDragAllowedWhenFull: true
        }

        var common = {
            cssClass: "myCssClass"
        };

        var sourceDiv = null;

        $("#projectStepWorkflow > div[id^='projectStep']").each(function (index) {
            if (sourceDiv != null) {
                console.log("applying connections");
                var targetDiv = $(this).attr("id");

                jsPlumb.addEndpoint(sourceDiv, sourceOption);
                jsPlumb.addEndpoint(targetDiv, targetOption);

                jsPlumb.connect({
                    source: sourceDiv,
                    target: targetDiv,
                    anchor: ["Continuous", { faces: ["top", "bottom"] }],
                    endpoint: ["Dot", { radius: 5, hoverClass: "myEndpointHover" }, common],
                    connector: ["Flowchart", { cornerRadius: 1 }, common],

                });

                sourceDiv = targetDiv;
            }
            else {
                sourceDiv = $(this).attr("id");
            }
        });
remaininlight commented 7 years ago

I have a similar issue. Rendering with React, the first time the endpoints and connections all work as expected. On the reload connections and endpoints are not added to the DOM, despite all the appropriate methods seeming to fire without error and jsPlumb having access to all the correct elements.

LucasPilarski commented 7 years ago

I had the same problem and managed to fix it. All I did was set main div with 'app' id as PlumbJs container (method .setContainer()). After that, all worked perfectly fine.

ChingHanChan commented 6 years ago

@LucasPilarski Thanks a lot! It's work!!

In my case, I changed the container setting from jsPlumb.Defaults.Container = 'contnet_body' to jsPlumb.setContainer('contnet_body') After that, connections and endpoints was rendered perfectly.

I am using jsPlumb with Angular4.

abhirocks550 commented 5 years ago

I have a similar issue. Rendering with React, the first time the endpoints and connections all work as expected. On the reload connections and endpoints are not added to the DOM, despite all the appropriate methods seeming to fire without error and jsPlumb having access to all the correct elements.

I am also facing the same issue. Any fix?

abhirocks550 commented 5 years ago

@LucasPilarski Thanks a lot! It's work!!

In my case, I changed the container setting from jsPlumb.Defaults.Container = 'contnet_body' to jsPlumb.setContainer('contnet_body') After that, connections and endpoints was rendered perfectly.

I am using jsPlumb with Angular4.

This solved the issue but now the new issue is that the position of connections is disturbed. Any idea?

abhirocks550 commented 5 years ago

@LucasPilarski Thanks a lot! It's work!! In my case, I changed the container setting from jsPlumb.Defaults.Container = 'contnet_body' to jsPlumb.setContainer('contnet_body') After that, connections and endpoints was rendered perfectly. I am using jsPlumb with Angular4.

This solved the issue but now the new issue is that the position of connections is disturbed. Any idea?

I got the position also fixed by adding jsPlumb.setContainer('Idofcontainer') inside constructor of component. Before this, I added that line inside componentDidMount(). Thanks, @ChingHanChan 🥇