Skip to content

Commit 36dd9a8

Browse files
archmojarchmoj
committed
add fgopacity and default to 0.5 for overlay fillmode
1 parent 3196777 commit 36dd9a8

File tree

7 files changed

+56
-7
lines changed

7 files changed

+56
-7
lines changed

‎src/components/drawing/attributes.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ exports.pattern = {
4343
arrayOk: true,
4444
editType: 'style',
4545
description: [
46-
'When there is no colorscale sets the background color of the pattern fill.',
46+
'When there is no colorscale sets the color of background pattern fill.',
4747
'Defaults to a `marker.color` background when `fillmode` is *overlay*.',
4848
'Otherwise, defaults to a transparent background.'
4949
].join(' ')
@@ -53,12 +53,23 @@ exports.pattern = {
5353
arrayOk: true,
5454
editType: 'style',
5555
description: [
56-
'When there is no colorscale sets the foreground color of the pattern fill.',
56+
'When there is no colorscale sets the color of foreground pattern fill.',
5757
'Defaults to a `marker.color` background when `fillmode` is *replace*.',
5858
'Otherwise, defaults to dark grey or white',
5959
'to increase contrast with the `bgcolor`.',
6060
].join(' ')
6161
},
62+
fgopacity: {
63+
valType: 'number',
64+
editType: 'style',
65+
min: 0,
66+
max: 1,
67+
description: [
68+
'Sets the opacity of the foreground pattern fill.',
69+
'Defaults to a 0.5 when `fillmode` is *overlay*.',
70+
'Otherwise, defaults to 1.'
71+
].join(' ')
72+
},
6273
size: {
6374
valType: 'number',
6475
min: 0,

‎src/components/drawing/index.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
368368
* @param {number} solidity: how solid lines of this pattern are
369369
* @param {string} prop: the property to apply to, 'fill' or 'stroke'
370370
*/
371-
drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, solidity, mcc, fillmode, prop) {
371+
drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, fgopacity, size, solidity, mcc, fillmode, prop) {
372372
if(mcc) {
373373
if(fillmode === 'overlay') {
374374
bgcolor = mcc;
@@ -402,6 +402,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
402402
patternTag = 'path';
403403
patternAttrs = {
404404
'd': path,
405+
'opacity': fgopacity,
405406
'stroke': fgcolor,
406407
'stroke-width': linewidth + 'px'
407408
};
@@ -416,6 +417,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
416417
patternTag = 'path';
417418
patternAttrs = {
418419
'd': path,
420+
'opacity': fgopacity,
419421
'stroke': fgcolor,
420422
'stroke-width': linewidth + 'px'
421423
};
@@ -433,6 +435,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
433435
patternTag = 'path';
434436
patternAttrs = {
435437
'd': path,
438+
'opacity': fgopacity,
436439
'stroke': fgcolor,
437440
'stroke-width': linewidth + 'px'
438441
};
@@ -446,6 +449,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
446449
patternTag = 'path';
447450
patternAttrs = {
448451
'd': path,
452+
'opacity': fgopacity,
449453
'stroke': fgcolor,
450454
'stroke-width': linewidth + 'px'
451455
};
@@ -459,6 +463,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
459463
patternTag = 'path';
460464
patternAttrs = {
461465
'd': path,
466+
'opacity': fgopacity,
462467
'stroke': fgcolor,
463468
'stroke-width': linewidth + 'px'
464469
};
@@ -473,6 +478,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
473478
patternTag = 'path';
474479
patternAttrs = {
475480
'd': path,
481+
'opacity': fgopacity,
476482
'stroke': fgcolor,
477483
'stroke-width': linewidth + 'px'
478484
};
@@ -490,6 +496,7 @@ drawing.pattern = function(sel, gd, patternID, shape, bgcolor, fgcolor, size, so
490496
'cx': width / 2,
491497
'cy': height / 2,
492498
'r': radius,
499+
'opacity': fgopacity,
493500
'fill': fgcolor
494501
};
495502
break;
@@ -712,6 +719,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
712719
} else if(patternShape) {
713720
var patternBGColor = drawing.getPatternAttr(markerPattern.bgcolor, d.i, null);
714721
var patternFGColor = drawing.getPatternAttr(markerPattern.fgcolor, d.i, null);
722+
var patternFGOpacity = drawing.getPatternAttr(markerPattern.fgopacity, d.i, 1);
715723
var patternSize = drawing.getPatternAttr(markerPattern.size, d.i, 8);
716724
var patternSolidity = drawing.getPatternAttr(markerPattern.solidity, d.i, 0.3);
717725
var perPointPattern = d.mcc ||
@@ -723,7 +731,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
723731
var patternID = trace.uid;
724732
if(perPointPattern) patternID += '-' + d.i;
725733

726-
drawing.pattern(sel, gd, patternID, patternShape, patternBGColor, patternFGColor,
734+
drawing.pattern(sel, gd, patternID, patternShape, patternBGColor, patternFGColor, patternFGOpacity,
727735
patternSize, patternSolidity, d.mcc, markerPattern.fillmode, 'fill');
728736
} else {
729737
Color.fill(sel, fillColor);

‎src/components/legend/style.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -360,11 +360,12 @@ module.exports = function style(s, gd, legend) {
360360
if(patternShape) {
361361
var patternBGColor = Drawing.getPatternAttr(markerPattern.bgcolor, 0, null);
362362
var patternFGColor = Drawing.getPatternAttr(markerPattern.fgcolor, 0, null);
363+
var patternFGOpacity = Drawing.getPatternAttr(markerPattern.fgopacity, 0, 1);
363364
var patternSize = Math.min(12, Drawing.getPatternAttr(markerPattern.size, 0, 8));
364365
var patternSolidity = Drawing.getPatternAttr(markerPattern.solidity, 0, 0.3);
365366
var patternID = 'legend-' + trace.uid;
366-
p.call(Drawing.pattern, gd, patternID, patternShape, patternBGColor,
367-
patternFGColor, patternSize, patternSolidity, mcc, markerPattern.fillmode, 'fill');
367+
p.call(Drawing.pattern, gd, patternID, patternShape, patternBGColor, patternFGColor, patternFGOpacity,
368+
patternSize, patternSolidity, mcc, markerPattern.fillmode, 'fill');
368369
} else {
369370
p.call(Color.fill, fillColor);
370371
}

‎src/lib/coerce.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,11 @@ exports.coercePattern = function(coerce, attr, markerColor, hasMarkerColorscale)
447447
markerColor
448448
);
449449
}
450+
451+
coerce(attr + '.fgopacity', isOverlay ?
452+
0.5 :
453+
1
454+
);
450455
}
451456
};
452457

‎test/image/baselines/pattern_fgcolor_overlay_fillmode.png

-8.37 KB
Loading

‎test/image/baselines/pattern_with_colorscale.png

-8.4 KB
Loading

‎test/jasmine/tests/bar_test.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@ describe('Bar.supplyDefaults', function() {
272272

273273
expect(traceOut.marker.pattern.bgcolor).toBeUndefined('transparent background');
274274
expect(traceOut.marker.pattern.fgcolor).toBe('green');
275+
expect(traceOut.marker.pattern.fgopacity).toBe(1);
275276
});
276277

277278
it('bgcolor & fgcolor defaults with *overlay* pattern.fillmode', function() {
@@ -293,9 +294,10 @@ describe('Bar.supplyDefaults', function() {
293294

294295
expect(traceOut.marker.pattern.bgcolor).toBe('green');
295296
expect(traceOut.marker.pattern.fgcolor).toBe('#fff');
297+
expect(traceOut.marker.pattern.fgopacity).toBe(0.5);
296298
});
297299

298-
it('should not coerce marker.pattern.bgcolor and marker.pattern.fgcolor when marker.colorscale is present', function() {
300+
it('should not coerce marker.pattern.bgcolor and marker.pattern.fgcolor when marker.colorscale is present - case of *replace* fillmode', function() {
299301
traceIn = {
300302
marker: {
301303
colorscale: 'Blues',
@@ -312,6 +314,28 @@ describe('Bar.supplyDefaults', function() {
312314

313315
expect(traceOut.marker.pattern.bgcolor).toBeUndefined();
314316
expect(traceOut.marker.pattern.fgcolor).toBeUndefined();
317+
expect(traceOut.marker.pattern.fgopacity).toBe(1);
318+
});
319+
320+
it('should not coerce marker.pattern.bgcolor and marker.pattern.fgcolor when marker.colorscale is present - case of *overlay* fillmode', function() {
321+
traceIn = {
322+
marker: {
323+
colorscale: 'Blues',
324+
pattern: {
325+
fillmode: 'overlay',
326+
shape: '+'
327+
}
328+
},
329+
color: [1, 2, 3],
330+
y: [1, 2, 3]
331+
};
332+
var layout = {};
333+
334+
supplyDefaults(traceIn, traceOut, defaultColor, layout);
335+
336+
expect(traceOut.marker.pattern.bgcolor).toBeUndefined();
337+
expect(traceOut.marker.pattern.fgcolor).toBeUndefined();
338+
expect(traceOut.marker.pattern.fgopacity).toBe(0.5);
315339
});
316340
});
317341

0 commit comments

Comments
 (0)