CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Clickable road casings, trying to fix road drawing logic

Browse Source
This commit is contained in:
Tom MacWright
2012-11-13 14:33:52 -05:00
parent fb6a7658c6
commit 41b0678f05
4 changed files with 120 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/map.css
+1 -1
View File
@@ -22,7 +22,7 @@ g.marker.active circle {
/* interactive elements */
circle.handle {
cursor: move;
stroke-width: 3;
stroke-width: 2;
fill:#000;
stroke:#FFF694;
}
index.html
+1
View File
@@ -38,6 +38,7 @@
<script type='text/javascript' src='js/iD/Util.js'></script>
<script type='text/javascript' src='js/iD/renderer/style.js'></script>
<script type='text/javascript' src='js/iD/renderer/clickcancel.js'></script>
<script type='text/javascript' src='js/iD/renderer/tiles.js'></script>
<script type='text/javascript' src='js/iD/renderer/Map.js'></script>
<script type='text/javascript' src='js/iD/renderer/hash.js'></script>
js/iD/actions/actions.js
+107 -4
View File
@@ -26,8 +26,8 @@ iD.actions.AddPlace = {
.append('g').attr('id', 'addplace');
teaser.append('circle')
.attr('class', 'teaser-point')
.attr('r', 10);
.attr('class', 'handle')
.attr('r', 3);
surface.on('mousemove.addplace', function() {
teaser.attr('transform', function() {
@@ -80,8 +80,8 @@ iD.actions.AddRoad = {
.append('g').attr('id', 'addroad');
teaser.append('circle')
.attr('class', 'teaser-point')
.attr('r', 10);
.attr('class', 'handle')
.attr('r', 3);
surface.on('mousemove.addroad', function() {
teaser.attr('transform', function() {
@@ -155,6 +155,7 @@ iD.actions.DrawRoad = function(way) {
exit: function() {
this.map.surface.on('mousemove.drawroad', null);
this.map.surface.on('click.drawroad', null);
this.map.surface.on('dblclick.drawroad', null);
d3.select(document).on('.drawroad', null);
d3.selectAll('#drawroad').remove();
}
@@ -162,15 +163,117 @@ iD.actions.DrawRoad = function(way) {
};
iD.actions.AddArea = {
way: function(ll) {
return iD.Entity({
type: 'way',
nodes: [],
tags: {
building: 'yes'
},
modified: true,
id: iD.Util.id('way')
});
},
enter: function() {
d3.selectAll('button').classed('active', false);
d3.selectAll('button#area').classed('active', true);
var surface = this.map.surface;
var teaser = surface.selectAll('g#temp-g')
.append('g').attr('id', 'addroad');
teaser.append('circle')
.attr('class', 'handle')
.attr('r', 3);
surface.on('mousemove.addroad', function() {
teaser.attr('transform', function() {
var off = d3.mouse(surface.node());
return 'translate(' + off + ')';
});
});
surface.on('click.addroad', function() {
var ll = this.map.projection.invert(
d3.mouse(surface.node()));
var way = this.way();
var node = iD.actions._node(ll);
way.nodes.push(node.id);
this.map.operate(iD.operations.changeWayNodes(way, node));
this.map.selectClick(way);
this.controller.go(iD.actions.DrawArea(way));
}.bind(this));
d3.select(document).on('keydown.addroad', function() {
if (d3.event.keyCode === 27) this.exit();
}.bind(this));
},
exit: function() {
this.map.surface.on('click.addarea', null);
this.map.surface.on('mousemove.addarea', null);
d3.select(document).on('keydown.addarea', null);
d3.selectAll('#addroad').remove();
d3.selectAll('button#area').classed('active', false);
}
};
iD.actions.DrawArea = function(way) {
return {
enter: function() {
var surface = this.map.surface;
var lastNode = this.map.history.graph().entity(way.nodes[way.nodes.length - 1]);
var firstNode = this.map.history.graph().entity(way.nodes[0]);
this.nextnode = iD.actions._node([lastNode.lon, lastNode.lat]);
way.nodes.push(this.nextnode.id);
way.nodes.push(firstNode.id);
this.map.operate(iD.operations.changeWayNodes(way, this.nextnode));
this.map.operate(iD.operations.changeWayNodes(way, firstNode));
surface.on('mousemove.drawarea', function() {
var ll = this.map.projection.invert(d3.mouse(surface.node()));
this.map.history.replace(iD.operations.move(this.nextnode, ll));
this.map.update();
}.bind(this));
surface.on('click.drawarea', function() {
d3.event.stopPropagation();
way.nodes.pop();
way.nodes.pop();
var ll = this.map.projection.invert(d3.mouse(surface.node()));
var node = iD.actions._node(ll);
way.nodes.push(node.id);
this.map.operate(iD.operations.changeWayNodes(way, node));
this.controller.go(iD.actions.DrawRoad(way));
}.bind(this));
surface.on('dblclick.drawarea', function() {
d3.event.stopPropagation();
var a = this.map.history.graph().entity(way.nodes.pop());
var b = this.map.history.graph().entity(way.nodes.pop());
this.map.operate(iD.operations.changeWayNodes(way, a));
this.map.operate(iD.operations.remove(a));
this.map.operate(iD.operations.remove(b));
way.nodes.push(way.nodes[0]);
var closeNode = this.map.history.graph().entity(way.nodes[0]);
this.map.operate(iD.operations.changeWayNodes(way, closeNode));
this.exit();
}.bind(this));
},
exit: function() {
this.map.surface.on('mousemove.drawarea', null);
this.map.surface.on('click.drawarea', null);
this.map.surface.on('dblclick.drawarea', null);
d3.select(document).on('.drawarea', null);
d3.selectAll('#drawarea').remove();
}
};
};
iD.actions.Move = {
enter: function() {
d3.selectAll('button').classed('active', false);
js/iD/renderer/Map.js
+11 -8
View File
@@ -27,6 +27,7 @@ iD.Map = function(elem) {
inspector = iD.Inspector(history),
parent = d3.select(elem),
selection = null,
// clickCancel = clickCancelProvider(),
projection = d3.geo.mercator()
.scale(512).translate([512, 512]),
// behaviors
@@ -76,7 +77,12 @@ iD.Map = function(elem) {
// The map uses SVG groups in order to restrict
// visual and event ordering - fills below casings, casings below
// strokes, and so on.
var surface = parent.append('svg').call(zoombehavior);
var surface = parent.append('svg')
.call(zoombehavior);
// .call(clickCancel);
// Don't use the default double click handler.
// surface.on('dblclick.zoom', null);
surface.append('defs').append('clipPath')
.attr('id', 'clip')
@@ -148,7 +154,8 @@ iD.Map = function(elem) {
// Casings
casings.exit().remove();
casings.enter().append('path');
casings.enter().append('path')
.on('click', selectClick);
casings.order()
.attr('d', function(d) { return d._line; })
.attr('class', class_casing)
@@ -170,9 +177,7 @@ iD.Map = function(elem) {
.on('click', selectClick)
.call(dragbehavior);
marker.append('circle')
.attr('r', 10)
.attr('cx', 8)
.attr('cy', 8);
.attr({ r: 10, cx: 8, cy: 8 });
marker.append('image')
.attr({ width: 16, height: 16 })
.attr('xlink:href', iD.Style.markerimage);
@@ -190,7 +195,7 @@ iD.Map = function(elem) {
handles.exit().remove();
handles.enter().append('circle')
.attr('class', 'handle')
.attr('r', 5)
.attr('r', 3)
.call(dragbehavior);
handles.attr('transform', function(entity) {
return 'translate(' + projection(ll2a(entity)) + ')';
@@ -220,7 +225,6 @@ iD.Map = function(elem) {
selection = null;
drawVector();
d3.select('.inspector-wrap').style('display', 'none');
d3.event.stopPropagation();
}
function selectClick(d) {
@@ -230,7 +234,6 @@ iD.Map = function(elem) {
d3.select('.inspector-wrap')
.style('display', 'block')
.datum(d).call(inspector);
d3.event.stopPropagation();
}
inspector.on('change', function(d, tags) {