Show auto-hidden features as disabled checkboxes with tooltip

also rearrange map data panel to put features last
This commit is contained in:
Bryan Housel
2014-10-25 21:57:10 -04:00
parent 094db692ea
commit 7d9b267858
4 changed files with 63 additions and 34 deletions
+1
View File
@@ -253,6 +253,7 @@ en:
show_features: Show Map Features
show_layers: Show Data Layers
fill_area: Fill Areas
autohidden: "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them."
feature:
points:
description: Points
+2 -1
View File
@@ -307,7 +307,8 @@
"description": "Map Data",
"show_features": "Show Map Features",
"show_layers": "Show Data Layers",
"fill_area": "Fill Areas"
"fill_area": "Fill Areas",
"autohidden": "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them."
},
"feature": {
"points": {
+14 -7
View File
@@ -45,6 +45,11 @@ iD.Features = function(context) {
feature = {},
cullFactor = 1;
function update() {
dispatch.change();
dispatch.redraw();
}
function defineFeature(k, filter, max) {
feature[k] = {
filter: filter,
@@ -54,16 +59,11 @@ iD.Features = function(context) {
defaultMax: (max || Infinity),
enable: function() { this.enabled = true; this.currentMax = this.defaultMax; },
disable: function() { this.enabled = false; this.currentMax = 0; },
hidden: function() { return this.count > this.currentMax * cullFactor; }
hidden: function() { return this.count > this.currentMax * cullFactor; },
autoHidden: function() { return this.hidden() && this.currentMax > 0; }
};
}
function update() {
dispatch.change();
dispatch.redraw();
}
defineFeature('points', function(entity) {
return entity.geometry(context.graph()) === 'point';
@@ -181,6 +181,13 @@ iD.Features = function(context) {
return feature[k] && feature[k].hidden();
};
features.autoHidden = function(k) {
if (!arguments.length) {
return _.filter(features.keys(), function(k) { return feature[k].autoHidden(); });
}
return feature[k] && feature[k].autoHidden();
};
features.enable = function(k) {
if (feature[k] && !feature[k].enabled) {
feature[k].enable();
+46 -26
View File
@@ -8,7 +8,11 @@ iD.ui.MapData = function(context) {
function map_data(selection) {
function showsFeature(d) {
return context.features().enabled(d);
return autoHiddenFeature(d) ? null : !context.features().hidden(d);
}
function autoHiddenFeature(d) {
return context.features().autoHidden(d);
}
function clickFeature(d) {
@@ -54,11 +58,16 @@ iD.ui.MapData = function(context) {
.call(bootstrap.tooltip()
.html(true)
.title(function(d) {
return iD.ui.tooltipHtml(
t(name + '.' + d + '.tooltip'), (d === 'wireframe' ? 'W' : null)
);
var tip = t(name + '.' + d + '.tooltip'),
key = (d === 'wireframe' ? 'W' : null);
if (name === 'feature' && autoHiddenFeature(d)) {
tip += '<div>' + t('map_data.autohidden') + '</div>';
}
return iD.ui.tooltipHtml(tip, key);
})
.placement('top'));
.placement('top')
);
var label = enter.append('label');
@@ -76,6 +85,13 @@ iD.ui.MapData = function(context) {
.selectAll('input')
.property('checked', active);
if (name === 'feature') {
items
.selectAll('input')
.property('disabled', autoHiddenFeature)
.property('indeterminate', autoHiddenFeature);
}
//exit
items.exit()
.remove();
@@ -164,25 +180,6 @@ iD.ui.MapData = function(context) {
content.append('h4')
.text(t('map_data.title'));
// feature filters
content.append('a')
.text(t('map_data.show_features'))
.attr('href', '#')
.classed('hide-toggle', true)
.classed('expanded', false)
.on('click', function() {
var exp = d3.select(this).classed('expanded');
featureContainer.style('display', exp ? 'none' : 'block');
d3.select(this).classed('expanded', !exp);
d3.event.preventDefault();
});
var featureContainer = content.append('div')
.attr('class', 'filters')
.style('display', 'none');
var featureList = featureContainer.append('ul')
.attr('class', 'layer-list');
// data layers
content.append('a')
@@ -201,6 +198,7 @@ iD.ui.MapData = function(context) {
.attr('class', 'filters')
.style('display', 'block');
// mapillary
var mapillaryLayerItem = layerContainer.append('ul')
.attr('class', 'layer-list')
.append('li');
@@ -217,6 +215,7 @@ iD.ui.MapData = function(context) {
label.append('span')
.text(t('mapillary.title'));
// gpx
var gpxLayerItem = layerContainer.append('ul')
.style('display', iD.detect().filedrop ? 'block' : 'none')
.attr('class', 'layer-list')
@@ -271,7 +270,7 @@ iD.ui.MapData = function(context) {
.text(t('map_data.fill_area'))
.attr('href', '#')
.classed('hide-toggle', true)
.classed('expanded', true)
.classed('expanded', false)
.on('click', function() {
var exp = d3.select(this).classed('expanded');
fillContainer.style('display', exp ? 'none' : 'block');
@@ -281,12 +280,33 @@ iD.ui.MapData = function(context) {
var fillContainer = content.append('div')
.attr('class', 'filters')
.style('display', 'block');
.style('display', 'none');
var fillList = fillContainer.append('ul')
.attr('class', 'layer-list');
// feature filters
content.append('a')
.text(t('map_data.show_features'))
.attr('href', '#')
.classed('hide-toggle', true)
.classed('expanded', false)
.on('click', function() {
var exp = d3.select(this).classed('expanded');
featureContainer.style('display', exp ? 'none' : 'block');
d3.select(this).classed('expanded', !exp);
d3.event.preventDefault();
});
var featureContainer = content.append('div')
.attr('class', 'filters')
.style('display', 'none');
var featureList = featureContainer.append('ul')
.attr('class', 'layer-list');
context.features()
.on('change.map_data-update', update);