Merge pull request #67 from binh-dam-ibigroup/label-style-params

Label style params
conveyal · Apr 26, 2021 · 49a8dc4 · 49a8dc4
2 parents 450fb2a + c440a68
commit 49a8dc4
Show file tree

Hide file tree

Showing 7 changed files with 1,975 additions and 423 deletions.
diff --git a/lib/labeler/labeler.js b/lib/labeler/labeler.js
@@ -249,10 +249,12 @@ export default class Labeler {
       })
     })
 
+    // Generate labels for GTFS route/mode types listed in labeledModes.
     var edgeGroups = []
+    const labeledModes = this.transitive.options.labeledModes
     forEach(this.transitive.network.paths, path => {
       forEach(path.segments, segment => {
-        if (segment.type === 'TRANSIT' && segment.getMode() === 3) {
+        if (segment.type === 'TRANSIT' && labeledModes.includes(segment.getMode())) {
           edgeGroups = edgeGroups.concat(segment.getLabelEdgeGroups())
         }
       })

diff --git a/lib/labeler/segmentlabel.js b/lib/labeler/segmentlabel.js
@@ -17,6 +17,11 @@ 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
+
+    // If border-radius is not set, default to +infinity so a disk is rendered.
+    const borderRadiusParam = display.styler.compute2('segment_labels', 'border-radius', this.parent) || Infinity
+    const borderRadius = Math.min(borderRadiusParam, this.containerHeight / 2)
+
     // Draw rounded rectangle for label.
     display.drawRect({
       x,
@@ -26,8 +31,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: borderRadius,
+      ry: borderRadius,
+      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
@@ -1,5 +1,9 @@
 import {TransitiveMap} from './TransitiveMap'
 
+// Use the font-family defined by storybook <body> element,
+// so we don't need to install/import extra fonts.
+const storybookFonts = '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif'
+
 const companies = [
   {
     id: 'RAZOR',
@@ -26,21 +30,35 @@ Itinerary.args = {
   styles: undefined
 }
 
-export const ItineraryWithAlternativeStyling = Template.bind({})
-ItineraryWithAlternativeStyling.args = {
-  center: [28.5459257, -81.3467216],
-  companies,
-  itinerary: require('./data/fdot-itin.json'),
+export const MultiModalItinerary = Template.bind({})
+MultiModalItinerary.args = {
+  center: [28.4607685,-81.3656902],
+  itinerary: require('./data/fdot-itin-multimodal.json'),
+  styles: undefined,
+  zoom: 12
+}
+
+export const MultiModalItineraryWithCustomSettings = Template.bind({})
+MultiModalItineraryWithCustomSettings.args = {
+  center: [28.4607685,-81.3656902],
+  itinerary: require('./data/fdot-itin-multimodal.json'),
+  // Label commuter rail (2) and bus (3).
+  labeledModes: [2, 3],
   styles: {
     labels: {
-      "font-size": "18px",
-      "font-family": "serif"
+      'font-size': '14px',
+      'font-family': storybookFonts
     },
     segment_labels: {
-      color: "#FFDD00",
-      "font-size": "24px"
-    }    
-  }
+      'border-color': '#FFFFFF',
+      'border-radius': 6,
+      'border-width': 2,
+      color: '#FFE0D0',
+      'font-family': storybookFonts,
+      'font-size': '18px'
+    }
+  },
+  zoom: 12
 }
 
 export const Profile = Template.bind({})

diff --git a/stories/TransitiveMap.js b/stories/TransitiveMap.js
@@ -30,6 +30,7 @@ export const TransitiveMap = ({
   center = [45.506, -122.68302],
   companies = [],
   itinerary,
+  labeledModes,
   styles,
   // If no transitiveData is provided, default to generating from itinerary.
   transitiveData = itineraryToTransitive(itinerary, companies),
@@ -43,6 +44,7 @@ export const TransitiveMap = ({
         zoom={zoom}
       >
         <TransitiveOverlay
+          labeledModes={labeledModes}
           styles={styles}
           transitiveData={transitiveData}
           visible