From b5eaa76d1a66cb2787d86667742cb60df1553482 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 18 Dec 2017 00:13:16 -0500
Subject: [PATCH] Optimization: when moving stuff around, don't exit/enter
 nodes

This avoids thrashing the DOM. The positions of the nodes will still
get updated by the update selection.
---
 modules/svg/points.js   | 11 ++++++++++-
 modules/svg/vertices.js | 14 +++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/modules/svg/points.js b/modules/svg/points.js
index dfa32e575..124dba5bc 100644
--- a/modules/svg/points.js
+++ b/modules/svg/points.js
@@ -21,6 +21,15 @@ export function svgPoints(projection, context) {
     }
 
 
+    // Avoid exit/enter if we're just moving stuff around.
+    // The node will get a new version but we only need to run the update selection.
+    function fastEntityKey(d) {
+        var mode = context.mode();
+        var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id);
+        return isMoving ? d.id : osmEntity.key(d);
+    }
+
+
     function drawTargets(selection, graph, entities, filter) {
         var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
         var targets = selection.selectAll('.point.target')
@@ -64,7 +73,7 @@ export function svgPoints(projection, context) {
 
         var groups = layer.selectAll('g.point')
             .filter(filter)
-            .data(points, osmEntity.key);
+            .data(points, fastEntityKey);
 
         groups.exit()
             .remove();
diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js
index 35a1ac208..06ab1e7b6 100644
--- a/modules/svg/vertices.js
+++ b/modules/svg/vertices.js
@@ -32,6 +32,14 @@ export function svgVertices(projection, context) {
         return b.loc[1] - a.loc[1];
     }
 
+    // Avoid exit/enter if we're just moving stuff around.
+    // The node will get a new version but we only need to run the update selection.
+    function fastEntityKey(d) {
+        var mode = context.mode();
+        var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id);
+        return isMoving ? d.id : osmEntity.key(d);
+    }
+
 
     function draw(selection, graph, vertices, sets, filter) {
         sets = sets || { selected: {}, important: {}, hovered: {} };
@@ -89,7 +97,7 @@ export function svgVertices(projection, context) {
 
         var groups = selection.selectAll('g.vertex')
             .filter(filter)
-            .data(vertices, osmEntity.key);
+            .data(vertices, fastEntityKey);
 
         // exit
         groups.exit()
@@ -252,7 +260,7 @@ export function svgVertices(projection, context) {
         var wireframe = context.surface().classed('fill-wireframe');
         var zoom = ktoz(projection.scale());
         var mode = context.mode();
-        var isDrawing = mode && /^(add|draw|drag)/.test(mode.id);
+        var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id);
 
         // Collect important vertices from the `entities` list..
         // (during a paritial redraw, it will not contain everything)
@@ -283,7 +291,7 @@ export function svgVertices(projection, context) {
             hovered: _currHover           // hovered + siblings of hovered (render only in draw modes)
         };
 
-        var all = _assign({}, (isDrawing ? _currHover : {}), _currSelected, _currPersistent);
+        var all = _assign({}, (isMoving ? _currHover : {}), _currSelected, _currPersistent);
 
         // Draw the vertices..
         // The filter function controls the scope of what objects d3 will touch (exit/enter/update)