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

Display directional vertex with a viewfield, not an arrow

Browse Source
This commit is contained in:
Bryan Housel
2017-12-08 14:29:56 -05:00
parent b79b6ca97a
commit 6aba27c84a
3 changed files with 37 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/20_map.css
+2 -2
View File
@@ -180,8 +180,8 @@ text {
fill: #002F35;
}
.directiongroup path.directional,
.onewaygroup path.oneway {
.onewaygroup path.oneway,
.viewfieldgroup path.viewfield {
stroke-width: 6px;
}
modules/svg/defs.js
+29 -39
View File
@@ -26,8 +26,9 @@ export function svgDefs(context) {
return function drawDefs(selection) {
var defs = selection.append('defs');
// oneway marker
defs.append('marker')
// markers
defs
.append('marker')
.attr('id', 'oneway-marker')
.attr('viewBox', '0 0 10 5')
.attr('refX', 5)
@@ -36,7 +37,6 @@ export function svgDefs(context) {
.attr('markerHeight', 2)
.attr('markerUnits', 'strokeWidth')
.attr('orient', 'auto')
.append('path')
.attr('class', 'oneway')
.attr('d', 'M 5,3 L 0,3 L 0,2 L 5,2 L 5,0 L 10,2.5 L 5,5 z')
@@ -44,21 +44,22 @@ export function svgDefs(context) {
.attr('fill', '#000')
.attr('opacity', '0.75');
defs.append('marker')
.attr('id', 'directional-marker')
.attr('viewBox', '0 0 15 5')
.attr('refX', 5.5)
.attr('refY', 2.5)
.attr('markerWidth', 7)
.attr('markerHeight', 7)
defs
.append('marker')
.attr('id', 'viewfield-marker')
.attr('viewBox', '0 0 16 16')
.attr('refX', 8)
.attr('refY', 16)
.attr('markerWidth', 4)
.attr('markerHeight', 4)
.attr('markerUnits', 'strokeWidth')
.attr('orient', 'auto')
.append('path')
.attr('class', 'directional')
.attr('d', 'M 10,2.5 L 9,0 L 14,2.5 L 9,5 z')
.attr('stroke', '#fff')
.attr('class', 'viewfield')
.attr('d', 'M 6,14 C 8,13.4 8,13.4 10,14 L 16,3 C 12,0 4,0 0,3 z')
.attr('fill', '#333')
.attr('fill-opacity', '0.75')
.attr('stroke', '#fff')
.attr('stroke-width', '0.5px')
.attr('stroke-opacity', '0.75');
@@ -77,23 +78,21 @@ export function svgDefs(context) {
])
.enter()
.append('pattern')
.attr('id', function (d) {
return 'pattern-' + d[0];
})
.attr('id', function (d) { return 'pattern-' + d[0]; })
.attr('width', 32)
.attr('height', 32)
.attr('patternUnits', 'userSpaceOnUse');
patterns.append('rect')
patterns
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 32)
.attr('height', 32)
.attr('class', function (d) {
return 'pattern-color-' + d[0];
});
.attr('class', function (d) { return 'pattern-color-' + d[0]; });
patterns.append('image')
patterns
.append('image')
.attr('x', 0)
.attr('y', 0)
.attr('width', 32)
@@ -103,29 +102,20 @@ export function svgDefs(context) {
});
// clip paths
defs.selectAll()
defs.selectAll('clipPath')
.data([12, 18, 20, 32, 45])
.enter()
.append('clipPath')
.attr('id', function (d) {
return 'clip-square-' + d;
})
.attr('id', function (d) { return 'clip-square-' + d; })
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', function (d) {
return d;
})
.attr('height', function (d) {
return d;
});
.attr('width', function (d) { return d; })
.attr('height', function (d) { return d; });
defs.call(SVGSpriteDefinition(
'iD-sprite',
context.imagePath('iD-sprite.svg')));
defs.call(SVGSpriteDefinition(
'maki-sprite',
context.imagePath('maki-sprite.svg')));
// symbol spritesheets
defs
.call(SVGSpriteDefinition('iD-sprite', context.imagePath('iD-sprite.svg')))
.call(SVGSpriteDefinition('maki-sprite', context.imagePath('maki-sprite.svg')));
};
}
modules/svg/vertices.js
+6 -6
View File
@@ -152,19 +152,19 @@ export function svgVertices(projection, context) {
.append('g')
.attr('class', function(d) { return 'node vertex ' + klass + ' ' + d.id; });
// Directional vertices get arrows
// Directional vertices get viewfields
var directionsEnter = enter.filter(function(d) { return getDirections(d); })
.append('g')
.each(setClass('directiongroup'));
.each(setClass('viewfieldgroup'));
directionsEnter.selectAll('.directional')
directionsEnter.selectAll('.viewfield')
.data(function(d) { return getDirections(d); })
.enter()
.append('path')
.attr('class', 'directional')
.attr('transform', function(d) { return 'rotate(' + d + ')'; })
.attr('class', 'viewfield')
.attr('transform', function(d) { return 'rotate(' + (d + 90) + ')'; }) // +90 because marker is oriented along Y not X
.attr('d', 'M0,0H0')
.attr('marker-start', 'url(#directional-marker)');
.attr('marker-start', 'url(#viewfield-marker)');
enter
.append('circle')