diff --git a/modules/ui/entity_issues.js b/modules/ui/entity_issues.js index d5a5d332c..4036a2ce5 100644 --- a/modules/ui/entity_issues.js +++ b/modules/ui/entity_issues.js @@ -1,18 +1,12 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; +import { select as d3_selectAll } from 'd3-selection'; -import { - select as d3_selectAll -} from 'd3-selection'; - -import { t } from '../util/locale'; import { svgIcon } from '../svg'; -import { uiDisclosure } from './disclosure'; -import { - utilRebind, - utilHighlightEntity -} from '../util'; +import { t } from '../util/locale'; import { tooltip } from '../util/tooltip'; +import { uiDisclosure } from './disclosure'; import { uiTooltipHtml } from './tooltipHtml'; +import { utilRebind, utilHighlightEntities } from '../util'; export function uiEntityIssues(context) { @@ -21,21 +15,22 @@ export function uiEntityIssues(context) { context.validator().on('reload.entity_issues', issuesDidReload); + function issuesDidReload() { var selection = d3_selectAll('.entity-issues .disclosure-wrap'); renderContent(selection); update(); } + function entityIssues(selection) { - selection.call(uiDisclosure(context, 'entity_issues', true) - .content(renderContent) - ); + selection + .call(uiDisclosure(context, 'entity_issues', true).content(renderContent)); update(); } - function update() { + function update() { var issues = context.validator().getIssuesForEntityWithID(_entityID); d3_selectAll('.entity-issues') @@ -45,14 +40,12 @@ export function uiEntityIssues(context) { .text(t('issues.list_title', { count: issues.length })); } - function renderContent(selection) { + function renderContent(selection) { var issues = context.validator().getIssuesForEntityWithID(_entityID); var items = selection.selectAll('.issue') - .data(issues, function(d) { - return d.id(); - }); + .data(issues, function(d) { return d.id(); }); // Exit items.exit() @@ -61,22 +54,14 @@ export function uiEntityIssues(context) { // Enter var enter = items.enter() .append('div') - .attr('class', function (d) { - return 'issue severity-' + d.severity; - }) + .attr('class', function (d) { return 'issue severity-' + d.severity; }) .on('mouseover.highlight', function(d) { - d.entities.forEach(function(entity) { - if (entity.id !== _entityID) { - utilHighlightEntity(entity.id, true, context); - } - }); + var ids = d.entities.map(function(e) { return e.id; }); + utilHighlightEntities(ids, true, context); }) .on('mouseout.highlight', function(d) { - d.entities.forEach(function(entity) { - if (entity.id !== _entityID) { - utilHighlightEntity(entity.id, false, context); - } - }); + var ids = d.entities.map(function(e) { return e.id; }); + utilHighlightEntities(ids, false, context); }); var label = enter @@ -84,10 +69,7 @@ export function uiEntityIssues(context) { .classed('label', true) .call(tooltip() .html(true) - .title(function(d) { - var tip = d.tooltip ? d.tooltip : ''; - return uiTooltipHtml(tip); - }) + .title(function(d) { return uiTooltipHtml(d.tooltip); }) .placement('top') ); @@ -95,7 +77,7 @@ export function uiEntityIssues(context) { var iconSuffix = d.severity === 'warning' ? 'alert' : 'error'; d3_selectAll(this) .append('div') - .attr('title', t('issues.'+d.severity+'s.icon_tooltip')) + .attr('title', t('issues.' + d.severity + 's.icon_tooltip')) .style('display', 'inline') .call(svgIcon('#iD-icon-' + iconSuffix, 'pre-text')); }); @@ -105,8 +87,8 @@ export function uiEntityIssues(context) { .append('strong') .text(function(d) { return d.message; }); - enter.each(function(d) { + enter.each(function(d) { var issue = d3_selectAll(this); var list = issue @@ -145,21 +127,13 @@ export function uiEntityIssues(context) { fixItems.enter() .append('li') .append('button') - .text(function(d) { - return d.title; - }) - .on('click', function(d) { - d.onClick(); - }) + .text(function(d) {return d.title; }) + .on('click', function(d) { d.onClick(); }) .on('mouseover.highlight', function(d) { - d.entityIds.forEach(function(entityId) { - utilHighlightEntity(entityId, true, context); - }); + utilHighlightEntities(d.entityIds, true, context); }) .on('mouseout.highlight', function(d) { - d.entityIds.forEach(function(entityId) { - utilHighlightEntity(entityId, false, context); - }); + utilHighlightEntities(d.entityIds, false, context); }); } }); @@ -175,6 +149,7 @@ export function uiEntityIssues(context) { } + entityIssues.entityID = function(val) { if (!arguments.length) return _entityID; if (_entityID === val) return entityIssues; diff --git a/modules/ui/issues.js b/modules/ui/issues.js index f23da1cd3..365fa64e5 100644 --- a/modules/ui/issues.js +++ b/modules/ui/issues.js @@ -1,4 +1,3 @@ -import _map from 'lodash-es/map'; import { event as d3_event, select as d3_select @@ -13,15 +12,14 @@ import { uiDisclosure } from './disclosure'; import { uiHelp } from './help'; import { uiMapData } from './map_data'; import { uiTooltipHtml } from './tooltipHtml'; -import { - utilHighlightEntity -} from '../util'; +import { utilHighlightEntities } from '../util'; + export function uiIssues(context) { var key = t('issues.key'); //var _featureApplicabilityList = d3_select(null); - var _errorsList = d3_select(null), - _warningsList = d3_select(null); + var _errorsList = d3_select(null); + var _warningsList = d3_select(null); var pane = d3_select(null); var _shown = false; @@ -137,25 +135,18 @@ export function uiIssues(context) { context.map().zoomTo(d.entities[0]); } if (d.entities) { - context.enter(modeSelect( - context, - _map(d.entities, function(e) { return e.id; }) - )); + var ids = d.entities.map(function(e) { return e.id; }); + context.enter(modeSelect(context, ids)); + utilHighlightEntities(ids, true, context); } - // re-highlight the entities - d.entities.forEach(function(entity) { - utilHighlightEntity(entity.id, true, context); - }); }) .on('mouseover', function(d) { - d.entities.forEach(function(entity) { - utilHighlightEntity(entity.id, true, context); - }); + var ids = d.entities.map(function(e) { return e.id; }); + utilHighlightEntities(ids, true, context); }) .on('mouseout', function(d) { - d.entities.forEach(function(entity) { - utilHighlightEntity(entity.id, false, context); - }); + var ids = d.entities.map(function(e) { return e.id; }); + utilHighlightEntities(ids, false, context); }); var label = enter @@ -188,21 +179,27 @@ export function uiIssues(context) { .merge(enter); } - function renderNoIssuesBox(selection) { - selection.append('div') + function renderNoIssuesBox(selection) { + selection + .append('div') .call(svgIcon('#iD-icon-apply', 'pre-text')); - var noIssuesLabel = selection.append('span'); + var noIssuesLabel = selection + .append('span'); - noIssuesLabel.append('strong') + noIssuesLabel + .append('strong') .text(t('issues.no_issues.message')); - noIssuesLabel.append('br'); + noIssuesLabel + .append('br'); - noIssuesLabel.append('span') + noIssuesLabel + .append('span') .text(t('issues.no_issues.info')); } + /* function showsFeatureApplicability(d) { return context.validator().getFeatureApplicability() === d; @@ -231,14 +228,15 @@ export function uiIssues(context) { .call(drawIssuesList, errors); } + function updateWarningsList() { var warnings = context.validator().getWarnings(); _warningsList .call(drawIssuesList, warnings); } - function update() { + function update() { var errors = context.validator().getErrors(); pane.select('.issues-errors').classed('hide', errors.length === 0); if (errors.length > 0) { @@ -259,7 +257,8 @@ export function uiIssues(context) { } } - pane.select('.issues-none').classed('hide', warnings.length > 0 || errors.length > 0); + pane.select('.issues-none') + .classed('hide', warnings.length > 0 || errors.length > 0); //if (!pane.select('.disclosure-wrap-issues_options').classed('hide')) { // updateFeatureApplicabilityList(); diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js index b45e3b18f..e60d5bbca 100644 --- a/modules/ui/raw_member_editor.js +++ b/modules/ui/raw_member_editor.js @@ -10,12 +10,7 @@ import { osmEntity } from '../osm'; import { svgIcon } from '../svg'; import { services } from '../services'; import { uiCombobox, uiDisclosure } from './index'; -import { - utilDisplayName, - utilDisplayType, - utilNoAuto, - utilHighlightEntity -} from '../util'; +import { utilDisplayName, utilDisplayType, utilHighlightEntities, utilNoAuto } from '../util'; export function uiRawMemberEditor(context) { @@ -37,7 +32,7 @@ export function uiRawMemberEditor(context) { context.map().zoomTo(entity); // highlight the feature in case it wasn't previously on-screen - utilHighlightEntity(d.id, true, context); + utilHighlightEntities([d.id], true, context); } @@ -45,7 +40,7 @@ export function uiRawMemberEditor(context) { d3_event.preventDefault(); // remove the hover-highlight styling - utilHighlightEntity(d.id, false, context); + utilHighlightEntities([d.id], false, context); var entity = context.entity(d.id); var mapExtent = context.map().extent(); @@ -82,7 +77,7 @@ export function uiRawMemberEditor(context) { context.enter(modeBrowse(context)); } - utilHighlightEntity(d.id, false, context); + utilHighlightEntities([d.id], false, context); } @@ -152,10 +147,10 @@ export function uiRawMemberEditor(context) { // highlight the member feature in the map while hovering on the list item item .on('mouseover', function() { - utilHighlightEntity(d.id, true, context); + utilHighlightEntities([d.id], true, context); }) .on('mouseout', function() { - utilHighlightEntity(d.id, false, context); + utilHighlightEntities([d.id], false, context); }); var labelLink = label diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js index b8f19c1d9..5eb4fc828 100644 --- a/modules/ui/raw_membership_editor.js +++ b/modules/ui/raw_membership_editor.js @@ -21,7 +21,7 @@ import { osmEntity, osmRelation } from '../osm'; import { services } from '../services'; import { svgIcon } from '../svg'; import { uiCombobox, uiDisclosure } from './index'; -import { utilDisplayName, utilNoAuto, utilHighlightEntity } from '../util'; +import { utilDisplayName, utilNoAuto, utilHighlightEntities } from '../util'; export function uiRawMembershipEditor(context) { @@ -38,7 +38,7 @@ export function uiRawMembershipEditor(context) { d3_event.preventDefault(); // remove the hover-highlight styling - utilHighlightEntity(d.relation.id, false, context); + utilHighlightEntities([d.relation.id], false, context); context.enter(modeSelect(context, [d.relation.id])); } @@ -194,10 +194,10 @@ export function uiRawMembershipEditor(context) { // highlight the relation in the map while hovering on the list item d3_select(this) .on('mouseover', function() { - utilHighlightEntity(d.relation.id, true, context); + utilHighlightEntities([d.relation.id], true, context); }) .on('mouseout', function() { - utilHighlightEntity(d.relation.id, false, context); + utilHighlightEntities([d.relation.id], false, context); }); }); diff --git a/modules/ui/selection_list.js b/modules/ui/selection_list.js index f7f3a3ee7..0380f856b 100644 --- a/modules/ui/selection_list.js +++ b/modules/ui/selection_list.js @@ -7,7 +7,7 @@ import { t } from '../util/locale'; import { modeSelect } from '../modes'; import { osmEntity } from '../osm'; import { svgIcon } from '../svg'; -import { utilDisplayName, utilHighlightEntity } from '../util'; +import { utilDisplayName, utilHighlightEntities } from '../util'; export function uiSelectionList(context, selectedIDs) { @@ -69,14 +69,13 @@ export function uiSelectionList(context, selectedIDs) { enter .each(function(d) { - // highlight the feature in the map while hovering on the list item - d3_select(this).on('mouseover', function() { - utilHighlightEntity(d.id, true, context); + d3_select(this).on('mouseover', function() { + utilHighlightEntities([d.id], true, context); + }); + d3_select(this).on('mouseout', function() { + utilHighlightEntities([d.id], false, context); + }); }); - d3_select(this).on('mouseout', function() { - utilHighlightEntity(d.id, false, context); - }); - }); var label = enter .append('button') diff --git a/modules/util/index.js b/modules/util/index.js index 3babfc60f..95cd35cc7 100644 --- a/modules/util/index.js +++ b/modules/util/index.js @@ -16,7 +16,7 @@ export { utilGetAllNodes } from './util'; export { utilGetPrototypeOf } from './util'; export { utilGetSetValue } from './get_set_value'; export { utilHashcode } from './util'; -export { utilHighlightEntity } from './util'; +export { utilHighlightEntities } from './util'; export { utilIdleWorker } from './idle_worker'; export { utilKeybinding } from './keybinding'; export { utilNoAuto } from './util'; diff --git a/modules/util/util.js b/modules/util/util.js index 75d70a7b4..68906e888 100644 --- a/modules/util/util.js +++ b/modules/util/util.js @@ -62,6 +62,14 @@ export function utilEntityOrDeepMemberSelector(ids, graph) { } +// Adds or removes highlight styling for the specified entities +export function utilHighlightEntities(ids, highlighted, context) { + context.surface() + .selectAll(utilEntityOrDeepMemberSelector(ids, context.graph())) + .classed('highlighted', highlighted); +} + + export function utilGetAllNodes(ids, graph) { var seen = {}; var nodes = []; @@ -345,10 +353,3 @@ export function utilHashcode(str) { } return hash; } - -// Adds or removes highlight styling for the specified entity's SVG elements in the map. -export function utilHighlightEntity(id, highlighted, context) { - context.surface() - .selectAll(utilEntityOrDeepMemberSelector([id], context.graph())) - .classed('highlighted', highlighted); -}