Add house tracing steps to building chapter

This commit is contained in:
Bryan Housel
2017-04-02 23:05:02 -04:00
parent b923a6d8e0
commit 0af9df708f
3 changed files with 98 additions and 20 deletions
+1 -1
View File
@@ -873,7 +873,7 @@ en:
continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details. Finish the building shape by clicking on the starting node. **Continue tracing the building.**"
choose_building: "**Select Building from the list**"
choose_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the House building type**"
close: "**Hit escape, return, or click the {button} button to close the feature editor**"
close: "**Hit escape, or click the {button} button to close the feature editor**"
rightclick_building: "**Right-click to select the building you created.**"
square_building: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**"
done_square: "See how the corners of the building moved into place? Let's learn another useful trick."
+2 -2
View File
@@ -724,7 +724,7 @@
"finish": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed. When you are finished drawing, click on the last node again. **Finish drawing the road.**",
"road": "**Select Road from the list**",
"residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**",
"describe": "**Name the road, then hit escape or click the {button} button to close the feature editor.**",
"describe": "**Name the road, then hit escape, return, or click the {button} button to close the feature editor.**",
"restart": "The road needs to intersect {name}. Let's try again!",
"wrong_preset": "You didn't select the Residential road type. **Click here to choose again**",
"play": "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
@@ -736,7 +736,7 @@
"continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details. Finish the building shape by clicking on the starting node. **Continue tracing the building.**",
"choose_building": "**Select Building from the list**",
"choose_house": "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the House building type**",
"close": "**Hit escape, return, or click the {button} button to close the feature editor**",
"close": "**Hit escape, or click the {button} button to close the feature editor**",
"rightclick_building": "**Right-click to select the building you created.**",
"square_building": "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**",
"done_square": "See how the corners of the building moved into place? Let's learn another useful trick.",
+95 -17
View File
@@ -54,20 +54,25 @@ export function uiIntroBuilding(context, reveal) {
return chapter.restart();
}
var padding = 120 * Math.pow(2, context.map().zoom() - 19);
var box = pad(house, padding, context);
reveal(box, t('intro.buildings.start_building'));
context.map().zoomEase(20, 500);
context.map().on('move.intro drawn.intro', function() {
padding = 120 * Math.pow(2, context.map().zoom() - 19);
box = pad(house, padding, context);
reveal(box, t('intro.buildings.start_building'), { duration: 0 });
});
timeout(function() {
var padding = 160 * Math.pow(2, context.map().zoom() - 20);
var box = pad(house, padding, context);
reveal(box, t('intro.buildings.start_building'));
context.on('enter.intro', function(mode) {
if (mode.id !== 'draw-area') return chapter.restart();
continueTo(drawBuilding);
});
context.map().on('move.intro drawn.intro', function() {
padding = 160 * Math.pow(2, context.map().zoom() - 20);
box = pad(house, padding, context);
reveal(box, t('intro.buildings.start_building'), { duration: 0 });
});
context.on('enter.intro', function(mode) {
if (mode.id !== 'draw-area') return chapter.restart();
continueTo(drawBuilding);
});
}, 520); // after easing
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -82,12 +87,12 @@ export function uiIntroBuilding(context, reveal) {
return chapter.restart();
}
var padding = 150 * Math.pow(2, context.map().zoom() - 19);
var padding = 160 * Math.pow(2, context.map().zoom() - 20);
var box = pad(house, padding, context);
reveal(box, t('intro.buildings.continue_building'));
context.map().on('move.intro drawn.intro', function() {
padding = 150 * Math.pow(2, context.map().zoom() - 19);
padding = 160 * Math.pow(2, context.map().zoom() - 20);
box = pad(house, padding, context);
reveal(box, t('intro.buildings.continue_building'), {duration: 0});
});
@@ -96,7 +101,7 @@ export function uiIntroBuilding(context, reveal) {
if (mode.id === 'draw-area')
return;
else if (mode.id === 'select')
return continueTo(play);
return continueTo(chooseBuildingCategory);
else
return chapter.restart();
});
@@ -109,6 +114,79 @@ export function uiIntroBuilding(context, reveal) {
}
function chooseBuildingCategory() {
if (context.mode().id !== 'select') {
return chapter.restart();
}
context.on('exit.intro', function() {
return chapter.restart();
});
var button = d3.select('.preset-category-building .preset-list-button');
if (button.empty()) return chapter.restart();
timeout(function() {
reveal(button.node(), t('intro.buildings.choose_building'));
button.on('click.intro', function() { continueTo(chooseHouse); });
}, 500);
function continueTo(nextStep) {
d3.select('.preset-list-button').on('click.intro', null);
context.on('exit.intro', null);
nextStep();
}
}
function chooseHouse() {
if (context.mode().id !== 'select') {
return chapter.restart();
}
context.on('exit.intro', function() {
return chapter.restart();
});
var button = d3.select('.preset-building-house .preset-list-button');
if (button.empty()) return chapter.restart();
timeout(function() {
reveal(button.node(), t('intro.buildings.choose_house'));
button.on('click.intro', function() { continueTo(closeEditor); });
}, 500);
function continueTo(nextStep) {
d3.select('.preset-list-button').on('click.intro', null);
context.on('exit.intro', null);
nextStep();
}
}
function closeEditor() {
if (context.mode().id !== 'select') {
return chapter.restart();
}
context.on('exit.intro', function() {
continueTo(play);
});
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 play() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-startEditing',
@@ -122,8 +200,8 @@ export function uiIntroBuilding(context, reveal) {
chapter.enter = function() {
context.history().reset('initial');
context.map().zoom(19).centerEase(house);
addBuilding();
context.map().zoom(19).centerEase(house, 500);
timeout(addBuilding, 520);
};