From e23ef4ba4a7f6c793624409c1860c8a155af1311 Mon Sep 17 00:00:00 2001
From: Thomas Hervey <thomasahervey@gmail.com>
Date: Mon, 23 Jul 2018 15:09:25 -0400
Subject: [PATCH] redraw on note drag. TODO: change dispatch call

---
 css/20_map.css               |  14 +-
 modules/modes/drag_note.js   |   5 +-
 modules/modes/drag_note2.js  | 490 -----------------------------------
 modules/modes/select_note.js |   2 +-
 modules/osm/note.js          |   2 +-
 modules/renderer/map.js      |  24 +-
 modules/ui/sidebar.js        |   3 +-
 7 files changed, 30 insertions(+), 510 deletions(-)
 delete mode 100644 modules/modes/drag_note2.js

diff --git a/css/20_map.css b/css/20_map.css
index 0e7137b74..a715b6bf0 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -68,9 +68,17 @@
 /* points & notes */
 
 g.note .stroke {
-    stroke: #444;
+    stroke: #222;
     stroke-width: 1;
-    fill: #444;
+    fill: #222;
+    opacity: 0.6;
+}
+
+g.note.active .stroke {
+    stroke: #222;
+    stroke-width: 1;
+    fill: #222;
+    opacity: 0.8;
 }
 
 g.point .stroke {
@@ -105,7 +113,7 @@ g.point.selected .shadow {
     stroke-opacity: 0.7;
 }
 
-g.note ellipse.stroke,
+/* g.note ellipse.stroke, */
 g.point ellipse.stroke {
     display: none;
 }
diff --git a/modules/modes/drag_note.js b/modules/modes/drag_note.js
index 8437300c2..f51e9bdcc 100644
--- a/modules/modes/drag_note.js
+++ b/modules/modes/drag_note.js
@@ -111,8 +111,6 @@ export function modeDragNote(context) {
 
 
     function start(entity) {
-        context.perform(actionNoop());
-
         _activeEntity = entity;
         _startLoc = entity.loc;
 
@@ -155,7 +153,8 @@ export function modeDragNote(context) {
         if (osm) {
             osm.replaceNote(entity);  // update note cache
         }
-        dispatch.call('change', this, 'difference');
+
+        context.perform(actionNoop()); // TODO: replace with better call for redrawing
     }
 
 
diff --git a/modules/modes/drag_note2.js b/modules/modes/drag_note2.js
deleted file mode 100644
index ab0f55cae..000000000
--- a/modules/modes/drag_note2.js
+++ /dev/null
@@ -1,490 +0,0 @@
-import _find from 'lodash-es/find';
-
-import {
-    event as d3_event,
-    select as d3_select
-} from 'd3-selection';
-
-import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
-
-import { t } from '../util/locale';
-
-import {
-    actionAddMidpoint,
-    actionConnect,
-    actionMoveNode,
-    actionNoop
-} from '../actions';
-
-import {
-    behaviorEdit,
-    behaviorHover,
-    behaviorDrag
-} from '../behavior';
-
-import {
-    geoChooseEdge,
-    geoHasLineIntersections,
-    geoHasSelfIntersections,
-    geoVecSubtract,
-    geoViewportEdge
-} from '../geo';
-
-import { modeBrowse, modeSelect } from './index';
-import { osmJoinWays, osmNode } from '../osm';
-import { uiFlash } from '../ui';
-
-
-export function modeDragNote2(context) {
-    var mode = {
-        id: 'drag-note2',
-        button: 'browse'
-    };
-    var hover = behaviorHover(context).altDisables(true)
-        .on('hover', context.ui().sidebar.hover);
-    var edit = behaviorEdit(context);
-
-    var _nudgeInterval;
-    var _restoreSelectedIDs = [];
-    var _wasMidpoint = false;
-    var _isCancelled = false;
-    var _activeEntity;
-    var _startLoc;
-    var _lastLoc;
-
-
-    function startNudge(entity, nudge) {
-        if (_nudgeInterval) window.clearInterval(_nudgeInterval);
-        _nudgeInterval = window.setInterval(function() {
-            context.pan(nudge);
-            doMove(entity, nudge);
-        }, 50);
-    }
-
-
-    function stopNudge() {
-        if (_nudgeInterval) {
-            window.clearInterval(_nudgeInterval);
-            _nudgeInterval = null;
-        }
-    }
-
-
-    function moveAnnotation(entity) {
-        return t('operations.move.annotation.' + entity.geometry(context.graph()));
-    }
-
-
-    function connectAnnotation(entity) {
-        return t('operations.connect.annotation.' + entity.geometry(context.graph()));
-    }
-
-
-    function origin(entity) {
-        return context.projection(entity.loc);
-    }
-
-
-    function keydown() {
-        if (d3_event.keyCode === d3_keybinding.modifierCodes.alt) {
-            if (context.surface().classed('nope')) {
-                context.surface()
-                    .classed('nope-suppressed', true);
-            }
-            context.surface()
-                .classed('nope', false)
-                .classed('nope-disabled', true);
-        }
-    }
-
-
-    function keyup() {
-        if (d3_event.keyCode === d3_keybinding.modifierCodes.alt) {
-            if (context.surface().classed('nope-suppressed')) {
-                context.surface()
-                    .classed('nope', true);
-            }
-            context.surface()
-                .classed('nope-suppressed', false)
-                .classed('nope-disabled', false);
-        }
-    }
-
-
-    function start(entity) {
-        _wasMidpoint = entity.type === 'midpoint';
-        var hasHidden = context.features().hasHiddenConnections(entity, context.graph());
-        _isCancelled = d3_event.sourceEvent.shiftKey || hasHidden;
-
-
-        if (_isCancelled) {
-            if (hasHidden) {
-                uiFlash()
-                    .duration(4000)
-                    .text(t('modes.drag_node.connected_to_hidden'))();
-            }
-            return drag.cancel();
-        }
-
-        if (_wasMidpoint) {
-            var midpoint = entity;
-            entity = osmNode();
-            context.perform(actionAddMidpoint(midpoint, entity));
-            entity = context.entity(entity.id);   // get post-action entity
-
-            var vertex = context.surface().selectAll('.' + entity.id);
-            drag.target(vertex.node(), entity);
-
-        } else {
-            context.perform(actionNoop());
-        }
-
-        _activeEntity = entity;
-        _startLoc = entity.loc;
-
-        context.surface().selectAll('.' + _activeEntity.id)
-            .classed('active', true);
-
-        context.enter(mode);
-    }
-
-
-    // related code
-    // - `behavior/draw.js` `datum()`
-    function datum() {
-        var event = d3_event && d3_event.sourceEvent;
-        if (!event || event.altKey) {
-            return {};
-        } else {
-            // When dragging, snap only to touch targets..
-            // (this excludes area fills and active drawing elements)
-            var d = event.target.__data__;
-            return (d && d.properties && d.properties.target) ? d : {};
-        }
-    }
-
-
-    function doMove(entity, nudge) {
-        nudge = nudge || [0, 0];
-
-        var currPoint = (d3_event && d3_event.point) || context.projection(_lastLoc);
-        var currMouse = geoVecSubtract(currPoint, nudge);
-        var loc = context.projection.invert(currMouse);
-
-        if (!_nudgeInterval) {   // If not nudging at the edge of the viewport, try to snap..
-            // related code
-            // - `mode/drag_node.js`     `doMode()`
-            // - `behavior/draw.js`      `click()`
-            // - `behavior/draw_way.js`  `move()`
-            var d = datum();
-            var target = d && d.properties && d.properties.entity;
-            var targetLoc = target && target.loc;
-            var targetNodes = d && d.properties && d.properties.nodes;
-            var edge;
-
-            if (targetLoc) {   // snap to node/vertex - a point target with `.loc`
-                loc = targetLoc;
-
-            } else if (targetNodes) {   // snap to way - a line target with `.nodes`
-                edge = geoChooseEdge(targetNodes, context.mouse(), context.projection, end.id);
-                if (edge) {
-                    loc = edge.loc;
-                }
-            }
-        }
-
-        context.replace(
-            actionMoveNode(entity.id, loc),
-            moveAnnotation(entity)
-        );
-
-        // Below here: validations
-        var isInvalid = false;
-
-        // Check if this connection to `target` could cause relations to break..
-        if (target) {
-            isInvalid = hasRelationConflict(entity, target, edge, context.graph());
-        }
-
-        // Check if this drag causes the geometry to break..
-        if (!isInvalid) {
-            isInvalid = hasInvalidGeometry(entity, context.graph());
-        }
-
-
-        var nope = context.surface().classed('nope');
-        if (isInvalid === 'relation' || isInvalid === 'restriction') {
-            if (!nope) {   // about to nope - show hint
-                uiFlash()
-                    .duration(4000)
-                    .text(t('operations.connect.' + isInvalid,
-                        { relation: context.presets().item('type/restriction').name() }
-                    ))();
-            }
-        } else {
-            if (nope) {   // about to un-nope, remove hint
-                uiFlash()
-                    .duration(1)
-                    .text('')();
-            }
-        }
-
-
-        var nopeDisabled = context.surface().classed('nope-disabled');
-        if (nopeDisabled) {
-            context.surface()
-                .classed('nope', false)
-                .classed('nope-suppressed', isInvalid);
-        } else {
-            context.surface()
-                .classed('nope', isInvalid)
-                .classed('nope-suppressed', false);
-        }
-
-        _lastLoc = loc;
-    }
-
-
-    // Uses `actionConnect.disabled()` to know whether this connection is ok..
-    function hasRelationConflict(entity, target, edge, graph) {
-        var testGraph = graph.update();  // copy
-
-        // if snapping to way - add midpoint there and consider that the target..
-        if (edge) {
-            var midpoint = osmNode();
-            var action = actionAddMidpoint({
-                loc: edge.loc,
-                edge: [target.nodes[edge.index - 1], target.nodes[edge.index]]
-            }, midpoint);
-
-            testGraph = action(testGraph);
-            target = midpoint;
-        }
-
-        // can we connect to it?
-        var ids = [entity.id, target.id];
-        return actionConnect(ids).disabled(testGraph);
-    }
-
-
-    function hasInvalidGeometry(entity, graph) {
-        var parents = graph.parentWays(entity);
-        var i, j, k;
-
-        for (i = 0; i < parents.length; i++) {
-            var parent = parents[i];
-            var nodes = [];
-            var activeIndex = null;    // which multipolygon ring contains node being dragged
-
-            // test any parent multipolygons for valid geometry
-            var relations = graph.parentRelations(parent);
-            for (j = 0; j < relations.length; j++) {
-                if (!relations[j].isMultipolygon()) continue;
-
-                var rings = osmJoinWays(relations[j].members, graph);
-
-                // find active ring and test it for self intersections
-                for (k = 0; k < rings.length; k++) {
-                    nodes = rings[k].nodes;
-                    if (_find(nodes, function(n) { return n.id === entity.id; })) {
-                        activeIndex = k;
-                        if (geoHasSelfIntersections(nodes, entity.id)) {
-                            return true;
-                        }
-                    }
-                    rings[k].coords = nodes.map(function(n) { return n.loc; });
-                }
-
-                // test active ring for intersections with other rings in the multipolygon
-                for (k = 0; k < rings.length; k++) {
-                    if (k === activeIndex) continue;
-
-                    // make sure active ring doesnt cross passive rings
-                    if (geoHasLineIntersections(rings[activeIndex].nodes, rings[k].nodes, entity.id)) {
-                        return true;
-                    }
-                }
-            }
-
-
-            // If we still haven't tested this node's parent way for self-intersections.
-            // (because it's not a member of a multipolygon), test it now.
-            if (activeIndex === null) {
-                nodes = parent.nodes.map(function(nodeID) { return graph.entity(nodeID); });
-                if (nodes.length && geoHasSelfIntersections(nodes, entity.id)) {
-                    return true;
-                }
-            }
-
-        }
-
-        return false;
-    }
-
-
-    function move(entity) {
-        if (_isCancelled) return;
-        d3_event.sourceEvent.stopPropagation();
-
-        context.surface().classed('nope-disabled', d3_event.sourceEvent.altKey);
-
-        _lastLoc = context.projection.invert(d3_event.point);
-
-        doMove(entity);
-        var nudge = geoViewportEdge(d3_event.point, context.map().dimensions());
-        if (nudge) {
-            startNudge(entity, nudge);
-        } else {
-            stopNudge();
-        }
-    }
-
-
-    function end(entity) {
-        if (_isCancelled) return;
-
-        var d = datum();
-        var nope = (d && d.properties && d.properties.nope) || context.surface().classed('nope');
-        var target = d && d.properties && d.properties.entity;   // entity to snap to
-
-        if (nope) {   // bounce back
-            context.perform(
-                _actionBounceBack(entity.id, _startLoc)
-            );
-
-        } else if (target && target.type === 'way') {
-            var choice = geoChooseEdge(context.childNodes(target), context.mouse(), context.projection, entity.id);
-            context.replace(
-                actionAddMidpoint({
-                    loc: choice.loc,
-                    edge: [target.nodes[choice.index - 1], target.nodes[choice.index]]
-                }, entity),
-                connectAnnotation(target)
-            );
-
-        } else if (target && target.type === 'node') {
-            context.replace(
-                actionConnect([target.id, entity.id]),
-                connectAnnotation(target)
-            );
-
-        } else if (_wasMidpoint) {
-            context.replace(
-                actionNoop(),
-                t('operations.add.annotation.vertex')
-            );
-
-        } else {
-            context.replace(
-                actionNoop(),
-                moveAnnotation(entity)
-            );
-        }
-
-        var reselection = _restoreSelectedIDs.filter(function(id) {
-            return context.graph().hasEntity(id);
-        });
-
-        if (reselection.length) {
-            context.enter(modeSelect(context, reselection));
-        } else {
-            context.enter(modeBrowse(context));
-        }
-    }
-
-
-    function _actionBounceBack(nodeID, toLoc) {
-        var moveNode = actionMoveNode(nodeID, toLoc);
-        var action = function(graph, t) {
-            // last time through, pop off the bounceback perform.
-            // it will then overwrite the initial perform with a moveNode that does nothing
-            if (t === 1) context.pop();
-            return moveNode(graph, t);
-        };
-        action.transitionable = true;
-        return action;
-    }
-
-
-    function cancel() {
-        drag.cancel();
-        context.enter(modeBrowse(context));
-    }
-
-
-    var drag = behaviorDrag()
-        .selector('.layer-notes .note')
-        .surface(d3_select('#map').node())
-        .origin(origin)
-        .on('start', start)
-        .on('move', move)
-        .on('end', end);
-
-
-    mode.enter = function() {
-        context.install(hover);
-        context.install(edit);
-
-        d3_select(window)
-            .on('keydown.drawWay', keydown)
-            .on('keyup.drawWay', keyup);
-
-        context.history()
-            .on('undone.drag-node', cancel);
-    };
-
-
-    mode.exit = function() {
-        context.ui().sidebar.hover.cancel();
-        context.uninstall(hover);
-        context.uninstall(edit);
-
-        d3_select(window)
-            .on('keydown.hover', null)
-            .on('keyup.hover', null);
-
-        context.history()
-            .on('undone.drag-node', null);
-
-        context.map()
-            .on('drawn.drag-node', null);
-
-        _activeEntity = null;
-
-        context.surface()
-            .classed('nope', false)
-            .classed('nope-suppressed', false)
-            .classed('nope-disabled', false)
-            .selectAll('.active')
-            .classed('active', false);
-
-        stopNudge();
-    };
-
-
-    mode.selectedIDs = function() {
-        if (!arguments.length) return _activeEntity ? [_activeEntity.id] : [];
-        // no assign
-        return mode;
-    };
-
-
-    mode.activeID = function() {
-        if (!arguments.length) return _activeEntity && _activeEntity.id;
-        // no assign
-        return mode;
-    };
-
-
-    mode.restoreSelectedIDs = function(_) {
-        if (!arguments.length) return _restoreSelectedIDs;
-        _restoreSelectedIDs = _;
-        return mode;
-    };
-
-
-    mode.behavior = drag;
-
-
-    return mode;
-}
diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js
index 61fe78891..143b57155 100644
--- a/modules/modes/select_note.js
+++ b/modules/modes/select_note.js
@@ -21,7 +21,7 @@ import { uiNoteEditor } from '../ui';
 
 export function modeSelectNote(context, selectedNoteID) {
     var mode = {
-        id: 'select_note',
+        id: 'select-note',
         button: 'browse'
     };
 
diff --git a/modules/osm/note.js b/modules/osm/note.js
index ed03c0504..c11207440 100644
--- a/modules/osm/note.js
+++ b/modules/osm/note.js
@@ -50,7 +50,7 @@ _extend(osmNote.prototype, {
     },
 
     update: function(attrs) {
-        return osmNote(this, attrs, {v: 1 + (this.v || 0)});
+        return osmNote(this, attrs); // {v: 1 + (this.v || 0)}
     },
 
     isNew: function() {
diff --git a/modules/renderer/map.js b/modules/renderer/map.js
index d6c7d809c..acb1f8f40 100644
--- a/modules/renderer/map.js
+++ b/modules/renderer/map.js
@@ -39,7 +39,6 @@ import {
     svgMidpoints,
     svgPoints,
     svgVertices,
-    svgNotes
 } from '../svg';
 
 import { uiFlash } from '../ui';
@@ -74,8 +73,6 @@ export function rendererMap(context) {
     var drawMidpoints = svgMidpoints(projection, context);
     var drawLabels = svgLabels(projection, context);
 
-    var drawNotes = svgNotes(projection, context);
-
     var _selection = d3_select(null);
     var supersurface = d3_select(null);
     var wrapper = d3_select(null);
@@ -215,8 +212,7 @@ export function rendererMap(context) {
             .call(context.background());
 
         context.on('enter.map',  function() {
-            if (map.editable() && !_transformed) {
-
+            if ((map.editable() && !_transformed) || map.noteEditable()) {
                 // redraw immediately any objects affected by a change in selectedIDs.
                 var graph = context.graph();
                 var selectedAndParents = {};
@@ -344,9 +340,6 @@ export function rendererMap(context) {
             .call(drawLabels, graph, data, filter, dimensions, fullRedraw)
             .call(drawPoints, graph, data, filter);
 
-        surface.selectAll('.data-layer-notes')
-            .call(drawNotes);
-
         dispatch.call('drawn', this, {full: true});
     }
 
@@ -356,7 +349,7 @@ export function rendererMap(context) {
         surface.selectAll('.layer-osm *').remove();
 
         var mode = context.mode();
-        if (mode && mode.id !== 'save' && mode.id !== 'select_note') {
+        if (mode && mode.id !== 'save' && mode.id !== 'select-note') {
             context.enter(modeBrowse(context));
         }
 
@@ -488,10 +481,11 @@ export function rendererMap(context) {
             .call(drawLayers);
 
         // OSM
-        if (map.editable()) {
+        if (map.editable() || map.noteEditable()) { // NOTE: when `map.noteEditable()` is removed, `redraw()` keep being called on timer
             context.loadTiles(projection, dimensions);
             drawVector(difference, extent);
-        } else {
+        }
+        else {
             editOff();
         }
 
@@ -855,6 +849,14 @@ export function rendererMap(context) {
     };
 
 
+    map.noteEditable = function() {
+        var noteLayer = surface.selectAll('.data-layer-notes');
+        if (!noteLayer.empty() && noteLayer.classed('disabled')) return false;
+
+        return map.zoom() >= context.minEditableZoom();
+    };
+
+
     map.minzoom = function(_) {
         if (!arguments.length) return minzoom;
         minzoom = _;
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index 879d91757..02035d905 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -29,7 +29,8 @@ export function uiSidebar(context) {
 
 
         function hover(what) {
-            if ((what instanceof osmNote)) {
+            if ((what instanceof osmNote) && (context.mode().id !== 'drag-note')) {
+                // TODO: figure out why `what` isn't an updated note. Won't hover since .loc doesn't match
                 _wasNote = true;
                 var notes = d3_selectAll('.note');
                 notes