Skip to content

Instantly share code, notes, and snippets.

@andrewobrien
Last active November 9, 2017 01:31
Show Gist options
  • Select an option

  • Save andrewobrien/c855cd11928c546329408d456fed4919 to your computer and use it in GitHub Desktop.

Select an option

Save andrewobrien/c855cd11928c546329408d456fed4919 to your computer and use it in GitHub Desktop.
Workflow builder
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
});
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(existingNode, newNode){
debugger
get(this, 'components').pushObject(newNode)
this.addConnection(existingNode, newNode)
}
},
});
import Ember from 'ember';
import jsPlumb from 'jsplumb';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
});
{{#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}}
<button {{action attrs.connect this.elementId 'wf-delay'}}>Add Component</button>
{{yield}}
<div style='background-color:yellow;width:80px;height:100px;position:absolute;top:200px'>
Workflow decision tree
</div>
{{wf-connector connect=attrs.connect}}
<div id='wf-delay' style='background-color:red;width:80px;height:100px;top:20px;position:absolute;'>
Workflow-delay
</div>
{{wf-connector}}
{{yield components (action 'addNode')}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment