jquery.jsPlumb-flowchart-RC1.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. /**
  2. a flowchart connector for jsPlumb.
  3. this is NOT FINISHED. it doesnt support all combinations of anchor orientations, and the code that is here can definitely be refactored.
  4. */
  5. (function() {
  6. var perpendicular = function(o1, o2) {
  7. };
  8. var inPhase = function (o1, o2) {
  9. var r = [o1[0] + o2[0], o1[1] + o2[1]];
  10. return r[0] == 0 && r[1] == 0;
  11. };
  12. /**
  13. * Returns whether or not either of 'o' or 'o2' have an orientation that is defined in
  14. * more than one direction. in that case we just draw a straight line.
  15. */
  16. var notSuitableOrientations = function(o, o2) {
  17. var _nso = function(o) {
  18. return Math.abs(o[0]) == Math.abs(o[1]);
  19. };
  20. return _nso(o) || _nso(o2);
  21. };
  22. jsPlumb.Connectors.Flowchart = function(params) {
  23. params = params || {};
  24. var minStubLength = params.minStubLength || 30;
  25. this.compute = function(sourcePos, targetPos, sourceAnchor, targetAnchor, lineWidth) {
  26. // setup default for linewidth
  27. lineWidth = lineWidth || 1;
  28. // and make offsets
  29. var offx = lineWidth / 2, offy = lineWidth / 2;
  30. // get points list ready
  31. var points = [];
  32. // short vars for access to orientation
  33. var so = sourceAnchor.orientation || sourceAnchor.getOrientation(), to = targetAnchor.orientation || targetAnchor.getOrientation();
  34. var swapX = targetPos[0] < sourcePos[0];
  35. var swapY = targetPos[1] < sourcePos[1];
  36. var x = swapX ? targetPos[0] : sourcePos[0], y = swapY ? targetPos[1] : sourcePos[1];
  37. x -= offx;
  38. y -= offy;
  39. var w = Math.abs(targetPos[0] - sourcePos[0]) + 2*offx;
  40. var h = Math.abs(targetPos[1] - sourcePos[1]) + 2*offy;
  41. var sx = swapX ? w-offx : offx, sy = swapY ? h-offy : offy, tx = swapX ? offx : w-offx , ty = swapY ? offy : h-offy;
  42. params.offsetLine=[0,0,0];
  43. if (!notSuitableOrientations(so, to)) {
  44. if (perpendicular(so,to)) {
  45. }
  46. else {
  47. var stubLength = h / 2, stubWidth = w / 2;
  48. if (so[0] == 0 && so[1] == 1 && to[0] == 0 && to[1] == -1) {
  49. sy = 0;
  50. ty = h;
  51. if (sourcePos[1] < targetPos[1]) {
  52. // a three line connection
  53. points.push(sx);points.push(sy + stubLength);
  54. points.push(tx);points.push(ty - stubLength);
  55. }
  56. else {
  57. // a five line connection
  58. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  59. y = targetPos[1] - minStubLength;
  60. sy = sourcePos[1] - y - offy;
  61. ty = minStubLength + 2*offy;
  62. points.push(sx);points.push(sy + minStubLength+params.offsetLine[0]);
  63. points.push(w/2+params.offsetLine[1]);points.push(sy + minStubLength+params.offsetLine[0]);
  64. points.push(w/2+params.offsetLine[1]);points.push(offy+params.offsetLine[2]);
  65. points.push(tx);points.push(offy+params.offsetLine[2]);
  66. }
  67. }
  68. else if (so[0] == 0 && so[1] == -1 && to[0] == 0 && to[1] == 1) {
  69. sy = h;
  70. ty = 0;
  71. y = targetPos[1];
  72. if (sourcePos[1] > targetPos[1]) {
  73. // a three line connection
  74. points.push(sx);points.push(sy - stubLength);
  75. points.push(tx);points.push(ty + stubLength);
  76. }
  77. else {
  78. // a five line connection
  79. h = minStubLength * 2 + (targetPos[1] - sourcePos[1]) + offy;
  80. y = sourcePos[1] - minStubLength - offy;
  81. sy = minStubLength + offy;
  82. ty = h - minStubLength - 2*offy;
  83. points.push(sx);points.push(sy - minStubLength + offy+params.offsetLine[0]);
  84. points.push(w/2+params.offsetLine[1]);points.push(sy - minStubLength + offy+params.offsetLine[0]);
  85. points.push(w/2+params.offsetLine[1]);points.push(h - offy+params.offsetLine[2]);
  86. points.push(tx);points.push(h - offy+params.offsetLine[2]);
  87. }
  88. }
  89. // X
  90. else if (so[0] == 1 && so[1] == 0 && to[0] == -1 && to[1] == 0) {
  91. sx = 0;
  92. tx = w;
  93. if (sourcePos[0] < targetPos[0]) {
  94. points.push(sx+stubWidth);points.push(sy);
  95. points.push(tx-stubWidth);points.push(ty);
  96. }
  97. else {
  98. w = minStubLength * 2 + (sourcePos[0] - targetPos[0]) + 2*offx;
  99. x = targetPos[0] - minStubLength - offx;
  100. sx = sourcePos[0] - x;
  101. tx = minStubLength + offx;
  102. points.push(sx + minStubLength+params.offsetLine[0]);points.push(sy);
  103. points.push(sx + minStubLength+params.offsetLine[0]);points.push(h/2+params.offsetLine[1]);
  104. points.push(offx+params.offsetLine[2]);points.push(h/2+params.offsetLine[1]);
  105. points.push(offx+params.offsetLine[2]);points.push(ty);
  106. }
  107. }
  108. else if (so[0] == -1 && so[1] == 0 && to[0] == 1 && to[1] == 0) {
  109. sx = w;
  110. tx = 0;
  111. x = targetPos[0];
  112. if (sourcePos[0] > targetPos[0]) {
  113. points.push(sx-stubWidth);points.push(sy);
  114. points.push(tx+stubWidth);points.push(ty);
  115. }
  116. else {
  117. w = minStubLength * 2 + (targetPos[0] - sourcePos[0]) + 2*offx;
  118. x = sourcePos[0] - minStubLength - offx;
  119. sx = minStubLength + offx;
  120. tx = w - minStubLength - 2*offx;
  121. points.push(sx - minStubLength+params.offsetLine[0]);points.push(sy);
  122. points.push(sx - minStubLength+params.offsetLine[0]);points.push(h/2+params.offsetLine[1]);
  123. points.push(w-offx+params.offsetLine[2]);points.push(h/2+params.offsetLine[1]);
  124. points.push(w-offx+params.offsetLine[2]);points.push(ty);
  125. }
  126. }else if(so[0] == 0 && so[1] == 1 && to[0]==1 && to[1]==0){
  127. sy = 0;
  128. ty = h;
  129. if (sourcePos[1] < targetPos[1]) {
  130. // a three line connection
  131. points.push(sx);points.push(sy + stubLength);
  132. points.push(tx+20+params.offsetLine[0]);points.push(ty - stubLength);
  133. points.push(tx+20+params.offsetLine[0]);points.push(ty);
  134. }
  135. else {
  136. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  137. y = targetPos[1] - minStubLength;
  138. sy = sourcePos[1] - y - offy;
  139. ty = minStubLength + 2*offy;
  140. //points.push(sx);points.push(sy + minStubLength+params.offsetLine[0]);
  141. //points.push(w+20+params.offsetLine[1]);points.push(sy + minStubLength+params.offsetLine[0]);
  142. //points.push(w+20+params.offsetLine[1]);points.push(offy+30);
  143. points.push(sx);points.push(sy + 20+params.offsetLine[0]);
  144. if(sx>tx){
  145. points.push((sx+tx)/2);points.push(sy+20);
  146. points.push((sx+tx)/2);points.push(ty);
  147. }else{
  148. points.push(tx+20);points.push(sy+20);
  149. }
  150. points.push(tx+20);points.push(ty);
  151. }
  152. }else if(so[0] == 0 && so[1] == -1 && to[0]==1 && to[1]==0){
  153. sy = 0;
  154. ty = h;
  155. if (sourcePos[1] < targetPos[1]) {
  156. sy+=20;
  157. ty+=20;
  158. h+=20;
  159. y-=20;
  160. points.push(sx);points.push(sy-20+params.offsetLine[0]);
  161. points.push(tx+20+params.offsetLine[1]);points.push(sy-20+params.offsetLine[0]);
  162. points.push(tx+20+params.offsetLine[1]);points.push(ty);
  163. }
  164. else {
  165. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  166. y = targetPos[1] - minStubLength;
  167. sy = sourcePos[1] - y - offy;
  168. ty = minStubLength + 2*offy;
  169. points.push(sx);points.push(sy -20+params.offsetLine[0]);
  170. points.push(w+20+params.offsetLine[1]);points.push(sy -20+params.offsetLine[0]);
  171. points.push(w+20+params.offsetLine[1]);points.push(offy+30);
  172. }
  173. }else if(so[0] == 1 && so[1] == 0 && to[0]==1 && to[1]==0){
  174. sy = 0;
  175. ty = h;
  176. if (sourcePos[1] < targetPos[1]) {
  177. points.push(sx+20+params.offsetLine[0]);points.push(sy);
  178. points.push(sx+20+params.offsetLine[0]);points.push(ty);
  179. }
  180. else {
  181. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  182. y = targetPos[1] - minStubLength;
  183. sy = sourcePos[1] - y - offy;
  184. ty = minStubLength + 2*offy;
  185. points.push(w+20+params.offsetLine[0]);points.push(sy);
  186. points.push(w+20+params.offsetLine[0]);points.push(offy+30);
  187. }
  188. }else if(so[0] == -1 && so[1] == 0 && to[0]==0 && to[1]==-1){
  189. sy = 0;
  190. ty = h;
  191. if (sourcePos[1] < targetPos[1]) {
  192. points.push(sx);points.push(sy+h/2+params.offsetLine[0]);
  193. points.push(tx);points.push(sy+h/2+params.offsetLine[0]);
  194. }
  195. else {
  196. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  197. y = targetPos[1] - minStubLength;
  198. sy = sourcePos[1] - y - offy;
  199. ty = minStubLength + 2*offy;
  200. points.push(sx);points.push(ty-20+params.offsetLine[0]);
  201. points.push(tx);points.push(ty-20+params.offsetLine[0]);
  202. }
  203. }else if(so[0] == 1 && so[1] == 0 && to[0]==0 && to[1]==-1){
  204. sy = 0;
  205. ty = h;
  206. if (sourcePos[1] < targetPos[1]) {
  207. points.push(sx+20+params.offsetLine[0]);points.push(sy);
  208. points.push(sx+20+params.offsetLine[0]);points.push(sy+h/2+params.offsetLine[1]);
  209. points.push(tx);points.push(sy+h/2+params.offsetLine[1]);
  210. }
  211. else {
  212. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  213. y = targetPos[1] - minStubLength;
  214. sy = sourcePos[1] - y - offy;
  215. ty = minStubLength + 2*offy;
  216. points.push(sx+20+params.offsetLine[0]);points.push(sy);
  217. points.push(sx+20+params.offsetLine[0]);points.push(ty-20+params.offsetLine[1]);
  218. points.push(tx);points.push(ty-20+params.offsetLine[1]);
  219. }
  220. }else if(so[0] == 0 && so[1] == -1 && to[0]==0 && to[1]==-1){
  221. sy = 0;
  222. ty = h;
  223. if (sourcePos[1] < targetPos[1]) {
  224. points.push(sx);points.push(sy+params.offsetLine[0]);
  225. points.push(tx+params.offsetLine[1]);points.push(sy+params.offsetLine[0]);
  226. points.push(tx+params.offsetLine[1]);points.push(sy+h/2);
  227. sy+=20;
  228. ty+=20;
  229. h+=20;
  230. y-=20;
  231. }
  232. else {
  233. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  234. y = targetPos[1] - minStubLength;
  235. sy = sourcePos[1] - y - offy;
  236. ty = minStubLength + 2*offy;
  237. points.push(sx);points.push(ty-20+params.offsetLine[0]);
  238. points.push(tx);points.push(ty-20+params.offsetLine[0]);
  239. }
  240. }else if(so[0] == 0 && so[1] == -1 && to[0]==-1 && to[1]==0){
  241. sy = 0;
  242. ty = h;
  243. if (sourcePos[1] < targetPos[1]) {
  244. sy+=20;
  245. ty+=20;
  246. h+=20;
  247. y-=20;
  248. x-=20;
  249. sx+=20;
  250. tx+=20;
  251. points.push(sx);points.push(sy-20+params.offsetLine[0]);
  252. points.push(tx-20+params.offsetLine[1]);points.push(sy-20+params.offsetLine[0]);
  253. points.push(tx-20+params.offsetLine[1]);points.push(ty);
  254. }
  255. else {
  256. h = minStubLength * 2 + (sourcePos[1] - targetPos[1]) + 2*offy;
  257. y = targetPos[1] - minStubLength;
  258. sy = sourcePos[1] - y - offy;
  259. ty = minStubLength + 2*offy;
  260. x-=20;
  261. sx+=20;
  262. tx+=20;
  263. points.push(sx);points.push(sy-20+params.offsetLine[0]);
  264. points.push(tx-20+params.offsetLine[1]);points.push(sy-20+params.offsetLine[0]);
  265. points.push(tx-20+params.offsetLine[1]);points.push(ty);
  266. }
  267. }
  268. else {
  269. }
  270. }
  271. }
  272. w+=20;
  273. // first define the basic points - location, width, height, and start/end points.
  274. var retVal = [x, y, w, h, sx, sy, tx, ty];
  275. // then store how many intermediate points we calculated
  276. retVal.push(points.length / 2);
  277. // add the intermediate points at the end.
  278. for (var i = 0; i < points.length; i++)
  279. retVal.push(points[i]);
  280. return retVal;
  281. };
  282. this.paint = function(dimensions, ctx) {
  283. ctx.beginPath();
  284. ctx.moveTo(dimensions[4], dimensions[5]);
  285. // loop through extra points
  286. for (var i = 0; i < dimensions[8]; i++) {
  287. ctx.lineTo(dimensions[9 + (i*2)], dimensions[10 + (i*2)]);
  288. }
  289. // finally draw a line to the end
  290. ctx.lineTo(dimensions[6], dimensions[7]);
  291. ctx.stroke();
  292. };
  293. };
  294. /**
  295. * Set of Endpoints for Flowcharts. Currently has one - an arrow, which takes the anchor orientation into account when painting.
  296. */
  297. jsPlumb.Endpoints.Flowchart = {
  298. Arrow : function(params) {
  299. var width = params.width || 15;
  300. var length = params.length || 15;
  301. this.paint = function(anchorPoint, orientation, canvas, endpointStyle, connectorPaintStyle) {
  302. // use the orientation array to determine the rotation of the endpoint.
  303. };
  304. }
  305. };
  306. })();