stateMachineDemo.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. ;(function() {
  2. var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
  3. var R,G,B;
  4. R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
  5. G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
  6. B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
  7. curColourIndex = curColourIndex + 1;
  8. if (curColourIndex > maxColourIndex) curColourIndex = 1;
  9. return "rgb(" + R + "," + G + "," + B + ")";
  10. };
  11. window.jsPlumbDemo = {
  12. init :function() {
  13. jsPlumb.Defaults.Endpoint = ["Dot", {radius:2}];
  14. jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"#42a62c", lineWidth:2 };
  15. jsPlumb.Defaults.ConnectionOverlays = [
  16. [ "Arrow", {
  17. location:1,
  18. id:"arrow",
  19. length:14,
  20. foldback:0.8
  21. } ],
  22. [ "Label", { label:"FOO", id:"label" }]
  23. ];
  24. // initialise draggable elements. note: jsPlumb does not do this by default from version 1.3.4 onwards.
  25. jsPlumb.draggable(jsPlumb.getSelector(".w"));
  26. // bind a click listener to each connection; the connection is deleted.
  27. jsPlumb.bind("click", function(c) {
  28. jsPlumb.detach(c);
  29. });
  30. // hand off to the library specific demo code here. not my ideal, but to write common code
  31. // is less helpful for everyone, because all developers just like to copy stuff, right?
  32. // make each ".ep" div a source and give it some parameters to work with. here we tell it
  33. // to use a Continuous anchor and the StateMachine connectors, and also we give it the
  34. // connector's paint style. note that in this demo the strokeStyle is dynamically generated,
  35. // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
  36. // would recommend you do.
  37. jsPlumbDemo.initEndpoints(nextColour);
  38. jsPlumb.bind("jsPlumbConnection", function(conn) {
  39. conn.connection.setPaintStyle({strokeStyle:nextColour()});
  40. conn.connection.getOverlay("label").setLabel(conn.connection.id);
  41. });
  42. // jsPlumb.connect({source:"opened", target:"olga",anchor:"Continuous"});
  43. // jsPlumb.connect({source:"olga", target:"inperson",anchor:"Continuous"});
  44. /* jsPlumb.connect({source:"nicola", target:"inperson",anchor:"Continuous"});
  45. jsPlumb.connect({source:"olga", target:"nicola",anchor:"Continuous"});
  46. jsPlumb.connect({source:"inperson", target:"rejected",anchor:"Continuous"});*/
  47. }
  48. };
  49. })();