title: jsPlumb - dynamic endpoint anchors on each side
body: <p>I am trying to figure out a way how to add endpoint anchors dynamically to jsPlumb container. </p>
  
  <p>I would like to have source endpoints on the left side and target endpoints on the right side only.</p>
  
  <p>The problem is, that I wasn't able to find any way to do so, without resorting to some hacks, like I am doing now.</p>
  
  <p>jsPlumb supports <a href="http://jsplumbtoolkit.com/doc/usage.html" rel="noreferrer">Continuous Anchors</a>, but position of individual anchor will be recalculated based on the orientation between connectors and number of continuous anchors. This means both source and target endpoints could be sharing the same side of the container, this is something I would like to avoid.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/DMINATOR/Zn8DL/" rel="noreferrer">jsFiddler code I came up with</a></p>
  
  <p>Here is a part of the code I am using to hack and recalculate anchor positions myself (when Add button is clicked), with some buggy results :(</p>
  
  <pre><code>   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 &lt; 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);
          });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Uc78t.png" alt="Expected result"></p>
  
  <p>As you can see on the image above, left side has only source endpoints (Dot) and right side (Box) only target endpoints, once new endpoint is added, anchors are recalculated based on the number of anchors on one side. </p>
  
  <p>This works but still buggy: position is updated only once I move the container and connection between containers is not correct as well.</p>
  
  <p>What I would like to have, is a way for it to work and connect items correctly (preferably using correct jsPlumb code without resorting to hacks)</p>