Extract iD.svg.LineString

js/id/svg.js

@@ -9,5 +9,21 @@ iD.svg = {
         return function (entity) {
             return 'translate(' + projection(entity.loc) + ')';
         };
+    },
+
+    LineString: function (projection) {
+        var cache = {};
+        return function (entity) {
+            if (cache[entity.id] !== undefined) {
+                return cache[entity.id];
+            }
+
+            if (entity.nodes.length === 0) {
+                return (cache[entity.id] = '');
+            }
+
+            return (cache[entity.id] =
+                'M' + entity.nodes.map(function (n) { return projection(n.loc); }).join('L'));
+        }
     }
 };

js/id/svg/areas.js

@@ -38,17 +38,7 @@ iD.svg.Areas = function(projection) {
 
         areas.sort(areastack);
 
-        var lineStrings = {};
-
-        function lineString(entity) {
-            if (lineStrings[entity.id] !== undefined) {
-                return lineStrings[entity.id];
-            }
-            var nodes = _.pluck(entity.nodes, 'loc');
-            if (nodes.length === 0) return (lineStrings[entity.id] = '');
-            else return (lineStrings[entity.id] =
-                'M' + nodes.map(projection).join('L'));
-        }
+        var lineString = iD.svg.LineString(projection);
 
         function drawPaths(group, areas, filter, classes) {
             var paths = group.selectAll('path')

js/id/svg/lines.js

@@ -73,15 +73,7 @@ iD.svg.Lines = function(projection) {
 
         lines.sort(waystack);
 
-        function lineString(entity) {
-            if (lineStrings[entity.id] !== undefined) {
-                return lineStrings[entity.id];
-            }
-            var nodes = _.pluck(entity.nodes, 'loc');
-            if (nodes.length === 0) return (lineStrings[entity.id] = '');
-            else return (lineStrings[entity.id] =
-                'M' + nodes.map(projection).join('L'));
-        }
+        var lineString = iD.svg.LineString(projection);
 
         var casing = surface.select('.layer-casing'),
             stroke = surface.select('.layer-stroke'),

test/index.html

@@ -151,6 +151,7 @@
     <script src="spec/renderer/hash.js"></script>
     <script src="spec/renderer/map.js"></script>
 
+    <script src="spec/svg.js"></script>
     <script src="spec/svg/areas.js"></script>
     <script src="spec/svg/points.js"></script>
     <script src="spec/svg/vertices.js"></script>

test/index_packaged.html

@@ -60,6 +60,7 @@
     <script src="spec/renderer/hash.js"></script>
     <script src="spec/renderer/map.js"></script>
 
+    <script src="spec/svg.js"></script>
     <script src="spec/svg/areas.js"></script>
     <script src="spec/svg/points.js"></script>
     <script src="spec/svg/vertices.js"></script>

test/spec/svg.js

@@ -0,0 +1,10 @@
+describe("iD.svg.LineString", function () {
+    it("returns an SVG path description for the entity's nodes", function () {
+        var a = iD.Node({loc: [0, 0]}),
+            b = iD.Node({loc: [2, 3]}),
+            way = iD.Way({nodes: [a, b]}),
+            projection = Object;
+
+        expect(iD.svg.LineString(projection)(way)).to.equal("M0,0L2,3");
+    });
+});