Restore modeSelect, and make a new modeSelectNote just for the notes

modules/behavior/select.js

@@ -10,7 +10,8 @@ import { geoVecLength } from '../geo';
 
 import {
     modeBrowse,
-    modeSelect
+    modeSelect,
+    modeSelectNote
 } from '../modes';
 
 import {
@@ -157,7 +158,9 @@ export function behaviorSelect(context) {
             }
 
         } else if (datum instanceof osmNote && !isMultiselect) {    // clicked a Note..
-            context.selectedNoteID(datum.id);
+            context
+                .selectedNoteID(datum.id)
+                .enter(modeSelectNote(context, datum.id));
 
         } else {    // clicked nothing..
             context.selectedNoteID(null);

modules/modes/index.js

@@ -9,3 +9,4 @@ export { modeMove } from './move';
 export { modeRotate } from './rotate';
 export { modeSave } from './save';
 export { modeSelect } from './select';
+export { modeSelectNote } from './select_note';

modules/modes/select.js

@@ -34,12 +34,10 @@ import {
     osmWay
 } from '../osm';
 
-import { serviceOsm } from '../services';
-
 import { modeBrowse } from './browse';
 import { modeDragNode } from './drag_node';
 import * as Operations from '../operations/index';
-import { uiEditMenu, uiSelectionList, uiNoteEditor } from '../ui';
+import { uiEditMenu, uiSelectionList } from '../ui';
 import { uiCmd } from '../ui/cmd';
 import { utilEntityOrMemberSelector, utilEntitySelector } from '../util';
 
@@ -72,7 +70,6 @@ export function modeSelect(context, selectedIDs) {
     var newFeature = false;
     var suppressMenu = true;
     var follow = false;
-    var noteEditor = uiNoteEditor(context);
 
 
     var wrap = context.container()
@@ -430,22 +427,8 @@ export function modeSelect(context, selectedIDs) {
             }
         }
 
-        var noteFound;
-        if (!checkSelectedIDs()) {
-            // check if any selectedIDs are within the loaded notes
-            var notes = serviceOsm.notes(context.projection);
-            var noteIDs = _map(notes, function(note) { return note.id; });
-            noteFound = noteIDs.some(function(note) {
-                return selectedIDs.includes(note);
-            });
-            if (!noteFound) return;
-        }
-
-        if (noteFound) {
-            context.ui().sidebar.show(noteEditor.note('context.selectedNoteID')); // TODO: update to noteID reference
-            return;
-        }
 
+        if (!checkSelectedIDs()) return;
 
         var operations = _without(_values(Operations), Operations.operationDelete)
             .map(function(o) { return o(selectedIDs, context); })

modules/modes/select_note.js

@@ -0,0 +1,115 @@
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
+
+import {
+    behaviorHover,
+    behaviorLasso,
+    behaviorSelect
+} from '../behavior';
+
+import { services } from '../services';
+import { modeBrowse } from './browse';
+import { uiNoteEditor } from '../ui';
+
+
+export function modeSelectNote(context, selectedNoteID) {
+    var mode = {
+        id: 'select_note',
+        button: 'browse'
+    };
+
+    var osm = services.osm;
+    var keybinding = d3_keybinding('select-note');
+    var noteEditor = uiNoteEditor(context);
+    var behaviors = [
+        behaviorHover(context),
+        behaviorSelect(context),
+        behaviorLasso(context),
+    ];
+
+
+    function checkSelectedID() {
+        if (!osm) return;
+        var note = osm.getNote(selectedNoteID);
+        if (!note) {
+            context.enter(modeBrowse(context));
+        }
+        return note;
+    }
+
+
+    mode.enter = function() {
+
+        // class the note as selected, or return to browse mode if the note is gone
+        function selectNote(drawn) {
+            if (!checkSelectedID()) return;
+
+            var selection = context.surface()
+                .selectAll('.note-' + selectedNoteID);
+
+            if (selection.empty()) {
+                // Return to browse mode if selected DOM elements have
+                // disappeared because the user moved them out of view..
+                var source = d3_event && d3_event.type === 'zoom' && d3_event.sourceEvent;
+                if (drawn && source && (source.type === 'mousemove' || source.type === 'touchmove')) {
+                    context.enter(modeBrowse(context));
+                }
+
+            } else {
+                selection
+                    .classed('selected', true);
+            }
+        }
+
+        function esc() {
+            context.enter(modeBrowse(context));
+        }
+
+        var note = checkSelectedID();
+        if (!note) return;
+
+        behaviors.forEach(function(behavior) {
+            context.install(behavior);
+        });
+
+        keybinding
+            .on('⎋', esc, true);
+
+        d3_select(document)
+            .call(keybinding);
+
+        context.ui().sidebar
+            .show(noteEditor.note(note));
+
+        context.map()
+            .on('drawn.select', selectNote);
+
+        selectNote();
+    };
+
+
+    mode.exit = function() {
+        behaviors.forEach(function(behavior) {
+            context.uninstall(behavior);
+        });
+
+        keybinding.off();
+
+        context.surface()
+            .selectAll('.note.selected')
+            .classed('selected', false);
+
+        context.map()
+            .on('drawn.select', null);
+
+        context.ui().sidebar
+            .hide();
+    };
+
+
+    return mode;
+}

modules/services/osm.js

@@ -226,7 +226,7 @@ var parsers = {
         var note = new osmNote(props);
         var item = { minX: note.loc[0], minY: note.loc[1], maxX: note.loc[0], maxY: note.loc[1], data: note };
         _noteCache.rtree.insert(item);
-        _noteCache.note[id] = note;
+        _noteCache.note[note.id] = note;
         return note;
     }
 };