Endpoints are left while dragging node

[Konrad Szałwiński]

Hi all,

I am having an issue working with JSPlumb and AngularJS.

This is the template:

<div>

  <div class="flowchart-box">

    <div id="node-{{node.id}}"

         ng-repeat="node in experiment.getExperiment().getNodes()"

         on-render-finish

         jsplumb-draggable

         class="flowchart-node dataframe"

         ng-style="{'left':node.x+'px','top':node.y+'px'}">

         <span>{{node.name}} </br>{{node.id}}</span>

    </div>

  </div>

</div>

Directive for dragging:

function DraggableDirective() {

  return {

    restrict: 'A',

    link: function (scope, element, attrs) {

      jsPlumb.getInstance().draggable(element,{

        containment: 'parent',

        drag:function(e){

          console.log(e);

        }

      });

    }

  };

}

I am adding a Endpoint to Node by following code:

  var node = document.querySelectorAll('#node-210ce781-0a9f-477d-99a7-5be31f7bfc02')[0];

    internal.instance.addEndpoint(node, sourceEndpoint, {

      endpoint: 'Dot',

      anchor: 'Top'

    });

Endpoint is successfully generated:

After dragging but after dragging:

From what I see the circle is not rendered within div of selected node but after all nodes:

<div class="flowchart-box">

    <!-- ngRepeat: node in experiment.getExperiment().getNodes() --><div style="left: 250px; top: 1000px;" id="node-88f560a9-97e3-4fa2-93ce-edad4cab7ea9" ng-repeat="node in experiment.getExperiment().getNodes()" on-render-finish="" jsplumb-draggable="" class="flowchart-node dataframe ng-scope jsplumb-draggable" ng-style="{'left':node.x+'px','top':node.y+'px'}">

         <span class="ng-binding">Sql Reader <br>88f560a9-97e3-4fa2-93ce-edad4cab7ea9</span>

    </div><!-- end ngRepeat: node in experiment.getExperiment().getNodes() --><div style="left: 469px; top: 374px;" id="node-210ce781-0a9f-477d-99a7-5be31f7bfc02" ng-repeat="node in experiment.getExperiment().getNodes()" on-render-finish="" jsplumb-draggable="" class="flowchart-node dataframe ng-scope jsplumb-draggable _jsPlumb_endpoint_anchor" ng-style="{'left':node.x+'px','top':node.y+'px'}">

         <span class="ng-binding">Row Filter <br>210ce781-0a9f-477d-99a7-5be31f7bfc02</span>

    </div><!-- end ngRepeat: node in experiment.getExperiment().getNodes() --><div style="left: 250px; top: 600px;" id="node-11111-111111-44444" ng-repeat="node in experiment.getExperiment().getNodes()" on-render-finish="" jsplumb-draggable="" class="flowchart-node dataframe ng-scope jsplumb-draggable" ng-style="{'left':node.x+'px','top':node.y+'px'}">

         <span class="ng-binding">Neural Network <br>11111-111111-44444</span>

    </div><!-- end ngRepeat: node in experiment.getExperiment().getNodes() -->

  <div class="_jsPlumb_endpoint _jsPlumb_endpoint_anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 378px; top: 390px;"><svg xmlns="http://www.w3.org/1999/xhtml" version="1.1" position="absolute" pointer-events="all" height="20" width="20" style="position:absolute;left:0px;top:0px">

<circle stroke-width="2" style="" stroke="none" fill="#7AB02C" xmlns="http://www.w3.org/1999/xhtml" version="1.1" r="10" cy="10" cx="10"></circle></svg>

</div>

</div>

Any suggestions how to handle this?

[Simon Porritt]

Yes the endpoint is added to the container that jsplumb is using, that's right. Thata not the cause of your problem though. I think the problem here is that you're not using a single instance of jsPlumb everywhere. You have a line of code that says 'jsPlumb.getInstance().draggable(..)', for example. That's not the same instance of jsPlumb you used to connect your endpoints, so it doesn't update when the elements are dragged. Declare a single instance of jsPlumb (in angular a good practise it to get it from a service) and use that one only.