utilHighlightEntities accept an array instead of calling it in a loop

This commit is contained in:
Bryan Housel
2019-02-11 11:59:58 -05:00
parent 0826050b55
commit a5ffec5665
7 changed files with 77 additions and 108 deletions

View File

@@ -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;

View File

@@ -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();

View File

@@ -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

View File

@@ -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);
});
});

View File

@@ -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')

View File

@@ -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';

View File

@@ -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);
}