chartDemo.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. var color = "gray";
  5. jsPlumb.importDefaults({
  6. // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother
  7. // than the curves on the first demo, which use the default curviness value.
  8. Connector : [ "Bezier", { curviness:50 } ],
  9. DragOptions : { cursor: "pointer", zIndex:2000 },
  10. PaintStyle : { strokeStyle:color, lineWidth:2 },
  11. EndpointStyle : { radius:9, fillStyle:color },
  12. HoverPaintStyle : {strokeStyle:"#ec9f2e" },
  13. EndpointHoverStyle : {fillStyle:"#ec9f2e" },
  14. Anchors : [ "BottomCenter", "TopCenter" ]
  15. });
  16. // declare some common values:
  17. var arrowCommon = { foldback:0.7, fillStyle:color, width:14 },
  18. // use three-arg spec to create two different arrows with the common values:
  19. overlays = [
  20. [ "Arrow", { location:0.7 }, arrowCommon ],
  21. [ "Arrow", { location:0.3, direction:-1 }, arrowCommon ]
  22. ];
  23. jsPlumb.connect({source:"window3", target:"window6", overlays:overlays, detachable:true, reattach:true});
  24. jsPlumb.connect({source:"window1", target:"window2", overlays:overlays});
  25. jsPlumb.connect({source:"window1", target:"window3", overlays:overlays});
  26. jsPlumb.connect({source:"window2", target:"window4", overlays:overlays});
  27. jsPlumb.connect({source:"window2", target:"window5", overlays:overlays});
  28. jsPlumb.draggable(jsPlumb.getSelector(".window"));
  29. }
  30. };
  31. })();