mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-12 16:52:50 +00:00
134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
import { geoAngle, geoPathLength } from '../geo';
|
|
|
|
|
|
export function svgTurns(projection, context) {
|
|
|
|
function icon(turn) {
|
|
var u = turn.u ? '-u' : '';
|
|
if (turn.no) return '#iD-turn-no' + u;
|
|
if (turn.only) return '#iD-turn-only' + u;
|
|
return '#iD-turn-yes' + u;
|
|
}
|
|
|
|
function drawTurns(selection, graph, turns) {
|
|
|
|
function turnTransform(d) {
|
|
var pxRadius = 50;
|
|
var toWay = graph.entity(d.to.way);
|
|
var toPoints = graph.childNodes(toWay)
|
|
.map(function (n) { return n.loc; })
|
|
.map(projection);
|
|
var toLength = geoPathLength(toPoints);
|
|
var mid = toLength / 2; // midpoint of destination way
|
|
|
|
var toNode = graph.entity(d.to.node);
|
|
var toVertex = graph.entity(d.to.vertex);
|
|
var a = geoAngle(toVertex, toNode, projection);
|
|
var o = projection(toVertex.loc);
|
|
var r = d.u ? 0 // u-turn: no radius
|
|
: !toWay.__via ? pxRadius // leaf way: put marker at pxRadius
|
|
: Math.min(mid, pxRadius); // via way: prefer pxRadius, fallback to mid for very short ways
|
|
|
|
return 'translate(' + (r * Math.cos(a) + o[0]) + ',' + (r * Math.sin(a) + o[1]) + ') ' +
|
|
'rotate(' + a * 180 / Math.PI + ')';
|
|
}
|
|
|
|
|
|
var drawLayer = selection.selectAll('.layer-osm.points .points-group.turns');
|
|
var touchLayer = selection.selectAll('.layer-touch.turns');
|
|
|
|
// Draw turns..
|
|
var groups = drawLayer.selectAll('g.turn')
|
|
.data(turns, function(d) { return d.key; });
|
|
|
|
// exit
|
|
groups.exit()
|
|
.remove();
|
|
|
|
// enter
|
|
var groupsEnter = groups.enter()
|
|
.append('g')
|
|
.attr('class', function(d) { return 'turn ' + d.key; });
|
|
|
|
var turnsEnter = groupsEnter
|
|
.filter(function(d) { return !d.u; });
|
|
|
|
turnsEnter.append('rect')
|
|
.attr('transform', 'translate(-22, -12)')
|
|
.attr('width', '44')
|
|
.attr('height', '24');
|
|
|
|
turnsEnter.append('use')
|
|
.attr('transform', 'translate(-22, -12)')
|
|
.attr('width', '44')
|
|
.attr('height', '24');
|
|
|
|
var uEnter = groupsEnter
|
|
.filter(function(d) { return d.u; });
|
|
|
|
uEnter.append('circle')
|
|
.attr('r', '16');
|
|
|
|
uEnter.append('use')
|
|
.attr('transform', 'translate(-16, -16)')
|
|
.attr('width', '32')
|
|
.attr('height', '32');
|
|
|
|
// update
|
|
groups = groups
|
|
.merge(groupsEnter)
|
|
.attr('opacity', function(d) { return d.direct === false ? '0.7' : null; })
|
|
.attr('transform', turnTransform);
|
|
|
|
groups.select('use')
|
|
.attr('xlink:href', icon);
|
|
|
|
groups.select('rect'); // propagate bound data
|
|
groups.select('circle'); // propagate bound data
|
|
|
|
|
|
// Draw touch targets..
|
|
var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
|
|
groups = touchLayer.selectAll('g.turn')
|
|
.data(turns, function(d) { return d.key; });
|
|
|
|
// exit
|
|
groups.exit()
|
|
.remove();
|
|
|
|
// enter
|
|
groupsEnter = groups.enter()
|
|
.append('g')
|
|
.attr('class', function(d) { return 'turn ' + d.key; });
|
|
|
|
turnsEnter = groupsEnter
|
|
.filter(function(d) { return !d.u; });
|
|
|
|
turnsEnter.append('rect')
|
|
.attr('class', 'target ' + fillClass)
|
|
.attr('transform', 'translate(-22, -12)')
|
|
.attr('width', '44')
|
|
.attr('height', '24');
|
|
|
|
uEnter = groupsEnter
|
|
.filter(function(d) { return d.u; });
|
|
|
|
uEnter.append('circle')
|
|
.attr('class', 'target ' + fillClass)
|
|
.attr('r', '16');
|
|
|
|
// update
|
|
groups = groups
|
|
.merge(groupsEnter)
|
|
.attr('transform', turnTransform);
|
|
|
|
groups.select('rect'); // propagate bound data
|
|
groups.select('circle'); // propagate bound data
|
|
|
|
|
|
return this;
|
|
}
|
|
|
|
return drawTurns;
|
|
}
|