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

Use traditional marker shape for points (fixes #172)

Browse Source
This commit is contained in:
John Firebaugh
2013-03-14 11:21:58 -07:00
parent 468869c9c8
commit 364d93693b
4 changed files with 97 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
css/map.css
View File

@@ -29,12 +29,10 @@ use {
/* points */
g.point circle {
fill:#fff;
}
g.point image {
pointer-events: none;
g.point .stroke {
stroke: #444;
stroke-width: 1;
fill: #fff;
}
g.point .shadow {
@@ -44,13 +42,17 @@ g.point .shadow {
transition: transform 100ms linear;
-moz-transition: fill 100ms linear;
}
.behavior-hover g.point.hover:not(.selected) .shadow {
fill: #f6634f;
fill-opacity: 0.5;
stroke-width: 8;
stroke: #f6634f;
stroke-opacity: 0.5;
}
g.point.selected .shadow {
fill: #f6634f;
fill-opacity: 0.7;
stroke-width: 8;
stroke: #f6634f;
stroke-opacity: 0.7;
}
g.point.active, g.point.active * {

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

@@ -41,9 +41,9 @@ iD.svg.Labels = function(projection) {
});
var pointOffsets = [
[15, 2, 'start'], // right
[10, 0, 'start'], // unused right now
[-15, 0, 'end']
[15, -11, 'start'], // right
[10, -11, 'start'], // unused right now
[-15, -11, 'end']
];
var lineOffsets = [50, 45, 55, 40, 60, 35, 65, 30, 70, 25,

37
js/id/svg/points.js
View File

@@ -1,11 +1,12 @@
iD.svg.Points = function(projection, context) {
return function drawPoints(surface, graph, entities, filter) {
function imageHref(entity) {
var preset = context.presets()
.match(entity, context.graph());
return '#maki-' + preset.icon + '-12';
}
function markerPath(selection, klass) {
selection
.attr('class', klass)
.attr('transform', 'translate(-8, -23)')
.attr('d', 'M 17,8 C 17,13 11,21 8.5,23.5 C 6,21 0,13 0,8 C 0,4 4,-0.5 8.5,-0.5 C 13,-0.5 17,4 17,8 z');
}
return function drawPoints(surface, graph, entities, filter) {
var points = [];
for (var i = 0; i < entities.length; i++) {
@@ -27,16 +28,15 @@ iD.svg.Points = function(projection, context) {
.append('g')
.attr('class', 'node point');
group.append('circle')
.attr('r', 12)
.attr('class', 'shadow');
group.append('path')
.call(markerPath, 'shadow');
group.append('circle')
.attr('class', 'stroke')
.attr('r', 8);
group.append('path')
.call(markerPath, 'stroke');
group.append('use')
.attr('transform', 'translate(-6, -6)')
.attr('class', 'icon')
.attr('transform', 'translate(-6, -20)')
.attr('clip-path', 'url(#clip-square-12)');
groups.attr('transform', iD.svg.PointTransform(projection))
@@ -45,10 +45,17 @@ iD.svg.Points = function(projection, context) {
// Selecting the following implicitly
// sets the data (point entity) on the element
groups.select('use')
.attr('xlink:href', imageHref);
groups.select('.shadow');
groups.select('.stroke');
groups.select('.icon')
.attr('xlink:href', function imageHref(entity) {
var preset = context.presets().match(entity, graph);
if (preset.icon === 'marker-stroked') {
return '';
} else {
return '#maki-' + preset.icon + '-12';
}
});
groups.exit()
.remove();

64
test/rendering.html
View File

@@ -63,6 +63,12 @@
context.presets = function() {
return iD.presets().load({
presets: [{
geometry: ['point'],
tags: {
amenity: 'restaurant'
},
icon: 'restaurant'
}, {
geometry: ['vertex'],
tags: {
highway: 'turning_circle'
@@ -77,6 +83,57 @@
}]
});
};
function tagHTML(d) {
return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>");
}
</script>
<table>
<thead>
<tr><th></th><th>Base</th><th>Hover</th><th>Selected</th></tr>
</thead>
<tbody class="points">
</tbody>
</table>
<script>
var data = [{}, {amenity: 'restaurant'}],
modes = ['base', 'hover', 'selected'],
node = iD.Node({loc: [15, 30]}),
points = iD.svg.Points(projection, context);
var row = d3.select('.points').selectAll('tr')
.data(data)
.enter().append('tr');
row.append('th')
.html(tagHTML);
row.selectAll('td')
.data(function (d) {
return modes.map(function (m) {
return _.extend({ mode: m }, d);
});
})
.enter()
.append('td')
.attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
.append('svg')
.attr('width', 30)
.attr('height', 40)
.attr('data-zoom', function (d) { return d.zoom; })
.call(iD.svg.Surface())
.each(function (d) {
var n = node.update({tags: d}),
graph = iD.Graph([n]);
d3.select(this)
.attr('class', 'behavior-hover')
.call(points, graph, [n], filter)
.selectAll('.point')
.classed(d.mode, d.mode !== 'base');
});
</script>
<table>
@@ -84,7 +141,7 @@
<tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th><th colspan="3">z18</th></tr>
<tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
</thead>
<tbody class="points">
<tbody class="vertices">
</tbody>
</table>
@@ -109,7 +166,7 @@
way = iD.Way({nodes: [node.id]}),
vertices = iD.svg.Vertices(projection, context);
var row = d3.select('.points').selectAll('tr')
var row = d3.select('.vertices').selectAll('tr')
.data(data)
.enter().append('tr');
@@ -143,7 +200,6 @@
.classed(d.mode, d.mode !== 'base')
.classed('shared', d.shared);
});
</script>
<table>
@@ -196,7 +252,7 @@
.enter().append('tr');
row.append('th')
.html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });
.html(tagHTML);
var a = iD.Node({loc: [15, 15]}),
b = iD.Node({loc: [185, 15]}),