mirror of
https://github.com/FoggedLens/iD.git
synced 2026-04-24 04:36:15 +02:00
Quincy Morgan
656 lines
23 KiB
JavaScript
656 lines
23 KiB
JavaScript
import _debounce from 'lodash-es/debounce';
|
||
|
||
import { dispatch as d3_dispatch } from 'd3-dispatch';
|
||
import {
|
||
event as d3_event,
|
||
select as d3_select,
|
||
selectAll as d3_selectAll
|
||
} from 'd3-selection';
|
||
|
||
import { modeAddArea, modeAddLine, modeAddPoint } from '../../modes';
|
||
import { t, textDirection } from '../../util/locale';
|
||
import { svgIcon } from '../../svg/index';
|
||
import { tooltip } from '../../util/tooltip';
|
||
import { uiTagReference } from '../tag_reference';
|
||
import { uiTooltipHtml } from '../tooltipHtml';
|
||
import { uiPresetFavoriteButton } from '../preset_favorite_button';
|
||
import { uiPresetIcon } from '../preset_icon';
|
||
import { utilKeybinding, utilNoAuto, utilRebind } from '../../util';
|
||
|
||
|
||
export function uiToolSearchAdd(context) {
|
||
|
||
var tool = {
|
||
id: 'search_add',
|
||
label: t('inspector.search')
|
||
};
|
||
|
||
var dispatch = d3_dispatch('choose');
|
||
var presets;
|
||
var searchWrap = d3_select(null),
|
||
search = d3_select(null),
|
||
popover = d3_select(null),
|
||
popoverContent = d3_select(null),
|
||
list = d3_select(null),
|
||
footer = d3_select(null),
|
||
message = d3_select(null);
|
||
|
||
var allowedGeometry = ['area', 'line', 'point', 'vertex'];
|
||
var shownGeometry = [];
|
||
var key = t('modes.add_feature.key');
|
||
|
||
function updateShownGeometry(geom) {
|
||
shownGeometry = geom.sort();
|
||
presets = context.presets().matchAnyGeometry(shownGeometry);
|
||
}
|
||
|
||
function toggleShownGeometry(d) {
|
||
var geom = shownGeometry;
|
||
var index = geom.indexOf(d);
|
||
if (index === -1) {
|
||
geom.push(d);
|
||
if (d === 'point') geom.push('vertex');
|
||
} else {
|
||
geom.splice(index, 1);
|
||
if (d === 'point') geom.splice(geom.indexOf('vertex'), 1);
|
||
}
|
||
updateShownGeometry(geom);
|
||
}
|
||
|
||
function updateFilterButtonsStates() {
|
||
footer.selectAll('button.filter')
|
||
.classed('active', function(d) {
|
||
return shownGeometry.indexOf(d) !== -1;
|
||
});
|
||
}
|
||
|
||
|
||
tool.render = function(selection) {
|
||
updateShownGeometry(allowedGeometry.slice()); // shallow copy
|
||
|
||
searchWrap = selection
|
||
.append('div')
|
||
.attr('class', 'search-wrap')
|
||
.call(tooltip()
|
||
.placement('bottom')
|
||
.html(true)
|
||
.title(function() { return uiTooltipHtml(t('modes.add_feature.description'), key); })
|
||
);
|
||
|
||
search = searchWrap
|
||
.append('input')
|
||
.attr('class', 'search-input')
|
||
.attr('placeholder', t('modes.add_feature.title'))
|
||
.attr('type', 'search')
|
||
.call(utilNoAuto)
|
||
.on('mousedown', function() {
|
||
search.attr('clicking', true);
|
||
})
|
||
.on('mouseup', function() {
|
||
search.attr('clicking', null);
|
||
})
|
||
.on('focus', function() {
|
||
searchWrap.classed('focused', true);
|
||
if (search.attr('clicking')) {
|
||
search.attr('focusing', true);
|
||
search.attr('clicking', null);
|
||
} else {
|
||
search.node().setSelectionRange(0, search.property('value').length);
|
||
}
|
||
popover.classed('hide', false);
|
||
})
|
||
.on('blur', function() {
|
||
searchWrap.classed('focused', false);
|
||
popover.classed('hide', true);
|
||
})
|
||
.on('click', function() {
|
||
if (search.attr('focusing')) {
|
||
search.node().setSelectionRange(0, search.property('value').length);
|
||
search.attr('focusing', null);
|
||
}
|
||
})
|
||
.on('keypress', keypress)
|
||
.on('keydown', keydown)
|
||
.on('input', updateResultsList);
|
||
|
||
searchWrap
|
||
.call(svgIcon('#iD-icon-search', 'search-icon pre-text'));
|
||
|
||
popover = searchWrap
|
||
.append('div')
|
||
.attr('class', 'popover fillL hide')
|
||
.on('mousedown', function() {
|
||
// don't blur the search input (and thus close results)
|
||
d3_event.preventDefault();
|
||
d3_event.stopPropagation();
|
||
});
|
||
|
||
popoverContent = popover
|
||
.append('div')
|
||
.attr('class', 'popover-content');
|
||
|
||
list = popoverContent.append('div')
|
||
.attr('class', 'list');
|
||
|
||
footer = popover
|
||
.append('div')
|
||
.attr('class', 'popover-footer');
|
||
|
||
message = footer.append('div')
|
||
.attr('class', 'message');
|
||
|
||
footer.append('div')
|
||
.attr('class', 'filter-wrap')
|
||
.selectAll('button.filter')
|
||
.data(['point', 'line', 'area'])
|
||
.enter()
|
||
.append('button')
|
||
.attr('class', 'filter active')
|
||
.attr('title', function(d) {
|
||
return t('modes.add_' + d + '.filter_tooltip');
|
||
})
|
||
.each(function(d) {
|
||
d3_select(this).call(svgIcon('#iD-icon-' + d));
|
||
})
|
||
.on('click', function(d) {
|
||
toggleShownGeometry(d);
|
||
if (shownGeometry.length === 0) {
|
||
updateShownGeometry(allowedGeometry.slice()); // shallow copy
|
||
toggleShownGeometry(d);
|
||
}
|
||
updateFilterButtonsStates();
|
||
updateResultsList();
|
||
});
|
||
|
||
context.features()
|
||
.on('change.search-add', updateForFeatureHiddenState);
|
||
|
||
context.keybinding().on(key, function() {
|
||
search.node().focus();
|
||
d3_event.preventDefault();
|
||
d3_event.stopPropagation();
|
||
});
|
||
|
||
var debouncedUpdate = _debounce(updateEnabledState, 500, { leading: true, trailing: true });
|
||
|
||
context.map()
|
||
.on('move.search-add', debouncedUpdate)
|
||
.on('drawn.search-add', debouncedUpdate);
|
||
|
||
updateEnabledState();
|
||
|
||
updateResultsList();
|
||
};
|
||
|
||
tool.uninstall = function() {
|
||
context.keybinding().off(key);
|
||
|
||
context.features()
|
||
.on('change.search-add', null);
|
||
|
||
context.map()
|
||
.on('move.search-add', null)
|
||
.on('drawn.search-add', null);
|
||
};
|
||
|
||
function osmEditable() {
|
||
var mode = context.mode();
|
||
return context.editable() && mode && mode.id !== 'save';
|
||
}
|
||
|
||
function updateEnabledState() {
|
||
var isEnabled = osmEditable();
|
||
searchWrap.classed('disabled', !isEnabled);
|
||
if (!isEnabled) {
|
||
search.node().blur();
|
||
}
|
||
search.attr('disabled', isEnabled ? null : true);
|
||
}
|
||
|
||
function keypress() {
|
||
if (d3_event.keyCode === utilKeybinding.keyCodes.enter) {
|
||
popover.selectAll('.list .list-item.focused button.choose')
|
||
.each(function(d) { d.choose.call(this); });
|
||
d3_event.preventDefault();
|
||
d3_event.stopPropagation();
|
||
}
|
||
}
|
||
|
||
function keydown() {
|
||
|
||
var nextFocus,
|
||
priorFocus,
|
||
parentSubsection;
|
||
if (d3_event.keyCode === utilKeybinding.keyCodes['↓'] ||
|
||
d3_event.keyCode === utilKeybinding.keyCodes.tab && !d3_event.shiftKey) {
|
||
d3_event.preventDefault();
|
||
d3_event.stopPropagation();
|
||
|
||
priorFocus = popover.selectAll('.list .list-item.focused');
|
||
if (priorFocus.empty()) {
|
||
nextFocus = popover.selectAll('.list > .list-item:first-child');
|
||
} else {
|
||
nextFocus = d3_select(priorFocus.nodes()[0].nextElementSibling);
|
||
if (!nextFocus.empty() && !nextFocus.classed('list-item')) {
|
||
nextFocus = nextFocus.selectAll('.list-item:first-child');
|
||
}
|
||
if (nextFocus.empty()) {
|
||
parentSubsection = priorFocus.nodes()[0].closest('.list .subsection');
|
||
if (parentSubsection && parentSubsection.nextElementSibling) {
|
||
nextFocus = d3_select(parentSubsection.nextElementSibling);
|
||
}
|
||
}
|
||
}
|
||
if (!nextFocus.empty()) {
|
||
focusListItem(nextFocus, true);
|
||
priorFocus.classed('focused', false);
|
||
}
|
||
|
||
} else if (d3_event.keyCode === utilKeybinding.keyCodes['↑'] ||
|
||
d3_event.keyCode === utilKeybinding.keyCodes.tab && d3_event.shiftKey) {
|
||
d3_event.preventDefault();
|
||
d3_event.stopPropagation();
|
||
|
||
priorFocus = popover.selectAll('.list .list-item.focused');
|
||
if (!priorFocus.empty()) {
|
||
|
||
nextFocus = d3_select(priorFocus.nodes()[0].previousElementSibling);
|
||
if (!nextFocus.empty() && !nextFocus.classed('list-item')) {
|
||
nextFocus = nextFocus.selectAll('.list-item:last-child');
|
||
}
|
||
if (nextFocus.empty()) {
|
||
parentSubsection = priorFocus.nodes()[0].closest('.list .subsection');
|
||
if (parentSubsection && parentSubsection.previousElementSibling) {
|
||
nextFocus = d3_select(parentSubsection.previousElementSibling);
|
||
}
|
||
}
|
||
if (!nextFocus.empty()) {
|
||
focusListItem(nextFocus, true);
|
||
priorFocus.classed('focused', false);
|
||
}
|
||
}
|
||
} else if (d3_event.keyCode === utilKeybinding.keyCodes.esc) {
|
||
search.node().blur();
|
||
d3_event.preventDefault();
|
||
d3_event.stopPropagation();
|
||
}
|
||
}
|
||
|
||
function updateResultsList() {
|
||
|
||
var value = search.property('value');
|
||
var results;
|
||
if (value.length) {
|
||
results = presets.search(value, shownGeometry).collection;
|
||
} else {
|
||
var recents = context.presets().getRecents();
|
||
recents = recents.filter(function(d) {
|
||
return shownGeometry.indexOf(d.geometry) !== -1;
|
||
});
|
||
results = recents.slice(0, 35);
|
||
}
|
||
|
||
list.call(drawList, results);
|
||
|
||
popover.selectAll('.list .list-item.focused')
|
||
.classed('focused', false);
|
||
focusListItem(popover.selectAll('.list > .list-item:first-child'), false);
|
||
|
||
popoverContent.node().scrollTop = 0;
|
||
|
||
var resultCount = results.length;
|
||
message.text(t('modes.add_feature.' + (resultCount === 1 ? 'result' : 'results'), { count: resultCount }));
|
||
}
|
||
|
||
function focusListItem(selection, scrollingToShow) {
|
||
if (!selection.empty()) {
|
||
selection.classed('focused', true);
|
||
if (scrollingToShow) {
|
||
// scroll to keep the focused item visible
|
||
scrollPopoverToShow(selection);
|
||
}
|
||
}
|
||
}
|
||
|
||
function scrollPopoverToShow(selection) {
|
||
if (selection.empty()) return;
|
||
|
||
var node = selection.nodes()[0];
|
||
var scrollableNode = popoverContent.node();
|
||
|
||
if (node.offsetTop < scrollableNode.scrollTop) {
|
||
scrollableNode.scrollTop = node.offsetTop;
|
||
|
||
} else if (node.offsetTop + node.offsetHeight > scrollableNode.scrollTop + scrollableNode.offsetHeight &&
|
||
node.offsetHeight < scrollableNode.offsetHeight) {
|
||
scrollableNode.scrollTop = node.offsetTop + node.offsetHeight - scrollableNode.offsetHeight;
|
||
}
|
||
}
|
||
|
||
function itemForPreset(preset) {
|
||
if (preset.members) {
|
||
return CategoryItem(preset);
|
||
}
|
||
if (preset.preset && preset.geometry) {
|
||
return AddablePresetItem(preset.preset, preset.geometry);
|
||
}
|
||
var supportedGeometry = preset.geometry.filter(function(geometry) {
|
||
return shownGeometry.indexOf(geometry) !== -1;
|
||
}).sort();
|
||
var vertexIndex = supportedGeometry.indexOf('vertex');
|
||
if (vertexIndex !== -1 && supportedGeometry.indexOf('point') !== -1) {
|
||
// both point and vertex allowed, just show point
|
||
supportedGeometry.splice(vertexIndex, 1);
|
||
}
|
||
if (supportedGeometry.length === 1) {
|
||
return AddablePresetItem(preset, supportedGeometry[0]);
|
||
}
|
||
return MultiGeometryPresetItem(preset, supportedGeometry);
|
||
}
|
||
|
||
function drawList(list, data) {
|
||
|
||
list.selectAll('.subsection.subitems').remove();
|
||
|
||
var dataItems = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var preset = data[i];
|
||
if (i < data.length - 1) {
|
||
var nextPreset = data[i+1];
|
||
// group neighboring presets with the same name
|
||
if (preset.name && nextPreset.name && preset.name() === nextPreset.name()) {
|
||
var groupedPresets = [preset, nextPreset].sort(function(p1, p2) {
|
||
return (p1.geometry[0] < p2.geometry[0]) ? -1 : 1;
|
||
});
|
||
dataItems.push(MultiPresetItem(groupedPresets));
|
||
i++; // skip the next preset since we accounted for it
|
||
continue;
|
||
}
|
||
}
|
||
dataItems.push(itemForPreset(preset));
|
||
}
|
||
|
||
var items = list.selectAll('.list-item')
|
||
.data(dataItems, function(d) { return d.id(); });
|
||
|
||
items.order();
|
||
|
||
items.exit()
|
||
.remove();
|
||
|
||
drawItems(items.enter());
|
||
|
||
list.selectAll('.list-item.expanded')
|
||
.classed('expanded', false)
|
||
.selectAll('.label svg.icon use')
|
||
.attr('href', textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward');
|
||
|
||
updateForFeatureHiddenState();
|
||
}
|
||
|
||
function drawItems(selection) {
|
||
|
||
var item = selection
|
||
.append('div')
|
||
.attr('class', 'list-item')
|
||
.attr('id', function(d) {
|
||
return 'search-add-list-item-preset-' + d.id().replace(/[^a-zA-Z\d:]/g, '-');
|
||
})
|
||
.on('mouseover', function() {
|
||
list.selectAll('.list-item.focused')
|
||
.classed('focused', false);
|
||
d3_select(this)
|
||
.classed('focused', true);
|
||
})
|
||
.on('mouseout', function() {
|
||
d3_select(this)
|
||
.classed('focused', false);
|
||
});
|
||
|
||
var row = item.append('div')
|
||
.attr('class', 'row');
|
||
|
||
row.append('button')
|
||
.attr('class', 'choose')
|
||
.on('click', function(d) {
|
||
d.choose.call(this);
|
||
});
|
||
|
||
row.each(function(d) {
|
||
d3_select(this).call(
|
||
uiPresetIcon(context)
|
||
.geometry(d.geometry)
|
||
.preset(d.preset || d.presets[0])
|
||
.sizeClass('small')
|
||
);
|
||
});
|
||
var label = row.append('div')
|
||
.attr('class', 'label');
|
||
|
||
label.each(function(d) {
|
||
if (d.subitems) {
|
||
d3_select(this)
|
||
.call(svgIcon((textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'), 'inline'));
|
||
}
|
||
});
|
||
|
||
label.each(function(d) {
|
||
// NOTE: split/join on en-dash, not a hypen (to avoid conflict with fr - nl names in Brussels etc)
|
||
d3_select(this)
|
||
.append('div')
|
||
.attr('class', 'label-inner')
|
||
.selectAll('.namepart')
|
||
.data(d.name().split(' – '))
|
||
.enter()
|
||
.append('div')
|
||
.attr('class', 'namepart')
|
||
.text(function(d) { return d; });
|
||
});
|
||
|
||
row.each(function(d) {
|
||
if (d.geometry) {
|
||
var presetFavorite = uiPresetFavoriteButton(d.preset, d.geometry, context, 'accessory');
|
||
d3_select(this).call(presetFavorite.button);
|
||
}
|
||
});
|
||
item.each(function(d) {
|
||
if ((d.geometry && (!d.isSubitem || d.isInNameGroup)) || d.geometries) {
|
||
|
||
var reference = uiTagReference(d.preset.reference(d.geometry || d.geometries[0]), context);
|
||
|
||
var thisItem = d3_select(this);
|
||
thisItem.selectAll('.row').call(reference.button, 'accessory', 'info');
|
||
|
||
var subsection = thisItem
|
||
.append('div')
|
||
.attr('class', 'subsection reference');
|
||
subsection.call(reference.body);
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateForFeatureHiddenState() {
|
||
|
||
var listItem = d3_selectAll('.search-add .popover .list-item');
|
||
|
||
// remove existing tooltips
|
||
listItem.selectAll('button.choose').call(tooltip().destroyAny);
|
||
|
||
listItem.each(function(item, index) {
|
||
if (!item.geometry) return;
|
||
|
||
var hiddenPresetFeaturesId = context.features().isHiddenPreset(item.preset, item.geometry);
|
||
var isHiddenPreset = !!hiddenPresetFeaturesId;
|
||
|
||
var button = d3_select(this).selectAll('button.choose');
|
||
|
||
d3_select(this).classed('disabled', isHiddenPreset);
|
||
button.classed('disabled', isHiddenPreset);
|
||
|
||
if (isHiddenPreset) {
|
||
var isAutoHidden = context.features().autoHidden(hiddenPresetFeaturesId);
|
||
var tooltipIdSuffix = isAutoHidden ? 'zoom' : 'manual';
|
||
var tooltipObj = { features: t('feature.' + hiddenPresetFeaturesId + '.description') };
|
||
button.call(tooltip('dark')
|
||
.html(true)
|
||
.title(t('inspector.hidden_preset.' + tooltipIdSuffix, tooltipObj))
|
||
.placement(index < 2 ? 'bottom' : 'top')
|
||
);
|
||
}
|
||
});
|
||
}
|
||
|
||
function chooseExpandable(item, itemSelection) {
|
||
|
||
var shouldExpand = !itemSelection.classed('expanded');
|
||
|
||
itemSelection.classed('expanded', shouldExpand);
|
||
|
||
var iconName = shouldExpand ?
|
||
'#iD-icon-down' : (textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward');
|
||
itemSelection.selectAll('.label svg.icon use')
|
||
.attr('href', iconName);
|
||
|
||
if (shouldExpand) {
|
||
var subitems = item.subitems();
|
||
var selector = '#' + itemSelection.node().id + ' + *';
|
||
item.subsection = d3_select(itemSelection.node().parentElement).insert('div', selector)
|
||
.attr('class', 'subsection subitems');
|
||
var subitemsEnter = item.subsection.selectAll('.list-item')
|
||
.data(subitems)
|
||
.enter();
|
||
drawItems(subitemsEnter);
|
||
updateForFeatureHiddenState();
|
||
scrollPopoverToShow(item.subsection);
|
||
} else {
|
||
item.subsection.remove();
|
||
}
|
||
}
|
||
|
||
function CategoryItem(preset) {
|
||
var item = {};
|
||
item.id = function() {
|
||
return preset.id;
|
||
};
|
||
item.name = function() {
|
||
return preset.name();
|
||
};
|
||
item.subsection = d3_select(null);
|
||
item.preset = preset;
|
||
item.choose = function() {
|
||
var selection = d3_select(this);
|
||
if (selection.classed('disabled')) return;
|
||
chooseExpandable(item, d3_select(selection.node().closest('.list-item')));
|
||
};
|
||
item.subitems = function() {
|
||
return preset.members.matchAnyGeometry(shownGeometry).collection.map(function(preset) {
|
||
return itemForPreset(preset);
|
||
});
|
||
};
|
||
return item;
|
||
}
|
||
|
||
function MultiPresetItem(presets) {
|
||
var item = {};
|
||
item.id = function() {
|
||
return presets.map(function(preset) { return preset.id; }).join();
|
||
};
|
||
item.name = function() {
|
||
return presets[0].name();
|
||
};
|
||
item.subsection = d3_select(null);
|
||
item.presets = presets;
|
||
item.choose = function() {
|
||
var selection = d3_select(this);
|
||
if (selection.classed('disabled')) return;
|
||
chooseExpandable(item, d3_select(selection.node().closest('.list-item')));
|
||
};
|
||
item.subitems = function() {
|
||
var items = [];
|
||
presets.forEach(function(preset) {
|
||
preset.geometry.filter(function(geometry) {
|
||
return shownGeometry.indexOf(geometry) !== -1;
|
||
}).forEach(function(geometry) {
|
||
items.push(AddablePresetItem(preset, geometry, true, true));
|
||
});
|
||
});
|
||
return items;
|
||
};
|
||
return item;
|
||
}
|
||
|
||
function MultiGeometryPresetItem(preset, geometries) {
|
||
|
||
var item = {};
|
||
item.id = function() {
|
||
return preset.id + geometries;
|
||
};
|
||
item.name = function() {
|
||
return preset.name();
|
||
};
|
||
item.subsection = d3_select(null);
|
||
item.preset = preset;
|
||
item.geometries = geometries;
|
||
item.choose = function() {
|
||
var selection = d3_select(this);
|
||
if (selection.classed('disabled')) return;
|
||
chooseExpandable(item, d3_select(selection.node().closest('.list-item')));
|
||
};
|
||
item.subitems = function() {
|
||
return geometries.map(function(geometry) {
|
||
return AddablePresetItem(preset, geometry, true);
|
||
});
|
||
};
|
||
return item;
|
||
}
|
||
|
||
function AddablePresetItem(preset, geometry, isSubitem, isInNameGroup) {
|
||
var item = {};
|
||
item.id = function() {
|
||
return preset.id + geometry + isSubitem;
|
||
};
|
||
item.name = function() {
|
||
if (isSubitem) {
|
||
if (preset.setTags({}, geometry).building) {
|
||
return t('presets.presets.building.name');
|
||
}
|
||
return t('modes.add_' + context.presets().fallback(geometry).id + '.title');
|
||
}
|
||
return preset.name();
|
||
};
|
||
item.isInNameGroup = isInNameGroup;
|
||
item.isSubitem = isSubitem;
|
||
item.preset = preset;
|
||
item.geometry = geometry;
|
||
item.choose = function() {
|
||
if (d3_select(this).classed('disabled')) return;
|
||
|
||
var markerClass = 'add-preset add-' + geometry +
|
||
' add-preset-' + preset.name().replace(/\s+/g, '_') + '-' + geometry;
|
||
var modeInfo = {
|
||
button: markerClass,
|
||
preset: preset,
|
||
geometry: geometry
|
||
};
|
||
var mode;
|
||
switch (geometry) {
|
||
case 'point':
|
||
case 'vertex':
|
||
mode = modeAddPoint(context, modeInfo);
|
||
break;
|
||
case 'line':
|
||
mode = modeAddLine(context, modeInfo);
|
||
break;
|
||
case 'area':
|
||
mode = modeAddArea(context, modeInfo);
|
||
}
|
||
search.node().blur();
|
||
context.presets().setMostRecent(preset, geometry);
|
||
context.enter(mode);
|
||
};
|
||
return item;
|
||
}
|
||
|
||
return utilRebind(tool, dispatch, 'on');
|
||
}
|