Kick off a simple jsplumb directive, check out UI developer help for …

…example
hawtio · Oct 8, 2013 · c4e7208 · c4e7208
1 parent fd9e59f
commit c4e7208
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 1 deletion.
diff --git a/hawtio-web/src/main/webapp/app/ui/html/test.html b/hawtio-web/src/main/webapp/app/ui/html/test.html
@@ -2,6 +2,40 @@
 
   <div>
 
+    <div class="row-fluid">
+      <h3>JSPlumb</h3>
+      <p>Use to create an instance of JSPlumb</p>
+      <script type="text/ng-template" id="jsplumbTemplate">
+        <div class="ex-node-container" hawtio-jsplumb>
+          <div id="node1" class="jsplumb-node ex-node">Node 1</div>
+          <div id="node2" connect-to="#node4" class="jsplumb-node ex-node">Node 2</div>
+          <div id="node3" class="jsplumb-node ex-node">Node 3</div>
+          <div id="node4" class="jsplumb-node ex-node">Node 4</div>
+          <div id="node5" class="jsplumb-node ex-node" connect-to="#node6,#node1">Node 5</div>
+          <div id="node6" class="jsplumb-node ex-node">Node 6</div>
+        </div>
+      </script>
+      <div hawtio-editor="jsplumbEx" mode="fileUploadExMode"></div>
+
+      <div class="directive-example">
+        <div compile="jsplumbEx"></div>
+      </div>
+      <!--
+      <div class="directive-example">
+        <div hawtio-jsplumb>
+          <div id="node1" class="jsplumb-node ex-node">Node 1</div>
+          <div id="node2" connect-to="#node4" class="jsplumb-node ex-node">Node 2</div>
+          <div id="node3" class="jsplumb-node ex-node">Node 3</div>
+          <div id="node4" class="jsplumb-node ex-node">Node 4</div>
+          <div id="node5" class="jsplumb-node ex-node" connect-to="#node6,#node1">Node 5</div>
+          <div id="node6" class="jsplumb-node ex-node">Node 6</div>
+        </div>
+      </div>
+      -->
+
+    </div>
+
+
     <div class="row-fluid">
       <h3>Expandable</h3>
       <p>Use to hide content under a header that a user can display when necessary</p>

diff --git a/hawtio-web/src/main/webapp/app/ui/js/jsPlumbDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/jsPlumbDirective.ts
@@ -0,0 +1,100 @@
+module UI {
+
+  export class JSPlumb {
+    public restrict = 'A';
+
+    public link = ($scope, $element, $attrs) => {
+
+      $element.bind('DOMNodeInserted', (event) => {
+        // TODO - handle added nodes here, like from ng-repeat for example
+      });
+
+      setTimeout(() => {
+        $scope.jsPlumb = jsPlumb.getInstance({
+          Container: $element
+        });
+
+        $scope.jsPlumb.importDefaults({
+          DragOptions : { cursor: "pointer", zIndex:2000 }
+        });
+
+        var nodes = [];
+        var transitions = [];
+
+        var nodeEls = $element.find('.jsplumb-node');
+        angular.forEach(nodeEls, (node) => {
+
+          var el = $(node);
+
+          nodes.push({
+            el: el,
+            width: el.width(),
+            height: el.height()
+          });
+          $scope.jsPlumb.addEndpoint(el);
+          $scope.jsPlumb.draggable(el, {
+            containment: $element
+          });
+        });
+
+        angular.forEach(nodes, (node) => {
+          var targets:any = node.el.attr('connect-to');
+          if (targets) {
+            targets = targets.split(',');
+            angular.forEach(targets, (target) => {
+              var targetEl = $element.find(target);
+              var transition = {
+                source: node.el,
+                target: targetEl
+              };
+              $scope.jsPlumb.connect(transition);
+              transitions.push(transition);
+            });
+          }
+        });
+
+        $scope.jsPlumbNodes = nodes;
+        $scope.jsPlumbTransitions = transitions;
+
+        setTimeout(() => {
+          $scope.layout = dagre.layout()
+              .nodeSep(100)
+              .edgeSep(10)
+              .rankSep(50)
+              .nodes(nodes)
+              .transitions(transitions)
+              .debugLevel(1)
+              .run();
+          Core.$apply($scope);
+        }, 50);
+      }, 50);
+
+
+    };
+  }
+
+  export class JSPlumbConnection {
+    public restrict = 'A';
+
+    public link = ($scope, $element, $attrs) => {
+      if (!angular.isDefined($scope.jsPlumb)) {
+        return;
+      }
+
+      console.log("here!");
+
+      var targets = $attrs['connectTo'].split(',');
+
+      angular.forEach(targets, (target) => {
+
+        var targetEl = $element.parent().find(target);
+
+        $scope.jsPlumb.connect({
+          source: $element,
+          target: targetEl
+        });
+      });
+
+    };
+  }
+}
diff --git a/hawtio-web/src/main/webapp/app/ui/js/testController.ts b/hawtio-web/src/main/webapp/app/ui/js/testController.ts
@@ -1,6 +1,8 @@
 module UI {
 
-  export function UITestController($scope, workspace) {
+  export function UITestController($scope, workspace, $templateCache) {
+
+    $scope.jsplumbEx = $templateCache.get("jsplumbTemplate");
 
     $scope.expandableEx = '' +
         '<div class="expandable closed">\n' +

diff --git a/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts b/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
@@ -36,6 +36,10 @@ module UI {
         return new UI.HorizontalViewport();
       }).directive('hawtioRow', () => {
         return new UI.DivRow();
+      }).directive('hawtioJsplumb', () => {
+        return new UI.JSPlumb();
+      //}).directive('connectTo', () => {
+      //  return new UI.JSPlumbConnection();
       }).run(function (helpRegistry) {
         helpRegistry.addDevDoc("ui", 'app/ui/doc/developer.md');
       });

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2395,4 +2395,22 @@ a.dashboard-link:hover {
   display: block;
 }
 
+.ex-node-container {
+  position: relative;
+  width: 100%;
+  height: 300px;
+}
+
+.ex-node {
+  position: absolute;
+  border-radius: 4px;
+  border: 1px solid #d4d4d4;
+  width: 150px;
+  height: 90px;
+  text-align: center;
+  padding-top: 60px;
+  background: white;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+}
+