Have a way to add anchors to elements to create more connections

hawtio · Oct 8, 2013 · a798593 · a798593
1 parent e0d3481
commit a798593
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 16 deletions.
diff --git a/hawtio-web/src/main/webapp/app/ui/html/test.html b/hawtio-web/src/main/webapp/app/ui/html/test.html
@@ -17,16 +17,23 @@ <h3>JSPlumb</h3>
     <!-- Nodes just need to have an ID and the jsplumb-node class -->
     <div ng-repeat="node in nodes"
          id="{{node}}"
-         class="jsplumb-node ex-node">Node: {{node}}</div>
+         anchors="AutoDefault"
+         class="jsplumb-node ex-node">
+      <i class="icon-plus clickable" ng-click="createEndpoint(node)"></i> Node: {{node}}
+    </div>
     <!-- You can specify a connect-to attribute and a comma separated list of IDs to connect nodes -->
     <div id="node3"
          class="jsplumb-node ex-node"
-         connect-to="node1,node2">Node 3</div>
+         anchors="Left,Right"
+         connect-to="node1,node2">
+      <i class="icon-plus clickable" ng-click="createEndpoint('node3')"></i> Node 3
+    </div>
     <!-- Expressions and stuff will work too -->
     <div ng-repeat="node in otherNodes"
          id="{{node}}"
          class="jsplumb-node ex-node"
-         connect-to="{{otherNodes[$index - 1]}}">Node: {{node}}</div>
+         anchors="Continuous"
+         connect-to="{{otherNodes[$index - 1]}}"><i class="icon-plus clickable" ng-click="createEndpoint(node)"></i> Node: {{node}}</div>
   </div>
 
   <!--

diff --git a/hawtio-web/src/main/webapp/app/ui/js/jsPlumbDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/jsPlumbDirective.ts
@@ -15,7 +15,7 @@ module UI {
         });
 
 
-        var endpointStyle:any[] = ["Dot", {radius: 4}];
+        var endpointStyle:any[] = ["Dot", { radius: 10, cssClass: 'jsplumb-circle', hoverClass: 'jsplumb-circle-hover' }];
         var labelStyles:any[] = [ "Label" ];
         var arrowStyles:any[] = [ "Arrow", {
           location: 1,
@@ -25,10 +25,12 @@ module UI {
           foldback: 0.8
         } ];
 
-        var connectorStyle:any[] = [ "Flowchart", { cornerRadius: 4, gap: 5 } ];
+        var connectorStyle:any[] = [ "Flowchart", { cornerRadius: 4, gap: 8 } ];
 
         $scope.jsPlumb.importDefaults({
           Anchor: "AutoDefault",
+          Connector: "Flowchart",
+          ConnectorStyle: connectorStyle,
           DragOptions : { cursor: "pointer", zIndex:2000 },
           Endpoint: endpointStyle,
           PaintStyle: { strokeStyle: "#42a62c", lineWidth: 4 },
@@ -48,22 +50,30 @@ module UI {
         angular.forEach(nodeEls, (nodeEl) => {
 
           var el = $(nodeEl);
-          var id = el.attr('id')
+          var id = el.attr('id');
+          var anchors:any = el.attr('anchors');
+          if (anchors) {
+            anchors = anchors.split(',').map((anchor) => { return anchor.trim()});
+          } else {
+            anchors = ["Top"];
+          }
 
           var node = {
             id: id,
             label: 'node ' + id,
             el: el,
             width: el.outerWidth(),
             height: el.outerHeight(),
-            edges: []
+            edges: [],
+            connections: [],
+            endpoints: [],
+            anchors: anchors
           };
           nodes.push(node);
           nodesById[id] = node;
         });
 
         angular.forEach(nodes, (sourceNode) => {
-
           var targets:any = sourceNode.el.attr('connect-to');
           if (targets) {
             targets = targets.split(',');
@@ -80,13 +90,13 @@ module UI {
               }
             });
           }
-
         });
 
         $scope.jsPlumbNodes = nodes;
+        $scope.jsPlumbNodesById = nodesById;
         $scope.jsPlumbTransitions = transitions;
-        $scope.jsPlumbEndpoints = {};
-        $scope.jsPlumbConnections = [];
+        //$scope.jsPlumbEndpoints = {};
+        //$scope.jsPlumbConnections = [];
 
         // First we'll lay out the graph and then later apply jsplumb to all
         // of the nodes and connections
@@ -101,8 +111,15 @@ module UI {
 
         angular.forEach($scope.jsPlumbNodes, (node) => {
           node.el.css({top: node.dagre.y, left: node.dagre.x});
-          var endpoint = $scope.jsPlumb.addEndpoint(node.el);
-          $scope.jsPlumbEndpoints[node.id] = endpoint
+          var endpoint = $scope.jsPlumb.addEndpoint(node.el, {
+            isSource: true,
+            isTarget: true,
+            anchor: node.anchors,
+            connector: connectorStyle,
+            maxConnections: -1
+          });
+          node.endpoints.push(endpoint);
+          //$scope.jsPlumbEndpoints[node.id] = endpoint
           $scope.jsPlumb.draggable(node.el, {
             containment: $element
           });
@@ -113,12 +130,12 @@ module UI {
             source: edge.source.el,
             target: edge.target.el
           }, {
-            anchor: "Continuous",
             connector: connectorStyle,
-            connectorStyle: { strokeStyle: "#666", lineWidth: 2 },
             maxConnections: -1
           });
-          $scope.jsPlumbConnections.push(connection);
+          edge.source.connections.push(connection);
+          edge.target.connections.push(connection);
+          //$scope.jsPlumbConnections.push(connection);
         });
 
         Core.$apply($scope);

diff --git a/hawtio-web/src/main/webapp/app/ui/js/testController.ts b/hawtio-web/src/main/webapp/app/ui/js/testController.ts
@@ -7,6 +7,27 @@ module UI {
     $scope.nodes = ["node1", "node2"];
     $scope.otherNodes =["node4", "node5", "node6"];
 
+    $scope.anchors = ["Top", "Right", "Bottom", "Left"];
+
+    $scope.createEndpoint = (nodeId) => {
+      var node = $scope.jsPlumbNodesById[nodeId]
+      if (node) {
+
+        var anchors = $scope.anchors.subtract(node.anchors);
+        console.log("anchors: ", anchors);
+        if (anchors && anchors.length > 0) {
+          var anchor = anchors.first();
+          node.anchors.push(anchor);
+          node.endpoints.push($scope.jsPlumb.addEndpoint(node.el, {
+            anchor: anchor,
+            isSource: true,
+            isTarget: true,
+            maxConnections: -1
+          }));
+        }
+      }
+    };
+
     $scope.expandableEx = '' +
         '<div class="expandable closed">\n' +
         '   <div title="The title" class="title">\n' +