From afb88f2ae62228b009a682f9fcf660df452918f2 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 8 Sep 2016 22:37:06 -0400 Subject: [PATCH] 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 | 12 +++++++----- modules/svg/areas.js | 18 ++++++++++-------- modules/svg/debug.js | 4 ++-- modules/svg/gpx.js | 4 ++-- modules/svg/labels.js | 8 ++++---- modules/svg/lines.js | 16 +++++----------- modules/svg/midpoints.js | 8 ++------ modules/svg/points.js | 10 +++------- modules/svg/turns.js | 4 ++-- modules/svg/vertices.js | 21 +++++++++------------ 10 files changed, 46 insertions(+), 59 deletions(-) diff --git a/modules/renderer/map.js b/modules/renderer/map.js index f62e8935f..b9683fff8 100644 --- a/modules/renderer/map.js +++ b/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) diff --git a/modules/svg/areas.js b/modules/svg/areas.js index e71dd11fc..e99eff835 100644 --- a/modules/svg/areas.js +++ b/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); }; } diff --git a/modules/svg/debug.js b/modules/svg/debug.js index eb408028b..12ec32000 100644 --- a/modules/svg/debug.js +++ b/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() diff --git a/modules/svg/gpx.js b/modules/svg/gpx.js index fb45c89d8..5b5337124 100644 --- a/modules/svg/gpx.js +++ b/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() diff --git a/modules/svg/labels.js b/modules/svg/labels.js index 2bb5fceec..47e1bd06c 100644 --- a/modules/svg/labels.js +++ b/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); diff --git a/modules/svg/lines.js b/modules/svg/lines.js index 7737600d6..d54f0bb9d 100644 --- a/modules/svg/lines.js +++ b/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); diff --git a/modules/svg/midpoints.js b/modules/svg/midpoints.js index ca4fee6cc..9eadb1037 100644 --- a/modules/svg/midpoints.js +++ b/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') diff --git a/modules/svg/points.js b/modules/svg/points.js index 43a2b75af..700faa5c3 100644 --- a/modules/svg/points.js +++ b/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) diff --git a/modules/svg/turns.js b/modules/svg/turns.js index 2387a5142..266f391e0 100644 --- a/modules/svg/turns.js +++ b/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 diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js index 0558effac..42035e358 100644 --- a/modules/svg/vertices.js +++ b/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;