mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
utilHighlightEntities accept an array instead of calling it in a loop
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user