Fix exporting patterns with transparent color

[archmoj]

@plotly/plotly_js

[alexcjohnson]

Looks like pattern . needs the same applied to fill (ie create fill-opacity) instead of stroke

plotly.js/src/components/drawing/index.js

Line 530 in adcb081

'fill': fgcolor

But I wonder: is there any difference in effect between opacity and stroke-opacity (or fill-opacity) in this case? ie could we just multiply fgopacity and fgStrokeOpacity together into a single opacity value?

Also: looks like the bgcolor part may need to be split into fill and fill-opacity, since we aren't setting it with Color.fill:

plotly.js/src/components/drawing/index.js

Line 571 in adcb081

'fill': bgcolor

[archmoj]

Looks like pattern . needs the same applied to fill (ie create fill-opacity) instead of stroke

plotly.js/src/components/drawing/index.js

Line 530 in adcb081

'fill': fgcolor

But I wonder: is there any difference in effect between opacity and stroke-opacity (or fill-opacity) in this case? ie could we just multiply fgopacity and fgStrokeOpacity together into a single opacity value?

Also: looks like the bgcolor part may need to be split into fill and fill-opacity, since we aren't setting it with Color.fill:

plotly.js/src/components/drawing/index.js

Line 571 in adcb081

'fill': bgcolor

Browser compatibility of stroke-opacity and fill-opacity is unknown.
So good call. Please review 22dbf02 and 35f7e95.

[alexcjohnson]

Browser compatibility of stroke-opacity and fill-opacity is unknown.

We've been using those attributes all over the place for years, I think we can conclude they're safe :) But simpler is better as long as the effect is the same. Did anything actually change in the images you regenerated? They look identical to me.

We still want to separate out bgcolor per the last part of my comment #6318 (comment)

[archmoj]

Did anything actually change in the images you regenerated? They look identical to me.

Please see the diffs below:

BTW, they look identical to my eyes too.

[archmoj]

Browser compatibility of stroke-opacity and fill-opacity is unknown.

We've been using those attributes all over the place for years, I think we can conclude they're safe :) But simpler is better as long as the effect is the same.

With that said, do you think it would be better (& more specific) to use stroke-opacity and fill-opacity instead of general opacity?

[alexcjohnson]

With that said, do you think it would be better (& more specific) to use stroke-opacity and fill-opacity instead of general opacity?

You could also say opacity is better because it's the same attribute for both types of pattern. I don't think it matters. Let's just fix the bgcolor part and call it done.

[archmoj]

We still want to separate out bgcolor per the last part of my comment #6318 (comment)

Good call. Addressed in 4cd8011.

[archmoj]

@alexcjohnson Let's merge this PR so I possibly open another one for few other components & traces.
Thanks!

[alexcjohnson]

💃 Yep, looks great!