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 () {