diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js index 86599ab0e..5faac400e 100644 --- a/modules/ui/entity_editor.js +++ b/modules/ui/entity_editor.js @@ -37,7 +37,6 @@ export function EntityEditor(context) { var header = selection.selectAll('.header') .data([0]); - // Enter var enter = header.enter() .append('div') .attr('class', 'header fillL cf'); @@ -45,6 +44,7 @@ export function EntityEditor(context) { enter .append('button') .attr('class', 'fl preset-reset preset-choose') + .on('click', function() { dispatch.call('choose', this, activePreset); }) .append('span') .html('◄'); @@ -55,19 +55,13 @@ export function EntityEditor(context) { .call(Icon(modified ? '#icon-apply' : '#icon-close')); enter - .append('h3'); - - // Update - header - .merge(enter) - .select('h3') + .append('h3') .text(t('inspector.edit')); var body = selection.selectAll('.inspector-body') .data([0]); - // Enter enter = body.enter() .append('div') .attr('class', 'inspector-body'); @@ -150,6 +144,10 @@ export function EntityEditor(context) { .entityID(id)); + context.history() + .on('change.entity-editor', historyChanged); + + function historyChanged() { if (state === 'hide') return; @@ -161,9 +159,6 @@ export function EntityEditor(context) { entityEditor.modified(base !== graph); entityEditor(selection); } - - context.history() - .on('change.entity-editor', historyChanged); } diff --git a/modules/ui/inspector.js b/modules/ui/inspector.js index 7b35b83cf..98fba062b 100644 --- a/modules/ui/inspector.js +++ b/modules/ui/inspector.js @@ -58,11 +58,12 @@ export function Inspector(context) { var footer = selection.selectAll('.footer') .data([0]); - footer.enter() + footer = footer.enter() .append('div') - .attr('class', 'footer'); + .attr('class', 'footer') + .merge(footer); - selection.selectAll('.footer') + footer .call(ViewOnOSM(context).entityID(entityID)); diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index d56840ab8..06a772c3a 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -57,12 +57,11 @@ export function RawTagEditor(context) { newTag.enter() .append('button') .attr('class', 'add-tag') - .call(Icon('#icon-plus', 'light')) - .merge(newTag) - .on('click', addTag); + .on('click', addTag) + .call(Icon('#icon-plus', 'light')); - var items = list.selectAll('li') + var items = list.selectAll('.tag-row') .data(entries, function(d) { return d.key; }); items.exit() @@ -81,7 +80,9 @@ export function RawTagEditor(context) { .append('input') .property('type', 'text') .attr('class', 'key') - .attr('maxlength', 255); + .attr('maxlength', 255) + .on('blur', keyChange) + .on('change', keyChange); enter .append('div') @@ -89,7 +90,10 @@ export function RawTagEditor(context) { .append('input') .property('type', 'text') .attr('class', 'value') - .attr('maxlength', 255); + .attr('maxlength', 255) + .on('blur', valueChange) + .on('change', valueChange) + .on('keydown.push-more', pushMore); enter .append('button') @@ -97,19 +101,30 @@ export function RawTagEditor(context) { .attr('class', 'remove minor') .call(Icon('#operation-delete')); - if (context.taginfo()) { - enter.each(bindTypeahead); - } // Update - items = items.merge(enter); - items.order(); + items = items + .merge(enter) + .sort(function(a, b) { + return (a.key === '') ? 1 + : (b.key === '') ? -1 + : d3.ascending(a.key, b.key); + }); items .each(function(tag) { + var row = d3.select(this), + key = row.select('input.key'), // propagate bound data to child + value = row.select('input.value'); // propagate bound data to child + + if (context.taginfo()) { + bindTypeahead(key, value); + } + var isRelation = (context.entity(id).type === 'relation'), reference; + if (isRelation && tag.key === 'type') { reference = TagReference({rtype: tag.value}, context); } else { @@ -120,25 +135,18 @@ export function RawTagEditor(context) { reference.showing(false); } - d3.select(this) + row .call(reference.button) .call(reference.body); }); - getSetValue(items.selectAll('input.key') + items.selectAll('input.key') .attr('title', function(d) { return d.key; }) - .on('blur', keyChange) - .on('change', keyChange), - function(d) { return d.key; } - ); + .call(getSetValue, function(d) { return d.key; }); - getSetValue(items.selectAll('input.value') + items.selectAll('input.value') .attr('title', function(d) { return d.value; }) - .on('blur', valueChange) - .on('change', valueChange) - .on('keydown.push-more', pushMore), - function(d) { return d.value; } - ); + .call(getSetValue, function(d) { return d.value; }); items.selectAll('button.remove') .on('click', removeTag); @@ -152,10 +160,7 @@ export function RawTagEditor(context) { } - function bindTypeahead() { - var row = d3.select(this), - key = row.selectAll('input.key'), - value = row.selectAll('input.value'); + function bindTypeahead(key, value) { function sort(value, data) { var sameletter = [], diff --git a/modules/util/get_set_value.js b/modules/util/get_set_value.js index 7137d5141..86da9b47b 100644 --- a/modules/util/get_set_value.js +++ b/modules/util/get_set_value.js @@ -29,5 +29,6 @@ export function getSetValue(selection, value) { if (arguments.length === 1) { return selection.property('value'); } + return selection.each(d3_selection_value(value)); }