Class midpoints to match parent way and adjust styles.

After editing more with 1.5.3, I really dislike the more visible
midpoints I added in afa1efd.  This commit gives the midpoints
tag classes so that we can style only *certain* midpoints more visible
(footpath, cycleway, bridleway, etc) and leave all the others dim.
This commit is contained in:
Bryan Housel
2014-07-28 23:11:52 -04:00
parent efe530439d
commit e23448c25e
2 changed files with 26 additions and 10 deletions

View File

@@ -90,6 +90,18 @@ g.vertex.shared .stroke {
}
g.midpoint .fill {
fill: #eee;
stroke: #444;
stroke-opacity: .6;
opacity: .7;
}
g.midpoint.tag-highway-pedestrian .fill,
g.midpoint.tag-highway-steps .fill,
g.midpoint.tag-highway-path .fill,
g.midpoint.tag-highway-footway .fill,
g.midpoint.tag-highway-cycleway .fill,
g.midpoint.tag-highway-bridleway .fill {
fill: #fff;
stroke: #333;
stroke-opacity: .8;

View File

@@ -71,25 +71,29 @@ iD.svg.Midpoints = function(projection, context) {
.filter(midpointFilter)
.data(_.values(midpoints), function(d) { return d.id; });
var group = groups.enter()
var enter = groups.enter()
.insert('g', ':first-child')
.attr('class', 'midpoint');
group.append('polygon')
enter.append('polygon')
.attr('points', '-6,8 10,0 -6,-8')
.attr('class', 'shadow');
group.append('polygon')
enter.append('polygon')
.attr('points', '-3,4 5,0 -3,-4')
.attr('class', 'fill');
groups.attr('transform', function(d) {
var translate = iD.svg.PointTransform(projection),
a = context.entity(d.edge[0]),
b = context.entity(d.edge[1]),
angle = Math.round(iD.geo.angle(a, b, projection) * (180 / Math.PI));
return translate(d) + ' rotate(' + angle + ')';
});
groups
.attr('transform', function(d) {
var translate = iD.svg.PointTransform(projection),
a = context.entity(d.edge[0]),
b = context.entity(d.edge[1]),
angle = Math.round(iD.geo.angle(a, b, projection) * (180 / Math.PI));
return translate(d) + ' rotate(' + angle + ')';
})
.call(iD.svg.TagClasses().tags(
function(d) { return d.parents[0].tags; }
));
// Propagate data bindings.
groups.select('polygon.shadow');