Ensure each step can cleanup after itself and continueTo reliably

modules/ui/intro/area.js

@@ -109,7 +109,7 @@ export function uiIntroArea(context, reveal) {
 
     function play() {
         reveal('.intro-nav-wrap .chapter-line',
-            t('intro.area.play', { next: t('intro.line.title') }), {
+            t('intro.areas.play', { next: t('intro.lines.title') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() {
                     dispatch.call('done');

modules/ui/intro/helper.js

@@ -2,11 +2,11 @@ export function pointBox(loc, context) {
     var rect = context.surfaceRect();
     var point = context.curtainProjection(loc);
     return {
-        left: point[0] + rect.left - 30,
-        top: point[1] + rect.top - 50,
-        width: 60,
-        height: 70
-     };
+        left: point[0] + rect.left - 40,
+        top: point[1] + rect.top - 60,
+        width: 80,
+        height: 90
+    };
 }
 
 

modules/ui/intro/intro.js

@@ -90,7 +90,6 @@ export function uiIntro(context) {
                         d3.select('button.chapter-' + next)
                             .classed('next', true);
                     }
-                    // enterChapter(chapters[i + 1]);
                 });
             return s;
         });

modules/ui/intro/line.js

@@ -186,7 +186,7 @@ export function uiIntroLine(context, reveal) {
 
     function play() {
         reveal('.intro-nav-wrap .chapter-startEditing',
-            t('intro.line.play', { next: t('intro.startediting.title') }), {
+            t('intro.lines.play', { next: t('intro.startediting.title') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() {
                     dispatch.call('done');

modules/ui/intro/navigation.js

@@ -35,7 +35,7 @@ export function uiIntroNavigation(context, reveal) {
     function dragMap() {
         var dragged = false,
             rect = context.surfaceRect(),
-            map = {
+            box = {
                 left: rect.left + (textDirection === 'rtl' ? 60 : 10),
                 top: rect.top + 70,
                 width: rect.width - 70,
@@ -43,20 +43,20 @@ export function uiIntroNavigation(context, reveal) {
             };
 
         context.map().centerZoom([-85.63591, 41.94285], 19);
-        reveal(map, t('intro.navigation.drag'));
+        reveal(box, t('intro.navigation.drag'));
 
         context.map().on('move.intro', function() {
             dragged = true;
         });
 
         d3.select(window).on('mouseup.intro', function() {
-            if (dragged) advance();
+            if (dragged) continueTo(clickTownHall);
         }, true);
 
-        function advance() {
+        function continueTo(nextStep) {
             context.map().on('move.intro', null);
             d3.select(window).on('mouseup.intro', null, true);
-            clickTownHall();
+            nextStep();
         }
     }
 
@@ -70,7 +70,7 @@ export function uiIntroNavigation(context, reveal) {
         context.map().centerEase(hall.loc, 250);
 
         context.on('enter.intro', function() {
-            if (isTownHallSelected()) advance();
+            if (isTownHallSelected()) continueTo(selectedTownHall);
         });
 
         timeout(function() {
@@ -83,10 +83,10 @@ export function uiIntroNavigation(context, reveal) {
             });
         }, 260); // after centerEase
 
-        function advance() {
+        function continueTo(nextStep) {
             context.on('enter.intro', null);
             context.map().on('move.intro drawn.intro', null);
-            selectedTownHall();
+            nextStep();
         }
     }
 
@@ -96,6 +96,7 @@ export function uiIntroNavigation(context, reveal) {
 
         var hall = context.entity('n2140018997');
         var box = pointBox(hall.loc, context);
+        var advance = function() { continueTo(inspectTownHall); };
 
         reveal(box, t('intro.navigation.selected'),
             { buttonText: t('intro.ok'), buttonCallback: advance }
@@ -108,9 +109,9 @@ export function uiIntroNavigation(context, reveal) {
             );
         });
 
-        function advance() {
+        function continueTo(nextStep) {
             context.map().on('move.intro drawn.intro', null);
-            inspectTownHall();
+            nextStep();
         }
     }
 
@@ -118,7 +119,9 @@ export function uiIntroNavigation(context, reveal) {
     function inspectTownHall(mode) {
         if (!isTownHallSelected()) return clickTownHall();
 
-        context.on('exit.intro', advance);
+        context.on('exit.intro', function() {
+            continueTo(streetSearch);
+        });
 
         timeout(function() {
             reveal('.entity-editor-pane',
@@ -126,9 +129,9 @@ export function uiIntroNavigation(context, reveal) {
             );
         }, 700);
 
-        function advance() {
+        function continueTo(nextStep) {
             context.on('exit.intro', null);
-            streetSearch();
+            nextStep();
         }
     }
 
@@ -152,16 +155,18 @@ export function uiIntroNavigation(context, reveal) {
         if (!firstName.empty() && firstName.text() === name) {
             reveal(first.node(), t('intro.navigation.choose', { name: name }));
 
-            context.on('exit.intro', advance);
+            context.on('exit.intro', function() {
+                continueTo(selectedStreet);
+            });
 
             d3.select('.search-header input')
                 .on('keydown.intro', eventCancel, true)
                 .on('keyup.intro', null);
         }
 
-        function advance() {
+        function continueTo(nextStep) {
             context.on('exit.intro', null);
-            selectedStreet();
+            nextStep();
         }
     }
 
@@ -177,12 +182,14 @@ export function uiIntroNavigation(context, reveal) {
                     button: icon('#icon-close', 'pre-text')
                 })
             );
-            context.on('exit.intro', advance);
+            context.on('exit.intro', function() {
+                continueTo(play);
+            });
         }, 400);
 
-        function advance() {
+        function continueTo(nextStep) {
             context.on('exit.intro', null);
-            play();
+            nextStep();
         }
     }
 

modules/ui/intro/point.js

@@ -2,13 +2,14 @@ import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { utilBindOnce } from '../../util/bind_once';
 import { utilRebind } from '../../util/rebind';
-import { icon, pad } from './helper';
+import { icon, pointBox, pad } from './helper';
 
 
 export function uiIntroPoint(context, reveal) {
     var dispatch = d3.dispatch('done'),
         timeouts = [],
-        corner = [-85.632481, 41.944094];
+        corner = [-85.632481, 41.944094],
+        pointId = null;
 
 
     var chapter = {
@@ -31,159 +32,271 @@ export function uiIntroPoint(context, reveal) {
         var tooltip = reveal('button.add-point',
             t('intro.points.add', { button: icon('#icon-point', 'pre-text') }));
 
+        pointId = null;
+
         tooltip.selectAll('.tooltip-inner')
             .insert('svg', 'span')
             .attr('class', 'tooltip-illustration')
             .append('use')
             .attr('xlink:href', '#poi-images');
 
-        context.on('enter.intro', placePoint);
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'add-point') return;
+            continueTo(placePoint);
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            nextStep();
+        }
     }
 
 
-    function placePoint(mode) {
-        if (mode.id !== 'add-point') return;
-        context.on('enter.intro', enterSelect);
+    function placePoint() {
+        if (context.mode().id !== 'add-point') {
+            return chapter.restart();
+        }
 
         var pointBox = pad(corner, 150, context);
         reveal(pointBox, t('intro.points.place'));
 
         context.map().on('move.intro drawn.intro', function() {
             pointBox = pad(corner, 150, context);
-            reveal(pointBox, t('intro.points.place'), {duration: 0});
+            reveal(pointBox, t('intro.points.place'), { duration: 0 });
         });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'select') return chapter.restart();
+            continueTo(enterSelect);
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
     }
 
 
-    function enterSelect(mode) {
-        if (mode.id !== 'select') return;
-        context.map().on('move.intro drawn.intro', null);
-        context.on('enter.intro', null);
+    function enterSelect() {
+        if (context.mode().id !== 'select') {
+            return chapter.restart();
+        }
+
+        pointId = context.mode().selectedIDs()[0];
+
+        context.on('exit.intro', function() {
+            return chapter.restart();
+        });
+
+        d3.select('.preset-search-input')
+            .on('keyup.intro', checkPresetSearch);
 
         timeout(function() {
             reveal('.preset-search-input',
-                t('intro.points.search', {name: context.presets().item('amenity/cafe').name()}));
-            d3.select('.preset-search-input').on('keyup.intro', keySearch);
+                t('intro.points.search', { name: context.presets().item('amenity/cafe').name() })
+            );
         }, 500);
     }
 
 
-    function keySearch() {
+    function checkPresetSearch() {
         var first = d3.select('.preset-list-item:first-child');
+
         if (first.classed('preset-amenity-cafe')) {
-            reveal(first.select('.preset-list-button').node(), t('intro.points.choose'));
-            utilBindOnce(context.history(), 'change.intro', selectedPreset);
+            reveal(first.select('.preset-list-button').node(),
+                t('intro.points.choose')
+            );
+
             d3.select('.preset-search-input')
                 .on('keydown.intro', eventCancel, true)
                 .on('keyup.intro', null);
+
+            context.history().on('change.intro', function() {
+                continueTo(selectedPreset);
+            });
+        }
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            context.history().on('change.intro', null);
+            d3.select('.preset-search-input').on('keydown.intro', null);
+            nextStep();
         }
     }
 
 
     function selectedPreset() {
+        context.on('exit.intro', function(mode) {
+            return chapter.restart();
+        });
+
+        context.history().on('change.intro', function() {
+            continueTo(closeEditor);
+        });
+
         timeout(function() {
-            reveal('.entity-editor-pane', t('intro.points.describe'), {tooltipClass: 'intro-points-describe'});
-            context.history().on('change.intro', closeEditor);
-            context.on('exit.intro', selectPoint);
+            reveal('.entity-editor-pane',
+                t('intro.points.describe'),
+                { tooltipClass: 'intro-points-describe' }
+            );
         }, 400);
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            context.history().on('change.intro', null);
+            nextStep();
+        }
     }
 
 
     function closeEditor() {
-        d3.select('.preset-search-input').on('keydown.intro', null);
-        context.history().on('change.intro', null);
+        context.on('exit.intro', function() {
+            continueTo(selectPoint);
+        });
+
         reveal('.entity-editor-pane',
-            t('intro.points.close', { button: icon('#icon-apply', 'pre-text') }));
+            t('intro.points.close', { button: icon('#icon-apply', 'pre-text') })
+        );
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            nextStep();
+        }
     }
 
 
     function selectPoint() {
-        context.on('exit.intro', null);
-        context.history().on('change.intro', null);
-        context.on('enter.intro', enterReselect);
+        if (!pointId) return chapter.restart();
+        var entity = context.hasEntity(pointId);
+        if (!entity) return chapter.restart();
 
-        var pointBox = pad(corner, 150, context);
-        reveal(pointBox, t('intro.points.reselect'));
+        context.map().centerEase(entity.loc, 250);
 
-        context.map().on('move.intro drawn.intro', function() {
-            pointBox = pad(corner, 150, context);
-            reveal(pointBox, t('intro.points.reselect'), {duration: 0});
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'select') return;
+            continueTo(updatePoint);
         });
+
+        timeout(function() {
+            var box = pointBox(entity.loc, context);
+            reveal(box, t('intro.points.reselect'));
+
+            context.map().on('move.intro drawn.intro', function() {
+                var entity = context.hasEntity(pointId);
+                if (!entity) return chapter.restart();
+                var box = pointBox(entity.loc, context);
+                reveal(box, t('intro.points.reselect'), { duration: 0 });
+            });
+        }, 260);  // after centerEase
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
     }
 
 
-    function enterReselect(mode) {
-        if (mode.id !== 'select') return;
-        context.map().on('move.intro drawn.intro', null);
-        context.on('enter.intro', null);
+    function updatePoint() {
+        if (context.mode().id !== 'select') return continueTo(selectPoint);
+
+        context.on('exit.intro', function(mode) {
+            continueTo(rightClickPoint);
+        });
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                t('intro.points.fixname', { button: icon('#icon-apply', 'pre-text') }));
-            context.on('exit.intro', deletePoint);
+                t('intro.points.fixname', { button: icon('#icon-apply', 'pre-text') })
+            );
         }, 500);
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            nextStep();
+        }
     }
 
 
-    function deletePoint() {
-        context.on('exit.intro', null);
-        context.on('enter.intro', function(mode) {
-            if (mode.id !== 'select') return;
+    function rightClickPoint() {
+        if (!pointId) return chapter.restart();
+        var entity = context.hasEntity(pointId);
+        if (!entity) return chapter.restart();
 
-            var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
-            if (!node) return;
-
-            advance();
-        });
-
-        var pointBox = pad(corner, 150, context);
-        reveal(pointBox, t('intro.points.rightclick'));
+        var box = pointBox(entity.loc, context);
+        reveal(box, t('intro.points.rightclick'));
 
         context.map().on('move.intro drawn.intro', function() {
-            pointBox = pad(corner, 150, context);
-            reveal(pointBox, t('intro.points.rightclick'), { duration: 0 });
+            var entity = context.hasEntity(pointId);
+            if (!entity) return chapter.restart();
+            var box = pointBox(entity.loc, context);
+            reveal(box, t('intro.points.rightclick'), { duration: 0 });
         });
 
-        function advance() {
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'select') return;
+            var ids = context.selectedIDs();
+            if (ids.length !== 1 || ids[0] !== pointId) return;
+
+            timeout(function() {
+                var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
+                if (!node) return;
+                continueTo(enterDelete);
+            }, 300);  // after menu visible
+        });
+
+        function continueTo(nextStep) {
             context.on('enter.intro', null);
             context.map().on('move.intro drawn.intro', null);
-            enterDelete()
+            nextStep()
         }
     }
 
 
     function enterDelete() {
-        context.on('exit.intro', deletePoint);
-        context.history().on('change.intro', function(changed) {
-            if (changed.deleted().length)
-                advance();
+        if (!pointId) return chapter.restart();
+        var entity = context.hasEntity(pointId);
+        if (!entity) return chapter.restart();
+
+        var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
+        if (!node) {
+            return continueTo(rightClickPoint);
+        } else {
+            var rect = context.surfaceRect();
+            var point = context.curtainProjection(entity.loc);
+            var box = {
+                left: point[0] + rect.left - 40,
+                top: point[1] + rect.top - 60,
+                width: 150,
+                height: 150
+            };
+            reveal(box,
+                t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') })
+            );
+        }
+
+        context.on('exit.intro', function() {
+            if (!pointId) return chapter.restart();
+            var entity = context.hasEntity(pointId);
+            if (entity) return continueTo(rightClickPoint);  // point still exists
         });
 
-        timeout(function() {
-            // deprecation warning - Radial Menu to be removed in iD v3
-            var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
-            if (!node) {
-                context.history().on('change.intro', null);
-                context.on('exit.intro', null);
-                deletePoint();
-            } else {
-                var pointBox = pad(node.getBoundingClientRect(), 50, context);
-                reveal(pointBox,
-                    t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') }));
-            }
-        }, 300);
+        context.history().on('change.intro', function(changed) {
+            if (changed.deleted().length)
+                continueTo(play);
+        });
 
-        function advance() {
+        function continueTo(nextStep) {
             context.history().on('change.intro', null);
             context.on('exit.intro', null);
-            play()
+            nextStep()
         }
     }
 
 
     function play() {
         reveal('.intro-nav-wrap .chapter-area',
-            t('intro.point.play', { next: t('intro.area.title') }), {
+            t('intro.points.play', { next: t('intro.areas.title') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() {
                     dispatch.call('done');