CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-01 16:08:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update selection list items on history changes

Browse Source 
This is necessary for handling undos/redos during
multiselection. For example: change a feature's preset
or name, select the feature and some others, undo: the
selection list should update to display the former
preset type and former name.

While here, I removed the object indirection and bound
entities directly, and I removed hover effects (since
the features are selected, you can't see the hover).
This commit is contained in:
John Firebaugh
2013-10-17 12:35:09 -04:00
parent 9557d8f130
commit 1f51098c95
1 changed files with 25 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/id/ui/selection_list.js
+25 -56
View File
@@ -15,84 +15,53 @@ iD.ui.SelectionList = function(context, selectedIDs) {
var list = listWrap.append('div')
.attr('class', 'feature-list cf');
context.history().on('change.selection-list', drawList);
drawList();
function features() {
var entities = {},
result = [],
graph = context.graph();
function addEntity(entity) {
var name = iD.util.displayName(entity) || '';
result.push({
id: entity.id,
entity: entity,
geometry: context.geometry(entity.id),
type: context.presets().match(entity, graph).name(),
name: name
});
}
for (var i = 0; i < selectedIDs.length; i++) {
addEntity(context.entity(selectedIDs[i]));
}
return result;
}
function drawList() {
var results = features();
var entities = selectedIDs
.map(function(id) { return context.hasEntity(id); })
.filter(function(entity) { return entity; });
var items = list.selectAll('.feature-list-item')
.data(results, function(d) { return d.id; });
.data(entities, iD.Entity.key);
var enter = items.enter().insert('button', '.geocode-item')
var enter = items.enter().append('button')
.attr('class', 'feature-list-item')
.on('mouseover', mouseover)
.on('mouseout', mouseout)
.on('click', click);
.on('click', function(entity) {
context.enter(iD.modes.Select(context, [entity.id]));
});
// Enter
var label = enter.append('div')
.attr('class', 'label');
label.append('span')
.attr('class', function(d) { return d.geometry + ' icon icon-pre-text'; });
.attr('class', 'icon icon-pre-text');
label.append('span')
.attr('class', 'entity-type')
.text(function(d) { return d.type; });
.attr('class', 'entity-type');
label.append('span')
.attr('class', 'entity-name')
.text(function(d) { return d.name; });
.attr('class', 'entity-name');
enter.style('opacity', 0)
.transition()
.style('opacity', 1);
// Update
items.order();
items.selectAll('.icon')
.attr('class', function(entity) { return context.geometry(entity.id) + ' icon icon-pre-text'; });
items.selectAll('.entity-type')
.text(function(entity) { return context.presets().match(entity, context.graph()).name(); });
items.selectAll('.entity-name')
.text(function(entity) { return iD.util.displayName(entity); });
// Exit
items.exit()
.remove();
}
function mouseover(d) {
context.surface().selectAll(iD.util.entityOrMemberSelector([d.id], context.graph()))
.classed('hover', true);
}
function mouseout() {
context.surface().selectAll('.hover')
.classed('hover', false);
}
function click(d) {
if (d.entity) {
context.enter(iD.modes.Select(context, [d.entity.id]));
} else {
context.loadEntity(d.id);
}
}
}
return selectionList;