From 697cef1b06b712788c4b9b3b0dae6b30eb819e91 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 22 Mar 2017 15:57:26 -0400 Subject: [PATCH] Fix zoom/pan for the intro curtain (closes #2386) --- modules/core/context.js | 1 + modules/renderer/map.js | 12 ++++++++++++ modules/ui/intro/area.js | 13 ++++++++----- modules/ui/intro/helper.js | 20 ++++++++++++-------- modules/ui/intro/line.js | 14 ++++++++------ modules/ui/intro/navigation.js | 7 +++---- modules/ui/intro/point.js | 20 +++++++++++--------- 7 files changed, 55 insertions(+), 32 deletions(-) diff --git a/modules/core/context.js b/modules/core/context.js index 7b80dbadc..354984f94 100644 --- a/modules/core/context.js +++ b/modules/core/context.js @@ -383,6 +383,7 @@ export function coreContext() { context.version = '2.1.3'; context.projection = geoRawMercator(); + context.curtainProjection = geoRawMercator(); locale = utilDetect().locale; if (locale && !dataLocales.hasOwnProperty(locale)) { diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 8c5cc16ff..e99c37590 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -33,6 +33,7 @@ export function rendererMap(context) { var dimensions = [1, 1], dispatch = d3.dispatch('move', 'drawn'), projection = context.projection, + curtainProjection = context.curtainProjection, dblclickEnabled = true, redrawEnabled = true, transformStart = projection.transform(), @@ -323,6 +324,14 @@ export function rendererMap(context) { tX = (eventTransform.x / scale - transformStart.x) * scale, tY = (eventTransform.y / scale - transformStart.y) * scale; + if (context.inIntro()) { + curtainProjection.transform({ + x: eventTransform.x - tX, + y: eventTransform.y - tY, + k: eventTransform.k + }); + } + transformed = true; transformLast = eventTransform; utilSetTransform(supersurface, tX, tY, scale); @@ -339,6 +348,9 @@ export function rendererMap(context) { surface.selectAll('.edit-menu, .radial-menu').interrupt().remove(); utilSetTransform(supersurface, 0, 0); transformed = false; + if (context.inIntro()) { + curtainProjection.transform(projection.transform()); + } return true; } diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 81b4480c8..e2713bfe4 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -17,7 +17,10 @@ export function uiIntroArea(context, reveal) { chapter.enter = function() { var playground = [-85.63552, 41.94159], corner = [-85.63565411045074, 41.9417715536927]; - context.map().centerZoom(playground, 19); + + // context.map().centerZoom(playground, 19); + context.map().zoom(19).centerEase(playground); + reveal('button.add-area', t('intro.areas.add', { button: icon('#icon-area', 'pre-text') }), { tooltipClass: 'intro-areas-add' }); @@ -33,7 +36,7 @@ export function uiIntroArea(context, reveal) { var pointBox = pad(corner, padding, context); reveal(pointBox, t('intro.areas.corner')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { padding = 120 * Math.pow(2, context.map().zoom() - 19); pointBox = pad(corner, padding, context); reveal(pointBox, t('intro.areas.corner'), {duration: 0}); @@ -49,7 +52,7 @@ export function uiIntroArea(context, reveal) { var pointBox = pad(playground, padding, context); reveal(pointBox, t('intro.areas.place')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { padding = 150 * Math.pow(2, context.map().zoom() - 19); pointBox = pad(playground, padding, context); reveal(pointBox, t('intro.areas.place'), {duration: 0}); @@ -59,7 +62,7 @@ export function uiIntroArea(context, reveal) { function enterSelect(mode) { if (mode.id !== 'select') return; - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('enter.intro', null); timeout = setTimeout(function() { @@ -96,7 +99,7 @@ export function uiIntroArea(context, reveal) { context.on('enter.intro', null); context.on('exit.intro', null); context.history().on('change.intro', null); - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); d3.select('.preset-search-input').on('keyup.intro', null); }; diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js index cd2942067..30295368d 100644 --- a/modules/ui/intro/helper.js +++ b/modules/ui/intro/helper.js @@ -1,6 +1,6 @@ -export function pointBox(point, context) { +export function pointBox(loc, context) { var rect = context.surfaceRect(); - point = context.projection(point); + var point = context.curtainProjection(loc); return { left: point[0] + rect.left - 30, top: point[1] + rect.top - 50, @@ -10,15 +10,19 @@ export function pointBox(point, context) { } -export function pad(box, padding, context) { - if (box instanceof Array) { +export function pad(locOrBox, padding, context) { + var box; + if (locOrBox instanceof Array) { var rect = context.surfaceRect(); - box = context.projection(box); + var point = context.curtainProjection(locOrBox); box = { - left: box[0] + rect.left, - top: box[1] + rect.top + left: point[0] + rect.left, + top: point[1] + rect.top }; + } else { + box = locOrBox; } + return { left: box.left - padding, top: box.top - padding, @@ -31,4 +35,4 @@ export function pad(box, padding, context) { export function icon(name, svgklass) { return '' + ''; - } +} diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index fe3f90b55..00ec8cd14 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -35,7 +35,9 @@ export function uiIntroLine(context, reveal) { chapter.enter = function() { - context.map().centerZoom(start, 18); + // context.map().centerZoom(start, 18); + context.map().zoom(18).centerEase(start); + reveal('button.add-line', t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }), { tooltipClass: 'intro-lines-add' }); @@ -52,7 +54,7 @@ export function uiIntroLine(context, reveal) { var pointBox = pad(start, padding, context); reveal(pointBox, t('intro.lines.start')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { padding = 150 * Math.pow(2, context.map().zoom() - 18); pointBox = pad(start, padding, context); reveal(pointBox, t('intro.lines.start'), {duration: 0}); @@ -70,7 +72,7 @@ export function uiIntroLine(context, reveal) { var pointBox = pad(midpoint, padding, context); reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')})); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { padding = 300 * Math.pow(2, context.map().zoom() - 19); pointBox = pad(midpoint, padding, context); reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')}), {duration: 0}); @@ -115,7 +117,7 @@ export function uiIntroLine(context, reveal) { var pointBox = pad(centroid, padding, context); reveal(pointBox, t('intro.lines.finish')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { padding = 900 * Math.pow(2, context.map().zoom() - 19); pointBox = pad(centroid, padding, context); reveal(pointBox, t('intro.lines.finish'), {duration: 0}); @@ -126,7 +128,7 @@ export function uiIntroLine(context, reveal) { function enterSelect(mode) { if (mode.id !== 'select') return; - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('enter.intro', null); d3.select('#curtain').style('pointer-events', 'all'); presetCategory(); @@ -187,7 +189,7 @@ export function uiIntroLine(context, reveal) { timeouts.forEach(window.clearTimeout); context.on('enter.intro', null); context.on('exit.intro', null); - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.history().on('change.intro', null); if (drawId) { context.replace(actionDeleteMultiple([drawId])); diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index 349e41f6a..4b49623a5 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -1,5 +1,4 @@ import * as d3 from 'd3'; -import _ from 'lodash'; import { t } from '../../util/locale'; import { utilRebind } from '../../util/rebind'; import { icon, pointBox } from './helper'; @@ -64,7 +63,7 @@ export function uiIntroNavigation(context, reveal) { set(function() { var box = pointBox(hall.loc, context); reveal(box, t('intro.navigation.select')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { var box = pointBox(hall.loc, context); reveal(box, t('intro.navigation.select'), { duration: 0 }); }); @@ -76,7 +75,7 @@ export function uiIntroNavigation(context, reveal) { if (mode.id !== 'select') return; context.on('enter.intro', null); - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('exit.intro', streetSearch); set(function() { @@ -134,7 +133,7 @@ export function uiIntroNavigation(context, reveal) { chapter.exit = function() { timeouts.forEach(window.clearTimeout); d3.select(window).on('mouseup.intro', null, true); - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('enter.intro', null); context.on('exit.intro', null); d3.select('.search-header input') diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index ff6af98f1..ae80789af 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -26,7 +26,9 @@ export function uiIntroPoint(context, reveal) { chapter.enter = function() { - context.map().centerZoom([-85.63279, 41.94394], 19); + // context.map().centerZoom([-85.63279, 41.94394], 19); + context.map().zoom(19).centerEase([-85.63279, 41.94394]); + reveal('button.add-point', t('intro.points.add', { button: icon('#icon-point', 'pre-text') }), { tooltipClass: 'intro-points-add' }); @@ -43,7 +45,7 @@ export function uiIntroPoint(context, reveal) { var pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.place')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.place'), {duration: 0}); }); @@ -52,7 +54,7 @@ export function uiIntroPoint(context, reveal) { function enterSelect(mode) { if (mode.id !== 'select') return; - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('enter.intro', null); setTimeout(function() { @@ -100,7 +102,7 @@ export function uiIntroPoint(context, reveal) { var pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.reselect')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.reselect'), {duration: 0}); }); @@ -109,7 +111,7 @@ export function uiIntroPoint(context, reveal) { function enterReselect(mode) { if (mode.id !== 'select') return; - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('enter.intro', null); setTimeout(function() { @@ -127,7 +129,7 @@ export function uiIntroPoint(context, reveal) { var pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.rightclick')); - context.map().on('move.intro', function() { + context.map().on('move.intro drawn.intro', function() { pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.rightclick'), {duration: 0}); }); @@ -136,10 +138,10 @@ export function uiIntroPoint(context, reveal) { function enterDelete(mode) { if (mode.id !== 'select') return; - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.on('enter.intro', null); context.on('exit.intro', deletePoint); - context.map().on('move.intro', deletePoint); + context.map().on('move.intro drawn.intro', deletePoint); context.history().on('change.intro', deleted); setTimeout(function() { @@ -169,7 +171,7 @@ export function uiIntroPoint(context, reveal) { timeouts.forEach(window.clearTimeout); context.on('exit.intro', null); context.on('enter.intro', null); - context.map().on('move.intro', null); + context.map().on('move.intro drawn.intro', null); context.history().on('change.intro', null); d3.select('.preset-search-input') .on('keyup.intro', null)