Committed by
Gerrit Code Review
Prevent overlap of link labels in WEB UI
Change-Id: I6e261186abf9ed87a3c55e50d123e423f652aa41
Showing
2 changed files
with
48 additions
and
3 deletions
| ... | @@ -365,7 +365,7 @@ | ... | @@ -365,7 +365,7 @@ |
| 365 | rect.attr(rectAroundText(el)); | 365 | rect.attr(rectAroundText(el)); |
| 366 | text.attr('dy', linkLabelOffset); | 366 | text.attr('dy', linkLabelOffset); |
| 367 | 367 | ||
| 368 | - el.attr('transform', transformLabel(d.ldata.position)); | 368 | + el.attr('transform', transformLabel(d.ldata.position, d.key)); |
| 369 | }); | 369 | }); |
| 370 | 370 | ||
| 371 | // Remove any labels that are no longer required. | 371 | // Remove any labels that are no longer required. |
| ... | @@ -386,11 +386,56 @@ | ... | @@ -386,11 +386,56 @@ |
| 386 | return box; | 386 | return box; |
| 387 | } | 387 | } |
| 388 | 388 | ||
| 389 | - function transformLabel(p) { | 389 | + function generateLabelFunction() { |
| 390 | + var labels = []; | ||
| 391 | + var xGap = 15; | ||
| 392 | + var yGap = 17; | ||
| 393 | + | ||
| 394 | + return function(newId, newX, newY) { | ||
| 395 | + | ||
| 396 | + var idx = -1; | ||
| 397 | + | ||
| 398 | + labels.forEach(function(l, i) { | ||
| 399 | + if (l.id === newId) { | ||
| 400 | + idx = i; | ||
| 401 | + return; | ||
| 402 | + } | ||
| 403 | + var minX = l.x - xGap; | ||
| 404 | + var maxX = l.x + xGap; | ||
| 405 | + var minY = l.y - yGap; | ||
| 406 | + var maxY = l.y + yGap; | ||
| 407 | + | ||
| 408 | + if (newX > minX && newX < maxX && newY > minY && newY < maxY) { | ||
| 409 | + // labels are overlapped | ||
| 410 | + newX = newX - xGap; | ||
| 411 | + newY = newY - yGap; | ||
| 412 | + } | ||
| 413 | + }); | ||
| 414 | + | ||
| 415 | + if (idx === -1) { | ||
| 416 | + labels.push({id: newId, x: newX, y: newY}); | ||
| 417 | + } | ||
| 418 | + else { | ||
| 419 | + labels[idx] = {id: newId, x: newX, y: newY}; | ||
| 420 | + } | ||
| 421 | + | ||
| 422 | + return {x: newX, y: newY}; | ||
| 423 | + } | ||
| 424 | + } | ||
| 425 | + | ||
| 426 | + var getLabelPosNoOverlap = generateLabelFunction(); | ||
| 427 | + | ||
| 428 | + function transformLabel(p, id) { | ||
| 390 | var dx = p.x2 - p.x1, | 429 | var dx = p.x2 - p.x1, |
| 391 | dy = p.y2 - p.y1, | 430 | dy = p.y2 - p.y1, |
| 392 | xMid = dx/2 + p.x1, | 431 | xMid = dx/2 + p.x1, |
| 393 | yMid = dy/2 + p.y1; | 432 | yMid = dy/2 + p.y1; |
| 433 | + | ||
| 434 | + if (id) { | ||
| 435 | + var pos = getLabelPosNoOverlap(id, xMid, yMid); | ||
| 436 | + return sus.translate(pos.x, pos.y); | ||
| 437 | + } | ||
| 438 | + | ||
| 394 | return sus.translate(xMid, yMid); | 439 | return sus.translate(xMid, yMid); |
| 395 | } | 440 | } |
| 396 | 441 | ... | ... |
| ... | @@ -844,7 +844,7 @@ | ... | @@ -844,7 +844,7 @@ |
| 844 | transform: function (d) { | 844 | transform: function (d) { |
| 845 | var lnk = tms.findLinkById(d.key); | 845 | var lnk = tms.findLinkById(d.key); |
| 846 | if (lnk) { | 846 | if (lnk) { |
| 847 | - return td3.transformLabel(lnk.position); | 847 | + return td3.transformLabel(lnk.position, d.key); |
| 848 | } | 848 | } |
| 849 | } | 849 | } |
| 850 | } | 850 | } | ... | ... |
-
Please register or login to post a comment