andrewobrien · November 9, 2017 01:31 · Nov 9, 2017 · Nov 9, 2017 · Nov 8, 2017 · Nov 8, 2017
diff --git a/components.wf-decision-tree.js b/components.wf-decision-tree.js
@@ -3,5 +3,5 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   elementId: 'wf-decision-tree',
   attributeBindings: ['style'],
-  style: 'background-color:yellow;width:200px;height:100px;position:absolute;top:50px;left:200px;'
+  style: 'background-color:yellow;width:200px;height:100px;position:absolute;top:400px;left:600px;'
 });
diff --git a/components.wf-delay.js b/components.wf-delay.js
@@ -3,5 +3,5 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   elementId: 'wf-delay',
   attributeBindings: ['style'],
-  style:'background-color:red;width:200px;height:100px;top:400px;left100px;position:absolute;'
+  style:'background-color:red;width:200px;height:100px;top:400px;left200px;position:absolute;'
 });
diff --git a/components.workflow-builder.js b/components.workflow-builder.js
@@ -7,7 +7,7 @@ const {get, set} = Ember;
 jsPlumb.bind("ready", function(){
 	jsPlumb.Defaults.RenderMode = 'jsPlumb.SVG'
   jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"]
-  jsPlumb.Defaults.DragOptions = { cursor: 'wait', zIndex:20 }
+  jsPlumb.Defaults.DragOptions = { cursor: 'wait', zIndex:-5 }
   jsPlumb.Defaults.Connector = [ "Bezier", { curviness: 90 } ]
 });
 

diff --git a/components.wf-decision-tree.js b/components.wf-decision-tree.js
@@ -3,5 +3,5 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   elementId: 'wf-decision-tree',
   attributeBindings: ['style'],
-  style: 'background-color:yellow;width:80px;height:100px;position:absolute;top:200px'
+  style: 'background-color:yellow;width:200px;height:100px;position:absolute;top:50px;left:200px;'
 });
diff --git a/components.wf-delay.js b/components.wf-delay.js
@@ -3,5 +3,5 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   elementId: 'wf-delay',
   attributeBindings: ['style'],
-  style:'background-color:red;width:80px;height:100px;top:20px;position:absolute;'
+  style:'background-color:red;width:200px;height:100px;top:400px;left100px;position:absolute;'
 });
diff --git a/components.wf-trigger.js b/components.wf-trigger.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  elementId: 'wf-trigger',
+  attributeBindings: ['style'],
+  style:'background-color:green;width:200px;height:100px;position:absolute;top:50px;left:200px;'
+});
diff --git a/components.workflow-builder.js b/components.workflow-builder.js
@@ -4,18 +4,27 @@ import jsPlumb from 'jsplumb';
 
 const {get, set} = Ember;
 
+jsPlumb.bind("ready", function(){
+	jsPlumb.Defaults.RenderMode = 'jsPlumb.SVG'
+  jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"]
+  jsPlumb.Defaults.DragOptions = { cursor: 'wait', zIndex:20 }
+  jsPlumb.Defaults.Connector = [ "Bezier", { curviness: 90 } ]
+});
+
+
 export default Ember.Component.extend({
   showConnections: false,
   connections: A(),
-  components: ['wf-decision-tree'],
+  components: ['wf-trigger'],
 
   didInsertElement() {
     this._super(...arguments);
     jsPlumb.setContainer(this.elementId);
+    const instance = jsPlumb.getInstance();
+    set(this, 'jsPlumbInstance', instance)
   },
 
   _addConnection( source, target, color, width ) {
-    debugger
     let connection = jsPlumb.connect({
       source: this.$(source),
       target: this.$(target),
@@ -29,6 +38,32 @@ export default Ember.Component.extend({
     connection.bind("click", function(conn) {
      jsPlumb.detach( conn ); 
     });
+  	this._drawLayout();
+  },
+
+  _drawLayout(){
+
+  	let g = new dagre.graphlib.Graph();
+		g.setGraph({});
+		g.setDefaultEdgeLabel(function() { return {}; });
+			var nodes = $(".node"); 
+      for (var i = 0; i < nodes.length; i++) {
+        var n = nodes[i];
+        debugger
+        g.setNode(n.id, {width: $(n).width(), height: $(n).height()});
+      }
+    let edges = get(this, 'jsPlumbInstance').getAllConnections();
+    for (var i = 0; i < edges.length; i++) {
+        var c = edges[i];
+        g.setEdge(c.source.id,c.target.id );
+    }
+    // calculate the layout (i.e. node positions)
+    dagre.layout(g);
+    // Applying the calculated 
+    g.nodes().forEach(function(v) {
+    	Ember.$("#" + v).css("left", g.node(v).x + "px");
+    	Ember.$("#" + v).css("top", g.node(v).y + "px");
+    })
   },
 
   actions: {
@@ -45,7 +80,6 @@ export default Ember.Component.extend({
       }
     },
     addNode(existingNode, newNode){
-      debugger
     	get(this, 'components').pushObject(newNode)
       Ember.run.next(this, this._addConnection, `#${existingNode}`, `#${newNode}`, 'red', 5);
       return false;

diff --git a/controllers.application.js b/controllers.application.js
@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import jsPlumb from 'jsplumb';
-import dagre from 'dagre';
+
 
 export default Ember.Controller.extend({
   appName: 'Ember Twiddle',

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,7 +1,7 @@
 {{#workflow-builder as |components addNode|}}
 	<div style='height: 300px; width: 300px; position: relative'>
     {{#each components as |componentName|}}
-      {{component componentName connect=addNode}}
+      {{component componentName connect=addNode class='node'}}
     {{/each}}
   </div>
 {{/workflow-builder}}

diff --git a/templates.components.wf-trigger.hbs b/templates.components.wf-trigger.hbs
@@ -0,0 +1,2 @@
+Workflow-Trigger
+{{wf-connector connect=attrs.connect existingNode=this.elementId}}
diff --git a/twiddle.json b/twiddle.json
@@ -13,9 +13,13 @@
     "ember-template-compiler": "2.12.0",
     "ember-testing": "2.12.0",
     "jsplumb": "https://jsplumbtoolkit.com/lib/jsPlumb-2.1.1-min.js",
-    "dagre": "https://cdnjs.cloudflare.com/ajax/libs/dagre/0.7.4/dagre.core.js"
+    "graphlib": "https://cdn.jsdelivr.net/npm/graphlib@2.1.1/dist/graphlib.min.js",
+    "dagre": "https://cdn.jsdelivr.net/npm/dagre@0.7.4/dist/dagre.min.js",
+    "dagre-core": "https://cdn.jsdelivr.net/npm/dagre@0.7.4/dist/dagre.core.min.js"
+
   },
   "addons": {
     "ember-data": "2.12.1"
+
   }
 }
diff --git a/controllers.application.js b/controllers.application.js
@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import jsPlumb from 'jsplumb';
+import dagre from 'dagre';
 
 export default Ember.Controller.extend({
   appName: 'Ember Twiddle',

diff --git a/templates.components.wf-connector.hbs b/templates.components.wf-connector.hbs
@@ -1,3 +1,4 @@
-<button {{action attrs.connect attrs.existingNode 'wf-delay'}}>Add Component</button>
+{{input value=value}}
+<button {{action attrs.connect attrs.existingNode value}}>Add Component</button>
 
 {{yield}}
diff --git a/twiddle.json b/twiddle.json
@@ -12,7 +12,8 @@
     "ember": "2.12.0",
     "ember-template-compiler": "2.12.0",
     "ember-testing": "2.12.0",
-    "jsplumb": "https://jsplumbtoolkit.com/lib/jsPlumb-2.1.1-min.js"
+    "jsplumb": "https://jsplumbtoolkit.com/lib/jsPlumb-2.1.1-min.js",
+    "dagre": "https://cdnjs.cloudflare.com/ajax/libs/dagre/0.7.4/dagre.core.js"
   },
   "addons": {
     "ember-data": "2.12.1"

diff --git a/components.wf-decision-tree.js b/components.wf-decision-tree.js
@@ -2,4 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   elementId: 'wf-decision-tree',
+  attributeBindings: ['style'],
+  style: 'background-color:yellow;width:80px;height:100px;position:absolute;top:200px'
 });
diff --git a/components.wf-delay.js b/components.wf-delay.js
@@ -1,5 +1,7 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  elementId: 'wf-delay'
+  elementId: 'wf-delay',
+  attributeBindings: ['style'],
+  style:'background-color:red;width:80px;height:100px;top:20px;position:absolute;'
 });
diff --git a/templates.components.wf-decision-tree.hbs b/templates.components.wf-decision-tree.hbs
@@ -1,5 +1,4 @@
-<div style='background-color:yellow;width:80px;height:100px;position:absolute;top:200px'>
 Workflow decision tree
 {{wf-connector connect=attrs.connect existingNode=this.elementId}}
-</div>
+
 
diff --git a/templates.components.wf-delay.hbs b/templates.components.wf-delay.hbs
@@ -1,5 +1,3 @@
-<div style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
-	Workflow-delay
-  {{wf-connector}}
-</div>
+Workflow-delay
+{{wf-connector connect=attrs.connect existingNode=this.elementId}}
 
diff --git a/components.wf-decision-tree.js b/components.wf-decision-tree.js
@@ -1,4 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  elementId: 'wf-decision-tree',
 });
diff --git a/components.wf-delay.js b/components.wf-delay.js
@@ -1,4 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  elementId: 'wf-delay'
 });
diff --git a/components.workflow-builder.js b/components.workflow-builder.js
@@ -14,7 +14,8 @@ export default Ember.Component.extend({
     jsPlumb.setContainer(this.elementId);
   },
 
-  addConnection( source, target, color, width ) {
+  _addConnection( source, target, color, width ) {
+    debugger
     let connection = jsPlumb.connect({
       source: this.$(source),
       target: this.$(target),
@@ -46,7 +47,8 @@ export default Ember.Component.extend({
     addNode(existingNode, newNode){
       debugger
     	get(this, 'components').pushObject(newNode)
-    	this.addConnection(existingNode, newNode) 
+      Ember.run.next(this, this._addConnection, `#${existingNode}`, `#${newNode}`, 'red', 5);
+      return false;
 		}
   },
 

diff --git a/templates.components.wf-connector.hbs b/templates.components.wf-connector.hbs
@@ -1,3 +1,3 @@
-<button {{action attrs.connect this.elementId 'wf-delay'}}>Add Component</button>
+<button {{action attrs.connect attrs.existingNode 'wf-delay'}}>Add Component</button>
 
 {{yield}}
diff --git a/templates.components.wf-decision-tree.hbs b/templates.components.wf-decision-tree.hbs
@@ -1,4 +1,5 @@
 <div style='background-color:yellow;width:80px;height:100px;position:absolute;top:200px'>
-Workflow decision tree	
+Workflow decision tree
+{{wf-connector connect=attrs.connect existingNode=this.elementId}}
 </div>
-{{wf-connector connect=attrs.connect}}
+
diff --git a/templates.components.wf-delay.hbs b/templates.components.wf-delay.hbs
@@ -1,4 +1,5 @@
-<div id='wf-delay' style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
+<div style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
 	Workflow-delay
+  {{wf-connector}}
 </div>
-{{wf-connector}}
+
diff --git a/templates.components.wf-connector.hbs b/templates.components.wf-connector.hbs
@@ -1,3 +1,3 @@
-<button {{action attrs.connect this.id 'wf-delay'}}>Add Component</button>
+<button {{action attrs.connect this.elementId 'wf-delay'}}>Add Component</button>
 
 {{yield}}
diff --git a/templates.components.wf-decision-tree.hbs b/templates.components.wf-decision-tree.hbs
@@ -1,4 +1,4 @@
-<div id='block2' style='background-color:yellow;width:80px;height:100px;position:absolute;top:200px'>
+<div style='background-color:yellow;width:80px;height:100px;position:absolute;top:200px'>
 Workflow decision tree	
 </div>
 {{wf-connector connect=attrs.connect}}
diff --git a/templates.components.wf-delay.hbs b/templates.components.wf-delay.hbs
@@ -1,4 +1,4 @@
-<div id='block1' style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
+<div id='wf-delay' style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
 	Workflow-delay
 </div>
 {{wf-connector}}
diff --git a/components.workflow-builder.js b/components.workflow-builder.js
@@ -43,10 +43,10 @@ export default Ember.Component.extend({
         this.$('button').text('Show connections');
       }
     },
-    addNode(componentName){
+    addNode(existingNode, newNode){
       debugger
-    	get(this, 'components').pushObject(componentName)
-    	this.addConnection 
+    	get(this, 'components').pushObject(newNode)
+    	this.addConnection(existingNode, newNode) 
 		}
   },
 

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,4 +1,3 @@
-<h1>Welcome to {{appName}}</h1>
 {{#workflow-builder as |components addNode|}}
 	<div style='height: 300px; width: 300px; position: relative'>
     {{#each components as |componentName|}}

diff --git a/templates.components.wf-connector.hbs b/templates.components.wf-connector.hbs
@@ -1,3 +1,3 @@
-<button {{action attrs.connect this}}>Add Component</button>
+<button {{action attrs.connect this.id 'wf-delay'}}>Add Component</button>
 
 {{yield}}
diff --git a/templates.components.workflow-builder.hbs b/templates.components.workflow-builder.hbs
@@ -1,5 +1,2 @@
-<button onclick={{action 'toggleConnections'}}>Show connections</button>
-<button onclick={{action 'toggleConnections'}}>Show connections</button>
-<br />
 {{yield components (action 'addNode')}}
 
diff --git a/components.wf-connector.js b/components.wf-connector.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});
diff --git a/components.wf-decision-tree.js b/components.wf-decision-tree.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});
diff --git a/components.wf-delay.js b/components.wf-delay.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});
diff --git a/components.workflow-builder.js b/components.workflow-builder.js
@@ -0,0 +1,55 @@
+import Ember from 'ember';
+import { A } from 'ember-array/utils';
+import jsPlumb from 'jsplumb';
+
+const {get, set} = Ember;
+
+export default Ember.Component.extend({
+  showConnections: false,
+  connections: A(),
+  components: ['wf-decision-tree'],
+
+  didInsertElement() {
+    this._super(...arguments);
+    jsPlumb.setContainer(this.elementId);
+  },
+
+  addConnection( source, target, color, width ) {
+    let connection = jsPlumb.connect({
+      source: this.$(source),
+      target: this.$(target),
+      endpoint: 'Blank',
+      paintStyle: {
+        strokeStyle: color,
+        lineWidth: width
+      }
+    });
+
+    connection.bind("click", function(conn) {
+     jsPlumb.detach( conn ); 
+    });
+  },
+
+  actions: {
+    toggleConnections() {
+      if(!this.showConnections) {
+      	this.addConnection( '#block1', '#block2', 'red', 5 );
+        this.addConnection( '#block1', '#block3', 'green', 5 );
+        this.addConnection( '#block2', '#block3', 'blue', 10 );
+        this.$('button').text('Hide connections');
+
+      } else {
+        jsPlumb.reset();
+        this.$('button').text('Show connections');
+      }
+    },
+    addNode(componentName){
+      debugger
+    	get(this, 'components').pushObject(componentName)
+    	this.addConnection 
+		}
+  },
+
+
+});
+
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import jsPlumb from 'jsplumb';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle',
+
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,9 @@
+<h1>Welcome to {{appName}}</h1>
+{{#workflow-builder as |components addNode|}}
+	<div style='height: 300px; width: 300px; position: relative'>
+    {{#each components as |componentName|}}
+      {{component componentName connect=addNode}}
+    {{/each}}
+  </div>
+{{/workflow-builder}}
+{{outlet}}
diff --git a/templates.components.wf-connector.hbs b/templates.components.wf-connector.hbs
@@ -0,0 +1,3 @@
+<button {{action attrs.connect this}}>Add Component</button>
+
+{{yield}}
diff --git a/templates.components.wf-decision-tree.hbs b/templates.components.wf-decision-tree.hbs
@@ -0,0 +1,4 @@
+<div id='block2' style='background-color:yellow;width:80px;height:100px;position:absolute;top:200px'>
+Workflow decision tree	
+</div>
+{{wf-connector connect=attrs.connect}}
diff --git a/templates.components.wf-delay.hbs b/templates.components.wf-delay.hbs
@@ -0,0 +1,4 @@
+<div id='block1' style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
+	Workflow-delay
+</div>
+{{wf-connector}}
diff --git a/templates.components.workflow-builder.hbs b/templates.components.workflow-builder.hbs
@@ -0,0 +1,5 @@
+<button onclick={{action 'toggleConnections'}}>Show connections</button>
+<button onclick={{action 'toggleConnections'}}>Show connections</button>
+<br />
+{{yield components (action 'addNode')}}
+
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,20 @@
+{
+  "version": "0.12.1",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.12.0",
+    "ember-template-compiler": "2.12.0",
+    "ember-testing": "2.12.0",
+    "jsplumb": "https://jsplumbtoolkit.com/lib/jsPlumb-2.1.1-min.js"
+  },
+  "addons": {
+    "ember-data": "2.12.1"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Workflow-Trigger
		{{wf-connector connect=attrs.connect existingNode=this.elementId}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<button {{action attrs.connect this}}>Add Component</button>

		{{yield}}