modules/ui/raw_membership_editor.js (334 lines of code) (raw):
import {
event as d3_event,
select as d3_select
} from 'd3-selection';
import { t, textDirection } from '../util/locale';
import { actionAddEntity } from '../actions/add_entity';
import { actionAddMember } from '../actions/add_member';
import { actionChangeMember } from '../actions/change_member';
import { actionDeleteMember } from '../actions/delete_member';
import { modeSelect } from '../modes/select';
import { osmEntity, osmRelation } from '../osm';
import { services } from '../services';
import { svgIcon } from '../svg/icon';
import { uiCombobox } from './combobox';
import { uiDisclosure } from './disclosure';
import { tooltip } from '../util/tooltip';
import { utilArrayGroupBy, utilDisplayName, utilNoAuto, utilHighlightEntities } from '../util';
export function uiRawMembershipEditor(context) {
var taginfo = services.taginfo;
var nearbyCombo = uiCombobox(context, 'parent-relation')
.minItems(1)
.fetcher(fetchNearbyRelations)
.itemsMouseEnter(function(d) {
if (d.relation) utilHighlightEntities([d.relation.id], true, context);
})
.itemsMouseLeave(function(d) {
if (d.relation) utilHighlightEntities([d.relation.id], false, context);
});
var _inChange = false;
var _entityID;
var _showBlank;
function selectRelation(d) {
d3_event.preventDefault();
// remove the hover-highlight styling
utilHighlightEntities([d.relation.id], false, context);
context.enter(modeSelect(context, [d.relation.id]));
}
function changeRole(d) {
if (d === 0) return; // called on newrow (shoudn't happen)
if (_inChange) return; // avoid accidental recursive call #5731
var oldRole = d.member.role;
var newRole = d3_select(this).property('value');
if (oldRole !== newRole) {
_inChange = true;
context.perform(
actionChangeMember(d.relation.id, Object.assign({}, d.member, { role: newRole }), d.index),
t('operations.change_role.annotation')
);
}
_inChange = false;
}
function addMembership(d, role) {
this.blur(); // avoid keeping focus on the button
_showBlank = false;
var member = { id: _entityID, type: context.entity(_entityID).type, role: role };
if (d.relation) {
context.perform(
actionAddMember(d.relation.id, member),
t('operations.add_member.annotation')
);
} else {
var relation = osmRelation();
context.perform(
actionAddEntity(relation),
actionAddMember(relation.id, member),
t('operations.add.annotation.relation')
);
context.enter(modeSelect(context, [relation.id]).newFeature(true));
}
}
function deleteMembership(d) {
this.blur(); // avoid keeping focus on the button
if (d === 0) return; // called on newrow (shoudn't happen)
// remove the hover-highlight styling
utilHighlightEntities([d.relation.id], false, context);
context.perform(
actionDeleteMember(d.relation.id, d.index),
t('operations.delete_member.annotation')
);
}
function fetchNearbyRelations(q, callback) {
var newRelation = { relation: null, value: t('inspector.new_relation') };
var result = [];
var graph = context.graph();
function baseDisplayLabel(entity) {
var matched = context.presets().match(entity, graph);
var presetName = (matched && matched.name()) || t('inspector.relation');
var entityName = utilDisplayName(entity) || '';
return presetName + ' ' + entityName;
}
var explicitRelation = q && context.hasEntity(q.toLowerCase());
if (explicitRelation && explicitRelation.type === 'relation' && explicitRelation.id !== _entityID) {
// loaded relation is specified explicitly, only show that
result.push({
relation: explicitRelation,
value: baseDisplayLabel(explicitRelation) + ' ' + explicitRelation.id
});
} else {
context.intersects(context.extent()).forEach(function(entity) {
if (entity.type !== 'relation' || entity.id === _entityID) return;
var value = baseDisplayLabel(entity);
if (q && (value + ' ' + entity.id).toLowerCase().indexOf(q.toLowerCase()) === -1) return;
result.push({ relation: entity, value: value });
});
result.sort(function(a, b) {
return osmRelation.creationOrder(a.relation, b.relation);
});
// Dedupe identical names by appending relation id - see #2891
var dupeGroups = Object.values(utilArrayGroupBy(result, 'value'))
.filter(function(v) { return v.length > 1; });
dupeGroups.forEach(function(group) {
group.forEach(function(obj) {
obj.value += ' ' + obj.relation.id;
});
});
}
result.forEach(function(obj) {
obj.title = obj.value;
});
result.unshift(newRelation);
callback(result);
}
function rawMembershipEditor(selection) {
var entity = context.entity(_entityID);
var parents = context.graph().parentRelations(entity);
var memberships = [];
parents.slice(0, 1000).forEach(function(relation) {
relation.members.forEach(function(member, index) {
if (member.id === entity.id) {
memberships.push({ relation: relation, member: member, index: index });
}
});
});
var gt = parents.length > 1000 ? '>' : '';
selection.call(uiDisclosure(context, 'raw_membership_editor', true)
.title(t('inspector.all_relations') + ' (' + gt + memberships.length + ')')
.expanded(true)
.updatePreference(false)
.on('toggled', function(expanded) {
if (expanded) { selection.node().parentNode.scrollTop += 200; }
})
.content(content)
);
function content(selection) {
var list = selection.selectAll('.member-list')
.data([0]);
list = list.enter()
.append('ul')
.attr('class', 'member-list')
.merge(list);
var items = list.selectAll('li.member-row-normal')
.data(memberships, function(d) {
return osmEntity.key(d.relation) + ',' + d.index;
});
items.exit()
.each(unbind)
.remove();
// Enter
var itemsEnter = items.enter()
.append('li')
.attr('class', 'member-row member-row-normal form-field');
// highlight the relation in the map while hovering on the list item
itemsEnter.on('mouseover', function(d) {
utilHighlightEntities([d.relation.id], true, context);
})
.on('mouseout', function(d) {
utilHighlightEntities([d.relation.id], false, context);
});
var labelEnter = itemsEnter
.append('label')
.attr('class', 'field-label')
.append('span')
.attr('class', 'label-text')
.append('a')
.attr('href', '#')
.on('click', selectRelation);
labelEnter
.append('span')
.attr('class', 'member-entity-type')
.text(function(d) {
var matched = context.presets().match(d.relation, context.graph());
return (matched && matched.name()) || t('inspector.relation');
});
labelEnter
.append('span')
.attr('class', 'member-entity-name')
.text(function(d) { return utilDisplayName(d.relation); });
var wrapEnter = itemsEnter
.append('div')
.attr('class', 'form-field-input-wrap form-field-input-member');
wrapEnter
.append('input')
.attr('class', 'member-role')
.property('type', 'text')
.attr('maxlength', 255)
.attr('placeholder', t('inspector.role'))
.call(utilNoAuto)
.property('value', function(d) { return d.member.role; })
.on('blur', changeRole)
.on('change', changeRole);
wrapEnter
.append('button')
.attr('tabindex', -1)
.attr('class', 'remove form-field-button member-delete')
.call(svgIcon('#iD-operation-delete'))
.on('click', deleteMembership);
if (taginfo) {
wrapEnter.each(bindTypeahead);
}
var newMembership = list.selectAll('.member-row-new')
.data(_showBlank ? [0] : []);
// Exit
newMembership.exit()
.remove();
// Enter
var newMembershipEnter = newMembership.enter()
.append('li')
.attr('class', 'member-row member-row-new form-field');
newMembershipEnter
.append('label')
.attr('class', 'field-label')
.append('input')
.attr('placeholder', t('inspector.choose_relation'))
.attr('type', 'text')
.attr('class', 'member-entity-input')
.call(utilNoAuto);
var newWrapEnter = newMembershipEnter
.append('div')
.attr('class', 'form-field-input-wrap form-field-input-member');
newWrapEnter
.append('input')
.attr('class', 'member-role')
.property('type', 'text')
.attr('maxlength', 255)
.attr('placeholder', t('inspector.role'))
.call(utilNoAuto);
newWrapEnter
.append('button')
.attr('tabindex', -1)
.attr('class', 'remove form-field-button member-delete')
.call(svgIcon('#iD-operation-delete'))
.on('click', function() {
list.selectAll('.member-row-new')
.remove();
});
// Update
newMembership = newMembership
.merge(newMembershipEnter);
newMembership.selectAll('.member-entity-input')
.on('blur', cancelEntity) // if it wasn't accepted normally, cancel it
.call(nearbyCombo
.on('accept', acceptEntity)
.on('cancel', cancelEntity)
);
// Container for the Add button
var addRow = selection.selectAll('.add-row')
.data([0]);
// enter
var addRowEnter = addRow.enter()
.append('div')
.attr('class', 'add-row');
var addRelationButton = addRowEnter
.append('button')
.attr('class', 'add-relation');
addRelationButton
.call(svgIcon('#iD-icon-plus', 'light'));
addRelationButton
.call(tooltip().title(t('inspector.add_to_relation')).placement(textDirection === 'ltr' ? 'right' : 'left'));
addRowEnter
.append('div')
.attr('class', 'space-value'); // preserve space
addRowEnter
.append('div')
.attr('class', 'space-buttons'); // preserve space
// update
addRow = addRow
.merge(addRowEnter);
addRow.select('.add-relation')
.on('click', function() {
_showBlank = true;
content(selection);
list.selectAll('.member-entity-input').node().focus();
});
function acceptEntity(d) {
if (!d) {
cancelEntity();
return;
}
// remove hover-higlighting
if (d.relation) utilHighlightEntities([d.relation.id], false, context);
var role = list.selectAll('.member-row-new .member-role').property('value');
addMembership(d, role);
}
function cancelEntity() {
var input = newMembership.selectAll('.member-entity-input');
input.property('value', '');
// remove hover-higlighting
context.surface().selectAll('.highlighted')
.classed('highlighted', false);
}
function bindTypeahead(d) {
var row = d3_select(this);
var role = row.selectAll('input.member-role');
var origValue = role.property('value');
function sort(value, data) {
var sameletter = [];
var other = [];
for (var i = 0; i < data.length; i++) {
if (data[i].value.substring(0, value.length) === value) {
sameletter.push(data[i]);
} else {
other.push(data[i]);
}
}
return sameletter.concat(other);
}
role.call(uiCombobox(context, 'member-role')
.fetcher(function(role, callback) {
var rtype = d.relation.tags.type;
taginfo.roles({
debounce: true,
rtype: rtype || '',
geometry: context.geometry(_entityID),
query: role
}, function(err, data) {
if (!err) callback(sort(role, data));
});
})
.on('cancel', function() {
role.property('value', origValue);
})
);
}
function unbind() {
var row = d3_select(this);
row.selectAll('input.member-role')
.call(uiCombobox.off);
}
}
}
rawMembershipEditor.entityID = function(val) {
if (!arguments.length) return _entityID;
_entityID = val;
_showBlank = false;
return rawMembershipEditor;
};
return rawMembershipEditor;
}