fix and 🔒 problem with dragging colorbars in sub-containers

Author: alexcjohnson

Diff for: src/components/colorbar/draw.js

@@ -467,15 +467,10 @@ module.exports = function draw(gd, id) {
         }
 
         function drawTitle(titleClass, titleOpts) {
-            var trace = getTrace();
-            var propName = 'colorbar.title';
-            var containerName = trace._module.colorbar.container;
-            if(containerName) propName = containerName + '.' + propName;
-
             var dfltTitleOpts = {
                 propContainer: cbAxisOut,
-                propName: propName,
-                traceIndex: trace.index,
+                propName: getPropName('title'),
+                traceIndex: getTrace().index,
                 placeholder: fullLayout._dfltTitle.colorbar,
                 containerGroup: container.select('.cbtitle')
             };
@@ -627,11 +622,10 @@ module.exports = function draw(gd, id) {
                     setCursor(container);
 
                     if(xf !== undefined && yf !== undefined) {
-                        Registry.call('_guiRestyle',
-                            gd,
-                            {'colorbar.x': xf, 'colorbar.y': yf},
-                            getTrace().index
-                        );
+                        var update = {};
+                        update[getPropName('x')] = xf;
+                        update[getPropName('y')] = yf;
+                        Registry.call('_guiRestyle', gd, update, getTrace().index);
                     }
                 }
             });
@@ -649,6 +643,14 @@ module.exports = function draw(gd, id) {
         }
     }
 
+    function getPropName(suffix) {
+        var trace = getTrace();
+        var propName = 'colorbar.';
+        var containerName = trace._module.colorbar.container;
+        if(containerName) propName = containerName + '.' + propName;
+        return propName + suffix;
+    }
+
     // setter/getters for every item defined in opts
     Object.keys(opts).forEach(function(name) {
         component[name] = function(v) {

Diff for: test/jasmine/tests/colorbar_test.js

@@ -8,6 +8,7 @@ var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 var supplyAllDefaults = require('../assets/supply_defaults');
 var assertPlotSize = require('../assets/custom_assertions').assertPlotSize;
+var drag = require('../assets/drag');
 
 
 describe('Test colorbar:', function() {
@@ -354,5 +355,49 @@ describe('Test colorbar:', function() {
             .catch(failTest)
             .then(done);
         });
+
+        function getCBNode() {
+            return document.querySelector('.colorbar');
+        }
+
+        it('can drag root-level colorbars in editable mode', function(done) {
+            Plotly.newPlot(gd,
+                [{z: [[1, 2], [3, 4]], type: 'heatmap'}],
+                {width: 400, height: 400},
+                {editable: true}
+            )
+            .then(function() {
+                expect(gd.data[0].colorbar).toBeUndefined();
+                expect(gd._fullData[0].colorbar.x).toBe(1.02);
+                expect(gd._fullData[0].colorbar.y).toBe(0.5);
+                return drag(getCBNode(), -100, 100);
+            })
+            .then(function() {
+                expect(gd.data[0].colorbar.x).toBeWithin(0.591, 0.01);
+                expect(gd.data[0].colorbar.y).toBeWithin(0.045, 0.01);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('can drag marker-level colorbars in editable mode', function(done) {
+            Plotly.newPlot(gd,
+                [{y: [1, 2, 1], marker: {color: [0, 1, 2], showscale: true}}],
+                {width: 400, height: 400},
+                {editable: true}
+            )
+            .then(function() {
+                expect(gd.data[0].marker.colorbar).toBeUndefined();
+                expect(gd._fullData[0].marker.colorbar.x).toBe(1.02);
+                expect(gd._fullData[0].marker.colorbar.y).toBe(0.5);
+                return drag(getCBNode(), -100, 100);
+            })
+            .then(function() {
+                expect(gd.data[0].marker.colorbar.x).toBeWithin(0.591, 0.01);
+                expect(gd.data[0].marker.colorbar.y).toBeWithin(0.045, 0.01);
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });