mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
369 lines
13 KiB
HTML
369 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='../node_modules/lodash/lodash.js'></script>
|
|
|
|
<script src='../js/id/id.js'></script>
|
|
<script src='../js/lib/id/geo.js'></script>
|
|
<script src='../js/lib/id/presets.js'></script>
|
|
<script src='../js/lib/id/svg.js'></script>
|
|
<script src='../js/lib/id/util.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>
|
|
|
|
<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 = function() { return true; },
|
|
context = {};
|
|
|
|
projection.stream = function(listener) {
|
|
return listener;
|
|
};
|
|
|
|
context.presets = function() {
|
|
return iD.presets.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.Layers(projection, 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.Layers(projection, 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.Layers(projection, 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.Layers(projection, 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>
|