anchorDemo.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. // list of possible anchor locations for the blue source element
  5. var sourceAnchors = [
  6. [ 0, 1, 0, 1 ],
  7. [ 0.25, 1, 0, 1 ],
  8. [ 0.5, 1, 0, 1 ],
  9. [ 0.75, 1, 0, 1 ],
  10. [ 1, 1, 0, 1 ]
  11. ];
  12. jsPlumb.importDefaults({
  13. // set default anchors. the 'connect' calls below will pick these up, and in fact setting these means
  14. // that you also do not need to supply anchor definitions to the makeSource or makeTarget functions.
  15. Anchors : [ sourceAnchors, "TopCenter" ],
  16. // drag options
  17. DragOptions : { cursor: "pointer", zIndex:2000 },
  18. // default to blue at source and green at target
  19. EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }],
  20. // blue endpoints 7 px; green endpoints 11.
  21. Endpoints : [ ["Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  22. // default to a gradient stroke from blue to green. for IE provide all green fallback.
  23. PaintStyle : {
  24. gradient:{ stops:[ [ 0, "#225588" ], [ 1, "#558822" ] ] },
  25. strokeStyle:"#558822",
  26. lineWidth:10
  27. }
  28. });
  29. // make 'window1' a connection source.
  30. jsPlumb.makeSource("window1", {
  31. //anchor:sourceAnchors // you could supply this if you want, but it was set in the defaults above.
  32. });
  33. // get the list of ".smallWindow" elements. getSelector is just a helper method that abstracts out the underlying
  34. // library; you don't need to use it - you could use $(".smallWindow") in jquery, $$(".smallWindow") in
  35. // MooTools, or Y.all(".smallWindow") in YUI.
  36. //
  37. var smallWindows = jsPlumb.getSelector(".smallWindow");
  38. for (var i = 0; i < smallWindows.length; i++) {
  39. jsPlumb.draggable(smallWindows[i]);
  40. jsPlumb.makeTarget(smallWindows[i], {
  41. //anchor:"TopCenter", // you could supply this if you want, but it was set in the defaults above.
  42. dropOptions:{ hoverClass:"hover" }
  43. });
  44. }
  45. // and finally connect a couple of small windows, just so the demo doesnt look broken when it loads.
  46. // note that
  47. jsPlumb.connect({ source:"window1", target:"window5" });
  48. jsPlumb.connect({ source:"window1", target:"window2" });
  49. }
  50. };
  51. })();