EndPoints.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. // JavaScript Document
  2. EP_MIN_DIS = 10; // the min distance between two endpoints
  3. exampleDropOptions =
  4. {
  5. tolerance:'touch',
  6. hoverClass:'dropHover',
  7. activeClass:'dragActive'
  8. };
  9. // end points
  10. /**
  11. first example endpoint. it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
  12. and target. the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
  13. 'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
  14. only 'exampleConnection' types can be dropped here.
  15. the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
  16. 5 pixels, and a gradient.
  17. note the use of the '$.extend' function to setup generic connection types. this will save you a lot of typing, and probably
  18. errors.
  19. */
  20. InputEPColor = '#00f';
  21. InputEP =
  22. {
  23. endpoint : "Rectangle",
  24. isSource : false,
  25. isTarget : true,
  26. paintStyle: { width:20, height:20, fillStyle : InputEPColor},
  27. connectorStyle : {
  28. gradient : {stops : [[0, InputEPColor], [0.5, '#09098e'], [1, InputEPColor]]},
  29. lineWidth : 5,
  30. strokeStyle : InputEPColor
  31. },
  32. dropOptions : exampleDropOptions
  33. };
  34. OutputEPColor = '#f00';
  35. OutputEP =
  36. {
  37. endpoint : [ "Rectangle", { width:20, height:20 } ],
  38. isSource : true,
  39. isTarget : false,
  40. paintStyle: { fillStyle : OutputEPColor },
  41. connectorStyle : {
  42. gradient : {stops : [[0, OutputEPColor], [0.5, '#09098e'], [1, OutputEPColor]]},
  43. lineWidth : 5,
  44. strokeStyle : OutputEPColor
  45. }
  46. };
  47. ControlColor = '#000';
  48. ControlEP =
  49. {
  50. endpoint : [ "Rectangle", { width:10, height:10 } ],
  51. isSource : false,
  52. isTarget : true,
  53. paintStyle: { fillStyle : ControlColor },
  54. connectorStyle : {
  55. gradient : {stops : [[0, ControlColor], [0.5, '#09098e'], [1, ControlColor]]},
  56. lineWidth : 5,
  57. strokeStyle : ControlColor
  58. },
  59. dropOptions : exampleDropOptions
  60. };
  61. RDColor = '#FFFF5C';
  62. RDEP =
  63. {
  64. endpoint : [ "Dot", { radius:10 } ],
  65. isSource : false,
  66. isTarget : false,
  67. paintStyle: { fillStyle : RDColor },
  68. connectorStyle : {
  69. gradient : {stops : [[0, RDColor], [0.5, '#09098e'], [1, RDColor]]},
  70. lineWidth : 10,
  71. strokeStyle : RDColor
  72. },
  73. dropOptions : exampleDropOptions
  74. };
  75. NumberEPColor = '#00f';
  76. NumberEP =
  77. {
  78. endpoint:[ "Rectangle", { width:5, height:5 } ],
  79. paintStyle:{fillStyle:NumberEPColor },
  80. isSource:true,
  81. scope:'blue rectangle',
  82. connectorStyle : {
  83. gradient:{stops:[[0, NumberEPColor], [0.5, '#09098e'], [1, NumberEPColor]]},
  84. lineWidth:5,
  85. strokeStyle:NumberEPColor
  86. },
  87. isTarget:true,
  88. dropOptions : exampleDropOptions
  89. };
  90. /**
  91. the second example uses a Dot of radius 15 as the endpoint marker, is both a source and target, and has scope
  92. 'exampleConnection2'.
  93. */
  94. StringEPColor = '#316b31';
  95. StringEP =
  96. {
  97. endpoint: [ "Dot", { radius:5 } ],
  98. style:{ strokeStyle:StringEPColor },
  99. isSource:true,
  100. scope:'green dot',
  101. connectorStyle:{ strokeStyle:StringEPColor, lineWidth:8 },
  102. connector: new jsPlumb.Connectors.Bezier(63),
  103. maxConnections:3,
  104. isTarget:true,
  105. dropOptions : exampleDropOptions
  106. };
  107. /**
  108. the third example uses a Dot of radius 17 as the endpoint marker, is both a source and target, and has scope
  109. 'exampleConnection3'. it uses a Straight connector, and the Anchor is created here (bottom left corner) and never
  110. overriden, so it appears in the same place on every element.
  111. this example also sets the 'reattach' flag for the Endpoint, meaning that when you drag a
  112. connection off an endpoint and release it, it snaps back. the default behaviour in this case
  113. is to delete the connection.
  114. */
  115. NumberArrayEPColor = "rgba(229,219,61,0.5)";
  116. NumberArrayEP =
  117. {
  118. endpoint:[ "Dot", { radius:10 } ],
  119. reattach:true,
  120. anchor:"BottomLeft",
  121. style:{ strokeStyle:NumberArrayEPColor, opacity:0.5 },
  122. isSource:true,
  123. scope:'yellow dot',
  124. connectorStyle:{ strokeStyle:NumberArrayEPColor, lineWidth:4 },
  125. connector : new jsPlumb.Connectors.Straight(),
  126. isTarget:true,
  127. dropOptions : exampleDropOptions
  128. };