Fix rendering selections for all the OSM layers

This includes some renames for clarity.. "surface" -> "selection"
to make it clearer that rendering functions take a selection, and
don't necessarily render to the literal `#surface` node anymore.

modules/renderer/map.js

@@ -24,7 +24,7 @@ export function Map(context) {
         drawPoints = Points(projection, context),
         drawVertices = Vertices(projection, context),
         drawLines = Lines(projection),
-        drawAreas = Areas(projection),
+        drawAreas = Areas(projection, context),
         drawMidpoints = Midpoints(projection, context),
         drawLabels = Labels(projection, context),
         supersurface,
@@ -95,14 +95,16 @@ export function Map(context) {
             .on('mouseover.vertices', function() {
                 if (map.editable() && !transformed) {
                     var hover = d3.event.target.__data__;
-                    surface.call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
+                    surface.selectAll('.data-layer-osm')
+                        .call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
                     dispatch.call('drawn', this, {full: false});
                 }
             })
             .on('mouseout.vertices', function() {
                 if (map.editable() && !transformed) {
                     var hover = d3.event.relatedTarget && d3.event.relatedTarget.__data__;
-                    surface.call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
+                    surface.selectAll('.data-layer-osm')
+                        .call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
                     dispatch.call('drawn', this, {full: false});
                 }
             });
@@ -117,7 +119,7 @@ export function Map(context) {
                     graph = context.graph();
 
                 all = context.features().filter(all, graph);
-                surface
+                surface.selectAll('.data-layer-osm')
                     .call(drawVertices, graph, all, filter, map.extent(), map.zoom())
                     .call(drawMidpoints, graph, all, filter, map.trimmedExtent());
                 dispatch.call('drawn', this, {full: false});
@@ -175,7 +177,7 @@ export function Map(context) {
 
         data = features.filter(data, graph);
 
-        surface
+        surface.selectAll('.data-layer-osm')
             .call(drawVertices, graph, data, filter, map.extent(), map.zoom())
             .call(drawLines, graph, data, filter)
             .call(drawAreas, graph, data, filter)

modules/svg/areas.js

@@ -4,7 +4,7 @@ import { Path, TagClasses } from './index';
 import { Entity } from '../core/index';
 import { isSimpleMultipolygonOuterMember } from '../geo/index';
 
-export function Areas(projection) {
+export function Areas(projection, context) {
     // Patterns only work in Firefox when set directly on element.
     // (This is not a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=750632)
     var patterns = {
@@ -33,7 +33,7 @@ export function Areas(projection) {
         this.style.fill = this.style.stroke = '';
     }
 
-    return function drawAreas(surface, graph, entities, filter) {
+    return function drawAreas(selection, graph, entities, filter) {
         var path = Path(projection, graph, true),
             areas = {},
             multipolygon;
@@ -71,7 +71,7 @@ export function Areas(projection) {
             fill: areas
         };
 
-        var clipPaths = surface.selectAll('defs').selectAll('.clipPath')
+        var clipPaths = context.surface().selectAll('defs').selectAll('.clipPath')
            .filter(filter)
            .data(data.clip, Entity.key);
 
@@ -91,13 +91,15 @@ export function Areas(projection) {
            .attr('d', path);
 
 
-        var areagroup = surface
+        var layer = selection.selectAll('.layer-areas');
+
+        var areagroup = layer
             .selectAll('g.areagroup')
             .data(['fill', 'shadow', 'stroke']);
 
         areagroup = areagroup.enter()
             .append('g')
-            .attr('class', function(d) { return 'layer areagroup area-' + d; })
+            .attr('class', function(d) { return 'areagroup area-' + d; })
             .merge(areagroup);
 
         var paths = areagroup
@@ -110,7 +112,7 @@ export function Areas(projection) {
         paths.exit()
             .remove();
 
-        var fills = surface.selectAll('.area-fill path.area').nodes();
+        var fills = selection.selectAll('.area-fill path.area').nodes();
 
         var bisect = d3.bisector(function(node) {
             return -node.__data__.area(graph);
@@ -135,7 +137,7 @@ export function Areas(projection) {
                     setPattern.apply(this, arguments);
                 }
             })
-                .call(TagClasses())
-                .attr('d', path);
+            .call(TagClasses())
+            .attr('d', path);
     };
 }

modules/svg/debug.js

@@ -17,7 +17,7 @@ export function Debug(projection, context) {
         });
     }
 
-    function drawDebug(surface) {
+    function drawDebug(selection) {
         var showsTile = context.getDebug('tile'),
             showsCollision = context.getDebug('collision'),
             showsImagery = context.getDebug('imagery'),
@@ -68,7 +68,7 @@ export function Debug(projection, context) {
             .remove();
 
 
-        var layer = surface.selectAll('.layer-debug')
+        var layer = selection.selectAll('.layer-debug')
             .data(showsImagery || showsImperial || showsDriveLeft ? [0] : []);
 
         layer.enter()

modules/svg/gpx.js

@@ -36,11 +36,11 @@ export function Gpx(projection, context, dispatch) {
     }
 
 
-    function drawGpx(surface) {
+    function drawGpx(selection) {
         var geojson = Gpx.geojson,
             enabled = Gpx.enabled;
 
-        layer = surface.selectAll('.layer-gpx')
+        layer = selection.selectAll('.layer-gpx')
             .data(enabled ? [0] : []);
 
         layer.enter()

modules/svg/labels.js

@@ -252,8 +252,8 @@ export function Labels(projection, context) {
     var rtree = rbush(),
         bboxes = {};
 
-    function drawLabels(surface, graph, entities, filter, dimensions, fullRedraw) {
-        var hidePoints = !surface.selectAll('.node.point').node();
+    function drawLabels(selection, graph, entities, filter, dimensions, fullRedraw) {
+        var hidePoints = !selection.selectAll('.node.point').node();
 
         var labelable = [], i, k, entity;
         for (i = 0; i < label_stack.length; i++) labelable.push([]);
@@ -411,8 +411,8 @@ export function Labels(projection, context) {
             return v;
         }
 
-        var label = surface.selectAll('.layer-label'),
-            halo = surface.selectAll('.layer-halo');
+        var label = selection.selectAll('.layer-label'),
+            halo = selection.selectAll('.layer-halo');
 
         // points
         drawPointLabels(label, labelled.point, filter, 'pointlabel', positions.point);

modules/svg/lines.js

@@ -30,7 +30,7 @@ export function Lines(projection) {
         return as - bs;
     }
 
-    return function drawLines(surface, graph, entities, filter) {
+    return function drawLines(selection, graph, entities, filter) {
         var ways = [], pathdata = {}, onewaydata = {},
             getPath = Path(projection, graph);
 
@@ -56,13 +56,7 @@ export function Lines(projection) {
                 .valueOf();
         });
 
-        var layer = surface
-            .selectAll('.layer-lines')
-            .data([0]);
-
-        layer = layer.enter()
-            .append('g').attr('class', 'layer-lines')
-            .merge(layer);
+        var layer = selection.selectAll('.layer-lines');
 
         var layergroup = layer
             .selectAll('g.layergroup')
@@ -70,7 +64,7 @@ export function Lines(projection) {
 
         layergroup = layergroup.enter()
             .append('g')
-            .attr('class', function(d) { return 'layer layergroup layer' + String(d); })
+            .attr('class', function(d) { return 'layergroup layer' + String(d); })
                 .merge(layergroup);
 
 
@@ -80,7 +74,7 @@ export function Lines(projection) {
 
         linegroup = linegroup.enter()
             .append('g')
-            .attr('class', function(d) { return 'layer linegroup line-' + d; })
+            .attr('class', function(d) { return 'linegroup line-' + d; })
             .merge(linegroup);
 
 
@@ -115,7 +109,7 @@ export function Lines(projection) {
 
         onewaygroup = onewaygroup.enter()
             .append('g')
-            .attr('class', 'layer onewaygroup')
+            .attr('class', 'onewaygroup')
             .merge(onewaygroup);
 
 

modules/svg/midpoints.js

@@ -3,7 +3,7 @@ import { PointTransform, TagClasses } from './index';
 import { angle, euclideanDistance, interp, lineIntersection } from '../geo/index';
 
 export function Midpoints(projection, context) {
-    return function drawMidpoints(surface, graph, entities, filter, extent) {
+    return function drawMidpoints(selection, graph, entities, filter, extent) {
         var poly = extent.polygon(),
             midpoints = {};
 
@@ -71,11 +71,7 @@ export function Midpoints(projection, context) {
             return false;
         }
 
-        var layer = surface.selectAll('.layer-hit')
-            .data([0]);
-
-        layer = layer.enter().append('g').attr('class', 'layer-hit')
-            .merge(layer);
+        var layer = selection.selectAll('.layer-hit');
 
         var groups = layer
             .selectAll('g.midpoint')

modules/svg/points.js

@@ -14,19 +14,15 @@ export function Points(projection, context) {
         return b.loc[1] - a.loc[1];
     }
 
-    return function drawPoints(surface, graph, entities, filter) {
-        var wireframe = surface.classed('fill-wireframe'),
+    return function drawPoints(selection, graph, entities, filter) {
+        var wireframe = context.surface().classed('fill-wireframe'),
             points = wireframe ? [] : _.filter(entities, function(e) {
                 return e.geometry(graph) === 'point';
             });
 
         points.sort(sortY);
 
-        var layer = surface.selectAll('.layer-hit')
-            .data([0]);
-
-        layer = layer.enter().append('g').attr('class', 'layer-hit')
-            .merge(layer);
+        var layer = selection.selectAll('.layer-hit');
 
         var groups = layer.selectAll('g.point')
             .filter(filter)

modules/svg/turns.js

@@ -1,7 +1,7 @@
 import { angle } from '../geo/index';
 
 export function Turns(projection) {
-    return function drawTurns(surface, graph, turns) {
+    return function drawTurns(selection, graph, turns) {
         function key(turn) {
             return [turn.from.node + turn.via.node + turn.to.node].join('-');
         }
@@ -15,7 +15,7 @@ export function Turns(projection) {
                 (!turn.indirect_restriction && /^only_/.test(restriction) ? 'only' : 'no') + u;
         }
 
-        var groups = surface.selectAll('.layer-hit').selectAll('g.turn')
+        var groups = selection.selectAll('.layer-hit').selectAll('g.turn')
             .data(turns, key);
 
         // Enter

modules/svg/vertices.js

@@ -134,9 +134,9 @@ export function Vertices(projection, context) {
             .remove();
     }
 
-    function drawVertices(surface, graph, entities, filter, extent, zoom) {
+    function drawVertices(selection, graph, entities, filter, extent, zoom) {
         var selected = siblingAndChildVertices(context.selectedIDs(), graph, extent),
-            wireframe = surface.classed('fill-wireframe'),
+            wireframe = context.surface().classed('fill-wireframe'),
             vertices = [];
 
         for (var i = 0; i < entities.length; i++) {
@@ -158,29 +158,26 @@ export function Vertices(projection, context) {
             }
         }
 
-        var layer = surface.selectAll('.layer-hit')
-            .data([0]);
-        layer = layer.enter().append('g').attr('class', 'layer-hit')
-            .merge(layer);
-
+        var layer = selection.selectAll('.layer-hit');
         layer.selectAll('g.vertex.vertex-persistent')
             .filter(filter)
             .call(draw, vertices, 'vertex-persistent', graph, zoom);
 
-        drawHover(surface, graph, extent, zoom);
+        drawHover(selection, graph, extent, zoom);
     }
 
-    function drawHover(surface, graph, extent, zoom) {
+    function drawHover(selection, graph, extent, zoom) {
         var hovered = hover ? siblingAndChildVertices([hover.id], graph, extent) : {};
+        var layer = selection.selectAll('.layer-hit');
 
-        surface.selectAll('.layer-hit').selectAll('g.vertex.vertex-hover')
+        layer.selectAll('g.vertex.vertex-hover')
             .call(draw, d3.values(hovered), 'vertex-hover', graph, zoom);
     }
 
-    drawVertices.drawHover = function(surface, graph, target, extent, zoom) {
+    drawVertices.drawHover = function(selection, graph, target, extent, zoom) {
         if (target === hover) return;
         hover = target;
-        drawHover(surface, graph, extent, zoom);
+        drawHover(selection, graph, extent, zoom);
     };
 
     return drawVertices;