fix(TransitiveOverlay): Add props for labeledModes. Update stories.

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

Hide file tree

Showing 7 changed files with 1,970 additions and 425 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,7 +17,10 @@ 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)
+
+    // If border-radius is not set, default to +infinity so a disk is rendered.
+    const borderRadius = display.styler.compute2('segment_labels', 'border-radius', this.parent) || Infinity
+
     // Draw rounded rectangle for label.
     display.drawRect({
       x,

diff --git a/stories/Transitive.stories.js b/stories/Transitive.stories.js
@@ -1,5 +1,8 @@
 import {TransitiveMap} from './TransitiveMap'
 
+// Fonts used by storybook <body> (no need to 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,24 +29,36 @@ 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: {
-      "border-color": "#FF0000",
-      "border-radius": 6,
-      "border-width": 3,
-      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