makeSourceDemo.js 3.9 KB

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