From 7d9b267858c4ebcf472128670ed2e014969fa97c Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 25 Oct 2014 21:57:10 -0400 Subject: [PATCH] Show auto-hidden features as disabled checkboxes with tooltip also rearrange map data panel to put features last --- data/core.yaml | 1 + dist/locales/en.json | 3 +- js/id/renderer/features.js | 21 +++++++---- js/id/ui/map_data.js | 72 ++++++++++++++++++++++++-------------- 4 files changed, 63 insertions(+), 34 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 3f2de3b85..362a49eb6 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -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 diff --git a/dist/locales/en.json b/dist/locales/en.json index 507abc9d9..1e7a82206 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -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": { diff --git a/js/id/renderer/features.js b/js/id/renderer/features.js index ffe4b11a0..734c70bd7 100644 --- a/js/id/renderer/features.js +++ b/js/id/renderer/features.js @@ -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(); diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js index df61e7e37..16d308ad2 100644 --- a/js/id/ui/map_data.js +++ b/js/id/ui/map_data.js @@ -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 += '
' + t('map_data.autohidden') + '
'; + } + 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);