Committed by
Simon Hunt
Prevent overlap of link labels in WEB UI
Change-Id: I6e261186abf9ed87a3c55e50d123e423f652aa41 (cherry picked from commit 622700fd)
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