mxEdgeStyle.js 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. var mxEdgeStyle =
  6. {
  7. /**
  8. * Class: mxEdgeStyle
  9. *
  10. * Provides various edge styles to be used as the values for
  11. * <mxConstants.STYLE_EDGE> in a cell style.
  12. *
  13. * Example:
  14. *
  15. * (code)
  16. * var style = stylesheet.getDefaultEdgeStyle();
  17. * style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
  18. * (end)
  19. *
  20. * Sets the default edge style to <ElbowConnector>.
  21. *
  22. * Custom edge style:
  23. *
  24. * To write a custom edge style, a function must be added to the mxEdgeStyle
  25. * object as follows:
  26. *
  27. * (code)
  28. * mxEdgeStyle.MyStyle = function(state, source, target, points, result)
  29. * {
  30. * if (source != null && target != null)
  31. * {
  32. * var pt = new mxPoint(target.getCenterX(), source.getCenterY());
  33. *
  34. * if (mxUtils.contains(source, pt.x, pt.y))
  35. * {
  36. * pt.y = source.y + source.height;
  37. * }
  38. *
  39. * result.push(pt);
  40. * }
  41. * };
  42. * (end)
  43. *
  44. * In the above example, a right angle is created using a point on the
  45. * horizontal center of the target vertex and the vertical center of the source
  46. * vertex. The code checks if that point intersects the source vertex and makes
  47. * the edge straight if it does. The point is then added into the result array,
  48. * which acts as the return value of the function.
  49. *
  50. * The new edge style should then be registered in the <mxStyleRegistry> as follows:
  51. * (code)
  52. * mxStyleRegistry.putValue('myEdgeStyle', mxEdgeStyle.MyStyle);
  53. * (end)
  54. *
  55. * The custom edge style above can now be used in a specific edge as follows:
  56. *
  57. * (code)
  58. * model.setStyle(edge, 'edgeStyle=myEdgeStyle');
  59. * (end)
  60. *
  61. * Note that the key of the <mxStyleRegistry> entry for the function should
  62. * be used in string values, unless <mxGraphView.allowEval> is true, in
  63. * which case you can also use mxEdgeStyle.MyStyle for the value in the
  64. * cell style above.
  65. *
  66. * Or it can be used for all edges in the graph as follows:
  67. *
  68. * (code)
  69. * var style = graph.getStylesheet().getDefaultEdgeStyle();
  70. * style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle;
  71. * (end)
  72. *
  73. * Note that the object can be used directly when programmatically setting
  74. * the value, but the key in the <mxStyleRegistry> should be used when
  75. * setting the value via a key, value pair in a cell style.
  76. *
  77. * Function: EntityRelation
  78. *
  79. * Implements an entity relation style for edges (as used in database
  80. * schema diagrams). At the time the function is called, the result
  81. * array contains a placeholder (null) for the first absolute point,
  82. * that is, the point where the edge and source terminal are connected.
  83. * The implementation of the style then adds all intermediate waypoints
  84. * except for the last point, that is, the connection point between the
  85. * edge and the target terminal. The first ant the last point in the
  86. * result array are then replaced with mxPoints that take into account
  87. * the terminal's perimeter and next point on the edge.
  88. *
  89. * Parameters:
  90. *
  91. * state - <mxCellState> that represents the edge to be updated.
  92. * source - <mxCellState> that represents the source terminal.
  93. * target - <mxCellState> that represents the target terminal.
  94. * points - List of relative control points.
  95. * result - Array of <mxPoints> that represent the actual points of the
  96. * edge.
  97. */
  98. EntityRelation: function(state, source, target, points, result)
  99. {
  100. var view = state.view;
  101. var graph = view.graph;
  102. var segment = mxUtils.getValue(state.style,
  103. mxConstants.STYLE_SEGMENT,
  104. mxConstants.ENTITY_SEGMENT) * view.scale;
  105. var pts = state.absolutePoints;
  106. var p0 = pts[0];
  107. var pe = pts[pts.length-1];
  108. var isSourceLeft = false;
  109. if (source != null)
  110. {
  111. var sourceGeometry = graph.getCellGeometry(source.cell);
  112. if (sourceGeometry.relative)
  113. {
  114. isSourceLeft = sourceGeometry.x <= 0.5;
  115. }
  116. else if (target != null)
  117. {
  118. isSourceLeft = ((pe != null) ? pe.x : target.x + target.width) < ((p0 != null) ? p0.x : source.x);
  119. }
  120. }
  121. if (p0 != null)
  122. {
  123. source = new mxCellState();
  124. source.x = p0.x;
  125. source.y = p0.y;
  126. }
  127. else if (source != null)
  128. {
  129. var constraint = mxUtils.getPortConstraints(source, state, true, mxConstants.DIRECTION_MASK_NONE);
  130. if (constraint != mxConstants.DIRECTION_MASK_NONE && constraint != mxConstants.DIRECTION_MASK_WEST +
  131. mxConstants.DIRECTION_MASK_EAST)
  132. {
  133. isSourceLeft = constraint == mxConstants.DIRECTION_MASK_WEST;
  134. }
  135. }
  136. else
  137. {
  138. return;
  139. }
  140. var isTargetLeft = true;
  141. if (target != null)
  142. {
  143. var targetGeometry = graph.getCellGeometry(target.cell);
  144. if (targetGeometry.relative)
  145. {
  146. isTargetLeft = targetGeometry.x <= 0.5;
  147. }
  148. else if (source != null)
  149. {
  150. isTargetLeft = ((p0 != null) ? p0.x : source.x + source.width) < ((pe != null) ? pe.x : target.x);
  151. }
  152. }
  153. if (pe != null)
  154. {
  155. target = new mxCellState();
  156. target.x = pe.x;
  157. target.y = pe.y;
  158. }
  159. else if (target != null)
  160. {
  161. var constraint = mxUtils.getPortConstraints(target, state, false, mxConstants.DIRECTION_MASK_NONE);
  162. if (constraint != mxConstants.DIRECTION_MASK_NONE && constraint != mxConstants.DIRECTION_MASK_WEST +
  163. mxConstants.DIRECTION_MASK_EAST)
  164. {
  165. isTargetLeft = constraint == mxConstants.DIRECTION_MASK_WEST;
  166. }
  167. }
  168. if (source != null && target != null)
  169. {
  170. var x0 = (isSourceLeft) ? source.x : source.x + source.width;
  171. var y0 = view.getRoutingCenterY(source);
  172. var xe = (isTargetLeft) ? target.x : target.x + target.width;
  173. var ye = view.getRoutingCenterY(target);
  174. var seg = segment;
  175. var dx = (isSourceLeft) ? -seg : seg;
  176. var dep = new mxPoint(x0 + dx, y0);
  177. dx = (isTargetLeft) ? -seg : seg;
  178. var arr = new mxPoint(xe + dx, ye);
  179. // Adds intermediate points if both go out on same side
  180. if (isSourceLeft == isTargetLeft)
  181. {
  182. var x = (isSourceLeft) ?
  183. Math.min(x0, xe)-segment :
  184. Math.max(x0, xe)+segment;
  185. result.push(new mxPoint(x, y0));
  186. result.push(new mxPoint(x, ye));
  187. }
  188. else if ((dep.x < arr.x) == isSourceLeft)
  189. {
  190. var midY = y0 + (ye - y0) / 2;
  191. result.push(dep);
  192. result.push(new mxPoint(dep.x, midY));
  193. result.push(new mxPoint(arr.x, midY));
  194. result.push(arr);
  195. }
  196. else
  197. {
  198. result.push(dep);
  199. result.push(arr);
  200. }
  201. }
  202. },
  203. /**
  204. * Function: Loop
  205. *
  206. * Implements a self-reference, aka. loop.
  207. */
  208. Loop: function(state, source, target, points, result)
  209. {
  210. var pts = state.absolutePoints;
  211. var p0 = pts[0];
  212. var pe = pts[pts.length-1];
  213. if (p0 != null && pe != null)
  214. {
  215. if (points != null && points.length > 0)
  216. {
  217. for (var i = 0; i < points.length; i++)
  218. {
  219. var pt = points[i];
  220. pt = state.view.transformControlPoint(state, pt);
  221. result.push(new mxPoint(pt.x, pt.y));
  222. }
  223. }
  224. return;
  225. }
  226. if (source != null)
  227. {
  228. var view = state.view;
  229. var graph = view.graph;
  230. var pt = (points != null && points.length > 0) ? points[0] : null;
  231. if (pt != null)
  232. {
  233. pt = view.transformControlPoint(state, pt);
  234. if (mxUtils.contains(source, pt.x, pt.y))
  235. {
  236. pt = null;
  237. }
  238. }
  239. var x = 0;
  240. var dx = 0;
  241. var y = 0;
  242. var dy = 0;
  243. var seg = mxUtils.getValue(state.style, mxConstants.STYLE_SEGMENT,
  244. graph.gridSize) * view.scale;
  245. var dir = mxUtils.getValue(state.style, mxConstants.STYLE_DIRECTION,
  246. mxConstants.DIRECTION_WEST);
  247. if (dir == mxConstants.DIRECTION_NORTH ||
  248. dir == mxConstants.DIRECTION_SOUTH)
  249. {
  250. x = view.getRoutingCenterX(source);
  251. dx = seg;
  252. }
  253. else
  254. {
  255. y = view.getRoutingCenterY(source);
  256. dy = seg;
  257. }
  258. if (pt == null ||
  259. pt.x < source.x ||
  260. pt.x > source.x + source.width)
  261. {
  262. if (pt != null)
  263. {
  264. x = pt.x;
  265. dy = Math.max(Math.abs(y - pt.y), dy);
  266. }
  267. else
  268. {
  269. if (dir == mxConstants.DIRECTION_NORTH)
  270. {
  271. y = source.y - 2 * dx;
  272. }
  273. else if (dir == mxConstants.DIRECTION_SOUTH)
  274. {
  275. y = source.y + source.height + 2 * dx;
  276. }
  277. else if (dir == mxConstants.DIRECTION_EAST)
  278. {
  279. x = source.x - 2 * dy;
  280. }
  281. else
  282. {
  283. x = source.x + source.width + 2 * dy;
  284. }
  285. }
  286. }
  287. else if (pt != null)
  288. {
  289. x = view.getRoutingCenterX(source);
  290. dx = Math.max(Math.abs(x - pt.x), dy);
  291. y = pt.y;
  292. dy = 0;
  293. }
  294. result.push(new mxPoint(x - dx, y - dy));
  295. result.push(new mxPoint(x + dx, y + dy));
  296. }
  297. },
  298. /**
  299. * Function: ElbowConnector
  300. *
  301. * Uses either <SideToSide> or <TopToBottom> depending on the horizontal
  302. * flag in the cell style. <SideToSide> is used if horizontal is true or
  303. * unspecified. See <EntityRelation> for a description of the
  304. * parameters.
  305. */
  306. ElbowConnector: function(state, source, target, points, result)
  307. {
  308. var pt = (points != null && points.length > 0) ? points[0] : null;
  309. var vertical = false;
  310. var horizontal = false;
  311. if (source != null && target != null)
  312. {
  313. if (pt != null)
  314. {
  315. var left = Math.min(source.x, target.x);
  316. var right = Math.max(source.x + source.width,
  317. target.x + target.width);
  318. var top = Math.min(source.y, target.y);
  319. var bottom = Math.max(source.y + source.height,
  320. target.y + target.height);
  321. pt = state.view.transformControlPoint(state, pt);
  322. vertical = pt.y < top || pt.y > bottom;
  323. horizontal = pt.x < left || pt.x > right;
  324. }
  325. else
  326. {
  327. var left = Math.max(source.x, target.x);
  328. var right = Math.min(source.x + source.width,
  329. target.x + target.width);
  330. vertical = left == right;
  331. if (!vertical)
  332. {
  333. var top = Math.max(source.y, target.y);
  334. var bottom = Math.min(source.y + source.height,
  335. target.y + target.height);
  336. horizontal = top == bottom;
  337. }
  338. }
  339. }
  340. if (!horizontal && (vertical ||
  341. state.style[mxConstants.STYLE_ELBOW] == mxConstants.ELBOW_VERTICAL))
  342. {
  343. mxEdgeStyle.TopToBottom(state, source, target, points, result);
  344. }
  345. else
  346. {
  347. mxEdgeStyle.SideToSide(state, source, target, points, result);
  348. }
  349. },
  350. /**
  351. * Function: SideToSide
  352. *
  353. * Implements a vertical elbow edge. See <EntityRelation> for a description
  354. * of the parameters.
  355. */
  356. SideToSide: function(state, source, target, points, result)
  357. {
  358. var view = state.view;
  359. var pt = (points != null && points.length > 0) ? points[0] : null;
  360. var pts = state.absolutePoints;
  361. var p0 = pts[0];
  362. var pe = pts[pts.length-1];
  363. if (pt != null)
  364. {
  365. pt = view.transformControlPoint(state, pt);
  366. }
  367. if (p0 != null)
  368. {
  369. source = new mxCellState();
  370. source.x = p0.x;
  371. source.y = p0.y;
  372. }
  373. if (pe != null)
  374. {
  375. target = new mxCellState();
  376. target.x = pe.x;
  377. target.y = pe.y;
  378. }
  379. if (source != null && target != null)
  380. {
  381. var l = Math.max(source.x, target.x);
  382. var r = Math.min(source.x + source.width,
  383. target.x + target.width);
  384. var x = (pt != null) ? pt.x : Math.round(r + (l - r) / 2);
  385. var y1 = view.getRoutingCenterY(source);
  386. var y2 = view.getRoutingCenterY(target);
  387. if (pt != null)
  388. {
  389. if (pt.y >= source.y && pt.y <= source.y + source.height)
  390. {
  391. y1 = pt.y;
  392. }
  393. if (pt.y >= target.y && pt.y <= target.y + target.height)
  394. {
  395. y2 = pt.y;
  396. }
  397. }
  398. if (!mxUtils.contains(target, x, y1) &&
  399. !mxUtils.contains(source, x, y1))
  400. {
  401. result.push(new mxPoint(x, y1));
  402. }
  403. if (!mxUtils.contains(target, x, y2) &&
  404. !mxUtils.contains(source, x, y2))
  405. {
  406. result.push(new mxPoint(x, y2));
  407. }
  408. if (result.length == 1)
  409. {
  410. if (pt != null)
  411. {
  412. if (!mxUtils.contains(target, x, pt.y) &&
  413. !mxUtils.contains(source, x, pt.y))
  414. {
  415. result.push(new mxPoint(x, pt.y));
  416. }
  417. }
  418. else
  419. {
  420. var t = Math.max(source.y, target.y);
  421. var b = Math.min(source.y + source.height,
  422. target.y + target.height);
  423. result.push(new mxPoint(x, t + (b - t) / 2));
  424. }
  425. }
  426. }
  427. },
  428. /**
  429. * Function: TopToBottom
  430. *
  431. * Implements a horizontal elbow edge. See <EntityRelation> for a
  432. * description of the parameters.
  433. */
  434. TopToBottom: function(state, source, target, points, result)
  435. {
  436. var view = state.view;
  437. var pt = (points != null && points.length > 0) ? points[0] : null;
  438. var pts = state.absolutePoints;
  439. var p0 = pts[0];
  440. var pe = pts[pts.length-1];
  441. if (pt != null)
  442. {
  443. pt = view.transformControlPoint(state, pt);
  444. }
  445. if (p0 != null)
  446. {
  447. source = new mxCellState();
  448. source.x = p0.x;
  449. source.y = p0.y;
  450. }
  451. if (pe != null)
  452. {
  453. target = new mxCellState();
  454. target.x = pe.x;
  455. target.y = pe.y;
  456. }
  457. if (source != null && target != null)
  458. {
  459. var t = Math.max(source.y, target.y);
  460. var b = Math.min(source.y + source.height,
  461. target.y + target.height);
  462. var x = view.getRoutingCenterX(source);
  463. if (pt != null &&
  464. pt.x >= source.x &&
  465. pt.x <= source.x + source.width)
  466. {
  467. x = pt.x;
  468. }
  469. var y = (pt != null) ? pt.y : Math.round(b + (t - b) / 2);
  470. if (!mxUtils.contains(target, x, y) &&
  471. !mxUtils.contains(source, x, y))
  472. {
  473. result.push(new mxPoint(x, y));
  474. }
  475. if (pt != null &&
  476. pt.x >= target.x &&
  477. pt.x <= target.x + target.width)
  478. {
  479. x = pt.x;
  480. }
  481. else
  482. {
  483. x = view.getRoutingCenterX(target);
  484. }
  485. if (!mxUtils.contains(target, x, y) &&
  486. !mxUtils.contains(source, x, y))
  487. {
  488. result.push(new mxPoint(x, y));
  489. }
  490. if (result.length == 1)
  491. {
  492. if (pt != null && result.length == 1)
  493. {
  494. if (!mxUtils.contains(target, pt.x, y) &&
  495. !mxUtils.contains(source, pt.x, y))
  496. {
  497. result.push(new mxPoint(pt.x, y));
  498. }
  499. }
  500. else
  501. {
  502. var l = Math.max(source.x, target.x);
  503. var r = Math.min(source.x + source.width,
  504. target.x + target.width);
  505. result.push(new mxPoint(l + (r - l) / 2, y));
  506. }
  507. }
  508. }
  509. },
  510. /**
  511. * Function: SegmentConnector
  512. *
  513. * Implements an orthogonal edge style. Use <mxEdgeSegmentHandler>
  514. * as an interactive handler for this style.
  515. *
  516. * state - <mxCellState> that represents the edge to be updated.
  517. * sourceScaled - <mxCellState> that represents the source terminal.
  518. * targetScaled - <mxCellState> that represents the target terminal.
  519. * controlHints - List of relative control points.
  520. * result - Array of <mxPoints> that represent the actual points of the
  521. * edge.
  522. *
  523. */
  524. SegmentConnector: function(state, sourceScaled, targetScaled, controlHints, result)
  525. {
  526. // Creates array of all way- and terminalpoints
  527. var pts = mxEdgeStyle.scalePointArray(state.absolutePoints, state.view.scale);
  528. var source = mxEdgeStyle.scaleCellState(sourceScaled, state.view.scale);
  529. var target = mxEdgeStyle.scaleCellState(targetScaled, state.view.scale);
  530. var tol = 1;
  531. // Whether the first segment outgoing from the source end is horizontal
  532. var lastPushed = (result.length > 0) ? result[0] : null;
  533. var horizontal = true;
  534. var hint = null;
  535. // Adds waypoints only if outside of tolerance
  536. function pushPoint(pt)
  537. {
  538. pt.x = Math.round(pt.x * state.view.scale * 10) / 10;
  539. pt.y = Math.round(pt.y * state.view.scale * 10) / 10;
  540. if (lastPushed == null || Math.abs(lastPushed.x - pt.x) >= tol || Math.abs(lastPushed.y - pt.y) >= Math.max(1, state.view.scale))
  541. {
  542. result.push(pt);
  543. lastPushed = pt;
  544. }
  545. return lastPushed;
  546. };
  547. // Adds the first point
  548. var pt = pts[0];
  549. if (pt == null && source != null)
  550. {
  551. pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source));
  552. }
  553. else if (pt != null)
  554. {
  555. pt = pt.clone();
  556. }
  557. var lastInx = pts.length - 1;
  558. // Adds the waypoints
  559. if (controlHints != null && controlHints.length > 0)
  560. {
  561. // Converts all hints and removes nulls
  562. var hints = [];
  563. for (var i = 0; i < controlHints.length; i++)
  564. {
  565. var tmp = state.view.transformControlPoint(state, controlHints[i], true);
  566. if (tmp != null)
  567. {
  568. hints.push(tmp);
  569. }
  570. }
  571. if (hints.length == 0)
  572. {
  573. return;
  574. }
  575. // Aligns source and target hint to fixed points
  576. if (pt != null && hints[0] != null)
  577. {
  578. if (Math.abs(hints[0].x - pt.x) < tol)
  579. {
  580. hints[0].x = pt.x;
  581. }
  582. if (Math.abs(hints[0].y - pt.y) < tol)
  583. {
  584. hints[0].y = pt.y;
  585. }
  586. }
  587. var pe = pts[lastInx];
  588. if (pe != null && hints[hints.length - 1] != null)
  589. {
  590. if (Math.abs(hints[hints.length - 1].x - pe.x) < tol)
  591. {
  592. hints[hints.length - 1].x = pe.x;
  593. }
  594. if (Math.abs(hints[hints.length - 1].y - pe.y) < tol)
  595. {
  596. hints[hints.length - 1].y = pe.y;
  597. }
  598. }
  599. hint = hints[0];
  600. var currentTerm = source;
  601. var currentPt = pts[0];
  602. var hozChan = false;
  603. var vertChan = false;
  604. var currentHint = hint;
  605. if (currentPt != null)
  606. {
  607. currentTerm = null;
  608. }
  609. // Check for alignment with fixed points and with channels
  610. // at source and target segments only
  611. for (var i = 0; i < 2; i++)
  612. {
  613. var fixedVertAlign = currentPt != null && currentPt.x == currentHint.x;
  614. var fixedHozAlign = currentPt != null && currentPt.y == currentHint.y;
  615. var inHozChan = currentTerm != null && (currentHint.y >= currentTerm.y &&
  616. currentHint.y <= currentTerm.y + currentTerm.height);
  617. var inVertChan = currentTerm != null && (currentHint.x >= currentTerm.x &&
  618. currentHint.x <= currentTerm.x + currentTerm.width);
  619. hozChan = fixedHozAlign || (currentPt == null && inHozChan);
  620. vertChan = fixedVertAlign || (currentPt == null && inVertChan);
  621. // If the current hint falls in both the hor and vert channels in the case
  622. // of a floating port, or if the hint is exactly co-incident with a
  623. // fixed point, ignore the source and try to work out the orientation
  624. // from the target end
  625. if (i==0 && ((hozChan && vertChan) || (fixedVertAlign && fixedHozAlign)))
  626. {
  627. }
  628. else
  629. {
  630. if (currentPt != null && (!fixedHozAlign && !fixedVertAlign) && (inHozChan || inVertChan))
  631. {
  632. horizontal = inHozChan ? false : true;
  633. break;
  634. }
  635. if (vertChan || hozChan)
  636. {
  637. horizontal = hozChan;
  638. if (i == 1)
  639. {
  640. // Work back from target end
  641. horizontal = hints.length % 2 == 0 ? hozChan : vertChan;
  642. }
  643. break;
  644. }
  645. }
  646. currentTerm = target;
  647. currentPt = pts[lastInx];
  648. if (currentPt != null)
  649. {
  650. currentTerm = null;
  651. }
  652. currentHint = hints[hints.length - 1];
  653. if (fixedVertAlign && fixedHozAlign)
  654. {
  655. hints = hints.slice(1);
  656. }
  657. }
  658. if (horizontal && ((pts[0] != null && pts[0].y != hint.y) ||
  659. (pts[0] == null && source != null &&
  660. (hint.y < source.y || hint.y > source.y + source.height))))
  661. {
  662. pushPoint(new mxPoint(pt.x, hint.y));
  663. }
  664. else if (!horizontal && ((pts[0] != null && pts[0].x != hint.x) ||
  665. (pts[0] == null && source != null &&
  666. (hint.x < source.x || hint.x > source.x + source.width))))
  667. {
  668. pushPoint(new mxPoint(hint.x, pt.y));
  669. }
  670. if (horizontal)
  671. {
  672. pt.y = hint.y;
  673. }
  674. else
  675. {
  676. pt.x = hint.x;
  677. }
  678. for (var i = 0; i < hints.length; i++)
  679. {
  680. horizontal = !horizontal;
  681. hint = hints[i];
  682. // mxLog.show();
  683. // mxLog.debug('hint', i, hint.x, hint.y);
  684. if (horizontal)
  685. {
  686. pt.y = hint.y;
  687. }
  688. else
  689. {
  690. pt.x = hint.x;
  691. }
  692. pushPoint(pt.clone());
  693. }
  694. }
  695. else
  696. {
  697. hint = pt;
  698. // FIXME: First click in connect preview toggles orientation
  699. horizontal = true;
  700. }
  701. // Adds the last point
  702. pt = pts[lastInx];
  703. if (pt == null && target != null)
  704. {
  705. pt = new mxPoint(state.view.getRoutingCenterX(target), state.view.getRoutingCenterY(target));
  706. }
  707. if (pt != null)
  708. {
  709. if (hint != null)
  710. {
  711. if (horizontal && ((pts[lastInx] != null && pts[lastInx].y != hint.y) ||
  712. (pts[lastInx] == null && target != null &&
  713. (hint.y < target.y || hint.y > target.y + target.height))))
  714. {
  715. pushPoint(new mxPoint(pt.x, hint.y));
  716. }
  717. else if (!horizontal && ((pts[lastInx] != null && pts[lastInx].x != hint.x) ||
  718. (pts[lastInx] == null && target != null &&
  719. (hint.x < target.x || hint.x > target.x + target.width))))
  720. {
  721. pushPoint(new mxPoint(hint.x, pt.y));
  722. }
  723. }
  724. }
  725. // Removes bends inside the source terminal for floating ports
  726. if (pts[0] == null && source != null)
  727. {
  728. while (result.length > 1 && result[1] != null &&
  729. mxUtils.contains(source, result[1].x, result[1].y))
  730. {
  731. result.splice(1, 1);
  732. }
  733. }
  734. // Removes bends inside the target terminal
  735. if (pts[lastInx] == null && target != null)
  736. {
  737. while (result.length > 1 && result[result.length - 1] != null &&
  738. mxUtils.contains(target, result[result.length - 1].x, result[result.length - 1].y))
  739. {
  740. result.splice(result.length - 1, 1);
  741. }
  742. }
  743. // Removes last point if inside tolerance with end point
  744. if (pe != null && result[result.length - 1] != null &&
  745. Math.abs(pe.x - result[result.length - 1].x) <= tol &&
  746. Math.abs(pe.y - result[result.length - 1].y) <= tol)
  747. {
  748. result.splice(result.length - 1, 1);
  749. // Lines up second last point in result with end point
  750. if (result[result.length - 1] != null)
  751. {
  752. if (Math.abs(result[result.length - 1].x - pe.x) < tol)
  753. {
  754. result[result.length - 1].x = pe.x;
  755. }
  756. if (Math.abs(result[result.length - 1].y - pe.y) < tol)
  757. {
  758. result[result.length - 1].y = pe.y;
  759. }
  760. }
  761. }
  762. },
  763. orthBuffer: 10,
  764. orthPointsFallback: true,
  765. dirVectors: [ [ -1, 0 ],
  766. [ 0, -1 ], [ 1, 0 ], [ 0, 1 ], [ -1, 0 ], [ 0, -1 ], [ 1, 0 ] ],
  767. wayPoints1: [ [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0],
  768. [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0] ],
  769. routePatterns: [
  770. [ [ 513, 2308, 2081, 2562 ], [ 513, 1090, 514, 2184, 2114, 2561 ],
  771. [ 513, 1090, 514, 2564, 2184, 2562 ],
  772. [ 513, 2308, 2561, 1090, 514, 2568, 2308 ] ],
  773. [ [ 514, 1057, 513, 2308, 2081, 2562 ], [ 514, 2184, 2114, 2561 ],
  774. [ 514, 2184, 2562, 1057, 513, 2564, 2184 ],
  775. [ 514, 1057, 513, 2568, 2308, 2561 ] ],
  776. [ [ 1090, 514, 1057, 513, 2308, 2081, 2562 ], [ 2114, 2561 ],
  777. [ 1090, 2562, 1057, 513, 2564, 2184 ],
  778. [ 1090, 514, 1057, 513, 2308, 2561, 2568 ] ],
  779. [ [ 2081, 2562 ], [ 1057, 513, 1090, 514, 2184, 2114, 2561 ],
  780. [ 1057, 513, 1090, 514, 2184, 2562, 2564 ],
  781. [ 1057, 2561, 1090, 514, 2568, 2308 ] ] ],
  782. inlineRoutePatterns: [
  783. [ null, [ 2114, 2568 ], null, null ],
  784. [ null, [ 514, 2081, 2114, 2568 ] , null, null ],
  785. [ null, [ 2114, 2561 ], null, null ],
  786. [ [ 2081, 2562 ], [ 1057, 2114, 2568 ],
  787. [ 2184, 2562 ],
  788. null ] ],
  789. vertexSeperations: [],
  790. limits: [
  791. [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
  792. [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ] ],
  793. LEFT_MASK: 32,
  794. TOP_MASK: 64,
  795. RIGHT_MASK: 128,
  796. BOTTOM_MASK: 256,
  797. LEFT: 1,
  798. TOP: 2,
  799. RIGHT: 4,
  800. BOTTOM: 8,
  801. // TODO remove magic numbers
  802. SIDE_MASK: 480,
  803. //mxEdgeStyle.LEFT_MASK | mxEdgeStyle.TOP_MASK | mxEdgeStyle.RIGHT_MASK
  804. //| mxEdgeStyle.BOTTOM_MASK,
  805. CENTER_MASK: 512,
  806. SOURCE_MASK: 1024,
  807. TARGET_MASK: 2048,
  808. VERTEX_MASK: 3072,
  809. // mxEdgeStyle.SOURCE_MASK | mxEdgeStyle.TARGET_MASK,
  810. getJettySize: function(state, isSource)
  811. {
  812. var value = mxUtils.getValue(state.style, (isSource) ? mxConstants.STYLE_SOURCE_JETTY_SIZE :
  813. mxConstants.STYLE_TARGET_JETTY_SIZE, mxUtils.getValue(state.style,
  814. mxConstants.STYLE_JETTY_SIZE, mxEdgeStyle.orthBuffer));
  815. if (value == 'auto')
  816. {
  817. // Computes the automatic jetty size
  818. var type = mxUtils.getValue(state.style, (isSource) ? mxConstants.STYLE_STARTARROW : mxConstants.STYLE_ENDARROW, mxConstants.NONE);
  819. if (type != mxConstants.NONE)
  820. {
  821. var size = mxUtils.getNumber(state.style, (isSource) ? mxConstants.STYLE_STARTSIZE : mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE);
  822. value = Math.max(2, Math.ceil((size + mxEdgeStyle.orthBuffer) / mxEdgeStyle.orthBuffer)) * mxEdgeStyle.orthBuffer;
  823. }
  824. else
  825. {
  826. value = 2 * mxEdgeStyle.orthBuffer;
  827. }
  828. }
  829. return value;
  830. },
  831. /**
  832. * Function: scalePointArray
  833. *
  834. * Scales an array of <mxPoint>
  835. *
  836. * Parameters:
  837. *
  838. * points - array of <mxPoint> to scale
  839. * scale - the scaling to divide by
  840. *
  841. */
  842. scalePointArray: function(points, scale)
  843. {
  844. var result = [];
  845. if (points != null)
  846. {
  847. for (var i = 0; i < points.length; i++)
  848. {
  849. if (points[i] != null)
  850. {
  851. var pt = new mxPoint(Math.round(points[i].x / scale * 10) / 10,
  852. Math.round(points[i].y / scale * 10) / 10);
  853. result[i] = pt;
  854. }
  855. else
  856. {
  857. result[i] = null;
  858. }
  859. }
  860. }
  861. else
  862. {
  863. result = null;
  864. }
  865. return result;
  866. },
  867. /**
  868. * Function: scaleCellState
  869. *
  870. * Scales an <mxCellState>
  871. *
  872. * Parameters:
  873. *
  874. * state - <mxCellState> to scale
  875. * scale - the scaling to divide by
  876. *
  877. */
  878. scaleCellState: function(state, scale)
  879. {
  880. var result = null;
  881. if (state != null)
  882. {
  883. result = state.clone();
  884. result.setRect(Math.round(state.x / scale * 10) / 10,
  885. Math.round(state.y / scale * 10) / 10,
  886. Math.round(state.width / scale * 10) / 10,
  887. Math.round(state.height / scale * 10) / 10);
  888. }
  889. else
  890. {
  891. result = null;
  892. }
  893. return result;
  894. },
  895. /**
  896. * Function: OrthConnector
  897. *
  898. * Implements a local orthogonal router between the given
  899. * cells.
  900. *
  901. * Parameters:
  902. *
  903. * state - <mxCellState> that represents the edge to be updated.
  904. * sourceScaled - <mxCellState> that represents the source terminal.
  905. * targetScaled - <mxCellState> that represents the target terminal.
  906. * controlHints - List of relative control points.
  907. * result - Array of <mxPoints> that represent the actual points of the
  908. * edge.
  909. *
  910. */
  911. OrthConnector: function(state, sourceScaled, targetScaled, controlHints, result)
  912. {
  913. var graph = state.view.graph;
  914. var sourceEdge = source == null ? false : graph.getModel().isEdge(source.cell);
  915. var targetEdge = target == null ? false : graph.getModel().isEdge(target.cell);
  916. var pts = mxEdgeStyle.scalePointArray(state.absolutePoints, state.view.scale);
  917. var source = mxEdgeStyle.scaleCellState(sourceScaled, state.view.scale);
  918. var target = mxEdgeStyle.scaleCellState(targetScaled, state.view.scale);
  919. var p0 = pts[0];
  920. var pe = pts[pts.length-1];
  921. var sourceX = source != null ? source.x : p0.x;
  922. var sourceY = source != null ? source.y : p0.y;
  923. var sourceWidth = source != null ? source.width : 0;
  924. var sourceHeight = source != null ? source.height : 0;
  925. var targetX = target != null ? target.x : pe.x;
  926. var targetY = target != null ? target.y : pe.y;
  927. var targetWidth = target != null ? target.width : 0;
  928. var targetHeight = target != null ? target.height : 0;
  929. var sourceBuffer = mxEdgeStyle.getJettySize(state, true);
  930. var targetBuffer = mxEdgeStyle.getJettySize(state, false);
  931. //console.log('sourceBuffer', sourceBuffer);
  932. //console.log('targetBuffer', targetBuffer);
  933. // Workaround for loop routing within buffer zone
  934. if (source != null && target == source)
  935. {
  936. targetBuffer = Math.max(sourceBuffer, targetBuffer);
  937. sourceBuffer = targetBuffer;
  938. }
  939. var totalBuffer = targetBuffer + sourceBuffer;
  940. // console.log('totalBuffer', totalBuffer);
  941. var tooShort = false;
  942. // Checks minimum distance for fixed points and falls back to segment connector
  943. if (p0 != null && pe != null)
  944. {
  945. var dx = pe.x - p0.x;
  946. var dy = pe.y - p0.y;
  947. tooShort = dx * dx + dy * dy < totalBuffer * totalBuffer;
  948. }
  949. if (tooShort || (mxEdgeStyle.orthPointsFallback && (controlHints != null &&
  950. controlHints.length > 0)) || sourceEdge || targetEdge)
  951. {
  952. mxEdgeStyle.SegmentConnector(state, sourceScaled, targetScaled, controlHints, result);
  953. return;
  954. }
  955. // Determine the side(s) of the source and target vertices
  956. // that the edge may connect to
  957. // portConstraint [source, target]
  958. var portConstraint = [mxConstants.DIRECTION_MASK_ALL, mxConstants.DIRECTION_MASK_ALL];
  959. var rotation = 0;
  960. if (source != null)
  961. {
  962. portConstraint[0] = mxUtils.getPortConstraints(source, state, true,
  963. mxConstants.DIRECTION_MASK_ALL);
  964. rotation = mxUtils.getValue(source.style, mxConstants.STYLE_ROTATION, 0);
  965. //console.log('source rotation', rotation);
  966. if (rotation != 0)
  967. {
  968. var newRect = mxUtils.getBoundingBox(new mxRectangle(sourceX, sourceY, sourceWidth, sourceHeight), rotation);
  969. sourceX = newRect.x;
  970. sourceY = newRect.y;
  971. sourceWidth = newRect.width;
  972. sourceHeight = newRect.height;
  973. }
  974. }
  975. if (target != null)
  976. {
  977. portConstraint[1] = mxUtils.getPortConstraints(target, state, false,
  978. mxConstants.DIRECTION_MASK_ALL);
  979. rotation = mxUtils.getValue(target.style, mxConstants.STYLE_ROTATION, 0);
  980. //console.log('target rotation', rotation);
  981. if (rotation != 0)
  982. {
  983. var newRect = mxUtils.getBoundingBox(new mxRectangle(targetX, targetY, targetWidth, targetHeight), rotation);
  984. targetX = newRect.x;
  985. targetY = newRect.y;
  986. targetWidth = newRect.width;
  987. targetHeight = newRect.height;
  988. }
  989. }
  990. //console.log('source' , sourceX, sourceY, sourceWidth, sourceHeight);
  991. //console.log('targetX' , targetX, targetY, targetWidth, targetHeight);
  992. var dir = [0, 0];
  993. // Work out which faces of the vertices present against each other
  994. // in a way that would allow a 3-segment connection if port constraints
  995. // permitted.
  996. // geo -> [source, target] [x, y, width, height]
  997. var geo = [ [sourceX, sourceY, sourceWidth, sourceHeight] ,
  998. [targetX, targetY, targetWidth, targetHeight] ];
  999. var buffer = [sourceBuffer, targetBuffer];
  1000. for (var i = 0; i < 2; i++)
  1001. {
  1002. mxEdgeStyle.limits[i][1] = geo[i][0] - buffer[i];
  1003. mxEdgeStyle.limits[i][2] = geo[i][1] - buffer[i];
  1004. mxEdgeStyle.limits[i][4] = geo[i][0] + geo[i][2] + buffer[i];
  1005. mxEdgeStyle.limits[i][8] = geo[i][1] + geo[i][3] + buffer[i];
  1006. }
  1007. // Work out which quad the target is in
  1008. var sourceCenX = geo[0][0] + geo[0][2] / 2.0;
  1009. var sourceCenY = geo[0][1] + geo[0][3] / 2.0;
  1010. var targetCenX = geo[1][0] + geo[1][2] / 2.0;
  1011. var targetCenY = geo[1][1] + geo[1][3] / 2.0;
  1012. var dx = sourceCenX - targetCenX;
  1013. var dy = sourceCenY - targetCenY;
  1014. var quad = 0;
  1015. // 0 | 1
  1016. // -----
  1017. // 3 | 2
  1018. if (dx < 0)
  1019. {
  1020. if (dy < 0)
  1021. {
  1022. quad = 2;
  1023. }
  1024. else
  1025. {
  1026. quad = 1;
  1027. }
  1028. }
  1029. else
  1030. {
  1031. if (dy <= 0)
  1032. {
  1033. quad = 3;
  1034. // Special case on x = 0 and negative y
  1035. if (dx == 0)
  1036. {
  1037. quad = 2;
  1038. }
  1039. }
  1040. }
  1041. //console.log('quad', quad);
  1042. // Check for connection constraints
  1043. var currentTerm = null;
  1044. if (source != null)
  1045. {
  1046. currentTerm = p0;
  1047. }
  1048. var constraint = [ [0.5, 0.5] , [0.5, 0.5] ];
  1049. for (var i = 0; i < 2; i++)
  1050. {
  1051. if (currentTerm != null)
  1052. {
  1053. constraint[i][0] = (currentTerm.x - geo[i][0]) / geo[i][2];
  1054. if (Math.abs(currentTerm.x - geo[i][0]) <= 1)
  1055. {
  1056. dir[i] = mxConstants.DIRECTION_MASK_WEST;
  1057. }
  1058. else if (Math.abs(currentTerm.x - geo[i][0] - geo[i][2]) <= 1)
  1059. {
  1060. dir[i] = mxConstants.DIRECTION_MASK_EAST;
  1061. }
  1062. constraint[i][1] = (currentTerm.y - geo[i][1]) / geo[i][3];
  1063. if (Math.abs(currentTerm.y - geo[i][1]) <= 1)
  1064. {
  1065. dir[i] = mxConstants.DIRECTION_MASK_NORTH;
  1066. }
  1067. else if (Math.abs(currentTerm.y - geo[i][1] - geo[i][3]) <= 1)
  1068. {
  1069. dir[i] = mxConstants.DIRECTION_MASK_SOUTH;
  1070. }
  1071. }
  1072. currentTerm = null;
  1073. if (target != null)
  1074. {
  1075. currentTerm = pe;
  1076. }
  1077. }
  1078. var sourceTopDist = geo[0][1] - (geo[1][1] + geo[1][3]);
  1079. var sourceLeftDist = geo[0][0] - (geo[1][0] + geo[1][2]);
  1080. var sourceBottomDist = geo[1][1] - (geo[0][1] + geo[0][3]);
  1081. var sourceRightDist = geo[1][0] - (geo[0][0] + geo[0][2]);
  1082. mxEdgeStyle.vertexSeperations[1] = Math.max(sourceLeftDist - totalBuffer, 0);
  1083. mxEdgeStyle.vertexSeperations[2] = Math.max(sourceTopDist - totalBuffer, 0);
  1084. mxEdgeStyle.vertexSeperations[4] = Math.max(sourceBottomDist - totalBuffer, 0);
  1085. mxEdgeStyle.vertexSeperations[3] = Math.max(sourceRightDist - totalBuffer, 0);
  1086. //==============================================================
  1087. // Start of source and target direction determination
  1088. // Work through the preferred orientations by relative positioning
  1089. // of the vertices and list them in preferred and available order
  1090. var dirPref = [];
  1091. var horPref = [];
  1092. var vertPref = [];
  1093. horPref[0] = (sourceLeftDist >= sourceRightDist) ? mxConstants.DIRECTION_MASK_WEST
  1094. : mxConstants.DIRECTION_MASK_EAST;
  1095. vertPref[0] = (sourceTopDist >= sourceBottomDist) ? mxConstants.DIRECTION_MASK_NORTH
  1096. : mxConstants.DIRECTION_MASK_SOUTH;
  1097. horPref[1] = mxUtils.reversePortConstraints(horPref[0]);
  1098. vertPref[1] = mxUtils.reversePortConstraints(vertPref[0]);
  1099. var preferredHorizDist = sourceLeftDist >= sourceRightDist ? sourceLeftDist
  1100. : sourceRightDist;
  1101. var preferredVertDist = sourceTopDist >= sourceBottomDist ? sourceTopDist
  1102. : sourceBottomDist;
  1103. var prefOrdering = [ [0, 0] , [0, 0] ];
  1104. var preferredOrderSet = false;
  1105. // If the preferred port isn't available, switch it
  1106. for (var i = 0; i < 2; i++)
  1107. {
  1108. if (dir[i] != 0x0)
  1109. {
  1110. continue;
  1111. }
  1112. if ((horPref[i] & portConstraint[i]) == 0)
  1113. {
  1114. horPref[i] = mxUtils.reversePortConstraints(horPref[i]);
  1115. }
  1116. if ((vertPref[i] & portConstraint[i]) == 0)
  1117. {
  1118. vertPref[i] = mxUtils
  1119. .reversePortConstraints(vertPref[i]);
  1120. }
  1121. prefOrdering[i][0] = vertPref[i];
  1122. prefOrdering[i][1] = horPref[i];
  1123. }
  1124. if (preferredVertDist > 0
  1125. && preferredHorizDist > 0)
  1126. {
  1127. // Possibility of two segment edge connection
  1128. if (((horPref[0] & portConstraint[0]) > 0)
  1129. && ((vertPref[1] & portConstraint[1]) > 0))
  1130. {
  1131. prefOrdering[0][0] = horPref[0];
  1132. prefOrdering[0][1] = vertPref[0];
  1133. prefOrdering[1][0] = vertPref[1];
  1134. prefOrdering[1][1] = horPref[1];
  1135. preferredOrderSet = true;
  1136. }
  1137. else if (((vertPref[0] & portConstraint[0]) > 0)
  1138. && ((horPref[1] & portConstraint[1]) > 0))
  1139. {
  1140. prefOrdering[0][0] = vertPref[0];
  1141. prefOrdering[0][1] = horPref[0];
  1142. prefOrdering[1][0] = horPref[1];
  1143. prefOrdering[1][1] = vertPref[1];
  1144. preferredOrderSet = true;
  1145. }
  1146. }
  1147. if (preferredVertDist > 0 && !preferredOrderSet)
  1148. {
  1149. prefOrdering[0][0] = vertPref[0];
  1150. prefOrdering[0][1] = horPref[0];
  1151. prefOrdering[1][0] = vertPref[1];
  1152. prefOrdering[1][1] = horPref[1];
  1153. preferredOrderSet = true;
  1154. }
  1155. if (preferredHorizDist > 0 && !preferredOrderSet)
  1156. {
  1157. prefOrdering[0][0] = horPref[0];
  1158. prefOrdering[0][1] = vertPref[0];
  1159. prefOrdering[1][0] = horPref[1];
  1160. prefOrdering[1][1] = vertPref[1];
  1161. preferredOrderSet = true;
  1162. }
  1163. // The source and target prefs are now an ordered list of
  1164. // the preferred port selections
  1165. // If the list contains gaps, compact it
  1166. for (var i = 0; i < 2; i++)
  1167. {
  1168. if (dir[i] != 0x0)
  1169. {
  1170. continue;
  1171. }
  1172. if ((prefOrdering[i][0] & portConstraint[i]) == 0)
  1173. {
  1174. prefOrdering[i][0] = prefOrdering[i][1];
  1175. }
  1176. dirPref[i] = prefOrdering[i][0] & portConstraint[i];
  1177. dirPref[i] |= (prefOrdering[i][1] & portConstraint[i]) << 8;
  1178. dirPref[i] |= (prefOrdering[1 - i][i] & portConstraint[i]) << 16;
  1179. dirPref[i] |= (prefOrdering[1 - i][1 - i] & portConstraint[i]) << 24;
  1180. if ((dirPref[i] & 0xF) == 0)
  1181. {
  1182. dirPref[i] = dirPref[i] << 8;
  1183. }
  1184. if ((dirPref[i] & 0xF00) == 0)
  1185. {
  1186. dirPref[i] = (dirPref[i] & 0xF) | dirPref[i] >> 8;
  1187. }
  1188. if ((dirPref[i] & 0xF0000) == 0)
  1189. {
  1190. dirPref[i] = (dirPref[i] & 0xFFFF)
  1191. | ((dirPref[i] & 0xF000000) >> 8);
  1192. }
  1193. dir[i] = dirPref[i] & 0xF;
  1194. if (portConstraint[i] == mxConstants.DIRECTION_MASK_WEST
  1195. || portConstraint[i] == mxConstants.DIRECTION_MASK_NORTH
  1196. || portConstraint[i] == mxConstants.DIRECTION_MASK_EAST
  1197. || portConstraint[i] == mxConstants.DIRECTION_MASK_SOUTH)
  1198. {
  1199. dir[i] = portConstraint[i];
  1200. }
  1201. }
  1202. //==============================================================
  1203. // End of source and target direction determination
  1204. var sourceIndex = dir[0] == mxConstants.DIRECTION_MASK_EAST ? 3
  1205. : dir[0];
  1206. var targetIndex = dir[1] == mxConstants.DIRECTION_MASK_EAST ? 3
  1207. : dir[1];
  1208. sourceIndex -= quad;
  1209. targetIndex -= quad;
  1210. if (sourceIndex < 1)
  1211. {
  1212. sourceIndex += 4;
  1213. }
  1214. if (targetIndex < 1)
  1215. {
  1216. targetIndex += 4;
  1217. }
  1218. var routePattern = mxEdgeStyle.routePatterns[sourceIndex - 1][targetIndex - 1];
  1219. //console.log('routePattern', routePattern);
  1220. mxEdgeStyle.wayPoints1[0][0] = geo[0][0];
  1221. mxEdgeStyle.wayPoints1[0][1] = geo[0][1];
  1222. switch (dir[0])
  1223. {
  1224. case mxConstants.DIRECTION_MASK_WEST:
  1225. mxEdgeStyle.wayPoints1[0][0] -= sourceBuffer;
  1226. mxEdgeStyle.wayPoints1[0][1] += constraint[0][1] * geo[0][3];
  1227. break;
  1228. case mxConstants.DIRECTION_MASK_SOUTH:
  1229. mxEdgeStyle.wayPoints1[0][0] += constraint[0][0] * geo[0][2];
  1230. mxEdgeStyle.wayPoints1[0][1] += geo[0][3] + sourceBuffer;
  1231. break;
  1232. case mxConstants.DIRECTION_MASK_EAST:
  1233. mxEdgeStyle.wayPoints1[0][0] += geo[0][2] + sourceBuffer;
  1234. mxEdgeStyle.wayPoints1[0][1] += constraint[0][1] * geo[0][3];
  1235. break;
  1236. case mxConstants.DIRECTION_MASK_NORTH:
  1237. mxEdgeStyle.wayPoints1[0][0] += constraint[0][0] * geo[0][2];
  1238. mxEdgeStyle.wayPoints1[0][1] -= sourceBuffer;
  1239. break;
  1240. }
  1241. var currentIndex = 0;
  1242. // Orientation, 0 horizontal, 1 vertical
  1243. var lastOrientation = (dir[0] & (mxConstants.DIRECTION_MASK_EAST | mxConstants.DIRECTION_MASK_WEST)) > 0 ? 0
  1244. : 1;
  1245. var initialOrientation = lastOrientation;
  1246. var currentOrientation = 0;
  1247. for (var i = 0; i < routePattern.length; i++)
  1248. {
  1249. var nextDirection = routePattern[i] & 0xF;
  1250. // Rotate the index of this direction by the quad
  1251. // to get the real direction
  1252. var directionIndex = nextDirection == mxConstants.DIRECTION_MASK_EAST ? 3
  1253. : nextDirection;
  1254. directionIndex += quad;
  1255. if (directionIndex > 4)
  1256. {
  1257. directionIndex -= 4;
  1258. }
  1259. var direction = mxEdgeStyle.dirVectors[directionIndex - 1];
  1260. currentOrientation = (directionIndex % 2 > 0) ? 0 : 1;
  1261. // Only update the current index if the point moved
  1262. // in the direction of the current segment move,
  1263. // otherwise the same point is moved until there is
  1264. // a segment direction change
  1265. if (currentOrientation != lastOrientation)
  1266. {
  1267. currentIndex++;
  1268. // Copy the previous way point into the new one
  1269. // We can't base the new position on index - 1
  1270. // because sometime elbows turn out not to exist,
  1271. // then we'd have to rewind.
  1272. mxEdgeStyle.wayPoints1[currentIndex][0] = mxEdgeStyle.wayPoints1[currentIndex - 1][0];
  1273. mxEdgeStyle.wayPoints1[currentIndex][1] = mxEdgeStyle.wayPoints1[currentIndex - 1][1];
  1274. }
  1275. var tar = (routePattern[i] & mxEdgeStyle.TARGET_MASK) > 0;
  1276. var sou = (routePattern[i] & mxEdgeStyle.SOURCE_MASK) > 0;
  1277. var side = (routePattern[i] & mxEdgeStyle.SIDE_MASK) >> 5;
  1278. side = side << quad;
  1279. if (side > 0xF)
  1280. {
  1281. side = side >> 4;
  1282. }
  1283. var center = (routePattern[i] & mxEdgeStyle.CENTER_MASK) > 0;
  1284. if ((sou || tar) && side < 9)
  1285. {
  1286. var limit = 0;
  1287. var souTar = sou ? 0 : 1;
  1288. if (center && currentOrientation == 0)
  1289. {
  1290. limit = geo[souTar][0] + constraint[souTar][0] * geo[souTar][2];
  1291. }
  1292. else if (center)
  1293. {
  1294. limit = geo[souTar][1] + constraint[souTar][1] * geo[souTar][3];
  1295. }
  1296. else
  1297. {
  1298. limit = mxEdgeStyle.limits[souTar][side];
  1299. }
  1300. if (currentOrientation == 0)
  1301. {
  1302. var lastX = mxEdgeStyle.wayPoints1[currentIndex][0];
  1303. var deltaX = (limit - lastX) * direction[0];
  1304. if (deltaX > 0)
  1305. {
  1306. mxEdgeStyle.wayPoints1[currentIndex][0] += direction[0]
  1307. * deltaX;
  1308. }
  1309. }
  1310. else
  1311. {
  1312. var lastY = mxEdgeStyle.wayPoints1[currentIndex][1];
  1313. var deltaY = (limit - lastY) * direction[1];
  1314. if (deltaY > 0)
  1315. {
  1316. mxEdgeStyle.wayPoints1[currentIndex][1] += direction[1]
  1317. * deltaY;
  1318. }
  1319. }
  1320. }
  1321. else if (center)
  1322. {
  1323. // Which center we're travelling to depend on the current direction
  1324. mxEdgeStyle.wayPoints1[currentIndex][0] += direction[0]
  1325. * Math.abs(mxEdgeStyle.vertexSeperations[directionIndex] / 2);
  1326. mxEdgeStyle.wayPoints1[currentIndex][1] += direction[1]
  1327. * Math.abs(mxEdgeStyle.vertexSeperations[directionIndex] / 2);
  1328. }
  1329. if (currentIndex > 0
  1330. && mxEdgeStyle.wayPoints1[currentIndex][currentOrientation] == mxEdgeStyle.wayPoints1[currentIndex - 1][currentOrientation])
  1331. {
  1332. currentIndex--;
  1333. }
  1334. else
  1335. {
  1336. lastOrientation = currentOrientation;
  1337. }
  1338. }
  1339. for (var i = 0; i <= currentIndex; i++)
  1340. {
  1341. if (i == currentIndex)
  1342. {
  1343. // Last point can cause last segment to be in
  1344. // same direction as jetty/approach. If so,
  1345. // check the number of points is consistent
  1346. // with the relative orientation of source and target
  1347. // jx. Same orientation requires an even
  1348. // number of turns (points), different requires
  1349. // odd.
  1350. var targetOrientation = (dir[1] & (mxConstants.DIRECTION_MASK_EAST | mxConstants.DIRECTION_MASK_WEST)) > 0 ? 0
  1351. : 1;
  1352. var sameOrient = targetOrientation == initialOrientation ? 0 : 1;
  1353. // (currentIndex + 1) % 2 is 0 for even number of points,
  1354. // 1 for odd
  1355. if (sameOrient != (currentIndex + 1) % 2)
  1356. {
  1357. // The last point isn't required
  1358. break;
  1359. }
  1360. }
  1361. result.push(new mxPoint(Math.round(mxEdgeStyle.wayPoints1[i][0] * state.view.scale * 10) / 10,
  1362. Math.round(mxEdgeStyle.wayPoints1[i][1] * state.view.scale * 10) / 10));
  1363. }
  1364. //console.log(result);
  1365. // Removes duplicates
  1366. var index = 1;
  1367. while (index < result.length)
  1368. {
  1369. if (result[index - 1] == null || result[index] == null ||
  1370. result[index - 1].x != result[index].x ||
  1371. result[index - 1].y != result[index].y)
  1372. {
  1373. index++;
  1374. }
  1375. else
  1376. {
  1377. result.splice(index, 1);
  1378. }
  1379. }
  1380. },
  1381. getRoutePattern: function(dir, quad, dx, dy)
  1382. {
  1383. var sourceIndex = dir[0] == mxConstants.DIRECTION_MASK_EAST ? 3
  1384. : dir[0];
  1385. var targetIndex = dir[1] == mxConstants.DIRECTION_MASK_EAST ? 3
  1386. : dir[1];
  1387. sourceIndex -= quad;
  1388. targetIndex -= quad;
  1389. if (sourceIndex < 1)
  1390. {
  1391. sourceIndex += 4;
  1392. }
  1393. if (targetIndex < 1)
  1394. {
  1395. targetIndex += 4;
  1396. }
  1397. var result = routePatterns[sourceIndex - 1][targetIndex - 1];
  1398. if (dx == 0 || dy == 0)
  1399. {
  1400. if (inlineRoutePatterns[sourceIndex - 1][targetIndex - 1] != null)
  1401. {
  1402. result = inlineRoutePatterns[sourceIndex - 1][targetIndex - 1];
  1403. }
  1404. }
  1405. return result;
  1406. }
  1407. };
  1408. __mxOutput.mxEdgeStyle = typeof mxEdgeStyle !== 'undefined' ? mxEdgeStyle : undefined;