Improve tests for line joins in walkthrough

(closes #3695)

modules/ui/intro/line.js

@@ -9,7 +9,14 @@ import { icon, pad } from './helper';
 
 export function uiIntroLine(context, reveal) {
     var dispatch = d3.dispatch('done'),
-        timeouts = [];
+        timeouts = [],
+        centroid = [-85.62830, 41.95699],
+        midpoint = [-85.62975395449628, 41.95787501510204],
+        start = [-85.6297754121684, 41.95805253325314],
+        intersection = [-85.62974496187628, 41.95742515554585],
+        targetId = 'w17965351',
+        drawId = null;
+
 
     var step = {
         title: 'intro.lines.title'
@@ -28,11 +35,6 @@ export function uiIntroLine(context, reveal) {
 
 
     step.enter = function() {
-        var centroid = [-85.62830, 41.95699];
-        var midpoint = [-85.62975395449628, 41.95787501510204];
-        var start = [-85.6297754121684, 41.95805253325314];
-        var intersection = [-85.62974496187628, 41.95742515554585];
-
         context.map().centerZoom(start, 18);
         reveal('button.add-line',
             t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }),
@@ -43,6 +45,7 @@ export function uiIntroLine(context, reveal) {
 
         function addLine(mode) {
             if (mode.id !== 'add-line') return;
+            drawId = null;
             context.on('enter.intro', drawLine);
 
             var padding = 150 * Math.pow(2, context.map().zoom() - 18);
@@ -59,7 +62,8 @@ export function uiIntroLine(context, reveal) {
 
         function drawLine(mode) {
             if (mode.id !== 'draw-line') return;
-            context.history().on('change.intro', addIntersection);
+            drawId = mode.selectedIDs()[0];
+            context.history().on('change.intro', checkIntersection);
             context.on('enter.intro', retry);
 
             var padding = 300 * Math.pow(2, context.map().zoom() - 19);
@@ -77,23 +81,33 @@ export function uiIntroLine(context, reveal) {
         // ended line before creating intersection
         function retry(mode) {
             if (mode.id !== 'select') return;
-            var pointBox = pad(intersection, 30, context),
-                ids = mode.selectedIDs();
+            context.history().on('change.intro', null);
+            var pointBox = pad(intersection, 30, context);
             reveal(pointBox, t('intro.lines.restart', {name: t('intro.graph.flower_st')}));
             d3.select(window).on('mousedown.intro', eventCancel, true);
 
-            timeout(function() {
-                context.replace(actionDeleteMultiple(ids));
-                step.exit();
-                step.enter();
-            }, 3000);
+            timeout(step.restart, 3000);
         }
 
 
-        function addIntersection(changes) {
-            if ( _.some(changes.created(), function(d) {
-                return d.type === 'node' && context.graph().parentWays(d).length > 1;
-            })) {
+        function checkIntersection() {
+
+            function joinedTargetWay() {
+                var drawEntity = drawId && context.hasEntity(drawId);
+                if (!drawEntity) {
+                    step.restart();
+                    return false;
+                }
+
+                var drawNodes = context.graph().childNodes(drawEntity);
+                return _.some(drawNodes, function(node) {
+                    return _.some(context.graph().parentWays(node), function(parent) {
+                        return parent.id === targetId;
+                    });
+                });
+            }
+
+            if (joinedTargetWay()) {
                 context.history().on('change.intro', null);
                 context.on('enter.intro', enterSelect);
 
@@ -115,7 +129,6 @@ export function uiIntroLine(context, reveal) {
             context.map().on('move.intro', null);
             context.on('enter.intro', null);
             d3.select('#curtain').style('pointer-events', 'all');
-
             presetCategory();
         }
 
@@ -162,6 +175,12 @@ export function uiIntroLine(context, reveal) {
     };
 
 
+    step.restart = function() {
+        step.exit();
+        step.enter();
+    };
+
+
     step.exit = function() {
         d3.select(window).on('mousedown.intro', null, true);
         d3.select('#curtain').style('pointer-events', 'none');
@@ -170,6 +189,10 @@ export function uiIntroLine(context, reveal) {
         context.on('exit.intro', null);
         context.map().on('move.intro', null);
         context.history().on('change.intro', null);
+        if (drawId) {
+            context.replace(actionDeleteMultiple([drawId]));
+            drawId = null;
+        }
     };
 
     return utilRebind(step, dispatch, 'on');