Ext.application({
name : 'Test',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'hbox',
items : [ {
xtype : 'panel',
title : 'ExtJS - JSPlumb : flowchart',
html : '<div id="fccontainer"></div>',
listeners : {
afterrender : function(panel, eopts) {
console.log('panel rendered');
panel.createflowchart(panel);
}
},
createflowchart : function(panel) {
console.log('Initialise function : createjsplumb');
jpImportDefaults();
var i = 0;
var height = 0;
var width = 0;
var clickSource;
var dec1 = panel.createDecision(clickSource, i, 50, 50,
true);
i++;
var act1 = panel.createAction(clickSource, i, 300, 50,
true);
i++;
$('#fccontainer').bind('contextmenu', function(e) {
console.log(e);
clickSource = e;
e.preventDefault();
contextMenu.showAt(e.pageX, e.pageY);
});
var contextMenu = new Ext.menu.Menu({
items : [
{
text : 'Decision',
handler : function() {
console.log('Clicked : Decision')
height += $('#' + i).height();
width += $('#' + i).width();
// console.log(height);
i++;
panel.createDecision(clickSource,
i, clickSource.pageX,
clickSource.pageY);
}
},
{
text : 'Action',
handler : function() {
console.log('Clicked : Action')
// source = 'action';
i++;
panel.createAction(clickSource, i,
clickSource.pageX,
clickSource.pageY);
}
} ]
});
$('#fccontainer').dblclick(function(e) {
// panel.createDecision(e,i);
});
},
createDecision : function(e, i, x, y, isDefault) {
if (isDefault == true) {
resourceName = 'Condition 1'
} else {
resourceName = prompt('Enter Decision Title');
}
if (resourceName) {
var title = $('<div>').addClass('decisionTitle')
.text(resourceName);
var connect = $('<div>').addClass('connect');
var titlewidth = resourceName.length;
var lword = longestWord(resourceName);
var css = {
'top' : y,
'left' : x,
'height' : 50 + 2 * titlewidth,
'width' : 50 + 2 * titlewidth
}
var decisionState = getJpRhombus(i, resourceName,
resourceName, null, css);
jsPlumb.makeTarget(decisionState, {
anchor : 'Continuous'
});
jsPlumb.makeSource(connect, {
parent : decisionState,
anchor : 'Continuous',
connector : [ "StateMachine", {
curviness : 20
} ],
connectorStyle : {
strokeStyle : "#5c96bc",
lineWidth : 2,
outlineColor : "transparent",
outlineWidth : 4
}
});
decisionState.append(title);
decisionState.append(connect);
$('#fccontainer').append(decisionState);
jsPlumb.draggable(decisionState, {
containment : 'parent'
});
i++;
}
},
createAction : function(e, i, x, y, isDefault) {
if (isDefault == true) {
resourceName = 'Action 1';
} else {
resourceName = prompt('Enter action name');
}
if (resourceName) {
var css = {
'top' : y,
'left' : x,
'height' : 50,
'width' : 50
};
var actionState = getJpRectangle(i, resourceName,
resourceName, null, css);
var connect = $('<div>').addClass('connect');
jsPlumb.makeTarget(actionState, {
anchor : 'Continuous'
});
jsPlumb.makeSource(connect, {
parent : actionState,
anchor : 'Continuous',
connector : [ "StateMachine", {
curviness : 20
} ],
connectorStyle : {
strokeStyle : "#5c96bc",
lineWidth : 2,
outlineColor : "transparent",
outlineWidth : 4
}
});
actionState.append(connect);
$('#fccontainer').append(actionState);
jsPlumb.draggable(actionState, {
containment : 'parent'
});
actionState.dblclick(function(e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
i++;
}
}
} ],
showProperty : function(component) {
console.log('show property');
console.log(component);
}
});
}
});
function longestWord(string) {
var str = string.split(" ");
var longest = 0;
var word = null;
for ( var i = 0; i < str.length; i++) {
var checkedLetters = "";
for ( var j = 0; j < str[i].length; j++) {
if (/[a-zA-Z]/.test(str[i][j])) {
checkedLetters += str[i][j];
}
}
if (longest < checkedLetters.length) {
longest = checkedLetters.length;
word = checkedLetters;
}
}
return word.length * str.length;
}
<title>Getting started with jsPlumb</title>
<script type="text/javascript"
src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>
<link rel="stylesheet" type="text/css"
href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" />
<!--
<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css"
href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.js"></script>
<script src="js/jquery.jsPlumb-1.5.2.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jsplumb-utils.js"></script>
<link rel="stylesheet" type="text/css"
href="css/themes/base/jquery-ui.css" />
<script type="text/javascript" src="app/app_jp.js"></script>
!-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script
src="http://iotsys.googlecode.com/hg-history/bf8c62118fb4cbc33d74e358aabb24a1f318e36c/obelix/vendor/assets/javascripts/jquery.jsPlumb-1.5.2.js"></script>
<script type="text/javascript"
src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="css/app.css">
<script>
function jpImportDefaults() {
jsPlumb.importDefaults({
Endpoint : [ "Dot", {
radius : 2
} ],
HoverPaintStyle : {
strokeStyle : "#1e8151",
lineWidth : 2
},
ConnectionOverlays : [ [ "Arrow", {
location : 1,
id : "arrow",
length : 14,
foldback : 0.8
} ], [ "Label", {
label : "",
id : "label",
cssClass : "aLabel"
} ] ]
});
}
function getJpRectangle(id, name, text, object, css) {
var graphComponent;
graphComponent = $('<div>').attr('id', id).attr('name', name).addClass(
'item').text(text);
if (!object) {
graphComponent.attr('object', object);
}
graphComponent.css(css);
return graphComponent;
}
function getJpRhombus(id, name, text, object, css) {
console.log(css)
var graphComponent;
graphComponent = $('<div>').attr('id', id).attr('name', name).addClass(
'decision');
if (!object) {
graphComponent.attr('object', object);
}
graphComponent.css(css);
return graphComponent;
}
</script>
<script type="text/javascript">
</script>
.item {
/*
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #ddddff;
width:5em;
*/
padding: 1em;
position: absolute;
border: 1px solid black;
z-index: 4;
border-radius: 1em;
border: 1px solid #2e6f9a;
box-shadow: 2px 2px 19px #e0e0e0;
-o-box-shadow: 2px 2px 19px #e0e0e0;
-webkit-box-shadow: 2px 2px 19px #e0e0e0;
-moz-box-shadow: 2px 2px 19px #e0e0e0;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
filter: alpha(opacity = 80);
cursor: move;
background-color: white;
font-size: 11px;
-webkit-transition: background-color 0.25s ease-in;
-moz-transition: background-color 0.25s ease-in;
transition: background-color 0.25s ease-in;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.action {
/* border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #ddddff;
width:5em;*/
padding: 1em;
position: absolute;
border: 1px solid black;
z-index: 4;
border-radius: 1em;
border: 1px solid #2e6f9a;
box-shadow: 2px 2px 19px #e0e0e0;
-o-box-shadow: 2px 2px 19px #e0e0e0;
-webkit-box-shadow: 2px 2px 19px #e0e0e0;
-moz-box-shadow: 2px 2px 19px #e0e0e0;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
filter: alpha(opacity = 80);
cursor: move;
background-color: white;
font-size: 11px;
-webkit-transition: background-color 0.25s ease-in;
-moz-transition: background-color 0.25s ease-in;
transition: background-color 0.25s ease-in;
}
.actionTitle {
padding: 10px;
cursor: move;
}
.decision {
padding: 1em;
position: absolute;
border: 1px solid black;
z-index: 4;
border-radius: 1em;
border: 1px solid #2e6f9a;
box-shadow: 2px 2px 19px #e0e0e0;
-o-box-shadow: 2px 2px 19px #e0e0e0;
-webkit-box-shadow: 2px 2px 19px #e0e0e0;
-moz-box-shadow: 2px 2px 19px #e0e0e0;
border-radius: 0em;
opacity: 0.8;
filter: alpha(opacity = 80);
cursor: move;
background-color: white;
font-size: 11px;
-webkit-transition: background-color 0.25s ease-in;
-moz-transition: background-color 0.25s ease-in;
transition: background-color 0.25s ease-in;
-webkit-transform: rotateZ(-45deg) skew(20deg, 20deg);
-moz-transform: rotateZ(-45deg) skew(20deg, 20deg);
-ms-transform: rotateZ(-45deg) skew(20deg, 20deg);
-o-transform: rotateZ(-45deg) skew(20deg, 20deg);
transform: rotateZ(-45deg) skew(20deg, 20deg);
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.decision>* {
-webkit-transform: skew(-20deg, -20deg) rotateZ(45deg) !important;
-moz-transform: skew(-20deg, -20deg) rotateZ(45deg) !important;
-ms-transform: skew(-20deg, -20deg) rotateZ(45deg) !important;
-o-transform: skew(-20deg, -20deg) rotateZ(45deg) !important;
transform: skew(-20deg, -20deg) rotateZ(45deg) !important;
}
.decisionTitle {
padding: 10px;
margin: auto;
cursor: move;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.item:hover {
background-color: #5c96bc;
color: white;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 250px;
top: 100px;
}
#state3 {
left: 100px;
top: 250px;
}
.title {
padding: 10px;
cursor: move;
/*background-color:white;
opacity:0.8;
padding:0.3em;
border-radius:0.5em;
border:1px solid #346789;
cursor:pointer;
-webkit-transition:background-color 0.25s ease-in;
-moz-transition:background-color 0.25s ease-in;
transition:background-color 0.25s ease-in;
*/
}
.connect {
/* width: 100%;
height: 20px;
background-color: white;
cursor: pointer;
*/
position: absolute;
bottom: 37%;
right: 5px;
width: 1em;
height: 1em;
background-color: orange;
cursor: pointer;
box-shadow: 0px 0px 2px black;
-webkit-transition: -webkit-box-shadow 0.25s ease-in;
-moz-transition: -moz-box-shadow 0.25s ease-in;
transition: box-shadow 0.25s ease-in;
}
#target {
border: #c0c0c0 solid 1px;
background-color: #f2f2f2;
width: 100px;
height: 100px;
}
.menu {
position: absolute;
display: none;
border: #c0c0c0 solid 1px;
font-family: calibri, arial, helvetica, sans serif;
}
div .menuOption {
padding: 4px 8px;
background-color: #f0f0f0;
}
div .active:hover {
cursor: pointer;
background-color: #99cb33;
color: #ffffff;
}
div .inactive {
color: #c0c0c0;
}
.ui-resizable-handle {
width: 1px;
height: 1px;
background-color: #000000;
border: 1px solid #000000;
}
#graphContainer {
border: 1px solid gray;
width: 600px;
height: 600px;
}
#container {
border: 1px solid gray;
width: 600px;
height: 600px;
}
#propertygrid {
border: 1px solid gray;
width: 200px;
height: 200px;
}
#fccontainer {
border: 1px solid gray;
width: 600px;
height: 600px;
}