chartDemo.js 1.5 KB

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