From bd60aceaf0d2d0b857aa0ec3467a170eb33809c5 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 19 May 2016 00:43:01 -0400 Subject: [PATCH] Add tile debugging, redraw when debug flags change --- css/app.css | 60 ++++++++++++++++++++++++++++++++ css/map.css | 22 ------------ js/id/id.js | 4 ++- js/id/renderer/background.js | 4 +-- js/id/renderer/map.js | 2 ++ js/id/renderer/tile_layer.js | 27 +++++++++++++- js/id/ui/map_in_map.js | 4 +-- test/spec/renderer/tile_layer.js | 5 +-- 8 files changed, 98 insertions(+), 30 deletions(-) diff --git a/css/app.css b/css/app.css index 098f28e4d..be7ff6004 100644 --- a/css/app.css +++ b/css/app.css @@ -2258,6 +2258,64 @@ div.full-screen > button:hover { border-radius: 4px; } + +/* Tiles +------------------------------------------------------- */ + +img.tile { + position:absolute; + transform-origin:0 0; + -ms-transform-origin:0 0; + -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -o-transform-origin:0 0; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + opacity: 0; + + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; + -moz-transition: opacity 200ms linear; +} + +.tile-label-debug { + background: rgba(0, 0, 0, 0.7); + color: #fff; + position: absolute; + text-align: center; + width: 128px; + border-radius: 3px; + z-index: 2; + + transform-origin:0 0; + -ms-transform-origin:0 0; + -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -o-transform-origin:0 0; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +img.tile-debug { + border: 1px solid red; +} + +img.tile-loaded { + opacity: 1; +} + +img.tile-removing { + opacity: 0; +} + + /* Map ------------------------------------------------------- */ @@ -2274,6 +2332,7 @@ div.full-screen > button:hover { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; + -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -2309,6 +2368,7 @@ div.full-screen > button:hover { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; + -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; diff --git a/css/map.css b/css/map.css index 57034f496..293a784fa 100644 --- a/css/map.css +++ b/css/map.css @@ -1,25 +1,3 @@ -/* tiles */ -img.tile { - position:absolute; - transform-origin:0 0; - -ms-transform-origin:0 0; - -webkit-transform-origin:0 0; - -moz-transform-origin:0 0; - -o-transform-origin:0 0; - - opacity: 0; - - -webkit-transition: opacity 200ms linear; - transition: opacity 200ms linear; - -moz-transition: opacity 200ms linear; -} - -img.tile-loaded { - opacity: 1; -} -img.tile-removing { - opacity: 0; -} use { pointer-events: none; } diff --git a/js/id/id.js b/js/id/id.js index 38614d748..594bff7d6 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -2,7 +2,7 @@ window.iD = function () { window.locale.en = iD.data.en; window.locale.current('en'); - var dispatch = d3.dispatch('enter', 'exit'), + var dispatch = d3.dispatch('enter', 'exit', 'change'), context = {}; // https://github.com/openstreetmap/iD/issues/772 @@ -220,11 +220,13 @@ window.iD = function () { context.debugTile = function(_) { if (!arguments.length) return debugTile; debugTile = _; + dispatch.change(); return context; }; context.debugCollision = function(_) { if (!arguments.length) return debugCollision; debugCollision = _; + dispatch.change(); return context; }; diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js index cdaf7607f..782f336e0 100644 --- a/js/id/renderer/background.js +++ b/js/id/renderer/background.js @@ -1,6 +1,6 @@ iD.Background = function(context) { var dispatch = d3.dispatch('change'), - baseLayer = iD.TileLayer().projection(context.projection), + baseLayer = iD.TileLayer(context).projection(context.projection), overlayLayers = [], backgroundSources; @@ -138,7 +138,7 @@ iD.Background = function(context) { } } - layer = iD.TileLayer() + layer = iD.TileLayer(context) .source(d) .projection(context.projection) .dimensions(baseLayer.dimensions()); diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 329104dd5..09eeb46a5 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -26,6 +26,8 @@ iD.Map = function(context) { mousemove; function map(selection) { + context + .on('change.map', redraw); context.history() .on('change.map', redraw); context.background() diff --git a/js/id/renderer/tile_layer.js b/js/id/renderer/tile_layer.js index 11863e450..abeb25472 100644 --- a/js/id/renderer/tile_layer.js +++ b/js/id/renderer/tile_layer.js @@ -1,4 +1,4 @@ -iD.TileLayer = function() { +iD.TileLayer = function(context) { var tileSize = 256, tile = d3.geo.tile(), projection, @@ -78,6 +78,7 @@ iD.TileLayer = function() { // rentered when tiles load/error (see #644). function render(selection) { var requests = []; + var showDebug = context.debugTile() && !source.overlay; if (source.validZoom(z)) { tile().forEach(function(d) { @@ -131,6 +132,14 @@ iD.TileLayer = function() { 'scale(' + scale + ',' + scale + ')'; } + function debugTransform(d) { + var _ts = tileSize * Math.pow(2, z - d[2]); + var scale = tileSizeAtZoom(d, z); + return 'translate(' + + ((d[0] * _ts) - tileOrigin[0] + pixelOffset[0] + scale * (tileSize / 4)) + 'px,' + + ((d[1] * _ts) - tileOrigin[1] + pixelOffset[1] + scale * (tileSize / 2)) + 'px)'; + } + var image = selection .selectAll('img') .data(requests, function(d) { return d[3]; }); @@ -155,7 +164,23 @@ iD.TileLayer = function() { image .style(transformProp, imageTransform) + .classed('tile-debug', showDebug) .classed('tile-removing', false); + + + var debug = selection.selectAll('.tile-label-debug') + .data(showDebug ? requests : [], function(d) { return d[3]; }); + + debug.exit() + .remove(); + + debug.enter() + .append('div') + .attr('class', 'tile-label-debug'); + + debug + .text(function(d) { return d[2] + ' / ' + d[0] + ' / ' + d[1]; }) + .style(transformProp, debugTransform); } background.projection = function(_) { diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js index f0a5ead02..ba4f28987 100644 --- a/js/id/ui/map_in_map.js +++ b/js/id/ui/map_in_map.js @@ -2,7 +2,7 @@ iD.ui.MapInMap = function(context) { var key = '/'; function map_in_map(selection) { - var backgroundLayer = iD.TileLayer(), + var backgroundLayer = iD.TileLayer(context), overlayLayers = {}, projection = iD.geo.RawMercator(), gpxLayer = iD.svg.Gpx(projection, context).showLabels(false), @@ -159,7 +159,7 @@ iD.ui.MapInMap = function(context) { var activeOverlayLayers = []; for (var i = 0; i < overlaySources.length; i++) { if (overlaySources[i].validZoom(zMini)) { - if (!overlayLayers[i]) overlayLayers[i] = iD.TileLayer(); + if (!overlayLayers[i]) overlayLayers[i] = iD.TileLayer(context); activeOverlayLayers.push(overlayLayers[i] .source(overlaySources[i]) .projection(projection) diff --git a/test/spec/renderer/tile_layer.js b/test/spec/renderer/tile_layer.js index 69b514f16..66b225292 100644 --- a/test/spec/renderer/tile_layer.js +++ b/test/spec/renderer/tile_layer.js @@ -1,9 +1,10 @@ describe('iD.TileLayer', function() { - var c, d; + var context, d, c; beforeEach(function() { + context = iD(); d = d3.select(document.createElement('div')); - c = iD.TileLayer().projection(d3.geo.mercator()); + c = iD.TileLayer(context).projection(d3.geo.mercator()); }); afterEach(function() {