makeSourceDemo.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. jsPlumb.Defaults.Container = $("body");
  5. jsPlumb.bind("click", function(conn) {
  6. jsPlumb.detach(conn);
  7. jsPlumb.removeEndpoint(conn.target, conn.endpoints[1]);
  8. });
  9. jsPlumb.draggable($("#window1,#window3,#window4,#window5"));
  10. var dropOptions = { hoverClass:"hover", activeClass:"active" };
  11. jsPlumb.Defaults.EndpointStyle = {fillStyle:"#E5E529"};
  12. jsPlumb.Defaults.PaintStyle = {
  13. lineWidth:4,
  14. strokeStyle:"#E5E529",
  15. outlineColor:"#FFFFD1",
  16. outlineWidth:2
  17. };
  18. jsPlumb.Defaults.HoverPaintStyle = {
  19. lineWidth:4,
  20. strokeStyle:"pink"
  21. };
  22. jsPlumb.Defaults.EndpointHoverStyle = {
  23. fillStyle:"pink"
  24. };
  25. //
  26. // makes window1 into a connection target, specifying that any connections made to window1 will be given
  27. // a dynamic anchor that has positions at each of the div's corners.
  28. //
  29. jsPlumb.makeTarget("window1", {
  30. endpoint:{
  31. anchor:["TopLeft", "TopRight", "BottomRight", "BottomLeft"]//,
  32. //paintStyle:endpointStyle
  33. },
  34. dropOptions:dropOptions
  35. });
  36. //
  37. // makes window3 into a connection target, specifying that connections made to window3 will have an anchor that
  38. // is located at the position on window3 at which the mouseup event occurred.
  39. //
  40. // note that the mechanism used to realise this anchor definition, and the "Grid" one below, will be refactored
  41. // before jsplumb 1.3.4 is released. the code needs a cleanup, and i'm going to add support for pluggable
  42. // anchor definitions, allowing people to implement their own.
  43. //
  44. jsPlumb.makeTarget("window3", {
  45. endpoint:{
  46. anchor:[ "Assign", {
  47. orientation:[0, 1],
  48. position:"Fixed"
  49. } ]
  50. },
  51. dropOptions:dropOptions
  52. });
  53. //
  54. // makes window4 into a connection target, specifying that connections made to window3 will have an anchor that
  55. // is located on a 2x3 grid.
  56. //
  57. // note that the mechanism used to realise this anchor definition, and the "Fixed" one above, will be refactored
  58. // before jsplumb 1.3.4 is released. the code needs a cleanup, and i'm going to add support for pluggable
  59. // anchor definitions, allowing people to implement their own.
  60. //
  61. jsPlumb.makeTarget("window4", {
  62. endpoint:{
  63. anchor:[ "Assign", {
  64. position:"Grid",
  65. grid:[2,3],
  66. orientation:[0, 1]
  67. } ]
  68. },
  69. dropOptions:dropOptions
  70. });
  71. //
  72. // the most basic makeSource call you can make. will use the defaults for everything - endpoint, anchor,
  73. // endpoint/connector styles, etc. in this demo we have setup defaults for endpoint style and for connector
  74. // style.
  75. //
  76. // note that this div - window2 - is not draggable. this is because it is acting as a connection source, and
  77. // dragging on this div means create a new connection. see the example below for an alternative to this.
  78. //
  79. jsPlumb.makeSource("window2");
  80. //
  81. // a more advanced makeSource call: in this one we specify a div we want to use for a connection source,
  82. // and we provide the 'parent' parameter, which tells jsPlumb that once a connection has been established it
  83. // should move the source endpoint to that element.
  84. //
  85. // also in this call we have specified our own endpoint definition, anchor definition, and connector style.
  86. // the anchor definition is used by jsPlumb after a successful connection has been made. in conjunction with the
  87. // 'parent' parameter on this call, it means that connections will be attached to "window5" using the default
  88. // 'dynamic' anchor, ie. the one that has TopCenter, RightMiddle, BottomCenter and LeftMiddle positions.
  89. // for the anchor here you can provide any valid anchor definition.
  90. //
  91. jsPlumb.makeSource($("#w5Source"), {
  92. endpoint:{
  93. anchor:"Continuous"
  94. },
  95. parent:"window5"
  96. });
  97. }
  98. };
  99. })();