diff --git a/demo/demo32.ts b/demo/demo32.ts index 7b13855bf2..402297a12a 100644 --- a/demo/demo32.ts +++ b/demo/demo32.ts @@ -1,7 +1,7 @@ // Example of how you would merge cells together // Import from 'docx' rather than '../build' if you install from npm import * as fs from "fs"; -import { Document, Packer, Paragraph, WidthType } from "../build"; +import { Document, Packer, Paragraph, ShadingType, WidthType } from "../build"; const doc = new Document(); @@ -22,12 +22,15 @@ table = doc.createTable({ widthUnitType: WidthType.AUTO, columnWidths: [1000, 1000, 1000], }); -table.getCell(0, 0).addParagraph(new Paragraph("World")).setMargains({ - top: 1000, - bottom: 1000, - left: 1000, - right: 1000, -}); +table + .getCell(0, 0) + .addParagraph(new Paragraph("World")) + .setMargains({ + top: 1000, + bottom: 1000, + left: 1000, + right: 1000, + }); table.getRow(0).mergeCells(0, 2); doc.createParagraph("Another table").heading2(); @@ -47,12 +50,40 @@ table = doc.createTable({ table.getCell(0, 0).addParagraph(new Paragraph("Foo")); table.getCell(0, 1).addParagraph(new Paragraph("v")); -table.getCell(1, 0).addParagraph(new Paragraph("Bar1")); -// table.getCell(1, 1).addParagraph(new Paragraph("Bar2")); -// table.getCell(1, 2).addParagraph(new Paragraph("Bar3")); -// table.getCell(1, 3).addParagraph(new Paragraph("Bar4")); +table + .getCell(1, 0) + .addParagraph(new Paragraph("Bar1")) + .setShading({ + fill: "b79c2f", + val: ShadingType.REVERSE_DIAGONAL_STRIPE, + color: "auto", + }); +table + .getCell(1, 1) + .addParagraph(new Paragraph("Bar2")) + .setShading({ + fill: "42c5f4", + val: ShadingType.PERCENT_95, + color: "auto", + }); +table + .getCell(1, 2) + .addParagraph(new Paragraph("Bar3")) + .setShading({ + fill: "880aa8", + val: ShadingType.PERCENT_10, + color: "e2df0b", + }); +table + .getCell(1, 3) + .addParagraph(new Paragraph("Bar4")) + .setShading({ + fill: "FF0000", + val: ShadingType.CLEAR, + color: "auto", + }); -// table.getRow(0).mergeCells(0, 3); +table.getRow(0).mergeCells(0, 3); doc.createParagraph("hi"); diff --git a/src/file/table/index.ts b/src/file/table/index.ts index a7adf3017e..47e0549503 100644 --- a/src/file/table/index.ts +++ b/src/file/table/index.ts @@ -1,3 +1,4 @@ export * from "./table"; export * from "./table-cell"; export * from "./table-properties"; +export * from "./shading"; diff --git a/src/file/table/shading/index.ts b/src/file/table/shading/index.ts new file mode 100644 index 0000000000..05d9d8d841 --- /dev/null +++ b/src/file/table/shading/index.ts @@ -0,0 +1 @@ +export * from "./shading"; diff --git a/src/file/table/shading/shading.spec.ts b/src/file/table/shading/shading.spec.ts new file mode 100644 index 0000000000..d200aacd41 --- /dev/null +++ b/src/file/table/shading/shading.spec.ts @@ -0,0 +1,37 @@ +import { expect } from "chai"; + +import { Formatter } from "export/formatter"; + +import { ShadingType, TableShading } from "./shading"; + +describe("TableShading", () => { + describe("#constructor", () => { + it("should create", () => { + const cellMargain = new TableShading({}); + const tree = new Formatter().format(cellMargain); + expect(tree).to.deep.equal({ + "w:shd": [ + { + _attr: {}, + }, + ], + }); + }); + + it("should create with params", () => { + const cellMargain = new TableShading({ val: ShadingType.PERCENT_40, color: "FF0000", fill: "555555" }); + const tree = new Formatter().format(cellMargain); + expect(tree).to.deep.equal({ + "w:shd": [ + { + _attr: { + "w:color": "FF0000", + "w:fill": "555555", + "w:val": "pct40", + }, + }, + ], + }); + }); + }); +}); diff --git a/src/file/table/shading/shading.ts b/src/file/table/shading/shading.ts new file mode 100644 index 0000000000..baeb426e22 --- /dev/null +++ b/src/file/table/shading/shading.ts @@ -0,0 +1,64 @@ +// http://officeopenxml.com/WPtableShading.php +// http://officeopenxml.com/WPtableCellProperties-Shading.php +import { XmlAttributeComponent, XmlComponent } from "file/xml-components"; + +export interface ITableShadingAttributesProperties { + readonly fill?: string; + readonly color?: string; + readonly val?: ShadingType; +} + +class TableShadingAttributes extends XmlAttributeComponent { + protected readonly xmlKeys = { + fill: "w:fill", + color: "w:color", + val: "w:val", + }; +} + +export class TableShading extends XmlComponent { + constructor(attrs: ITableShadingAttributesProperties) { + super("w:shd"); + this.root.push(new TableShadingAttributes(attrs)); + } +} + +export enum ShadingType { + CLEAR = "clear", + DIAGONAL_CROSS = "diagCross", + DIAGONAL_STRIPE = "diagStripe", + HORIZONTAL_CROSS = "horzCross", + HORIZONTAL_STRIPE = "horzStripe", + NIL = "nil", + PERCENT_5 = "pct5", + PERCENT_10 = "pct10", + PERCENT_12 = "pct12", + PERCENT_15 = "pct15", + PERCENT_20 = "pct20", + PERCENT_25 = "pct25", + PERCENT_30 = "pct30", + PERCENT_35 = "pct35", + PERCENT_37 = "pct37", + PERCENT_40 = "pct40", + PERCENT_45 = "pct45", + PERCENT_50 = "pct50", + PERCENT_55 = "pct55", + PERCENT_60 = "pct60", + PERCENT_62 = "pct62", + PERCENT_65 = "pct65", + PERCENT_70 = "pct70", + PERCENT_75 = "pct75", + PERCENT_80 = "pct80", + PERCENT_85 = "pct85", + PERCENT_87 = "pct87", + PERCENT_90 = "pct90", + PERCENT_95 = "pct95", + REVERSE_DIAGONAL_STRIPE = "reverseDiagStripe", + SOLID = "solid", + THIN_DIAGONAL_CROSS = "thinDiagCross", + THIN_DIAGONAL_STRIPE = "thinDiagStripe", + THIN_HORIZONTAL_CROSS = "thinHorzCross", + THIN_REVERSE_DIAGONAL_STRIPE = "thinReverseDiagStripe", + THIN_VERTICAL_STRIPE = "thinVertStripe", + VERTICAL_STRIPE = "vertStripe", +} diff --git a/src/file/table/table-cell/table-cell-components.ts b/src/file/table/table-cell/table-cell-components.ts index 6fce6c9bad..cb80b590e1 100644 --- a/src/file/table/table-cell/table-cell-components.ts +++ b/src/file/table/table-cell/table-cell-components.ts @@ -194,27 +194,3 @@ export class TableCellWidth extends XmlComponent { ); } } - -export interface ITableCellShadingAttributesProperties { - readonly fill?: string; - readonly color?: string; - readonly val?: string; -} - -class TableCellShadingAttributes extends XmlAttributeComponent { - protected readonly xmlKeys = { - fill: "w:fill", - color: "w:color", - val: "w:val", - }; -} - -/** - * Table cell shading element. - */ -export class TableCellShading extends XmlComponent { - constructor(attrs: ITableCellShadingAttributesProperties) { - super("w:shd"); - this.root.push(new TableCellShadingAttributes(attrs)); - } -} diff --git a/src/file/table/table-cell/table-cell-properties.ts b/src/file/table/table-cell/table-cell-properties.ts index accec2d0ca..dabfc173fb 100644 --- a/src/file/table/table-cell/table-cell-properties.ts +++ b/src/file/table/table-cell/table-cell-properties.ts @@ -1,18 +1,8 @@ import { XmlComponent } from "file/xml-components"; +import { ITableShadingAttributesProperties, TableShading } from "../shading"; import { ITableCellMargainOptions, TableCellMargain } from "./cell-margain/table-cell-margains"; -import { - GridSpan, - ITableCellShadingAttributesProperties, - TableCellBorders, - TableCellShading, - TableCellWidth, - VAlign, - VerticalAlign, - VMerge, - VMergeType, - WidthType, -} from "./table-cell-components"; +import { GridSpan, TableCellBorders, TableCellWidth, VAlign, VerticalAlign, VMerge, VMergeType, WidthType } from "./table-cell-components"; export class TableCellProperties extends XmlComponent { private readonly cellBorder: TableCellBorders; @@ -51,8 +41,8 @@ export class TableCellProperties extends XmlComponent { return this; } - public setShading(attrs: ITableCellShadingAttributesProperties): TableCellProperties { - this.root.push(new TableCellShading(attrs)); + public setShading(attrs: ITableShadingAttributesProperties): TableCellProperties { + this.root.push(new TableShading(attrs)); return this; } diff --git a/src/file/table/table-cell/table-cell.ts b/src/file/table/table-cell/table-cell.ts index dee03fcff0..c5566cb318 100644 --- a/src/file/table/table-cell/table-cell.ts +++ b/src/file/table/table-cell/table-cell.ts @@ -2,6 +2,7 @@ import { Paragraph } from "file/paragraph"; import { IXmlableObject, XmlComponent } from "file/xml-components"; +import { ITableShadingAttributesProperties } from "../shading"; import { Table } from "../table"; import { ITableCellMargainOptions } from "./cell-margain/table-cell-margains"; import { TableCellBorders, VerticalAlign, VMergeType } from "./table-cell-components"; @@ -72,6 +73,12 @@ export class TableCell extends XmlComponent { return this; } + public setShading(attrs: ITableShadingAttributesProperties): TableCell { + this.properties.setShading(attrs); + + return this; + } + public get Borders(): TableCellBorders { return this.properties.Borders; } diff --git a/src/file/table/table-properties/table-properties.ts b/src/file/table/table-properties/table-properties.ts index f577cd56c9..2b9f08b35a 100644 --- a/src/file/table/table-properties/table-properties.ts +++ b/src/file/table/table-properties/table-properties.ts @@ -1,5 +1,6 @@ import { XmlComponent } from "file/xml-components"; +import { ITableShadingAttributesProperties, TableShading } from "../shading"; import { WidthType } from "../table-cell"; import { TableBorders } from "./table-borders"; import { TableCellMargin } from "./table-cell-margin"; @@ -40,4 +41,10 @@ export class TableProperties extends XmlComponent { this.root.push(new TableFloatProperties(tableFloatOptions)); return this; } + + public setShading(attrs: ITableShadingAttributesProperties): TableProperties { + this.root.push(new TableShading(attrs)); + + return this; + } }