mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
384 lines
13 KiB
HTML
384 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>Rendering Tests</title>
|
|
<link rel="stylesheet" href="../css/map.css">
|
|
</head>
|
|
<body>
|
|
<!-- include source files here... -->
|
|
<script src='../js/lib/lodash.js'></script>
|
|
<script src='../js/lib/d3.v3.js'></script>
|
|
|
|
<script src='../js/id/id.js'></script>
|
|
<script src='../js/id/util.js'></script>
|
|
|
|
<script src="../js/id/geo.js"></script>
|
|
<script src="../js/id/geo/extent.js"></script>
|
|
|
|
<script src="../js/id/svg.js"></script>
|
|
<script src="../js/id/svg/areas.js"></script>
|
|
<script src="../js/id/svg/icon.js"></script>
|
|
<script src="../js/id/svg/lines.js"></script>
|
|
<script src="../js/id/svg/midpoints.js"></script>
|
|
<script src="../js/id/svg/points.js"></script>
|
|
<script src="../js/id/svg/surface.js"></script>
|
|
<script src="../js/id/svg/tag_classes.js"></script>
|
|
<script src="../js/id/svg/vertices.js"></script>
|
|
|
|
<script src='../js/id/core/entity.js'></script>
|
|
<script src='../js/id/core/graph.js'></script>
|
|
<script src='../js/id/core/history.js'></script>
|
|
<script src='../js/id/core/node.js'></script>
|
|
<script src='../js/id/core/relation.js'></script>
|
|
<script src='../js/id/core/way.js'></script>
|
|
|
|
<script src='../js/id/presets.js'></script>
|
|
<script src='../js/id/presets/collection.js'></script>
|
|
<script src='../js/id/presets/preset.js'></script>
|
|
|
|
<form style="position: fixed; right: 10px; bottom: 10px">
|
|
<input id="background-color" type="range" min="0" max="255" value="255">
|
|
<label for="background-color">Background Color</label>
|
|
</form>
|
|
|
|
<script>
|
|
var bg = d3.select("#background-color")
|
|
.on("change", function () {
|
|
var v = bg.property("value");
|
|
d3.select("body")
|
|
.style("background-color", d3.rgb(v,v,v));
|
|
});
|
|
|
|
var infiniteExtent = iD.geo.Extent([0, 0], [Infinity, Infinity]),
|
|
projection = function(p) { return p; },
|
|
filter = d3.functor(true),
|
|
context = {};
|
|
|
|
projection.stream = function(listener) {
|
|
return listener;
|
|
};
|
|
|
|
context.presets = function() {
|
|
return iD.presets().load({
|
|
presets: {
|
|
"amenity/restaurant": {
|
|
geometry: ['point'],
|
|
tags: {
|
|
amenity: 'restaurant'
|
|
},
|
|
icon: 'restaurant'
|
|
},
|
|
"highway/turning_circle": {
|
|
geometry: ['vertex'],
|
|
tags: {
|
|
highway: 'turning_circle'
|
|
},
|
|
icon: 'circle'
|
|
},
|
|
"railway/level_crossing": {
|
|
geometry: ['vertex'],
|
|
tags: {
|
|
railway: 'level_crossing'
|
|
},
|
|
icon: 'cross'
|
|
},
|
|
"other": {
|
|
geometry: ['point', 'vertex', 'line', 'area', 'relation'],
|
|
tags: {}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
iD.data = {
|
|
featureIcons: {
|
|
"restaurant": {"12":[0,3840],"18":[0,3854],"24":[0,3874]},
|
|
"cross":{"12":[0,1320],"18":[0,1334],"24":[0,1354]},
|
|
"circle":{"12":[0,1020],"18":[0,1034],"24":[0,1054]}
|
|
}
|
|
};
|
|
|
|
context.imagePath = function(_) {
|
|
return 'img/' + _;
|
|
};
|
|
|
|
context.selectedIDs = function() {
|
|
return [];
|
|
};
|
|
|
|
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(context))
|
|
.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>
|
|
<thead>
|
|
<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="vertices">
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
var data = [{
|
|
type: 'normal',
|
|
tags: {}
|
|
}, {
|
|
type: 'shared',
|
|
shared: true,
|
|
tags: {}
|
|
}, {
|
|
type: 'highway=turning_circle',
|
|
tags: {highway: 'turning_circle'}
|
|
}, {
|
|
type: 'railway=level_crossing',
|
|
tags: {railway: 'level_crossing'}
|
|
}, {
|
|
type: 'unknown tag',
|
|
tags: {interesting: 'yes'}
|
|
}],
|
|
zooms = [16, 17, 18],
|
|
modes = ['base', 'hover', 'selected'],
|
|
node = iD.Node({loc: [15, 15]}),
|
|
way = iD.Way({nodes: [node.id]}),
|
|
vertices = iD.svg.Vertices(projection, context);
|
|
|
|
var row = d3.select('.vertices').selectAll('tr')
|
|
.data(data)
|
|
.enter().append('tr');
|
|
|
|
row.append('th')
|
|
.text(function (d) { return d.type; });
|
|
|
|
row.selectAll('td')
|
|
.data(function (d) {
|
|
return _.flatten(zooms.map(function (z) {
|
|
return modes.map(function (m) {
|
|
return _.extend({ zoom: z, 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', 30)
|
|
.attr('data-zoom', function (d) { return d.zoom; })
|
|
.call(iD.svg.Surface(context))
|
|
.each(function (d) {
|
|
var n = node.update({tags: d.tags}),
|
|
graph = iD.Graph([n, way]);
|
|
|
|
d3.select(this)
|
|
.attr('class', 'behavior-hover')
|
|
.call(vertices, graph, [n, way], filter, d.zoom)
|
|
.selectAll('.vertex')
|
|
.classed(d.mode, d.mode !== 'base')
|
|
.classed('shared', d.shared);
|
|
});
|
|
</script>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th></tr>
|
|
<tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
|
|
</thead>
|
|
<tbody class="highways">
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
var zooms = [16, 17],
|
|
modes = ['base', 'hover', 'selected'],
|
|
tags = [
|
|
{},
|
|
{highway: 'motorway'},
|
|
{highway: 'trunk'},
|
|
{highway: 'primary'},
|
|
{highway: 'secondary'},
|
|
{highway: 'tertiary'},
|
|
{highway: 'residential'},
|
|
{highway: 'service'},
|
|
{highway: 'track'},
|
|
{highway: 'road'},
|
|
{highway: 'unclassified'},
|
|
{highway: 'living_street'},
|
|
{highway: 'pedestrian'},
|
|
{highway: 'path'},
|
|
{highway: 'footway'},
|
|
{highway: 'cycleway'},
|
|
{highway: 'bridleway'},
|
|
{highway: 'steps'},
|
|
{highway: 'proposed'},
|
|
{highway: 'construction', construction: 'motorway'},
|
|
{highway: 'construction', construction: 'trunk'},
|
|
{railway: 'rail'},
|
|
{railway: 'abandoned'},
|
|
{railway: 'subway'},
|
|
{waterway: 'stream'},
|
|
{waterway: 'river'},
|
|
{waterway: 'ditch'},
|
|
{power: 'line'},
|
|
{boundary: 'administrative'},
|
|
{boundary: 'protected_area'},
|
|
{boundary: 'national_park'}];
|
|
|
|
var row = d3.select('.highways').selectAll('tr')
|
|
.data(tags)
|
|
.enter().append('tr');
|
|
|
|
row.append('th')
|
|
.html(tagHTML);
|
|
|
|
var a = iD.Node({loc: [15, 15]}),
|
|
b = iD.Node({loc: [185, 15]}),
|
|
way = iD.Way({nodes: [a.id, b.id]}),
|
|
vertices = iD.svg.Vertices(projection, context),
|
|
lines = iD.svg.Lines(projection, context),
|
|
midpoints = iD.svg.Midpoints(projection, context);
|
|
|
|
row.selectAll('td')
|
|
.data(function (d) {
|
|
return _.flatten(zooms.map(function (z) {
|
|
return modes.map(function (m) {
|
|
return { zoom: z, mode: m, tags: d };
|
|
});
|
|
}));
|
|
})
|
|
.enter()
|
|
.append('td')
|
|
.attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
|
|
.append('svg')
|
|
.attr('width', 200)
|
|
.attr('height', 30)
|
|
.attr('data-zoom', function (d) { return d.zoom; })
|
|
.call(iD.svg.Surface(context))
|
|
.each(function (d) {
|
|
var highway = way.update({tags: d.tags}),
|
|
graph = iD.Graph([a, b, highway]);
|
|
|
|
d3.select(this)
|
|
.attr('class', 'behavior-hover')
|
|
.call(vertices, graph, [a, b], filter, d.zoom)
|
|
.call(lines, graph, [highway], filter)
|
|
.call(midpoints, graph, [highway], filter, infiniteExtent)
|
|
.selectAll('.line')
|
|
.classed(d.mode, d.mode !== 'base');
|
|
});
|
|
</script>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th></th><th>Base</th><th>Selected</th></tr>
|
|
</thead>
|
|
<tbody class="areas">
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
var modes = ['base', 'selected'],
|
|
tags = [
|
|
{area: 'yes'},
|
|
{natural: 'yes'},
|
|
{natural: 'water'},
|
|
{natural: 'wood'},
|
|
{building: 'yes'},
|
|
{amenity: 'parking'},
|
|
{amenity: 'school'}
|
|
];
|
|
|
|
var row = d3.select('.areas').selectAll('tr')
|
|
.data(tags)
|
|
.enter().append('tr');
|
|
|
|
row.append('th')
|
|
.html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });
|
|
|
|
var a = iD.Node({loc: [15, 15]}),
|
|
b = iD.Node({loc: [85, 15]}),
|
|
c = iD.Node({loc: [85, 85]}),
|
|
d = iD.Node({loc: [15, 85]}),
|
|
way = iD.Way({nodes: [a.id, b.id, c.id, d.id, a.id]}),
|
|
vertices = iD.svg.Vertices(projection, context),
|
|
areas = iD.svg.Areas(projection, context),
|
|
midpoints = iD.svg.Midpoints(projection, context);
|
|
|
|
row.selectAll('td')
|
|
.data(function (d) {
|
|
return modes.map(function (m) {
|
|
return { mode: m, tags: d };
|
|
});
|
|
})
|
|
.enter()
|
|
.append('td')
|
|
.append('svg')
|
|
.attr('width', 100)
|
|
.attr('height', 100)
|
|
.call(iD.svg.Surface(context))
|
|
.each(function (datum) {
|
|
var area = way.update({tags: datum.tags}),
|
|
graph = iD.Graph([a, b, c, d, area]);
|
|
|
|
d3.select(this)
|
|
.attr('class', datum.mode === 'selected' ? 'mode-select' : 'mode-browse')
|
|
.call(vertices, graph, [a, b, c, d], filter)
|
|
.call(areas, graph, [area], filter)
|
|
.call(midpoints, graph, [area], filter, infiniteExtent)
|
|
.selectAll('.area')
|
|
.classed(datum.mode, datum.mode !== 'base');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|