123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438 |
- <!DOCTYPE html>
- <!-- saved from url=(0040)http://jsplumb.org/jquery/chartDemo.html -->
- <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
- <title>Workflow 2</title>
- <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
- <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
- <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.6/jquery.jsPlumb-1.2.6-RC1.js"></script>
- <script type="text/javascript" src='jquery.mockjax.js'></script>
- <style type="text/css">
- workflow {
- width:800px;
- display:block;
- position:relative;
- }
-
- wfdiagram {
- width:100%;
- position:absolute;
- display:block;
- z-index:200;
- }
- wfbox {
- display:block;
- position:absolute;
- top:50%;
- left:50%;
- margin:3em 0 0 3em;
- width:6em;
- height:4em;
- padding-top:2em;
- z-index:300;
- color:black;
- font-family:helvetica, sans;
- font-size:0.9em;
- text-align:center;
- background-color:#eedd33;
- opacity:0.8;
- filter:alpha(opacity=80);
- cursor: pointer;
- box-shadow: 2px 2px 19px #AAA;
- -o-box-shadow: 2px 2px 19px #AAA;
- -webkit-box-shadow: 2px 2px 19px #AAA;
- -moz-box-shadow: 2px 2px 19px #AAA;
- }
- wfblock {
- width: 100%;
- min-height: 150px;
- display: block;
- vertical-align: middle;
- text-align: center;
- position: relative;
- clear:both;
- float:left;
- }
- wfchilddiagram {
- display: block;
- float:left;
- }
- ._2kids{
- width:50%;
- }
- ._3kids{
- width:33%;
- }
- ._4kids{
- width:25%;
- }
- ._5kids{
- width:19.9%;
- }
- ._6kids{
- width:16.6%;
- }
- ._7kids{
- width:14.28%;
- }
- ._8kids{
- width:12.5%;
- }
-
- wfblock.oneFirst {
- border: 1px dashed gray;
- }
-
- /* Templates */
- .menu_template {
- display:none;
- }
-
- /* Workflow Block Menu */
- wfblockmenu {
- position: absolute;
- top: 0px;
- right: 0px;
- width: 15px;
- height: 15px;
- background-color: #1B1B1B;
- z-index: 500;
- opacity: 0.8;
- filter: alpha(opacity=80);
- -webkit-border-bottom-left-radius: 10px;
- border-bottom-left-radius: 10px 10px;
- }
- wfmenupanel {
- position: absolute;
- top: 0px;
- right: -106px;
- width: 100px;
- min-height: 35px;
- padding: 3px 3px;
- -webkit-border-top-right-radius: 5px;
- -webkit-border-bottom-left-radius: 5px;
- -webkit-border-top-right-radius: 5px;
- -moz-border-radius-topright: 5px;
- -moz-border-radius-bottomleft: 5px;
- -moz-border-radius-bottomright: 5px;
- border-top-right-radius: 5px;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
-
- background-color: black;
- box-shadow: 2px 2px 19px #AAA;
- -o-box-shadow: 2px 2px 19px #AAA;
- -webkit-box-shadow: 2px 2px 19px #AAA;
- -moz-box-shadow: 2px 2px 19px #AAA;
- overflow: visible;
- }
- wfmenubutton {
- display: block;
- width: 100%;
- height: 20px;
- margin: 2px 0px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- font-size: 15px;
- font-weight: bold;
- color: #FC3;
-
- }
- wfmenubutton.hover {
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- background-color: rgba(240, 230, 40, 0.65);
- -webkit-box-shadow: 0 0 1em rgba(240, 230, 40, 1);
- -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 1.0);
- box-shadow: 0 0 1em rgba(0, 0, 0, 1.0);
- }
- wfmenubutton.on {
- background-color : rgba(0, 0, 0, 0.40);
- }
- </style>
-
- <script type="text/javascript">
- var rand = function(n){ return ( Math.floor ( Math.random ( ) * n + 1 ) ); }
- var BoxTypes = {"wf_box" : 0, "wf_end" : 1, "wf_child" : 2};
- ////////////////
-
-
- var diag1 = function(){
- return [
- {type:BoxTypes.wf_box,name:'box1',id:1},
- {type:BoxTypes.wf_box,name:'box2',id:2},
- {type:BoxTypes.wf_box,name:'box3',id:3},
- {type:BoxTypes.wf_end,name:'',id:1}
- ];
- }
- var diag2 = function(){
- return [
- {type:BoxTypes.wf_box,name:'box1',id:1},
- {type:BoxTypes.wf_child,name:'',id:1},
- {type:BoxTypes.wf_box,name:'box2',id:2},
- {type:BoxTypes.wf_box,name:'box3',id:3},
- {type:BoxTypes.wf_end,name:'',id:2},
- {type:BoxTypes.wf_child,name:'',id:1},
- {type:BoxTypes.wf_box,name:'box4',id:4},
- {type:BoxTypes.wf_end,name:'',id:4},
- {type:BoxTypes.wf_box,name:'box5',id:5},
- {type: BoxTypes.wf_end,name:'',id:1}
- ];
- }
- var diag3 = function(){
- return [
- {type: BoxTypes.wf_box,name:'box1',id:1},
- {type: BoxTypes.wf_child,name:'',id:1},
- {type: BoxTypes.wf_box,name:'box2',id:2},
- {type: BoxTypes.wf_box,name:'box3',id:3},
- {type: BoxTypes.wf_end,name:'',id:2},
- {type: BoxTypes.wf_child,name:'',id:1},
- {type: BoxTypes.wf_box,name:'box4',id:4},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box5',id:5},
- {type: BoxTypes.wf_end,name:'',id:5},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box6',id:6},
- {type: BoxTypes.wf_end,name:'',id:6},
- {type: BoxTypes.wf_end,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box7',id:7},
- {type: BoxTypes.wf_end,name:'',id:1},
- ]
- }
- var diag4 = function(){
- return [
- {type: BoxTypes.wf_box,name:'box1',id:1},
- {type: BoxTypes.wf_child,name:'',id:1},
- {type: BoxTypes.wf_box,name:'box2',id:2},
- {type: BoxTypes.wf_box,name:'box3',id:3},
- {type: BoxTypes.wf_end,name:'',id:2},
- {type: BoxTypes.wf_child,name:'',id:1},
- {type: BoxTypes.wf_box,name:'box4',id:4},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box5',id:5},
- {type: BoxTypes.wf_box,name:'box5A',id:56},
- {type: BoxTypes.wf_end,name:'',id:5},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box6',id:6},
- {type: BoxTypes.wf_end,name:'',id:6},
- {type: BoxTypes.wf_end,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box7',id:7},
- {type: BoxTypes.wf_end,name:'',id:1},
- ]
- }
- var diag5 = function(){
- return [
- {type: BoxTypes.wf_box,name:'box1',id:1},
- {type: BoxTypes.wf_child,name:'',id:1},
- {type: BoxTypes.wf_box,name:'box2',id:2},
- {type: BoxTypes.wf_box,name:'box3',id:3},
- {type: BoxTypes.wf_box,name:'box31',id:31},
- {type: BoxTypes.wf_box,name:'box32',id:32},
- {type: BoxTypes.wf_box,name:'box33',id:33},
- {type: BoxTypes.wf_end,name:'',id:2},
- {type: BoxTypes.wf_child,name:'',id:1},
- {type: BoxTypes.wf_box,name:'box4',id:4,attr:'oneFirst'},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box5',id:5},
- {type: BoxTypes.wf_box,name:'box5A',id:56},
- {type: BoxTypes.wf_end,name:'',id:5},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box6',id:6},
- {type: BoxTypes.wf_box,name:'box62',id:62},
- {type: BoxTypes.wf_box,name:'box63',id:63},
- {type: BoxTypes.wf_end,name:'',id:6},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box4_3',id:43},
- {type: BoxTypes.wf_box,name:'box4_32',id:432},
- {type: BoxTypes.wf_end,name:'',id:43},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box4_4',id:44},
- {type: BoxTypes.wf_box,name:'box4_42',id:442},
- {type: BoxTypes.wf_end,name:'',id:44},
- {type: BoxTypes.wf_child,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box4_5',id:45},
- {type: BoxTypes.wf_box,name:'box4_52',id:452},
- {type: BoxTypes.wf_end,name:'',id:45},
- {type: BoxTypes.wf_box,name:'box4_2',id:42},
- {type: BoxTypes.wf_end,name:'',id:4},
- {type: BoxTypes.wf_box,name:'box7',id:7},
- {type: BoxTypes.wf_end,name:'',id:1}
- ]
- }
-
- $.mockjax({
- url: '/api/load_workflow',
- status: 200,
- responseTime: 100,
- contentType: 'text/json',
- dataType: 'json',
- response: function(){
- this.responseText = diag1();
- }
- });
- //////////////
- $(document).ready( function(){
- document.onselectstart = function () { return false; };
- PrepereWorkFlowBlockMenu();
- $.getJSON('/api/load_workflow', function(data) {
- CreateWorkflow(data);
- });
- });
- var LastBox = function(index,elem){
- var a = $(elem).children('wfblock:last').children('wfbox');
- if (a.size() >= 1){
- return a.last().attr('id');
- }
- else
- {
- return $(elem).children('wfblock:last').children('wfchilddiagram').map(LastBox).get();
- }
- }
- var FindConnectors = function(json_data,i){
- var connectors = [];
- if (json_data[parseInt(i)-1].type == BoxTypes.wf_end){
- var child_end = json_data[parseInt(i)-1];
- var child_start = child_end.id;
- var j = parseInt(i);
- return $('#wf_box'+json_data[i].id).parent('wfblock').prev().children('wfchilddiagram').map(LastBox).get();
- }
-
- else
- connectors.push('wf_box'+json_data[i-1].id);
- return connectors;
- }
- var FindChildren = function(json_data,i){
- i = parseInt(i);
- var children = [];
- var this_box = json_data[i];
- if (json_data.length >= i && json_data[i+1].type == BoxTypes.wf_child)
- {
- var child_i=i+1;
- var child_box = json_data[child_i];
- while (child_box.type != BoxTypes.wf_end || child_box.id != this_box.id){
- if (child_box.type == BoxTypes.wf_child && child_box.id == this_box.id){
- children.push(
- {
- id:'wf_child_diag'+json_data[child_i+1].id
- //attr:(json_data[child_i].attr || '').split(',')
- }
- );
- }
- child_i++;
- child_box = json_data[child_i];
- }
- }
-
- return children;
- }
- var PrepereWorkFlowBlockMenu = function(){
- $('wfblockmenu.menu_template').hover(
- function(){
- $(this).children('wfmenupanel').show();
- },
- function(){
- $(this).children('wfmenupanel').hide();
- }
- )
- .children('wfmenupanel').hide();
- $('wfblockmenu.menu_template').find('wfmenubutton')
- .hover(
- function(){
- $(this).addClass('hover')
- },
- function(){
- $(this).removeClass('hover')
- }
- )
- }
-
- var CreateWorkflow = function(json_data){
- jsPlumb.Defaults.Connector = new jsPlumb.Connectors.Straight();
- //jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
- jsPlumb.Defaults.PaintStyle = { strokeStyle:'gray', lineWidth:2 };
- jsPlumb.Defaults.EndpointStyle = { radius:5, fillStyle:'gray' };
- jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
- var _makeOverlay = function() { return new jsPlumb.Overlays.Arrow({foldback:0.5, fillStyle:'gray', location:0.5, width:10}); };
-
- var wfdiag = $('wfdiagram');
- for (var i in json_data){
- if (json_data[i].type == BoxTypes.wf_box){
- var elemID = 'wf_box'+json_data[i].id;
- var block = $("<wfblock></wfblock>").appendTo(wfdiag);
- var elem = $("<wfbox></wfbox>")
- .attr('id',elemID)
- .text(json_data[i].name)
- .appendTo(block);
- if (i > 0){
- var conns = FindConnectors(json_data,i);
- for (var j in conns){
- jsPlumb.connect({source:conns[j], target:elemID, overlays:[_makeOverlay()]});
- }
-
- }
- var kids = FindChildren(json_data,i);
- if (kids.length > 0){
- var block = $("<wfblock></wfblock>")
- .addClass(json_data[i].attr)
- .hover(
- function(){
- //$('wfblockmenu').hide();
- $(this).children('wfblockmenu').show();
- },
- function(){
- $(this).children('wfblockmenu').hide();
- }
- )
- .appendTo(wfdiag);
-
- var wfb_menu = $('wfblockmenu.menu_template').clone(true,true)
- .removeClass('menu_template')
- .hide()
- .appendTo(block);
- //CreateWorkFlowBlockMenu(wfb_menu);
- for (var j in kids){
- var elem = $("<wfchilddiagram></wfchilddiagram>")
- .addClass('_'+kids.length+'kids')
- .attr('id',kids[j].id)
- .attr('parent_diag',wfdiag.attr('id'))
- .appendTo(block);
-
- }
- }
-
- }
- if (json_data[i].type == BoxTypes.wf_child){
- wfdiag = $('#wf_child_diag'+json_data[parseInt(i)+1].id);
- }
- if (json_data.length >= i && json_data[i].type == BoxTypes.wf_end){
- wfdiag = $('#'+wfdiag.attr('parent_diag'));
- }
- }
- }
- </script>
-
-
- </head>
- <body onunload="jsPlumb.unload();">
- <workflow><wfdiagram id='wf_main_diag'></wfdiagram></workflow>
- <wfblockmenu class='menu_template'>
- <wfmenupanel>
- <wfmenubutton></wfmenubutton>
- <wfmenubutton></wfmenubutton>
- <wfmenubutton></wfmenubutton>
- </wfmenupanel>
- </wfblockmenu>
- <pre style='border:2px dashed #9683a4; background-color:#b9acc2; position:absolute;left:550px;' id='wf_code'>
-
- </pre>
- </body>
- </html>
|