Merge remote-tracking branch 'systemed/master' into graph-perf2

This commit is contained in:
Ansis Brammanis
2013-01-30 16:58:44 -05:00
60 changed files with 3536 additions and 761 deletions
+16 -1
View File
@@ -68,10 +68,12 @@
<script src='../js/id/ui/confirm.js'></script>
<script src='../js/id/actions.js'></script>
<script src="../js/id/actions/add_midpoint.js"></script>
<script src='../js/id/actions/add_node.js'></script>
<script src='../js/id/actions/add_way.js'></script>
<script src='../js/id/actions/add_way_node.js'></script>
<script src='../js/id/actions/change_entity_tags.js'></script>
<script src='../js/id/actions/circularize.js'></script>
<script src="../js/id/actions/delete_node.js"></script>
<script src="../js/id/actions/delete_way.js"></script>
<script src='../js/id/actions/move_node.js'></script>
@@ -86,7 +88,6 @@
<script src='../js/id/behavior/drag.js'></script>
<script src='../js/id/behavior/drag_midpoint.js'></script>
<script src='../js/id/behavior/drag_node.js'></script>
<script src='../js/id/behavior/drag_way.js'></script>
<script src='../js/id/behavior/draw.js'></script>
<script src='../js/id/behavior/draw_way.js'></script>
<script src='../js/id/behavior/hover.js'></script>
@@ -98,8 +99,17 @@
<script src='../js/id/modes/browse.js'></script>
<script src='../js/id/modes/draw_area.js'></script>
<script src='../js/id/modes/draw_line.js'></script>
<script src='../js/id/modes/move_way.js'></script>
<script src='../js/id/modes/select.js'></script>
<script src='../js/id/operations.js'></script>
<script src='../js/id/operations/circularize.js'></script>
<script src='../js/id/operations/delete.js'></script>
<script src='../js/id/operations/move.js'></script>
<script src='../js/id/operations/reverse.js'></script>
<script src='../js/id/operations/split.js'></script>
<script src='../js/id/operations/unjoin.js'></script>
<script src='../js/id/controller/controller.js'></script>
<script src='../js/id/graph/entity.js'></script>
@@ -111,6 +121,9 @@
<script src='../js/id/connection.js'></script>
<script src='../locale/locale.js'></script>
<script src='../locale/en.js'></script>
<script>
iD.debug = true;
mocha.setup({
@@ -125,6 +138,7 @@
<!-- include spec files here... -->
<script src="spec/lib/d3.keybinding.js"></script>
<script src="spec/actions/add_midpoint.js"></script>
<script src="spec/actions/add_node.js"></script>
<script src="spec/actions/add_way.js"></script>
<script src="spec/actions/change_entity_tags.js"></script>
@@ -158,6 +172,7 @@
<script src="spec/svg/areas.js"></script>
<script src="spec/svg/lines.js"></script>
<script src="spec/svg/member_classes.js"></script>
<script src="spec/svg/midpoints.js"></script>
<script src="spec/svg/multipolygons.js"></script>
<script src="spec/svg/points.js"></script>
<script src="spec/svg/vertices.js"></script>
+2 -1
View File
@@ -32,9 +32,9 @@
<!-- include spec files here... -->
<script src="spec/lib/d3.keybinding.js"></script>
<script src="spec/actions/add_midpoint.js"></script>
<script src="spec/actions/add_node.js"></script>
<script src="spec/actions/add_way.js"></script>
<script src="spec/actions/add_way_node.js"></script>
<script src="spec/actions/change_entity_tags.js"></script>
<script src="spec/actions/delete_node.js"></script>
<script src="spec/actions/delete_way.js"></script>
@@ -66,6 +66,7 @@
<script src="spec/svg/areas.js"></script>
<script src="spec/svg/lines.js"></script>
<script src="spec/svg/member_classes.js"></script>
<script src="spec/svg/midpoints.js"></script>
<script src="spec/svg/multipolygons.js"></script>
<script src="spec/svg/points.js"></script>
<script src="spec/svg/vertices.js"></script>
+78 -1
View File
@@ -34,6 +34,20 @@
<script src='../js/id/graph/relation.js'></script>
<script src='../js/id/graph/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));
});
</script>
<table>
<thead>
<tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th></tr>
@@ -105,6 +119,7 @@
})
.enter()
.append('td')
.attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
.append('svg')
.attr('width', 200)
.attr('height', 30)
@@ -115,7 +130,7 @@
graph = iD.Graph([a, b, highway]);
d3.select(this)
.attr('class', d.mode === 'selected' ? 'mode-select' : 'mode-browse')
.attr('class', 'behavior-hover')
.call(vertices, graph, [a, b], filter)
.call(lines, graph, [highway], filter)
.call(midpoints, graph, [highway], filter)
@@ -123,5 +138,67 @@
.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'}
];
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),
areas = iD.svg.Areas(projection),
midpoints = iD.svg.Midpoints(projection);
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())
.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)
.selectAll('.area')
.classed(datum.mode, datum.mode !== 'base');
});
</script>
</body>
</html>
+22
View File
@@ -0,0 +1,22 @@
describe("iD.actions.AddMidpoint", function () {
it("adds the node at the midpoint location", function () {
var node = iD.Node(),
midpoint = {loc: [1, 2], ways: []},
graph = iD.actions.AddMidpoint(midpoint, node)(iD.Graph());
expect(graph.entity(node.id).loc).to.eql([1, 2]);
});
it("adds the node to all ways at the respective indexes", function () {
var node = iD.Node(),
a = iD.Node(),
b = iD.Node(),
w1 = iD.Way(),
w2 = iD.Way({nodes: [a.id, b.id]}),
midpoint = {loc: [1, 2], ways: [{id: w1.id, index: 0}, {id: w2.id, index: 1}]},
graph = iD.actions.AddMidpoint(midpoint, node)(iD.Graph([a, b, w1, w2]));
expect(graph.entity(w1.id).nodes).to.eql([node.id]);
expect(graph.entity(w2.id).nodes).to.eql([a.id, node.id, b.id]);
});
});
+17 -2
View File
@@ -9,8 +9,23 @@ describe("iD.behavior.Hover", function() {
container.remove();
});
describe("#on", function () {
it("adds the .behavior-hover class to the selection", function () {
container.call(iD.behavior.Hover());
expect(container).to.be.classed('behavior-hover')
});
});
describe("#off", function () {
it("removes the .behavior-hover class from the selection", function () {
container.classed('behavior-hover', true);
container.call(iD.behavior.Hover().off);
expect(container).not.to.be.classed('behavior-hover')
});
});
describe("mouseover", function () {
it("adds the 'hover' class to all elements to which the same datum is bound", function () {
it("adds the .hover class to all elements to which the same datum is bound", function () {
container.selectAll('span')
.data(['a', 'b', 'a', 'b'])
.enter().append('span').attr('class', Object);
@@ -24,7 +39,7 @@ describe("iD.behavior.Hover", function() {
});
describe("mouseout", function () {
it("removes the 'hover' class from all elements", function () {
it("removes the .hover class from all elements", function () {
container.append('span').attr('class', 'hover');
container.call(iD.behavior.Hover());
+52
View File
@@ -0,0 +1,52 @@
describe("iD.svg.Midpoints", function () {
var surface,
projection = Object,
filter = d3.functor(true);
beforeEach(function () {
surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
.call(iD.svg.Surface());
});
it("finds the location of the midpoints", function () {
var a = iD.Node({loc: [0, 0]}),
b = iD.Node({loc: [50, 0]}),
line = iD.Way({nodes: [a.id, b.id]}),
graph = iD.Graph([a, b, line]);
surface.call(iD.svg.Midpoints(projection), graph, [line], filter);
expect(surface.select('.midpoint').datum().loc).to.eql([25, 0]);
});
it("doesn't create midpoints on segments with pixel length less than 40", function () {
var a = iD.Node({loc: [0, 0]}),
b = iD.Node({loc: [39, 0]}),
line = iD.Way({nodes: [a.id, b.id]}),
graph = iD.Graph([a, b, line]);
surface.call(iD.svg.Midpoints(projection), graph, [line], filter);
expect(surface.selectAll('.midpoint')[0]).to.have.length(0);
});
it("binds a datum whose 'ways' property lists ways which include the segement", function () {
var a = iD.Node({loc: [0, 0]}),
b = iD.Node({loc: [50, 0]}),
c = iD.Node({loc: [1, 1]}),
d = iD.Node({loc: [2, 2]}),
l1 = iD.Way({nodes: [a.id, b.id]}),
l2 = iD.Way({nodes: [b.id, a.id]}),
l3 = iD.Way({nodes: [c.id, a.id, b.id, d.id]}),
l4 = iD.Way({nodes: [a.id, d.id, b.id]}),
graph = iD.Graph([a, b, c, d, l1, l2, l3, l4]),
ab = function (d) { return d.id === [a.id, b.id].sort().join("-"); };
surface.call(iD.svg.Midpoints(projection), graph, [l1, l2, l3, l4], filter);
expect(surface.selectAll('.midpoint').filter(ab).datum().ways).to.eql([
{id: l1.id, index: 1},
{id: l2.id, index: 1},
{id: l3.id, index: 2}]);
});
});