CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-14 13:18:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix zoom/pan for the intro curtain

Browse Source 
(closes #2386)
This commit is contained in:
Bryan Housel
2017-03-22 15:57:26 -04:00
parent db39fc6d50
commit 697cef1b06
7 changed files with 55 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/core/context.js
+1
View File
@@ -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)) {
modules/renderer/map.js
+12
View File
@@ -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;
}
modules/ui/intro/area.js
+8 -5
View File
@@ -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);
};
modules/ui/intro/helper.js
+12 -8
View File
@@ -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 '<svg class="icon ' + (svgklass || '') + '">' +
'<use xlink:href="' + name + '"></use></svg>';
}
}
modules/ui/intro/line.js
+8 -6
View File
@@ -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]));
modules/ui/intro/navigation.js
+3 -4
View File
@@ -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')
modules/ui/intro/point.js
+11 -9
View File
@@ -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)