fix(labeler/segmentlabel): Add border color, radius, width params.

conveyal · Apr 16, 2021 · 84520ba · 84520ba
1 parent f59fca7
commit 84520ba
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/lib/labeler/segmentlabel.js b/lib/labeler/segmentlabel.js
@@ -17,6 +17,7 @@ export default class SegmentLabel extends Label {
     if (!text) return null
     const x = this.labelAnchor.x - this.containerWidth / 2
     const y = this.labelAnchor.y - this.containerHeight / 2
+    const borderRadius = display.styler.compute2('segment_labels', 'border-radius', this.parent)
     // Draw rounded rectangle for label.
     display.drawRect({
       x,
@@ -26,8 +27,10 @@ export default class SegmentLabel extends Label {
       fill: display.styler.compute2('segment_labels', 'background', this.parent),
       width: this.containerWidth,
       height: this.containerHeight,
-      rx: this.containerHeight / 2,
-      ry: this.containerHeight / 2
+      rx: Math.min(borderRadius, this.containerHeight / 2),
+      ry: Math.min(borderRadius, this.containerHeight / 2),
+      stroke: display.styler.compute2('segment_labels', 'border-color', this.parent),
+      'stroke-width': display.styler.compute2('segment_labels', 'border-width', this.parent)
     })
 
     const fontSize = display.styler.compute2('segment_labels', 'font-size', this.parent)

diff --git a/stories/Transitive.stories.js b/stories/Transitive.stories.js
@@ -37,6 +37,9 @@ ItineraryWithAlternativeStyling.args = {
       "font-family": "serif"
     },
     segment_labels: {
+      "border-color": "#FF0000",
+      "border-radius": 6,
+      "border-width": 3,
       color: "#FFDD00",
       "font-size": "24px"
     }