Skip to content

Scatter3d and scattergl handling rgb colors with extra alpha values #3904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jul 2, 2019
Merged

Scatter3d and scattergl handling rgb colors with extra alpha values #3904

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1f38246
filter gl3d alpha from rgba result when having only rgb
archmoj May 23, 2019
d554594
edit gl3d mocks which should have rgba instead of rgb
archmoj May 24, 2019
ccf70fb
fixup splom and scattergl jasmine tests
archmoj May 24, 2019
80a0512
add image test to drop alpha when rgb used with alpha
archmoj May 24, 2019
863d76f
Revert "filter gl3d alpha from rgba result when having only rgb"
archmoj May 24, 2019
caddbaa
Revert "fixup splom and scattergl jasmine tests"
archmoj May 24, 2019
fccc05a
patch color-parse in order not to read alpha with rgb key
archmoj May 24, 2019
062294f
bump color-parse, color-alpha, color-normalize, gl-text, regl-splom, …
archmoj Jul 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Revert "filter gl3d alpha from rgba result when having only rgb" 
This reverts commit 1f38246.
  • Loading branch information
@archmoj
archmoj committed May 24, 2019
commit 863d76f0606400386a38ae40d1ce1acf8ccee6cb
28 changes: 6 additions & 22 deletions src/lib/gl_format_color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,35 +16,20 @@ var Colorscale = require('../components/colorscale');
var colorDflt = require('../components/color/attributes').defaultLine;
var isArrayOrTypedArray = require('./array').isArrayOrTypedArray;

function filterRGBA(colorIn, desiredType) {
var colorOut = rgba(colorIn, desiredType);

if(typeof colorIn === 'string' &&
!colorIn.indexOf('rgb') &&
colorIn.indexOf('rgba')
) {
// drop alpha if not having rgb
colorOut = [colorOut[0], colorOut[1], colorOut[2]];
}
return colorOut;
}

var colorDfltRgba = filterRGBA(colorDflt);
var colorDfltRgba = rgba(colorDflt);
var opacityDflt = 1;

function calculateColor(colorIn, opacityIn) {
var colorOut = colorIn;

if(colorOut.length > 3) colorOut[3] *= opacityIn;
else if(opacityIn < 1) colorOut[3] = opacityIn;

colorOut[3] *= opacityIn;
return colorOut;
}

function validateColor(colorIn) {
if(isNumeric(colorIn)) return colorDfltRgba;

var colorOut = filterRGBA(colorIn);
var colorOut = rgba(colorIn);

return colorOut.length ? colorOut : colorDfltRgba;
}

Expand All @@ -69,7 +54,7 @@ function formatColor(containerIn, opacityIn, len) {
if(isArrayColorIn) {
getColor = function(c, i) {
// FIXME: there is double work, considering that sclFunc does the opposite
return c[i] === undefined ? colorDfltRgba : filterRGBA(sclFunc(c[i]));
return c[i] === undefined ? colorDfltRgba : rgba(sclFunc(c[i]));
};
} else getColor = validateColor;

Expand All @@ -85,7 +70,7 @@ function formatColor(containerIn, opacityIn, len) {
opacityi = getOpacity(opacityIn, i);
colorOut[i] = calculateColor(colori, opacityi);
}
} else colorOut = calculateColor(filterRGBA(colorIn), opacityIn);
} else colorOut = calculateColor(rgba(colorIn), opacityIn);

return colorOut;
}
Expand All @@ -111,7 +96,6 @@ function parseColorScale(cont, alpha) {
}

module.exports = {
filterRGBA: filterRGBA,
formatColor: formatColor,
parseColorScale: parseColorScale
};
11 changes: 6 additions & 5 deletions src/traces/scattergl/convert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@

var isNumeric = require('fast-isnumeric');
var svgSdf = require('svg-path-sdf');
var rgba = require('color-normalize');

var Registry = require('../../registry');
var Lib = require('../../lib');
var Drawing = require('../../components/drawing');
var AxisIDs = require('../../plots/cartesian/axis_ids');
var filterRGBA = require('../../lib/gl_format_color').filterRGBA;

var formatColor = require('../../lib/gl_format_color').formatColor;
var subTypes = require('../scatter/subtypes');
var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
Expand Down Expand Up @@ -228,12 +229,12 @@ function convertMarkerStyle(trace) {
optsOut.opacity = trace.opacity;
} else {
if(isOpen) {
optsOut.color = filterRGBA(optsIn.color, 'uint8');
optsOut.color = rgba(optsIn.color, 'uint8');
optsOut.color[3] = 0;
optsOut.borderColor = filterRGBA(optsIn.color, 'uint8');
optsOut.borderColor = rgba(optsIn.color, 'uint8');
} else {
optsOut.color = filterRGBA(optsIn.color, 'uint8');
optsOut.borderColor = filterRGBA(optsIn.line.color, 'uint8');
optsOut.color = rgba(optsIn.color, 'uint8');
optsOut.borderColor = rgba(optsIn.line.color, 'uint8');
}

optsOut.opacity = trace.opacity * optsIn.opacity;
Expand Down