From ec1e5cb50d320c5966eec4d1af2eba7a1fa500f7 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 9 Apr 2017 23:55:13 -0400 Subject: [PATCH] Finish delete lines section of the walkthrough, add selectMenuItem helper --- data/core.yaml | 6 +- dist/locales/en.json | 6 +- modules/ui/intro/building.js | 14 +-- modules/ui/intro/helper.js | 7 ++ modules/ui/intro/line.js | 227 ++++++++++++++++++++--------------- modules/ui/intro/point.js | 4 +- 6 files changed, 149 insertions(+), 115 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 308e583da..aae6c6b26 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -955,9 +955,9 @@ en: rightclick_intersection: "The last real street is {street1}, so we will split {street2} at this intersection and remove everything above it. **Right click on the intersection node**" split_intersection: "**Click on the {button} button to split {street}.**" retry_split: "You didn't click the Split button. Try again." - select_segment_multi: "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**" - select_segment_single: "**Click the top part of {street2} to select it.**" - multi_select: "Let's also select {street1}. You can shift-click to select. **Shift-click on {street2}.**" + did_split_multi: "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**" + did_split_single: "**Click the top part of {street2} to select it.**" + multi_select: "{selected} is now selected. Let's also select {other1}. You can shift-click to select multiple things. **Shift-click on {other2}.**" multi_rightclick: "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**" multi_delete: "**Click on the {button} button to delete the extra lines.**" retry_delete: "You didn't click the Delete button. Try again." diff --git a/dist/locales/en.json b/dist/locales/en.json index 0585f32fb..25e99528d 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -818,9 +818,9 @@ "rightclick_intersection": "The last real street is {street1}, so we will split {street2} at this intersection and remove everything above it. **Right click on the intersection node**", "split_intersection": "**Click on the {button} button to split {street}.**", "retry_split": "You didn't click the Split button. Try again.", - "select_segment_multi": "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**", - "select_segment_single": "**Click the top part of {street2} to select it.**", - "multi_select": "Let's also select {street1}. You can shift-click to select. **Shift-click on {street2}.**", + "did_split_multi": "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**", + "did_split_single": "**Click the top part of {street2} to select it.**", + "multi_select": "{selected} is now selected. Let's also select {other1}. You can shift-click to select multiple things. **Shift-click on {other2}.**", "multi_rightclick": "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**", "multi_delete": "**Click on the {button} button to delete the extra lines.**", "retry_delete": "You didn't click the Delete button. Try again.", diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js index 55aaa0f6f..c2283e26c 100644 --- a/modules/ui/intro/building.js +++ b/modules/ui/intro/building.js @@ -2,7 +2,7 @@ import * as d3 from 'd3'; import { t } from '../../util/locale'; import { modeBrowse } from '../../modes/browse'; import { utilRebind } from '../../util/rebind'; -import { icon, pad } from './helper'; +import { icon, pad, selectMenuItem } from './helper'; export function uiIntroBuilding(context, reveal) { @@ -229,7 +229,7 @@ export function uiIntroBuilding(context, reveal) { if (ids.length !== 1 || ids[0] !== houseId) return; timeout(function() { - var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node(); + var node = selectMenuItem('orthogonalize').node(); if (!node) return; continueTo(clickSquare); }, 300); // after menu visible @@ -257,7 +257,7 @@ export function uiIntroBuilding(context, reveal) { var entity = context.hasEntity(houseId); if (!entity) return continueTo(rightClickHouse); - var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node(); + var node = selectMenuItem('orthogonalize').node(); if (!node) { return continueTo(rightClickHouse); } var wasChanged = false; @@ -275,7 +275,7 @@ export function uiIntroBuilding(context, reveal) { }); context.map().on('move.intro drawn.intro', function() { - var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node(); + var node = selectMenuItem('orthogonalize').node(); if (!wasChanged && !node) { return continueTo(rightClickHouse); } revealHouse(house, @@ -510,7 +510,7 @@ export function uiIntroBuilding(context, reveal) { if (ids.length !== 1 || ids[0] !== tankId) return; timeout(function() { - var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node(); + var node = selectMenuItem('circularize').node(); if (!node) return; continueTo(clickCircle); }, 300); // after menu visible @@ -538,7 +538,7 @@ export function uiIntroBuilding(context, reveal) { var entity = context.hasEntity(tankId); if (!entity) return continueTo(rightClickTank); - var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node(); + var node = selectMenuItem('circularize').node(); if (!node) { return continueTo(rightClickTank); } var wasChanged = false; @@ -556,7 +556,7 @@ export function uiIntroBuilding(context, reveal) { }); context.map().on('move.intro drawn.intro', function() { - var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node(); + var node = selectMenuItem('circularize').node(); if (!wasChanged && !node) { return continueTo(rightClickTank); } revealTank(tank, diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js index eeef881e3..ed3e845e0 100644 --- a/modules/ui/intro/helper.js +++ b/modules/ui/intro/helper.js @@ -1,3 +1,4 @@ +import * as d3 from 'd3'; import { t } from '../../util/locale'; export function pointBox(loc, context) { @@ -92,3 +93,9 @@ export function localize(obj) { return obj; } + +export function selectMenuItem(operation) { + var selector = '.edit-menu .edit-menu-item-' + operation + + ', .radial-menu .radial-menu-item-' + operation; + return d3.select(selector); +} diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 28c2fba74..1259a08c9 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -4,7 +4,7 @@ import { t } from '../../util/locale'; import { geoSphericalDistance } from '../../geo'; import { modeBrowse, modeSelect } from '../../modes'; import { utilRebind } from '../../util/rebind'; -import { icon, pad } from './helper'; +import { icon, pad, selectMenuItem } from './helper'; export function uiIntroLine(context, reveal) { @@ -25,8 +25,10 @@ export function uiIntroLine(context, reveal) { washingtonStreetId = 'w522', twelfthAvenueId = 'w1', eleventhAvenueEndId = 'n3550', + twelfthAvenueEndId = 'n5', washingtonSegmentId = null, eleventhAvenueEnd = context.entity(eleventhAvenueEndId).loc, + twelfthAvenueEnd = context.entity(twelfthAvenueEndId).loc, deleteLinesLoc = [-85.6219395542764, 41.95228033922477], twelfthAvenue = [-85.62219310052491, 41.952505413152956]; @@ -579,10 +581,18 @@ export function uiIntroLine(context, reveal) { { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance } ); }); + + context.history().on('change.intro', function() { + timeout(function() { + continueTo(deleteLines); + }, 500); // after any transition (e.g. if user deleted intersection) + }); + }, 550); function continueTo(nextStep) { context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); nextStep(); } } @@ -590,6 +600,7 @@ export function uiIntroLine(context, reveal) { function rightClickIntersection() { context.history().reset('doneUpdateLine'); + context.enter(modeBrowse(context)); context.map().zoom(18).centerEase(eleventhAvenueEnd, 500); timeout(function() { @@ -614,14 +625,16 @@ export function uiIntroLine(context, reveal) { if (ids.length !== 1 || ids[0] !== eleventhAvenueEndId) return; timeout(function() { - var node = d3.select('.edit-menu-item-split, .radial-menu-item-split').node(); + var node = selectMenuItem('split').node(); if (!node) return; continueTo(splitIntersection); }, 300); // after menu visible }); context.history().on('change.intro', function() { - context.history().reset('doneUpdateLine'); + timeout(function() { + continueTo(deleteLines); + }, 300); // after any transition (e.g. if user deleted intersection) }); }, 550); @@ -642,7 +655,7 @@ export function uiIntroLine(context, reveal) { return continueTo(deleteLines); } - var node = d3.select('.edit-menu-item-split, .radial-menu-item-split').node(); + var node = selectMenuItem('split').node(); if (!node) { return continueTo(rightClickIntersection); } var wasChanged = false; @@ -658,7 +671,7 @@ export function uiIntroLine(context, reveal) { ); context.map().on('move.intro drawn.intro', function() { - var node = d3.select('.edit-menu-item-split, .radial-menu-item-split').node(); + var node = selectMenuItem('split').node(); if (!wasChanged && !node) { return continueTo(rightClickIntersection); } var padding = 60 * Math.pow(2, context.map().zoom() - 18); @@ -671,31 +684,20 @@ export function uiIntroLine(context, reveal) { ); }); - context.on('enter.intro', function(mode) { - if (mode.id === 'browse') { - continueTo(rightClickIntersection); - } - }); - context.history().on('change.intro', function(changed) { wasChanged = true; - context.history().on('change.intro', null); - context.on('enter.intro', null); - - // Something changed. Wait for transition to complete and check undo annotation. timeout(function() { if (context.history().undoAnnotation() === t('operations.split.annotation.line')) { washingtonSegmentId = changed.created()[0].id; - continueTo(singleSelect); + continueTo(didSplit); } else { washingtonSegmentId = null; continueTo(retrySplit); } - }, 500); // after transitioned actions + }, 300); // after any transition (e.g. if user deleted intersection) }); function continueTo(nextStep) { - context.on('enter.intro', null); context.map().on('move.intro drawn.intro', null); context.history().on('change.intro', null); nextStep(); @@ -705,6 +707,7 @@ export function uiIntroLine(context, reveal) { function retrySplit() { context.enter(modeBrowse(context)); + context.map().zoom(18).centerEase(eleventhAvenueEnd, 500); var advance = function() { continueTo(rightClickIntersection); }; var padding = 60 * Math.pow(2, context.map().zoom() - 18); @@ -728,7 +731,7 @@ export function uiIntroLine(context, reveal) { } - function singleSelect() { + function didSplit() { if (!washingtonSegmentId || !context.hasEntity(washingtonSegmentId) || !context.hasEntity(washingtonStreetId) || @@ -739,44 +742,40 @@ export function uiIntroLine(context, reveal) { context.map().zoom(18).centerEase(twelfthAvenue, 400); - timeout(function() { - var ids = context.selectedIDs(); - var string = 'intro.lines.select_segment_' + (ids.length > 1 ? 'multi' : 'single'); + var ids = context.selectedIDs(); + var string = 'intro.lines.did_split_' + (ids.length > 1 ? 'multi' : 'single'); - var street = t('intro.graph.name.washington-street'); + var street = t('intro.graph.name.washington-street'); + var padding = 200 * Math.pow(2, context.map().zoom() - 18); + var box = pad(twelfthAvenue, padding, context); + box.width = box.width / 2; + reveal(box, t(string, { street1: street, street2: street })); + + context.map().on('move.intro drawn.intro', function() { var padding = 200 * Math.pow(2, context.map().zoom() - 18); var box = pad(twelfthAvenue, padding, context); box.width = box.width / 2; - reveal(box, t(string, { street1: street, street2: street })); + reveal(box, t(string, { street1: street, street2: street }), + { duration: 0 } + ); + }); - context.map().on('move.intro drawn.intro', function() { - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - box.width = box.width / 2; - reveal(box, t(string, { street1: street, street2: street }), - { duration: 0 } - ); - }); - - context.on('enter.intro', function() { - var ids = context.selectedIDs(); - if (ids.length === 1 && ids[0] === washingtonSegmentId) { - continueTo(multiSelect); - } - }); - - context.history().on('change.intro', function() { - if (!washingtonSegmentId || - !context.hasEntity(washingtonSegmentId) || - !context.hasEntity(washingtonStreetId) || - !context.hasEntity(twelfthAvenueId) || - !context.hasEntity(eleventhAvenueEndId)) { - return continueTo(rightClickIntersection); - } - }); - - }, 450); + context.on('enter.intro', function() { + var ids = context.selectedIDs(); + if (ids.length === 1 && ids[0] === washingtonSegmentId) { + continueTo(multiSelect); + } + }); + context.history().on('change.intro', function() { + if (!washingtonSegmentId || + !context.hasEntity(washingtonSegmentId) || + !context.hasEntity(washingtonStreetId) || + !context.hasEntity(twelfthAvenueId) || + !context.hasEntity(eleventhAvenueEndId)) { + return continueTo(rightClickIntersection); + } + }); function continueTo(nextStep) { context.map().on('move.intro drawn.intro', null); @@ -796,31 +795,61 @@ export function uiIntroLine(context, reveal) { return continueTo(rightClickIntersection); } + var ids = context.selectedIDs(); + var hasWashington = ids.indexOf(washingtonSegmentId) !== -1; + var hasTwelfth = ids.indexOf(twelfthAvenueId) !== -1; + + if (hasWashington && hasTwelfth) { + return continueTo(multiRightClick); + } else if (!hasWashington && !hasTwelfth) { + return continueTo(didSplit); + } + context.map().zoom(18).centerEase(twelfthAvenue, 400); timeout(function() { - var street = t('intro.graph.name.12th-avenue'); - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - reveal(box, t('intro.lines.multi_select', { street1: street, street2: street })); + var selected, other, padding, box; + if (hasWashington) { + selected = t('intro.graph.name.washington-street'); + other = t('intro.graph.name.12th-avenue'); + padding = 60 * Math.pow(2, context.map().zoom() - 18); + box = pad(twelfthAvenueEnd, padding, context); + box.width *= 3; + } else { + selected = t('intro.graph.name.12th-avenue'); + other = t('intro.graph.name.washington-street'); + padding = 200 * Math.pow(2, context.map().zoom() - 18); + box = pad(twelfthAvenue, padding, context); + box.width /= 2; + } + + reveal(box, + t('intro.lines.multi_select', { selected: selected, other1: other, other2: other }) + ); context.map().on('move.intro drawn.intro', function() { - var padding = 200 * Math.pow(2, context.map().zoom() - 18); - var box = pad(twelfthAvenue, padding, context); - reveal(box, t('intro.lines.multi_select', { street1: street, street2: street }), + if (hasWashington) { + selected = t('intro.graph.name.washington-street'); + other = t('intro.graph.name.12th-avenue'); + padding = 60 * Math.pow(2, context.map().zoom() - 18); + box = pad(twelfthAvenueEnd, padding, context); + box.width *= 3; + } else { + selected = t('intro.graph.name.12th-avenue'); + other = t('intro.graph.name.washington-street'); + padding = 200 * Math.pow(2, context.map().zoom() - 18); + box = pad(twelfthAvenue, padding, context); + box.width /= 2; + } + + reveal(box, + t('intro.lines.multi_select', { selected: selected, other1: other, other2: other }), { duration: 0 } ); }); context.on('enter.intro', function() { - var ids = context.selectedIDs(); - if (ids.length === 2 && - ids.indexOf(twelfthAvenueId) !== -1 && - ids.indexOf(washingtonSegmentId) !== -1) { - return continueTo(multiRightClick); - } else { - return continueTo(singleSelect); - } + continueTo(multiSelect); }); context.history().on('change.intro', function() { @@ -863,22 +892,21 @@ export function uiIntroLine(context, reveal) { }); d3.select(window).on('click.intro contextmenu.intro', function() { - d3.select(window).on('click.intro contextmenu.intro', null, true); - var ids = context.selectedIDs(); - if (ids.length === 2 && - ids.indexOf(twelfthAvenueId) !== -1 && - ids.indexOf(washingtonSegmentId) !== -1) { - timeout(function() { - var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); - if (!node) return; - continueTo(multiDelete); - }, 300); // after menu visible - } else if (ids.length === 1 && - ids.indexOf(washingtonSegmentId) !== -1) { - return continueTo(multiSelect); - } else { - return continueTo(singleSelect); - } + timeout(function() { + var ids = context.selectedIDs(); + if (ids.length === 2 && + ids.indexOf(twelfthAvenueId) !== -1 && + ids.indexOf(washingtonSegmentId) !== -1) { + var node = selectMenuItem('delete').node(); + if (!node) return; + continueTo(multiDelete); + } else if (ids.length === 1 && + ids.indexOf(washingtonSegmentId) !== -1) { + return continueTo(multiSelect); + } else { + return continueTo(didSplit); + } + }, 300); // after edit menu visible }, true); context.history().on('change.intro', function() { @@ -909,33 +937,36 @@ export function uiIntroLine(context, reveal) { return continueTo(rightClickIntersection); } - var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); + var node = selectMenuItem('delete').node(); if (!node) return continueTo(multiRightClick); var padding = 200 * Math.pow(2, context.map().zoom() - 18); var box = pad(twelfthAvenue, padding, context); - reveal(box, t('intro.lines.multi_delete')); + reveal(box, + t('intro.lines.multi_delete', { button: icon('#operation-delete', 'pre-text') }) + ); context.map().on('move.intro drawn.intro', function() { var padding = 200 * Math.pow(2, context.map().zoom() - 18); var box = pad(twelfthAvenue, padding, context); - reveal(box, t('intro.lines.multi_delete'), { duration: 0 }); + reveal(box, + t('intro.lines.multi_delete', { button: icon('#operation-delete', 'pre-text') }), + { duration: 0 } + ); }); context.on('exit.intro', function() { - if (!washingtonSegmentId) { - return continueTo(rightClickIntersection); - } if (context.hasEntity(washingtonSegmentId) || context.hasEntity(twelfthAvenueId)) { - return continueTo(multiRightClick); // roads still exist + return continueTo(multiSelect); // left select mode but roads still exist } }); - context.history().on('change.intro', function(changed) { - if (changed.deleted().length === 2) + context.history().on('change.intro', function() { + if (context.hasEntity(washingtonSegmentId) || context.hasEntity(twelfthAvenueId)) { + continueTo(retryDelete); // changed something but roads still exist + } else { continueTo(play); - else - continueTo(retryDelete); + } }); function continueTo(nextStep) { @@ -954,7 +985,7 @@ export function uiIntroLine(context, reveal) { var box = pad(twelfthAvenue, padding, context); reveal(box, t('intro.lines.retry_delete'), { buttonText: t('intro.ok'), - buttonCallback: function() { continueTo(multiRightClick); } + buttonCallback: function() { continueTo(multiSelect); } }); function continueTo(nextStep) { @@ -976,12 +1007,8 @@ export function uiIntroLine(context, reveal) { chapter.enter = function() { context.history().reset('initial'); - // context.map().zoom(18.5).centerEase(tulipRoadStart); - // addLine(); - -// for testing: -context.history().checkpoint('doneUpdateLine'); -deleteLines(); + context.map().zoom(18.5).centerEase(tulipRoadStart); + addLine(); }; diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index 7f6677942..b5f4ee626 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -1,7 +1,7 @@ import * as d3 from 'd3'; import { t, textDirection } from '../../util/locale'; import { utilRebind } from '../../util/rebind'; -import { icon, pointBox, pad } from './helper'; +import { icon, pointBox, pad, selectMenuItem } from './helper'; export function uiIntroPoint(context, reveal) { @@ -285,7 +285,7 @@ export function uiIntroPoint(context, reveal) { if (ids.length !== 1 || ids[0] !== pointId) return; timeout(function() { - var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); + var node = selectMenuItem('delete').node(); if (!node) return; continueTo(enterDelete); }, 300); // after menu visible