makeSourceDemo.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. jsPlumb.bind("click", function(conn) {
  5. jsPlumb.detach(conn);
  6. jsPlumb.removeEndpoint(conn.target, conn.endpoints[1]);
  7. });
  8. jsPlumb.draggable($("#window1,#window3,#window4,#window5"));
  9. var dropOptions = { hoverClass:"hover", activeClass:"active" };
  10. jsPlumb.importDefaults({
  11. Container : $("body"),
  12. EndpointStyle : {fillStyle:"#E5E529"},
  13. PaintStyle : {
  14. lineWidth:4,
  15. strokeStyle:"#E5E529",
  16. outlineColor:"#FFFFD1",
  17. outlineWidth:2
  18. },
  19. HoverPaintStyle : {
  20. lineWidth:4,
  21. strokeStyle:"pink"
  22. },
  23. EndpointHoverStyle : {
  24. fillStyle:"pink"
  25. }
  26. });
  27. //
  28. // makes window1 into a connection target, specifying that any connections made to window1 will be given
  29. // a dynamic anchor that has positions at each of the div's corners.
  30. //
  31. jsPlumb.makeTarget("window1", {
  32. anchor:["TopLeft", "TopRight", "BottomRight", "BottomLeft"],
  33. dropOptions:dropOptions
  34. });
  35. //
  36. // makes window3 into a connection target, specifying that connections made to window3 will have an anchor that
  37. // is located at the position on window3 at which the mouseup event occurred.
  38. //
  39. //
  40. jsPlumb.makeTarget("window3", {
  41. anchor:[ "Assign", {
  42. orientation:[0, 1],
  43. position:"Fixed"
  44. } ],
  45. dropOptions:dropOptions
  46. });
  47. //
  48. // makes window4 into a connection target, specifying that connections made to window3 will have an anchor that
  49. // is located on a 2x3 grid.
  50. //
  51. //
  52. jsPlumb.makeTarget("window4", {
  53. anchor:[ "Assign", {
  54. position:"Grid",
  55. grid:[2,3],
  56. orientation:[0, 1]
  57. } ],
  58. dropOptions:dropOptions
  59. });
  60. //
  61. // the most basic makeSource call you can make. will use the defaults for everything - endpoint, anchor,
  62. // endpoint/connector styles, etc. in this demo we have setup defaults for endpoint style and for connector
  63. // style.
  64. //
  65. // note that this div - window2 - is not draggable. this is because it is acting as a connection source, and
  66. // dragging on this div means create a new connection. see the example below for an alternative to this.
  67. //
  68. jsPlumb.makeSource("window2", {anchor:"TopCenter"});
  69. //
  70. // a more advanced makeSource call: in this one we specify a div we want to use for a connection source,
  71. // and we provide the 'parent' parameter, which tells jsPlumb that once a connection has been established it
  72. // should move the source endpoint to that element.
  73. jsPlumb.makeSource($("#w5Source"), {
  74. //anchor:"Continuous",
  75. anchor:"AutoDefault",
  76. parent:"window5"
  77. });
  78. }
  79. };
  80. })();