diff --git a/data/intro.yaml b/data/intro.yaml index e14ba7814..597670744 100644 --- a/data/intro.yaml +++ b/data/intro.yaml @@ -32,6 +32,7 @@ en: road: "**Select Road from the grid**" residential: "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**" describe: "**Name the road and close the feature editor.**" + restart: "The road needs to intersect Flower Street." startediting: help: "More documentation and this walkthrough are available here." save: "Don't forget to regularly save your changes!" diff --git a/js/id/ui/intro/line.js b/js/id/ui/intro/line.js index 532a80331..2e34f0e59 100644 --- a/js/id/ui/intro/line.js +++ b/js/id/ui/intro/line.js @@ -41,10 +41,11 @@ iD.ui.intro.line = function(context, reveal) { reveal(pointBox, 'intro.lines.start', 0); }); } - function drawLine (mode) { + + function drawLine(mode) { if (mode.id !== 'draw-line') return; - context.on('enter.intro', null); context.history().on('change.intro', addIntersection); + context.on('enter.intro', retry); var padding = 300 * Math.pow(2, context.map().zoom() - 19); var pointBox = iD.ui.intro.pad(context.projection(midpoint), padding); @@ -57,6 +58,18 @@ iD.ui.intro.line = function(context, reveal) { }); } + // ended line before creating intersection + function retry(mode) { + if (mode.id !== 'select') return; + var pointBox = iD.ui.intro.pad(context.projection(intersection), 30); + reveal(pointBox, 'intro.lines.restart'); + timeout(function() { + context.replace(iD.actions.DeleteMultiple(mode.selection())); + step.exit(); + step.enter(); + }, 3000); + } + function addIntersection(changes) { if ( _.any(changes.created(), function(d) { return d.type === 'node' && context.graph().parentWays(d).length > 1; diff --git a/js/id/ui/intro/navigation.js b/js/id/ui/intro/navigation.js index aa0252a26..2442d2697 100644 --- a/js/id/ui/intro/navigation.js +++ b/js/id/ui/intro/navigation.js @@ -41,13 +41,19 @@ iD.ui.intro.navigation = function(context, reveal) { }, 400)); function townhall() { - var hall = d3.select('.node.tag-amenity-townhall'); - var box = iD.ui.intro.pointBox(context.projection(hall.datum().loc)); + var hall = [-85.63645945147184, 41.942986488012565]; + var point = context.projection(hall); + + if (point[0] < 0 || point[0] > window.innerWidth - 200 || + point[1] < 0 || point[1] > window.innerHeight) { + context.map().center(hall); + point = context.projection(hall); + } + var box = iD.ui.intro.pointBox(point); reveal(box, 'intro.navigation.select'); context.map().on('move.intro', function() { - var hall = d3.select('.node.tag-amenity-townhall'); - var box = iD.ui.intro.pointBox(context.projection(hall.datum().loc)); + var box = iD.ui.intro.pointBox(context.projection(hall)); reveal(box, 'intro.navigation.select', 0); }); }