CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

iD.svg.Surface -> iD.svg.Layers

Browse Source
This commit is contained in:
Bryan Housel
2016-02-24 15:41:22 -05:00
parent c595fdbf57
commit 45e4e730a8
20 changed files with 116 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ARCHITECTURE.md
View File

@@ -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

2
index.html
View File

@@ -71,7 +71,7 @@
<script src="js/id/svg/midpoints.js"></script>
<script src="js/id/svg/osm.js"></script>
<script src="js/id/svg/points.js"></script>
<script src="js/id/svg/surface.js"></script>
<script src="js/id/svg/layers.js"></script>
<script src="js/id/svg/tag_classes.js"></script>
<script src="js/id/svg/turns.js"></script>
<script src="js/id/svg/vertices.js"></script>

53
js/id/renderer/map.js
View File

@@ -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());

2
js/id/svg/defs.js
View File

@@ -15,7 +15,7 @@ iD.svg.Defs = function(context) {
};
}
return function (selection) {
return function drawDefs(selection) {
var defs = selection.append('defs');
// marker

39
js/id/svg/gpx.js
View File

@@ -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;
};

2
js/id/svg/icon.js
View File

@@ -1,5 +1,5 @@
iD.svg.Icon = function(name, svgklass, useklass) {
return function (selection) {
return function drawIcon(selection) {
selection.selectAll('svg')
.data([0])
.enter()

8
js/id/svg/labels.js
View File

@@ -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;
};

37
js/id/svg/surface.js → js/id/svg/layers.js
View File

@@ -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;
};

16
js/id/svg/mapillary_images.js
View File

@@ -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;
};

16
js/id/svg/mapillary_signs.js
View File

@@ -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;
};

2
js/id/svg/osm.js
View File

@@ -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']);

2
js/id/svg/turns.js
View File

@@ -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('-');
}

17
js/id/ui/preset/restrictions.js
View File

@@ -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)

2
test/index.html
View File

@@ -76,7 +76,7 @@
<script src="../js/id/svg/midpoints.js"></script>
<script src="../js/id/svg/osm.js"></script>
<script src="../js/id/svg/points.js"></script>
<script src="../js/id/svg/surface.js"></script>
<script src="../js/id/svg/layers.js"></script>
<script src="../js/id/svg/tag_classes.js"></script>
<script src="../js/id/svg/turns.js"></script>
<script src="../js/id/svg/vertices.js"></script>

10
test/rendering.html
View File

@@ -23,7 +23,7 @@
<script src="../js/id/svg/midpoints.js"></script>
<script src="../js/id/svg/osm.js"></script>
<script src="../js/id/svg/points.js"></script>
<script src="../js/id/svg/surface.js"></script>
<script src="../js/id/svg/layers.js"></script>
<script src="../js/id/svg/tag_classes.js"></script>
<script src="../js/id/svg/vertices.js"></script>
@@ -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]);

2
test/spec/svg/areas.js
View File

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

2
test/spec/svg/lines.js
View File

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

2
test/spec/svg/midpoints.js
View File

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

2
test/spec/svg/points.js
View File

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

2
test/spec/svg/vertices.js
View File

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