Skip to content

Commit eff4574

Browse files
camdecostercamdecoster
authored
Merge pull request #8119 from plotly/cam/8116/convert-css-specifiers-rgba-gl-traces
fix: Convert CSS color specifiers to rgba in gl traces
2 parents afeb782 + 333aba0 commit eff4574

6 files changed

Lines changed: 72 additions & 11 deletions

File tree

‎draftlogs/8119_fix.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
- Convert modern CSS color formats to rgba for scattergl based traces [[#8119](https://github.com/plotly/plotly.js/pull/8119)]

‎src/traces/scattergl/convert.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
var isNumeric = require('fast-isnumeric');
44
const svgSdf = require('svg-path-sdf').default;
5-
const { normalize: rgba } = require('../../components/color');
5+
const { normalize: rgba, rgbaString } = require('../../components/color');
66

77
var Registry = require('../../registry');
88
var Lib = require('../../lib');
@@ -75,7 +75,7 @@ function convertStyle(gd, trace) {
7575
opts.line = {
7676
overlay: true,
7777
thickness: trace.line.width * plotGlPixelRatio,
78-
color: trace.line.color,
78+
color: rgbaString(trace.line.color),
7979
opacity: trace.opacity
8080
};
8181

@@ -97,7 +97,7 @@ function convertStyle(gd, trace) {
9797
if (!!trace.fill && trace.fill !== 'none') {
9898
opts.fill = {
9999
closed: true,
100-
fill: trace.fillcolor,
100+
fill: rgbaString(trace.fillcolor),
101101
thickness: 0
102102
};
103103
}
@@ -199,10 +199,10 @@ function convertTextStyle(gd, trace) {
199199
if (isArrayOrTypedArray(tfc)) {
200200
optsOut.color = new Array(count);
201201
for (i = 0; i < count; i++) {
202-
optsOut.color[i] = tfc[i];
202+
optsOut.color[i] = rgbaString(tfc[i]);
203203
}
204204
} else {
205-
optsOut.color = tfc;
205+
optsOut.color = rgbaString(tfc);
206206
}
207207

208208
if (
@@ -411,7 +411,7 @@ function convertMarkerSelection(gd, trace, target) {
411411
optsOut = convertMarkerStyle(gd, Lib.extendFlat({}, optsIn, target.marker));
412412
} else if (target.marker) {
413413
if (target.marker.size) optsOut.size = target.marker.size;
414-
if (target.marker.color) optsOut.colors = target.marker.color;
414+
if (target.marker.color) optsOut.colors = rgbaString(target.marker.color);
415415
if (target.marker.opacity !== undefined) optsOut.opacity = target.marker.opacity;
416416
}
417417

@@ -444,11 +444,11 @@ function convertErrorBarStyle(trace, target, plotGlPixelRatio) {
444444
var optsOut = {
445445
capSize: target.width * 2 * plotGlPixelRatio,
446446
lineWidth: target.thickness * plotGlPixelRatio,
447-
color: target.color
447+
color: rgbaString(target.color)
448448
};
449449

450450
if (target.copy_ystyle) {
451-
optsOut = trace.error_y;
451+
optsOut = { ...trace.error_y, color: rgbaString(trace.error_y.color) };
452452
}
453453

454454
return optsOut;

‎src/traces/scattergl/plot.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var createError = require('regl-error2d');
66
var Text = require('gl-text');
77

88
var Lib = require('../../lib');
9+
const { rgbaString } = require('../../components/color');
910
var selectMode = require('../../components/dragelement/helpers').selectMode;
1011
var prepareRegl = require('../../lib/prepare_regl');
1112

@@ -226,7 +227,7 @@ var exports = module.exports = function plot(gd, subplot, cdata) {
226227
if(isNaN(xx) || isNaN(yy)) continue;
227228
pos.push(xx, yy);
228229
}
229-
fillOptions.fill = nextTrace.fillcolor;
230+
fillOptions.fill = rgbaString(nextTrace.fillcolor);
230231
}
231232
}
232233
}

‎src/traces/splom/base_plot.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
var createLine = require('regl-line2d');
44

55
var Registry = require('../../registry');
6+
const { rgbaString } = require('../../components/color');
67
var prepareRegl = require('../../lib/prepare_regl');
78
var getModuleCalcData = require('../../plots/get_data').getModuleCalcData;
89
var Cartesian = require('../../plots/cartesian');
@@ -116,7 +117,7 @@ function makeGridData(gd) {
116117
data: [x0, x1, y0, y1],
117118
join: 'rect',
118119
thickness: lwidth * plotGlPixelRatio,
119-
color: lcolor,
120+
color: rgbaString(lcolor),
120121
viewport: fullView,
121122
range: fullView,
122123
overlay: false

‎test/jasmine/tests/scattergl_test.js‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ describe('end-to-end scattergl tests', function() {
368368
expect(scene.markerOptions.length).toBe(2);
369369
expect(scene.markerOptions[1].color).toEqual(new Uint8Array([255, 0, 0, 255]));
370370
expect(scene.textOptions.length).toBe(2);
371-
expect(scene.textOptions[1].color).toEqual('#444');
371+
expect(scene.textOptions[1].color).toEqual('rgb(68, 68, 68)');
372372
expect(scene.scatter2d.draw).toHaveBeenCalled();
373373

374374
return Plotly.restyle(gd, 'selectedpoints', null);
@@ -427,6 +427,46 @@ describe('end-to-end scattergl tests', function() {
427427
.then(done, done.fail);
428428
});
429429

430+
it('@gl should convert modern CSS colors for lines, fill, error bars and text', (done) => {
431+
const orange = 'oklch(0.7 0.15 30)';
432+
const brown = 'lab(50% 40 59)';
433+
const orangeRgb = 'rgb(237, 118, 101)';
434+
const brownRgb = 'rgb(191, 87, 2)';
435+
436+
Plotly.newPlot(gd, [
437+
{
438+
type: 'scattergl',
439+
mode: 'lines+text',
440+
x: [1, 2],
441+
y: [1, 2],
442+
text: ['a', 'b'],
443+
line: { color: orange },
444+
fill: 'tozeroy',
445+
fillcolor: brown,
446+
textfont: { color: [orange, brown] },
447+
error_x: { array: [0.1, 0.1] },
448+
error_y: { array: [0.1, 0.1], color: orange }
449+
}
450+
])
451+
.then(() => {
452+
const scene = gd._fullLayout._plots.xy._scene;
453+
454+
expect(scene.lineOptions[0].color).toBe(orangeRgb, 'line.color');
455+
expect(scene.fillOptions[0].fill).toBe(brownRgb, 'fillcolor');
456+
expect(scene.errorXOptions[0].color).toBe(orangeRgb, 'error_x.color with copy_ystyle');
457+
expect(scene.errorYOptions[0].color).toBe(orangeRgb, 'error_y.color');
458+
expect(scene.textOptions[0].color).toEqual([orangeRgb, brownRgb], 'textfont.color');
459+
460+
return Plotly.restyle(gd, 'error_x.color', brown);
461+
})
462+
.then(() => {
463+
const scene = gd._fullLayout._plots.xy._scene;
464+
465+
expect(scene.errorXOptions[0].color).toBe(brownRgb, 'error_x.color');
466+
})
467+
.then(done, done.fail);
468+
});
469+
430470
it('@gl should be able to draw more than 4096 colors', function(done) {
431471
var x = [];
432472
var color = [];

‎test/jasmine/tests/splom_test.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -730,6 +730,24 @@ describe('Test splom interactions:', function() {
730730
.then(done, done.fail);
731731
});
732732

733+
it('@gl when hasOnlyLargeSploms, should convert modern CSS grid colors for regl-line2d', (done) => {
734+
const fig = Lib.extendDeep({}, require('../../image/mocks/splom_large.json'));
735+
736+
_newPlot(gd, fig)
737+
.then(() => {
738+
spyOn(gd._fullLayout._splomGrid, 'update').and.callThrough();
739+
return Plotly.relayout(gd, 'xaxis.gridcolor', 'oklch(0.7 0.15 30)');
740+
})
741+
.then(() => {
742+
const gridData = gd._fullLayout._splomGrid.update.calls.mostRecent().args[0];
743+
const colors = gridData.map((d) => d.color);
744+
745+
expect(colors).toContain('rgb(237, 118, 101)');
746+
expect(colors).not.toContain('oklch(0.7 0.15 30)');
747+
})
748+
.then(done, done.fail);
749+
});
750+
733751
it('@gl should update properly in-and-out of hasOnlyLargeSploms regime', function(done) {
734752
var figLarge = Lib.extendDeep({}, require('../../image/mocks/splom_large.json'));
735753
var dimsLarge = figLarge.data[0].dimensions;

0 commit comments

Comments
 (0)