Introduce colormodel "rgba256" to image traces

Author: antoinerg

src/traces/image/attributes.js

@@ -13,12 +13,13 @@ var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplat
 var extendFlat = require('../../lib/extend').extendFlat;
 var colormodel = require('./constants').colormodel;
 
-var cm = ['rgb', 'rgba', 'hsl', 'hsla'];
+var cm = ['rgb', 'rgba', 'rgba256', 'hsl', 'hsla'];
 var zminDesc = [];
 var zmaxDesc = [];
 for(var i = 0; i < cm.length; i++) {
-    zminDesc.push('For the `' + cm[i] + '` colormodel, it is [' + colormodel[cm[i]].min.join(', ') + '].');
-    zmaxDesc.push('For the `' + cm[i] + '` colormodel, it is [' + colormodel[cm[i]].max.join(', ') + '].');
+    var cr = colormodel[cm[i]];
+    zminDesc.push('For the `' + cm[i] + '` colormodel, it is [' + (cr.zminDflt || cr.min).join(', ') + '].');
+    zmaxDesc.push('For the `' + cm[i] + '` colormodel, it is [' + (cr.zmaxDflt || cr.max).join(', ') + '].');
 }
 
 module.exports = extendFlat({
@@ -47,7 +48,7 @@ module.exports = extendFlat({
         editType: 'calc',
         description: [
             'Color model used to map the numerical color components described in `z` into colors.',
-            'If `source` is specified, this attribute will be set to `rgba`.'
+            'If `source` is specified, this attribute will be set to `rgba256`.'
         ].join(' ')
     },
     zmin: {

src/traces/image/calc.js

@@ -67,9 +67,9 @@ function constrain(min, max) {
 
 // Generate a function to scale color components according to zmin/zmax and the colormodel
 function makeScaler(trace) {
-    var colormodel = trace.colormodel;
+    var cr = constants.colormodel[trace.colormodel];
+    var colormodel = (cr.colormodel || trace.colormodel);
     var n = colormodel.length;
-    var cr = constants.colormodel[colormodel];
 
     trace._sArray = [];
     // Loop over all color components

src/traces/image/constants.js

@@ -10,6 +10,8 @@
 
 module.exports = {
     colormodel: {
+        // min and max define the numerical range accepted in CSS
+        // If z(min|max)Dflt are not defined, z(min|max) will default to min/max
         rgb: {
             min: [0, 0, 0],
             max: [255, 255, 255],
@@ -22,6 +24,15 @@ module.exports = {
             fmt: function(c) {return c.slice(0, 4);},
             suffix: ['', '', '', '']
         },
+        rgba256: {
+            colormodel: 'rgba', // because rgba256 is not an accept colormodel in CSS
+            zminDflt: [0, 0, 0, 0],
+            zmaxDflt: [255, 255, 255, 255],
+            min: [0, 0, 0, 0],
+            max: [255, 255, 255, 1],
+            fmt: function(c) {return c.slice(0, 4);},
+            suffix: ['', '', '', '']
+        },
         hsl: {
             min: [0, 0, 0],
             max: [360, 100, 100],

src/traces/image/defaults.js

@@ -34,14 +34,17 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
     coerce('dx');
     coerce('dy');
 
+    var cm;
     if(traceOut._hasZ) {
         coerce('colormodel');
-        coerce('zmin', constants.colormodel[traceOut.colormodel].min);
-        coerce('zmax', constants.colormodel[traceOut.colormodel].max);
+        cm = constants.colormodel[traceOut.colormodel];
+        coerce('zmin', (cm.zminDflt || cm.min));
+        coerce('zmax', (cm.zmaxDflt || cm.max));
     } else if(traceOut._hasSource) {
-        traceOut.colormodel = 'rgba';
-        traceOut.zmin = constants.colormodel[traceOut.colormodel].min;
-        traceOut.zmax = constants.colormodel[traceOut.colormodel].max;
+        traceOut.colormodel = 'rgba256';
+        cm = constants.colormodel[traceOut.colormodel];
+        traceOut.zmin = (cm.zminDflt || cm.min);
+        traceOut.zmax = (cm.zmaxDflt || cm.max);
     }
 
     coerce('text');

src/traces/image/hover.js

@@ -46,10 +46,11 @@ module.exports = function hoverPoints(pointData, xval, yval) {
         if(parts.indexOf('color') !== -1) fmtColor = true;
     }
 
-    var colormodel = trace.colormodel;
+    var cr = constants.colormodel[trace.colormodel];
+    var colormodel = cr.colormodel || trace.colormodel;
     var dims = colormodel.length;
     var c = trace._scaler(pixel);
-    var s = constants.colormodel[colormodel].suffix;
+    var s = cr.suffix;
 
     var colorstring = [];
     if(trace.hovertemplate || fmtColor) {

src/traces/image/plot.js

@@ -99,7 +99,6 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
 
         // Create a new canvas and draw magnified pixels on it
         function drawMagnifiedPixelsOnCanvas(readPixel) {
-            var colormodel = trace.colormodel;
             var canvas = document.createElement('canvas');
             canvas.width = imageWidth;
             canvas.height = imageHeight;
@@ -108,7 +107,9 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
             var ipx = function(i) {return Lib.constrain(Math.round(xa.c2p(x0 + i * dx) - left), 0, imageWidth);};
             var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y0 + j * dy) - top), 0, imageHeight);};
 
-            var fmt = constants.colormodel[colormodel].fmt;
+            var cr = constants.colormodel[trace.colormodel];
+            var colormodel = (cr.colormodel || trace.colormodel);
+            var fmt = cr.fmt;
             var c;
             for(i = 0; i < cd0.w; i++) {
                 var ipx0 = ipx(i); var ipx1 = ipx(i + 1);

test/image/mocks/image_adventurer.json

@@ -101,6 +101,7 @@ describe('image supplyDefaults', function() {
         var tests = [
           ['rgb', [0, 0, 0], [255, 255, 255]],
           ['rgba', [0, 0, 0, 0], [255, 255, 255, 1]],
+          ['rgba256', [0, 0, 0, 0], [255, 255, 255, 255]],
           ['hsl', [0, 0, 0], [360, 100, 100]],
           ['hsla', [0, 0, 0, 0], [360, 100, 100, 1]]
         ];
@@ -140,13 +141,13 @@ describe('image supplyDefaults', function() {
         expect(traceOut.zmax).toEqual([20, 100, 100, 1], 'zmax default');
     });
 
-    it('should set colormodel to rgba when source is defined', function() {
+    it('should set colormodel to rgba256 when source is defined', function() {
         traceIn = {
             type: 'image',
             source: 'data:image/png;base64,asdf'
         };
         supplyDefaults(traceIn, traceOut);
-        expect(traceOut.colormodel).toBe('rgba');
+        expect(traceOut.colormodel).toBe('rgba256');
     });
 
     it('should override zmin/zmax when source is defined', function() {
@@ -157,9 +158,9 @@ describe('image supplyDefaults', function() {
             zmax: 50
         };
         supplyDefaults(traceIn, traceOut);
-        expect(traceOut.colormodel).toBe('rgba');
+        expect(traceOut.colormodel).toBe('rgba256');
         expect(traceOut.zmin).toEqual([0, 0, 0, 0]);
-        expect(traceOut.zmax).toEqual([255, 255, 255, 1]);
+        expect(traceOut.zmax).toEqual([255, 255, 255, 255]);
     });
 });
 
@@ -543,7 +544,7 @@ describe('image hover:', function() {
             .then(function() {_hover(255, 295);})
             .then(function() {
                 assertHoverLabelContent({
-                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 254]\nRGBA: [128, 77, 54, 1]',
+                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 255]\nRGBA: [128, 77, 54, 1]',
                     name: ''
                 });
             })
@@ -573,7 +574,7 @@ describe('image hover:', function() {
             .then(function() {_hover(255, 295);})
             .then(function() {
                 assertHoverLabelContent({
-                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 254]\nHSLA: [128°, 77%, 54%, 1]',
+                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 255]\nHSLA: [128°, 77%, 54%, 1]',
                     name: ''
                 });
             })