From 53c86829c62191f9312c47e577a9b34e8ef2d6c6 Mon Sep 17 00:00:00 2001 From: Vladimir Kuznetsov <97878536+VladNK@users.noreply.github.com> Date: Thu, 24 Feb 2022 10:35:44 +0300 Subject: [PATCH] DataGrid.Pdf - Wrong horizontal alignment for group columns (#21185) * DataGrid.Pdf - Wrong horizontal alignment for group column * small fix --- js/exporter/jspdf/current/rows_generator.js | 11 +- ...jspdf_v3.dataGrid.horizontalAlign.tests.js | 345 ++++++++++++++++++ 2 files changed, 353 insertions(+), 3 deletions(-) diff --git a/js/exporter/jspdf/current/rows_generator.js b/js/exporter/jspdf/current/rows_generator.js index 2affdd1b1f89..b7e368935371 100644 --- a/js/exporter/jspdf/current/rows_generator.js +++ b/js/exporter/jspdf/current/rows_generator.js @@ -84,13 +84,13 @@ function generateRowCells({ doc, dataProvider, rowIndex, wordWrapEnabled, column for(let cellIndex = 0; cellIndex < columns.length; cellIndex++) { const cellData = dataProvider.getCellData(rowIndex, cellIndex, true); const cellStyle = styles[dataProvider.getStyleId(rowIndex, cellIndex)]; - const style = getPdfCellStyle(rowType, cellStyle); + const style = getPdfCellStyle(columns[cellIndex], rowType, cellStyle); const defaultAlignment = rtlEnabled ? 'right' : 'left'; const pdfCell = { text: getFormattedValue(cellData.value, cellStyle.format), verticalAlign: 'middle', - horizontalAlign: columns[cellIndex].alignment ?? defaultAlignment, + horizontalAlign: style.alignment ?? defaultAlignment, wordWrapEnabled, backgroundColor, padding: toPdfUnit(doc, 5), @@ -148,8 +148,13 @@ function getBaseTableStyle() { return defaultStyles['base']; } -function getPdfCellStyle(rowType, cellStyle) { +function getPdfCellStyle(column, rowType, cellStyle) { const styles = Object.assign({}, defaultStyles['base'], defaultStyles[rowType]); + const alignment = rowType === 'header' ? column.alignment : cellStyle.alignment; + + if(alignment) { + styles.alignment = alignment; + } if(cellStyle.bold && rowType !== 'header') { styles.font = Object.assign({}, styles.font, { style: 'bold' }); diff --git a/testing/tests/DevExpress.exporter/jspdfParts/v3/jspdf_v3.dataGrid.horizontalAlign.tests.js b/testing/tests/DevExpress.exporter/jspdfParts/v3/jspdf_v3.dataGrid.horizontalAlign.tests.js index 015c3e389a6c..bfb585f05042 100644 --- a/testing/tests/DevExpress.exporter/jspdfParts/v3/jspdf_v3.dataGrid.horizontalAlign.tests.js +++ b/testing/tests/DevExpress.exporter/jspdfParts/v3/jspdf_v3.dataGrid.horizontalAlign.tests.js @@ -3047,6 +3047,351 @@ const JSPdfHorizontalAlignTests = { }); }); + QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'left\'}, f2, f3]', function(assert) { + const done = assert.async(); + const doc = createMockPdfDoc(); + + const dataGrid = createDataGrid({ + columns: [ + { dataField: 'f1', groupIndex: 0, alignment: 'left' }, + { dataField: 'f2' }, + { dataField: 'f3' }, + ], + dataSource: [ + { f1: 'f1', f2: 'f1_2', f3: 'f1_3' }, + { f1: 'f1', f2: 'f2_2', f3: 'f2_3' }, + ], + }); + + const expectedLog = [ + 'setTextColor,#979797', + 'setFontSize,10', + 'text,F2,55,65.75,{baseline:middle}', + 'setTextColor,#979797', + 'text,F3,145,65.75,{baseline:middle}', + 'setTextColor,#000000', + 'setFont,helvetica,bold,', + 'text,F1: f1,55,87.25,{baseline:middle}', + 'setFont,helvetica,normal,', + 'text,f1_2,55,108.75,{baseline:middle}', + 'text,f1_3,145,108.75,{baseline:middle}', + 'text,f2_2,55,130.25,{baseline:middle}', + 'text,f2_3,145,130.25,{baseline:middle}', + 'setLineWidth,0.5', + 'setDrawColor,#979797', + 'rect,50,55,90,21.5', + 'setDrawColor,#979797', + 'rect,140,55,80,21.5', + 'setDrawColor,#979797', + 'rect,50,76.5,170,21.5', + 'setDrawColor,#979797', + 'rect,50,98,90,21.5', + 'setDrawColor,#979797', + 'rect,140,98,80,21.5', + 'setDrawColor,#979797', + 'rect,50,119.5,90,21.5', + 'setDrawColor,#979797', + 'rect,140,119.5,80,21.5', + 'setFontSize,16', + 'setLineWidth,0.200025', + 'setDrawColor,#000000' + ]; + + exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => { + // doc.save(assert.test.testName + '.pdf'); + assert.deepEqual(doc.__log, expectedLog); + done(); + }); + }); + + QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'left\'}, f2, f3], rtlEnabled', function(assert) { + const done = assert.async(); + const doc = createMockPdfDoc(); + + const dataGrid = createDataGrid({ + rtlEnabled: true, + columns: [ + { dataField: 'f1', groupIndex: 0, alignment: 'left' }, + { dataField: 'f2' }, + { dataField: 'f3' }, + ], + dataSource: [ + { f1: 'f1', f2: 'f1_2', f3: 'f1_3' }, + { f1: 'f1', f2: 'f2_2', f3: 'f2_3' }, + ], + }); + + const expectedLog = [ + 'setTextColor,#979797', + 'setFontSize,10', + 'text,F2,540.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setTextColor,#979797', + 'text,F3,450.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setTextColor,#000000', + 'setFont,helvetica,bold,', + 'text,F1: f1,540.28,87.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setFont,helvetica,normal,', + 'text,f1_2,540.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f1_3,450.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f2_2,540.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f2_3,450.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setLineWidth,0.5', + 'setDrawColor,#979797', + 'rect,455.28,55,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,55,80,21.5', + 'setDrawColor,#979797', + 'rect,375.28,76.5,170,21.5', + 'setDrawColor,#979797', + 'rect,455.28,98,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,98,80,21.5', + 'setDrawColor,#979797', + 'rect,455.28,119.5,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,119.5,80,21.5', + 'setFontSize,16', + 'setLineWidth,0.200025', + 'setDrawColor,#000000' + ]; + + exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => { + // doc.save(assert.test.testName + '.pdf'); + assert.deepEqual(doc.__log, expectedLog); + done(); + }); + }); + + QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'center\'}, f2, f3]', function(assert) { + const done = assert.async(); + const doc = createMockPdfDoc(); + + const dataGrid = createDataGrid({ + columns: [ + { dataField: 'f1', groupIndex: 0, alignment: 'center' }, + { dataField: 'f2' }, + { dataField: 'f3' }, + ], + dataSource: [ + { f1: 'f1', f2: 'f1_2', f3: 'f1_3' }, + { f1: 'f1', f2: 'f2_2', f3: 'f2_3' }, + ], + }); + + const expectedLog = [ + 'setTextColor,#979797', + 'setFontSize,10', + 'text,F2,55,65.75,{baseline:middle}', + 'setTextColor,#979797', + 'text,F3,145,65.75,{baseline:middle}', + 'setTextColor,#000000', + 'setFont,helvetica,bold,', + 'text,F1: f1,55,87.25,{baseline:middle}', + 'setFont,helvetica,normal,', + 'text,f1_2,55,108.75,{baseline:middle}', + 'text,f1_3,145,108.75,{baseline:middle}', + 'text,f2_2,55,130.25,{baseline:middle}', + 'text,f2_3,145,130.25,{baseline:middle}', + 'setLineWidth,0.5', + 'setDrawColor,#979797', + 'rect,50,55,90,21.5', + 'setDrawColor,#979797', + 'rect,140,55,80,21.5', + 'setDrawColor,#979797', + 'rect,50,76.5,170,21.5', + 'setDrawColor,#979797', + 'rect,50,98,90,21.5', + 'setDrawColor,#979797', + 'rect,140,98,80,21.5', + 'setDrawColor,#979797', + 'rect,50,119.5,90,21.5', + 'setDrawColor,#979797', + 'rect,140,119.5,80,21.5', + 'setFontSize,16', + 'setLineWidth,0.200025', + 'setDrawColor,#000000' + ]; + + exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => { + // doc.save(assert.test.testName + '.pdf'); + assert.deepEqual(doc.__log, expectedLog); + done(); + }); + }); + + QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'center\'}, f2, f3], rtlEnabled', function(assert) { + const done = assert.async(); + const doc = createMockPdfDoc(); + + const dataGrid = createDataGrid({ + rtlEnabled: true, + columns: [ + { dataField: 'f1', groupIndex: 0, alignment: 'center' }, + { dataField: 'f2' }, + { dataField: 'f3' }, + ], + dataSource: [ + { f1: 'f1', f2: 'f1_2', f3: 'f1_3' }, + { f1: 'f1', f2: 'f2_2', f3: 'f2_3' }, + ], + }); + + const expectedLog = [ + 'setTextColor,#979797', + 'setFontSize,10', + 'text,F2,540.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setTextColor,#979797', + 'text,F3,450.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setTextColor,#000000', + 'setFont,helvetica,bold,', + 'text,F1: f1,540.28,87.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setFont,helvetica,normal,', + 'text,f1_2,540.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f1_3,450.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f2_2,540.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f2_3,450.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setLineWidth,0.5', + 'setDrawColor,#979797', + 'rect,455.28,55,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,55,80,21.5', + 'setDrawColor,#979797', + 'rect,375.28,76.5,170,21.5', + 'setDrawColor,#979797', + 'rect,455.28,98,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,98,80,21.5', + 'setDrawColor,#979797', + 'rect,455.28,119.5,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,119.5,80,21.5', + 'setFontSize,16', + 'setLineWidth,0.200025', + 'setDrawColor,#000000' + ]; + + exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => { + // doc.save(assert.test.testName + '.pdf'); + assert.deepEqual(doc.__log, expectedLog); + done(); + }); + }); + + QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'right\'}, f2, f3]', function(assert) { + const done = assert.async(); + const doc = createMockPdfDoc(); + + const dataGrid = createDataGrid({ + columns: [ + { dataField: 'f1', groupIndex: 0, alignment: 'right' }, + { dataField: 'f2' }, + { dataField: 'f3' }, + ], + dataSource: [ + { f1: 'f1', f2: 'f1_2', f3: 'f1_3' }, + { f1: 'f1', f2: 'f2_2', f3: 'f2_3' }, + ], + }); + + const expectedLog = [ + 'setTextColor,#979797', + 'setFontSize,10', + 'text,F2,55,65.75,{baseline:middle}', + 'setTextColor,#979797', + 'text,F3,145,65.75,{baseline:middle}', + 'setTextColor,#000000', + 'setFont,helvetica,bold,', + 'text,F1: f1,55,87.25,{baseline:middle}', + 'setFont,helvetica,normal,', + 'text,f1_2,55,108.75,{baseline:middle}', + 'text,f1_3,145,108.75,{baseline:middle}', + 'text,f2_2,55,130.25,{baseline:middle}', + 'text,f2_3,145,130.25,{baseline:middle}', + 'setLineWidth,0.5', + 'setDrawColor,#979797', + 'rect,50,55,90,21.5', + 'setDrawColor,#979797', + 'rect,140,55,80,21.5', + 'setDrawColor,#979797', + 'rect,50,76.5,170,21.5', + 'setDrawColor,#979797', + 'rect,50,98,90,21.5', + 'setDrawColor,#979797', + 'rect,140,98,80,21.5', + 'setDrawColor,#979797', + 'rect,50,119.5,90,21.5', + 'setDrawColor,#979797', + 'rect,140,119.5,80,21.5', + 'setFontSize,16', + 'setLineWidth,0.200025', + 'setDrawColor,#000000' + ]; + + exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => { + // doc.save(assert.test.testName + '.pdf'); + assert.deepEqual(doc.__log, expectedLog); + done(); + }); + }); + + QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'right\'}, f2, f3], rtlEnabled', function(assert) { + const done = assert.async(); + const doc = createMockPdfDoc(); + + const dataGrid = createDataGrid({ + rtlEnabled: true, + columns: [ + { dataField: 'f1', groupIndex: 0, alignment: 'right' }, + { dataField: 'f2' }, + { dataField: 'f3' }, + ], + dataSource: [ + { f1: 'f1', f2: 'f1_2', f3: 'f1_3' }, + { f1: 'f1', f2: 'f2_2', f3: 'f2_3' }, + ], + }); + + const expectedLog = [ + 'setTextColor,#979797', + 'setFontSize,10', + 'text,F2,540.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setTextColor,#979797', + 'text,F3,450.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setTextColor,#000000', + 'setFont,helvetica,bold,', + 'text,F1: f1,540.28,87.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setFont,helvetica,normal,', + 'text,f1_2,540.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f1_3,450.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f2_2,540.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'text,f2_3,450.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}', + 'setLineWidth,0.5', + 'setDrawColor,#979797', + 'rect,455.28,55,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,55,80,21.5', + 'setDrawColor,#979797', + 'rect,375.28,76.5,170,21.5', + 'setDrawColor,#979797', + 'rect,455.28,98,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,98,80,21.5', + 'setDrawColor,#979797', + 'rect,455.28,119.5,90,21.5', + 'setDrawColor,#979797', + 'rect,375.28,119.5,80,21.5', + 'setFontSize,16', + 'setLineWidth,0.200025', + 'setDrawColor,#000000' + ]; + + exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => { + // doc.save(assert.test.testName + '.pdf'); + assert.deepEqual(doc.__log, expectedLog); + done(); + }); + }); + }); } };