add editing and deleting poi to intro

data/intro.yaml

@@ -13,10 +13,10 @@ en:
       choose: "**Choose Cafe from the grid.**"
       describe: "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name and address**"
       close: "The feature editor can be closed by clicking on the close button, or anywhere on the map. **Close the feature editor**"
-      selectanother: "Often points will already exist, but have mistakes or be incomplete. We can edit exist points. **Select the point for *Someting**"
-      fixname: "Change the name to *Something Else* **"
-      selectthird: "We only want to have one representation of a feature. We can see that there are two points for *Some Place*. **Select one of the points.**"
-      delete: "There menu that shows around the point contains various operations, including delete. **Delete the point.**"
+      reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**" 
+      fixname: "**Change the name and close the feature editor.**"
+      reselect_delete: "All features on the map can be deleted. **Reselect the point you created.**"
+      delete: "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**"
     areas:
       add: "Areas are a more detailed way to represent features. They provide information on the boundaries of the feature. Areas can be used for most features types points can be used for, and are often preferred. **Click the Area button to add a new area.**"
       corner: "Areas are drawn by placing nodes that mark the boundary of the area. **Place the starting node on one of the corners of the playground.**"

data/locales.js

@@ -1450,10 +1450,10 @@ locale.en = {
             "choose": "**Choose Cafe from the grid.**",
             "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name and address**",
             "close": "The feature editor can be closed by clicking on the close button, or anywhere on the map. **Close the feature editor**",
-            "selectanother": "Often points will already exist, but have mistakes or be incomplete. We can edit exist points. **Select the point for *Someting**",
-            "fixname": "Change the name to *Something Else* **",
-            "selectthird": "We only want to have one representation of a feature. We can see that there are two points for *Some Place*. **Select one of the points.**",
-            "delete": "There menu that shows around the point contains various operations, including delete. **Delete the point.**"
+            "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**",
+            "fixname": "**Change the name and close the feature editor.**",
+            "reselect_delete": "All features on the map can be deleted. **Reselect the point you created.**",
+            "delete": "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**"
         },
         "areas": {
             "add": "Areas are a more detailed way to represent features. They provide information on the boundaries of the feature. Areas can be used for most features types points can be used for, and are often preferred. **Click the Area button to add a new area.**",
@@ -1467,10 +1467,10 @@ locale.en = {
             "add": "Lines are used to represent features such as roads, railways and rivers. **Click the Line button to add a new line.**",
             "start": "**Start the line by clicking on the end of the road.**",
             "intersect": "Click to add more points to the line. You can drag the map while drawing if necessary. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on Flower Street, to create an intersection connecting the two lines.**",
-            "finish": "Just like with areas, lines can be finished by clicking on the last point again. **Finish drawing the road.**",
-            "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**"
+            "finish": "Lines can be finished by clicking on the last point again. **Finish drawing the road.**",
+            "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.**"
         }
     }
 };

js/id/ui/intro/point.js

@@ -57,13 +57,71 @@ iD.ui.intro.point = function(context, curtain) {
         function selectedPreset() {
             curtain.reveal('.grid-pane', t('intro.points.describe'));
             context.history().on('change.intro', closeEditor);
-            context.on('exit.intro', event.done);
+            context.on('exit.intro', selectPoint);
         }
 
         function closeEditor() {
             context.history().on('change.intro', null);
             curtain.reveal('.tag-pane', t('intro.points.close'));
         }
+
+        function selectPoint() {
+            context.on('exit.intro', null);
+            context.history().on('change.intro', null);
+            context.on('enter.intro', enterReselect);
+
+            var pointBox = iD.ui.intro.pad(context.projection(corner), 150);
+            curtain.reveal(pointBox, t('intro.points.reselect'));
+
+            context.map().on('move.intro', function() {
+                pointBox = iD.ui.intro.pad(context.projection(corner), 150);
+                curtain.reveal(pointBox, t('intro.points.reselect'), 0);
+            });
+        }
+
+        function enterReselect(mode) {
+            if (mode.id !== 'select') return;
+            context.map().on('move.intro', null);
+            context.on('enter.intro', null);
+
+            setTimeout(function() {
+                curtain.reveal('.tag-pane', t('intro.points.fixname'));
+                context.on('exit.intro', deletePoint);
+            }, 500);
+        }
+
+        function deletePoint() {
+            context.on('exit.intro', null);
+            context.on('enter.intro', enterDelete);
+
+            var pointBox = iD.ui.intro.pad(context.projection(corner), 150);
+            curtain.reveal(pointBox, t('intro.points.reselect_delete'));
+
+            context.map().on('move.intro', function() {
+                pointBox = iD.ui.intro.pad(context.projection(corner), 150);
+                curtain.reveal(pointBox, t('intro.points.reselect_delete'), 0);
+            });
+        }
+
+        function enterDelete(mode) {
+            if (mode.id !== 'select') return;
+            context.map().on('move.intro', null);
+            context.on('enter.intro', null);
+            context.on('exit.intro', deletePoint);
+            context.map().on('move.intro', deletePoint);
+            context.history().on('change.intro', deleted);
+
+            setTimeout(function() {
+                var node = d3.select('.radial-menu-item-delete').node();
+                var pointBox = iD.ui.intro.pad(node.getBoundingClientRect(), 50);
+                curtain.reveal(pointBox, t('intro.points.delete'));
+            }, 300);
+        }
+
+        function deleted(changed) {
+            if (changed.deleted().length) event.done();
+        }
+
     };
 
     step.exit = function() {