Favorite preset

modules/behavior/draw_way.js

@@ -323,7 +323,7 @@ export function behaviorDrawWay(context, wayID, index, mode, startGraph, baselin
         window.setTimeout(function() {
             context.map().dblclickEnable(true);
         }, 1000);
-        var isNewFeature = !mode.isContinuing;
+        var isNewFeature = !mode.isContinuing && mode.button.indexOf('add-preset-') === -1;
         context.enter(modeSelect(context, [wayID]).newFeature(isNewFeature));
     };
 

modules/core/context.js

@@ -57,7 +57,7 @@ export function coreContext() {
     addTranslation('en', dataEn);
     setLocale('en');
 
-    var dispatch = d3_dispatch('enter', 'exit', 'change');
+    var dispatch = d3_dispatch('enter', 'exit', 'change', 'favoritePreset');
 
     // https://github.com/openstreetmap/iD/issues/772
     // http://mathiasbynens.be/notes/localstorage-pattern#comment-9
@@ -312,7 +312,38 @@ export function coreContext() {
     /* Presets */
     var presets;
     context.presets = function() { return presets; };
+    //get favorites from local storage
+    context.getFavoritePresets = function() {
+        return JSON.parse(context.storage('favorite_presets')) || [];
+    }
+    context.favoritePreset = function(preset, geom) {
+        var favs = context.getFavoritePresets();
 
+        //add/remove favorites from local storage
+        if (context.isFavoritePreset(preset, geom)) {
+            favs = favs.filter(function(d) {
+                return !(d.id === preset.id && d.geom === geom);
+            });
+        } else {
+            //only allow 3 favorites
+            //replace the last one
+            if (favs.length === 3) {
+                favs = favs.slice(0,2);
+            }
+            favs.push({id: preset.id, geom: geom});
+        }
+
+        context.storage('favorite_presets', JSON.stringify(favs));
+
+        //and call update on modes
+        dispatch.call('favoritePreset');
+    };
+    context.isFavoritePreset = function(preset, geom) {
+        var favs = context.getFavoritePresets();
+        return favs.some(function(d) {
+            return d.id === preset.id && d.geom === geom;
+        });
+    };
 
     /* Map */
     var map;

modules/modes/add_area.js

@@ -10,8 +10,8 @@ import { modeDrawArea } from './index';
 import { osmNode, osmWay } from '../osm';
 
 
-export function modeAddArea(context) {
-    var mode = {
+export function modeAddArea(context, customMode, preset) {
+    var mode = customMode || {
         id: 'add-area',
         button: 'area',
         title: t('modes.add_area.title'),
@@ -26,6 +26,7 @@ export function modeAddArea(context) {
         .on('startFromNode', startFromNode);
 
     var defaultTags = { area: 'yes' };
+    if (preset) defaultTags = preset.setTags(defaultTags, 'area');
 
 
     function actionClose(wayId) {
@@ -47,7 +48,7 @@ export function modeAddArea(context) {
             actionClose(way.id)
         );
 
-        context.enter(modeDrawArea(context, way.id, startGraph, context.graph()));
+        context.enter(modeDrawArea(context, way.id, startGraph, context.graph(), mode.button));
     }
 
 
@@ -64,7 +65,7 @@ export function modeAddArea(context) {
             actionAddMidpoint({ loc: loc, edge: edge }, node)
         );
 
-        context.enter(modeDrawArea(context, way.id, startGraph, context.graph()));
+        context.enter(modeDrawArea(context, way.id, startGraph, context.graph(), mode.button));
     }
 
 
@@ -78,7 +79,7 @@ export function modeAddArea(context) {
             actionClose(way.id)
         );
 
-        context.enter(modeDrawArea(context, way.id, startGraph, context.graph()));
+        context.enter(modeDrawArea(context, way.id, startGraph, context.graph(), mode.button));
     }
 
 

modules/modes/add_line.js

@@ -10,8 +10,8 @@ import { modeDrawLine } from './index';
 import { osmNode, osmWay } from '../osm';
 
 
-export function modeAddLine(context) {
-    var mode = {
+export function modeAddLine(context, customMode, preset) {
+    var mode = customMode || {
         id: 'add-line',
         button: 'line',
         title: t('modes.add_line.title'),
@@ -25,11 +25,14 @@ export function modeAddLine(context) {
         .on('startFromWay', startFromWay)
         .on('startFromNode', startFromNode);
 
+    var defaultTags = {};
+    if (preset) defaultTags = preset.setTags(defaultTags, 'line');
+
 
     function start(loc) {
         var startGraph = context.graph();
         var node = osmNode({ loc: loc });
-        var way = osmWay();
+        var way = osmWay({ tags: defaultTags });
 
         context.perform(
             actionAddEntity(node),
@@ -37,7 +40,7 @@ export function modeAddLine(context) {
             actionAddVertex(way.id, node.id)
         );
 
-        context.enter(modeDrawLine(context, way.id, startGraph, context.graph()));
+        context.enter(modeDrawLine(context, way.id, startGraph, context.graph(), mode.button));
     }
 
 
@@ -53,7 +56,7 @@ export function modeAddLine(context) {
             actionAddMidpoint({ loc: loc, edge: edge }, node)
         );
 
-        context.enter(modeDrawLine(context, way.id, startGraph, context.graph()));
+        context.enter(modeDrawLine(context, way.id, startGraph, context.graph(), mode.button));
     }
 
 
@@ -66,7 +69,7 @@ export function modeAddLine(context) {
             actionAddVertex(way.id, node.id)
         );
 
-        context.enter(modeDrawLine(context, way.id, startGraph, context.graph()));
+        context.enter(modeDrawLine(context, way.id, startGraph, context.graph(), mode.button));
     }
 
 

modules/modes/add_point.js

@@ -6,8 +6,8 @@ import { osmNode } from '../osm';
 import { actionAddMidpoint } from '../actions';
 
 
-export function modeAddPoint(context) {
-    var mode = {
+export function modeAddPoint(context, customMode, preset) {
+    var mode = customMode || {
         id: 'add-point',
         button: 'point',
         title: t('modes.add_point.title'),
@@ -23,9 +23,12 @@ export function modeAddPoint(context) {
         .on('cancel', cancel)
         .on('finish', cancel);
 
+    var defaultTags = {};
+    if (preset) defaultTags = preset.setTags(defaultTags, 'point');
+
 
     function add(loc) {
-        var node = osmNode({ loc: loc });
+        var node = osmNode({ loc: loc, tags: defaultTags });
 
         context.perform(
             actionAddEntity(node),

modules/modes/draw_area.js

@@ -2,9 +2,9 @@ import { t } from '../util/locale';
 import { behaviorDrawWay } from '../behavior';
 
 
-export function modeDrawArea(context, wayId, startGraph, baselineGraph) {
+export function modeDrawArea(context, wayId, startGraph, baselineGraph, button) {
     var mode = {
-        button: 'area',
+        button: button,
         id: 'draw-area'
     };
 

modules/modes/draw_line.js

@@ -2,9 +2,9 @@ import { t } from '../util/locale';
 import { behaviorDrawWay } from '../behavior';
 
 
-export function modeDrawLine(context, wayID, startGraph, baselineGraph, affix, continuing) {
+export function modeDrawLine(context, wayID, startGraph, baselineGraph, button, affix, continuing) {
     var mode = {
-        button: 'line',
+        button: button,
         id: 'draw-line'
     };
 

modules/operations/continue.js

@@ -27,7 +27,7 @@ export function operationContinue(selectedIDs, context) {
     var operation = function() {
         var candidate = candidateWays()[0];
         context.enter(
-            modeDrawLine(context, candidate.id, context.graph(), context.graph(), candidate.affix(vertex.id), true)
+            modeDrawLine(context, candidate.id, context.graph(), context.graph(), 'line', candidate.affix(vertex.id), true)
         );
     };
 

modules/ui/entity_editor.js

@@ -14,6 +14,7 @@ import { tooltip } from '../util/tooltip';
 import { actionChangeTags } from '../actions';
 import { modeBrowse } from '../modes';
 import { svgIcon } from '../svg';
+import { uiPresetFavorite } from './preset_favorite';
 import { uiPresetIcon } from './preset_icon';
 import { uiQuickLinks } from './quick_links';
 import { uiRawMemberEditor } from './raw_member_editor';
@@ -35,6 +36,7 @@ export function uiEntityEditor(context) {
     var _entityID;
     var _activePreset;
     var _tagReference;
+    var _presetFavorite;
 
     var entityIssues = uiEntityIssues(context);
     var quickLinks = uiQuickLinks();
@@ -137,6 +139,11 @@ export function uiEntityEditor(context) {
         body = body
             .merge(bodyEnter);
 
+        if (_presetFavorite) {
+            body.selectAll('.preset-list-button-wrap')
+                .call(_presetFavorite.button);
+        }
+
         // update header
         if (_tagReference) {
             body.selectAll('.preset-list-button-wrap')
@@ -333,6 +340,7 @@ export function uiEntityEditor(context) {
             _activePreset = val;
             _tagReference = uiTagReference(_activePreset.reference(context.geometry(_entityID)), context)
                 .showing(false);
+            _presetFavorite = uiPresetFavorite(_activePreset, context.geometry(_entityID), context);
         }
         return entityEditor;
     };

modules/ui/modes.js

@@ -11,6 +11,7 @@ import {
 } from '../modes';
 
 import { svgIcon } from '../svg';
+import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { uiTooltipHtml } from './tooltipHtml';
 
@@ -82,7 +83,8 @@ export function uiModes(context) {
             .on('drawn.modes', debouncedUpdate);
 
         context
-            .on('enter.modes', update);
+            .on('enter.modes', update)
+            .on('favoritePreset.modes', update);
 
         update();
 
@@ -91,6 +93,37 @@ export function uiModes(context) {
             var showNotes = notesEnabled();
             var data = showNotes ? modes : modes.slice(0, 3);
 
+            // add favorite presets to modes
+            var favoritePresets = context.getFavoritePresets();
+            var favoriteModes = favoritePresets.map(function(d) {
+                var preset = context.presets().item(d.id);
+                var isMaki = /^maki-/.test(preset.icon);
+                var icon = '#' + preset.icon + (isMaki ? '-11' : '');
+                var markerClass = 'add-preset-' + preset.name()
+                    .replace(/\s+/g, '_')
+                    + '-' + d.geom; //replace spaces with underscores to avoid css interpretation
+
+                var favoriteMode = {
+                    id: markerClass,
+                    button: markerClass,
+                    title: t('presets.presets.' + preset.id + '.name'),
+                    description: [t('operations.add.title'), t('presets.presets.' + preset.id + '.name').toLowerCase(), t('geometry.' + d.geom)].join(' '),
+                    key: '',
+                    icon: icon
+                }
+                switch (d.geom) {
+                    case 'point':
+                    case 'vertex':
+                        return modeAddPoint(context, favoriteMode, preset);
+                    case 'line':
+                        return modeAddLine(context, favoriteMode, preset);
+                    case 'area':
+                        return modeAddArea(context, favoriteMode, preset);
+                }
+            });
+
+            data = data.concat(favoriteModes);
+
             var buttons = selection.selectAll('button.add-button')
                 .data(data, function(d) { return d.id; });
 
@@ -125,7 +158,7 @@ export function uiModes(context) {
             buttonsEnter
                 .each(function(d) {
                     d3_select(this)
-                        .call(svgIcon('#iD-icon-' + d.button));
+                        .call(svgIcon(d.icon || '#iD-icon-' + d.button));
                 });
 
             buttonsEnter

modules/ui/preset_favorite.js

@@ -0,0 +1,57 @@
+import _find from 'lodash-es/find';
+import _omit from 'lodash-es/omit';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { t } from '../util/locale';
+import { svgIcon } from '../svg';
+import { uiModes } from './modes';
+
+export function uiPresetFavorite(preset, geom, context) {
+
+    var presetFavorite = {};
+
+    var _button = d3_select(null);
+
+
+    presetFavorite.button = function(selection) {
+        var data = (preset.icon) ? [0] : [];
+
+        _button = selection.selectAll('.preset-favorite-button')
+            .data(data);
+
+        _button.exit().remove();
+
+        _button = _button.enter()
+            .insert('button', '.tag-reference-button')
+            .attr('class', 'preset-favorite-button')
+            .attr('title', t('icons.favorite'))
+            .attr('tabindex', -1)
+            .call(svgIcon('#iD-icon-favorite'))
+            .merge(_button);
+
+        _button
+            .classed('active', function(d) {
+                return context.isFavoritePreset(preset, geom);
+            })
+            .on('click', function () {
+                d3_event.stopPropagation();
+                d3_event.preventDefault();
+
+                //update state of favorite icon
+                d3_select(this)
+                    .classed('active', function() {
+                        return !d3_select(this).classed('active');
+                    });
+
+               context.favoritePreset(preset, geom);
+
+            });
+
+    };
+
+    return presetFavorite;
+}