draggableConnectorsDemo.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. jsPlumb.importDefaults({
  5. DragOptions : { cursor: 'pointer', zIndex:2000 },
  6. PaintStyle : { strokeStyle:'#666' },
  7. EndpointStyle : { width:20, height:16, strokeStyle:'#666' },
  8. Endpoint : "Rectangle",
  9. Anchors : ["TopCenter", "TopCenter"]
  10. });
  11. var connections = [];
  12. var updateConnections = function(conn, remove) {
  13. if (!remove) connections.push(conn);
  14. else {
  15. var idx = -1;
  16. for (var i = 0; i < connections.length; i++) {
  17. if (connections[i] == conn) {
  18. idx = i; break;
  19. }
  20. }
  21. if (idx != -1) connections.splice(idx, 1);
  22. }
  23. if (connections.length > 0) {
  24. var s = "<span>current connections</span><br/><br/><table><tr><th>scope</th><th>source</th><th>target</th></tr>";
  25. for (var j = 0; j < connections.length; j++) {
  26. s = s + "<tr><td>" + connections[j].scope + "</td>" + "<td>" + connections[j].sourceId + "</td><td>" + connections[j].targetId + "</td></tr>";
  27. }
  28. jsPlumbDemo.showConnectionInfo(s);
  29. } else
  30. jsPlumbDemo.hideConnectionInfo();
  31. };
  32. jsPlumb.bind("jsPlumbConnection", function(e) {
  33. updateConnections(e.connection);
  34. });
  35. jsPlumb.bind("jsPlumbConnectionDetached", function(e) {
  36. updateConnections(e.connection, true);
  37. });
  38. var exampleDropOptions = {
  39. tolerance:'touch',
  40. hoverClass:'dropHover',
  41. activeClass:'dragActive'
  42. };
  43. /**
  44. first example endpoint. it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
  45. and target. the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
  46. 'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
  47. only 'exampleConnection' types can be dropped here.
  48. the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
  49. 5 pixels, and a gradient.
  50. */
  51. var exampleColor = "#00f";
  52. var exampleEndpoint = {
  53. endpoint:"Rectangle",
  54. paintStyle:{ width:25, height:21, fillStyle:exampleColor },
  55. isSource:true,
  56. reattach:true,
  57. scope:"blue rectangle",
  58. connectorStyle : {
  59. gradient:{stops:[[0, exampleColor], [0.5, "#09098e"], [1, exampleColor]]},
  60. lineWidth:5,
  61. strokeStyle:exampleColor,
  62. dashstyle:"2 2"
  63. },
  64. isTarget:true,
  65. beforeDrop:function(params) { return confirm("Connect " + params.sourceId + " to " + params.targetId + "?"); },
  66. dropOptions : exampleDropOptions
  67. };
  68. /**
  69. the second example uses a Dot of radius 15 as the endpoint marker, is both a source and target, and has scope
  70. 'exampleConnection2'.
  71. */
  72. var color2 = "#316b31";
  73. var exampleEndpoint2 = {
  74. endpoint:["Dot", { radius:15 }],
  75. paintStyle:{ fillStyle:color2 },
  76. isSource:true,
  77. scope:"green dot",
  78. connectorStyle:{ strokeStyle:color2, lineWidth:8 },
  79. connector: ["Bezier", { curviness:63 } ],
  80. maxConnections:3,
  81. isTarget:true,
  82. dropOptions : exampleDropOptions
  83. };
  84. /**
  85. the third example uses a Dot of radius 17 as the endpoint marker, is both a source and target, and has scope
  86. 'exampleConnection3'. it uses a Straight connector, and the Anchor is created here (bottom left corner) and never
  87. overriden, so it appears in the same place on every element.
  88. this example also demonstrates the beforeDetach interceptor, which allows you to intercept
  89. a connection detach and decide whether or not you wish to allow it to proceed.
  90. */
  91. var example3Color = "rgba(229,219,61,0.5)";
  92. var exampleEndpoint3 = {
  93. endpoint:["Dot", {radius:17} ],
  94. anchor:"BottomLeft",
  95. paintStyle:{ fillStyle:example3Color, opacity:0.5 },
  96. isSource:true,
  97. scope:'yellow dot',
  98. connectorStyle:{ strokeStyle:example3Color, lineWidth:4 },
  99. connector : "Straight",
  100. isTarget:true,
  101. dropOptions : exampleDropOptions,
  102. beforeDetach:function(conn) {
  103. return confirm("Detach connection?");
  104. }
  105. };
  106. // setup some empty endpoints. again note the use of the three-arg method to reuse all the parameters except the location
  107. // of the anchor (purely because we want to move the anchor around here; you could set it one time and forget about it though.)
  108. var e1 = jsPlumb.addEndpoint('window1', { anchor:[0.5, 1, 0, 1] }, exampleEndpoint2);
  109. //
  110. // here's an example of how the SelectiveAnchor stuff added to 1.2.3 works with
  111. // drag and drop connectors.
  112. //
  113. var anchors = [[1, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ];
  114. jsPlumb.addEndpoint("window1", { anchor:anchors }, exampleEndpoint);
  115. jsPlumb.addEndpoint('window2', { anchor:[0.5, 1, 0, 1] }, exampleEndpoint);
  116. jsPlumb.addEndpoint('window2', { anchor:"RightMiddle" }, exampleEndpoint2);
  117. jsPlumb.addEndpoint("window3", { anchor:[0.25, 0, 0, -1] }, exampleEndpoint);
  118. jsPlumb.addEndpoint("window3", { anchor:[0.75, 0, 0, -1] }, exampleEndpoint2);
  119. jsPlumb.addEndpoint("window4", { anchor:[1, 0.5, 1, 0] }, exampleEndpoint);
  120. jsPlumb.addEndpoint("window4", { anchor:[0.25, 0, 0, -1] }, exampleEndpoint2);
  121. // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
  122. //jsPlumb.draggable("window1");
  123. //jsPlumb.draggable(["window1", "window2"]);
  124. //jsPlumb.draggable($("#window1"));
  125. var divsWithWindowClass = jsPlumb.CurrentLibrary.getSelector(".window");
  126. jsPlumb.draggable(divsWithWindowClass);
  127. // add the third example using the '.window' class.
  128. jsPlumb.addEndpoint(divsWithWindowClass, exampleEndpoint3);
  129. // each library uses different syntax for event stuff, so it is handed off
  130. // to the draggableConnectorsDemo-<library>.js files.
  131. jsPlumbDemo.attachBehaviour();
  132. }
  133. };
  134. })();