diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index f4cbc9946..7ad9d7f8c 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -9,7 +9,14 @@ import { icon, pad } from './helper'; export function uiIntroLine(context, reveal) { var dispatch = d3.dispatch('done'), - timeouts = []; + timeouts = [], + centroid = [-85.62830, 41.95699], + midpoint = [-85.62975395449628, 41.95787501510204], + start = [-85.6297754121684, 41.95805253325314], + intersection = [-85.62974496187628, 41.95742515554585], + targetId = 'w17965351', + drawId = null; + var step = { title: 'intro.lines.title' @@ -28,11 +35,6 @@ export function uiIntroLine(context, reveal) { step.enter = function() { - var centroid = [-85.62830, 41.95699]; - var midpoint = [-85.62975395449628, 41.95787501510204]; - var start = [-85.6297754121684, 41.95805253325314]; - var intersection = [-85.62974496187628, 41.95742515554585]; - context.map().centerZoom(start, 18); reveal('button.add-line', t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }), @@ -43,6 +45,7 @@ export function uiIntroLine(context, reveal) { function addLine(mode) { if (mode.id !== 'add-line') return; + drawId = null; context.on('enter.intro', drawLine); var padding = 150 * Math.pow(2, context.map().zoom() - 18); @@ -59,7 +62,8 @@ export function uiIntroLine(context, reveal) { function drawLine(mode) { if (mode.id !== 'draw-line') return; - context.history().on('change.intro', addIntersection); + drawId = mode.selectedIDs()[0]; + context.history().on('change.intro', checkIntersection); context.on('enter.intro', retry); var padding = 300 * Math.pow(2, context.map().zoom() - 19); @@ -77,23 +81,33 @@ export function uiIntroLine(context, reveal) { // ended line before creating intersection function retry(mode) { if (mode.id !== 'select') return; - var pointBox = pad(intersection, 30, context), - ids = mode.selectedIDs(); + context.history().on('change.intro', null); + var pointBox = pad(intersection, 30, context); reveal(pointBox, t('intro.lines.restart', {name: t('intro.graph.flower_st')})); d3.select(window).on('mousedown.intro', eventCancel, true); - timeout(function() { - context.replace(actionDeleteMultiple(ids)); - step.exit(); - step.enter(); - }, 3000); + timeout(step.restart, 3000); } - function addIntersection(changes) { - if ( _.some(changes.created(), function(d) { - return d.type === 'node' && context.graph().parentWays(d).length > 1; - })) { + function checkIntersection() { + + function joinedTargetWay() { + var drawEntity = drawId && context.hasEntity(drawId); + if (!drawEntity) { + step.restart(); + return false; + } + + var drawNodes = context.graph().childNodes(drawEntity); + return _.some(drawNodes, function(node) { + return _.some(context.graph().parentWays(node), function(parent) { + return parent.id === targetId; + }); + }); + } + + if (joinedTargetWay()) { context.history().on('change.intro', null); context.on('enter.intro', enterSelect); @@ -115,7 +129,6 @@ export function uiIntroLine(context, reveal) { context.map().on('move.intro', null); context.on('enter.intro', null); d3.select('#curtain').style('pointer-events', 'all'); - presetCategory(); } @@ -162,6 +175,12 @@ export function uiIntroLine(context, reveal) { }; + step.restart = function() { + step.exit(); + step.enter(); + }; + + step.exit = function() { d3.select(window).on('mousedown.intro', null, true); d3.select('#curtain').style('pointer-events', 'none'); @@ -170,6 +189,10 @@ export function uiIntroLine(context, reveal) { context.on('exit.intro', null); context.map().on('move.intro', null); context.history().on('change.intro', null); + if (drawId) { + context.replace(actionDeleteMultiple([drawId])); + drawId = null; + } }; return utilRebind(step, dispatch, 'on');