mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-25 01:24:05 +02:00
Merge remote-tracking branch 'systemed/master' into graph-perf2
This commit is contained in:
+16
-1
@@ -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>
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
@@ -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]);
|
||||
});
|
||||
});
|
||||
@@ -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());
|
||||
|
||||
@@ -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}]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user