jsplumbEndpoint

directive in module ovh-angular-jsplumb

Create a graph endpoint

Example

    // script.js
    angular.module("myApp", ["ovh-angular-jsplumb"]);
    angular.module("myApp").controller("foo", function() {
         var self = this;

         this.instanceOptions = {
              PaintStyle : {
                  lineWidth : 2,
                  strokeStyle : "#354291"
              },
              HoverPaintStyle : {
                  lineWidth : 4,
                  strokeStyle : "#354291"
              },
              MaxConnections : -1
         };

         this.anchors = {
              bottom : {
                 source : {
                     anchor : [0.5, 0.5, 0, 1],
                     connector: connector
                 },
                 target : {
                     anchor : [0.5, 0.5, 0, 1],
                     connector: connector
                 }
             },
             top : {
                 source : {
                     anchor : [0.5, 0.5, 0, -1],
                     connector: connector
                 },
                 target : {
                     anchor : [0.5, 0.5, 0, -1],
                     connector: connector
                 }
             }
         };

         $scope.$on("jsplumb.instance.created", function (evt, instance) {
             self.jsPlumb = instance;
             instance.Defaults.Container=$("body");
         });

        function init() {
           self.jsplumbReady = false;
           jsPlumbService.jsplumbInit().finally(function () {
               self.jsplumbReady = true;
           });

        }

        init();
    });

    <div data-ng-if="Foo.jsplumbReady" data-jsplumb-instance="Foo.instanceOptions">
        <div id="one"
              data-jsplumb-endpoint-source-options="Foo.endpointOptions.top.source"
                 data-jsplumb-endpoint-target-options="Foo.endpointOptions.bottom.target"
                 data-jsplumb-endpoint-connection-ids="[]">hello world</div>

        <div id="two"
              data-jsplumb-endpoint-source-options="Foo.endpointOptions.top.source"
              data-jsplumb-endpoint-target-options="Foo.endpointOptions.bottom.target"
              data-jsplumb-endpoint-connection-ids="['one']">hello world</div>
    </div>