issue59_test.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0040)http://jsplumb.org/jquery/chartDemo.html -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  4. <title>Workflow 2</title>
  5. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
  8. <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
  9. <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
  10. <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
  11. <script type="text/javascript" src="../js/1.2.6/jquery.jsPlumb-1.2.6-RC1.js"></script>
  12. <script type="text/javascript" src='jquery.mockjax.js'></script>
  13. <style type="text/css">
  14. workflow {
  15. width:800px;
  16. display:block;
  17. position:relative;
  18. }
  19. wfdiagram {
  20. width:100%;
  21. position:absolute;
  22. display:block;
  23. z-index:200;
  24. }
  25. wfbox {
  26. display:block;
  27. position:absolute;
  28. top:50%;
  29. left:50%;
  30. margin:3em 0 0 3em;
  31. width:6em;
  32. height:4em;
  33. padding-top:2em;
  34. z-index:300;
  35. color:black;
  36. font-family:helvetica, sans;
  37. font-size:0.9em;
  38. text-align:center;
  39. background-color:#eedd33;
  40. opacity:0.8;
  41. filter:alpha(opacity=80);
  42. cursor: pointer;
  43. box-shadow: 2px 2px 19px #AAA;
  44. -o-box-shadow: 2px 2px 19px #AAA;
  45. -webkit-box-shadow: 2px 2px 19px #AAA;
  46. -moz-box-shadow: 2px 2px 19px #AAA;
  47. }
  48. wfblock {
  49. width: 100%;
  50. min-height: 150px;
  51. display: block;
  52. vertical-align: middle;
  53. text-align: center;
  54. position: relative;
  55. clear:both;
  56. float:left;
  57. }
  58. wfchilddiagram {
  59. display: block;
  60. float:left;
  61. }
  62. ._2kids{
  63. width:50%;
  64. }
  65. ._3kids{
  66. width:33%;
  67. }
  68. ._4kids{
  69. width:25%;
  70. }
  71. ._5kids{
  72. width:19.9%;
  73. }
  74. ._6kids{
  75. width:16.6%;
  76. }
  77. ._7kids{
  78. width:14.28%;
  79. }
  80. ._8kids{
  81. width:12.5%;
  82. }
  83. wfblock.oneFirst {
  84. border: 1px dashed gray;
  85. }
  86. /* Templates */
  87. .menu_template {
  88. display:none;
  89. }
  90. /* Workflow Block Menu */
  91. wfblockmenu {
  92. position: absolute;
  93. top: 0px;
  94. right: 0px;
  95. width: 15px;
  96. height: 15px;
  97. background-color: #1B1B1B;
  98. z-index: 500;
  99. opacity: 0.8;
  100. filter: alpha(opacity=80);
  101. -webkit-border-bottom-left-radius: 10px;
  102. border-bottom-left-radius: 10px 10px;
  103. }
  104. wfmenupanel {
  105. position: absolute;
  106. top: 0px;
  107. right: -106px;
  108. width: 100px;
  109. min-height: 35px;
  110. padding: 3px 3px;
  111. -webkit-border-top-right-radius: 5px;
  112. -webkit-border-bottom-left-radius: 5px;
  113. -webkit-border-top-right-radius: 5px;
  114. -moz-border-radius-topright: 5px;
  115. -moz-border-radius-bottomleft: 5px;
  116. -moz-border-radius-bottomright: 5px;
  117. border-top-right-radius: 5px;
  118. border-bottom-left-radius: 5px;
  119. border-bottom-right-radius: 5px;
  120. background-color: black;
  121. box-shadow: 2px 2px 19px #AAA;
  122. -o-box-shadow: 2px 2px 19px #AAA;
  123. -webkit-box-shadow: 2px 2px 19px #AAA;
  124. -moz-box-shadow: 2px 2px 19px #AAA;
  125. overflow: visible;
  126. }
  127. wfmenubutton {
  128. display: block;
  129. width: 100%;
  130. height: 20px;
  131. margin: 2px 0px;
  132. -webkit-border-radius: 4px;
  133. -moz-border-radius: 4px;
  134. border-radius: 4px;
  135. font-size: 15px;
  136. font-weight: bold;
  137. color: #FC3;
  138. }
  139. wfmenubutton.hover {
  140. -webkit-border-radius: 4px;
  141. -moz-border-radius: 4px;
  142. border-radius: 4px;
  143. background-color: rgba(240, 230, 40, 0.65);
  144. -webkit-box-shadow: 0 0 1em rgba(240, 230, 40, 1);
  145. -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 1.0);
  146. box-shadow: 0 0 1em rgba(0, 0, 0, 1.0);
  147. }
  148. wfmenubutton.on {
  149. background-color : rgba(0, 0, 0, 0.40);
  150. }
  151. </style>
  152. <script type="text/javascript">
  153. var rand = function(n){ return ( Math.floor ( Math.random ( ) * n + 1 ) ); }
  154. var BoxTypes = {"wf_box" : 0, "wf_end" : 1, "wf_child" : 2};
  155. ////////////////
  156. var diag1 = function(){
  157. return [
  158. {type:BoxTypes.wf_box,name:'box1',id:1},
  159. {type:BoxTypes.wf_box,name:'box2',id:2},
  160. {type:BoxTypes.wf_box,name:'box3',id:3},
  161. {type:BoxTypes.wf_end,name:'',id:1}
  162. ];
  163. }
  164. var diag2 = function(){
  165. return [
  166. {type:BoxTypes.wf_box,name:'box1',id:1},
  167. {type:BoxTypes.wf_child,name:'',id:1},
  168. {type:BoxTypes.wf_box,name:'box2',id:2},
  169. {type:BoxTypes.wf_box,name:'box3',id:3},
  170. {type:BoxTypes.wf_end,name:'',id:2},
  171. {type:BoxTypes.wf_child,name:'',id:1},
  172. {type:BoxTypes.wf_box,name:'box4',id:4},
  173. {type:BoxTypes.wf_end,name:'',id:4},
  174. {type:BoxTypes.wf_box,name:'box5',id:5},
  175. {type: BoxTypes.wf_end,name:'',id:1}
  176. ];
  177. }
  178. var diag3 = function(){
  179. return [
  180. {type: BoxTypes.wf_box,name:'box1',id:1},
  181. {type: BoxTypes.wf_child,name:'',id:1},
  182. {type: BoxTypes.wf_box,name:'box2',id:2},
  183. {type: BoxTypes.wf_box,name:'box3',id:3},
  184. {type: BoxTypes.wf_end,name:'',id:2},
  185. {type: BoxTypes.wf_child,name:'',id:1},
  186. {type: BoxTypes.wf_box,name:'box4',id:4},
  187. {type: BoxTypes.wf_child,name:'',id:4},
  188. {type: BoxTypes.wf_box,name:'box5',id:5},
  189. {type: BoxTypes.wf_end,name:'',id:5},
  190. {type: BoxTypes.wf_child,name:'',id:4},
  191. {type: BoxTypes.wf_box,name:'box6',id:6},
  192. {type: BoxTypes.wf_end,name:'',id:6},
  193. {type: BoxTypes.wf_end,name:'',id:4},
  194. {type: BoxTypes.wf_box,name:'box7',id:7},
  195. {type: BoxTypes.wf_end,name:'',id:1},
  196. ]
  197. }
  198. var diag4 = function(){
  199. return [
  200. {type: BoxTypes.wf_box,name:'box1',id:1},
  201. {type: BoxTypes.wf_child,name:'',id:1},
  202. {type: BoxTypes.wf_box,name:'box2',id:2},
  203. {type: BoxTypes.wf_box,name:'box3',id:3},
  204. {type: BoxTypes.wf_end,name:'',id:2},
  205. {type: BoxTypes.wf_child,name:'',id:1},
  206. {type: BoxTypes.wf_box,name:'box4',id:4},
  207. {type: BoxTypes.wf_child,name:'',id:4},
  208. {type: BoxTypes.wf_box,name:'box5',id:5},
  209. {type: BoxTypes.wf_box,name:'box5A',id:56},
  210. {type: BoxTypes.wf_end,name:'',id:5},
  211. {type: BoxTypes.wf_child,name:'',id:4},
  212. {type: BoxTypes.wf_box,name:'box6',id:6},
  213. {type: BoxTypes.wf_end,name:'',id:6},
  214. {type: BoxTypes.wf_end,name:'',id:4},
  215. {type: BoxTypes.wf_box,name:'box7',id:7},
  216. {type: BoxTypes.wf_end,name:'',id:1},
  217. ]
  218. }
  219. var diag5 = function(){
  220. return [
  221. {type: BoxTypes.wf_box,name:'box1',id:1},
  222. {type: BoxTypes.wf_child,name:'',id:1},
  223. {type: BoxTypes.wf_box,name:'box2',id:2},
  224. {type: BoxTypes.wf_box,name:'box3',id:3},
  225. {type: BoxTypes.wf_box,name:'box31',id:31},
  226. {type: BoxTypes.wf_box,name:'box32',id:32},
  227. {type: BoxTypes.wf_box,name:'box33',id:33},
  228. {type: BoxTypes.wf_end,name:'',id:2},
  229. {type: BoxTypes.wf_child,name:'',id:1},
  230. {type: BoxTypes.wf_box,name:'box4',id:4,attr:'oneFirst'},
  231. {type: BoxTypes.wf_child,name:'',id:4},
  232. {type: BoxTypes.wf_box,name:'box5',id:5},
  233. {type: BoxTypes.wf_box,name:'box5A',id:56},
  234. {type: BoxTypes.wf_end,name:'',id:5},
  235. {type: BoxTypes.wf_child,name:'',id:4},
  236. {type: BoxTypes.wf_box,name:'box6',id:6},
  237. {type: BoxTypes.wf_box,name:'box62',id:62},
  238. {type: BoxTypes.wf_box,name:'box63',id:63},
  239. {type: BoxTypes.wf_end,name:'',id:6},
  240. {type: BoxTypes.wf_child,name:'',id:4},
  241. {type: BoxTypes.wf_box,name:'box4_3',id:43},
  242. {type: BoxTypes.wf_box,name:'box4_32',id:432},
  243. {type: BoxTypes.wf_end,name:'',id:43},
  244. {type: BoxTypes.wf_child,name:'',id:4},
  245. {type: BoxTypes.wf_box,name:'box4_4',id:44},
  246. {type: BoxTypes.wf_box,name:'box4_42',id:442},
  247. {type: BoxTypes.wf_end,name:'',id:44},
  248. {type: BoxTypes.wf_child,name:'',id:4},
  249. {type: BoxTypes.wf_box,name:'box4_5',id:45},
  250. {type: BoxTypes.wf_box,name:'box4_52',id:452},
  251. {type: BoxTypes.wf_end,name:'',id:45},
  252. {type: BoxTypes.wf_box,name:'box4_2',id:42},
  253. {type: BoxTypes.wf_end,name:'',id:4},
  254. {type: BoxTypes.wf_box,name:'box7',id:7},
  255. {type: BoxTypes.wf_end,name:'',id:1}
  256. ]
  257. }
  258. $.mockjax({
  259. url: '/api/load_workflow',
  260. status: 200,
  261. responseTime: 100,
  262. contentType: 'text/json',
  263. dataType: 'json',
  264. response: function(){
  265. this.responseText = diag1();
  266. }
  267. });
  268. //////////////
  269. $(document).ready( function(){
  270. document.onselectstart = function () { return false; };
  271. PrepereWorkFlowBlockMenu();
  272. $.getJSON('/api/load_workflow', function(data) {
  273. CreateWorkflow(data);
  274. });
  275. });
  276. var LastBox = function(index,elem){
  277. var a = $(elem).children('wfblock:last').children('wfbox');
  278. if (a.size() >= 1){
  279. return a.last().attr('id');
  280. }
  281. else
  282. {
  283. return $(elem).children('wfblock:last').children('wfchilddiagram').map(LastBox).get();
  284. }
  285. }
  286. var FindConnectors = function(json_data,i){
  287. var connectors = [];
  288. if (json_data[parseInt(i)-1].type == BoxTypes.wf_end){
  289. var child_end = json_data[parseInt(i)-1];
  290. var child_start = child_end.id;
  291. var j = parseInt(i);
  292. return $('#wf_box'+json_data[i].id).parent('wfblock').prev().children('wfchilddiagram').map(LastBox).get();
  293. }
  294. else
  295. connectors.push('wf_box'+json_data[i-1].id);
  296. return connectors;
  297. }
  298. var FindChildren = function(json_data,i){
  299. i = parseInt(i);
  300. var children = [];
  301. var this_box = json_data[i];
  302. if (json_data.length >= i && json_data[i+1].type == BoxTypes.wf_child)
  303. {
  304. var child_i=i+1;
  305. var child_box = json_data[child_i];
  306. while (child_box.type != BoxTypes.wf_end || child_box.id != this_box.id){
  307. if (child_box.type == BoxTypes.wf_child && child_box.id == this_box.id){
  308. children.push(
  309. {
  310. id:'wf_child_diag'+json_data[child_i+1].id
  311. //attr:(json_data[child_i].attr || '').split(',')
  312. }
  313. );
  314. }
  315. child_i++;
  316. child_box = json_data[child_i];
  317. }
  318. }
  319. return children;
  320. }
  321. var PrepereWorkFlowBlockMenu = function(){
  322. $('wfblockmenu.menu_template').hover(
  323. function(){
  324. $(this).children('wfmenupanel').show();
  325. },
  326. function(){
  327. $(this).children('wfmenupanel').hide();
  328. }
  329. )
  330. .children('wfmenupanel').hide();
  331. $('wfblockmenu.menu_template').find('wfmenubutton')
  332. .hover(
  333. function(){
  334. $(this).addClass('hover')
  335. },
  336. function(){
  337. $(this).removeClass('hover')
  338. }
  339. )
  340. }
  341. var CreateWorkflow = function(json_data){
  342. jsPlumb.Defaults.Connector = new jsPlumb.Connectors.Straight();
  343. //jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  344. jsPlumb.Defaults.PaintStyle = { strokeStyle:'gray', lineWidth:2 };
  345. jsPlumb.Defaults.EndpointStyle = { radius:5, fillStyle:'gray' };
  346. jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
  347. var _makeOverlay = function() { return new jsPlumb.Overlays.Arrow({foldback:0.5, fillStyle:'gray', location:0.5, width:10}); };
  348. var wfdiag = $('wfdiagram');
  349. for (var i in json_data){
  350. if (json_data[i].type == BoxTypes.wf_box){
  351. var elemID = 'wf_box'+json_data[i].id;
  352. var block = $("<wfblock></wfblock>").appendTo(wfdiag);
  353. var elem = $("<wfbox></wfbox>")
  354. .attr('id',elemID)
  355. .text(json_data[i].name)
  356. .appendTo(block);
  357. if (i > 0){
  358. var conns = FindConnectors(json_data,i);
  359. for (var j in conns){
  360. jsPlumb.connect({source:conns[j], target:elemID, overlays:[_makeOverlay()]});
  361. }
  362. }
  363. var kids = FindChildren(json_data,i);
  364. if (kids.length > 0){
  365. var block = $("<wfblock></wfblock>")
  366. .addClass(json_data[i].attr)
  367. .hover(
  368. function(){
  369. //$('wfblockmenu').hide();
  370. $(this).children('wfblockmenu').show();
  371. },
  372. function(){
  373. $(this).children('wfblockmenu').hide();
  374. }
  375. )
  376. .appendTo(wfdiag);
  377. var wfb_menu = $('wfblockmenu.menu_template').clone(true,true)
  378. .removeClass('menu_template')
  379. .hide()
  380. .appendTo(block);
  381. //CreateWorkFlowBlockMenu(wfb_menu);
  382. for (var j in kids){
  383. var elem = $("<wfchilddiagram></wfchilddiagram>")
  384. .addClass('_'+kids.length+'kids')
  385. .attr('id',kids[j].id)
  386. .attr('parent_diag',wfdiag.attr('id'))
  387. .appendTo(block);
  388. }
  389. }
  390. }
  391. if (json_data[i].type == BoxTypes.wf_child){
  392. wfdiag = $('#wf_child_diag'+json_data[parseInt(i)+1].id);
  393. }
  394. if (json_data.length >= i && json_data[i].type == BoxTypes.wf_end){
  395. wfdiag = $('#'+wfdiag.attr('parent_diag'));
  396. }
  397. }
  398. }
  399. </script>
  400. </head>
  401. <body onunload="jsPlumb.unload();">
  402. <workflow><wfdiagram id='wf_main_diag'></wfdiagram></workflow>
  403. <wfblockmenu class='menu_template'>
  404. <wfmenupanel>
  405. <wfmenubutton></wfmenubutton>
  406. <wfmenubutton></wfmenubutton>
  407. <wfmenubutton></wfmenubutton>
  408. </wfmenupanel>
  409. </wfblockmenu>
  410. <pre style='border:2px dashed #9683a4; background-color:#b9acc2; position:absolute;left:550px;' id='wf_code'>
  411. </pre>
  412. </body>
  413. </html>