stateMachineDemo.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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.importDefaults({
  14. Endpoint : ["Dot", {radius:2}],
  15. HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth:2 },
  16. ConnectionOverlays : [
  17. [ "Arrow", {
  18. location:1,
  19. id:"arrow",
  20. length:14,
  21. foldback:0.8
  22. } ],
  23. [ "Label", { label:"FOO", id:"label" }]
  24. ]
  25. });
  26. // initialise draggable elements. note: jsPlumb does not do this by default from version 1.3.4 onwards.
  27. jsPlumb.draggable(jsPlumb.getSelector(".w"));
  28. // bind a click listener to each connection; the connection is deleted.
  29. jsPlumb.bind("click", function(c) {
  30. jsPlumb.detach(c);
  31. });
  32. // hand off to the library specific demo code here. not my ideal, but to write common code
  33. // is less helpful for everyone, because all developers just like to copy stuff, right?
  34. // make each ".ep" div a source and give it some parameters to work with. here we tell it
  35. // to use a Continuous anchor and the StateMachine connectors, and also we give it the
  36. // connector's paint style. note that in this demo the strokeStyle is dynamically generated,
  37. // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
  38. // would recommend you do.
  39. jsPlumbDemo.initEndpoints(nextColour);
  40. jsPlumb.bind("jsPlumbConnection", function(conn) {
  41. conn.connection.setPaintStyle({strokeStyle:nextColour()});
  42. conn.connection.getOverlay("label").setLabel(conn.connection.id);
  43. });
  44. jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
  45. dropOptions:{ hoverClass:"dragHover" },
  46. anchor:"Continuous"
  47. //anchor:"TopCenter"
  48. });
  49. }
  50. };
  51. })();