diff --git a/data/core.yaml b/data/core.yaml index a7597fffb..a904dfa20 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -13,6 +13,7 @@ en: undo_redo: Undo / Redo recent: Recent favorites: Favorites + add_feature: Add Feature modes: add_feature: title: Add a feature diff --git a/dist/locales/en.json b/dist/locales/en.json index 7957500dd..cb12edff6 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -14,7 +14,8 @@ "inspect": "Inspect", "undo_redo": "Undo / Redo", "recent": "Recent", - "favorites": "Favorites" + "favorites": "Favorites", + "add_feature": "Add Feature" }, "modes": { "add_feature": { diff --git a/modules/ui/preset_favorite_button.js b/modules/ui/preset_favorite_button.js index 3fd84898e..06481ad28 100644 --- a/modules/ui/preset_favorite_button.js +++ b/modules/ui/preset_favorite_button.js @@ -16,8 +16,8 @@ export function uiPresetFavoriteButton(preset, geom, context, klass) { presetFavorite.button = function(selection) { - - var canFavorite = geom !== 'relation' && preset.searchable !== false; + // disable favoriting for now + var canFavorite = false;//geom !== 'relation' && preset.searchable !== false; _button = selection.selectAll('.preset-favorite-button') .data(canFavorite ? [0] : []); diff --git a/modules/ui/tools/index.js b/modules/ui/tools/index.js index 28391185d..b8ff9aaa5 100644 --- a/modules/ui/tools/index.js +++ b/modules/ui/tools/index.js @@ -1,5 +1,6 @@ export * from './add_favorite'; export * from './add_recent'; +export * from './modes'; export * from './notes'; export * from './save'; export * from './search_add'; diff --git a/modules/ui/tools/modes.js b/modules/ui/tools/modes.js new file mode 100644 index 000000000..c92c88ad9 --- /dev/null +++ b/modules/ui/tools/modes.js @@ -0,0 +1,161 @@ +import _debounce from 'lodash-es/debounce'; + +import { select as d3_select } from 'd3-selection'; + +import { + modeAddArea, + modeAddLine, + modeAddPoint, + modeBrowse +} from '../../modes'; + +import { t } from '../../util/locale'; +import { svgIcon } from '../../svg'; +import { tooltip } from '../../util/tooltip'; +import { uiTooltipHtml } from '../tooltipHtml'; + +export function uiToolOldDrawModes(context) { + + var tool = { + id: 'old_modes', + label: t('toolbar.add_feature') + }; + + var modes = [ + modeAddPoint(context, { + title: t('modes.add_point.title'), + button: 'point', + description: t('modes.add_point.description'), + preset: context.presets().item('point'), + key: '1' + }), + modeAddLine(context, { + title: t('modes.add_line.title'), + button: 'line', + description: t('modes.add_line.description'), + preset: context.presets().item('line'), + key: '2' + }), + modeAddArea(context, { + title: t('modes.add_area.title'), + button: 'area', + description: t('modes.add_area.description'), + preset: context.presets().item('area'), + key: '3' + }) + ]; + + + function enabled() { + return osmEditable(); + } + + function osmEditable() { + var mode = context.mode(); + return context.editable() && mode && mode.id !== 'save'; + } + + modes.forEach(function(mode) { + context.keybinding().on(mode.key, function() { + if (!enabled(mode)) return; + + if (mode.id === context.mode().id) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); + } + }); + }); + + tool.render = function(selection) { + + var wrap = selection + .append('div') + .attr('class', 'joined') + .style('display', 'flex'); + + context + .on('enter.editor', function(entered) { + selection.selectAll('button.add-button') + .classed('active', function(mode) { return entered.button === mode.button; }); + context.container() + .classed('mode-' + entered.id, true); + }); + + context + .on('exit.editor', function(exited) { + context.container() + .classed('mode-' + exited.id, false); + }); + + + var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true }); + + context.map() + .on('move.modes', debouncedUpdate) + .on('drawn.modes', debouncedUpdate); + + context + .on('enter.modes', update); + + update(); + + + function update() { + + var buttons = wrap.selectAll('button.add-button') + .data(modes, function(d) { return d.id; }); + + // exit + buttons.exit() + .remove(); + + // enter + var buttonsEnter = buttons.enter() + .append('button') + .attr('tabindex', -1) + .attr('class', function(d) { return d.id + ' add-button bar-button'; }) + .on('click.mode-buttons', function(d) { + if (!enabled(d)) return; + + // When drawing, ignore accidental clicks on mode buttons - #4042 + var currMode = context.mode().id; + if (/^draw/.test(currMode)) return; + + if (d.id === currMode) { + context.enter(modeBrowse(context)); + } else { + context.enter(d); + } + }) + .call(tooltip() + .placement('bottom') + .html(true) + .title(function(d) { return uiTooltipHtml(d.description, d.key); }) + ); + + buttonsEnter + .each(function(d) { + d3_select(this) + .call(svgIcon('#iD-icon-' + d.button)); + }); + + buttonsEnter + .append('span') + .attr('class', 'label') + .text(function(mode) { return mode.title; }); + + // if we are adding/removing the buttons, check if toolbar has overflowed + if (buttons.enter().size() || buttons.exit().size()) { + context.ui().checkOverflow('#bar', true); + } + + // update + buttons = buttons + .merge(buttonsEnter) + .classed('disabled', function(d) { return !enabled(d); }); + } + }; + + return tool; +} diff --git a/modules/ui/top_toolbar.js b/modules/ui/top_toolbar.js index 85f0bcf23..dde877b7d 100644 --- a/modules/ui/top_toolbar.js +++ b/modules/ui/top_toolbar.js @@ -4,15 +4,16 @@ import { } from 'd3-selection'; import _debounce from 'lodash-es/debounce'; -import { uiToolAddFavorite, uiToolAddRecent, uiToolNotes, uiToolSave, uiToolSearchAdd, uiToolSidebarToggle, uiToolUndoRedo } from './tools'; +import { /*uiToolAddFavorite, uiToolAddRecent, uiToolSearchAdd, */ uiToolOldDrawModes, uiToolNotes, uiToolSave, uiToolSidebarToggle, uiToolUndoRedo } from './tools'; export function uiTopToolbar(context) { var sidebarToggle = uiToolSidebarToggle(context), - searchAdd = uiToolSearchAdd(context), - addFavorite = uiToolAddFavorite(context), - addRecent = uiToolAddRecent(context), + modes = uiToolOldDrawModes(context), + //searchAdd = uiToolSearchAdd(context), + //addFavorite = uiToolAddFavorite(context), + //addRecent = uiToolAddRecent(context), notes = uiToolNotes(context), undoRedo = uiToolUndoRedo(context), save = uiToolSave(context); @@ -39,16 +40,17 @@ export function uiTopToolbar(context) { var tools = [ sidebarToggle, 'spacer', - searchAdd + modes + // searchAdd ]; - + /* if (context.presets().getFavorites().length > 0) { tools.push(addFavorite); } if (addRecent.shouldShow()) { tools.push(addRecent); - } + }*/ tools.push('spacer');