demo.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  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. var connectorStrokeColor = "rgba(50, 50, 200, 1)",
  10. connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
  11. hoverPaintStyle = { strokeStyle:"#7ec3d9" }; // hover paint style is merged on normal style, so you
  12. // don't necessarily need to specify a lineWidth
  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. endpoint:"Blank",
  28. endpointClass:"c1Endpoint",
  29. anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
  30. paintStyle:{
  31. lineWidth:6,
  32. strokeStyle:"#a7b04b",
  33. outlineWidth:1,
  34. outlineColor:"#666"
  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. cssClass:"l1arrow",
  51. location:0.5, width:30
  52. }]
  53. ]});
  54. var w23Stroke = "rgb(189,11,11)";
  55. var connection3 = jsPlumb.connect({
  56. source:"window2",
  57. target:"window3",
  58. paintStyle:{
  59. lineWidth:8,
  60. strokeStyle:w23Stroke,
  61. outlineColor:"#666",
  62. outlineWidth:1
  63. },
  64. detachable:false,
  65. hoverPaintStyle:hoverPaintStyle,
  66. anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
  67. endpoint:"Rectangle",
  68. endpointStyles:[
  69. { gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
  70. { gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
  71. ]
  72. });
  73. var connection2 = jsPlumb.connect({source:'window3', target:'window4',
  74. paintStyle:{
  75. lineWidth:10,
  76. strokeStyle:connectorStrokeColor,
  77. outlineColor:"#666",
  78. outlineWidth:1
  79. },
  80. hoverPaintStyle:hoverPaintStyle,
  81. anchor:"AutoDefault",
  82. detachable:false,
  83. endpointStyle:{
  84. gradient : {
  85. stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
  86. offset:17.5,
  87. innerRadius:15
  88. },
  89. radius:35
  90. },
  91. label : function(connection) {
  92. var d = new Date();
  93. var fmt = function(n, m) { m = m || 10; return (n < m ? new Array(("" + m).length - (""+n).length + 1).join("0") : "") + n; };
  94. return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds(), 100));
  95. },
  96. labelStyle:{
  97. cssClass:"component label"
  98. }
  99. });
  100. /*
  101. this connects window5 with window6 using a Flowchart connector that is painted green,
  102. with large Dot endpoints that are placed in the center of each element. there is a
  103. label at the default location of 0.5, and the connection is marked as not being
  104. detachable.
  105. */
  106. var conn4Color = "rgba(46,164,26,0.8)";
  107. var connection4 = jsPlumb.connect({
  108. source:'window5',
  109. target:'window6',
  110. connector:"Flowchart",
  111. anchors:["Center", "Center"],
  112. paintStyle:{
  113. lineWidth:9,
  114. strokeStyle:conn4Color,
  115. outlineColor:"#666",
  116. outlineWidth:1,
  117. joinstyle:"round"
  118. },
  119. hoverPaintStyle:hoverPaintStyle,
  120. detachable:false,
  121. endpointsOnTop:false,
  122. endpointStyle:{ radius:95, fillStyle:conn4Color },
  123. labelStyle : { cssClass:"component label" },
  124. label : "big\nendpoints"
  125. });
  126. var connection5 = jsPlumb.connect({
  127. source:"window4",
  128. target:"window5",
  129. anchors:["BottomRight", "TopLeft"],
  130. paintStyle:{
  131. lineWidth:7,
  132. strokeStyle:"rgb(131,8,135)",
  133. // outlineColor:"#666",
  134. // outlineWidth:1,
  135. dashstyle:"4 2",
  136. joinstyle:"miter"
  137. },
  138. tooltip:"This connection will appear dashed when using SVG or VML. This effect is achieved through CSS - see the accompanying stylesheet for this demo",
  139. hoverPaintStyle:hoverPaintStyle,
  140. endpoint:["Image", {url:"../../img/endpointTest1.png"}],
  141. connector:"Straight",
  142. endpointsOnTop:true,
  143. overlays:[ ["Label", {
  144. cssClass:"component label",
  145. label : "4 - 5",
  146. location:0.3
  147. }],
  148. "Arrow"
  149. ]});
  150. var stateMachineConnector = {
  151. connector:"StateMachine",
  152. paintStyle:{lineWidth:3,strokeStyle:"#056"},
  153. hoverPaintStyle:{strokeStyle:"#dbe300"},
  154. endpoint:"Blank",
  155. anchor:"Continuous",
  156. overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
  157. };
  158. jsPlumb.connect({
  159. source:"window3",
  160. target:"window7"
  161. }, stateMachineConnector);
  162. jsPlumb.connect({
  163. source:"window7",
  164. target:"window3"
  165. }, stateMachineConnector);
  166. jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
  167. jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
  168. jsPlumb.draggable(jsPlumb.getSelector(".window"));
  169. }
  170. };
  171. })();