From 200b4f67d5e6bea8eadd5b3c40360ac5753d5205 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Mon, 3 Dec 2012 16:24:35 -0500 Subject: [PATCH] Clean up actions --- js/id/actions/modes.js | 141 ++++++++++++++++++++--------------------- 1 file changed, 70 insertions(+), 71 deletions(-) diff --git a/js/id/actions/modes.js b/js/id/actions/modes.js index c06839888..0937fb1af 100644 --- a/js/id/actions/modes.js +++ b/js/id/actions/modes.js @@ -1,10 +1,5 @@ iD.modes = {}; -// Modes are entered by bindings to clicks and keypresses, and exited by the same. -// -// Modes aim to include a bare minimum of 'business logic' - this is separated -// into actions. - iD.modes._node = function(ll) { return iD.Node({ lat: ll[1], @@ -13,45 +8,6 @@ iD.modes._node = function(ll) { }); }; -iD.modes.AddPlace = { - title: "+ Place", - enter: function() { - var surface = this.map.surface, - teaser = surface.selectAll('g#temp-g') - .append('g').attr('id', 'addplace'); - - teaser.append('circle').attr({ 'class': 'handle', r: 3 }); - - surface.on('mousemove.addplace', function() { - teaser.attr('transform', function() { - var off = d3.mouse(surface.node()); - return 'translate(' + off + ')'; - }); - }); - - surface.on('click.addplace', function() { - var ll = this.map.projection.invert( - d3.mouse(surface.node())); - var n = iD.modes._node(ll); - n._poi = true; - this.map.perform(iD.actions.addNode(n)); - this.map.selectEntity(n); - this.exit(); - }.bind(this)); - - d3.select(document).on('keydown.addplace', function() { - if (d3.event.keyCode === 27) this.exit(); - }.bind(this)); - }, - exit: function() { - this.map.surface - .on('mousemove.addplace', null) - .on('click.addplace', null); - d3.select(document).on('keydown.addplace', null); - d3.selectAll('#addplace').remove(); - } -}; - iD.modes.dist = function(a, b) { return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2)); }; @@ -69,6 +25,48 @@ iD.modes.chooseIndex = function(way, point, map) { return _.indexOf(changes, _.min(changes)) + 1; }; +iD.modes.AddPlace = { + title: "+ Place", + enter: function() { + var surface = this.map.surface, + teaser = surface.selectAll('g#temp-g') + .append('g').attr('id', 'addplace'); + + teaser.append('circle').attr({ 'class': 'handle', r: 3 }); + + function mousemove() { + teaser.attr('transform', function() { + var off = d3.mouse(surface.node()); + return 'translate(' + off + ')'; + }); + } + + function click() { + var ll = this.map.projection.invert( + d3.mouse(surface.node())); + var n = iD.modes._node(ll); + n._poi = true; + this.map.perform(iD.actions.addNode(n)); + this.map.selectEntity(n); + this.exit(); + } + + surface.on('mousemove.addplace', mousemove) + .on('click.addplace', click.bind(this)); + + d3.select(document).on('keydown.addplace', function() { + if (d3.event.keyCode === 27) this.exit(); + }.bind(this)); + }, + exit: function() { + this.map.surface + .on('mousemove.addplace', null) + .on('click.addplace', null); + d3.select(document).on('keydown.addplace', null); + d3.selectAll('#addplace').remove(); + } +}; + // user has clicked 'add road' or pressed a keybinding, and now has // a teaser node and needs to click on the map to start a road iD.modes.AddRoad = { @@ -86,16 +84,16 @@ iD.modes.AddRoad = { .attr({ 'class': 'handle', r: 3 }) .style('pointer-events', 'none'); - surface.on('mousemove.addroad', function() { + function mousemove() { teaser.attr('transform', function() { var off = d3.mouse(surface.node()); return 'translate(' + off + ')'; }); - }); + } // http://bit.ly/SwUwIL // http://bit.ly/WxqGng - function addRoad() { + function click() { var t = d3.select(d3.event.target), node, direction = 'forward', @@ -137,7 +135,8 @@ iD.modes.AddRoad = { this.controller.enter(iD.modes.DrawRoad(way.id, direction)); } - surface.on('click.addroad', addRoad.bind(this)); + surface.on('click.addroad', click.bind(this)) + .on('mousemove.addroad', mousemove); d3.select(document).on('keydown.addroad', function() { if (d3.event.keyCode === 27) this.exit(); @@ -165,13 +164,13 @@ iD.modes.DrawRoad = function(way_id, direction) { nextnode = iD.modes._node([NaN, NaN]); var nextnode_id = nextnode.id; - var way = this.map.history.graph().entity(way_id); - var firstNode = way.nodes[0]; - var lastNode = _.last(way.nodes); + var way = this.map.history.graph().entity(way_id), + firstNode = way.nodes[0], + lastNode = _.last(way.nodes); way.nodes[push](nextnode_id); this.map.perform(iD.actions.addWayNode(way, nextnode)); - surface.on('mousemove.drawroad', function() { + function mousemove() { var ll = this.map.projection.invert(d3.mouse(surface.node())); var way = this.map.history.graph().entity(way_id); var node = iD.Entity(this.map.history.graph().entity(nextnode_id), { @@ -180,9 +179,9 @@ iD.modes.DrawRoad = function(way_id, direction) { this.map.history.replace(iD.actions.addWayNode(way, node)); var only = iD.Util.trueObj([way.id].concat(_.pluck(way.nodes, 'id'))); this.map.redraw(only); - }.bind(this)); + } - function drawRoad() { + function click() { var t = d3.select(d3.event.target); d3.event.stopPropagation(); if (t.data() && t.data()[0] && t.data()[0].type === 'node') { @@ -228,7 +227,8 @@ iD.modes.DrawRoad = function(way_id, direction) { this.controller.enter(iD.modes.DrawRoad(way_id, direction)); } - surface.on('click.drawroad', drawRoad.bind(this)); + surface.on('mousemove.drawroad', mousemove.bind(this)) + .on('click.drawroad', click.bind(this)); }, exit: function() { this.map.surface.on('mousemove.drawroad', null) @@ -267,7 +267,7 @@ iD.modes.AddArea = { }); }); - function addArea() { + function click() { var t = d3.select(d3.event.target), node, way = this.way(); @@ -286,7 +286,7 @@ iD.modes.AddArea = { this.controller.enter(iD.modes.DrawArea(way.id)); } - surface.on('click.addarea', addArea.bind(this)); + surface.on('click.addarea', click.bind(this)); d3.select(document).on('keydown.addarea', function() { if (d3.event.keyCode === 27) this.exit(); @@ -299,7 +299,6 @@ iD.modes.AddArea = { this.map.surface.on('click.addarea', null) .on('mousemove.addarea', null); d3.select(document).on('keydown.addarea', null); - d3.selectAll('#addarea').remove(); } }; @@ -307,17 +306,18 @@ iD.modes.DrawArea = function(way_id) { return { enter: function() { this.map.dblclickEnable(false); - var surface = this.map.surface, nextnode = iD.modes._node([NaN, NaN]); - var nextnode_id = nextnode.id; - var way = this.map.history.graph().entity(way_id); - var firstnode_id = _.first(way.nodes); + var surface = this.map.surface, + way = this.map.history.graph().entity(way_id), + firstnode_id = _.first(way.nodes), + nextnode_id = nextnode.id; + way.nodes.push(nextnode_id); this.map.perform(iD.actions.addWayNode(way, nextnode)); - surface.on('mousemove.drawarea', function() { + function mousemove() { var ll = this.map.projection.invert(d3.mouse(surface.node())); var way = this.map.history.graph().entity(way_id); var node = iD.Entity(this.map.history.graph().entity(nextnode_id), { @@ -327,9 +327,9 @@ iD.modes.DrawArea = function(way_id) { this.map.history.replace(iD.actions.addWayNode(way, node)); var only = iD.Util.trueObj([way.id].concat(_.pluck(way.nodes, 'id'))); this.map.redraw(only); - }.bind(this)); + } - function drawArea() { + function click() { var t = d3.select(d3.event.target); d3.event.stopPropagation(); if (t.data() && t.data()[0] && t.data()[0].type === 'node') { @@ -358,14 +358,13 @@ iD.modes.DrawArea = function(way_id) { way.nodes = way.nodes.slice(); this.controller.enter(iD.modes.DrawArea(way_id)); } - surface.on('click.drawarea', drawArea.bind(this)); + + surface.on('click.drawarea', click.bind(this)) + .on('mousemove.drawarea', mousemove.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(); + this.map.surface.on('mousemove.drawarea', null) + .on('click.drawarea', null); window.setTimeout(function() { this.map.dblclickEnable(true); }.bind(this), 1000);