Skip to content

Commit

Permalink
Merge pull request #1926 from vpo-dev/dev_feat-table-fillOpacity_from…
Browse files Browse the repository at this point in the history 
…-0.1

Support of a fillOpacity property in tables (PR for 0.1 branch)
  • Loading branch information
@liborm85
liborm85 authored Feb 8, 2020
2 parents 83ef423 + 3f1f653 commit a4f04a5
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 5 deletions.
62 changes: 60 additions & 2 deletions dev-playground/public/samples/tables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,8 +275,61 @@ content: [
]
},
layout: {
fillColor: function (i, node) {
return (i % 2 === 0) ? '#CCCCCC' : null;
fillColor: function (rowIndex, node, columnIndex) {
return (rowIndex % 2 === 0) ? '#CCCCCC' : null;
}
}
},
{text: 'handling fill color opacity...', margin: [0, 20, 0, 8]},
{text: '... just hardcoding values in the second row', margin: [0, 20, 0, 8]},
{
style: 'tableExample',
table: {
body: [
['Sample value 1', 'Sample value 2', 'Sample value 3'],
[
{text: 'Sample value 1',fillOpacity:0.15,fillColor:'blue'},
{text: 'Sample value 2',fillOpacity:0.60,fillColor:'blue'},
{text: 'Sample value 3',fillOpacity:0.85,fillColor:'blue'},
],
['Sample value 1', 'Sample value 2', 'Sample value 3']
]
},
},
{text: '... using a custom styler and overriding it in the second row', margin: [0, 20, 0, 8]},
{
style: 'tableOpacityExample',
table: {
body: [
['Sample value 1', 'Sample value 2', 'Sample value 3'],
[
{text: 'Sample value 1',fillOpacity:0.15},
{text: 'Sample value 2',fillOpacity:0.60},
{text: 'Sample value 3',fillOpacity:0.85},
],
['Sample value 1', 'Sample value 2', 'Sample value 3']
]
},
},
{text: '... with a function (opacity at 0 means fully transparent, i.e no color)', margin: [0, 20, 0, 8]},
{
style: 'tableExample',
table: {
body: [
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
]
},
layout: {
fillColor: 'blue',
fillOpacity: function (rowIndex, node, columnIndex) {
return (rowIndex/8+columnIndex/3);
}
}
},
Expand Down Expand Up @@ -534,6 +587,11 @@ styles: {
tableExample: {
margin: [0, 5, 0, 15]
},
tableOpacityExample: {
margin: [0, 5, 0, 15],
fillColor: 'blue',
fillOpacity: 0.3
},
tableHeader: {
bold: true,
fontSize: 13,
Expand Down
Binary file modified examples/pdfs/tables.pdf
View file
Binary file not shown.
58 changes: 58 additions & 0 deletions examples/tables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,59 @@ var docDefinition = {
}
}
},
{ text: 'handling fill color opacity...', margin: [0, 20, 0, 8] },
{ text: '... just hardcoding values in the second row', margin: [0, 20, 0, 8] },
{
style: 'tableExample',
table: {
body: [
['Sample value 1', 'Sample value 2', 'Sample value 3'],
[
{text: 'Sample value 1',fillOpacity:0.15,fillColor:'blue'},
{text: 'Sample value 2',fillOpacity:0.60,fillColor:'blue'},
{text: 'Sample value 3',fillOpacity:0.85,fillColor:'blue'},
],
['Sample value 1', 'Sample value 2', 'Sample value 3']
]
},
},
{ text: '... using a custom styler and overriding it in the second row', margin: [0, 20, 0, 8] },
{
style: 'tableOpacityExample',
table: {
body: [
['Sample value 1', 'Sample value 2', 'Sample value 3'],
[
{text: 'Sample value 1',fillOpacity:0.15},
{text: 'Sample value 2',fillOpacity:0.60},
{text: 'Sample value 3',fillOpacity:0.85},
],
['Sample value 1', 'Sample value 2', 'Sample value 3']
]
},
},
{ text: '... with a function (opacity at 0 means fully transparent, i.e no color)', margin: [0, 20, 0, 8] },
{
style: 'tableExample',
table: {
body: [
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
]
},
layout: {
fillColor: 'blue',
fillOpacity: function (rowIndex, node, columnIndex) {
return (rowIndex/8+columnIndex/3);
}
}
},
{ text: 'and can be used dash border', margin: [0, 20, 0, 8] },
{
style: 'tableExample',
Expand Down Expand Up @@ -637,6 +690,11 @@ var docDefinition = {
tableExample: {
margin: [0, 5, 0, 15]
},
tableOpacityExample: {
margin: [0, 5, 0, 15],
fillColor: 'blue',
fillOpacity: 0.3
},
tableHeader: {
bold: true,
fontSize: 13,
Expand Down
7 changes: 6 additions & 1 deletion src/docMeasure.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,6 +603,7 @@ DocMeasure.prototype.measureTable = function (node) {
return function () {
if (isObject(data)) {
data.fillColor = _this.styleStack.getProperty('fillColor');
data.fillOpacity = _this.styleStack.getProperty('fillOpacity');
}
return _this.measureNode(data);
};
Expand Down Expand Up @@ -649,6 +650,9 @@ DocMeasure.prototype.measureTable = function (node) {
fillColor: function (i, node) {
return null;
},
fillOpacity: function (i, node) {
return 1;
},
defaultBorder: true
};

Expand Down Expand Up @@ -731,7 +735,8 @@ DocMeasure.prototype.measureTable = function (node) {
_span: true,
_minWidth: 0,
_maxWidth: 0,
fillColor: table.body[row][col].fillColor
fillColor: table.body[row][col].fillColor,
fillOpacity: table.body[row][col].fillOpacity
};
}
}
Expand Down
1 change: 1 addition & 0 deletions src/styleContextStack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ StyleContextStack.prototype.autopush = function (item) {
'color',
'columnGap',
'fillColor',
'fillOpacity',
'decoration',
'decorationStyle',
'decorationColor',
Expand Down
8 changes: 7 additions & 1 deletion src/tableProcessor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

var ColumnCalculator = require('./columnCalculator');
var isFunction = require('./helpers').isFunction;
var isNumber = require('./helpers').isNumber;

function TableProcessor(tableNode) {
this.tableNode = tableNode;
Expand Down Expand Up @@ -419,9 +420,13 @@ TableProcessor.prototype.endRow = function (rowIndex, writer, pageBreaks) {

if (i < l - 1) {
var fillColor = body[rowIndex][colIndex].fillColor;
var fillOpacity = body[rowIndex][colIndex].fillOpacity;
if (!fillColor) {
fillColor = isFunction(this.layout.fillColor) ? this.layout.fillColor(rowIndex, this.tableNode, colIndex) : this.layout.fillColor;
}
if (!isNumber(fillOpacity)) {
fillOpacity = isFunction(this.layout.fillOpacity) ? this.layout.fillOpacity(rowIndex, this.tableNode, colIndex) : this.layout.fillOpacity;
}
if (fillColor) {
var widthLeftBorder = leftCellBorder ? this.layout.vLineWidth(colIndex, this.tableNode) : 0;
var widthRightBorder;
Expand All @@ -444,7 +449,8 @@ TableProcessor.prototype.endRow = function (rowIndex, writer, pageBreaks) {
w: x2f - x1f,
h: y2f - y1f,
lineWidth: 0,
color: fillColor
color: fillColor,
fillOpacity: fillOpacity
}, false, true, writer.context().backgroundLength[writer.context().page]);
}
}
Expand Down
6 changes: 5 additions & 1 deletion tests/tableProcessor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ describe('TableProcessor', function () {
fillColor: function (i, node) {
return null;
},
fillOpacity: function (i, node) {
return 1;
},
defaultBorder: true
};

Expand Down Expand Up @@ -154,7 +157,8 @@ describe('TableProcessor', function () {
paddingTop: function () { },
vLineWidth: function () { },
hLineWidth: function () { },
fillColor: function () { }
fillColor: function () { },
fillOpacity: function () { }
}
};
};
Expand Down

0 comments on commit a4f04a5

Please sign in to comment.