Refactor text point scaling

Author: rreusser

src/components/drawing/index.js

@@ -692,6 +692,36 @@ drawing.setPointGroupScale = function(selection, x, y) {
     return scale;
 };
 
+var TEXT_POINT_LAST_TRANSLATION_RE = /translate\([^)]*\)\s*$/;
+
+drawing.setTextPointsScale = function(selection, xScale, yScale) {
+    selection.each(function() {
+        var transforms;
+        var el = d3.select(this);
+        var text = el.select('text');
+        var x = parseFloat(text.attr('x'));
+        var y = parseFloat(text.attr('y'));
+
+        var existingTransform = el.attr('transform').match(TEXT_POINT_LAST_TRANSLATION_RE);
+
+        if(xScale === 1 && yScale === 1) {
+            transforms = [];
+        } else {
+            transforms = [
+                'translate(' + x + ',' + y + ')',
+                'scale(' + xScale + ',' + yScale + ')',
+                'translate(' + (-x) + ',' + (-y) + ')',
+            ];
+        }
+
+        if(existingTransform) {
+            transforms.push(existingTransform);
+        }
+
+        el.attr('transform', transforms.join(' '));
+    });
+};
+
 drawing.measureText = function(tester, text, font) {
     var dummyText = tester.append('text')
         .text(text)

src/plots/cartesian/dragbox.js

@@ -30,7 +30,6 @@ var constants = require('./constants');
 var MINDRAG = constants.MINDRAG;
 var MINZOOM = constants.MINZOOM;
 
-
 // flag for showing "doubleclick to zoom out" only at the beginning
 var SHOWZOOMOUTTIP = true;
 
@@ -747,6 +746,10 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                 // as a whole:
                 .select('.scatterlayer').selectAll('.points').selectAll('.point')
                     .call(Drawing.setPointGroupScale, xScaleFactor2, yScaleFactor2);
+
+            subplot.plot.select('.scatterlayer')
+                .selectAll('.points').selectAll('.textpoint')
+                .call(Drawing.setTextPointsScale, xScaleFactor2, yScaleFactor2);
         }
     }
 

src/plots/cartesian/transition_axes.js

@@ -17,8 +17,6 @@ var Drawing = require('../../components/drawing');
 var Axes = require('./axes');
 var axisRegex = /((x|y)([2-9]|[1-9][0-9]+)?)axis$/;
 
-var LAST_TRANSLATION_RE = /translate\([^)]*\)\s*$/;
-
 module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCompleteCallback) {
     var fullLayout = gd._fullLayout;
     var axes = [];
@@ -150,17 +148,11 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo
             // This is specifically directed at scatter traces, applying an inverse
             // scale to individual points to counteract the scale of the trace
             // as a whole:
-            .selectAll('.points').selectAll('.point')
+            .select('.scatterlayer').selectAll('.points').selectAll('.point')
                 .call(Drawing.setPointGroupScale, 1, 1);
 
-        subplot.plot.selectAll('.points').selectAll('.textpoint')
-            .each(function() {
-                var el = d3.select(this);
-                var existingTransform = el.attr('transform').match(LAST_TRANSLATION_RE);
-                el.attr('transform', existingTransform || '');
-            });
-
-
+        subplot.plot.select('.scatterlayer').selectAll('.points').selectAll('.textpoint')
+            .call(Drawing.setTextPointsScale, 1, 1);
     }
 
     function updateSubplot(subplot, progress) {
@@ -240,26 +232,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo
                 .call(Drawing.setPointGroupScale, 1 / xScaleFactor, 1 / yScaleFactor);
 
         subplot.plot.selectAll('.points').selectAll('.textpoint')
-            .each(function() {
-                var el = d3.select(this);
-                var text = el.select('text');
-                var x = parseFloat(text.attr('x'));
-                var y = parseFloat(text.attr('y'));
-
-                var existingTransform = el.attr('transform').match(LAST_TRANSLATION_RE);
-
-                var transforms = [
-                    'translate(' + x + ',' + y + ')',
-                    'scale(' + (1 / xScaleFactor) + ',' + (1 / yScaleFactor) + ')',
-                    'translate(' + (-x) + ',' + (-y) + ')',
-                ];
-
-                if(existingTransform) {
-                    transforms.push(existingTransform);
-                }
-
-                el.attr('transform', transforms.join(' '));
-            });
+            .call(Drawing.setTextPointsScale, 1 / xScaleFactor, 1 / yScaleFactor);
     }
 
     var onComplete;