uniqueAnchorsTest.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style>
  5. #demo {
  6. overflow:scroll;
  7. margin-top:5em;
  8. }
  9. .w {
  10. width:5em;
  11. padding:1em;
  12. position:absolute;
  13. border: 1px solid black;
  14. z-index:4;
  15. border-radius:1em;
  16. border:1px solid #346789;
  17. box-shadow: 2px 2px 19px #e0e0e0;
  18. -o-box-shadow: 2px 2px 19px #e0e0e0;
  19. -webkit-box-shadow: 2px 2px 19px #e0e0e0;
  20. -moz-box-shadow: 2px 2px 19px #e0e0e0;
  21. -moz-border-radius:0.5em;
  22. border-radius:0.5em;
  23. opacity:0.8;
  24. filter:alpha(opacity=80);
  25. cursor:move;
  26. }
  27. .aLabel {
  28. background-color:white;
  29. opacity:0.8;
  30. padding:0.3em;
  31. }
  32. .ep {
  33. float:right;
  34. width:1em;
  35. height:1em;
  36. background-color:#994466;
  37. cursor:pointer;
  38. }
  39. ._jsPlumb_endpoint {
  40. z-index:3;
  41. }
  42. /* ._jsPlumb_connector { border:1px solid red; }*/
  43. #opened {
  44. left:10em;
  45. top:5em;
  46. }
  47. #olga {
  48. left:10em;
  49. top:12em;
  50. width:7em;
  51. }
  52. #nicola {
  53. left:13em;
  54. top:25em;
  55. }
  56. #inperson {
  57. left:27em;
  58. top:22em;
  59. }
  60. #rejected {
  61. left:10em;
  62. top:35em;
  63. }
  64. .dragHover { border:1px dotted red; }
  65. path { cursor:pointer; }
  66. </style>
  67. </head>
  68. <body>
  69. <div style="position:absolute">
  70. <div id="demo">
  71. <div class="w" id="opened">opened<div class="ep"></div></div>
  72. <div class="w" id="olga">telephone interview with olga<div class="ep"></div></div>
  73. <div class="w" id="nicola">telephone interview with nicola<div class="ep"></div></div>
  74. <div class="w" id="inperson">in person<div class="ep"></div></div>
  75. <div class="w" id="rejected">rejected<div class="ep"></div></div>
  76. </div>
  77. </div>
  78. <script type="text/javascript" src="jquery-1.6.3.js"></script>
  79. <script type="text/javascript" src="jqueryui-1.8.13.js"></script>
  80. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  81. <!-- main jsplumb engine -->
  82. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-1.3.4-RC1.js"></script>
  83. <!-- connectors, endpoint and overlays -->
  84. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-defaults-1.3.4-RC1.js"></script>
  85. <!-- state machine connectors -->
  86. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-connectors-statemachine-1.3.4-RC1.js"></script>
  87. <!-- SVG renderer -->
  88. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-svg-1.3.4-RC1.js"></script>
  89. <!-- canvas renderer -->
  90. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-canvas-1.3.4-RC1.js"></script>
  91. <!-- vml renderer -->
  92. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-vml-1.3.4-RC1.js"></script>
  93. <!-- jquery jsPlumb adapter -->
  94. <script type="text/javascript" src="../../js/1.3.4/jquery.jsPlumb-1.3.4-RC1.js"></script>
  95. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-fx-0.1-RC1.js"></script>
  96. <script>
  97. var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
  98. var R,G,B;
  99. R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
  100. G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
  101. B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
  102. curColourIndex = curColourIndex + 1;
  103. if (curColourIndex > maxColourIndex) curColourIndex = 1;
  104. return "rgb(" + R + "," + G + "," + B + ")";
  105. };
  106. jsPlumb.ready(function() {
  107. jsPlumb.setRenderMode(jsPlumb.SVG);
  108. jsPlumb.logEnabled = true;
  109. jsPlumb.setDebugLog(function(m) {
  110. $("#debug").html(m);
  111. });
  112. jsPlumb.Defaults.Connector = [ "StateMachine", { avoidSelector:$(".w") } ];
  113. jsPlumb.Defaults.Endpoint = ["Dot", {radius:2}];
  114. jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"yellow", lineWidth:2 };
  115. jsPlumb.Defaults.Overlays = [
  116. [ "Arrow", {
  117. location:1,
  118. id:"arrow"
  119. } ]/*,
  120. [ "Arrow", {
  121. location:0.5,
  122. id:"arrow2"
  123. } ] */
  124. ];
  125. jsPlumb.draggable(jsPlumb.CurrentLibrary.getSelector(".w"));
  126. jsPlumb.bind("click", function(c) {
  127. jsPlumb.detach(c);
  128. });
  129. // make each ".ep" div a source and give it some parameters to work with. here we tell it
  130. // to use a Continuous anchor and the StateMachine connectors, and also we give it the
  131. // connector's paint style. note that in this demo the strokeStyle is dynamically generated,
  132. // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
  133. // would recommend you do.
  134. $(".ep").each(function(i,e) {
  135. var p = $(e).parent();
  136. jsPlumb.makeSource($(e), {
  137. parent:p,
  138. endpoint:{
  139. anchor:"Continuous",
  140. connector:"StateMachine",
  141. connectorStyle:{ strokeStyle:nextColour(),lineWidth:2 },
  142. maxConnections:-1
  143. }
  144. });
  145. });
  146. jsPlumb.makeTarget($(".w"), {
  147. dropOptions:{ hoverClass:"dragHover" },
  148. endpoint:{
  149. anchor:"Continuous"
  150. }
  151. });
  152. });
  153. </script>
  154. </body>
  155. </html>