mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-12 16:52:50 +00:00
Remove support for debug rendering of the community index
We have http://openstreetmap.community now for this, and it eliminates another place in the code where that data would have been needed. This commit also ES6ifies svgDebug.
This commit is contained in:
Bryan Housel
@@ -360,9 +360,6 @@ export function coreContext() {
|
||||
tile: false, // tile boundaries
|
||||
collision: false, // label collision bounding boxes
|
||||
imagery: false, // imagery bounding polygons
|
||||
community: false, // community bounding polygons
|
||||
imperial: false, // imperial (not metric) bounding polygons
|
||||
driveLeft: false, // driveLeft bounding polygons
|
||||
target: false, // touch targets
|
||||
downloaded: false // downloaded data from osm
|
||||
};
|
||||
|
||||
@@ -6,157 +6,138 @@ import { svgPath } from './helpers';
|
||||
|
||||
export function svgDebug(projection, context) {
|
||||
|
||||
function drawDebug(selection) {
|
||||
var showsTile = context.getDebug('tile');
|
||||
var showsCollision = context.getDebug('collision');
|
||||
var showsImagery = context.getDebug('imagery');
|
||||
var showsCommunity = context.getDebug('community');
|
||||
var showsTouchTargets = context.getDebug('target');
|
||||
var showsDownloaded = context.getDebug('downloaded');
|
||||
function drawDebug(selection) {
|
||||
const showTile = context.getDebug('tile');
|
||||
const showCollision = context.getDebug('collision');
|
||||
const showImagery = context.getDebug('imagery');
|
||||
const showTouchTargets = context.getDebug('target');
|
||||
const showDownloaded = context.getDebug('downloaded');
|
||||
|
||||
var debugData = [];
|
||||
if (showsTile) {
|
||||
debugData.push({ class: 'red', label: 'tile' });
|
||||
}
|
||||
if (showsCollision) {
|
||||
debugData.push({ class: 'yellow', label: 'collision' });
|
||||
}
|
||||
if (showsImagery) {
|
||||
debugData.push({ class: 'orange', label: 'imagery' });
|
||||
}
|
||||
if (showsCommunity) {
|
||||
debugData.push({ class: 'blue', label: 'community' });
|
||||
}
|
||||
if (showsTouchTargets) {
|
||||
debugData.push({ class: 'pink', label: 'touchTargets' });
|
||||
}
|
||||
if (showsDownloaded) {
|
||||
debugData.push({ class: 'purple', label: 'downloaded' });
|
||||
}
|
||||
|
||||
|
||||
var legend = d3_select('#content')
|
||||
.selectAll('.debug-legend')
|
||||
.data(debugData.length ? [0] : []);
|
||||
|
||||
legend.exit()
|
||||
.remove();
|
||||
|
||||
legend = legend.enter()
|
||||
.append('div')
|
||||
.attr('class', 'fillD debug-legend')
|
||||
.merge(legend);
|
||||
|
||||
|
||||
var legendItems = legend.selectAll('.debug-legend-item')
|
||||
.data(debugData, function(d) { return d.label; });
|
||||
|
||||
legendItems.exit()
|
||||
.remove();
|
||||
|
||||
legendItems.enter()
|
||||
.append('span')
|
||||
.attr('class', function(d) { return 'debug-legend-item ' + d.class; })
|
||||
.text(function(d) { return d.label; });
|
||||
|
||||
|
||||
var layer = selection.selectAll('.layer-debug')
|
||||
.data(showsImagery || showsCommunity || showsDownloaded ? [0] : []);
|
||||
|
||||
layer.exit()
|
||||
.remove();
|
||||
|
||||
layer = layer.enter()
|
||||
.append('g')
|
||||
.attr('class', 'layer-debug')
|
||||
.merge(layer);
|
||||
|
||||
|
||||
// imagery
|
||||
var extent = context.map().extent();
|
||||
var matchImagery = (showsImagery && data.imagery.query.bbox(extent.rectangle(), true)) || [];
|
||||
var features = matchImagery.map(function(d) { return data.imagery.features[d.id]; });
|
||||
|
||||
var imagery = layer.selectAll('path.debug-imagery')
|
||||
.data(features);
|
||||
|
||||
imagery.exit()
|
||||
.remove();
|
||||
|
||||
imagery.enter()
|
||||
.append('path')
|
||||
.attr('class', 'debug-imagery debug orange');
|
||||
|
||||
|
||||
// community index
|
||||
var community = layer.selectAll('path.debug-community')
|
||||
.data(showsCommunity ? Object.values(data.community.features) : []);
|
||||
|
||||
community.exit()
|
||||
.remove();
|
||||
|
||||
community.enter()
|
||||
.append('path')
|
||||
.attr('class', 'debug-community debug blue');
|
||||
|
||||
|
||||
// downloaded
|
||||
var osm = context.connection();
|
||||
var dataDownloaded = [];
|
||||
|
||||
if (osm) {
|
||||
var rtree = osm.caches('get').tile.rtree;
|
||||
dataDownloaded = rtree.all().map(function(bbox) {
|
||||
return {
|
||||
type: 'Feature',
|
||||
properties: { id: bbox.id },
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [[
|
||||
[ bbox.minX, bbox.minY ],
|
||||
[ bbox.minX, bbox.maxY ],
|
||||
[ bbox.maxX, bbox.maxY ],
|
||||
[ bbox.maxX, bbox.minY ],
|
||||
[ bbox.minX, bbox.minY ]
|
||||
]]
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var downloaded = layer
|
||||
.selectAll('path.debug-downloaded')
|
||||
.data(showsDownloaded ? dataDownloaded : []);
|
||||
|
||||
downloaded.exit()
|
||||
.remove();
|
||||
|
||||
downloaded.enter()
|
||||
.append('path')
|
||||
.attr('class', 'debug-downloaded debug purple');
|
||||
|
||||
|
||||
// update
|
||||
layer.selectAll('path')
|
||||
.attr('d', svgPath(projection).geojson);
|
||||
let debugData = [];
|
||||
if (showTile) {
|
||||
debugData.push({ class: 'red', label: 'tile' });
|
||||
}
|
||||
if (showCollision) {
|
||||
debugData.push({ class: 'yellow', label: 'collision' });
|
||||
}
|
||||
if (showImagery) {
|
||||
debugData.push({ class: 'orange', label: 'imagery' });
|
||||
}
|
||||
if (showTouchTargets) {
|
||||
debugData.push({ class: 'pink', label: 'touchTargets' });
|
||||
}
|
||||
if (showDownloaded) {
|
||||
debugData.push({ class: 'purple', label: 'downloaded' });
|
||||
}
|
||||
|
||||
|
||||
// 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('tile') ||
|
||||
context.getDebug('collision') ||
|
||||
context.getDebug('imagery') ||
|
||||
context.getDebug('target') ||
|
||||
context.getDebug('downloaded');
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
let legend = d3_select('#content')
|
||||
.selectAll('.debug-legend')
|
||||
.data(debugData.length ? [0] : []);
|
||||
|
||||
legend.exit()
|
||||
.remove();
|
||||
|
||||
legend = legend.enter()
|
||||
.append('div')
|
||||
.attr('class', 'fillD debug-legend')
|
||||
.merge(legend);
|
||||
|
||||
|
||||
return drawDebug;
|
||||
let legendItems = legend.selectAll('.debug-legend-item')
|
||||
.data(debugData, d => d.label);
|
||||
|
||||
legendItems.exit()
|
||||
.remove();
|
||||
|
||||
legendItems.enter()
|
||||
.append('span')
|
||||
.attr('class', d => `debug-legend-item ${d.class}`)
|
||||
.text(d => d.label);
|
||||
|
||||
|
||||
let layer = selection.selectAll('.layer-debug')
|
||||
.data(showImagery || showDownloaded ? [0] : []);
|
||||
|
||||
layer.exit()
|
||||
.remove();
|
||||
|
||||
layer = layer.enter()
|
||||
.append('g')
|
||||
.attr('class', 'layer-debug')
|
||||
.merge(layer);
|
||||
|
||||
|
||||
// imagery
|
||||
const extent = context.map().extent();
|
||||
const matchImagery = (showImagery && data.imagery.query.bbox(extent.rectangle(), true)) || [];
|
||||
const features = matchImagery.map(d => data.imagery.features[d.id]);
|
||||
|
||||
let imagery = layer.selectAll('path.debug-imagery')
|
||||
.data(features);
|
||||
|
||||
imagery.exit()
|
||||
.remove();
|
||||
|
||||
imagery.enter()
|
||||
.append('path')
|
||||
.attr('class', 'debug-imagery debug orange');
|
||||
|
||||
|
||||
// downloaded
|
||||
const osm = context.connection();
|
||||
let dataDownloaded = [];
|
||||
if (osm && showDownloaded) {
|
||||
const rtree = osm.caches('get').tile.rtree;
|
||||
dataDownloaded = rtree.all().map(bbox => {
|
||||
return {
|
||||
type: 'Feature',
|
||||
properties: { id: bbox.id },
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [[
|
||||
[ bbox.minX, bbox.minY ],
|
||||
[ bbox.minX, bbox.maxY ],
|
||||
[ bbox.maxX, bbox.maxY ],
|
||||
[ bbox.maxX, bbox.minY ],
|
||||
[ bbox.minX, bbox.minY ]
|
||||
]]
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
let downloaded = layer
|
||||
.selectAll('path.debug-downloaded')
|
||||
.data(showDownloaded ? dataDownloaded : []);
|
||||
|
||||
downloaded.exit()
|
||||
.remove();
|
||||
|
||||
downloaded.enter()
|
||||
.append('path')
|
||||
.attr('class', 'debug-downloaded debug purple');
|
||||
|
||||
// update
|
||||
layer.selectAll('path')
|
||||
.attr('d', svgPath(projection).geojson);
|
||||
}
|
||||
|
||||
|
||||
// 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('tile') ||
|
||||
context.getDebug('collision') ||
|
||||
context.getDebug('imagery') ||
|
||||
context.getDebug('target') ||
|
||||
context.getDebug('downloaded');
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return drawDebug;
|
||||
}
|
||||
|
||||
@@ -53,17 +53,14 @@ describe('iD.coreContext', function() {
|
||||
|
||||
describe('#debug', function() {
|
||||
it('sets and gets debug flags', function() {
|
||||
var context = iD.coreContext(),
|
||||
flags = {
|
||||
tile: false,
|
||||
collision: false,
|
||||
community: false,
|
||||
imagery: false,
|
||||
imperial: false,
|
||||
driveLeft: false,
|
||||
target: false,
|
||||
downloaded: false
|
||||
};
|
||||
var context = iD.coreContext();
|
||||
var flags = {
|
||||
tile: false,
|
||||
collision: false,
|
||||
imagery: false,
|
||||
target: false,
|
||||
downloaded: false
|
||||
};
|
||||
|
||||
expect(context.debugFlags()).to.eql(flags);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user