dynamicAnchorsDemo.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. var sourceAnchors = [[0.2, 0, 0, -1], [1, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0] ],
  5. targetAnchors = [[0.6, 0, 0, -1], [1, 0.6, 1, 0], [0.4, 1, 0, 1], [0, 0.4, -1, 0] ],
  6. exampleColor = '#00f',
  7. exampleDropOptions = {
  8. tolerance:'touch',
  9. hoverClass:'dropHover',
  10. activeClass:'dragActive'
  11. },
  12. connector = [ "Bezier", { cssClass:"connectorClass", hoverClass:"connectorHoverClass" } ],
  13. connectorStyle = {
  14. gradient:{stops:[[0, exampleColor], [0.5, '#09098e'], [1, exampleColor]]},
  15. lineWidth:5,
  16. strokeStyle:exampleColor
  17. },
  18. hoverStyle = {
  19. strokeStyle:"#449999"
  20. },
  21. overlays = [ ["Diamond", { fillStyle:"#09098e", width:15, length:15 } ] ],
  22. endpoint = ["Dot", { cssClass:"endpointClass", radius:10, hoverClass:"endpointHoverClass" } ],
  23. endpointStyle = { fillStyle:exampleColor },
  24. anEndpoint = {
  25. endpoint:endpoint,
  26. paintStyle:endpointStyle,
  27. hoverPaintStyle:{ fillStyle:"#449999" },
  28. isSource:true,
  29. isTarget:true,
  30. maxConnections:-1,
  31. connector:connector,
  32. connectorStyle:connectorStyle,
  33. connectorHoverStyle:hoverStyle,
  34. connectorOverlays:overlays
  35. };
  36. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  37. var connections = {
  38. "window1":["window4"],
  39. "window3":["window1"],
  40. "window5":["window3"],
  41. "window6":["window5"],
  42. "window2":["window6"],
  43. "window4":["window2"]
  44. },
  45. endpoints = {},
  46. // ask jsPlumb for a selector for the window class
  47. divsWithWindowClass = jsPlumb.CurrentLibrary.getSelector(".window");
  48. // add endpoints to all of these - one for source, and one for target, configured so they don't sit
  49. // on top of each other.
  50. for (var i = 0 ; i < divsWithWindowClass.length; i++) {
  51. var id = jsPlumb.getId(divsWithWindowClass[i]);
  52. endpoints[id] = [
  53. // note the three-arg version of addEndpoint; lets you re-use some common settings easily.
  54. jsPlumb.addEndpoint(id, anEndpoint, {anchor:sourceAnchors}),
  55. jsPlumb.addEndpoint(id, anEndpoint, {anchor:targetAnchors})
  56. ];
  57. }
  58. // then connect everything using the connections map declared above.
  59. for (var e in endpoints) {
  60. if (connections[e]) {
  61. for (var j = 0; j < connections[e].length; j++) {
  62. jsPlumb.connect({
  63. source:endpoints[e][0],
  64. target:endpoints[connections[e][j]][1]
  65. });
  66. }
  67. }
  68. }
  69. // bind click listener; delete connections on click
  70. jsPlumb.bind("click", function(conn) {
  71. jsPlumb.detach(conn);
  72. });
  73. // bind beforeDetach interceptor: will be fired when the click handler above calls detach, and the user
  74. // will be prompted to confirm deletion.
  75. jsPlumb.bind("beforeDetach", function(conn) {
  76. return confirm("Delete connection?");
  77. });
  78. //
  79. // configure ".window" to be draggable. 'getSelector' is a jsPlumb convenience method that allows you to
  80. // write library-agnostic selectors; you could use your library's selector instead, eg.
  81. //
  82. // $(".window") jquery
  83. // $$(".window") mootools
  84. // Y.all(".window") yui3
  85. //
  86. jsPlumb.draggable(jsPlumb.getSelector(".window"));
  87. }
  88. };
  89. })();