From 55a7a33d725d34d04ff43efc9e8897a3ea721192 Mon Sep 17 00:00:00 2001
From: Aron Helser <aron.helser@kitware.com>
Date: Mon, 23 Apr 2018 10:06:57 -0400
Subject: [PATCH] fix(ImageGenerator): core map outline tweak

Use rounded endcaps, clamp line position for more
consistent outline.
---
 src/utils/ImageGenerator.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/utils/ImageGenerator.js b/src/utils/ImageGenerator.js
index e97dbd9..10b8cbf 100644
--- a/src/utils/ImageGenerator.js
+++ b/src/utils/ImageGenerator.js
@@ -328,19 +328,21 @@ function updateLayoutImage(
           maxI = prevMax;
           minI = prevMax;
         }
-        ctx.moveTo(prevMin * recSide, (j - 1) * recSide);
-        ctx.lineTo(prevMin * recSide, j * recSide);
+        // lines at 0 get cut off
+        ctx.moveTo(Math.max(1, prevMin * recSide), (j - 1) * recSide);
+        ctx.lineTo(Math.max(1, prevMin * recSide), j * recSide);
         ctx.lineTo(minI * recSide, j * recSide);
         ctx.moveTo(prevMax * recSide, (j - 1) * recSide);
         ctx.lineTo(prevMax * recSide, j * recSide);
         ctx.lineTo(maxI * recSide, j * recSide);
       } else if (maxI !== -1) {
         // cap the starting row.
-        ctx.moveTo(minI * recSide, j * recSide);
-        ctx.lineTo(maxI * recSide, j * recSide);
+        ctx.moveTo(minI * recSide, Math.max(1, j * recSide));
+        ctx.lineTo(maxI * recSide, Math.max(1, j * recSide));
       }
     }
     ctx.lineWidth = 3;
+    ctx.lineCap = 'round';
     ctx.strokeStyle = 'rgba(20, 20, 20, 1)';
     ctx.stroke();
     ctx.lineWidth = 1;