add 'colorbars' edit type to layout flags

Author: etpinard

src/plot_api/edit_types.js

@@ -35,7 +35,7 @@ var layoutOpts = {
     extras: ['none'],
     flags: [
         'calc', 'plot', 'legend', 'ticks', 'axrange',
-        'layoutstyle', 'modebar', 'camera', 'arraydraw'
+        'layoutstyle', 'modebar', 'camera', 'arraydraw', 'colorbars'
     ],
     description: [
         'layout attributes should include an `editType` string matching this flaglist.',
@@ -49,7 +49,8 @@ var layoutOpts = {
         '*modebar* just updates the modebar.',
         '*camera* just updates the camera settings for gl3d scenes.',
         '*arraydraw* allows component arrays to invoke the redraw routines just for the',
-        'component(s) that changed.'
+        'component(s) that changed.',
+        '*colorbars* only redraws colorbars.'
     ].join(' ')
 };
 

src/plot_api/plot_api.js

@@ -1871,6 +1871,7 @@ function relayout(gd, astr, val) {
         if(flags.ticks) seq.push(subroutines.doTicksRelayout);
         if(flags.modebar) seq.push(subroutines.doModeBar);
         if(flags.camera) seq.push(subroutines.doCamera);
+        if(flags.colorbars) seq.push(subroutines.doColorBars);
 
         seq.push(emitAfterPlot);
     }
@@ -2382,7 +2383,7 @@ function update(gd, traceUpdate, layoutUpdate, _traces) {
         axRangeSupplyDefaultsByPass(gd, relayoutFlags, relayoutSpecs) || Plots.supplyDefaults(gd);
 
         if(restyleFlags.style) seq.push(subroutines.doTraceStyle);
-        if(restyleFlags.colorbars) seq.push(subroutines.doColorBars);
+        if(restyleFlags.colorbars || relayoutFlags.colorbars) seq.push(subroutines.doColorBars);
         if(relayoutFlags.legend) seq.push(subroutines.doLegend);
         if(relayoutFlags.layoutstyle) seq.push(subroutines.layoutStyles);
         if(relayoutFlags.axrange) addAxRangeSequence(seq, relayoutSpecs.rangesAltered);
@@ -2779,7 +2780,7 @@ exports.react = function(gd, data, layout, config) {
 
             seq.push(Plots.previousPromises);
             if(restyleFlags.style) seq.push(subroutines.doTraceStyle);
-            if(restyleFlags.colorbars) seq.push(subroutines.doColorBars);
+            if(restyleFlags.colorbars || relayoutFlags.colorbars) seq.push(subroutines.doColorBars);
             if(relayoutFlags.legend) seq.push(subroutines.doLegend);
             if(relayoutFlags.layoutstyle) seq.push(subroutines.layoutStyles);
             if(relayoutFlags.axrange) addAxRangeSequence(seq);

src/plot_api/plot_schema.js

@@ -373,7 +373,9 @@ function layoutHeadAttr(fullLayout, head) {
      */
     for(key in Registry.componentsRegistry) {
         _module = Registry.componentsRegistry[key];
-        if(!_module.schema && (head === _module.name)) {
+        if(_module.name === 'colorscale' && head.indexOf('coloraxis') === 0) {
+            return _module.layoutAttributes[head];
+        } else if(!_module.schema && (head === _module.name)) {
             return _module.layoutAttributes;
         }
     }

test/jasmine/tests/colorbar_test.js

@@ -2,6 +2,8 @@ var d3 = require('d3');
 
 var Plotly = require('@lib/index');
 var Colorbar = require('@src/components/colorbar');
+var Plots = require('@src/plots/plots');
+var subroutines = require('@src/plot_api/subroutines');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -433,5 +435,71 @@ describe('Test colorbar:', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('can edit colorbar visuals in optimized edit pathway', function(done) {
+            spyOn(subroutines, 'doColorBars').and.callThrough();
+            spyOn(Plots, 'doCalcdata').and.callThrough();
+
+            function getOutline(cb) {
+                return Number(cb.select('.cboutline').node().style['stroke-width']);
+            }
+
+            function _assert(msg, exp) {
+                var gd3 = d3.select(gd);
+                var cb0 = gd3.select('.cbtrace0');
+                var cb1 = gd3.select('.cbcoloraxis');
+
+                if(msg !== 'base') {
+                    expect(subroutines.doColorBars).toHaveBeenCalledTimes(1);
+                    expect(Plots.doCalcdata).toHaveBeenCalledTimes(0);
+                }
+                subroutines.doColorBars.calls.reset();
+                Plots.doCalcdata.calls.reset();
+
+                expect(getOutline(cb0)).toBe(exp.outline[0], 'trace0 cb outline');
+                expect(getOutline(cb1)).toBe(exp.outline[1], 'coloraxis cb outline');
+            }
+
+            Plotly.newPlot(gd, [{
+                type: 'heatmap',
+                z: [[1, 2, 3], [2, 1, 2]],
+                uid: 'trace0'
+            }, {
+                y: [1, 2, 3],
+                marker: {color: [2, 1, 2], coloraxis: 'coloraxis'}
+            }], {
+                width: 500,
+                height: 500
+            })
+            .then(function() { _assert('base', {outline: [1, 1]}); })
+            .then(function() {
+                return Plotly.restyle(gd, 'colorbar.outlinewidth', 2, [0]);
+            })
+            .then(function() { _assert('after restyle', {outline: [2, 1]}); })
+            .then(function() {
+                return Plotly.relayout(gd, 'coloraxis.colorbar.outlinewidth', 5);
+            })
+            .then(function() { _assert('after relayout', {outline: [2, 5]}); })
+            .then(function() {
+                return Plotly.update(gd, {'colorbar.outlinewidth': 1}, {}, [0]);
+            })
+            .then(function() { _assert('after trace update', {outline: [1, 5]}); })
+            .then(function() {
+                return Plotly.update(gd, {}, {'coloraxis.colorbar.outlinewidth': 1});
+            })
+            .then(function() { _assert('after layout update', {outline: [1, 1]}); })
+            .then(function() {
+                gd.data[0].colorbar = {outlinewidth: 10};
+                return Plotly.react(gd, gd.data, gd.layout);
+            })
+            .then(function() { _assert('after trace react', {outline: [10, 1]}); })
+            .then(function() {
+                gd.layout.coloraxis = {colorbar: {outlinewidth: 10}};
+                return Plotly.react(gd, gd.data, gd.layout);
+            })
+            .then(function() { _assert('after layout trace', {outline: [10, 10]}); })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });