Merge pull request #62 from binh-dam-ibigroup/transitive-labels

Rendering tweaks

Author: landonreed

lib/display/canvas-display.js

@@ -93,6 +93,10 @@ export default class CanvasDisplay extends Display {
     // Apply linecap style
     this.ctx.lineCap = attrs['stroke-linecap'] || 'butt'
 
+    // Apply 'round' line join for smooth edge rendering.
+    // (The default join is 'miter', which causes jagged edges when zoomed away.)
+    this.ctx.lineJoin = 'round'
+
     // Draw the path
     this.ctx.beginPath()
     this.ctx.moveTo(renderData[0].x, renderData[0].y)
@@ -111,7 +115,7 @@ export default class CanvasDisplay extends Display {
     // For equivalence w/ SVG text rendering
     this.ctx.textBaseline = 'top'
 
-    this.ctx.font = `${attrs.fontSize || '14px'} ${attrs.fontFamily || 'sans-serif'}`
+    this.ctx.font = `${attrs['font-size'] || '14px'} ${attrs['font-family'] || 'sans-serif'}`
     if (attrs['text-anchor']) this.ctx.textAlign = attrs['text-anchor']
 
     if (attrs['stroke']) {

lib/labeler/labeler.js

@@ -3,6 +3,7 @@ import measureText from 'measure-text'
 import d3 from 'd3' // TODO: replace w/ other quadtree library
 
 import SegmentLabel from './segmentlabel'
+import { getFontSizeWithUnit } from '../util'
 
 /**
  * Labeler object
@@ -320,7 +321,8 @@ export default class Labeler {
 
     const textDimensions = measureText({
       text: labelText,
-      fontSize: label.fontSize + 'px',
+      // Append 'px' if a unit was not specified in font-size.
+      fontSize: getFontSizeWithUnit(label.fontSize),
       fontFamily: label.fontFamily || 'sans-serif',
       lineHeight: 1.2
     })

lib/labeler/pointlabel.js

@@ -1,4 +1,5 @@
 import Label from './label'
+import { getFontSizeWithUnit } from '../util'
 
 /**
  * Label object
@@ -68,7 +69,8 @@ export default class PointLabel extends Label {
     // define common style attributes for the halo and main text
     const attrs = {
       'fill': '#000',
-      'font-size': this.fontSize,
+      'font-family': display.styler.compute2('labels', 'font-family', this.parent),
+      'font-size': getFontSizeWithUnit(this.fontSize),
       'text-anchor': this.labelPosition > 0 ? 'start' : 'end'
     }
 

lib/labeler/segmentlabel.js

@@ -1,4 +1,5 @@
 import Label from './label'
+import { getFontSizeWithUnit } from '../util'
 
 /**
  * SegmentLabel object
@@ -28,6 +29,8 @@ export default class SegmentLabel extends Label {
       rx: this.containerHeight / 2,
       ry: this.containerHeight / 2
     })
+
+    const fontSize = display.styler.compute2('segment_labels', 'font-size', this.parent)
     // Offset text location by padding
     display.drawText(text, {
       x: x + this.getPadding(),
@@ -36,7 +39,9 @@ export default class SegmentLabel extends Label {
     }, {
       // text color
       fill: display.styler.compute2('segment_labels', 'color', this.parent),
-      'font-size': this.fontSize
+      'font-family': display.styler.compute2('segment_labels', 'font-family', this.parent),
+      // Append 'px' if a unit was not specified in font-size.
+      'font-size': getFontSizeWithUnit(fontSize)
     })
   }
 

lib/util/index.js

@@ -193,6 +193,14 @@ function renderDataToSvgPath (renderData) {
 // An instance of the SphericalMercator converter
 const sm = new SphericalMercator()
 
+/**
+ * @param {*} fontSize A CSS font size or a numerical (pixel) font size.
+ * @returns A CSS font size ending with the provided CSS unit or 'px' if none provided.
+ */
+function getFontSizeWithUnit (fontSize) {
+  return fontSize + (isFinite(fontSize) ? 'px' : '')
+}
+
 export {
   fuzzyEquals,
   distance,
@@ -212,5 +220,6 @@ export {
   addVectors,
   otpModeToGtfsType,
   renderDataToSvgPath,
-  sm
+  sm,
+  getFontSizeWithUnit
 }

stories/Transitive.stories.js

@@ -26,6 +26,23 @@ Itinerary.args = {
   styles: undefined
 }
 
+export const ItineraryWithAlternativeStyling = Template.bind({})
+ItineraryWithAlternativeStyling.args = {
+  center: [28.5459257, -81.3467216],
+  companies,
+  itinerary: require('./data/fdot-itin.json'),
+  styles: {
+    labels: {
+      "font-size": "18px",
+      "font-family": "serif"
+    },
+    segment_labels: {
+      color: "#FFDD00",
+      "font-size": "24px"
+    }    
+  }
+}
+
 export const Profile = Template.bind({})
 Profile.args = {
   center: [38.885, -77.0369],

stories/TransitiveMap.js

@@ -43,6 +43,7 @@ export const TransitiveMap = ({
         zoom={zoom}
       >
         <TransitiveOverlay
+          styles={styles}
           transitiveData={transitiveData}
           visible
         />