Break modes toolbar item into add favorites and add recent items

data/core.yaml

@@ -12,6 +12,7 @@ en:
     inspect: Inspect
     undo_redo: Undo / Redo
     recent: Recent
+    favorites: Favorites
   modes:
     add_feature:
       title: Add a feature

dist/locales/en.json

@@ -13,7 +13,8 @@
         "toolbar": {
             "inspect": "Inspect",
             "undo_redo": "Undo / Redo",
-            "recent": "Recent"
+            "recent": "Recent",
+            "favorites": "Favorites"
         },
         "modes": {
             "add_feature": {

modules/ui/tools/add_favorite.js

@@ -0,0 +1,303 @@
+import _debounce from 'lodash-es/debounce';
+
+import { drag as d3_drag } from 'd3-drag';
+import { event as d3_event, select as d3_select } from 'd3-selection';
+
+import { modeAddArea, modeAddLine, modeAddPoint, modeBrowse } from '../../modes';
+import { t, textDirection } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { uiPresetIcon } from '../preset_icon';
+import { uiTooltipHtml } from '../tooltipHtml';
+
+
+export function uiToolAddFavorite(context) {
+
+    var tool = {
+        id: 'add_favorite',
+        klass: 'modes',
+        label: t('toolbar.favorites')
+    };
+
+    function enabled() {
+        return osmEditable();
+    }
+
+    function osmEditable() {
+        var mode = context.mode();
+        return context.editable() && mode && mode.id !== 'save';
+    }
+
+    function toggleMode(d) {
+        if (!enabled(d)) return;
+
+        if (d.button === context.mode().button) {
+            context.enter(modeBrowse(context));
+        } else {
+            if (d.preset) {
+                context.presets().setMostRecent(d.preset, d.geometry);
+            }
+            context.enter(d);
+        }
+    }
+
+
+    tool.render = function(selection) {
+        context
+            .on('enter.editor.favorite', 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.favorite', function(exited) {
+                context.container()
+                    .classed('mode-' + exited.id, false);
+            });
+
+        var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
+
+        context.map()
+            .on('move.favorite', debouncedUpdate)
+            .on('drawn.favorite', debouncedUpdate);
+
+        context
+            .on('enter.favorite', update)
+            .presets()
+            .on('favoritePreset.favorite', update)
+            .on('recentsChange.favorite', update);
+
+        update();
+
+
+        function update() {
+
+            for (var i = 0; i <= 9; i++) {
+                context.keybinding().off(i.toString());
+            }
+
+            var items = context.presets().getFavorites();
+
+            var modes = items.map(function(d, index) {
+                var presetName = d.preset.name().split(' – ')[0];
+                var markerClass = 'add-preset add-' + d.geometry + ' add-preset-' + presetName.replace(/\s+/g, '_')
+                    + '-' + d.geometry + ' add-' + d.source; // replace spaces with underscores to avoid css interpretation
+                if (d.preset.isFallback()) {
+                    markerClass += ' add-generic-preset';
+                }
+
+                var supportedGeometry = d.preset.geometry.filter(function(geometry) {
+                    return ['vertex', 'point', 'line', 'area'].indexOf(geometry) !== -1;
+                });
+                var vertexIndex = supportedGeometry.indexOf('vertex');
+                if (vertexIndex !== -1 && supportedGeometry.indexOf('point') !== -1) {
+                    // both point and vertex allowed, just combine them
+                    supportedGeometry.splice(vertexIndex, 1);
+                }
+                var tooltipTitleID = 'modes.add_preset.title';
+                if (supportedGeometry.length !== 1) {
+                    if (d.preset.setTags({}, d.geometry).building) {
+                        tooltipTitleID = 'modes.add_preset.building.title';
+                    } else {
+                        tooltipTitleID = 'modes.add_preset.' + context.presets().fallback(d.geometry).id + '.title';
+                    }
+                }
+                var protoMode = Object.assign({}, d);  // shallow copy
+                protoMode.button = markerClass;
+                protoMode.title = presetName;
+                protoMode.description = t(tooltipTitleID, { feature: '<strong>' + presetName + '</strong>' });
+
+                var keyCode;
+                if (textDirection === 'ltr') {
+                    // use number row order: 1 2 3 4 5 6 7 8 9 0
+                    if (index === 9) {
+                        keyCode = 0;
+                    } else if (index < 10) {
+                        keyCode = index + 1;
+                    }
+                } else {
+                    // use number row order from right to left
+                    if (index === 0) {
+                        keyCode = 0;
+                    } else if (index < 10) {
+                        keyCode = 10 - index;
+                    }
+                }
+                if (keyCode !== undefined) {
+                    protoMode.key = keyCode.toString();
+                }
+
+                var mode;
+                switch (d.geometry) {
+                    case 'point':
+                    case 'vertex':
+                        mode = modeAddPoint(context, protoMode);
+                        break;
+                    case 'line':
+                        mode = modeAddLine(context, protoMode);
+                        break;
+                    case 'area':
+                        mode = modeAddArea(context, protoMode);
+                }
+
+                if (mode.key) {
+                    context.keybinding().off(mode.key);
+                    context.keybinding().on(mode.key, function() {
+                        toggleMode(mode);
+                    });
+                }
+
+                return mode;
+            });
+
+            var buttons = selection.selectAll('button.add-button')
+                .data(modes, function(d, index) { return d.button + index; });
+
+            // exit
+            buttons.exit()
+                .remove();
+
+            // enter
+            var buttonsEnter = buttons.enter()
+                .append('button')
+                .attr('tabindex', -1)
+                .attr('class', function(d) {
+                    return d.button + ' add-button bar-button';
+                })
+                .on('click.mode-buttons', function(d) {
+
+                    // When drawing, ignore accidental clicks on mode buttons - #4042
+                    if (/^draw/.test(context.mode().id)) return;
+
+                    toggleMode(d);
+                })
+                .call(tooltip()
+                    .placement('bottom')
+                    .html(true)
+                    .title(function(d) { return uiTooltipHtml(d.description, d.key); })
+                );
+
+            buttonsEnter
+                .each(function(d) {
+                    d3_select(this)
+                        .call(uiPresetIcon()
+                            .geometry((d.geometry === 'point' && !d.preset.matchGeometry(d.geometry)) ? 'vertex' : d.geometry)
+                            .preset(d.preset)
+                            .sizeClass('small')
+                        );
+                });
+
+            var dragOrigin, dragMoved, targetIndex;
+
+            buttonsEnter.call(d3_drag()
+                .on('start', function() {
+                    dragOrigin = {
+                        x: d3_event.x,
+                        y: d3_event.y
+                    };
+                    targetIndex = null;
+                    dragMoved = false;
+                })
+                .on('drag', function(d, index) {
+                    dragMoved = true;
+                    var x = d3_event.x - dragOrigin.x,
+                        y = d3_event.y - dragOrigin.y;
+
+                    if (!d3_select(this).classed('dragging') &&
+                        // don't display drag until dragging beyond a distance threshold
+                        Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) <= 5) return;
+
+                    d3_select(this)
+                        .classed('dragging', true)
+                        .classed('removing', y > 50);
+
+                    targetIndex = null;
+
+                    selection.selectAll('button.add-preset')
+                        .style('transform', function(d2, index2) {
+                            var node = d3_select(this).node();
+                            if (index === index2) {
+                                return 'translate(' + x + 'px, ' + y + 'px)';
+                            } else if (y > 50) {
+                                if (index2 > index) {
+                                    return 'translateX(' + (textDirection === 'rtl' ? '' : '-') + '100%)';
+                                }
+                            } else if (d.source === d2.source) {
+                                if (index2 > index && (
+                                    (d3_event.x > node.offsetLeft && textDirection === 'ltr') ||
+                                    (d3_event.x < node.offsetLeft + node.offsetWidth && textDirection === 'rtl')
+                                )) {
+                                    if (targetIndex === null || index2 > targetIndex) {
+                                        targetIndex = index2;
+                                    }
+                                    return 'translateX(' + (textDirection === 'rtl' ? '' : '-') + '100%)';
+                                } else if (index2 < index && (
+                                    (d3_event.x < node.offsetLeft + node.offsetWidth && textDirection === 'ltr') ||
+                                    (d3_event.x > node.offsetLeft && textDirection === 'rtl')
+                                )) {
+                                    if (targetIndex === null || index2 < targetIndex) {
+                                        targetIndex = index2;
+                                    }
+                                    return 'translateX(' + (textDirection === 'rtl' ? '-' : '') + '100%)';
+                                }
+                            }
+                            return null;
+                        });
+                })
+                .on('end', function(d, index) {
+
+                    if (dragMoved && !d3_select(this).classed('dragging')) {
+                        toggleMode(d);
+                        return;
+                    }
+
+                    d3_select(this)
+                        .classed('dragging', false)
+                        .classed('removing', false);
+
+                    selection.selectAll('button.add-preset')
+                        .style('transform', null);
+
+                    var y = d3_event.y - dragOrigin.y;
+                    if (y > 50) {
+                        // dragged out of the top bar, remove
+                        if (d.isFavorite()) {
+                            context.presets().removeFavorite(d.preset, d.geometry);
+                            // also remove this as a recent so it doesn't still appear
+                            context.presets().removeRecent(d.preset, d.geometry);
+                        }
+                    } else if (targetIndex !== null) {
+                        // dragged to a new position, reorder
+                        if (d.isFavorite()) {
+                            context.presets().moveFavorite(index, targetIndex);
+                        }
+                    }
+                })
+            );
+
+            // update
+            buttons = buttons
+                .merge(buttonsEnter)
+                .classed('disabled', function(d) { return !enabled(d); });
+        }
+    };
+
+    tool.uninstall = function() {
+
+        context
+            .on('enter.editor.favorite', null)
+            .on('exit.editor.favorite', null)
+            .on('enter.favorite', null);
+
+        context.presets()
+            .on('favoritePreset.favorite', null)
+            .on('recentsChange.favorite', null);
+
+        context.map()
+            .on('move.favorite', null)
+            .on('drawn.favorite', null);
+    };
+
+    return tool;
+}

modules/ui/tools/add_recent.js

@@ -1,5 +1,4 @@
 import _debounce from 'lodash-es/debounce';
-import _uniqWith from 'lodash-es/uniqWith';
 
 import { drag as d3_drag } from 'd3-drag';
 import { event as d3_event, select as d3_select } from 'd3-selection';
@@ -14,7 +13,8 @@ import { uiTooltipHtml } from '../tooltipHtml';
 export function uiToolAddRecent(context) {
 
     var tool = {
-        id: 'modes',
+        id: 'add_recent',
+        klass: 'modes',
         label: t('toolbar.recent')
     };
 
@@ -42,10 +42,47 @@ export function uiToolAddRecent(context) {
         }
     }
 
+    function recentsToDraw() {
+        var maxShown = 10;
+        var maxRecents = 5;
+
+        var favorites = context.presets().getFavorites().slice(0, maxShown);
+
+        function isAFavorite(recent) {
+            return favorites.some(function(favorite) {
+                return favorite.matches(recent.preset, recent.geometry);
+            });
+        }
+
+        var favoritesCount = favorites.length;
+        maxRecents = Math.min(maxRecents, maxShown - favoritesCount);
+        var items = [];
+        if (maxRecents > 0) {
+            var recents = context.presets().getRecents().filter(function(recent) {
+                return recent.geometry !== 'relation';
+            });
+            for (var i in recents) {
+                var recent = recents[i];
+                if (!isAFavorite(recent)) {
+                    items.push(recent);
+                    if (items.length === maxRecents) {
+                        break;
+                    }
+                }
+            }
+        }
+
+        return items;
+    }
+
+    tool.shouldShow = function() {
+        return recentsToDraw().length > 0;
+    };
+
 
     tool.render = function(selection) {
         context
-            .on('enter.editor', function(entered) {
+            .on('enter.editor.recent', function(entered) {
                 selection.selectAll('button.add-button')
                     .classed('active', function(mode) { return entered.button === mode.button; });
                 context.container()
@@ -53,7 +90,7 @@ export function uiToolAddRecent(context) {
             });
 
         context
-            .on('exit.editor', function(exited) {
+            .on('exit.editor.recent', function(exited) {
                 context.container()
                     .classed('mode-' + exited.id, false);
             });
@@ -61,43 +98,22 @@ export function uiToolAddRecent(context) {
         var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
 
         context.map()
-            .on('move.modes', debouncedUpdate)
-            .on('drawn.modes', debouncedUpdate);
+            .on('move.recent', debouncedUpdate)
+            .on('drawn.recent', debouncedUpdate);
 
         context
-            .on('enter.modes', update)
+            .on('enter.recent', update)
             .presets()
-            .on('favoritePreset.modes', update)
-            .on('recentsChange.modes', update);
+            .on('favoritePreset.recent', update)
+            .on('recentsChange.recent', update);
 
         update();
 
 
         function update() {
 
-            for (var i = 0; i <= 9; i++) {
-                context.keybinding().off(i.toString());
-            }
-
-            var items = context.presets().getFavorites();
-
-            var favoritesCount = items.length;
-
-            if (favoritesCount < 10) {
-                var recents = context.presets().getRecents().filter(function(recent) {
-                    return recent.geometry !== 'relation';
-                });
-                items = _uniqWith(items.concat(recents), function(item1, item2) {
-                    return item1.matches(item2.preset, item2.geometry);
-                });
-                var maxShown = 10;
-                var maxRecents = 5;
-                if (favoritesCount < maxRecents) {
-                    // only show five most recent at most
-                    maxShown = maxRecents + favoritesCount;
-                }
-                items = items.slice(0, maxShown);
-            }
+            var items = recentsToDraw();
+            var favoritesCount = context.presets().getFavorites().length;
 
             var modes = items.map(function(d, index) {
                 var presetName = d.preset.name().split(' – ')[0];
@@ -128,23 +144,24 @@ export function uiToolAddRecent(context) {
                 protoMode.title = presetName;
                 protoMode.description = t(tooltipTitleID, { feature: '<strong>' + presetName + '</strong>' });
 
+                var totalIndex = favoritesCount + index;
                 var keyCode;
                 if (textDirection === 'ltr') {
                     // use number row order: 1 2 3 4 5 6 7 8 9 0
-                    if (index === 9) {
+                    if (totalIndex === 9) {
                         keyCode = 0;
-                    } else if (index < 10) {
-                        keyCode = index + 1;
+                    } else if (totalIndex < 10) {
+                        keyCode = totalIndex + 1;
                     }
                 } else {
                     // use number row order from right to left
-                    if (index === 0) {
+                    if (totalIndex === 0) {
                         keyCode = 0;
-                    } else if (index < 10) {
-                        keyCode = 10 - index;
+                    } else if (totalIndex < 10) {
+                        keyCode = 10 - totalIndex;
                     }
                 }
-                if (keyCode !== null) {
+                if (keyCode !== undefined) {
                     protoMode.key = keyCode.toString();
                 }
 
@@ -162,6 +179,7 @@ export function uiToolAddRecent(context) {
                 }
 
                 if (mode.key) {
+                    context.keybinding().off(mode.key);
                     context.keybinding().on(mode.key, function() {
                         toggleMode(mode);
                     });
@@ -181,12 +199,8 @@ export function uiToolAddRecent(context) {
             var buttonsEnter = buttons.enter()
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', function(d, index) {
-                    var classes = d.button + ' add-button bar-button';
-                    if (index === favoritesCount && index !== 0) {
-                        classes += ' first-recent';
-                    }
-                    return classes;
+                .attr('class', function(d) {
+                    return d.button + ' add-button bar-button';
                 })
                 .on('click.mode-buttons', function(d) {
 
@@ -272,7 +286,7 @@ export function uiToolAddRecent(context) {
                             return null;
                         });
                 })
-                .on('end', function(d, index) {
+                .on('end', function(d) {
 
                     if (dragMoved && !d3_select(this).classed('dragging')) {
                         toggleMode(d);
@@ -289,18 +303,12 @@ export function uiToolAddRecent(context) {
                     var y = d3_event.y - dragOrigin.y;
                     if (y > 50) {
                         // dragged out of the top bar, remove
-                        if (d.isFavorite()) {
-                            context.presets().removeFavorite(d.preset, d.geometry);
-                            // also remove this as a recent so it doesn't still appear
-                            context.presets().removeRecent(d.preset, d.geometry);
-                        } else if (d.isRecent()) {
+                        if (d.isRecent()) {
                             context.presets().removeRecent(d.preset, d.geometry);
                         }
                     } else if (targetIndex !== null) {
                         // dragged to a new position, reorder
-                        if (d.isFavorite()) {
-                            context.presets().moveFavorite(index, targetIndex);
-                        } else if (d.isRecent()) {
+                        if (d.isRecent()) {
                             var item = context.presets().recentMatching(d.preset, d.geometry);
                             var beforeItem = context.presets().recentMatching(targetData.preset, targetData.geometry);
                             context.presets().moveRecent(item, beforeItem);
@@ -313,11 +321,24 @@ export function uiToolAddRecent(context) {
             buttons = buttons
                 .merge(buttonsEnter)
                 .classed('disabled', function(d) { return !enabled(d); });
-
-            // check if toolbar has overflowed
-            context.ui().checkOverflow('#bar', true);
         }
     };
 
+    tool.uninstall = function() {
+
+        context
+            .on('enter.editor.recent', null)
+            .on('exit.editor.recent', null)
+            .on('enter.recent', null);
+
+        context.presets()
+            .on('favoritePreset.recent', null)
+            .on('recentsChange.recent', null);
+
+        context.map()
+            .on('move.recent', null)
+            .on('drawn.recent', null);
+    };
+
     return tool;
 }

modules/ui/tools/index.js

@@ -1,3 +1,4 @@
+export * from './add_favorite';
 export * from './add_recent';
 export * from './notes';
 export * from './save';

modules/ui/top_toolbar.js

@@ -4,13 +4,14 @@ import {
 } from 'd3-selection';
 
 import _debounce from 'lodash-es/debounce';
-import { uiToolAddRecent, uiToolNotes, uiToolSave, uiToolSearchAdd, uiToolSidebarToggle, uiToolUndoRedo } from './tools';
+import { uiToolAddFavorite, uiToolAddRecent, uiToolNotes, uiToolSave, uiToolSearchAdd, uiToolSidebarToggle, uiToolUndoRedo } from './tools';
 
 
 export function uiTopToolbar(context) {
 
     var sidebarToggle = uiToolSidebarToggle(context),
         searchAdd = uiToolSearchAdd(context),
+        addFavorite = uiToolAddFavorite(context),
         addRecent = uiToolAddRecent(context),
         notes = uiToolNotes(context),
         undoRedo = uiToolUndoRedo(context),
@@ -27,6 +28,10 @@ export function uiTopToolbar(context) {
         context.layers()
             .on('change.topToolbar', debouncedUpdate);
 
+        context.presets()
+            .on('favoritePreset.topToolbar', update)
+            .on('recentsChange.topToolbar', update);
+
         update();
 
         function update() {
@@ -34,11 +39,19 @@ export function uiTopToolbar(context) {
             var tools = [
                 sidebarToggle,
                 'spacer',
-                searchAdd,
-                addRecent,
-                'spacer'
+                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']);
             }
@@ -62,7 +75,9 @@ export function uiTopToolbar(context) {
                 .enter()
                 .append('div')
                 .attr('class', function(d) {
-                    return 'toolbar-item ' + (d.id || d).replace('_', '-');
+                    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'; });