Add circle buildings steps to building chapter too

(closes #3085)

modules/ui/intro/building.js

@@ -30,14 +30,20 @@ export function uiIntroBuilding(context, reveal) {
     }
 
 
-    function revealBuilding(center, text, options) {
+    function revealHouse(center, text, options) {
         var padding = 160 * Math.pow(2, context.map().zoom() - 20);
         var box = pad(center, padding, context);
         reveal(box, text, options);
     }
 
+    function revealTank(center, text, options) {
+        var padding = 190 * Math.pow(2, context.map().zoom() - 19.5);
+        var box = pad(center, padding, context);
+        reveal(box, text, options);
+    }
 
-    function addBuilding() {
+
+    function addHouse() {
         var tooltip = reveal('button.add-area',
             t('intro.buildings.add_building', { button: icon('#icon-area', 'pre-text') }));
 
@@ -47,9 +53,12 @@ export function uiIntroBuilding(context, reveal) {
         //     .append('use')
         //     .attr('xlink:href', '#landuse-images');
 
+        houseId = null;
+        context.history().reset('initial');
+
         context.on('enter.intro', function(mode) {
             if (mode.id !== 'add-area') return;
-            continueTo(startBuilding);
+            continueTo(startHouse);
         });
 
         function continueTo(nextStep) {
@@ -59,23 +68,24 @@ export function uiIntroBuilding(context, reveal) {
     }
 
 
-    function startBuilding() {
+    function startHouse() {
         if (context.mode().id !== 'add-area') {
             return chapter.restart();
         }
 
+        houseId = null;
         context.map().zoomEase(20, 500);
 
         timeout(function() {
-            revealBuilding(house, t('intro.buildings.start_building'));
+            revealHouse(house, t('intro.buildings.start_building'));
 
             context.map().on('move.intro drawn.intro', function() {
-                revealBuilding(house, t('intro.buildings.start_building'), { duration: 0 });
+                revealHouse(house, t('intro.buildings.start_building'), { duration: 0 });
             });
 
             context.on('enter.intro', function(mode) {
                 if (mode.id !== 'draw-area') return chapter.restart();
-                continueTo(drawBuilding);
+                continueTo(drawHouse);
             });
 
         }, 550);  // after easing
@@ -88,22 +98,23 @@ export function uiIntroBuilding(context, reveal) {
     }
 
 
-    function drawBuilding() {
+    function drawHouse() {
         if (context.mode().id !== 'draw-area') {
             return chapter.restart();
         }
 
-        revealBuilding(house, t('intro.buildings.continue_building'));
+        houseId = null;
+        revealHouse(house, t('intro.buildings.continue_building'));
 
         context.map().on('move.intro drawn.intro', function() {
-            revealBuilding(house, t('intro.buildings.continue_building'), { duration: 0 });
+            revealHouse(house, t('intro.buildings.continue_building'), { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
             if (mode.id === 'draw-area')
                 return;
             else if (mode.id === 'select')
-                return continueTo(chooseBuildingCategory);
+                return continueTo(chooseCategoryBuilding);
             else
                 return chapter.restart();
         });
@@ -116,7 +127,7 @@ export function uiIntroBuilding(context, reveal) {
     }
 
 
-    function chooseBuildingCategory() {
+    function chooseCategoryBuilding() {
         if (context.mode().id !== 'select') {
             return chapter.restart();
         }
@@ -130,7 +141,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal(button.node(), t('intro.buildings.choose_building'));
-            button.on('click.intro', function() { continueTo(chooseHouse); });
+            button.on('click.intro', function() { continueTo(choosePresetHouse); });
         }, 500);
 
         function continueTo(nextStep) {
@@ -141,7 +152,7 @@ export function uiIntroBuilding(context, reveal) {
     }
 
 
-    function chooseHouse() {
+    function choosePresetHouse() {
         if (context.mode().id !== 'select') {
             return chapter.restart();
         }
@@ -217,7 +228,7 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         context.map().on('move.intro drawn.intro', function() {
-            revealBuilding(house, t('intro.buildings.rightclick_building'), { duration: 0 });
+            revealHouse(house, t('intro.buildings.rightclick_building'), { duration: 0 });
         });
 
         context.history().on('change.intro', function() {
@@ -243,7 +254,7 @@ export function uiIntroBuilding(context, reveal) {
 
         var wasChanged = false;
 
-        revealBuilding(house,
+        revealHouse(house,
             t('intro.buildings.square_building', { button: icon('#operation-orthogonalize', 'pre-text') })
         );
 
@@ -259,7 +270,7 @@ export function uiIntroBuilding(context, reveal) {
             var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node();
             if (!wasChanged && !node) { return continueTo(rightClickHouse); }
 
-            revealBuilding(house,
+            revealHouse(house,
                 t('intro.buildings.square_building', { button: icon('#operation-orthogonalize', 'pre-text') }),
                 { duration: 0 }
             );
@@ -291,7 +302,7 @@ export function uiIntroBuilding(context, reveal) {
     function retryClickSquare() {
         context.enter(modeBrowse(context));
 
-        revealBuilding(house, t('intro.buildings.retry_square'), {
+        revealHouse(house, t('intro.buildings.retry_square'), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(rightClickHouse); }
         });
@@ -303,9 +314,276 @@ export function uiIntroBuilding(context, reveal) {
 
 
     function doneSquare() {
-        revealBuilding(house, t('intro.buildings.done_square'), {
+        context.history().checkpoint('doneSquare');
+
+        revealHouse(house, t('intro.buildings.done_square'), {
             buttonText: t('intro.ok'),
-            buttonCallback: function() { continueTo(play); }
+            buttonCallback: function() { continueTo(addTank); }
+        });
+
+        function continueTo(nextStep) {
+            nextStep();
+        }
+    }
+
+
+    function addTank() {
+        var tooltip = reveal('button.add-area',
+            t('intro.buildings.add_tank', { button: icon('#icon-area', 'pre-text') }));
+
+        tankId = null;
+        context.history().reset('doneSquare');
+        context.map().zoom(19.5).centerEase(tank, 500);
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'add-area') return;
+            continueTo(startTank);
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function startTank() {
+        if (context.mode().id !== 'add-area') {
+            return continueTo(addTank);
+        }
+
+        tankId = null;
+
+        timeout(function() {
+            revealTank(tank, t('intro.buildings.start_tank'));
+
+            context.map().on('move.intro drawn.intro', function() {
+                revealTank(tank, t('intro.buildings.start_tank'), { duration: 0 });
+            });
+
+            context.on('enter.intro', function(mode) {
+                if (mode.id !== 'draw-area') return chapter.restart();
+                continueTo(drawTank);
+            });
+
+        }, 550);  // after easing
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function drawTank() {
+        if (context.mode().id !== 'draw-area') {
+            return continueTo(addTank);
+        }
+
+        revealTank(tank, t('intro.buildings.continue_tank'));
+
+        context.map().on('move.intro drawn.intro', function() {
+            revealTank(tank, t('intro.buildings.continue_tank'), { duration: 0 });
+        });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id === 'draw-area')
+                return;
+            else if (mode.id === 'select')
+                return continueTo(searchPreset);
+            else
+                return continueTo(addTank);
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function searchPreset() {
+        if (context.mode().id !== 'select') {
+            return continueTo(addTank);
+        }
+
+        context.on('exit.intro', function() {
+            return continueTo(addTank);
+        });
+
+        d3.select('.preset-search-input')
+            .on('keyup.intro', checkPresetSearch);
+
+        timeout(function() {
+            reveal('.preset-search-input',
+                t('intro.buildings.search_tank', { name: context.presets().item('man_made/storage_tank').name() })
+            );
+        }, 500);
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            d3.select('.preset-search-input').on('keyup.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function checkPresetSearch() {
+        var first = d3.select('.preset-list-item:first-child');
+
+        if (first.classed('preset-man_made-storage_tank')) {
+            reveal(first.select('.preset-list-button').node(),
+                t('intro.buildings.choose_tank')
+            );
+
+            d3.select('.preset-search-input')
+                .on('keydown.intro', eventCancel, true)
+                .on('keyup.intro', null);
+
+            context.history().on('change.intro', function() {
+                continueTo(closeEditorTank);
+            });
+        }
+
+        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 closeEditorTank() {
+        if (context.mode().id !== 'select') {
+            return continueTo(addTank);
+        }
+
+        tankId = context.mode().selectedIDs()[0];
+        context.history().checkpoint('hasTank');
+
+        context.on('exit.intro', function() {
+            continueTo(rightClickTank);
+        });
+
+        timeout(function() {
+            reveal('.entity-editor-pane',
+                t('intro.buildings.close', { button: icon('#icon-apply', 'pre-text') })
+            );
+        }, 500);
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function rightClickTank() {
+        if (!tankId) return continueTo(addTank);
+
+        context.enter(modeBrowse(context));
+        context.history().reset('hasTank');
+        context.map().centerEase(tank, 500);
+
+        timeout(function() {
+            if (context.map().zoom() < 19.5) {
+                context.map().zoomEase(19.5, 500);
+            }
+        }, 520);
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'select') return;
+            var ids = context.selectedIDs();
+            if (ids.length !== 1 || ids[0] !== tankId) return;
+
+            timeout(function() {
+                var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node();
+                if (!node) return;
+                continueTo(clickCircle);
+            }, 300);  // after menu visible
+        });
+
+        context.map().on('move.intro drawn.intro', function() {
+            revealTank(tank, t('intro.buildings.rightclick_tank'), { duration: 0 });
+        });
+
+        context.history().on('change.intro', function() {
+            continueTo(rightClickTank);
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            context.map().on('move.intro drawn.intro', null);
+            context.history().on('change.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function clickCircle() {
+        if (!tankId) return chapter.restart();
+        var entity = context.hasEntity(tankId);
+        if (!entity) return continueTo(rightClickTank);
+
+        var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node();
+        if (!node) { return continueTo(rightClickTank); }
+
+        var wasChanged = false;
+
+        revealTank(tank,
+            t('intro.buildings.circle_tank', { button: icon('#operation-circularize', 'pre-text') })
+        );
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id === 'browse') {
+                continueTo(rightClickTank);
+            } else if (mode.id === 'move' || mode.id === 'rotate') {
+                continueTo(retryClickCircle);
+            }
+        });
+
+        context.map().on('move.intro drawn.intro', function() {
+            var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node();
+            if (!wasChanged && !node) { return continueTo(rightClickTank); }
+
+            revealTank(tank,
+                t('intro.buildings.circle_tank', { button: icon('#operation-circularize', 'pre-text') }),
+                { duration: 0 }
+            );
+        });
+
+        context.history().on('change.intro', function() {
+            wasChanged = true;
+            context.history().on('change.intro', null);
+
+            // Something changed.  Wait for transition to complete and check undo annotation.
+            timeout(function() {
+                if (context.history().undoAnnotation() === t('operations.circularize.annotation.area')) {
+                    continueTo(play);
+                } else {
+                    continueTo(retryClickCircle);
+                }
+            }, 500);  // after transitioned actions
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            context.map().on('move.intro drawn.intro', null);
+            context.history().on('change.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function retryClickCircle() {
+        context.enter(modeBrowse(context));
+
+        revealTank(tank, t('intro.buildings.retry_circle'), {
+            buttonText: t('intro.ok'),
+            buttonCallback: function() { continueTo(rightClickTank); }
         });
 
         function continueTo(nextStep) {
@@ -330,7 +608,7 @@ export function uiIntroBuilding(context, reveal) {
         tankId = null;
         context.history().reset('initial');
         context.map().zoom(19).centerEase(house, 500);
-        timeout(addBuilding, 520);
+        timeout(addHouse, 520);
     };