mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-17 19:23:02 +00:00
Halos and proper orientation for line labels
This commit is contained in:
@@ -37,7 +37,21 @@ iD.svg.Labels = function(projection) {
|
||||
else return size / 3 * 2 * text.length;
|
||||
}
|
||||
|
||||
function drawLineLabels(group, labels, filter, classes, position) {
|
||||
function drawLineLabels(group, defs, labels, filter, classes, position) {
|
||||
|
||||
var uses = defs.selectAll('path.label')
|
||||
.filter(filter)
|
||||
.data(labels, iD.Entity.key);
|
||||
|
||||
uses.enter()
|
||||
.append('path')
|
||||
.attr('class', 'label');
|
||||
|
||||
uses
|
||||
.attr('id', function(d) { return 'labelshadow-' + d.id; })
|
||||
.attr('d', position('lineString'));
|
||||
|
||||
uses.exit().remove();
|
||||
|
||||
var reverse = position('reverse'),
|
||||
getClasses = position('classes');
|
||||
@@ -59,19 +73,37 @@ iD.svg.Labels = function(projection) {
|
||||
.data(labels)
|
||||
.attr({
|
||||
'startOffset': position('startOffset'),
|
||||
'xlink:href': function(d, i) { return '#casing-' + d.id},
|
||||
'glyph-orientation-vertical': function(d, i) {return reverse(d, i) ? 180 : 0},
|
||||
'glyph-orientation-horizontal': function(d, i) {return reverse(d, i) ? 180 : 0},
|
||||
'xlink:href': function(d, i) { return '#labelshadow-' + d.id},
|
||||
'dominant-baseline': 'middle'
|
||||
})
|
||||
.text(function(d, i) {
|
||||
return reverse(d, i) ? d.tags.name.split('').reverse().join('') : d.tags.name;
|
||||
});
|
||||
|
||||
texts.each(function(d, i) { textWidth(d.tags.name, position('height')(d, i), this); });
|
||||
|
||||
texts.exit().remove();
|
||||
|
||||
}
|
||||
|
||||
function drawLineHalos(group, labels, filter, classes, position) {
|
||||
|
||||
var halos = group.selectAll('path')
|
||||
.filter(filter)
|
||||
.data(labels, iD.Entity.key);
|
||||
|
||||
halos.enter()
|
||||
.append('path')
|
||||
.style({
|
||||
'stroke-width': position('font-size')
|
||||
})
|
||||
.attr('class', classes);
|
||||
|
||||
halos.attr('d', position('lineString'));
|
||||
|
||||
halos.exit().remove();
|
||||
}
|
||||
|
||||
function drawPointHalos(group, labels, filter, classes, position) {
|
||||
|
||||
var halos = group.selectAll('rect.' + classes)
|
||||
@@ -128,6 +160,10 @@ iD.svg.Labels = function(projection) {
|
||||
return reverse;
|
||||
}
|
||||
|
||||
function lineString(nodes) {
|
||||
return 'M' + nodes.join('L');
|
||||
}
|
||||
|
||||
function subpath(nodes, from, to) {
|
||||
function segmentLength(i) {
|
||||
var dx = nodes[i][0] - nodes[i + 1][0];
|
||||
@@ -254,9 +290,10 @@ iD.svg.Labels = function(projection) {
|
||||
Math.abs(sub[0][0] - sub[sub.length - 1][0]) + 20,
|
||||
Math.abs(sub[0][1] - sub[sub.length - 1][1]) + 30
|
||||
);
|
||||
if (rev) sub = sub.reverse();
|
||||
if (tryInsert(rect)) return {
|
||||
'font-size': height,
|
||||
reverse: rev,
|
||||
'font-size': height + 2,
|
||||
lineString: lineString(sub),
|
||||
startOffset: offset + '%'
|
||||
}
|
||||
}
|
||||
@@ -299,9 +336,12 @@ iD.svg.Labels = function(projection) {
|
||||
|
||||
|
||||
var label = surface.select('.layer-label'),
|
||||
halo = surface.select('.layer-halo'),
|
||||
defs = surface.select('defs'),
|
||||
points = drawPointLabels(label, labelled['point'], filter, 'text-label', pointposition),
|
||||
pointHalos = drawPointHalos(label, labelled['point'], filter, 'point-label-halo', pointposition),
|
||||
lines = drawLineLabels(label, labelled['line'], filter, 'textpath-label', lineposition),
|
||||
lines = drawLineLabels(label, defs, labelled['line'], filter, 'textpath-label', lineposition),
|
||||
linesHalos = drawLineHalos(halo, labelled['line'], filter, 'textpath-label', lineposition),
|
||||
areas = drawPointLabels(label, labelled['area'], filter, 'text-arealabel', areaposition),
|
||||
areaHalos = drawPointHalos(label, labelled['area'], filter, 'area-label-halo', areaposition);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user