smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

unify Shading; breaking change: Paragraph/Run shading option key type changed to val, and shadow alias removed

Browse Source
This commit is contained in:
Tom Hunkapiller
2021-05-23 04:25:07 +03:00
parent fcc393aca2
commit 496fcb55fa
22 changed files with 70 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demo/46-shading-text.ts
View File

@ -21,7 +21,7 @@ const doc = new Document({
name: "Garamond",
},
shading: {
type: ShadingType.REVERSE_DIAGONAL_STRIPE,
val: ShadingType.REVERSE_DIAGONAL_STRIPE,
color: "00FFFF",
fill: "FF0000",
},
@ -30,7 +30,7 @@ const doc = new Document({
}),
new Paragraph({
shading: {
type: ShadingType.DIAGONAL_CROSS,
val: ShadingType.DIAGONAL_CROSS,
color: "00FFFF",
fill: "FF0000",
},

2
demo/60-track-revisions.ts
View File

@ -92,7 +92,7 @@ const doc = new Document({
name: "Garamond",
},
shading: {
type: ShadingType.REVERSE_DIAGONAL_STRIPE,
val: ShadingType.REVERSE_DIAGONAL_STRIPE,
color: "00FFFF",
fill: "FF0000",
},

2
docs/usage/paragraph.md
View File

@ -156,7 +156,7 @@ Add color to an entire paragraph block
const paragraph = new Paragraph({
text: "shading",
shading: {
type: ShadingType.REVERSE_DIAGONAL_STRIPE,
val: ShadingType.REVERSE_DIAGONAL_STRIPE,
color: "00FFFF",
fill: "FF0000",
},

2
docs/usage/tables.md
View File

@ -145,7 +145,7 @@ const tableRow = new TableRow({
| Property | Type | Notes |
| ------------- | ----------------------------------- | ----------------------------------------------------------- |
| children | `Array<Paragraph or Table>` | Required. You can nest tables by adding a table into a cell |
| shading | `ITableShadingAttributesProperties` | Optional |
| shading | `IShadingAttributesProperties` | Optional |
| margins | `ITableCellMarginOptions` | Optional |
| verticalAlign | `VerticalAlign` | Optional |
| columnSpan | `number` | Optional |

2
docs/usage/text.md
View File

@ -83,7 +83,7 @@ const text = new TextRun({
const text = new TextRun({
text: "shading",
shading: {
type: ShadingType.REVERSE_DIAGONAL_STRIPE,
val: ShadingType.REVERSE_DIAGONAL_STRIPE,
color: "00FFFF",
fill: "FF0000",
},

1
src/file/index.ts
View File

@ -6,6 +6,7 @@ export * from "./numbering";
export * from "./media";
export * from "./drawing";
export * from "./document";
export * from "./shading";
export * from "./styles";
export * from "./table-of-contents";
export * from "./xml-components";

44
src/file/numbering/abstract-numbering.spec.ts
View File

@ -5,7 +5,7 @@ import { EMPTY_OBJECT } from "file/xml-components";
import { AlignmentType, EmphasisMarkType, TabStopPosition } from "../paragraph";
import { UnderlineType } from "../paragraph/run/underline";
import { ShadingType } from "../table";
import { ShadingType } from "../shading";
import { AbstractNumbering } from "./abstract-numbering";
import { LevelFormat, LevelSuffix } from "./level";
@ -618,55 +618,31 @@ describe("AbstractNumbering", () => {
const shadingTests = [
{
shadow: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
shading: {
val: ShadingType.DIAGONAL_STRIPE,
fill: "006622",
color: "0000FF",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
expected: [{ "w:shd": { _attr: { "w:val": "diagStripe", "w:fill": "006622", "w:color": "0000FF" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
val: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
];
shadingTests.forEach(({ shadow, shading, expected }) => {
it("#shadow correctly", () => {
shadingTests.forEach(({ shading, expected }) => {
it("#shade correctly", () => {
const abstractNumbering = new AbstractNumbering(1, [
{
level: 0,
format: LevelFormat.LOWER_ROMAN,
text: "%0.",
style: {
run: { shadow, shading },
run: { shading },
},
},
]);

4
src/file/paragraph/paragraph.spec.ts
View File

@ -7,8 +7,8 @@ import { EMPTY_OBJECT } from "file/xml-components";
import { IViewWrapper } from "../document-wrapper";
import { File } from "../file";
import { ShadingType } from "../shading";
import { HorizontalPositionAlign, VerticalPositionAlign } from "../shared";
import { ShadingType } from "../table/shading";
import { AlignmentType, HeadingLevel, LeaderType, PageBreak, TabStopPosition, TabStopType } from "./formatting";
import { FrameAnchorType } from "./frame";
import { Bookmark, ExternalHyperlink } from "./links";
@ -835,7 +835,7 @@ describe("Paragraph", () => {
it("should set shading to the given value", () => {
const paragraph = new Paragraph({
shading: {
type: ShadingType.REVERSE_DIAGONAL_STRIPE,
val: ShadingType.REVERSE_DIAGONAL_STRIPE,
color: "00FFFF",
fill: "FF0000",
},

11
src/file/paragraph/properties.ts
View File

@ -1,7 +1,7 @@
// http://officeopenxml.com/WPparagraphProperties.php
import { IContext, IgnoreIfEmptyXmlComponent, IXmlableObject, XmlComponent } from "file/xml-components";
import { DocumentWrapper } from "../document-wrapper";
import { ShadingType } from "../table/shading";
import { IShadingAttributesProperties, Shading } from "../shading";
import { Alignment, AlignmentType } from "./formatting/alignment";
import { Bidirectional } from "./formatting/bidirectional";
import { Border, IBorderOptions, ThematicBreak } from "./formatting/border";
@ -15,7 +15,6 @@ import { NumberProperties } from "./formatting/unordered-list";
import { WidowControl } from "./formatting/widow-control";
import { FrameProperties, IFrameOptions } from "./frame/frame-properties";
import { OutlineLevel } from "./links";
import { Shading } from "./run/formatting";
export interface IParagraphStylePropertiesOptions {
readonly alignment?: AlignmentType;
@ -50,11 +49,7 @@ export interface IParagraphPropertiesOptions extends IParagraphStylePropertiesOp
readonly instance?: number;
readonly custom?: boolean;
};
readonly shading?: {
readonly type: ShadingType;
readonly fill: string;
readonly color: string;
};
readonly shading?: IShadingAttributesProperties;
readonly widowControl?: boolean;
readonly frame?: IFrameOptions;
}
@ -131,7 +126,7 @@ export class ParagraphProperties extends IgnoreIfEmptyXmlComponent {
}
if (options.shading) {
this.push(new Shading(options.shading.type, options.shading.fill, options.shading.color));
this.push(new Shading(options.shading));
}
if (options.rightTabStop) {

13
src/file/paragraph/run/formatting.ts
View File

@ -186,16 +186,3 @@ export class HighlightComplexScript extends XmlComponent {
);
}
}
export class Shading extends XmlComponent {
constructor(value: string, fill: string, color: string) {
super("w:shd");
this.root.push(
new Attributes({
val: value,
fill: fill,
color: color,
}),
);
}
}

15
src/file/paragraph/run/properties.ts
View File

@ -1,4 +1,4 @@
import { ShadingType } from "file/table";
import { IShadingAttributesProperties, Shading } from "file/shading";
import { IgnoreIfEmptyXmlComponent, XmlComponent } from "file/xml-components";
import { EmphasisMark, EmphasisMarkType } from "./emphasis-mark";
import {
@ -15,7 +15,6 @@ import {
Italics,
ItalicsComplexScript,
RightToLeft,
Shading,
Size,
SizeComplexScript,
SmallCaps,
@ -57,12 +56,7 @@ export interface IRunStylePropertiesOptions {
readonly highlight?: string;
readonly highlightComplexScript?: boolean | string;
readonly characterSpacing?: number;
readonly shading?: {
readonly type: ShadingType;
readonly fill: string;
readonly color: string;
};
readonly shadow?: IRunStylePropertiesOptions["shading"];
readonly shading?: IShadingAttributesProperties;
readonly emboss?: boolean;
readonly imprint?: boolean;
}
@ -179,9 +173,8 @@ export class RunProperties extends IgnoreIfEmptyXmlComponent {
this.push(new Imprint());
}
const shading = options.shading || options.shadow;
if (shading) {
this.push(new Shading(shading.type, shading.fill, shading.color));
if (options.shading) {
this.push(new Shading(options.shading));
}
}

4
src/file/paragraph/run/run.spec.ts
View File

@ -2,7 +2,7 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
// import { FootnoteReferenceRun } from "file/footnotes/footnote/run/reference-run";
import { ShadingType } from "file/table";
import { ShadingType } from "file/shading";
import { Run } from "./";
import { EmphasisMarkType } from "./emphasis-mark";
@ -234,7 +234,7 @@ describe("Run", () => {
it("it should add shadow to the properties", () => {
const run = new Run({
shading: {
type: ShadingType.PERCENT_10,
val: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},

0
src/file/table/shading/index.ts → src/file/shading/index.ts
View File

8
src/file/table/shading/shading.spec.ts → src/file/shading/shading.spec.ts
View File

@ -2,12 +2,12 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { ShadingType, TableShading } from "./shading";
import { Shading, ShadingType } from "./shading";
describe("TableShading", () => {
describe("Shading", () => {
describe("#constructor", () => {
it("should create", () => {
const shading = new TableShading({});
const shading = new Shading({});
const tree = new Formatter().format(shading);
expect(tree).to.deep.equal({
"w:shd": {
@ -17,7 +17,7 @@ describe("TableShading", () => {
});
it("should create with params", () => {
const shading = new TableShading({ val: ShadingType.PERCENT_40, color: "FF0000", fill: "555555" });
const shading = new Shading({ val: ShadingType.PERCENT_40, color: "FF0000", fill: "555555" });
const tree = new Formatter().format(shading);
expect(tree).to.deep.equal({
"w:shd": {

14
src/file/table/shading/shading.ts → src/file/shading/shading.ts
View File

@ -1,14 +1,18 @@
// Note that the shading type is identical in all places,
// regardless of where it's used like paragraph/table/etc.
//
// http://officeopenxml.com/WPshading.php
// http://officeopenxml.com/WPtableShading.php
// http://officeopenxml.com/WPtableCellProperties-Shading.php
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
export interface ITableShadingAttributesProperties {
export interface IShadingAttributesProperties {
readonly fill?: string;
readonly color?: string;
readonly val?: ShadingType;
}
class TableShadingAttributes extends XmlAttributeComponent<ITableShadingAttributesProperties> {
class ShadingAttributes extends XmlAttributeComponent<IShadingAttributesProperties> {
protected readonly xmlKeys = {
fill: "w:fill",
color: "w:color",
@ -16,10 +20,10 @@ class TableShadingAttributes extends XmlAttributeComponent<ITableShadingAttribut
};
}
export class TableShading extends XmlComponent {
constructor(attrs: ITableShadingAttributesProperties) {
export class Shading extends XmlComponent {
constructor(attrs: IShadingAttributesProperties) {
super("w:shd");
this.root.push(new TableShadingAttributes(attrs));
this.root.push(new ShadingAttributes(attrs));
}
}

42
src/file/styles/style/character-style.spec.ts
View File

@ -3,7 +3,7 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { EmphasisMarkType } from "file/paragraph/run/emphasis-mark";
import { UnderlineType } from "file/paragraph/run/underline";
import { ShadingType } from "file/table";
import { ShadingType } from "file/shading";
import { EMPTY_OBJECT } from "file/xml-components";
import { StyleForCharacter } from "./character-style";
@ -777,8 +777,8 @@ describe("CharacterStyle", () => {
const shadingTests = [
{
shadow: {
type: ShadingType.PERCENT_10,
shading: {
val: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
@ -786,42 +786,18 @@ describe("CharacterStyle", () => {
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
val: ShadingType.SOLID,
fill: "AA0000",
color: "DD0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
expected: [{ "w:shd": { _attr: { "w:val": "solid", "w:fill": "AA0000", "w:color": "DD0000" } } }],
},
];
shadingTests.forEach(({ shadow, shading, expected }) => {
shadingTests.forEach(({ shading, expected }) => {
it("#shadow correctly", () => {
const style = new StyleForCharacter({
id: "myStyleId",
run: { shadow, shading },
run: { shading },
});
const tree = new Formatter().format(style);
expect(tree).to.deep.equal({

44
src/file/styles/style/paragraph-style.spec.ts
View File

@ -3,7 +3,7 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { AlignmentType, EmphasisMarkType, TabStopPosition } from "file/paragraph";
import { UnderlineType } from "file/paragraph/run/underline";
import { ShadingType } from "file/table";
import { ShadingType } from "file/shading";
import { EMPTY_OBJECT } from "file/xml-components";
import { StyleForParagraph } from "./paragraph-style";
@ -653,8 +653,8 @@ describe("ParagraphStyle", () => {
const shadingTests = [
{
shadow: {
type: ShadingType.PERCENT_10,
shading: {
val: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
@ -662,42 +662,18 @@ describe("ParagraphStyle", () => {
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
val: ShadingType.DIAGONAL_CROSS,
fill: "0066FF",
color: "0000FF",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
},
{
shading: {
type: ShadingType.PERCENT_10,
fill: "00FFFF",
color: "FF0000",
},
expected: [{ "w:shd": { _attr: { "w:val": "pct10", "w:fill": "00FFFF", "w:color": "FF0000" } } }],
expected: [{ "w:shd": { _attr: { "w:val": "diagCross", "w:fill": "0066FF", "w:color": "0000FF" } } }],
},
];
shadingTests.forEach(({ shadow, shading, expected }) => {
it("#shadow correctly", () => {
shadingTests.forEach(({ shading, expected }) => {
it("#shade correctly", () => {
const style = new StyleForParagraph({
id: "myStyleId",
run: { shadow, shading },
run: { shading },
});
const tree = new Formatter().format(style);
expect(tree).to.deep.equal({

1
src/file/table/index.ts
View File

@ -1,5 +1,4 @@
export * from "./table";
export * from "./table-cell";
export * from "./table-properties";
export * from "./shading";
export * from "./table-row";

6
src/file/table/table-cell/table-cell-properties.ts
View File

@ -1,6 +1,6 @@
import { IgnoreIfEmptyXmlComponent } from "file/xml-components";
import { ITableShadingAttributesProperties, TableShading } from "../shading";
import { IShadingAttributesProperties, Shading } from "../../shading";
import { ITableCellMarginOptions, TableCellMargin } from "./cell-margin/table-cell-margins";
import {
GridSpan,
@ -17,7 +17,7 @@ import {
} from "./table-cell-components";
export interface ITableCellPropertiesOptions {
readonly shading?: ITableShadingAttributesProperties;
readonly shading?: IShadingAttributesProperties;
readonly margins?: ITableCellMarginOptions;
readonly verticalAlign?: VerticalAlign;
readonly textDirection?: TextDirection;
@ -55,7 +55,7 @@ export class TableCellProperties extends IgnoreIfEmptyXmlComponent {
}
if (options.shading) {
this.root.push(new TableShading(options.shading));
this.root.push(new Shading(options.shading));
}
if (options.margins) {

2
src/file/table/table-cell/table-cell.spec.ts
View File

@ -3,7 +3,7 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { BorderStyle } from "file/styles";
import { ShadingType } from "../shading";
import { ShadingType } from "file/shading";
import { TableCell } from "./table-cell";
import { TableCellBorders, TableCellWidth, TextDirection, VerticalAlign, VerticalMergeType, WidthType } from "./table-cell-components";

5
src/file/table/table-properties/table-properties.spec.ts
View File

@ -2,8 +2,9 @@ import { expect } from "chai";
import { Formatter } from "export/formatter";
import { AlignmentType } from "../../paragraph";
import { ShadingType } from "../shading";
import { AlignmentType } from "file/paragraph";
import { ShadingType } from "file/shading";
import { WidthType } from "../table-cell";
import { TableLayoutType } from "./table-layout";
import { TableProperties } from "./table-properties";

6
src/file/table/table-properties/table-properties.ts
View File

@ -2,7 +2,7 @@
import { IgnoreIfEmptyXmlComponent } from "file/xml-components";
import { Alignment, AlignmentType } from "../../paragraph";
import { ITableShadingAttributesProperties, TableShading } from "../shading";
import { IShadingAttributesProperties, Shading } from "../../shading";
import { WidthType } from "../table-cell";
import { ITableBordersOptions, TableBorders } from "./table-borders";
import { ITableCellMarginOptions, TableCellMargin } from "./table-cell-margin";
@ -20,7 +20,7 @@ export interface ITablePropertiesOptions {
readonly layout?: TableLayoutType;
readonly borders?: ITableBordersOptions;
readonly float?: ITableFloatOptions;
readonly shading?: ITableShadingAttributesProperties;
readonly shading?: IShadingAttributesProperties;
readonly style?: string;
readonly alignment?: AlignmentType;
readonly cellMargin?: ITableCellMarginOptions;
@ -56,7 +56,7 @@ export class TableProperties extends IgnoreIfEmptyXmlComponent {
}
if (options.shading) {
this.root.push(new TableShading(options.shading));
this.root.push(new Shading(options.shading));
}
if (options.layout) {