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