From ca9900a91cd0a57546670b692d935ac47dddc1a7 Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Wed, 23 Jan 2013 12:46:39 -0500
Subject: [PATCH] Halos and proper orientation for line labels

---
 js/id/svg/labels.js | 54 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js
index 599fe167c..2144946ca 100644
--- a/js/id/svg/labels.js
+++ b/js/id/svg/labels.js
@@ -37,7 +37,21 @@ iD.svg.Labels = function(projection) {
         else return size / 3 * 2 * text.length;
     }
 
-    function drawLineLabels(group, labels, filter, classes, position) {
+    function drawLineLabels(group, defs, labels, filter, classes, position) {
+
+        var uses = defs.selectAll('path.label')
+            .filter(filter)
+            .data(labels, iD.Entity.key);
+
+        uses.enter()
+            .append('path')
+            .attr('class', 'label');
+
+        uses
+            .attr('id', function(d) { return 'labelshadow-' + d.id; })
+            .attr('d', position('lineString'));
+
+        uses.exit().remove();
 
         var reverse = position('reverse'),
             getClasses = position('classes');
@@ -59,19 +73,37 @@ iD.svg.Labels = function(projection) {
             .data(labels)
             .attr({
                 'startOffset': position('startOffset'),
-                'xlink:href': function(d, i) { return '#casing-' + d.id},
-                'glyph-orientation-vertical': function(d, i) {return reverse(d, i) ? 180 : 0}, 
-                'glyph-orientation-horizontal': function(d, i) {return reverse(d, i) ? 180 : 0},
+                'xlink:href': function(d, i) { return '#labelshadow-' + d.id},
                 'dominant-baseline': 'middle'
             })
             .text(function(d, i) {
                 return reverse(d, i) ? d.tags.name.split('').reverse().join('') : d.tags.name;
             });
 
+        texts.each(function(d, i) { textWidth(d.tags.name, position('height')(d, i), this); });
+
         texts.exit().remove();
 
     }
 
+    function drawLineHalos(group, labels, filter, classes, position) {
+
+        var halos = group.selectAll('path')
+            .filter(filter)
+            .data(labels, iD.Entity.key);
+
+        halos.enter()
+            .append('path')
+            .style({
+                'stroke-width': position('font-size')
+            })
+            .attr('class', classes);
+
+        halos.attr('d', position('lineString'));
+
+        halos.exit().remove();
+    }
+
     function drawPointHalos(group, labels, filter, classes, position) {
 
         var halos = group.selectAll('rect.' + classes)
@@ -128,6 +160,10 @@ iD.svg.Labels = function(projection) {
         return reverse;
     }
 
+    function lineString(nodes) {
+        return 'M' + nodes.join('L');
+    }
+
     function subpath(nodes, from, to) {
         function segmentLength(i) {
             var dx = nodes[i][0] - nodes[i + 1][0];
@@ -254,9 +290,10 @@ iD.svg.Labels = function(projection) {
                     Math.abs(sub[0][0] - sub[sub.length - 1][0]) + 20,
                     Math.abs(sub[0][1] - sub[sub.length - 1][1]) + 30
                 );
+                if (rev) sub = sub.reverse();
                 if (tryInsert(rect)) return {
-                    'font-size': height,
-                    reverse: rev,
+                    'font-size': height + 2,
+                    lineString: lineString(sub),
                     startOffset: offset + '%'
                 }
             }
@@ -299,9 +336,12 @@ iD.svg.Labels = function(projection) {
 
 
         var label = surface.select('.layer-label'),
+            halo = surface.select('.layer-halo'),
+            defs = surface.select('defs'),
             points = drawPointLabels(label, labelled['point'], filter, 'text-label', pointposition),
             pointHalos = drawPointHalos(label, labelled['point'], filter, 'point-label-halo', pointposition),
-            lines = drawLineLabels(label, labelled['line'], filter, 'textpath-label', lineposition),
+            lines = drawLineLabels(label, defs, labelled['line'], filter, 'textpath-label', lineposition),
+            linesHalos = drawLineHalos(halo, labelled['line'], filter, 'textpath-label', lineposition),
             areas = drawPointLabels(label, labelled['area'], filter, 'text-arealabel', areaposition),
             areaHalos = drawPointHalos(label, labelled['area'], filter, 'area-label-halo', areaposition);
     };