From 98d484fc1f6ceaa26d50b0083431121cfcfe21fc Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sun, 30 Oct 2016 11:35:36 -0400
Subject: [PATCH] Restore hover behavior to restrictions editor, add breathe
 behavior

The issue was: now that selections are immutable you can't add behaviors
to them unless they are already entered.  i.e. the surface selection in
enter does not end up being the real surface after merging to update.
---
 modules/behavior/hover.js         | 61 ++++++++++++++++---------------
 modules/ui/fields/restrictions.js | 26 ++++++++++---
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/modules/behavior/hover.js b/modules/behavior/hover.js
index bc1297c4e..9161bb382 100644
--- a/modules/behavior/hover.js
+++ b/modules/behavior/hover.js
@@ -44,36 +44,6 @@ export function behaviorHover() {
     var hover = function(__) {
         selection = __;
 
-        function enter(d) {
-            if (d === target) return;
-
-            target = d;
-
-            selection.selectAll('.hover')
-                .classed('hover', false);
-            selection.selectAll('.hover-suppressed')
-                .classed('hover-suppressed', false);
-
-            if (target instanceof osmEntity) {
-                var selector = '.' + target.id;
-
-                if (target.type === 'relation') {
-                    target.members.forEach(function(member) {
-                        selector += ', .' + member.id;
-                    });
-                }
-
-                var suppressed = altDisables && d3.event && d3.event.altKey;
-
-                selection.selectAll(selector)
-                    .classed(suppressed ? 'hover-suppressed' : 'hover', true);
-
-                dispatch.call('hover', this, target.id);
-            } else {
-                dispatch.call('hover', this, null);
-            }
-        }
-
         selection
             .on('mouseover.hover', mouseover)
             .on('mouseout.hover', mouseout)
@@ -110,6 +80,37 @@ export function behaviorHover() {
             d3.select(window)
                 .on('mouseup.hover', null, true);
         }
+
+
+        function enter(d) {
+            if (d === target) return;
+            target = d;
+
+            selection.selectAll('.hover')
+                .classed('hover', false);
+            selection.selectAll('.hover-suppressed')
+                .classed('hover-suppressed', false);
+
+            if (target instanceof osmEntity) {
+                var selector = '.' + target.id;
+
+                if (target.type === 'relation') {
+                    target.members.forEach(function(member) {
+                        selector += ', .' + member.id;
+                    });
+                }
+
+                var suppressed = altDisables && d3.event && d3.event.altKey;
+
+                selection.selectAll(selector)
+                    .classed(suppressed ? 'hover-suppressed' : 'hover', true);
+
+                dispatch.call('hover', this, target.id);
+            } else {
+                dispatch.call('hover', this, null);
+            }
+        }
+
     };
 
 
diff --git a/modules/ui/fields/restrictions.js b/modules/ui/fields/restrictions.js
index 3a0306e04..77a3da820 100644
--- a/modules/ui/fields/restrictions.js
+++ b/modules/ui/fields/restrictions.js
@@ -1,7 +1,10 @@
 import * as d3 from 'd3';
 import { t } from '../../util/locale';
 
-import { behaviorHover } from '../../behavior/index';
+import {
+    behaviorBreathe,
+    behaviorHover
+} from '../../behavior/index';
 
 import {
     osmEntity,
@@ -38,6 +41,7 @@ import {
 
 export function uiFieldRestrictions(field, context) {
     var dispatch = d3.dispatch('change'),
+        breathe = behaviorBreathe(context),
         hover = behaviorHover(context),
         vertexID,
         fromNodeID;
@@ -88,15 +92,20 @@ export function uiFieldRestrictions(field, context) {
             drawTurns = svgTurns(projection, context);
 
         enter
-            .call(drawLayers)
-            .selectAll('.surface')
-            .call(hover);
-
+            .call(drawLayers);
 
         wrap = wrap
             .merge(enter);
 
-        var surface = wrap.selectAll('.surface')
+        var surface = wrap.selectAll('.surface');
+
+        if (!enter.empty()) {
+            surface
+                .call(breathe)
+                .call(hover);
+        }
+
+        surface
             .call(utilSetDimensions, d)
             .call(drawVertices, graph, [vertex], filter, extent, z)
             .call(drawLines, graph, intersection.ways, filter)
@@ -130,6 +139,10 @@ export function uiFieldRestrictions(field, context) {
 
 
         function click() {
+            surface
+                .call(breathe.off)
+                .call(breathe);
+
             var datum = d3.event.target.__data__;
             if (datum instanceof osmEntity) {
                 fromNodeID = intersection.adjacentNodeId(datum.id);
@@ -211,6 +224,7 @@ export function uiFieldRestrictions(field, context) {
     restrictions.off = function(selection) {
         selection.selectAll('.surface')
             .call(hover.off)
+            .call(breathe.off)
             .on('click.restrictions', null)
             .on('mouseover.restrictions', null)
             .on('mouseout.restrictions', null);