mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-22 00:07:03 +02:00
523a467836
Generalize tooltip into popover control Use the same popover control for tooltip as the preset browser and tools list popovers Smartly position the preset browser popover and menu bar tooltips to stay fully onscreen Position most tooltips closer to their controls Fix small gap that could appear between a tooltip and its arrow Allow wider toolbar tooltips
115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
|
|
import {
|
|
event as d3_event,
|
|
select as d3_select
|
|
} from 'd3-selection';
|
|
|
|
import _debounce from 'lodash-es/debounce';
|
|
import { /*uiToolAddFavorite, uiToolAddRecent, uiToolSearchAdd, */ uiToolOldDrawModes, uiToolNotes, uiToolSave, uiToolSidebarToggle, uiToolUndoRedo } from './tools';
|
|
|
|
|
|
export function uiTopToolbar(context) {
|
|
|
|
var sidebarToggle = uiToolSidebarToggle(context),
|
|
modes = uiToolOldDrawModes(context),
|
|
//searchAdd = uiToolSearchAdd(context),
|
|
//addFavorite = uiToolAddFavorite(context),
|
|
//addRecent = uiToolAddRecent(context),
|
|
notes = uiToolNotes(context),
|
|
undoRedo = uiToolUndoRedo(context),
|
|
save = uiToolSave(context);
|
|
|
|
function notesEnabled() {
|
|
var noteLayer = context.layers().layer('notes');
|
|
return noteLayer && noteLayer.enabled();
|
|
}
|
|
|
|
function topToolbar(bar) {
|
|
|
|
bar.on('wheel.topToolbar', function() {
|
|
if (!d3_event.deltaX) {
|
|
// translate vertical scrolling into horizontal scrolling in case
|
|
// the user doesn't have an input device that can scroll horizontally
|
|
bar.node().scrollLeft += d3_event.deltaY;
|
|
}
|
|
});
|
|
|
|
var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
|
|
context.layers()
|
|
.on('change.topToolbar', debouncedUpdate);
|
|
|
|
context.presets()
|
|
.on('favoritePreset.topToolbar', update)
|
|
.on('recentsChange.topToolbar', update);
|
|
|
|
update();
|
|
|
|
function update() {
|
|
|
|
var tools = [
|
|
sidebarToggle,
|
|
'spacer',
|
|
modes
|
|
// searchAdd
|
|
];
|
|
/*
|
|
if (context.presets().getFavorites().length > 0) {
|
|
tools.push(addFavorite);
|
|
}
|
|
|
|
if (addRecent.shouldShow()) {
|
|
tools.push(addRecent);
|
|
}*/
|
|
|
|
tools.push('spacer');
|
|
|
|
if (notesEnabled()) {
|
|
tools = tools.concat([notes, 'spacer']);
|
|
}
|
|
|
|
tools = tools.concat([undoRedo, save]);
|
|
|
|
var toolbarItems = bar.selectAll('.toolbar-item')
|
|
.data(tools, function(d) {
|
|
return d.id || d;
|
|
});
|
|
|
|
toolbarItems.exit()
|
|
.each(function(d) {
|
|
if (d.uninstall) {
|
|
d.uninstall();
|
|
}
|
|
})
|
|
.remove();
|
|
|
|
var itemsEnter = toolbarItems
|
|
.enter()
|
|
.append('div')
|
|
.attr('class', function(d) {
|
|
var classes = 'toolbar-item ' + (d.id || d).replace('_', '-');
|
|
if (d.klass) classes += ' ' + d.klass;
|
|
return classes;
|
|
});
|
|
|
|
var actionableItems = itemsEnter.filter(function(d) { return d !== 'spacer'; });
|
|
|
|
actionableItems
|
|
.append('div')
|
|
.attr('class', 'item-content')
|
|
.each(function(d) {
|
|
d3_select(this).call(d.render, bar);
|
|
});
|
|
|
|
actionableItems
|
|
.append('div')
|
|
.attr('class', 'item-label')
|
|
.text(function(d) {
|
|
return d.label;
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
return topToolbar;
|
|
}
|