Whole line rendered.

public/javascripts/line-diagram.coffee

@@ -1,8 +1,9 @@
 #Raphael = require './raphael'
+LineTopology = require './line-topology'
 
 class LineDiagram
   constructor: (@parentElement, @lineName) ->
-    @diagram = Raphael @parentElement, 800, 400
+    @diagram = Raphael @parentElement, 800, 3000
 
     @lineWidth = 8
     @lineHalfWidth = @lineWidth / 2
@@ -16,35 +17,35 @@ class LineDiagram
     @gridOffsetX = 4 * @lineWidth
     @gridOffsetY = @gridOffsetX
 
-    @addStation {
-      name: 'Temple',
-      gridX: 0,
-      gridY: 0,
-      lineEnd: true
-    }
-
-    @addStation {
-      name: 'Embankment',
-      gridX: 0,
-      gridY: 1
-    }
-
-    @addStation {
-      name: 'Ealing Broadway',
-      gridX: 0,
-      gridY: 2
-    }
-
-    @addStation {
-      name: 'Acton Town',
-      gridX: 1,
-      gridY: 3,
-      lineEnd: true
-    }
-
-    @addLineSegment 0,0, 0,1
-    @addLineSegment 0,1, 0,2
-    @addLineSegment 0,2, 1,3
+    $.when($.getJSON("/line-data/#{@lineName}.json"), $.get("/line-data/#{@lineName}.topology")).done (jsonResonse, topologyresponse) =>
+      line = jsonResonse[0]
+      topologyText = topologyresponse[0]
+
+      topology =  new LineTopology line.stations, topologyText 
+
+      for row in topology.grid
+        for station in row
+          if station
+            @addStation {
+              name: station.name,
+              gridX: station.column,
+              gridY: station.row,
+              lineEnd: station.endOfLine()
+            }
+
+            if station.below()
+              @addLineSegment station.column, station.row, station.column, station.row + 1
+
+            if station.belowLeft()
+              @addLineSegment station.column, station.row, station.column - 1, station.row + 1
+
+            if station.belowRight()
+              @addLineSegment station.column, station.row, station.column + 1, station.row + 1
+
+      lastStationName = $('text:last-child')
+      bottom = parseInt(lastStationName.attr('y')) + lastStationName.height() + (2 * @gridOffsetY)
+      $('#line-diagram svg').attr 'height', bottom
+      console.log bottom, lastStationName.attr('y'), lastStationName.height(), @gridOffsetY
 
   addStation: (station) ->
     if station.lineEnd
@@ -87,14 +88,19 @@ class LineDiagram
     verticalSegmentLength -= (2 * @lineRadius)
     verticalSegmentLength /= 2
 
-    middleLineLength = @stationSeparationX * (toGridX - fromGridX)
+    middleLineLength = @stationSeparationX * Math.abs(toGridX - fromGridX)
     middleLineLength -= (2 * @lineRadius)
 
     path = "M 0,0 "
     path += "v #{verticalSegmentLength} "
-    path += "a #{@lineRadius},#{@lineRadius} 0 0 0 #{@lineRadius},#{@lineRadius} "
-    path += "h #{middleLineLength} "
-    path += "a #{@lineRadius},#{@lineRadius} 0 0 1 #{@lineRadius},#{@lineRadius} "
+    if fromGridX < toGridX
+      path += "a #{@lineRadius},#{@lineRadius} 0 0 0 #{@lineRadius},#{@lineRadius} "
+      path += "h #{middleLineLength} "
+      path += "a #{@lineRadius},#{@lineRadius} 0 0 1 #{@lineRadius},#{@lineRadius} "
+    else
+      path += "a #{@lineRadius},#{@lineRadius} 0 0 1 -#{@lineRadius},#{@lineRadius} "
+      path += "h -#{middleLineLength} "
+      path += "a #{@lineRadius},#{@lineRadius} 0 0 0 -#{@lineRadius},#{@lineRadius} "
     path += "v #{verticalSegmentLength} "
 
     line = @diagram.path path

public/javascripts/line-topology.coffee

@@ -86,6 +86,7 @@ class LineTopology
       # Stations.
       # We've already performed validation on the lines, so we can make
       # all the assumptions we need here.
+      r = 0
       for line in @lines by 2
         row = []
 
@@ -94,12 +95,13 @@ class LineTopology
           if code != '   '
             stationInfo = @stations[code]
             name = if stationInfo then stationInfo.name else 'unknown'
-            station = new Station(code, name);
+            station = new Station(code, name, r, c);
             row.push station
           else
             row.push null
 
         @grid.push row
+        r++
 
       # Track joins.
       for l in [1..@lines.length - 1] by 2
@@ -112,7 +114,7 @@ class LineTopology
               throw 'Cannot link ' + stationAbove.code + ' to ' + stationBelow.code
             stationAbove.below stationBelow
 
-      # Cross-verticals track joins.
+      # Diagonal track joins.
       for l in [1..@lines.length - 1] by 2
         for c in [0..@gridWidth - 2]
           join = @lines[l].substr(c * 4 + 3, 1)

public/javascripts/station.coffee

@@ -1,31 +1,52 @@
 class Station
-  constructor: (@code, @name) ->
+  constructor: (@code, @name, @row, @column) ->
     @down = undefined
     @downLeft = undefined
     @downRight = undefined
+
+    @connectedAbove = false
+    @connectedBelow = false
 
   code: ->
     @code
 
   name: ->
     @name
 
+  row: ->
+    @row
+
+  column: ->
+    @column
+
   below: (otherStation) ->
     if (otherStation)
       @down = otherStation
 
+      @connectedBelow = true
+      otherStation.connectedAbove = true
+
     @down
 
   belowLeft: (otherStation) ->
     if (otherStation)
       @downLeft = otherStation
 
+      @connectedBelow = true
+      otherStation.connectedAbove = true
+
     @downLeft
 
   belowRight: (otherStation) ->
     if (otherStation)
       @downRight = otherStation
 
+      @connectedBelow = true
+      otherStation.connectedAbove = true
+
     @downRight
 
+  endOfLine: ->
+    !@connectedAbove || !@connectedBelow
+
 module.exports = Station

static/script/line-topology.js

@@ -118,7 +118,7 @@ function LineTopology(text, stations) {
       }
     }
 
-    // Cross-verticals track joins.
+    // Diagonal track joins.
     for (var l = 1; l < lines.length; l += 2) {
       for (var c = 0; c < gridWidth - 1; c++) {
         join = lines[l].substr(c * 4 + 3, 1);