first-cut editType:'style' pathway for sploms

- using `_module.editStyle`, and not _module.style which
  would lead to double drawing from Plots.style.
- in brief, for 'style' edits, we:
  + clear gl canvas
  + merge new convertMarkerStyle() into matrixOptions
  + call matrix.update and matrix.draw

Author: etpinard

src/plot_api/subroutines.js

@@ -466,12 +466,34 @@ exports.drawMainTitle = function(gd) {
 // supplyDefaults brought in an array that was already
 // in gd.data but not in gd._fullData previously
 exports.doTraceStyle = function(gd) {
-    for(var i = 0; i < gd.calcdata.length; i++) {
-        var cdi = gd.calcdata[i],
-            _module = ((cdi[0] || {}).trace || {})._module || {},
-            arraysToCalcdata = _module.arraysToCalcdata;
+    var fullLayout = gd._fullLayout;
+    var editStyleCalls = [];
+    var i;
+
+    for(i = 0; i < gd.calcdata.length; i++) {
+        var cd = gd.calcdata[i];
+        var cd0 = cd[0] || {};
+        var trace = cd0.trace || {};
+        var _module = trace._module || {};
+
+        var arraysToCalcdata = _module.arraysToCalcdata;
+        if(arraysToCalcdata) arraysToCalcdata(cd, trace);
+
+        var editStyle = _module.editStyle;
+        if(editStyle) editStyleCalls.push({fn: editStyle, cd0: cd0});
+    }
+
+    if(editStyleCalls.length) {
+        clearGlCanvases(gd);
 
-        if(arraysToCalcdata) arraysToCalcdata(cdi, cdi[0].trace);
+        if(fullLayout._hasOnlyLargeSploms) {
+            fullLayout._splomGrid.draw();
+        }
+
+        for(i = 0; i < editStyleCalls.length; i++) {
+            var edit = editStyleCalls[i];
+            edit.fn(gd, edit.cd0);
+        }
     }
 
     Plots.style(gd);

src/traces/splom/attributes.js

@@ -8,11 +8,16 @@
 
 'use strict';
 
+var scatterAttrs = require('../scatter/attributes');
+var colorAttrs = require('../../components/colorscale/attributes');
 var scatterGlAttrs = require('../scattergl/attributes');
 var cartesianIdRegex = require('../../plots/cartesian/constants').idRegex;
 var templatedArray = require('../../plot_api/plot_template').templatedArray;
 var extendFlat = require('../../lib/extend').extendFlat;
 
+var scatterMarkerAttrs = scatterAttrs.marker;
+var scatterMarkerLineAttrs = scatterMarkerAttrs.line;
+
 function makeAxesValObject(axLetter) {
     return {
         valType: 'info_array',
@@ -96,7 +101,21 @@ module.exports = {
             'this trace\'s (x,y) coordinates.'
         ].join(' ')
     }),
-    marker: scatterGlAttrs.marker,
+
+    marker: extendFlat({}, colorAttrs('marker'), {
+        symbol: scatterMarkerAttrs.symbol,
+        size: scatterMarkerAttrs.size,
+        sizeref: scatterMarkerAttrs.sizeref,
+        sizemin: scatterMarkerAttrs.sizemin,
+        sizemode: scatterMarkerAttrs.sizemode,
+        opacity: scatterMarkerAttrs.opacity,
+        colorbar: scatterMarkerAttrs.colorbar,
+        line: extendFlat({}, colorAttrs('marker.line'), {
+            width: scatterMarkerLineAttrs.width,
+            editType: 'calc'
+        }),
+        editType: 'calc'
+    }),
 
     xaxes: makeAxesValObject('x'),
     yaxes: makeAxesValObject('y'),

src/traces/splom/index.js

@@ -306,6 +306,23 @@ function plotOne(gd, cd0) {
     scene.draw();
 }
 
+function editStyle(gd, cd0) {
+    var trace = cd0.trace;
+    var scene = gd._fullLayout._splomScenes[trace.uid];
+
+    calcColorscales(trace);
+
+    Lib.extendFlat(scene.matrixOptions, convertMarkerStyle(trace));
+    // TODO [un]selected styles?
+
+    var opts = Lib.extendFlat({}, scene.matrixOptions, scene.viewOpts);
+
+    // TODO this is too long for arrayOk attributes!
+    scene.matrix.update(opts, null);
+
+    scene.draw();
+}
+
 function hoverPoints(pointData, xval, yval) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
@@ -476,6 +493,7 @@ module.exports = {
     hoverPoints: hoverPoints,
     selectPoints: selectPoints,
     styleOnSelect: styleOnSelect,
+    editStyle: editStyle,
 
     meta: {
         description: [

test/jasmine/tests/splom_test.js

@@ -808,6 +808,10 @@ describe('Test splom update switchboard:', function() {
         });
     }
 
+    function toPlainArray(typedArray) {
+        return Array.prototype.slice.call(typedArray);
+    }
+
     it('@gl should trigger minimal sequence for axis range updates (large splom case)', function(done) {
         var fig = Lib.extendDeep({}, require('@mocks/splom_large.json'));
         var matrix, regl, splomGrid;
@@ -851,6 +855,55 @@ describe('Test splom update switchboard:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('@gl should trigger minimal sequence for marker style updates', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/splom_0.json'));
+        var scene, matrix, regl;
+
+        Plotly.plot(gd, fig).then(function() {
+            var fullLayout = gd._fullLayout;
+            var trace = gd._fullData[0];
+            scene = fullLayout._splomScenes[trace.uid];
+            matrix = scene.matrix;
+            regl = matrix.regl;
+
+            methods = [
+                [Plots, 'supplyDefaults'],
+                [Plots, 'doCalcdata'],
+                [Axes, 'doTicks'],
+                [regl, 'clear'],
+                [matrix, 'update'],
+                [matrix, 'draw']
+            ];
+            addSpies();
+
+            expect(toPlainArray(scene.matrixOptions.color))
+                .toBeCloseToArray([31, 119, 180, 255], 1, 'base color');
+            expect(scene.matrixOptions.size).toBe(3, 'base size');
+            expect(fullLayout.xaxis.range).toBeCloseToArray([0.851, 3.148], 1, 'base xrng');
+
+            return Plotly.restyle(gd, 'marker.color', 'black');
+        })
+        .then(function() {
+            var msg = 'after scaler marker.color restyle';
+
+            assertSpies(msg, [
+                ['supplyDefaults', 1],
+                ['doCalcdata', 0],
+                ['doTicks', 0],
+                ['regl clear', 1],
+                ['update', 1],
+                ['draw', 1]
+            ]);
+
+            expect(toPlainArray(scene.matrixOptions.color))
+                .toBeCloseToArray([0, 0, 0, 255], 1, msg);
+
+            return Plotly.restyle(gd, 'marker.color', [['red', 'green', 'blue']]);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('Test splom hover:', function() {