From 45e4e730a83369f4c61058db18b959ea54ed73ff Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 24 Feb 2016 15:41:22 -0500 Subject: [PATCH] iD.svg.Surface -> iD.svg.Layers --- ARCHITECTURE.md | 2 +- index.html | 2 +- js/id/renderer/map.js | 53 ++++++++++++++++------------- js/id/svg/defs.js | 2 +- js/id/svg/gpx.js | 39 +++++++++++---------- js/id/svg/icon.js | 2 +- js/id/svg/labels.js | 8 ++--- js/id/svg/{surface.js => layers.js} | 37 ++++++++++++-------- js/id/svg/mapillary_images.js | 16 ++++----- js/id/svg/mapillary_signs.js | 16 ++++----- js/id/svg/osm.js | 2 +- js/id/svg/turns.js | 2 +- js/id/ui/preset/restrictions.js | 17 ++++----- test/index.html | 2 +- test/rendering.html | 10 +++--- test/spec/svg/areas.js | 2 +- test/spec/svg/lines.js | 2 +- test/spec/svg/midpoints.js | 2 +- test/spec/svg/points.js | 2 +- test/spec/svg/vertices.js | 2 +- 20 files changed, 116 insertions(+), 104 deletions(-) rename js/id/svg/{surface.js => layers.js} (69%) diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index b230a443a..51c8e1802 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -296,7 +296,7 @@ correspondence with entities: two vertices. * `iD.svg.Labels` renders the textual [labels](http://mapbox.com/osmdev/2013/02/12/labeling-id/). -* `iD.svg.Surface` sets up a number of layers that ensure that map elements +* `iD.svg.Layers` sets up a number of layers that ensure that map elements appear in an appropriate z-order. ## Other UI diff --git a/index.html b/index.html index b5706274f..9f81877df 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,7 @@ - + diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 39492ceaa..24c5f4c91 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -12,13 +12,13 @@ iD.Map = function(context) { transformStart, transformed = false, minzoom = 0, - drawSurface = iD.svg.Surface(projection, context), - points = iD.svg.Points(projection, context), - vertices = iD.svg.Vertices(projection, context), - lines = iD.svg.Lines(projection), - areas = iD.svg.Areas(projection), - midpoints = iD.svg.Midpoints(projection, context), - labels = iD.svg.Labels(projection, context), + drawLayers = iD.svg.Layers(projection, context), + drawPoints = iD.svg.Points(projection, context), + drawVertices = iD.svg.Vertices(projection, context), + drawLines = iD.svg.Lines(projection), + drawAreas = iD.svg.Areas(projection), + drawMidpoints = iD.svg.Midpoints(projection, context), + drawLabels = iD.svg.Labels(projection, context), surface, supersurface, mouse, @@ -42,13 +42,15 @@ iD.Map = function(context) { // Need a wrapper div because Opera can't cope with an absolutely positioned // SVG element: http://bl.ocks.org/jfirebaugh/6fbfbd922552bf776c16 - var dataLayer = supersurface + var wrap = supersurface .append('div') .attr('class', 'layer layer-data'); - map.surface = surface = dataLayer - .call(drawSurface) - .select('.surface') + map.layers = drawLayers; + + map.surface = surface = wrap + .call(drawLayers) + .selectAll('.surface') .attr('id', 'surface'); surface @@ -66,14 +68,14 @@ iD.Map = function(context) { .on('mouseover.vertices', function() { if (map.editable() && !transformed) { var hover = d3.event.target.__data__; - surface.call(vertices.drawHover, context.graph(), hover, map.extent(), map.zoom()); + surface.call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom()); dispatch.drawn({full: false}); } }) .on('mouseout.vertices', function() { if (map.editable() && !transformed) { var hover = d3.event.relatedTarget && d3.event.relatedTarget.__data__; - surface.call(vertices.drawHover, context.graph(), hover, map.extent(), map.zoom()); + surface.call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom()); dispatch.drawn({full: false}); } }); @@ -90,15 +92,16 @@ iD.Map = function(context) { graph = context.graph(); all = context.features().filter(all, graph); - surface.call(vertices, graph, all, filter, map.extent(), map.zoom()); - surface.call(midpoints, graph, all, filter, map.trimmedExtent()); + surface + .call(drawVertices, graph, all, filter, map.extent(), map.zoom()) + .call(drawMidpoints, graph, all, filter, map.trimmedExtent()); dispatch.drawn({full: false}); } }); map.dimensions(selection.dimensions()); - labels.supersurface(supersurface); + drawLabels.supersurface(supersurface); } function pxCenter() { return [dimensions[0] / 2, dimensions[1] / 2]; } @@ -136,12 +139,12 @@ iD.Map = function(context) { data = features.filter(data, graph); surface - .call(vertices, graph, data, filter, map.extent(), map.zoom()) - .call(lines, graph, data, filter) - .call(areas, graph, data, filter) - .call(midpoints, graph, data, filter, map.trimmedExtent()) - .call(labels, graph, data, filter, dimensions, !difference && !extent) - .call(points, graph, data, filter); + .call(drawVertices, graph, data, filter, map.extent(), map.zoom()) + .call(drawLines, graph, data, filter) + .call(drawAreas, graph, data, filter) + .call(drawMidpoints, graph, data, filter, map.trimmedExtent()) + .call(drawLabels, graph, data, filter, dimensions, !difference && !extent) + .call(drawPoints, graph, data, filter); dispatch.drawn({full: true}); } @@ -215,6 +218,7 @@ iD.Map = function(context) { supersurface.call(context.background()); } + // OSM if (map.editable()) { context.loadTiles(projection, dimensions); drawVector(difference, extent); @@ -222,6 +226,9 @@ iD.Map = function(context) { editOff(); } + surface + .call(drawLayers); + transformStart = [ projection.scale() * 2 * Math.PI, projection.translate().slice()]; @@ -331,7 +338,7 @@ iD.Map = function(context) { if (!arguments.length) return dimensions; var center = map.center(); dimensions = _; - drawSurface.dimensions(dimensions); + drawLayers.dimensions(dimensions); context.background().dimensions(dimensions); projection.clipExtent([[0, 0], dimensions]); mouse = iD.util.fastMouse(supersurface.node()); diff --git a/js/id/svg/defs.js b/js/id/svg/defs.js index 03054e377..cc6f8ad48 100644 --- a/js/id/svg/defs.js +++ b/js/id/svg/defs.js @@ -15,7 +15,7 @@ iD.svg.Defs = function(context) { }; } - return function (selection) { + return function drawDefs(selection) { var defs = selection.append('defs'); // marker diff --git a/js/id/svg/gpx.js b/js/id/svg/gpx.js index 7073b8a26..d77003cd7 100644 --- a/js/id/svg/gpx.js +++ b/js/id/svg/gpx.js @@ -2,7 +2,6 @@ iD.svg.Gpx = function(projection, context) { var showLabels = true, layer; - function init() { if (iD.svg.Gpx.initialized) return; // run once @@ -21,7 +20,7 @@ iD.svg.Gpx = function(projection, context) { d3.event.stopPropagation(); d3.event.preventDefault(); if (!iD.detect().filedrop) return; - gpx.files(d3.event.dataTransfer.files); + drawGpx.files(d3.event.dataTransfer.files); }) .on('dragenter.localgpx', over) .on('dragexit.localgpx', over) @@ -31,7 +30,7 @@ iD.svg.Gpx = function(projection, context) { } - function gpx(surface) { + function drawGpx(surface) { var geojson = iD.svg.Gpx.geojson, enabled = iD.svg.Gpx.enabled; @@ -97,51 +96,51 @@ iD.svg.Gpx = function(projection, context) { context.pan([0,0]); } - gpx.showLabels = function(_) { + drawGpx.showLabels = function(_) { if (!arguments.length) return showLabels; showLabels = _; - return gpx; + return drawGpx; }; - gpx.enabled = function(_) { + drawGpx.enabled = function(_) { if (!arguments.length) return iD.svg.Gpx.enabled; iD.svg.Gpx.enabled = _; - return gpx; + return drawGpx; }; - gpx.geojson = function(gj) { + drawGpx.geojson = function(gj) { if (!arguments.length) return iD.svg.Gpx.geojson; - if (_.isEmpty(gj) || _.isEmpty(gj.features)) return gpx; + if (_.isEmpty(gj) || _.isEmpty(gj.features)) return drawGpx; iD.svg.Gpx.geojson = gj; - return gpx; + return drawGpx; }; - gpx.url = function(url) { + drawGpx.url = function(url) { d3.text(url, function(err, data) { if (!err) { - gpx.geojson(toGeoJSON.gpx(toDom(data))); + drawGpx.geojson(toGeoJSON.gpx(toDom(data))); redraw(); } }); - return gpx; + return drawGpx; }; - gpx.files = function(fileList) { + drawGpx.files = function(fileList) { var f = fileList[0], reader = new FileReader(); reader.onload = function(e) { - gpx.geojson(toGeoJSON.gpx(toDom(e.target.result))).fitZoom(); + drawGpx.geojson(toGeoJSON.gpx(toDom(e.target.result))).fitZoom(); redraw(); }; reader.readAsText(f); - return gpx; + return drawGpx; }; - gpx.fitZoom = function() { + drawGpx.fitZoom = function() { var geojson = iD.svg.Gpx.geojson; - if (_.isEmpty(geojson) || _.isEmpty(geojson.features)) return gpx; + if (_.isEmpty(geojson) || _.isEmpty(geojson.features)) return drawGpx; var map = context.map(), viewport = map.trimmedExtent().polygon(), @@ -155,9 +154,9 @@ iD.svg.Gpx = function(projection, context) { map.centerZoom(extent.center(), map.trimmedExtentZoom(extent)); } - return gpx; + return drawGpx; }; init(); - return gpx; + return drawGpx; }; diff --git a/js/id/svg/icon.js b/js/id/svg/icon.js index 3c8d2f02a..61a432d5a 100644 --- a/js/id/svg/icon.js +++ b/js/id/svg/icon.js @@ -1,5 +1,5 @@ iD.svg.Icon = function(name, svgklass, useklass) { - return function (selection) { + return function drawIcon(selection) { selection.selectAll('svg') .data([0]) .enter() diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js index e85a9df9c..c3315effb 100644 --- a/js/id/svg/labels.js +++ b/js/id/svg/labels.js @@ -131,7 +131,6 @@ iD.svg.Labels = function(projection, context) { } function drawPointLabels(group, entities, filter, classes, labels) { - var texts = group.selectAll('text.' + classes) .filter(filter) .data(entities, iD.Entity.key); @@ -248,8 +247,7 @@ iD.svg.Labels = function(projection, context) { var rtree = rbush(), rectangles = {}; - function labels(surface, graph, entities, filter, dimensions, fullRedraw) { - + function drawLabels(surface, graph, entities, filter, dimensions, fullRedraw) { var hidePoints = !surface.select('.node.point').node(); var labelable = [], i, k, entity; @@ -427,7 +425,7 @@ iD.svg.Labels = function(projection, context) { drawAreaIcons(label, labelled.area, filter, 'arealabel-icon', positions.area); } - labels.supersurface = function(supersurface) { + drawLabels.supersurface = function(supersurface) { supersurface .on('mousemove.hidelabels', hideOnMouseover) .on('mousedown.hidelabels', function () { @@ -438,5 +436,5 @@ iD.svg.Labels = function(projection, context) { }); }; - return labels; + return drawLabels; }; diff --git a/js/id/svg/surface.js b/js/id/svg/layers.js similarity index 69% rename from js/id/svg/surface.js rename to js/id/svg/layers.js index 2f017622d..bad49f0ab 100644 --- a/js/id/svg/surface.js +++ b/js/id/svg/layers.js @@ -1,4 +1,4 @@ -iD.svg.Surface = function(projection, context) { +iD.svg.Layers = function(projection, context) { var svg = d3.select(null), layers = [ { id: 'osm', render: iD.svg.Osm(projection, context) }, @@ -8,7 +8,7 @@ iD.svg.Surface = function(projection, context) { ]; - function surface(selection) { + function drawLayers(selection) { svg = selection.selectAll('.surface') .data([0]); @@ -31,32 +31,39 @@ iD.svg.Surface = function(projection, context) { .remove(); } - - surface.only = function(what) { - var arr = [].concat(what); - surface.remove(_.difference(_.pluck(layers, 'id'), arr)); - return surface; + drawLayers.all = function() { + return layers; }; - surface.remove = function(what) { + drawLayers.layer = function(id) { + return _.find(layers, 'id', id); + }; + + drawLayers.only = function(what) { + var arr = [].concat(what); + drawLayers.remove(_.difference(_.pluck(layers, 'id'), arr)); + return drawLayers; + }; + + drawLayers.remove = function(what) { var arr = [].concat(what); arr.forEach(function(id) { - layers = _.reject(layers, function(d) { return d.id === id; }); + layers = _.reject(layers, 'id', id); }); - return surface; + return drawLayers; }; - surface.add = function(what) { + drawLayers.add = function(what) { var arr = [].concat(what); arr.forEach(function(obj) { if ('id' in obj && 'render' in obj) { layers.push(obj); } }); - return surface; + return drawLayers; }; - surface.dimensions = function(_) { + drawLayers.dimensions = function(_) { if (!arguments.length) return svg.dimensions(); svg.dimensions(_); layers.forEach(function(layer) { @@ -64,9 +71,9 @@ iD.svg.Surface = function(projection, context) { layer.render.dimensions(_); } }); - return surface; + return drawLayers; }; - return surface; + return drawLayers; }; diff --git a/js/id/svg/mapillary_images.js b/js/id/svg/mapillary_images.js index 3ba2889e9..6ddd9e92f 100644 --- a/js/id/svg/mapillary_images.js +++ b/js/id/svg/mapillary_images.js @@ -76,7 +76,7 @@ iD.svg.MapillaryImages = function(projection, context) { return t; } - function drawMarkers() { + function update() { var mapillary = getMapillary(), data = (mapillary ? mapillary.images(projection, layer.dimensions()) : []); @@ -107,7 +107,7 @@ iD.svg.MapillaryImages = function(projection, context) { .attr('transform', transform); } - function render(selection) { + function drawImages(selection) { var mapillary = getMapillary(); layer = selection.selectAll('.layer-mapillary-images') @@ -152,7 +152,7 @@ iD.svg.MapillaryImages = function(projection, context) { if (enabled) { if (mapillary && ~~context.map().zoom() >= minZoom) { editOn(); - drawMarkers(); + update(); mapillary.loadImages(projection, layer.dimensions()); } else { editOff(); @@ -160,7 +160,7 @@ iD.svg.MapillaryImages = function(projection, context) { } } - render.enable = function(_) { + drawImages.enable = function(_) { if (!arguments.length) return enabled; enabled = _; if (enabled) { @@ -168,14 +168,14 @@ iD.svg.MapillaryImages = function(projection, context) { } else { hideLayer(); } - return render; + return drawImages; }; - render.dimensions = function(_) { + drawImages.dimensions = function(_) { if (!arguments.length) return layer.dimensions(); layer.dimensions(_); - return render; + return drawImages; }; - return render; + return drawImages; }; diff --git a/js/id/svg/mapillary_signs.js b/js/id/svg/mapillary_signs.js index d0648256c..bc53f543b 100644 --- a/js/id/svg/mapillary_signs.js +++ b/js/id/svg/mapillary_signs.js @@ -61,7 +61,7 @@ iD.svg.MapillarySigns = function(projection, context) { layer.style('display', 'none'); } - function drawSigns() { + function update() { var mapillary = getMapillary(), data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []); @@ -114,7 +114,7 @@ iD.svg.MapillarySigns = function(projection, context) { .attr('transform', iD.svg.PointTransform(projection)); } - function render(selection) { + function drawSigns(selection) { var mapillary = getMapillary(); layer = selection.selectAll('.layer-mapillary-signs') @@ -132,7 +132,7 @@ iD.svg.MapillarySigns = function(projection, context) { if (enabled) { if (mapillary && ~~context.map().zoom() >= minZoom) { editOn(); - drawSigns(); + update(); mapillary.loadSigns(context, projection, layer.dimensions()); } else { editOff(); @@ -140,7 +140,7 @@ iD.svg.MapillarySigns = function(projection, context) { } } - render.enable = function(_) { + drawSigns.enable = function(_) { if (!arguments.length) return enabled; enabled = _; if (enabled) { @@ -148,14 +148,14 @@ iD.svg.MapillarySigns = function(projection, context) { } else { hideLayer(); } - return render; + return drawSigns; }; - render.dimensions = function(_) { + drawSigns.dimensions = function(_) { if (!arguments.length) return layer.dimensions(); layer.dimensions(_); - return render; + return drawSigns; }; - return render; + return drawSigns; }; diff --git a/js/id/svg/osm.js b/js/id/svg/osm.js index 72f93bbb8..ac6387bdb 100644 --- a/js/id/svg/osm.js +++ b/js/id/svg/osm.js @@ -1,5 +1,5 @@ iD.svg.Osm = function() { - return function (selection) { + return function drawOsm(selection) { var layers = selection.selectAll('.layer-osm') .data(['areas', 'lines', 'hit', 'halo', 'label']); diff --git a/js/id/svg/turns.js b/js/id/svg/turns.js index 98955ec98..9cbfe80c9 100644 --- a/js/id/svg/turns.js +++ b/js/id/svg/turns.js @@ -1,5 +1,5 @@ iD.svg.Turns = function(projection) { - return function(surface, graph, turns) { + return function drawTurns(surface, graph, turns) { function key(turn) { return [turn.from.node + turn.via.node + turn.to.node].join('-'); } diff --git a/js/id/ui/preset/restrictions.js b/js/id/ui/preset/restrictions.js index 9c5081010..2c7912074 100644 --- a/js/id/ui/preset/restrictions.js +++ b/js/id/ui/preset/restrictions.js @@ -21,10 +21,7 @@ iD.ui.preset.restrictions = function(field, context) { vertex = graph.entity(vertexID), filter = d3.functor(true), extent = iD.geo.Extent(), - projection = iD.geo.RawMercator(), - lines = iD.svg.Lines(projection, context), - vertices = iD.svg.Vertices(projection, context), - turns = iD.svg.Turns(projection, context); + projection = iD.geo.RawMercator(); var d = wrap.dimensions(), c = [d[0] / 2, d[1] / 2], @@ -39,9 +36,13 @@ iD.ui.preset.restrictions = function(field, context) { .translate([c[0] - s[0], c[1] - s[1]]) .clipExtent([[0, 0], d]); + var drawLayers = iD.svg.Layers(projection, context).only('osm').dimensions(d), + drawVertices = iD.svg.Vertices(projection, context), + drawLines = iD.svg.Lines(projection, context), + drawTurns = iD.svg.Turns(projection, context); enter - .call(iD.svg.Surface(projection, context).only('osm').dimensions(d)) + .call(drawLayers) .select('.surface') .call(iD.behavior.Hover(context)); @@ -50,9 +51,9 @@ iD.ui.preset.restrictions = function(field, context) { surface .dimensions(d) - .call(vertices, graph, [vertex], filter, extent, z) - .call(lines, graph, intersection.ways, filter) - .call(turns, graph, intersection.turns(fromNodeID)); + .call(drawVertices, graph, [vertex], filter, extent, z) + .call(drawLines, graph, intersection.ways, filter) + .call(drawTurns, graph, intersection.turns(fromNodeID)); surface .on('click.restrictions', click) diff --git a/test/index.html b/test/index.html index abd89e8ea..2325206c7 100644 --- a/test/index.html +++ b/test/index.html @@ -76,7 +76,7 @@ - + diff --git a/test/rendering.html b/test/rendering.html index dfe463a48..35d8d8dfa 100644 --- a/test/rendering.html +++ b/test/rendering.html @@ -23,7 +23,7 @@ - + @@ -147,7 +147,7 @@ .attr('width', 30) .attr('height', 40) .attr('data-zoom', function (d) { return d.zoom; }) - .call(iD.svg.Surface(context)) + .call(iD.svg.Layers(context)) .each(function (d) { var n = node.update({tags: d}), graph = iD.Graph([n]); @@ -215,7 +215,7 @@ .attr('width', 30) .attr('height', 30) .attr('data-zoom', function (d) { return d.zoom; }) - .call(iD.svg.Surface(context)) + .call(iD.svg.Layers(context)) .each(function (d) { var n = node.update({tags: d.tags}), graph = iD.Graph([n, way]); @@ -303,7 +303,7 @@ .attr('width', 200) .attr('height', 30) .attr('data-zoom', function (d) { return d.zoom; }) - .call(iD.svg.Surface(context)) + .call(iD.svg.Layers(context)) .each(function (d) { var highway = way.update({tags: d.tags}), graph = iD.Graph([a, b, highway]); @@ -365,7 +365,7 @@ .append('svg') .attr('width', 100) .attr('height', 100) - .call(iD.svg.Surface(context)) + .call(iD.svg.Layers(context)) .each(function (datum) { var area = way.update({tags: datum.tags}), graph = iD.Graph([a, b, c, d, area]); diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js index fcbcb1792..8e6d06fe3 100644 --- a/test/spec/svg/areas.js +++ b/test/spec/svg/areas.js @@ -7,7 +7,7 @@ describe("iD.svg.Areas", function () { beforeEach(function () { surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) - .call(iD.svg.Surface(iD())); + .call(iD.svg.Layers(iD())); }); it("adds way and area classes", function () { diff --git a/test/spec/svg/lines.js b/test/spec/svg/lines.js index b94575a60..27fc0ec10 100644 --- a/test/spec/svg/lines.js +++ b/test/spec/svg/lines.js @@ -7,7 +7,7 @@ describe("iD.svg.Lines", function () { beforeEach(function () { surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) - .call(iD.svg.Surface(iD())); + .call(iD.svg.Layers(iD())); }); it("adds way and line classes", function () { diff --git a/test/spec/svg/midpoints.js b/test/spec/svg/midpoints.js index eaef0d16e..4d012aae3 100644 --- a/test/spec/svg/midpoints.js +++ b/test/spec/svg/midpoints.js @@ -7,7 +7,7 @@ describe("iD.svg.Midpoints", function () { beforeEach(function () { context = iD(); surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) - .call(iD.svg.Surface(context)); + .call(iD.svg.Layers(context)); }); it("creates midpoint on segment completely within the extent", function () { diff --git a/test/spec/svg/points.js b/test/spec/svg/points.js index 80790bba6..38d043430 100644 --- a/test/spec/svg/points.js +++ b/test/spec/svg/points.js @@ -6,7 +6,7 @@ describe("iD.svg.Points", function () { beforeEach(function () { context = iD().presets(iD.data.presets); surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) - .call(iD.svg.Surface(context)); + .call(iD.svg.Layers(context)); }); it("adds tag classes", function () { diff --git a/test/spec/svg/vertices.js b/test/spec/svg/vertices.js index 20182756b..0eec0e45b 100644 --- a/test/spec/svg/vertices.js +++ b/test/spec/svg/vertices.js @@ -6,7 +6,7 @@ describe("iD.svg.Vertices", function () { beforeEach(function () { context = iD(); surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) - .call(iD.svg.Surface(context)); + .call(iD.svg.Layers(context)); }); it("adds the .shared class to vertices that are members of two or more ways", function () {