Add a taginfo combo to the structure type field

modules/ui/fields/radio.js

@@ -1,5 +1,8 @@
 import * as d3 from 'd3';
 import { t } from '../../util/locale';
+import { d3combobox } from '../../lib/d3.combobox.js';
+import { services } from '../../services/index';
+
 import {
     utilGetSetValue,
     utilNoAuto,
@@ -12,6 +15,7 @@ export { uiFieldRadio as uiFieldStructureRadio };
 
 export function uiFieldRadio(field) {
     var dispatch = d3.dispatch('change'),
+        taginfo = services.taginfo,
         placeholder = d3.select(null),
         wrap = d3.select(null),
         labels = d3.select(null),
@@ -20,6 +24,13 @@ export function uiFieldRadio(field) {
         layerInput = d3.select(null);
 
 
+    function selectedKey() {
+        var selector = '.form-field-structure .toggle-list label.active input',
+            node = d3.selectAll(selector);
+        return node && node.datum();
+    }
+
+
     function radio(selection) {
         selection.classed('preset-radio', true);
 
@@ -112,9 +123,17 @@ export function uiFieldRadio(field) {
         typeItem = typeItem
             .merge(typeEnter);
 
-        typeInput = typeItem.selectAll('.structure-input-type')
-            .on('change', changeRadio)
-            .on('blur', changeRadio);
+        typeInput = typeItem.selectAll('.structure-input-type');
+
+        if (taginfo) {
+            typeInput
+                .call(d3combobox().fetcher(typeFetcher));
+        }
+
+        typeInput
+            .on('change', changeType)
+            .on('blur', changeType);
+
 
 
         // Layer
@@ -178,7 +197,44 @@ export function uiFieldRadio(field) {
     }
 
 
+    function typeFetcher(q, callback) {
+        taginfo.values({
+            debounce: (q !== ''),
+            key: selectedKey(),
+            query: q
+        }, function(err, data) {
+            if (err) return;
+            var comboData = data.map(function(d) {
+                // var k = d.value;
+                // var v = snake_case ? unsnake(k) : k;
+                // return {
+                //     key: k,
+                //     value: v,
+                //     title: d.title
+                // };
+                return {
+                    key: d.value,
+                    value: d.value,
+                    title: d.title
+                };
+            });
+            if (callback) callback(comboData);
+        });
+    }
+
+
+    function changeType() {
+        var key = selectedKey(),
+            t = {};
+
+        if (!key) return;
+        t[key] = utilGetSetValue(typeInput);
+        dispatch.call('change', this, t);
+    }
+
+
     function changeLayer() {
+        // note: don't use utilGetSetValue here because we want 0 to be falsy.
         var t = { layer: layerInput.node().value || undefined };
         dispatch.call('change', this, t);
     }

modules/ui/raw_tag_editor.js

@@ -158,13 +158,11 @@ export function uiRawTagEditor(context) {
             .attr('title', function(d) { return d.key; })
             .call(utilGetSetValue, function(d) { return d.key; })
             .property('disabled', isReadOnly);
-            // .classed('deemphasize', isReadOnly);
 
         items.selectAll('input.value')
             .attr('title', function(d) { return d.value; })
             .call(utilGetSetValue, function(d) { return d.value; })
             .property('disabled', isReadOnly);
-            // .classed('deemphasize', isReadOnly);
 
         items.selectAll('button.remove')
             .on('click', removeTag);