issue76_test.html 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb Issue 76 Test Page - jQuery</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=7">
  6. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  7. <link rel="stylesheet" href="../demo/css/jsPlumbDemo.css"></link>
  8. <style type="text/css">
  9. .window {
  10. border:0.1em dotted #d4e06b;
  11. opacity:0.8;
  12. filter:alpha(opacity=80);
  13. width:14em; height:4em;
  14. z-index:20;
  15. position:absolute;
  16. color:black;
  17. font-family:helvetica, sans;
  18. padding-top:0.9em;
  19. font-size:0.9em;
  20. text-align:center;
  21. background-color:white;
  22. }
  23. #window1 { left:20em;}
  24. #window2 { left:20em;top:15em;}
  25. #window3 { left:20em;top:35em;}
  26. #window4 { left:4em;top:24em;}
  27. #window5 {left:22em;top:124em;}
  28. #window6 {left:47em;top:24em;}
  29. #window7 {top:18em;left:40em;}
  30. #window8 {left:63em;top:32em;}
  31. </style>
  32. </head>
  33. <body onunload="jsPlumb.unload();">
  34. <div class="menu"><a href="../doc/usage.html" class="mplink">view documentation</a>&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
  35. <div class="window" id="window1">window one</div>
  36. <div class="window" id="window2">window two</div>
  37. <div class="window" id="window3">window three</div>
  38. <div class="window" id="window4">window four</div>
  39. <div class="window" id="window5">window five</div>
  40. <div class="window" id="window6">window six</div>
  41. <div id="explanation">
  42. This is a test page for issue 76. Arrow overlays on perfectly vertical Straight connectors were disappearing, and sometimes
  43. 'flipping'. Also, Labels were throwing an error in the console. I didn't have a test page for the label stuff but i suspect it was
  44. caused by the same error, which should now be fixed.
  45. </div>
  46. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  47. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  48. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
  49. <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
  50. <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
  51. <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
  52. <script type="text/javascript" src="../js/1.2.6/jquery.jsPlumb-1.2.6-RC1.js"></script>
  53. <script type="text/javascript">
  54. $(function() {
  55. // chrome fix.
  56. document.onselectstart = function () { return false; };
  57. jsPlumb.Defaults.Connector = "Straight";
  58. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  59. jsPlumb.Defaults.PaintStyle = { strokeStyle:'gray', lineWidth:2 };
  60. jsPlumb.Defaults.EndpointStyle = { radius:9, fillStyle:'gray' };
  61. jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
  62. jsPlumb.connect({source:'window1', target:'window2', overlays:[["Arrow", {foldback:0.7, fillStyle:'gray', location:0.5, width:14}]]});
  63. var conn2 = jsPlumb.connect({
  64. source:'window2',
  65. target:'window3',
  66. overlays:[
  67. ["Label", { label:"FOO",labelStyle:{color: "black",font:"32px sans-serif"}}],
  68. ["Arrow", {foldback:0.7, fillStyle:'gray', location:1, width:22, length:25}],
  69. ["Diamond", {fillStyle:'gray', location:0, width:15, length:20}]
  70. ]});
  71. conn2.endpoints[1].setVisible(false, true);
  72. conn2.endpoints[0].setVisible(false, true);
  73. });
  74. </script>
  75. </body>
  76. </html>