flowchartConnectorsDemo.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. jsPlumb.importDefaults({
  5. // default drag options
  6. DragOptions : { cursor: 'pointer', zIndex:2000 },
  7. // default to blue at one end and green at the other
  8. EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
  9. // blue endpoints 7 px; green endpoints 11.
  10. Endpoints : [ [ "Dot", {radius:7} ], [ "Dot", { radius:11 } ]],
  11. // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
  12. // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
  13. ConnectionOverlays : [
  14. [ "Arrow", { location:0.9 } ],
  15. [ "Label", {
  16. location:0.1,
  17. id:"label",
  18. cssClass:"aLabel"
  19. }]
  20. ]
  21. });
  22. // this is the paint style for the connecting lines..
  23. var connectorPaintStyle = {
  24. lineWidth:5,
  25. strokeStyle:"#deea18",
  26. joinstyle:"round"
  27. },
  28. // .. and this is the hover style.
  29. connectorHoverStyle = {
  30. lineWidth:7,
  31. strokeStyle:"#2e2aF8"
  32. },
  33. // the definition of source endpoints (the small blue ones)
  34. sourceEndpoint = {
  35. endpoint:"Dot",
  36. paintStyle:{ fillStyle:"#225588",radius:7 },
  37. isSource:true,
  38. connector:[ "Flowchart", { stub:40 } ],
  39. connectorStyle:connectorPaintStyle,
  40. hoverPaintStyle:connectorHoverStyle,
  41. connectorHoverStyle:connectorHoverStyle,
  42. dragOptions:{},
  43. overlays:[
  44. [ "Label", {
  45. location:[0.5, 1.5],
  46. label:"Drag",
  47. cssClass:"endpointSourceLabel"
  48. } ]
  49. ]
  50. },
  51. // a source endpoint that sits at BottomCenter
  52. bottomSource = jsPlumb.extend( { anchor:"BottomCenter" }, sourceEndpoint),
  53. // the definition of target endpoints (will appear when the user drags a connection)
  54. targetEndpoint = {
  55. endpoint:"Dot",
  56. paintStyle:{ fillStyle:"#558822",radius:11 },
  57. hoverPaintStyle:connectorHoverStyle,
  58. maxConnections:-1,
  59. dropOptions:{ hoverClass:"hover", activeClass:"active" },
  60. isTarget:true,
  61. overlays:[
  62. [ "Label", { location:[0.5, -0.5], label:"Drop", cssClass:"endpointTargetLabel" } ]
  63. ]
  64. },
  65. init = function(connection) {
  66. connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
  67. };
  68. var allSourceEndpoints = [], allTargetEndpoints = [];
  69. _addEndpoints = function(toId, sourceAnchors, targetAnchors) {
  70. for (var i = 0; i < sourceAnchors.length; i++) {
  71. var sourceUUID = toId + sourceAnchors[i];
  72. allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID }));
  73. }
  74. for (var j = 0; j < targetAnchors.length; j++) {
  75. var targetUUID = toId + targetAnchors[j];
  76. allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor:targetAnchors[j], uuid:targetUUID }));
  77. }
  78. };
  79. _addEndpoints("window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);
  80. _addEndpoints("window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
  81. _addEndpoints("window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
  82. _addEndpoints("window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCenter"]);
  83. // listen for new connections; initialise them the same way we initialise the connections at startup.
  84. jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) {
  85. init(connInfo.connection);
  86. });
  87. // make all the window divs draggable
  88. jsPlumb.draggable(jsPlumb.getSelector(".window"));
  89. // connect a few up
  90. jsPlumb.connect({uuids:["window2BottomCenter", "window3TopCenter"]});
  91. jsPlumb.connect({uuids:["window2LeftMiddle", "window4LeftMiddle"]});
  92. jsPlumb.connect({uuids:["window4TopCenter", "window4RightMiddle"]});
  93. jsPlumb.connect({uuids:["window3RightMiddle", "window2RightMiddle"]});
  94. jsPlumb.connect({uuids:["window4BottomCenter", "window1TopCenter"]});
  95. jsPlumb.connect({uuids:["window3BottomCenter", "window1BottomCenter"]});
  96. //
  97. // listen for clicks on connections, and offer to delete connections on click.
  98. //
  99. jsPlumb.bind("click", function(conn, originalEvent) {
  100. if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
  101. jsPlumb.detach(conn);
  102. });
  103. }
  104. };
  105. })();