CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-23 12:30:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add dataset debugging

Browse Source 
(re: #3158)
This commit is contained in:
Bryan Housel
2016-06-10 13:40:52 -04:00
parent e22bd1eceb
commit eb19b17fd7
7 changed files with 129 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@@ -166,6 +166,7 @@ dist/iD.js: \
js/id/renderer/tile_layer.js \
js/id/svg.js \
js/id/svg/areas.js \
js/id/svg/debug.js \
js/id/svg/defs.js \
js/id/svg/gpx.js \
js/id/svg/icon.js \

33
css/app.css
View File

@@ -2312,7 +2312,6 @@ img.tile-removing {
/* Map-In-Map
------------------------------------------------------- */
.map-in-map {
position: absolute;
overflow: hidden;
@@ -2338,8 +2337,8 @@ img.tile-removing {
user-select: none;
}
.map-in-map-svg,
.map-in-map-gpx {
.map-in-map-viewport,
.map-in-map-data {
top: 0;
left: 0;
overflow: hidden;
@@ -2347,11 +2346,11 @@ img.tile-removing {
width: 100%;
}
.map-in-map-svg {
.map-in-map-viewport {
position: absolute;
}
.map-in-map-gpx {
.map-in-map-data {
position: relative;
z-index: 10;
}
@@ -2371,19 +2370,23 @@ img.tile-removing {
/* Debug
------------------------------------------------------- */
.debug {
stroke: currentColor;
fill: none;
stroke-width: 2;
shape-rendering: crispEdges;
}
.red { stroke: rgba(255, 0, 0, 0.75); }
.green { stroke: rgba(0, 255, 0, 0.75); }
.blue { stroke: rgba(0, 0, 255, 0.75); }
.yellow { stroke: rgba(255, 255, 0, 0.75); }
.cyan { stroke: rgba(0, 255, 255, 0.75); }
.magenta { stroke: rgba(255, 0, 255, 0.75); }
.orange { stroke: rgba(255, 153, 0, 0.75); }
.pink { stroke: rgba(255, 0, 153, 0.75); }
.purple { stroke: rgba(153, 0, 255, 0.75); }
.map-in-map-data .debug {
stroke-width: 1;
}
.red { color: rgba(255, 0, 0, 0.75); }
.green { color: rgba(0, 255, 0, 0.75); }
.blue { color: rgba(0, 0, 255, 0.75); }
.yellow { color: rgba(255, 255, 0, 0.75); }
.cyan { color: rgba(0, 255, 255, 0.75); }
.magenta { color: rgba(255, 0, 255, 0.75); }
.orange { color: rgba(255, 153, 0, 0.75); }
.pink { color: rgba(255, 0, 153, 0.75); }
.purple { color: rgba(153, 0, 255, 0.75); }
/* Info Box

1
index.html
View File

@@ -61,6 +61,7 @@
<script src="js/id/svg.js"></script>
<script src="js/id/svg/areas.js"></script>
<script src="js/id/svg/debug.js"></script>
<script src="js/id/svg/defs.js"></script>
<script src='js/id/svg/gpx.js'></script>
<script src="js/id/svg/icon.js"></script>

88
js/id/svg/debug.js Normal file
View File

@@ -0,0 +1,88 @@
iD.svg.Debug = function(projection, context) {
function drawDebug(surface) {
var showsImagery = context.getDebug('imagery'),
showsImperial = context.getDebug('imperial'),
showsDriveLeft = context.getDebug('driveLeft'),
enabled = showsImagery || showsImperial || showsDriveLeft,
path = d3.geo.path().projection(projection);
var layer = surface.selectAll('.layer-debug')
.data(enabled ? [0] : []);
layer.enter()
.append('g')
.attr('class', 'layer-debug');
layer.exit()
.remove();
var legend = d3.select('#content')
.selectAll('#debugLegend')
.data(enabled ? [0] : []);
legend.enter()
.append('div')
.attr('id', 'debugLegend')
.attr('class', 'fillD')
.attr('style', 'position:absolute; top:70px; right:80px; padding:5px;');
legend.exit()
.remove();
var imagery = layer.selectAll('path.debug-imagery')
.data(showsImagery ? [] : []); // TODO
imagery.enter()
.append('path')
.attr('class', 'debug-imagery debug orange');
imagery.exit()
.remove();
var imperial = layer
.selectAll('path.debug-imperial')
.data(showsImperial ? [iD.data.imperial] : []);
imperial.enter()
.append('path')
.attr('class', 'debug-imperial debug cyan');
imperial.exit()
.remove();
var driveLeft = layer
.selectAll('path.debug-drive-left')
.data(showsDriveLeft ? [iD.data.driveLeft] : []);
driveLeft.enter()
.append('path')
.attr('class', 'debug-drive-left debug green');
driveLeft.exit()
.remove();
// update
layer.selectAll('path')
.attr('d', path);
}
// This looks strange because `enabled` methods on other layers are
// chainable getter/setters, and this one is just a getter.
drawDebug.enabled = function() {
if (!arguments.length) {
return context.getDebug('imagery') ||
context.getDebug('imperial') ||
context.getDebug('driveLeft');
} else {
return this;
}
};
return drawDebug;
};

3
js/id/svg/layers.js
View File

@@ -5,7 +5,8 @@ iD.svg.Layers = function(projection, context) {
{ id: 'osm', layer: iD.svg.Osm(projection, context, dispatch) },
{ id: 'gpx', layer: iD.svg.Gpx(projection, context, dispatch) },
{ id: 'mapillary-images', layer: iD.svg.MapillaryImages(projection, context, dispatch) },
{ id: 'mapillary-signs', layer: iD.svg.MapillarySigns(projection, context, dispatch) }
{ id: 'mapillary-signs', layer: iD.svg.MapillarySigns(projection, context, dispatch) },
{ id: 'debug', layer: iD.svg.Debug(projection, context, dispatch) }
];

33
js/id/ui/map_in_map.js
View File

@@ -6,6 +6,7 @@ iD.ui.MapInMap = function(context) {
overlayLayers = {},
projection = iD.geo.RawMercator(),
gpxLayer = iD.svg.Gpx(projection, context).showLabels(false),
debugLayer = iD.svg.Debug(projection, context),
zoom = d3.behavior.zoom()
.scaleExtent([ztok(0.5), ztok(24)])
.on('zoom', zoomPan),
@@ -13,7 +14,7 @@ iD.ui.MapInMap = function(context) {
panning = false,
hidden = true,
zDiff = 6, // by default, minimap renders at (main zoom - 6)
tStart, tLast, tCurr, kLast, kCurr, tiles, svg, timeoutId;
tStart, tLast, tCurr, kLast, kCurr, tiles, viewport, timeoutId;
function ztok(z) { return 256 * Math.pow(2, z); }
function ktoz(k) { return Math.log(k) / Math.LN2 - 8; }
@@ -51,7 +52,7 @@ iD.ui.MapInMap = function(context) {
tY = (tCurr[1] / scale - tLast[1]) * scale;
iD.util.setTransform(tiles, tX, tY, scale);
iD.util.setTransform(svg, 0, 0, scale);
iD.util.setTransform(viewport, 0, 0, scale);
transformed = true;
queueRedraw();
@@ -112,7 +113,7 @@ iD.ui.MapInMap = function(context) {
if (transformed) {
iD.util.setTransform(tiles, 0, 0);
iD.util.setTransform(svg, 0, 0);
iD.util.setTransform(viewport, 0, 0);
transformed = false;
}
}
@@ -188,33 +189,35 @@ iD.ui.MapInMap = function(context) {
.remove();
var gpx = tiles
.selectAll('.map-in-map-gpx')
.data(gpxLayer.enabled() ? [0] : []);
var dataLayers = tiles
.selectAll('.map-in-map-data')
.data([0]);
gpx.enter()
dataLayers.enter()
.append('svg')
.attr('class', 'map-in-map-gpx');
.attr('class', 'map-in-map-data');
gpx.exit()
dataLayers.exit()
.remove();
gpx.call(gpxLayer);
dataLayers
.call(gpxLayer)
.call(debugLayer);
// redraw bounding box
// redraw viewport bounding box
if (!panning) {
var getPath = d3.geo.path().projection(projection),
bbox = { type: 'Polygon', coordinates: [context.map().extent().polygon()] };
svg = wrap.selectAll('.map-in-map-svg')
viewport = wrap.selectAll('.map-in-map-viewport')
.data([0]);
svg.enter()
viewport.enter()
.append('svg')
.attr('class', 'map-in-map-svg');
.attr('class', 'map-in-map-viewport');
var path = svg.selectAll('.map-in-map-bbox')
var path = viewport.selectAll('.map-in-map-bbox')
.data([bbox]);
path.enter()

1
test/index.html
View File

@@ -67,6 +67,7 @@
<script src="../js/id/svg.js"></script>
<script src="../js/id/svg/areas.js"></script>
<script src='../js/id/svg/debug.js'></script>
<script src="../js/id/svg/defs.js"></script>
<script src='../js/id/svg/gpx.js'></script>
<script src="../js/id/svg/icon.js"></script>