mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
Avoid reflow in minimap by hardcoding its dimensions
This commit is contained in:
Bryan Housel
@@ -253,23 +253,23 @@ export function rendererTileLayer(context) {
|
||||
}
|
||||
|
||||
|
||||
background.projection = function(_) {
|
||||
background.projection = function(val) {
|
||||
if (!arguments.length) return _projection;
|
||||
_projection = _;
|
||||
_projection = val;
|
||||
return background;
|
||||
};
|
||||
|
||||
|
||||
background.dimensions = function(_) {
|
||||
background.dimensions = function(val) {
|
||||
if (!arguments.length) return tiler.size();
|
||||
tiler.size(_);
|
||||
tiler.size(val);
|
||||
return background;
|
||||
};
|
||||
|
||||
|
||||
background.source = function(_) {
|
||||
background.source = function(val) {
|
||||
if (!arguments.length) return _source;
|
||||
_source = _;
|
||||
_source = val;
|
||||
_tileSize = _source.tileSize;
|
||||
_cache = {};
|
||||
tiler.tileSize(_source.tileSize).zoomExtent(_source.zoomExtent);
|
||||
|
||||
@@ -23,53 +23,55 @@ export function uiMapInMap(context) {
|
||||
.on('start', zoomStarted)
|
||||
.on('zoom', zoomed)
|
||||
.on('end', zoomEnded);
|
||||
var isTransformed = false;
|
||||
var isHidden = true;
|
||||
var skipEvents = false;
|
||||
var gesture = null;
|
||||
var zDiff = 6; // by default, minimap renders at (main zoom - 6)
|
||||
|
||||
var wrap = d3_select(null);
|
||||
var tiles = d3_select(null);
|
||||
var viewport = d3_select(null);
|
||||
var tStart; // transform at start of gesture
|
||||
var tCurr; // transform at most recent event
|
||||
var timeoutId;
|
||||
|
||||
var _isTransformed = false;
|
||||
var _isHidden = true;
|
||||
var _skipEvents = false;
|
||||
var _gesture = null;
|
||||
var _zDiff = 6; // by default, minimap renders at (main zoom - 6)
|
||||
var _dMini; // dimensions of minimap
|
||||
var _cMini; // center pixel of minimap
|
||||
var _tStart; // transform at start of gesture
|
||||
var _tCurr; // transform at most recent event
|
||||
var _timeoutID;
|
||||
|
||||
|
||||
function zoomStarted() {
|
||||
if (skipEvents) return;
|
||||
tStart = tCurr = projection.transform();
|
||||
gesture = null;
|
||||
if (_skipEvents) return;
|
||||
_tStart = _tCurr = projection.transform();
|
||||
_gesture = null;
|
||||
}
|
||||
|
||||
|
||||
function zoomed() {
|
||||
if (skipEvents) return;
|
||||
if (_skipEvents) return;
|
||||
|
||||
var x = d3_event.transform.x;
|
||||
var y = d3_event.transform.y;
|
||||
var k = d3_event.transform.k;
|
||||
var isZooming = (k !== tStart.k);
|
||||
var isPanning = (x !== tStart.x || y !== tStart.y);
|
||||
var isZooming = (k !== _tStart.k);
|
||||
var isPanning = (x !== _tStart.x || y !== _tStart.y);
|
||||
|
||||
if (!isZooming && !isPanning) {
|
||||
return; // no change
|
||||
}
|
||||
|
||||
// lock in either zooming or panning, don't allow both in minimap.
|
||||
if (!gesture) {
|
||||
gesture = isZooming ? 'zoom' : 'pan';
|
||||
if (!_gesture) {
|
||||
_gesture = isZooming ? 'zoom' : 'pan';
|
||||
}
|
||||
|
||||
var tMini = projection.transform();
|
||||
var tX, tY, scale;
|
||||
|
||||
if (gesture === 'zoom') {
|
||||
var dMini = utilGetDimensions(wrap);
|
||||
var cMini = geoVecScale(dMini, 0.5);
|
||||
if (_gesture === 'zoom') {
|
||||
scale = k / tMini.k;
|
||||
tX = (cMini[0] / scale - cMini[0]) * scale;
|
||||
tY = (cMini[1] / scale - cMini[1]) * scale;
|
||||
tX = (_cMini[0] / scale - _cMini[0]) * scale;
|
||||
tY = (_cMini[1] / scale - _cMini[1]) * scale;
|
||||
} else {
|
||||
k = tMini.k;
|
||||
scale = 1;
|
||||
@@ -79,37 +81,33 @@ export function uiMapInMap(context) {
|
||||
|
||||
utilSetTransform(tiles, tX, tY, scale);
|
||||
utilSetTransform(viewport, 0, 0, scale);
|
||||
isTransformed = true;
|
||||
tCurr = d3_zoomIdentity.translate(x, y).scale(k);
|
||||
_isTransformed = true;
|
||||
_tCurr = d3_zoomIdentity.translate(x, y).scale(k);
|
||||
|
||||
var zMain = geoScaleToZoom(context.projection.scale());
|
||||
var zMini = geoScaleToZoom(k);
|
||||
|
||||
zDiff = zMain - zMini;
|
||||
_zDiff = zMain - zMini;
|
||||
|
||||
queueRedraw();
|
||||
}
|
||||
|
||||
|
||||
function zoomEnded() {
|
||||
if (skipEvents) return;
|
||||
if (gesture !== 'pan') return;
|
||||
if (_skipEvents) return;
|
||||
if (_gesture !== 'pan') return;
|
||||
|
||||
updateProjection();
|
||||
gesture = null;
|
||||
var dMini = utilGetDimensions(wrap);
|
||||
var cMini = geoVecScale(dMini, 0.5);
|
||||
context.map().center(projection.invert(cMini)); // recenter main map..
|
||||
_gesture = null;
|
||||
context.map().center(projection.invert(_cMini)); // recenter main map..
|
||||
}
|
||||
|
||||
|
||||
function updateProjection() {
|
||||
var loc = context.map().center();
|
||||
var dMini = utilGetDimensions(wrap);
|
||||
var cMini = geoVecScale(dMini, 0.5);
|
||||
var tMain = context.projection.transform();
|
||||
var zMain = geoScaleToZoom(tMain.k);
|
||||
var zMini = Math.max(zMain - zDiff, 0.5);
|
||||
var zMini = Math.max(zMain - _zDiff, 0.5);
|
||||
var kMini = geoZoomToScale(zMini);
|
||||
|
||||
projection
|
||||
@@ -117,38 +115,36 @@ export function uiMapInMap(context) {
|
||||
.scale(kMini);
|
||||
|
||||
var point = projection(loc);
|
||||
var mouse = (gesture === 'pan') ? geoVecSubtract([tCurr.x, tCurr.y], [tStart.x, tStart.y]) : [0, 0];
|
||||
var xMini = cMini[0] - point[0] + tMain.x + mouse[0];
|
||||
var yMini = cMini[1] - point[1] + tMain.y + mouse[1];
|
||||
var mouse = (_gesture === 'pan') ? geoVecSubtract([_tCurr.x, _tCurr.y], [_tStart.x, _tStart.y]) : [0, 0];
|
||||
var xMini = _cMini[0] - point[0] + tMain.x + mouse[0];
|
||||
var yMini = _cMini[1] - point[1] + tMain.y + mouse[1];
|
||||
|
||||
projection
|
||||
.translate([xMini, yMini])
|
||||
.clipExtent([[0, 0], dMini]);
|
||||
.clipExtent([[0, 0], _dMini]);
|
||||
|
||||
tCurr = projection.transform();
|
||||
_tCurr = projection.transform();
|
||||
|
||||
if (isTransformed) {
|
||||
if (_isTransformed) {
|
||||
utilSetTransform(tiles, 0, 0);
|
||||
utilSetTransform(viewport, 0, 0);
|
||||
isTransformed = false;
|
||||
_isTransformed = false;
|
||||
}
|
||||
|
||||
zoom
|
||||
.scaleExtent([geoZoomToScale(0.5), geoZoomToScale(zMain - 3)]);
|
||||
|
||||
skipEvents = true;
|
||||
wrap.call(zoom.transform, tCurr);
|
||||
skipEvents = false;
|
||||
_skipEvents = true;
|
||||
wrap.call(zoom.transform, _tCurr);
|
||||
_skipEvents = false;
|
||||
}
|
||||
|
||||
|
||||
function redraw() {
|
||||
clearTimeout(timeoutId);
|
||||
if (isHidden) return;
|
||||
clearTimeout(_timeoutID);
|
||||
if (_isHidden) return;
|
||||
|
||||
updateProjection();
|
||||
|
||||
var dMini = utilGetDimensions(wrap);
|
||||
var zMini = geoScaleToZoom(projection.scale());
|
||||
|
||||
// setup tile container
|
||||
@@ -165,7 +161,7 @@ export function uiMapInMap(context) {
|
||||
backgroundLayer
|
||||
.source(context.background().baseLayerSource())
|
||||
.projection(projection)
|
||||
.dimensions(dMini);
|
||||
.dimensions(_dMini);
|
||||
|
||||
var background = tiles
|
||||
.selectAll('.map-in-map-background')
|
||||
@@ -187,7 +183,7 @@ export function uiMapInMap(context) {
|
||||
activeOverlayLayers.push(overlayLayers[i]
|
||||
.source(overlaySources[i])
|
||||
.projection(projection)
|
||||
.dimensions(dMini));
|
||||
.dimensions(_dMini));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,7 +226,7 @@ export function uiMapInMap(context) {
|
||||
|
||||
|
||||
// redraw viewport bounding box
|
||||
if (gesture !== 'pan') {
|
||||
if (_gesture !== 'pan') {
|
||||
var getPath = d3_geoPath(projection);
|
||||
var bbox = { type: 'Polygon', coordinates: [context.map().extent().polygon()] };
|
||||
|
||||
@@ -257,22 +253,22 @@ export function uiMapInMap(context) {
|
||||
|
||||
|
||||
function queueRedraw() {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(function() { redraw(); }, 750);
|
||||
clearTimeout(_timeoutID);
|
||||
_timeoutID = setTimeout(function() { redraw(); }, 750);
|
||||
}
|
||||
|
||||
|
||||
function toggle() {
|
||||
if (d3_event) d3_event.preventDefault();
|
||||
|
||||
isHidden = !isHidden;
|
||||
_isHidden = !_isHidden;
|
||||
|
||||
d3_select('.minimap-toggle-item')
|
||||
.classed('active', !isHidden)
|
||||
.classed('active', !_isHidden)
|
||||
.select('input')
|
||||
.property('checked', !isHidden);
|
||||
.property('checked', !_isHidden);
|
||||
|
||||
if (isHidden) {
|
||||
if (_isHidden) {
|
||||
wrap
|
||||
.style('display', 'block')
|
||||
.style('opacity', '1')
|
||||
@@ -305,11 +301,15 @@ export function uiMapInMap(context) {
|
||||
wrap = wrap.enter()
|
||||
.append('div')
|
||||
.attr('class', 'map-in-map')
|
||||
.style('display', (isHidden ? 'none' : 'block'))
|
||||
.style('display', (_isHidden ? 'none' : 'block'))
|
||||
.call(zoom)
|
||||
.on('dblclick.zoom', null)
|
||||
.merge(wrap);
|
||||
|
||||
// reflow warning: Hardcode dimensions - currently can't resize it anyway..
|
||||
_dMini = [200,150]; //utilGetDimensions(wrap);
|
||||
_cMini = geoVecScale(_dMini, 0.5);
|
||||
|
||||
context.map()
|
||||
.on('drawn.map-in-map', function(drawn) {
|
||||
if (drawn.full === true) {
|
||||
|
||||
Reference in New Issue
Block a user