iD/modules/ui/raw_membership_editor.js

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