demo.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. /*
  2. this is the JS for the main jsPlumb demo. it is shared between the YUI, jQuery and MooTools
  3. demo pages.
  4. */
  5. ;(function() {
  6. window.jsPlumbDemo = {
  7. init : function() {
  8. jsPlumb.DefaultDragOptions = { cursor: "pointer", zIndex:2000 };
  9. jsPlumb.setMouseEventsEnabled(true);
  10. var connectorStrokeColor = "rgba(50, 50, 200, 1)",
  11. connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
  12. hoverPaintStyle = { lineWidth:13,strokeStyle:"#7ec3d9" };
  13. //
  14. // connect window1 to window2 with a 13 px wide olive colored Bezier, from the BottomCenter of
  15. // window1 to 3/4 of the way along the top edge of window2. give the connection a 1px black outline,
  16. // and allow the endpoint styles to derive their color and outline from the connection.
  17. // label it "Connection One" with a label at 0.7 of the length of the connection, and put an arrow that has a 50px
  18. // wide tail at a point 0.2 of the length of the connection. we use 'cssClass' and 'endpointClass' to assign
  19. // our own css classes, and the Label overlay has three css classes specified for it too. we also give this
  20. // connection a 'hoverPaintStyle', which defines the appearance when the mouse is hovering over it.
  21. //
  22. var connection1 = jsPlumb.connect({
  23. source:'window1',
  24. target:'window2',
  25. connector:"Bezier",
  26. cssClass:"c1",
  27. endpointClass:"c1Endpoint",
  28. anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
  29. paintStyle:{
  30. lineWidth:13,
  31. strokeStyle:"#a7b04b",
  32. outlineWidth:1,
  33. outlineColor:"#666"/*,
  34. dashstyle:"2 2"*/
  35. },
  36. endpointStyle:{ fillStyle:"#a7b04b" },
  37. hoverPaintStyle:hoverPaintStyle,
  38. overlays : [ ["Label", {
  39. cssClass:"l1 component label",
  40. label : "Connection One",
  41. location:0.7,
  42. id:"label",
  43. events:{
  44. "click":function(label, evt) {
  45. alert("clicked on label for connection 1");
  46. }
  47. }
  48. } ],
  49. ["Arrow", {
  50. location:0.2, width:50,
  51. events : {
  52. "click":function(arrow, evt) {
  53. alert("clicked on arrow for connection 1");
  54. }
  55. }
  56. }]
  57. ]});
  58. var w23Stroke = "rgb(189,11,11)";
  59. var connection3 = jsPlumb.connect({
  60. source:"window2",
  61. target:"window3",
  62. paintStyle:{
  63. lineWidth:8,
  64. strokeStyle:w23Stroke,
  65. outlineColor:"#666",
  66. outlineWidth:1
  67. },
  68. hoverPaintStyle:hoverPaintStyle,
  69. anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
  70. endpoint:"Rectangle",
  71. endpointStyles:[
  72. { gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
  73. { gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
  74. ]
  75. });
  76. var connection2 = jsPlumb.connect({source:'window3', target:'window4',
  77. paintStyle:{
  78. lineWidth:10,
  79. strokeStyle:connectorStrokeColor,
  80. outlineColor:"#666",
  81. outlineWidth:1
  82. },
  83. hoverPaintStyle:hoverPaintStyle,
  84. anchors:["AutoDefault", "AutoDefault"],
  85. endpointStyle:{
  86. gradient : {
  87. stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
  88. offset:17.5,
  89. innerRadius:15
  90. },
  91. radius:35
  92. },
  93. label : function(connection) {
  94. var d = new Date();
  95. var fmt = function(n) { return (n < 10 ? "0" : "") + n; };
  96. return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds()));
  97. },
  98. labelStyle:{
  99. cssClass:"component label"
  100. }
  101. });
  102. var conn4Color = "rgba(46,164,26,0.8)";
  103. var connection4 = jsPlumb.connect({
  104. source:'window5',
  105. target:'window6',
  106. connector:"Flowchart",
  107. anchors:["Center", "Center"],
  108. paintStyle:{
  109. lineWidth:9,
  110. strokeStyle:conn4Color,
  111. outlineColor:"#666",
  112. outlineWidth:1
  113. },
  114. hoverPaintStyle:hoverPaintStyle,
  115. endpointsOnTop:false,
  116. endpointStyle:{ radius:95, fillStyle:conn4Color },
  117. labelStyle : { cssClass:"component label" },
  118. label : "big\nendpoints"
  119. });
  120. var connection5 = jsPlumb.connect({
  121. source:"window4",
  122. target:"window5",
  123. anchors:["BottomRight", "TopLeft"],
  124. paintStyle:{
  125. lineWidth:7,
  126. strokeStyle:"rgb(131,8,135)",
  127. outlineColor:"#666",
  128. outlineWidth:1
  129. },
  130. hoverPaintStyle:hoverPaintStyle,
  131. endpoint:["Image", {url:"../../img/endpointTest1.png"}],
  132. connector:"Straight",
  133. endpointsOnTop:true,
  134. overlays:[ ["Label", {
  135. cssClass:"component label",
  136. label : "4 - 5",
  137. location:0.3 } ]
  138. ]});
  139. jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
  140. jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
  141. }
  142. };
  143. })();